modalDialog: Show spinner when working

Use the same UI concept from the login screen to show spinners when
the polkit or keyring dialogs are working

https://bugzilla.gnome.org/show_bug.cgi?id=684438

js/gdm/loginDialog.js

@@ -40,7 +40,6 @@ const GdmUtil = imports.gdm.util;
 const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
 const ModalDialog = imports.ui.modalDialog;
-const Panel = imports.ui.panel;
 const PanelMenu = imports.ui.panelMenu;
 const Tweener = imports.ui.tweener;
 const UserMenu = imports.ui.userMenu;
@@ -51,10 +50,6 @@ const _SCROLL_ANIMATION_TIME = 0.5;
 const _TIMED_LOGIN_IDLE_THRESHOLD = 5.0;
 const _LOGO_ICON_HEIGHT = 48;
 
-const WORK_SPINNER_ICON_SIZE = 24;
-const WORK_SPINNER_ANIMATION_DELAY = 1.0;
-const WORK_SPINNER_ANIMATION_TIME = 0.3;
-
 let _loginDialog = null;
 
 const UserListItem = new Lang.Class({
@@ -586,7 +581,6 @@ const LoginDialog = new Lang.Class({
         this._promptBox.add(this._promptLoginHint);
 
         this._signInButton = null;
-        this._workSpinner = null;
 
         this._sessionList = new SessionList();
         this._sessionList.connect('session-activated',
@@ -708,7 +702,7 @@ const LoginDialog = new Lang.Class({
         this._promptEntry.text = '';
 
         this._updateSensitivity(true);
-        this._setWorking(false);
+        this.setWorking(false);
     },
 
     _onDefaultSessionChanged: function(client, sessionId) {
@@ -774,11 +768,6 @@ const LoginDialog = new Lang.Class({
     },
 
     _prepareDialog: function(forSecret, hold) {
-        let spinnerIcon = global.datadir + '/theme/process-working.svg';
-        this._workSpinner = new Panel.AnimatedIcon(spinnerIcon, WORK_SPINNER_ICON_SIZE);
-        this._workSpinner.actor.opacity = 0;
-        this._workSpinner.actor.show();
-
         this.buttonLayout.visible = true;
         this.clearButtons();
 
@@ -791,8 +780,7 @@ const LoginDialog = new Lang.Class({
                              y_fill: false,
                              x_align: St.Align.START,
                              y_align: St.Align.MIDDLE });
-        this.buttonLayout.add(this._workSpinner.actor,
+        this.placeSpinner({ expand: false,
-                              { expand: false,
                             x_fill: false,
                             y_fill: false,
                             x_align: St.Align.END,
@@ -849,7 +837,7 @@ const LoginDialog = new Lang.Class({
             this._promptEntryActivateId = 0;
         }
 
-        this._setWorking(false);
+        this.setWorking(false);
         this._promptBox.hide();
         this._promptLoginHint.hide();
 
@@ -862,36 +850,9 @@ const LoginDialog = new Lang.Class({
         this._promptLoginHint.hide();
 
         this.clearButtons();
-        this._workSpinner = null;
         this._signInButton = null;
     },
 
-    _setWorking: function(working) {
-        if (!this._workSpinner)
-            return;
-
-        if (working) {
-            this._workSpinner.play();
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 255,
-                               delay: WORK_SPINNER_ANIMATION_DELAY,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear'
-                             });
-        } else {
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 0,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear',
-                               onCompleteScope: this,
-                               onComplete: function() {
-                                   if (this._workSpinner)
-                                       this._workSpinner.stop();
-                               }
-                             });
-        }
-    },
-
     _askQuestion: function(verifier, serviceName, question, passwordChar) {
         this._promptLabel.set_text(question);
 
@@ -906,7 +867,7 @@ const LoginDialog = new Lang.Class({
                      function() {
                          let text = this._promptEntry.get_text();
                          this._updateSensitivity(false);
-                         this._setWorking(true);
+                         this.setWorking(true);
                          this._userVerifier.answerQuery(serviceName, text);
                      }];
 

js/ui/components/keyring.js

@@ -63,11 +63,17 @@ const KeyringDialog = new Lang.Class({
 
         this._cancelButton = this.addButton({ label: '',
                                               action: Lang.bind(this, this._onCancelButton),
-                                              key: Clutter.Escape });
+                                              key: Clutter.Escape },
+                                            { expand: true, x_fill: false, x_align: St.Align.START });
+        this.placeSpinner({ expand: false,
+                            x_fill: false,
+                            y_fill: false,
+                            x_align: St.Align.END,
+                            y_align: St.Align.MIDDLE });
         this._continueButton = this.addButton({ label: '',
                                                 action: Lang.bind(this, this._onContinueButton),
                                                 default: true },
-                                              { expand: true, x_fill: false, x_align: St.Align.END });
+                                              { expand: false, x_fill: false, x_align: St.Align.END });
 
         this.prompt.bind_property('cancel-label', this._cancelButton, 'label', GObject.BindingFlags.SYNC_CREATE);
         this.prompt.bind_property('continue-label', this._continueButton, 'label', GObject.BindingFlags.SYNC_CREATE);
@@ -155,6 +161,7 @@ const KeyringDialog = new Lang.Class({
 
         this._continueButton.can_focus = sensitive;
         this._continueButton.reactive = sensitive;
+        this.setWorking(!sensitive);
     },
 
     _ensureOpen: function() {

js/ui/components/polkitAgent.js

@@ -161,11 +161,17 @@ const AuthenticationDialog = new Lang.Class({
 
         this._cancelButton = this.addButton({ label: _("Cancel"),
                                               action: Lang.bind(this, this.cancel),
-                                              key: Clutter.Escape });
+                                              key: Clutter.Escape },
+                                            { expand: true, x_fill: false, x_align: St.Align.START });
+        this.placeSpinner({ expand: false,
+                            x_fill: false,
+                            y_fill: false,
+                            x_align: St.Align.END,
+                            y_align: St.Align.MIDDLE });
         this._okButton = this.addButton({ label:  _("Authenticate"),
                                           action: Lang.bind(this, this._onAuthenticateButtonPressed),
                                           default: true },
-                                        { expand: true, x_fill: false, x_align: St.Align.END });
+                                        { expand: false, x_fill: false, x_align: St.Align.END });
 
         this._doneEmitted = false;
 
@@ -219,6 +225,7 @@ const AuthenticationDialog = new Lang.Class({
 
         this._okButton.can_focus = sensitive;
         this._okButton.reactive = sensitive;
+        this.setWorking(!sensitive);
     },
 
     _onEntryActivate: function() {

js/ui/modalDialog.js

@@ -22,6 +22,10 @@ const Tweener = imports.ui.tweener;
 const OPEN_AND_CLOSE_TIME = 0.1;
 const FADE_OUT_DIALOG_TIME = 1.0;
 
+const WORK_SPINNER_ICON_SIZE = 24;
+const WORK_SPINNER_ANIMATION_DELAY = 1.0;
+const WORK_SPINNER_ANIMATION_TIME = 0.3;
+
 const State = {
     OPENED: 0,
     CLOSED: 1,
@@ -107,6 +111,8 @@ const ModalDialog = new Lang.Class({
         this._initialKeyFocus = this.dialogLayout;
         this._initialKeyFocusDestroyId = 0;
         this._savedKeyFocus = null;
+
+        this._workSpinner = null;
     },
 
     destroy: function() {
@@ -180,6 +186,44 @@ const ModalDialog = new Lang.Class({
         return button;
     },
 
+    placeSpinner: function(layoutInfo) {
+        /* This is here because of recursive imports */
+        const Panel = imports.ui.panel;
+        let spinnerIcon = global.datadir + '/theme/process-working.svg';
+        this._workSpinner = new Panel.AnimatedIcon(spinnerIcon, WORK_SPINNER_ICON_SIZE);
+        this._workSpinner.actor.opacity = 0;
+        this._workSpinner.actor.show();
+
+        this.buttonLayout.add(this._workSpinner.actor, layoutInfo);
+    },
+
+    setWorking: function(working) {
+        if (!this._workSpinner)
+            return;
+
+        Tweener.removeTweens(this._workSpinner.actor);
+        if (working) {
+            this._workSpinner.play();
+            Tweener.addTween(this._workSpinner.actor,
+                             { opacity: 255,
+                               delay: WORK_SPINNER_ANIMATION_DELAY,
+                               time: WORK_SPINNER_ANIMATION_TIME,
+                               transition: 'linear'
+                             });
+        } else {
+            Tweener.addTween(this._workSpinner.actor,
+                             { opacity: 0,
+                               time: WORK_SPINNER_ANIMATION_TIME,
+                               transition: 'linear',
+                               onCompleteScope: this,
+                               onComplete: function() {
+                                   if (this._workSpinner)
+                                       this._workSpinner.stop();
+                               }
+                             });
+        }
+    },
+
     _onKeyPressEvent: function(object, event) {
         this._pressedKey = event.get_key_symbol();
     },

js/ui/unlockDialog.js

@@ -91,10 +91,6 @@ const UnlockDialog = new Lang.Class({
         this._promptLoginHint.hide();
         this.contentLayout.add_actor(this._promptLoginHint);
 
-        let spinnerIcon = global.datadir + '/theme/process-working.svg';
-        this._workSpinner = new Panel.AnimatedIcon(spinnerIcon, LoginDialog.WORK_SPINNER_ICON_SIZE);
-        this._workSpinner.actor.opacity = 0;
-
         this.allowCancel = false;
         this.buttonLayout.visible = true;
         this.addButton({ label: _("Cancel"),
@@ -105,8 +101,7 @@ const UnlockDialog = new Lang.Class({
                          y_fill: false,
                          x_align: St.Align.START,
                          y_align: St.Align.MIDDLE });
-        this.buttonLayout.add(this._workSpinner.actor,
+        this.placeSpinner({ expand: false,
-                              { expand: false,
                             x_fill: false,
                             y_fill: false,
                             x_align: St.Align.END,
@@ -164,28 +159,6 @@ const UnlockDialog = new Lang.Class({
         this._okButton.can_focus = sensitive;
     },
 
-    _setWorking: function(working) {
-        if (working) {
-            this._workSpinner.play();
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 255,
-                               delay: LoginDialog.WORK_SPINNER_ANIMATION_DELAY,
-                               time: LoginDialog.WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear'
-                             });
-        } else {
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 0,
-                               time: LoginDialog.WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear',
-                               onCompleteScope: this,
-                               onComplete: function() {
-                                   this._workSpinner.stop();
-                               }
-                             });
-        }
-    },
-
     _showMessage: function(userVerifier, message, styleClass) {
         if (message) {
             this._promptMessage.text = message;
@@ -216,7 +189,7 @@ const UnlockDialog = new Lang.Class({
 
         this._currentQuery = serviceName;
         this._updateSensitivity(true);
-        this._setWorking(false);
+        this.setWorking(false);
     },
 
     _showLoginHint: function(verifier, message) {
@@ -235,7 +208,7 @@ const UnlockDialog = new Lang.Class({
             // the actual reply to GDM will be sent as soon as asked
             this._firstQuestionAnswer = this._promptEntry.text;
             this._updateSensitivity(false);
-            this._setWorking(true);
+            this.setWorking(true);
             return;
         }
 
@@ -246,7 +219,7 @@ const UnlockDialog = new Lang.Class({
         this._currentQuery = null;
 
         this._updateSensitivity(false);
-        this._setWorking(true);
+        this.setWorking(true);
 
         this._userVerifier.answerQuery(query, this._promptEntry.text);
     },
@@ -286,7 +259,7 @@ const UnlockDialog = new Lang.Class({
         this._promptEntry.menu.isPassword = true;
 
         this._updateSensitivity(false);
-        this._setWorking(false);
+        this.setWorking(false);
     },
 
     _escape: function() {