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

@@ -312,7 +312,7 @@ StScrollBar {
     &:ltr { padding-right: 17px; }
     &:rtl { padding-left: 17px; }
   }
-  
+
   .show-processes-dialog-app-list-item-name {
     font-size: 10pt;
   }
@@ -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;
 

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 {

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 {

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,17 @@ 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');
+                // Remove the CSS active state if the user press the button and
+                // while holding moves to another menu item, so we don't paint all items.
+                // The correct behaviour would be to set the new item with the CSS
+                // active state as well, but button-press-event is not trigered,
+                // so we should track it in our own, which would involve some work
+                // in the container
+                this.actor.remove_style_pseudo_class ('active');
             }
             this.emit('active-changed', active);
         }
@@ -1125,6 +1144,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;
     }