Solution of the issue of focus on clicking

Selected element in the palette is now colored green making it easier to
see that it is selected.

Change-Id: I09006eb537495343bef3dfdad2888a3d96135e29

appinventor/appengine/src/com/google/appinventor/client/editor/simple/palette/SimplePaletteItem.java

@@ -12,6 +12,8 @@ import com.google.appinventor.client.editor.simple.components.MockComponentsUtil
 import com.google.appinventor.client.widgets.dnd.DragSourcePanel;
 import com.google.appinventor.client.widgets.dnd.DragSourceSupport;
 import com.google.appinventor.client.widgets.dnd.DropTarget;
+import com.google.gwt.event.dom.client.MouseDownEvent;
+import com.google.gwt.event.dom.client.MouseDownHandler;
 import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Label;
@@ -32,6 +34,9 @@ public class SimplePaletteItem extends DragSourcePanel {
   // Properties of the prototype may be queried by accessors.
   private MockComponent componentPrototype;
 
+  //It is here to keep the selected panel item
+  private static Widget selectedPaletteItemWidget;
+
   /**
    * Creates a new palette item.
    *
@@ -79,6 +84,30 @@ public class SimplePaletteItem extends DragSourcePanel {
     panel.setWidth("100%");
     add(panel);
     setWidth("100%");
+
+    addHandlers();
+  }
+
+  /**
+   * Selects (sets the background to green of) a palette item when it is clicked.
+   *
+   * @param paletteItemWidget the Widget of the panel item to be selected
+   */
+  private static void select(Widget paletteItemWidget) {
+    if (selectedPaletteItemWidget != null) {
+      selectedPaletteItemWidget.getElement().getStyle().setProperty("backgroundColor", "white");
+    }
+    selectedPaletteItemWidget = paletteItemWidget;
+    selectedPaletteItemWidget.getElement().getStyle().setProperty("backgroundColor", "#d2e0a6");
+  }
+
+  private void addHandlers() {
+    addMouseDownHandler(new MouseDownHandler() {
+      @Override
+      public void onMouseDown(MouseDownEvent arg0) {
+        select(getWidget());
+      }
+    });
   }
 
   /**
@@ -97,8 +126,7 @@ public class SimplePaletteItem extends DragSourcePanel {
   }
 
   /**
-   * Returns whether this palette item creates components with a
-   * visual representation.
+   * Returns whether this palette item creates components with a visual representation.
    */
   public boolean isVisibleComponent() {
     cacheInternalComponentPrototype();

appinventor/appengine/war/Ya.css

@@ -794,7 +794,7 @@ select {
   background-color: white; /* needed on Firefox */
   height: 15px;
   cursor: pointer;
-  padding-bottom: 10px;
+  padding: 5px;
 }
 
 .ode-SimplePaletteItem-icon {