[gnome-shell/wip/sass: 24/52] popupMenu: Add active CSS pseudo class

[Carlos Soriano Sánchez <csoriano src gnome org>]

commit d746f7abc78745a4631ae17633e60ef735484226
Author: Carlos Soriano <csoriano gnome org>
Date:   Wed Feb 18 17:07:59 2015 +0100

    popupMenu: Add active CSS pseudo class
    
    So we can style it differently than :hover.
    We already have a active state for the menu items which includes
    more than hover. For example, when the keyboard focus moves to a item
    or we select programatically a item.
    For this reason we need a style class named active for the meaning we
    give to it in menu items, and a pseudo class active with the meaning
    CSS has.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=744680

 data/theme/_common.scss                  |    8 +++-
 data/theme/gnome-shell-high-contrast.css |   67 ++++++++++++++++--------------
 data/theme/gnome-shell.css               |    6 ++-
 js/ui/popupMenu.js                       |   20 ++++++++-
 4 files changed, 66 insertions(+), 35 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 08e988c..883810a 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -425,9 +425,15 @@ StScrollBar {
       background-color: darken($bg_color,2%);
       box-shadow: inset 0 1px 0px lighten($borders_color,5%);
     }
-    &:active { background-color: $selected_bg_color; }
+    &:hover { background-color: $selected_bg_color; }
+    &:active { background-color: darken($selected_bg_color,5%); }
     &:insensitive { background-color: transparentize($bg_color,.5); }
   }
