modalDialog: Match gtk+ buttons style

Follow the design we have in gtk+ for buttons dialogs,
which are at the bottom and they expand full width, having
the same amount of space for each one.

Also, since this removes any space for non-button widgets
in the button area, move the spinner present in the auth prompt
dialog next to the password entry.

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

data/theme/gnome-shell-high-contrast.css

@@ -37,14 +37,13 @@ stage {
   icon-shadow: 0 1px black; }
   .button:focus {
     color: #eeeeec;
-    border-color: #215d9c;
-    box-shadow: inset 0 1px #454f52;
     text-shadow: 0 1px black;
-    icon-shadow: 0 1px black; }
+    icon-shadow: 0 1px black;
+    box-shadow: inset 0px 0px 0px 1px #215d9c; }
   .button:insensitive {
-    color: #7f7f7f;
+    color: gray;
     border-color: rgba(0, 0, 0, 0.7);
-    background-color: rgba(62, 67, 68, 0.7);
+    background-color: rgba(62, 67, 69, 0.7);
     box-shadow: none;
     text-shadow: none;
     icon-shadow: none; }
@@ -52,9 +51,46 @@ stage {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: #222728;
+    box-shadow: inset 0 0 black;
+    text-shadow: none;
+    icon-shadow: none; }
+
+.modal-dialog-linked-button {
+  border-right-width: 1px;
+  color: #eeeeec;
+  background-color: #2e3436;
+  border-color: rgba(0, 0, 0, 0.7);
+  box-shadow: inset 0 1px #454f52;
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black;
+  padding: 12px; }
+  .modal-dialog-linked-button:insensitive {
+    color: gray;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(62, 67, 69, 0.7);
     box-shadow: none;
     text-shadow: none;
     icon-shadow: none; }
