dash: Refactor favRemoveTarget to showAppsIcon

In the new designs, we no longer need favRemoveTarget. As it shares a lot
of its functionality with the new showAppsIcon, we refactor and restyle it
accordingly.

https://bugzilla.gnome.org/show_bug.cgi?id=682109

data/theme/gnome-shell.css

@@ -49,7 +49,7 @@ stage {
 .window-caption,
 .switcher-list, 
 .app-well-app > .overview-icon,
-.remove-favorite > .overview-icon,
+.show-apps > .overview-icon,
 .search-result-content > .overview-icon {
     font-size: 9pt;
     font-weight: bold;
@@ -803,21 +803,12 @@ StButton.popup-menu-item:insensitive {
     outline: 1px solid #aaa;
 }
 
-.dash-item-container > .app-well-app {
+.dash-item-container > StButton {
     padding: 4px 8px;
 }
 
-.remove-favorite-icon {
-    color: #a0a0a0;
-}
-
-.remove-favorite-icon:hover {
-    color: white;
-    icon-shadow: black 0px 2px 2px;
-}
-
 .app-well-app > .overview-icon,
-.remove-favorite > .overview-icon,
+.show-apps > .overview-icon,
 .search-result-content > .overview-icon {
     border-radius: 4px;
     padding: 3px;
@@ -833,15 +824,44 @@ StButton.popup-menu-item:insensitive {
 }
 
 .app-well-app:hover > .overview-icon,
-.remove-favorite:hover > .overview-icon,
+.show-apps:hover > .overview-icon,
 .search-result-content:hover > .overview-icon {
     background-color: rgba(255,255,255,0.1);
     text-shadow: black 0px 2px 2px;
     transition-duration: 100;
+    color:white;
+}
+
+.show-apps {
+    padding: 4px 0;
+}
+
+.show-apps-icon {
+    color: #a0a0a0;
+}
+
+.show-apps:hover .show-apps-icon {
+    color: white;
+}
+
+.show-apps:checked > .overview-icon {
+    background-gradient-start: rgba(255, 255, 255, .05);
+    background-gradient-end: rgba(255, 255, 255, .15);
+    background-gradient-direction: vertical;
+    border-radius: 4px;
+    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 1);
+    transition-duration: 100;
+}
+
+.show-apps:checked .show-apps-icon,
+.show-apps:focus .show-apps-icon {
+    color: white;
+    transition-duration: 100;
 }
 
 .app-well-app:focus > .overview-icon,
 .search-result-content:focus > .overview-icon,
+.show-apps:focus > .overview-icon,
 .app-well-app:selected > .overview-icon,
 .search-result-content:selected > .overview-icon {
     background-color: rgba(255,255,255,0.33);

js/ui/dash.js

@@ -226,34 +226,39 @@ const DashItemContainer = new Lang.Class({
     }
 });
 
-const RemoveFavoriteIcon = new Lang.Class({
+const ShowAppsIcon = new Lang.Class({
-    Name: 'RemoveFavoriteIcon',
+    Name: 'ShowAppsIcon',
     Extends: DashItemContainer,
 
     _init: function() {
         this.parent();
 
-        this._iconBin = new St.Bin({ style_class: 'remove-favorite' });
+        this._button = new St.Button({ style_class: 'show-apps',
+                                        track_hover: true,
+                                        can_focus: true,
+                                        toggle_mode: true });
         this._iconActor = null;
-        this.icon = new IconGrid.BaseIcon(_("Remove"),
+        this.icon = new IconGrid.BaseIcon(_("Show Applications"),
                                            { setSizeManually: true,
                                              showLabel: false,
                                              createIcon: Lang.bind(this, this._createIcon) });
-        this._iconBin.set_child(this.icon.actor);
+        this._button.add_actor(this.icon.actor);
-        this._iconBin._delegate = this;
+        this._button._delegate = this;
 
-        this.setChild(this._iconBin);
+        this.setChild(this._button);
     },
 
     _createIcon: function(size) {
-        this._iconActor = new St.Icon({ icon_name: 'user-trash',
+        this._iconActor = new St.Icon({ icon_name: 'view-grid-symbolic',
-                                        style_class: 'remove-favorite-icon',
+                                        style_class: 'show-apps-icon',
+                                        track_hover: true,
+                                        icon_type: St.IconType.SYMBOLIC,
                                         icon_size: size });
         return this._iconActor;
     },
 
     setHover: function(hovered) {
-        this._iconBin.set_hover(hovered);
+        this._button.set_hover(hovered);
         if (this._iconActor)
             this._iconActor.set_hover(hovered);
     },
@@ -306,7 +311,6 @@ const Dash = new Lang.Class({
         this._dragPlaceholder = null;
         this._dragPlaceholderPos = -1;
         this._animatingPlaceholdersCount = 0;
-        this._favRemoveTarget = null;
         this._showLabelTimeoutId = 0;
         this._resetHoverTimeoutId = 0;
         this._labelShowing = false;
@@ -320,10 +324,10 @@ const Dash = new Lang.Class({
         this._box._delegate = this;
         this._container.add(this._box);
 
-        this._favRemoveTarget = new RemoveFavoriteIcon();
+        this._showAppsIcon = new ShowAppsIcon();
-        this._favRemoveTarget.icon.setIconSize(this.iconSize);
+        this._showAppsIcon.icon.setIconSize(this.iconSize);
 
-        this._container.add(this._favRemoveTarget.actor);
+        this._container.add(this._showAppsIcon.actor);
 
         this.actor = new St.Bin({ child: this._container,
                                   y_align: St.Align.START });
@@ -397,13 +401,13 @@ const Dash = new Lang.Class({
 
         let srcIsFavorite = (id in favorites);
 
-        let favRemoveHovered =
+        let showAppsHovered =
-                this._favRemoveTarget.actor.contains(dragEvent.targetActor);
+                this._showAppsIcon.actor.contains(dragEvent.targetActor);
 
-        if (!this._box.contains(dragEvent.targetActor) || favRemoveHovered)
+        if (!this._box.contains(dragEvent.targetActor) || showAppsHovered)
             this._clearDragPlaceholder();
 
-        this._favRemoveTarget.setHover(favRemoveHovered);
+        this._showAppsIcon.setHover(showAppsHovered);
 
         return DND.DragMotionResult.CONTINUE;
     },
@@ -497,7 +501,7 @@ const Dash = new Lang.Class({
                    !actor._delegate.animatingOut;
         });
 
-        iconChildren.push(this._favRemoveTarget.actor);
+        iconChildren.push(this._showAppsIcon.actor);
 
         if (this._maxHeight == -1)
             return;