+
+  .active {
+    background-color: $selected_bg_color;
+  }
+
   .popup-inactive-menu-item { //all icons and other graphical elements
     color: $fg_color;
 
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 4fdf481..db26f0b 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -763,10 +763,14 @@ StScrollBar {
     .popup-menu .popup-menu-item:checked {
       background-color: black;
       box-shadow: inset 0 1px 0px #0d0d0d; }
-    .popup-menu .popup-menu-item:active {
+    .popup-menu .popup-menu-item:hover {
       background-color: #215d9c; }
+    .popup-menu .popup-menu-item:active {
+      background-color: #1c5187; }
     .popup-menu .popup-menu-item:insensitive {
       background-color: rgba(0, 0, 0, 0.5); }
+  .popup-menu .active {
+    background-color: #215d9c; }
   .popup-menu .popup-inactive-menu-item {
     color: #fff; }
     .popup-menu .popup-inactive-menu-item:insensitive {
@@ -913,7 +917,8 @@ StScrollBar {
       -panel-corner-background-color: transparent;
       -panel-corner-border-color: transparent; }
   #panel .panel-button {
-    padding: 0px 12px;
+    -natural-hpadding: 12px;
+    -minimum-hpadding: 6px;
     font-weight: bold;
     color: #ccc;
     transition-duration: 100ms; }
@@ -1343,33 +1348,33 @@ StScrollBar {
   background-color: rgba(255, 255, 255, 0.1);
   transition-duration: 200ms; }
 
-.app-well-app.running > .overview-icon,
-.app-well-app.app-folder.running > .overview-icon,
-.show-apps.running > .overview-icon,
-.grid-search-result.running > .overview-icon {
+.app-well-app.running .overview-icon,
+.app-well-app.app-folder.running .overview-icon,
+.show-apps.running .overview-icon,
+.grid-search-result.running .overview-icon {
   text-shadow: black 0px 2px 2px; }
-.app-well-app:active > .overview-icon, .app-well-app:checked > .overview-icon,
-.app-well-app.app-folder:active > .overview-icon,
-.app-well-app.app-folder:checked > .overview-icon,
-.show-apps:active > .overview-icon,
-.show-apps:checked > .overview-icon,
-.grid-search-result:active > .overview-icon,
-.grid-search-result:checked > .overview-icon {
-  background-color: rgba(0, 0, 0, 0.9);
+.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
+.app-well-app.app-folder:active .overview-icon,
+.app-well-app.app-folder:checked .overview-icon,
+.show-apps:active .overview-icon,
+.show-apps:checked .overview-icon,
+.grid-search-result:active .overview-icon,
+.grid-search-result:checked .overview-icon {
+  background-color: rgba(23, 25, 26, 0.9);
   box-shadow: inset 0 1px 2px black; }
-.app-well-app:hover > .overview-icon, .app-well-app.running:hover > .overview-icon, .app-well-app:focus > 
.overview-icon, .app-well-app:selected > .overview-icon,
-.app-well-app.app-folder:hover > .overview-icon,
-.app-well-app.app-folder.running:hover > .overview-icon,
-.app-well-app.app-folder:focus > .overview-icon,
-.app-well-app.app-folder:selected > .overview-icon,
-.show-apps:hover > .overview-icon,
-.show-apps.running:hover > .overview-icon,
-.show-apps:focus > .overview-icon,
-.show-apps:selected > .overview-icon,
-.grid-search-result:hover > .overview-icon,
-.grid-search-result.running:hover > .overview-icon,
-.grid-search-result:focus > .overview-icon,
-.grid-search-result:selected > .overview-icon {
+.app-well-app:hover .overview-icon, .app-well-app.running:hover .overview-icon, .app-well-app:focus 
.overview-icon, .app-well-app:selected .overview-icon,
+.app-well-app.app-folder:hover .overview-icon,
+.app-well-app.app-folder.running:hover .overview-icon,
+.app-well-app.app-folder:focus .overview-icon,
+.app-well-app.app-folder:selected .overview-icon,
+.show-apps:hover .overview-icon,
+.show-apps.running:hover .overview-icon,
+.show-apps:focus .overview-icon,
+.show-apps:selected .overview-icon,
+.grid-search-result:hover .overview-icon,
+.grid-search-result.running:hover .overview-icon,
+.grid-search-result:focus .overview-icon,
+.grid-search-result:selected .overview-icon {
   background-color: rgba(255, 255, 255, 0.1);
   transition-duration: 0ms;
   border-image: none;
@@ -1382,10 +1387,10 @@ StScrollBar {
   margin-bottom: 2px; }
 
 .search-provider-icon,
-.list-search-result, .app-well-app > .overview-icon,
-.app-well-app.app-folder > .overview-icon,
-.show-apps > .overview-icon,
-.grid-search-result > .overview-icon {
+.list-search-result, .app-well-app .overview-icon,
+.app-well-app.app-folder .overview-icon,
+.show-apps .overview-icon,
+.grid-search-result .overview-icon {
   border-radius: 4px;
   padding: 6px;
   border: 1px solid transparent;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c0e6b59..3bdaa95 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -763,10 +763,14 @@ StScrollBar {
     .popup-menu .popup-menu-item:checked {
       background-color: #343a3a;
       box-shadow: inset 0 1px 0px #282c2c; }
-    .popup-menu .popup-menu-item:active {
+    .popup-menu .popup-menu-item:hover {
       background-color: #215d9c; }
+    .popup-menu .popup-menu-item:active {
+      background-color: #1c5187; }
     .popup-menu .popup-menu-item:insensitive {
       background-color: rgba(57, 63, 63, 0.5); }
+  .popup-menu .active {
+    background-color: #215d9c; }
   .popup-menu .popup-inactive-menu-item {
     color: #eeeeec; }
     .popup-menu .popup-inactive-menu-item:insensitive {
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 5b0db03..a3bab79 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -91,6 +91,7 @@ const PopupBaseMenuItem = new Lang.Class({
             this.actor.add_style_class_name(params.style_class);
 
         if (this._activatable) {
+            this.actor.connect('button-press-event', Lang.bind(this, this._onButtonPressEvent));
             this.actor.connect('button-release-event', Lang.bind(this, this._onButtonReleaseEvent));
             this.actor.connect('touch-event', Lang.bind(this, this._onTouchEvent));
             this.actor.connect('key-press-event', Lang.bind(this, this._onKeyPressEvent));
@@ -114,15 +115,26 @@ const PopupBaseMenuItem = new Lang.Class({
         this._parent = parent;
     },
 
+    _onButtonPressEvent: function (actor, event) {
+        // This is the CSS active state
+        this.actor.add_style_pseudo_class ('active');
+        return Clutter.EVENT_PROPAGATE;
+    },
+
     _onButtonReleaseEvent: function (actor, event) {
+        this.actor.remove_style_pseudo_class ('active');
         this.activate(event);
         return Clutter.EVENT_STOP;
     },
 
     _onTouchEvent: function (actor, event) {
         if (event.type() == Clutter.EventType.TOUCH_END) {
+            this.actor.remove_style_pseudo_class ('active');
             this.activate(event);
             return Clutter.EVENT_STOP;
+        } else if (event.type() == Clutter.EventType.TOUCH_BEGIN) {
+            // This is the CSS active state
+            this.actor.add_style_pseudo_class ('active');
         }
         return Clutter.EVENT_PROPAGATE;
     },
@@ -158,10 +170,11 @@ const PopupBaseMenuItem = new Lang.Class({
         if (activeChanged) {
             this.active = active;
             if (active) {
-                this.actor.add_style_pseudo_class('active');
+                this.actor.add_style_class_name('active');
                 this.actor.grab_key_focus();
             } else {
-                this.actor.remove_style_pseudo_class('active');
+                this.actor.remove_style_class_name('active');
+                this.actor.remove_style_pseudo_class ('active');
             }
             this.emit('active-changed', active);
         }
@@ -1125,6 +1138,9 @@ const PopupSubMenuMenuItem = new Lang.Class({
     },
 
     _onButtonReleaseEvent: function(actor) {
+        // Since we override the parent, we need to manage what the parent does
+        // with the active style class
+        this.actor.remove_style_pseudo_class ('active');
         this._setOpenState(!this._getOpenState());
         return Clutter.EVENT_PROPAGATE;
     }