[gnome-shell] polkitAgent: Implement new design for polkit dialog

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

commit 2f3738fae0a9572935cf21c7c8294ea70074ff77
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Mon Jan 20 14:55:24 2020 +0100

    polkitAgent: Implement new design for polkit dialog
    
    Implement the new design for the polkit according to the mockups in
    https://gitlab.gnome.org/GNOME/gnome-shell/issues/1343:
    
    - Center-align all the parts of the dialog
    - Use a larger user avatar
    - Remove the work-spinner because requests usually finish fast enough
    - Show the entry-labels as hint text of the entry
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/942

 data/theme/gnome-shell-sass/widgets/_dialogs.scss | 43 +++++------
 data/theme/gnome-shell-sass/widgets/_misc.scss    |  2 +-
 js/ui/components/polkitAgent.js                   | 92 +++++++++++------------
 3 files changed, 62 insertions(+), 75 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss 
b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index 4664b6710f..48f8b0b41b 100644
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -84,27 +84,30 @@
 /* Password or Authentication Dialog */
 
 .prompt-dialog {
-  //this is the width of the entire modal popup
-  width: 34em;
+  width: 28em;
 
-  .message-dialog-content { spacing: $base_spacing * 4; }
-  .message-dialog-title { color: lighten($fg_color,15%); }
+  .modal-dialog-content-box {
+    margin-bottom: 24px;
+  }
 }
 
 .prompt-dialog-description:rtl {
   text-align: right;
 }
 
