[gnome-shell] unlockDialog: Show unlock hint on inactivity

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit e57768e2e84e075bb2cde16b64459d69c14fa45e
Author: Florian Müllner <fmuellner gnome org>
Date:   Tue Feb 11 19:35:22 2020 +0100

    unlockDialog: Show unlock hint on inactivity
    
    Inactivity on the unlock screen can be an indication that the user
    doesn't know how to get to the auth prompt. Fade in a small hint
    that points them in the right direction.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/972

 .../gnome-shell-sass/widgets/_screen-shield.scss   |  7 ++++-
 js/ui/unlockDialog.js                              | 36 ++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss 
b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
index 9b362a5407..7875c053e8 100644
--- a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
@@ -4,12 +4,12 @@
   color: white;
   font-weight: 300;
   text-align: center;
+  spacing: 24px;
   padding-bottom: 2.5em;
 }
 
 .unlock-dialog-clock-time {
   font-size: 64pt;
-  padding-bottom: 24px;
   padding-top: 42px;
   font-feature-settings: "tnum";
 }
@@ -19,6 +19,11 @@
   font-weight: normal;
 }
 
+.unlock-dialog-clock-hint {
+  font-weight: normal;
+  padding-top: 48px;
+}
+
 .unlock-dialog-notifications-container {
   margin: 12px 0;
   spacing: 6px;
diff --git a/js/ui/unlockDialog.js b/js/ui/unlockDialog.js
index d535a721b6..41d0e08cc6 100644
--- a/js/ui/unlockDialog.js
+++ b/js/ui/unlockDialog.js
@@ -15,6 +15,9 @@ const AuthPrompt = imports.gdm.authPrompt;
 // The timeout before going back automatically to the lock screen (in seconds)
 const IDLE_TIMEOUT = 2 * 60;
 
+// The timeout before showing the unlock hint (in seconds)
+const HINT_TIMEOUT = 4;
+
 const SCREENSAVER_SCHEMA = 'org.gnome.desktop.screensaver';
 
 const CROSSFADE_TIME = 300;
@@ -323,14 +326,37 @@ class UnlockDialogClock extends St.BoxLayout {
             style_class: 'unlock-dialog-clock-date',
             x_align: Clutter.ActorAlign.CENTER,
         });
+        this._hint = new St.Label({
+            style_class: 'unlock-dialog-clock-hint',
+            x_align: Clutter.ActorAlign.CENTER,
+            opacity: 0,
+        });
 
         this.add_child(this._time);
         this.add_child(this._date);
+        this.add_child(this._hint);
 
         this._wallClock = new GnomeDesktop.WallClock({ time_only: true });
         this._wallClock.connect('notify::clock', this._updateClock.bind(this));
 
+        this._seat = Clutter.get_default_backend().get_default_seat();
+        this._touchModeChangedId = this._seat.connect('notify::touch-mode',
+            this._updateHint.bind(this));
+
+        this._monitorManager = Meta.MonitorManager.get();
+        this._powerModeChangedId = this._monitorManager.connect(
+            'power-save-mode-changed', () => (this._hint.opacity = 0));
+
+        this._idleMonitor = Meta.IdleMonitor.get_core();
+        this._idleWatchId = this._idleMonitor.add_idle_watch(HINT_TIMEOUT * 1000, () => {
+            this._hint.ease({
+                opacity: 255,
+                duration: CROSSFADE_TIME,
+            });
+        });
+
         this._updateClock();
+        this._updateHint();
 
         this.connect('destroy', this._onDestroy.bind(this));
     }
@@ -345,8 +371,18 @@ class UnlockDialogClock extends St.BoxLayout {
         this._date.text = date.toLocaleFormat(dateFormat);
     }
 
+    _updateHint() {
+        this._hint.text = this._seat.touch_mode
+            ? _('Swipe up to unlock')
+            : _('Click or press a key to unlock');
+    }
+
     _onDestroy() {
         this._wallClock.run_dispose();
+
+        this._seat.disconnect(this._touchModeChangedId);
+        this._idleMonitor.remove_watch(this._idleWatchId);
+        this._monitorManager.disconnect(this._powerModeChangedId);
     }
 });