spinner: use a 60fps spinner

- sync with gtk+ and provide a fluid spinner

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

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;
-    border-color: #0d0d0d;
+    color: gray;
+    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);
-  padding: 24px; }
+  border: 3px solid rgba(238, 238, 236, 0.5); }
+  .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.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;
-    border-color: #323636;
+    color: #949796;
+    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);
-  padding: 24px; }
+  border: 3px solid rgba(238, 238, 236, 0.5); }
+  .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/gdm/authPrompt.js

@@ -14,7 +14,7 @@ const ShellEntry = imports.ui.shellEntry;
 const Tweener = imports.ui.tweener;
 const UserWidget = imports.ui.userWidget;
 
-const DEFAULT_BUTTON_WELL_ICON_SIZE = 24;
+const DEFAULT_BUTTON_WELL_ICON_SIZE = 16;
 const DEFAULT_BUTTON_WELL_ANIMATION_DELAY = 1.0;
 const DEFAULT_BUTTON_WELL_ANIMATION_TIME = 0.3;
 

js/ui/animation.js

@@ -7,7 +7,7 @@ const St = imports.gi.St;
 const Signals = imports.signals;
 const Atk = imports.gi.Atk;
 
-const ANIMATED_ICON_UPDATE_TIMEOUT = 100;
+const ANIMATED_ICON_UPDATE_TIMEOUT = 14;
 
 const Animation = new Lang.Class({
     Name: 'Animation',

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 = 24;
+const WORK_SPINNER_ANIMATION_DELAY = 1.0;
+const WORK_SPINNER_ANIMATION_TIME = 0.3;
 
 const KeyringDialog = new Lang.Class({
     Name: 'KeyringDialog',
@@ -58,27 +64,54 @@ 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 },
-                                            { 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 });
+                                              key: Clutter.Escape });
         this._continueButton = this.addButton({ label: '',
                                                 action: Lang.bind(this, this._onContinueButton),
-                                                default: true },
-                                              { expand: false, x_fill: false, x_align: St.Align.END });
+                                                default: true });
 
         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);
     },
 
+    _createSpinner: function() {
+        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();
+    },
+
+    _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 +134,19 @@ const KeyringDialog = new Lang.Class({
             ShellEntry.addContextMenu(this._passwordEntry, { isPassword: true });
             this._passwordEntry.clutter_text.connect('activate', Lang.bind(this, this._onPasswordActivate));
 
+            this._createSpinner();
             if (rtl) {
-                layout.attach(this._passwordEntry, 0, row, 1, 1);
-                layout.attach(label, 1, row, 1, 1);
+                layout.attach(this._workSpinner.actor, 0, 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 +215,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 = 24;
+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,7 @@ const AuthenticationDialog = new Lang.Class({
         this._passwordEntry.clutter_text.connect('activate', Lang.bind(this, this._onEntryActivate));
         this._passwordBox.add(this._passwordEntry,
                               { expand: true });
+        this._addSpinner();
         this.setInitialKeyFocus(this._passwordEntry);
         this._passwordBox.hide();
 
@@ -165,17 +172,10 @@ const AuthenticationDialog = new Lang.Class({
 
         this._cancelButton = this.addButton({ label: _("Cancel"),
                                               action: Lang.bind(this, this.cancel),
-                                              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 });
+                                              key: Clutter.Escape });
         this._okButton = this.addButton({ label:  _("Authenticate"),
                                           action: Lang.bind(this, this._onAuthenticateButtonPressed),
-                                          default: true },
-                                        { expand: false, x_fill: false, x_align: St.Align.END });
+                                          default: true });
 
         this._doneEmitted = false;
 
@@ -183,6 +183,39 @@ const AuthenticationDialog = new Lang.Class({
         this._cookie = cookie;
     },
 
+    _addSpinner: function() {
+        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._passwordBox.add(this._workSpinner.actor);
+    },
+
+    _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 +262,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

@@ -23,7 +23,7 @@ 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_ICON_SIZE = 16;
 const WORK_SPINNER_ANIMATION_DELAY = 1.0;
 const WORK_SPINNER_ANIMATION_TIME = 0.3;
 

js/ui/panel.js

@@ -30,7 +30,7 @@ const APP_MENU_ICON_MARGIN = 0;
 
 const BUTTON_DND_ACTIVATION_TIMEOUT = 250;
 
-const SPINNER_ANIMATION_TIME = 0.2;
+const SPINNER_ANIMATION_TIME = 1.0;
 
 // To make sure the panel corners blend nicely with the panel,
 // we draw background and borders the same way, e.g. drawing

js/ui/status/network.js

@@ -877,7 +877,7 @@ const NMWirelessDialog = new Lang.Class({
                                                  y_align: Clutter.ActorAlign.CENTER });
 
         let file = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
-        this._noNetworksSpinner = new Animation.AnimatedIcon(file, 24, 24);
+        this._noNetworksSpinner = new Animation.AnimatedIcon(file, 16, 16);
         this._noNetworksBox.add_actor(this._noNetworksSpinner.actor);
         this._noNetworksBox.add_actor(new St.Label({ style_class: 'no-networks-label',
                                                      text: _("No Networks") }));
@@ -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 },
-                                             { expand: true,
-                                               x_fill: false,
-                                               x_align: St.Align.END });
+                                               key: Clutter.Return });
     },
 
     _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 },
-                                            { expand: true, x_fill: false, x_align: St.Align.START });
+                                              key: Clutter.Escape });
         this._okButton = this.addButton({ label:  _("Keep Changes"),
                                           action: Lang.bind(this, this._onSuccess),
-                                          default: true },
-                                        { expand: false, x_fill: false, x_align: St.Align.END });
+                                          default: true });
 
         this._timeoutId = Mainloop.timeout_add(ONE_SECOND, Lang.bind(this, this._tick));
         GLib.Source.set_name_by_id(this._timeoutId, '[gnome-shell] this._tick');