[panel] separate "active" state from hover state in PanelBaseMenuItem

When doing keyboard navigation, the active menu item may not be the
one under the mouse.

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

data/theme/gnome-shell.css

@@ -142,7 +142,7 @@ StTooltip {
     padding: 6px 20px;
 }
 
-.panel-menu-item:hover {
+.panel-menu-item:active {
     background-color: #4c4c4c;
 }
 

js/ui/panel.js

@@ -138,11 +138,34 @@ PanelBaseMenuItem.prototype = {
                                   x_fill: true,
                                   y_fill: true,
                                   x_align: St.Align.START });
+        this.active = false;
 
         if (reactive) {
             this.actor.connect('button-release-event', Lang.bind(this, function (actor, event) {
                 this.emit('activate', event);
             }));
+            this.actor.connect('notify::hover', Lang.bind(this, this._hoverChanged));
+        }
+    },
+
+    _hoverChanged: function (actor) {
+        this.setActive(actor.hover);
+    },
+
+    activate: function (event) {
+        this.emit('activate', event);
+    },
+
+    setActive: function (active) {
+        let activeChanged = active != this.active;
+
+        if (activeChanged) {
+            this.active = active;
+            if (active)
+                this.actor.add_style_pseudo_class('active');
+            else
+                this.actor.remove_style_pseudo_class('active');
+            this.emit('active-changed', active);
         }
     }
 };