-.prompt-dialog-password-box {
-  spacing: 1em;
-  padding-bottom: 1em;
+.prompt-dialog-password-layout {
+  spacing: 8px;
+}
+
+.prompt-dialog-password-entry {
+  width: 20em;
 }
 
 .prompt-dialog-error-label,
 .prompt-dialog-info-label,
 .prompt-dialog-null-label {
+  text-align: center;
   @include fontsize($base_font_size - 1);
-  padding-bottom: 8px;
 }
 
 .prompt-dialog-error-label {
@@ -120,23 +123,15 @@
 /* Polkit Dialog */
 
 .polkit-dialog-user-layout {
-  padding-left: 10px;
-  spacing: 10px;
-  &:rtl {
-    padding-left: 0px;
-    padding-right: 10px;
-  }
-}
+  text-align: center;
+  spacing: 8px;
+  margin-bottom: 6px;
 
-.polkit-dialog-user-root-label {
-  color: $warning_color;
-}
-
-.polkit-dialog-user-icon {
-  border-radius: 99px;
-  background-size: contain;
-  width: 48px;
-  height: 48px;
+  .polkit-dialog-user-icon {
+    border-radius: 99px;
+    background-size: contain;
+  }
+  .polkit-dialog-user-root-label { color: $warning_color; }
 }
 
 /* Audio selection dialog */
diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index f05436dc57..296632b33f 100644
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -60,8 +60,8 @@
 
 // Caps-lock warning
 .caps-lock-warning-label {
+  text-align: center;
   padding-bottom: 8px;
-  padding-left: 6.2em;
   @include fontsize($base_font_size - 1);
   color: $warning_color;
 }
diff --git a/js/ui/components/polkitAgent.js b/js/ui/components/polkitAgent.js
index e2b056fe18..cf583823a7 100644
--- a/js/ui/components/polkitAgent.js
+++ b/js/ui/components/polkitAgent.js
@@ -4,7 +4,6 @@
 const { AccountsService, Clutter, GLib,
         GObject, Pango, PolkitAgent, Polkit, Shell, St } = imports.gi;
 
-const Animation = imports.ui.animation;
 const Dialog = imports.ui.dialog;
 const Main = imports.ui.main;
 const ModalDialog = imports.ui.modalDialog;
@@ -16,9 +15,7 @@ const DialogMode = {
     CONFIRM: 1,
 };
 
-var DIALOG_ICON_SIZE = 48;
-
-var WORK_SPINNER_ICON_SIZE = 16;
+const DIALOG_ICON_SIZE = 64;
 
 const DELAYED_RESET_TIMEOUT = 200;
 
@@ -40,8 +37,10 @@ var AuthenticationDialog = GObject.registerClass({
 
         let title = _("Authentication Required");
 
-        let content = new Dialog.MessageDialogContent({ title, description });
-        this.contentLayout.add_actor(content);
+        let headerContent = new Dialog.MessageDialogContent({ title, description });
+        this.contentLayout.add_child(headerContent);
+
+        let bodyContent = new Dialog.MessageDialogContent();
 
         if (userNames.length > 1) {
             log(`polkitAuthenticationAgent: Received ${userNames.length} ` +
@@ -59,22 +58,21 @@ var AuthenticationDialog = GObject.registerClass({
 
         let userBox = new St.BoxLayout({
             style_class: 'polkit-dialog-user-layout',
-            vertical: false,
+            vertical: true,
         });
-        content.add_child(userBox);
+        bodyContent.add_child(userBox);
 
         this._userAvatar = new UserWidget.Avatar(this._user, {
             iconSize: DIALOG_ICON_SIZE,
             styleClass: 'polkit-dialog-user-icon',
         });
+        this._userAvatar.x_align = Clutter.ActorAlign.CENTER;
         userBox.add_child(this._userAvatar);
 
         this._userLabel = new St.Label({
             style_class: userName === 'root'
                 ? 'polkit-dialog-user-root-label'
                 : 'polkit-dialog-user-label',
-            x_expand: true,
-            y_align: Clutter.ActorAlign.CENTER,
         });
 
         if (userName === 'root')
@@ -82,58 +80,57 @@ var AuthenticationDialog = GObject.registerClass({
 
         userBox.add_child(this._userLabel);
 
-        this._passwordBox = new St.BoxLayout({ vertical: false, style_class: 'prompt-dialog-password-box' });
-        content.add_child(this._passwordBox);
-        this._passwordLabel = new St.Label({
-            style_class: 'prompt-dialog-password-label',
-            y_align: Clutter.ActorAlign.CENTER,
+        let passwordBox = new St.BoxLayout({
+            style_class: 'prompt-dialog-password-layout',
+            vertical: true,
         });
-        this._passwordBox.add_child(this._passwordLabel);
+
         this._passwordEntry = new St.PasswordEntry({
             style_class: 'prompt-dialog-password-entry',
             text: "",
             can_focus: true,
-            x_expand: true,
+            visible: false,
+            x_align: Clutter.ActorAlign.CENTER,
         });
         ShellEntry.addContextMenu(this._passwordEntry);
         this._passwordEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this));
         this._passwordEntry.bind_property('reactive',
             this._passwordEntry.clutter_text, 'editable',
             GObject.BindingFlags.SYNC_CREATE);
-        this._passwordBox.add_child(this._passwordEntry);
+        passwordBox.add_child(this._passwordEntry);
 
-        this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, {
-            animate: true,
-        });
-        this._passwordBox.add(this._workSpinner);
+        let warningBox = new St.BoxLayout({ vertical: true });
 
-        this._passwordBox.hide();
         let capsLockWarning = new ShellEntry.CapsLockWarning();
-        content.add_child(capsLockWarning);
+        warningBox.add_child(capsLockWarning);
 
-        this._errorMessageLabel = new St.Label({ style_class: 'prompt-dialog-error-label' });
+        this._errorMessageLabel = new St.Label({
+            style_class: 'prompt-dialog-error-label',
+            visible: false,
+        });
         this._errorMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
         this._errorMessageLabel.clutter_text.line_wrap = true;
-        content.add_child(this._errorMessageLabel);
-        this._errorMessageLabel.hide();
+        warningBox.add_child(this._errorMessageLabel);
 
-        this._infoMessageLabel = new St.Label({ style_class: 'prompt-dialog-info-label' });
+        this._infoMessageLabel = new St.Label({
+            style_class: 'prompt-dialog-info-label',
+            visible: false,
+        });
         this._infoMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
         this._infoMessageLabel.clutter_text.line_wrap = true;
-        content.add_child(this._infoMessageLabel);
-        this._infoMessageLabel.hide();
+        warningBox.add_child(this._infoMessageLabel);
 
         /* text is intentionally non-blank otherwise the height is not the same as for
          * infoMessage and errorMessageLabel - but it is still invisible because
          * gnome-shell.css sets the color to be transparent
          */
-        this._nullMessageLabel = new St.Label({ style_class: 'prompt-dialog-null-label',
-                                                text: 'abc' });
-        this._nullMessageLabel.add_style_class_name('hidden');
+        this._nullMessageLabel = new St.Label({ style_class: 'prompt-dialog-null-label' });
         this._nullMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
         this._nullMessageLabel.clutter_text.line_wrap = true;
-        content.add_child(this._nullMessageLabel);
-        this._nullMessageLabel.show();
+        warningBox.add_child(this._nullMessageLabel);
+
+        passwordBox.add_child(warningBox);
+        bodyContent.add_child(passwordBox);
 
         this._cancelButton = this.addButton({ label: _("Cancel"),
                                               action: this.cancel.bind(this),
@@ -149,6 +146,8 @@ var AuthenticationDialog = GObject.registerClass({
             this._okButton.reactive = text.get_text().length > 0;
         });
 
+        this.contentLayout.add_child(bodyContent);
+
         this._doneEmitted = false;
 
         this._mode = -1;
@@ -163,13 +162,6 @@ var AuthenticationDialog = GObject.registerClass({
         this._onUserChanged();
     }
 
-    _setWorking(working) {
-        if (working)
-            this._workSpinner.play();
-        else
-            this._workSpinner.stop();
-    }
-
     _initiateSession() {
         this._destroySession(DELAYED_RESET_TIMEOUT);
 
@@ -218,7 +210,6 @@ var AuthenticationDialog = GObject.registerClass({
 
         this._passwordEntry.reactive = false;
         this._okButton.reactive = false;
-        this._setWorking(true);
 
         this._session.response(response);
         // When the user responds, dismiss already shown info and
@@ -273,19 +264,20 @@ var AuthenticationDialog = GObject.registerClass({
             this._sessionRequestTimeoutId = 0;
         }
 
-        // Cheap localization trick
-        if (request == 'Password:' || request == 'Password: ')
-            this._passwordLabel.set_text(_("Password:"));
+        // Hack: The request string comes directly from PAM, if it's "Password:"
+        // we replace it with our own, if it's something else we replace the
+        // last colon and any trailing spaces with a "…".
+        if (request === 'Password:' || request === 'Password: ')
+            this._passwordEntry.hint_text = _('Enter Password…');
         else
-            this._passwordLabel.set_text(request);
+            this._passwordEntry.hint_text = request.replace(/: *$/, '…');
 
         this._passwordEntry.password_visible = echoOn;
 
-        this._passwordBox.show();
+        this._passwordEntry.show();
         this._passwordEntry.set_text('');
         this._passwordEntry.reactive  = true;
         this._okButton.reactive = false;
-        this._setWorking(false);
 
         this._ensureOpen();
         this._passwordEntry.grab_key_focus();
@@ -332,7 +324,7 @@ var AuthenticationDialog = GObject.registerClass({
             if (this.state != ModalDialog.State.OPENED)
                 return;
 
-            this._passwordBox.hide();
+            this._passwordEntry.hide();
             this._cancelButton.grab_key_focus();
             this._okButton.reactive = false;
         };