[gnome-shell] shellEntry: Add CapsLockWarning class

[Florian Müllner <fmuellner src gnome org>]

commit 1d54f1e6ab9fce2fd1e6f26fe265c5b4caf9ae10
Author: Umang Jain <mailumangjain gmail com>
Date:   Fri Dec 13 13:36:14 2019 +0530

    shellEntry: Add CapsLockWarning class
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/619

 data/theme/gnome-shell-sass/_common.scss |  5 ++++
 js/ui/shellEntry.js                      | 41 ++++++++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 2 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 3f63fcb909..8d203ada74 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -404,6 +404,11 @@ StScrollBar {
     padding-bottom: 8px;
   }
 
+  .prompt-dialog-caps-lock-warning {
+    @extend .prompt-dialog-error-label;
+    padding-left: 6.2em;
+  }
+
   .prompt-dialog-info-label {
     font-size: 10pt;
     padding-bottom: 8px;
diff --git a/js/ui/shellEntry.js b/js/ui/shellEntry.js
index 53aed60496..884efc6b5f 100644
--- a/js/ui/shellEntry.js
+++ b/js/ui/shellEntry.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported addContextMenu */
+/* exported addContextMenu CapsLockWarning */
 
-const { Clutter, Shell, St } = imports.gi;
+const { Clutter, GObject, Pango, Shell, St } = imports.gi;
 
 const BoxPointer = imports.ui.boxpointer;
 const Main = imports.ui.main;
@@ -151,3 +151,40 @@ function addContextMenu(entry, params) {
         entry._menuManager = null;
     });
 }
+
+var CapsLockWarning = GObject.registerClass(
+class CapsLockWarning extends St.Label {
+    _init(params) {
+        let defaultParams = { style_class: 'prompt-dialog-error-label' };
+        super._init(Object.assign(defaultParams, params));
+
+        this.text = _('Caps lock is on.');
+
+        this._keymap = Clutter.get_default_backend().get_keymap();
+
+        this.connect('notify::mapped', () => {
+            if (this.is_mapped()) {
+                this.stateChangedId = this._keymap.connect('state-changed',
+                    this._updateCapsLockWarningOpacity.bind(this));
+            } else {
+                this._keymap.disconnect(this.stateChangedId);
+                this.stateChangedId = 0;
+            }
+
+            this._updateCapsLockWarningOpacity();
+        });
+
+        this.connect('destroy', () => {
+            if (this.stateChangedId > 0)
+                this._keymap.disconnect(this.stateChangedId);
+        });
+
+        this.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
+        this.clutter_text.line_wrap = true;
+    }
+
+    _updateCapsLockWarningOpacity() {
+        let capsLockOn = this._keymap.get_caps_lock_state();
+        this.opacity = capsLockOn ? 255 : 0;
+    }
+});