+  .modal-dialog-linked-button:active {
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: #222728;
+    box-shadow: inset 0 0 black;
+    text-shadow: none;
+    icon-shadow: none; }
+  .modal-dialog-linked-button:focus {
+    color: #eeeeec;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+    box-shadow: inset 0px 0px 0px 1px #215d9c; }
+  .modal-dialog-linked-button:first-child {
+    border-radius: 0px 0px 0px 6px; }
+  .modal-dialog-linked-button:last-child {
+    border-right-width: 0px;
+    border-radius: 0px 0px 6px 0px; }
+  .modal-dialog-linked-button:first-child:last-child {
+    border-right-width: 0px;
+    border-radius: 0px 0px 6px 6px; }
 
 /* Entries */
 StEntry {
@@ -71,8 +107,8 @@ StEntry {
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
     border-color: rgba(166, 166, 166, 0.5); }
   StEntry:insensitive {
-    color: #7f7f7f;
+    color: gray;
-    border-color: #0d0d0d;
+    border-color: #0e0e0e;
     box-shadow: none; }
   StEntry StIcon.capslock-warning {
     icon-size: 16px;
@@ -106,7 +142,7 @@ StScrollBar {
 .slider {
   height: 1em;
   -slider-height: 0.3em;
-  -slider-background-color: #0d0d0d;
+  -slider-background-color: #0e0e0e;
   -slider-border-color: black;
   -slider-active-background-color: #215d9c;
   -slider-active-border-color: #184472;
@@ -160,11 +196,12 @@ StScrollBar {
   background-color: white; }
 
 .modal-dialog {
-  border-radius: 5px;
+  border-radius: 9px;
   color: #eeeeec;
   background-color: rgba(23, 25, 26, 0.95);
-  border: 3px solid rgba(238, 238, 236, 0.5);
+  border: 3px solid rgba(238, 238, 236, 0.5); }
-  padding: 24px; }
+  .modal-dialog .modal-dialog-content-box {
+    padding: 24px; }
   .modal-dialog .run-dialog-entry {
     width: 20em;
     margin-bottom: 6px; }
@@ -179,10 +216,6 @@ StScrollBar {
     color: #d6d6d1;
     padding-bottom: .4em; }
 
-.button-dialog-button-box {
-  spacing: 18px;
-  padding-top: 48px; }
-
 .show-processes-dialog-subject,
 .mount-question-dialog-subject,
 .end-session-dialog-subject {
@@ -702,7 +735,7 @@ StScrollBar {
   border-left-width: 1px; }
 
 .calendar-nonwork-day {
-  color: #7f7f7f; }
+  color: gray; }
 
 .calendar-today {
   font-weight: bold;
@@ -834,7 +867,8 @@ StScrollBar {
   min-width: 470px; }
 
 .nm-dialog-content {
-  spacing: 20px; }
+  spacing: 20px;
+  padding: 24px; }
 
 .nm-dialog-header-hbox {
   spacing: 10px; }
@@ -1016,7 +1050,7 @@ StScrollBar {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: #222728;
-    box-shadow: none;
+    box-shadow: inset 0 0 black;
     text-shadow: none;
     icon-shadow: none; }
   .app-view-control:first-child {
@@ -1335,10 +1369,9 @@ StScrollBar {
   color: white; }
   .keyboard-key:focus {
     color: #eeeeec;
-    border-color: #215d9c;
-    box-shadow: inset 0 1px #454f52;
     text-shadow: 0 1px black;
-    icon-shadow: 0 1px black; }
+    icon-shadow: 0 1px black;
+    box-shadow: inset 0px 0px 0px 1px #215d9c; }
   .keyboard-key:hover, .keyboard-key:checked {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
@@ -1350,7 +1383,7 @@ StScrollBar {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: #222728;
-    box-shadow: none;
+    box-shadow: inset 0 0 black;
     text-shadow: none;
     icon-shadow: none; }
   .keyboard-key:grayed {
@@ -1443,13 +1476,13 @@ StScrollBar {
         color: white;
         border-color: rgba(0, 0, 0, 0.7);
         background-color: #1c5187;
-        box-shadow: none;
+        box-shadow: inset 0 0 black;
         text-shadow: none;
         icon-shadow: none; }
       .login-dialog .modal-dialog-button:default:insensitive {
-        color: #7f7f7f;
+        color: gray;
         border-color: rgba(0, 0, 0, 0.7);
-        background-color: rgba(62, 67, 68, 0.7);
+        background-color: rgba(62, 67, 69, 0.7);
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }

data/theme/gnome-shell-sass

@@ -1 +1 @@
-Subproject commit 23e0bc1e71d0cd84d580916638ec5755f2f2d4e1
+Subproject commit e12b124a78a0aee58416a212567676c225506777

data/theme/gnome-shell.css

@@ -37,14 +37,13 @@ stage {
   icon-shadow: 0 1px black; }
   .button:focus {
     color: #eeeeec;
-    border-color: #215d9c;
-    box-shadow: inset 0 1px #454f52;
     text-shadow: 0 1px black;
-    icon-shadow: 0 1px black; }
+    icon-shadow: 0 1px black;
+    box-shadow: inset 0px 0px 0px 1px #215d9c; }
   .button:insensitive {
-    color: #939695;
+    color: #949796;
     border-color: rgba(0, 0, 0, 0.7);
-    background-color: rgba(66, 71, 73, 0.7);
+    background-color: rgba(66, 72, 73, 0.7);
     box-shadow: none;
     text-shadow: none;
     icon-shadow: none; }
@@ -52,9 +51,46 @@ stage {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: #222728;
+    box-shadow: inset 0 0 black;
+    text-shadow: none;
+    icon-shadow: none; }
+
+.modal-dialog-linked-button {
+  border-right-width: 1px;
+  color: #eeeeec;
+  background-color: #2e3436;
+  border-color: rgba(0, 0, 0, 0.7);
+  box-shadow: inset 0 1px #454f52;
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black;
+  padding: 12px; }
+  .modal-dialog-linked-button:insensitive {
+    color: #949796;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(66, 72, 73, 0.7);
     box-shadow: none;
     text-shadow: none;
     icon-shadow: none; }
+  .modal-dialog-linked-button:active {
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: #222728;
+    box-shadow: inset 0 0 black;
+    text-shadow: none;
+    icon-shadow: none; }
+  .modal-dialog-linked-button:focus {
+    color: #eeeeec;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+    box-shadow: inset 0px 0px 0px 1px #215d9c; }
+  .modal-dialog-linked-button:first-child {
+    border-radius: 0px 0px 0px 6px; }
+  .modal-dialog-linked-button:last-child {
+    border-right-width: 0px;
+    border-radius: 0px 0px 6px 0px; }
+  .modal-dialog-linked-button:first-child:last-child {
+    border-right-width: 0px;
+    border-radius: 0px 0px 6px 6px; }
 
 /* Entries */
 StEntry {
@@ -71,8 +107,8 @@ StEntry {
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
     border-color: rgba(154, 154, 142, 0.5); }
   StEntry:insensitive {
-    color: #939695;
+    color: #949796;
-    border-color: #323636;
+    border-color: #333636;
     box-shadow: none; }
   StEntry StIcon.capslock-warning {
     icon-size: 16px;
@@ -95,10 +131,10 @@ StScrollBar {
     background-color: transparent; }
   StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
     border-radius: 8px;
-    background-color: #a5a8a6;
+    background-color: #a6a8a7;
     margin: 3px; }
     StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
-      background-color: #c9cbc9; }
+      background-color: #cacbc9; }
     StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
       background-color: #215d9c; }
 
@@ -106,7 +142,7 @@ StScrollBar {
 .slider {
   height: 1em;
   -slider-height: 0.3em;
-  -slider-background-color: #323636;
+  -slider-background-color: #333636;
   -slider-border-color: #1c1f1f;
   -slider-active-background-color: #215d9c;
   -slider-active-border-color: #184472;
@@ -160,11 +196,12 @@ StScrollBar {
   background-color: white; }
 
 .modal-dialog {
-  border-radius: 5px;
+  border-radius: 9px;
   color: #eeeeec;
   background-color: rgba(23, 25, 26, 0.95);
-  border: 3px solid rgba(238, 238, 236, 0.5);
+  border: 3px solid rgba(238, 238, 236, 0.5); }
-  padding: 24px; }
+  .modal-dialog .modal-dialog-content-box {
+    padding: 24px; }
   .modal-dialog .run-dialog-entry {
     width: 20em;
     margin-bottom: 6px; }
@@ -179,10 +216,6 @@ StScrollBar {
     color: #d6d6d1;
     padding-bottom: .4em; }
 
-.button-dialog-button-box {
-  spacing: 18px;
-  padding-top: 48px; }
-
 .show-processes-dialog-subject,
 .mount-question-dialog-subject,
 .end-session-dialog-subject {
@@ -702,7 +735,7 @@ StScrollBar {
   border-left-width: 1px; }
 
 .calendar-nonwork-day {
-  color: #939695; }
+  color: #949796; }
 
 .calendar-today {
   font-weight: bold;
@@ -834,7 +867,8 @@ StScrollBar {
   min-width: 470px; }
 
 .nm-dialog-content {
-  spacing: 20px; }
+  spacing: 20px;
+  padding: 24px; }
 
 .nm-dialog-header-hbox {
   spacing: 10px; }
@@ -1016,7 +1050,7 @@ StScrollBar {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: #222728;
-    box-shadow: none;
+    box-shadow: inset 0 0 black;
     text-shadow: none;
     icon-shadow: none; }
   .app-view-control:first-child {
@@ -1335,10 +1369,9 @@ StScrollBar {
   color: white; }
   .keyboard-key:focus {
     color: #eeeeec;
-    border-color: #215d9c;
-    box-shadow: inset 0 1px #454f52;
     text-shadow: 0 1px black;
-    icon-shadow: 0 1px black; }
+    icon-shadow: 0 1px black;
+    box-shadow: inset 0px 0px 0px 1px #215d9c; }
   .keyboard-key:hover, .keyboard-key:checked {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
@@ -1350,7 +1383,7 @@ StScrollBar {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
     background-color: #222728;
-    box-shadow: none;
+    box-shadow: inset 0 0 black;
     text-shadow: none;
     icon-shadow: none; }
   .keyboard-key:grayed {
@@ -1443,13 +1476,13 @@ StScrollBar {
         color: white;
         border-color: rgba(0, 0, 0, 0.7);
         background-color: #1c5187;
-        box-shadow: none;
+        box-shadow: inset 0 0 black;
         text-shadow: none;
         icon-shadow: none; }
       .login-dialog .modal-dialog-button:default:insensitive {
-        color: #939695;
+        color: #949796;
         border-color: rgba(0, 0, 0, 0.7);
-        background-color: rgba(66, 71, 73, 0.7);
+        background-color: rgba(66, 72, 73, 0.7);
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }

js/ui/components/keyring.js

@@ -9,9 +9,15 @@ const Gio = imports.gi.Gio;
 const GObject = imports.gi.GObject;
 const Gcr = imports.gi.Gcr;
 
+const Animation = imports.ui.animation;
 const ModalDialog = imports.ui.modalDialog;
 const ShellEntry = imports.ui.shellEntry;
 const CheckBox = imports.ui.checkBox;
+const Tweener = imports.ui.tweener;
+
+const WORK_SPINNER_ICON_SIZE = 16;
+const WORK_SPINNER_ANIMATION_DELAY = 1.0;
+const WORK_SPINNER_ANIMATION_TIME = 0.3;
 
 const KeyringDialog = new Lang.Class({
     Name: 'KeyringDialog',
@@ -58,27 +64,47 @@ const KeyringDialog = new Lang.Class({
                             { y_fill:  true,
                               y_align: St.Align.START });
 
+        this._workSpinner = null;
         this._controlTable = null;
 
-
         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 },
+                                                default: true });
-                                              { 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);
     },
 
+    _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();
+                               }
+                             });
+        }
+    },
+
     _buildControlTable: function() {
         let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
         let table = new St.Widget({ style_class: 'keyring-dialog-control-table',
@@ -101,15 +127,22 @@ const KeyringDialog = new Lang.Class({
             ShellEntry.addContextMenu(this._passwordEntry, { isPassword: true });
             this._passwordEntry.clutter_text.connect('activate', Lang.bind(this, this._onPasswordActivate));
 
+            let spinnerIcon = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
+            this._workSpinner = new Animation.AnimatedIcon(spinnerIcon, WORK_SPINNER_ICON_SIZE);
+            this._workSpinner.actor.opacity = 0;
+
             if (rtl) {
-                layout.attach(this._passwordEntry, 0, row, 1, 1);
+                layout.attach(this._workSpinner.actor, 0, row, 1, 1);
-                layout.attach(label, 1, row, 1, 1);
+                layout.attach(this._passwordEntry, 1, row, 1, 1);
+                layout.attach(label, 2, row, 1, 1);
             } else {
                 layout.attach(label, 0, row, 1, 1);
                 layout.attach(this._passwordEntry, 1, row, 1, 1);
+                layout.attach(this._workSpinner.actor, 2, row, 1, 1);
             }
             row++;
         } else {
+            this._workSpinner = null;
             this._passwordEntry = null;
         }
 
@@ -178,7 +211,7 @@ const KeyringDialog = new Lang.Class({
 
         this._continueButton.can_focus = sensitive;
         this._continueButton.reactive = sensitive;
-        this.setWorking(!sensitive);
+        this._setWorking(!sensitive);
     },
 
     _ensureOpen: function() {

js/ui/components/polkitAgent.js

@@ -13,13 +13,19 @@ const Mainloop = imports.mainloop;
 const Polkit = imports.gi.Polkit;
 const PolkitAgent = imports.gi.PolkitAgent;
 
+const Animation = imports.ui.animation;
 const Components = imports.ui.components;
 const ModalDialog = imports.ui.modalDialog;
 const ShellEntry = imports.ui.shellEntry;
 const UserWidget = imports.ui.userWidget;
+const Tweener = imports.ui.tweener;
 
 const DIALOG_ICON_SIZE = 48;
 
+const WORK_SPINNER_ICON_SIZE = 16;
+const WORK_SPINNER_ANIMATION_DELAY = 1.0;
+const WORK_SPINNER_ANIMATION_TIME = 0.3;
+
 const AuthenticationDialog = new Lang.Class({
     Name: 'AuthenticationDialog',
     Extends: ModalDialog.ModalDialog,
@@ -136,6 +142,13 @@ const AuthenticationDialog = new Lang.Class({
         this._passwordEntry.clutter_text.connect('activate', Lang.bind(this, this._onEntryActivate));
         this._passwordBox.add(this._passwordEntry,
                               { expand: true });
+
+        let spinnerIcon = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
+        this._workSpinner = new Animation.AnimatedIcon(spinnerIcon, WORK_SPINNER_ICON_SIZE);
+        this._workSpinner.actor.opacity = 0;
+
+        this._passwordBox.add(this._workSpinner.actor);
+
         this.setInitialKeyFocus(this._passwordEntry);
         this._passwordBox.hide();
 
@@ -165,17 +178,10 @@ 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 },
+                                          default: true });
-                                        { expand: false, x_fill: false, x_align: St.Align.END });
 
         this._doneEmitted = false;
 
@@ -183,6 +189,30 @@ const AuthenticationDialog = new Lang.Class({
         this._cookie = cookie;
     },
 
+    _setWorking: function(working) {
+        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();
+                               }
+                             });
+        }
+    },
+
     performAuthentication: function() {
         this.destroySession();
         this._session = new PolkitAgent.Session({ identity: this._identityToAuth,
@@ -229,7 +259,7 @@ const AuthenticationDialog = new Lang.Class({
 
         this._okButton.can_focus = sensitive;
         this._okButton.reactive = sensitive;
-        this.setWorking(!sensitive);
+        this._setWorking(!sensitive);
     },
 
     _onEntryActivate: function() {

js/ui/modalDialog.js

@@ -14,7 +14,6 @@ const Atk = imports.gi.Atk;
 
 const Params = imports.misc.params;
 
-const Animation = imports.ui.animation;
 const Layout = imports.ui.layout;
 const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
@@ -23,10 +22,6 @@ const Tweener = imports.ui.tweener;
 const OPEN_AND_CLOSE_TIME = 0.1;
 const FADE_OUT_DIALOG_TIME = 1.0;
 
-const WORK_SPINNER_ICON_SIZE = 16;
-const WORK_SPINNER_ANIMATION_DELAY = 1.0;
-const WORK_SPINNER_ANIMATION_TIME = 0.3;
-
 const State = {
     OPENED: 0,
     CLOSED: 1,
@@ -79,7 +74,9 @@ const ModalDialog = new Lang.Class({
         this._group.add_actor(this._backgroundBin);
 
         this.dialogLayout = new St.BoxLayout({ style_class: 'modal-dialog',
-                                               vertical:    true });
+                                               x_align:      Clutter.ActorAlign.CENTER,
+                                               y_align:      Clutter.ActorAlign.CENTER,
+                                               vertical:     true });
         // modal dialogs are fixed width and grow vertically; set the request
         // mode accordingly so wrapped labels are handled correctly during
         // size requests.
@@ -100,7 +97,8 @@ const ModalDialog = new Lang.Class({
         this.backgroundStack.add_actor(this.dialogLayout);
 
 
-        this.contentLayout = new St.BoxLayout({ vertical: true });
+        this.contentLayout = new St.BoxLayout({ vertical: true,
+                                                style_class: "modal-dialog-content-box" });
         this.dialogLayout.add(this.contentLayout,
                               { expand:  true,
                                 x_fill:  true,
@@ -108,8 +106,7 @@ const ModalDialog = new Lang.Class({
                                 x_align: St.Align.MIDDLE,
                                 y_align: St.Align.START });
 
-        this.buttonLayout = new St.BoxLayout({ style_class: 'modal-dialog-button-box',
+        this.buttonLayout = new St.Widget ({ layout_manager: new Clutter.BoxLayout ({ homogeneous:true }) });
-                                               vertical: false });
         this.dialogLayout.add(this.buttonLayout,
                               { x_align: St.Align.MIDDLE,
                                 y_align: St.Align.END });
@@ -118,8 +115,6 @@ const ModalDialog = new Lang.Class({
         this._initialKeyFocus = this.dialogLayout;
         this._initialKeyFocusDestroyId = 0;
         this._savedKeyFocus = null;
-
-        this._workSpinner = null;
     },
 
     destroy: function() {
@@ -147,16 +142,12 @@ const ModalDialog = new Lang.Class({
             else
                 x_alignment = St.Align.MIDDLE;
 
-            this.addButton(buttonInfo, { expand: true,
+            this.addButton(buttonInfo);
-                                         x_fill: false,
-                                         y_fill: false,
-                                         x_align: x_alignment,
-                                         y_align: St.Align.MIDDLE });
         }
     },
 
-    addButton: function(buttonInfo, layoutInfo) {
+    addButton: function(buttonInfo) {
-        let label = buttonInfo['label'];
+        let label = buttonInfo['label']
         let action = buttonInfo['action'];
         let key = buttonInfo['key'];
         let isDefault = buttonInfo['default'];
@@ -170,10 +161,12 @@ const ModalDialog = new Lang.Class({
         else
             keys = [];
 
-        let button = new St.Button({ style_class: 'modal-dialog-button button',
+        let button = new St.Button({ style_class: 'modal-dialog-linked-button',
                                      button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
                                      reactive:    true,
                                      can_focus:   true,
+                                     x_expand:    true,
+                                     y_expand:    true,
                                      label:       label });
         button.connect('clicked', action);
 
@@ -188,47 +181,11 @@ const ModalDialog = new Lang.Class({
         for (let i in keys)
             this._buttonKeys[keys[i]] = buttonInfo;
 
-        this.buttonLayout.add(button, layoutInfo);
+        this.buttonLayout.add_actor(button);
 
         return button;
     },
 
-    placeSpinner: function(layoutInfo) {
-        let spinnerIcon = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
-        this._workSpinner = new Animation.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();
         return Clutter.EVENT_PROPAGATE;

js/ui/status/network.js

@@ -917,10 +917,7 @@ const NMWirelessDialog = new Lang.Class({
                                                   key: Clutter.Escape });
         this._connectButton = this.addButton({ action: Lang.bind(this, this._connect),
                                                label: _("Connect"),
-                                               key: Clutter.Return },
+                                               key: Clutter.Return });
-                                             { expand: true,
-                                               x_fill: false,
-                                               x_align: St.Align.END });
     },
 
     _connect: function() {

js/ui/windowManager.js

@@ -81,12 +81,10 @@ const DisplayChangeDialog = new Lang.Class({
         */
         this._cancelButton = this.addButton({ label: _("Revert Settings"),
                                               action: Lang.bind(this, this._onFailure),
-                                              key: Clutter.Escape },
+                                              key: Clutter.Escape });
-                                            { expand: true, x_fill: false, x_align: St.Align.START });
         this._okButton = this.addButton({ label:  _("Keep Changes"),
                                           action: Lang.bind(this, this._onSuccess),
-                                          default: true },
+                                          default: true });
-                                        { expand: false, x_fill: false, x_align: St.Align.END });
 
         this._timeoutId = Mainloop.timeout_add(ONE_SECOND, Lang.bind(this, this._tick));
         GLib.Source.set_name_by_id(this._timeoutId, '[gnome-shell] this._tick');