[gnome-shell] loginDialog: consolidate message label and login hint label

[Ray Strode <halfline src gnome org>]

commit a7bbbad1856b23e1c9ff8c7ec85b36f9b688367a
Author: Ray Strode <rstrode redhat com>
Date:   Mon Aug 19 12:00:33 2013 -0400

    loginDialog: consolidate message label and login hint label
    
    Right now the login hint is showing up just above the the cancel
    button, instead of just below the text entry field.
    
    The mockup here:
    
    https://raw.github.com/gnome-design-team/gnome-mockups/master/system-lock-login-boot/login-dissect.png
    
    Says it should share a label with the PAM info/error messages.
    
    This commit consolidates the two labels.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=706324

 data/theme/gnome-shell.css |   16 +++++++++---
 js/gdm/authPrompt.js       |   55 +++++++++++++++++--------------------------
 js/gdm/loginDialog.js      |    2 +-
 js/gdm/util.js             |   26 ++++++++++++--------
 4 files changed, 51 insertions(+), 48 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 221bcc9..4c905bd 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -2281,10 +2281,6 @@ StScrollBar StButton#vhandle:active {
     spacing: 5px;
 }
 
-.login-dialog-prompt-login-hint-message {
-    font-size: 10.5pt;
-}
-
 .login-dialog-user-list-view {
     -st-vfade-offset: 1em;
 }
@@ -2453,10 +2449,22 @@ StScrollBar StButton#vhandle:active {
     background-color: rgba(102, 102, 102, 0.15);
 }
 
+.login-dialog-message-warning,
+.login-dialog-message-info {
+    padding-top: 4px;
+    padding-bottom: 16px;
+    min-height: 2em;
+}
+
 .login-dialog-message-warning {
     color: orange;
 }
 
