keyboard: Set 'latched' pseudo-class on latched shift key

This is pseudo-class is added on .shift-key-uppercase whenever the shift
state is latched, a matching selector would be:
.keyboard-key.shift-key-uppercase:latched {}

https://gitlab.gnome.org/GNOME/gnome-shell/issues/46

js/ui/keyboard.js

@@ -450,6 +450,13 @@ var Key = new Lang.Class({
     setWidth: function (width) {
         this.keyButton.keyWidth = width;
     },
+
+    setLatched: function (latched) {
+        if (latched)
+            this.keyButton.add_style_pseudo_class('latched');
+        else
+            this.keyButton.remove_style_pseudo_class('latched');
+    },
 });
 Signals.addSignalMethods(Key.prototype);
 
@@ -749,6 +756,8 @@ var Keyboard = new Lang.Class({
             let level = (i >= 1 && levels.length == 3) ? i + 1 : i;
 
             let layout = new KeyContainer();
+            layout.shiftKeys = [];
+
             this._loadRows(currentLevel, level, levels.length, layout);
             layers[level] = layout;
             this.actor.add(layout, { expand: true });
@@ -842,9 +851,12 @@ var Keyboard = new Lang.Class({
                     this._popupLanguageMenu(actor);
             }));
 
-            if (switchToLevel == 1) {
+            if (switchToLevel == 0) {
+                layout.shiftKeys.push(extraButton);
+            } else if (switchToLevel == 1) {
                 extraButton.connect('long-press', Lang.bind(this, function() {
                     this._latched = true;
+                    this._setCurrentLevelLatched(this._current_page, this._latched);
                 }));
             }
 
@@ -868,6 +880,13 @@ var Keyboard = new Lang.Class({
         }
     },
 
+    _setCurrentLevelLatched: function(layout, latched) {
+        for (let i = 0; layout.shiftKeys[i]; i++) {
+            let key = layout.shiftKeys[i];
+            key.setLatched(latched);
+        }
+    },
+
     _getDefaultKeysForRow: function(row, numRows, level) {
         let pre, post;
 
@@ -961,6 +980,7 @@ var Keyboard = new Lang.Class({
         let layers = this._groups[activeGroupName];
 
         if (this._current_page != null) {
+            this._setCurrentLevelLatched(this._current_page, false);
             this._current_page.hide();
         }