spinner: use a 60fps spinner

- sync with gtk+ and provide a fluid spinner https://bugzilla.gnome.org/show_bug.cgi?id=753064
modalDialog: Match gtk+ buttons style
2015-08-05 13:43:22 +02:00 · 2015-08-01 02:32:04 +02:00
12 changed files with 2567 additions and 163 deletions
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/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; }
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@ -1 +1 @@
-Subproject commit 23e0bc1e71d0cd84d580916638ec5755f2f2d4e1
+Subproject commit e0e74382f166e596f1c8af4765404bfb65db76a2
--- a/data/theme/gnome-shell.css
+++ b/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; }
--- a/data/theme/process-working.svg
+++ b/data/theme/process-working.svg
--- a/js/gdm/authPrompt.js
+++ b/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;

--- a/js/ui/animation.js
+++ b/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',
--- a/js/ui/components/keyring.js
+++ b/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() {
--- a/js/ui/components/polkitAgent.js
+++ b/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() {
--- a/js/ui/modalDialog.js
+++ b/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;

--- a/js/ui/panel.js
+++ b/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
--- a/js/ui/status/network.js
+++ b/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() {
--- a/js/ui/windowManager.js
+++ b/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');