+.login-dialog-message-hint {
+    padding-bottom: 16px;
+    min-height: 2em;
+}
+
 .user-widget-label {
     font-size: 16pt;
     font-weight: bold;
diff --git a/js/gdm/authPrompt.js b/js/gdm/authPrompt.js
index e3d0ab9..6c26350 100644
--- a/js/gdm/authPrompt.js
+++ b/js/gdm/authPrompt.js
@@ -36,6 +36,8 @@ const BeginRequestType = {
     DONT_PROVIDE_USERNAME: 1
 };
 
+let _messageStyleMap;
+
 const AuthPrompt = new Lang.Class({
     Name: 'AuthPrompt',
 
@@ -58,8 +60,6 @@ const AuthPrompt = new Lang.Class({
         this._userVerifier.connect('verification-failed', Lang.bind(this, this._onVerificationFailed));
         this._userVerifier.connect('verification-complete', Lang.bind(this, this._onVerificationComplete));
         this._userVerifier.connect('reset', Lang.bind(this, this._onReset));
-        this._userVerifier.connect('show-login-hint', Lang.bind(this, this._onShowLoginHint));
-        this._userVerifier.connect('hide-login-hint', Lang.bind(this, this._onHideLoginHint));
         this._userVerifier.connect('smartcard-status-changed', Lang.bind(this, 
this._onSmartcardStatusChanged));
         this.smartcardDetected = this._userVerifier.smartcardDetected;
 
@@ -111,10 +111,7 @@ const AuthPrompt = new Lang.Class({
 
         this._message = new St.Label({ opacity: 0 });
         this._message.clutter_text.line_wrap = true;
-        this.actor.add(this._message, { x_fill: true });
-
-        this._loginHint = new St.Label({ style_class: 'login-dialog-prompt-login-hint-message' });
-        this.actor.add(this._loginHint);
+        this.actor.add(this._message, { x_fill: true, y_align: St.Align.START });
 
         this._buttonBox = new St.BoxLayout({ style_class: 'login-dialog-button-box',
                                              vertical: false });
@@ -242,8 +239,8 @@ const AuthPrompt = new Lang.Class({
             this.reset();
     },
 
-    _onShowMessage: function(userVerifier, message, styleClass) {
-        this.setMessage(message, styleClass);
+    _onShowMessage: function(userVerifier, message, type) {
+        this.setMessage(message, type);
         this.emit('prompted');
     },
 
@@ -266,14 +263,6 @@ const AuthPrompt = new Lang.Class({
         }
     },
 
-    _onShowLoginHint: function(verifier, message) {
-        this.setHint(message);
-    },
-
-    _onHideLoginHint: function() {
-        this.setHint(null);
-    },
-
     addActorToDefaultButtonWell: function(actor) {
         this._defaultButtonWell.add_child(actor);
 
@@ -359,9 +348,6 @@ const AuthPrompt = new Lang.Class({
         this._label.show();
         this._entry.show();
 
-        this._loginHint.opacity = 0;
-        this._loginHint.show();
-
         this._entry.grab_key_focus();
     },
 
@@ -389,13 +375,27 @@ const AuthPrompt = new Lang.Class({
                          });
     },
 
-    setMessage: function(message, styleClass) {
+    _initMessageStyleMap: function() {
+        if (_messageStyleMap)
+            return;
+
+        _messageStyleMap = {};
+        _messageStyleMap[GdmUtil.MessageType.NONE] = '';
+        _messageStyleMap[GdmUtil.MessageType.ERROR] = 'login-dialog-message-warning';
+        _messageStyleMap[GdmUtil.MessageType.INFO] = 'login-dialog-message-info';
+        _messageStyleMap[GdmUtil.MessageType.HINT] = 'login-dialog-message-hint';
+
+    },
+
+    setMessage: function(message, type) {
+        this._initMessageStyleMap();
         if (message) {
             Tweener.removeTweens(this._message);
             this._message.text = message;
-            this._message.styleClass = styleClass;
+            this._message.styleClass = _messageStyleMap[type];
             this._message.opacity = 255;
         } else {
+            this._message.styleClass = null;
             this._message.opacity = 0;
         }
     },
@@ -414,7 +414,7 @@ const AuthPrompt = new Lang.Class({
     hide: function() {
         this.setActorInDefaultButtonWell(null, true);
         this.actor.hide();
-        this._loginHint.opacity = 0;
+        this._message.opacity = 0;
 
         this.setUser(null);
 
@@ -431,16 +431,6 @@ const AuthPrompt = new Lang.Class({
         }
     },
 
-    setHint: function(message) {
-        if (message) {
-            this._loginHint.set_text(message)
-            this._loginHint.opacity = 255;
-        } else {
-            this._loginHint.opacity = 0;
-            this._loginHint.set_text('');
-        }
-    },
-
     reset: function() {
         let oldStatus = this.verificationStatus;
         this.verificationStatus = AuthPromptStatus.NOT_VERIFYING;
@@ -453,7 +443,6 @@ const AuthPrompt = new Lang.Class({
         this._message.opacity = 0;
         this.setUser(null);
         this.stopSpinning();
-        this.setHint(null);
 
         if (oldStatus == AuthPromptStatus.VERIFICATION_FAILED)
             this.emit('failed');
diff --git a/js/gdm/loginDialog.js b/js/gdm/loginDialog.js
index b01ea37..0cec9df 100644
--- a/js/gdm/loginDialog.js
+++ b/js/gdm/loginDialog.js
@@ -638,7 +638,7 @@ const LoginDialog = new Lang.Class({
 
         // Translators: this message is shown below the username entry field
         // to clue the user in on how to login to the local network realm
-        this._authPrompt.setHint(_("(e.g., user or %s)").format(hint));
+        this._authPrompt.setMessage(_("(e.g., user or %s)").format(hint), AuthPrompt.MessageType.HINT);
     },
 
     _askForUsernameAndBeginVerification: function() {
diff --git a/js/gdm/util.js b/js/gdm/util.js
index 7ed5097..bfbd1b3 100644
--- a/js/gdm/util.js
+++ b/js/gdm/util.js
@@ -36,6 +36,13 @@ const DISABLE_USER_LIST_KEY = 'disable-user-list';
 // Give user 16ms to read each character of a PAM message
 const USER_READ_TIME = 16
 
+const MessageType = {
+    NONE: 0,
+    ERROR: 1,
+    INFO: 2,
+    HINT: 3
+};
+
 function fadeInActor(actor) {
     if (actor.opacity == 255 && actor.visible)
         return null;
@@ -225,7 +232,8 @@ const ShellUserVerifier = new Lang.Class({
             return;
 
         let message = this._messageQueue.shift();
-        this.emit('show-message', message.text, message.iconName);
+
+        this.emit('show-message', message.text, message.type);
 
         this._messageQueueTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT,
                                                        message.interval,
@@ -235,11 +243,11 @@ const ShellUserVerifier = new Lang.Class({
                                                        }));
     },
 
-    _queueMessage: function(message, iconName) {
+    _queueMessage: function(message, messageType) {
         let interval = this._getIntervalForMessage(message);
 
         this.hasPendingMessages = true;
-        this._messageQueue.push({ text: message, interval: interval, iconName: iconName });
+        this._messageQueue.push({ text: message, type: messageType, interval: interval });
         this._queueMessageTimeout();
     },
 
@@ -250,7 +258,7 @@ const ShellUserVerifier = new Lang.Class({
             GLib.source_remove(this._messageQueueTimeoutId);
             this._messageQueueTimeoutId = 0;
         }
-        this.emit('show-message', null, null);
+        this.emit('show-message', null, MessageType.NONE);
     },
 
     _checkForFingerprintReader: function() {
@@ -295,7 +303,7 @@ const ShellUserVerifier = new Lang.Class({
         logError(error, where);
         this._hold.release();
 
-        this._queueMessage(_("Authentication error"), 'login-dialog-message-warning');
+        this._queueMessage(_("Authentication error"), MessageType.ERROR);
         this._verificationFailed(false);
     },
 
@@ -399,7 +407,7 @@ const ShellUserVerifier = new Lang.Class({
 
     _onInfo: function(client, serviceName, info) {
         if (this.serviceIsForeground(serviceName)) {
-            this._queueMessage(info, 'login-dialog-message-info');
+            this._queueMessage(info, MessageType.INFO);
         } else if (serviceName == FINGERPRINT_SERVICE_NAME &&
             this._haveFingerprintReader) {
             // We don't show fingerprint messages directly since it's
@@ -408,7 +416,7 @@ const ShellUserVerifier = new Lang.Class({
 
             // Translators: this message is shown below the password entry field
             // to indicate the user can swipe their finger instead
-            this.emit('show-login-hint', _("(or swipe finger)"));
+            this._queueMessage(_("(or swipe finger)"), MessageType.HINT);
         }
     },
 
@@ -416,7 +424,7 @@ const ShellUserVerifier = new Lang.Class({
         if (!this.serviceIsForeground(serviceName))
             return;
 
-        this._queueMessage(problem, 'login-dialog-message-warning');
+        this._queueMessage(problem, MessageType.ERROR);
     },
 
     _onInfoQuery: function(client, serviceName, question) {
@@ -496,8 +504,6 @@ const ShellUserVerifier = new Lang.Class({
         if (this.serviceIsForeground(serviceName)) {
             this._verificationFailed(true);
         }
-
-        this.emit('hide-login-hint');
     },
 });
 Signals.addSignalMethods(ShellUserVerifier.prototype);