js: Replace child properties

Every since commit aa394754, StBoxLayout has supported ClutterActor's
expand/align properties in addition to the container-specific child
properties. Given that that's the only container left with a special
child meta, it's time to fully embrace the generic properties (and
eventually remove the child meta).

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/780

js/gdm/authPrompt.js

@@ -87,50 +87,55 @@ var AuthPrompt = GObject.registerClass({
 
         this.connect('destroy', this._onDestroy.bind(this));
 
-        this._userWell = new St.Bin({ x_fill: true, x_align: St.Align.START });
+        this._userWell = new St.Bin({
-        this.add(this._userWell, {
-            x_align: St.Align.START,
             x_fill: true,
-            y_fill: true,
+            x_align: St.Align.START,
-            expand: true
+            x_expand: true,
+            y_expand: true,
+        });
+        this.add_child(this._userWell);
+        this._label = new St.Label({
+            style_class: 'login-dialog-prompt-label',
+            x_expand: false,
+            y_expand: true,
         });
-        this._label = new St.Label({ style_class: 'login-dialog-prompt-label' });
 
-        this.add(this._label, {
+        this.add_child(this._label);
-            expand: true,
+        this._entry = new St.Entry({
-            x_fill: false,
+            style_class: 'login-dialog-prompt-entry',
-            y_fill: true,
+            can_focus: true,
-            x_align: St.Align.START
+            x_expand: false,
+            y_expand: true,
         });
-        this._entry = new St.Entry({ style_class: 'login-dialog-prompt-entry',
-                                     can_focus: true });
         ShellEntry.addContextMenu(this._entry, { isPassword: true, actionMode: Shell.ActionMode.NONE });
 
-        this.add(this._entry, {
+        this.add_child(this._entry);
-            expand: true,
-            x_fill: true,
-            y_fill: false,
-            x_align: St.Align.START
-        });
 
         this._entry.grab_key_focus();
 
-        this._message = new St.Label({ opacity: 0,
+        this._message = new St.Label({
-                                       styleClass: 'login-dialog-message' });
+            opacity: 0,
+            styleClass: 'login-dialog-message',
+            x_expand: false,
+            y_expand: true,
+            y_align: Clutter.ActorAlign.START,
+        });
         this._message.clutter_text.line_wrap = true;
         this._message.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-        this.add(this._message, { x_fill: false, x_align: St.Align.START, y_align: St.Align.START });
+        this.add_child(this._message);
 
-        this._buttonBox = new St.BoxLayout({ style_class: 'login-dialog-button-box',
+        this._buttonBox = new St.BoxLayout({
-                                             vertical: false });
+            style_class: 'login-dialog-button-box',
-        this.add(this._buttonBox, {
+            vertical: false,
-            expand: true,
+            y_align: Clutter.ActorAlign.END,
-            x_align: St.Align.MIDDLE,
-            y_align: St.Align.END
         });
+        this.add_child(this._buttonBox);
 
-        this._defaultButtonWell = new St.Widget({ layout_manager: new Clutter.BinLayout() });
+        this._defaultButtonWell = new St.Widget({
-        this._defaultButtonWellActor = null;
+            layout_manager: new Clutter.BinLayout(),
+            x_align: Clutter.ActorAlign.END,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
 
         this._initButtons();
 
@@ -152,38 +157,32 @@ var AuthPrompt = GObject.registerClass({
     }
 
     _initButtons() {
-        this.cancelButton = new St.Button({ style_class: 'modal-dialog-button button',
+        this.cancelButton = new St.Button({
+            style_class: 'modal-dialog-button button',
             button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
             reactive: true,
             can_focus: true,
-                                            label: _("Cancel") });
+            label: _("Cancel"),
+            x_expand: true,
+        });
+        this.cancelButton.set_x_align(Clutter.ActorAlign.START);
+        this.cancelButton.set_y_align(Clutter.ActorAlign.END);
         this.cancelButton.connect('clicked', () => this.cancel());
-        this._buttonBox.add(this.cancelButton,
+        this._buttonBox.add_child(this.cancelButton);
-                            { expand: false,
-                              x_fill: false,
-                              y_fill: false,
-                              x_align: St.Align.START,
-                              y_align: St.Align.END });
 
-        this._buttonBox.add(this._defaultButtonWell,
+        this._buttonBox.add_child(this._defaultButtonWell);
-                            { expand: true,
+        this.nextButton = new St.Button({
-                              x_fill: false,
+            style_class: 'modal-dialog-button button',
-                              y_fill: false,
-                              x_align: St.Align.END,
-                              y_align: St.Align.MIDDLE });
-        this.nextButton = new St.Button({ style_class: 'modal-dialog-button button',
             button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
             reactive: true,
             can_focus: true,
-                                          label: _("Next") });
+            label: _("Next"),
+        });
+        this.nextButton.set_x_align(Clutter.ActorAlign.END);
+        this.nextButton.set_y_align(Clutter.ActorAlign.END);
         this.nextButton.connect('clicked', () => this.emit('next'));
         this.nextButton.add_style_pseudo_class('default');
-        this._buttonBox.add(this.nextButton,
+        this._buttonBox.add_child(this.nextButton);
-                            { expand: false,
-                              x_fill: false,
-                              y_fill: false,
-                              x_align: St.Align.END,
-                              y_align: St.Align.END });
 
         this._updateNextButtonSensitivity(this._entry.text.length > 0);
 

js/gdm/loginDialog.js

@@ -47,6 +47,7 @@ var UserListItem = GObject.registerClass({
             style_class: 'login-dialog-user-list-item',
             button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
             can_focus: true,
+            x_expand: true,
             child: layout,
             reactive: true,
             x_align: St.Align.START,
@@ -160,7 +161,11 @@ var UserList = GObject.registerClass({
     }
 }, class UserList extends St.ScrollView {
     _init() {
-        super._init({ style_class: 'login-dialog-user-list-view' });
+        super._init({
+            style_class: 'login-dialog-user-list-view',
+            x_expand: true,
+            y_expand: true,
+        });
         this.set_policy(St.PolicyType.NEVER,
                         St.PolicyType.AUTOMATIC);
 
@@ -263,7 +268,7 @@ var UserList = GObject.registerClass({
         this.removeUser(user);
 
         let item = new UserListItem(user);
-        this._box.add(item, { x_fill: true });
+        this._box.add_child(item);
 
         this._items[userName] = item;
 
@@ -440,10 +445,7 @@ var LoginDialog = GObject.registerClass({
         this.add_child(this._userSelectionBox);
 
         this._userList = new UserList();
-        this._userSelectionBox.add(this._userList,
+        this._userSelectionBox.add_child(this._userList);
-                                   { expand: true,
-                                     x_fill: true,
-                                     y_fill: true });
 
         this._authPrompt = new AuthPrompt.AuthPrompt(this._gdmClient, AuthPrompt.AuthPromptMode.UNLOCK_OR_LOG_IN);
         this._authPrompt.connect('prompted', this._onPrompted.bind(this));
@@ -468,10 +470,7 @@ var LoginDialog = GObject.registerClass({
 
         this._notListedButton.hide();
 
-        this._userSelectionBox.add(this._notListedButton,
+        this._userSelectionBox.add_child(this._notListedButton);
-                                   { expand: false,
-                                     x_align: St.Align.START,
-                                     x_fill: true });
 
         this._bannerView = new St.ScrollView({ style_class: 'login-dialog-banner-view',
                                                opacity: 0,

js/ui/altTab.js

@@ -657,9 +657,12 @@ class AppIcon extends St.BoxLayout {
         this.icon = null;
         this._iconBin = new St.Bin({ x_fill: true, y_fill: true });
 
-        this.add(this._iconBin, { x_fill: false, y_fill: false } );
+        this.add_child(this._iconBin);
-        this.label = new St.Label({ text: this.app.get_name() });
+        this.label = new St.Label({
-        this.add(this.label, { x_fill: false });
+            text: this.app.get_name(),
+            x_align: Clutter.ActorAlign.CENTER,
+        });
+        this.add_child(this.label);
     }
 
     // eslint-disable-next-line camelcase
@@ -975,7 +978,7 @@ class WindowIcon extends St.BoxLayout {
 
         this._icon = new St.Widget({ layout_manager: new Clutter.BinLayout() });
 
-        this.add(this._icon, { x_fill: false, y_fill: false } );
+        this.add_child(this._icon);
         this.label = new St.Label({ text: window.get_title() });
 
         let tracker = Shell.WindowTracker.get_default();

js/ui/audioDeviceSelection.js

@@ -43,8 +43,11 @@ var AudioDeviceSelectionDialog = GObject.registerClass({
         this.contentLayout.style_class = 'audio-selection-content';
         this.contentLayout.add(title);
 
-        this._selectionBox = new St.BoxLayout({ style_class: 'audio-selection-box' });
+        this._selectionBox = new St.BoxLayout({
-        this.contentLayout.add(this._selectionBox, { expand: true });
+            style_class: 'audio-selection-box',
+            x_expand: true,
+        });
+        this.contentLayout.add_child(this._selectionBox);
 
         if (Main.sessionMode.allowSettings)
             this.addButton({ action: this._openSettings.bind(this),

js/ui/calendar.js

@@ -404,9 +404,13 @@ var Calendar = GObject.registerClass({
         this._topBox.add(this._backButton);
         this._backButton.connect('clicked', this._onPrevMonthButtonClicked.bind(this));
 
-        this._monthLabel = new St.Label({ style_class: 'calendar-month-label',
+        this._monthLabel = new St.Label({
-                                          can_focus: true });
+            style_class: 'calendar-month-label',
-        this._topBox.add(this._monthLabel, { expand: true, x_fill: false, x_align: St.Align.MIDDLE });
+            can_focus: true,
+            x_align: Clutter.ActorAlign.CENTER,
+            x_expand: true,
+        });
+        this._topBox.add_child(this._monthLabel);
 
         this._forwardButton = new St.Button({ style_class: 'calendar-change-month-forward pager-button',
                                               accessible_name: _("Next month"),

js/ui/components/keyring.js

@@ -54,8 +54,12 @@ class KeyringDialog extends ModalDialog.ModalDialog {
 
     _buildControlTable() {
         let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
-        let table = new St.Widget({ style_class: 'keyring-dialog-control-table',
+        let table = new St.Widget({
-                                    layout_manager: layout });
+            style_class: 'keyring-dialog-control-table',
+            layout_manager: layout,
+            x_expand: true,
+            y_expand: true,
+        });
         layout.hookup_style(table);
         let rtl = table.get_text_direction() == Clutter.TextDirection.RTL;
         let row = 0;
@@ -140,7 +144,7 @@ class KeyringDialog extends ModalDialog.ModalDialog {
         }
 
         this._controlTable = table;
-        this._content.messageBox.add(table, { x_fill: true, y_fill: true });
+        this._content.messageBox.add_child(table);
     }
 
     _updateSensitivity(sensitive) {

js/ui/components/networkAgent.js

@@ -106,10 +106,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
             descriptionLabel.clutter_text.line_wrap = true;
             descriptionLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
 
-            contentBox.messageBox.add(descriptionLabel,
+            contentBox.messageBox.add_child(descriptionLabel);
-                                      { y_fill: true,
-                                        y_align: St.Align.START,
-                                        expand: true });
         }
 
         this._okButton = {

js/ui/components/polkitAgent.js

@@ -67,8 +67,7 @@ var AuthenticationDialog = GObject.registerClass({
         if (userIsRoot) {
             let userLabel = new St.Label(({ style_class: 'polkit-dialog-user-root-label',
                                             text: userRealName }));
-            content.messageBox.add(userLabel, { x_fill: false,
+            content.messageBox.add_child(userLabel);
-                                                x_align: St.Align.START });
         } else {
             let userBox = new St.BoxLayout({ style_class: 'polkit-dialog-user-layout',
                                              vertical: false });
@@ -77,33 +76,34 @@ var AuthenticationDialog = GObject.registerClass({
                                                      { iconSize: DIALOG_ICON_SIZE,
                                                        styleClass: 'polkit-dialog-user-icon' });
             this._userAvatar.hide();
-            userBox.add(this._userAvatar,
+            userBox.add_child(this._userAvatar);
-                        { x_fill: true,
+            let userLabel = new St.Label(({
-                          y_fill: false,
+                style_class: 'polkit-dialog-user-label',
-                          x_align: St.Align.END,
+                text: userRealName,
-                          y_align: St.Align.START });
+                x_expand: true,
-            let userLabel = new St.Label(({ style_class: 'polkit-dialog-user-label',
+                y_align: Clutter.ActorAlign.CENTER,
-                                            text: userRealName }));
+            }));
-            userBox.add(userLabel,
+            userBox.add_child(userLabel);
-                        { x_fill: true,
-                          y_fill: false,
-                          x_align: St.Align.END,
-                          y_align: St.Align.MIDDLE });
         }
 
         this._onUserChanged();
 
         this._passwordBox = new St.BoxLayout({ vertical: false, style_class: 'prompt-dialog-password-box' });
         content.messageBox.add(this._passwordBox);
-        this._passwordLabel = new St.Label(({ style_class: 'prompt-dialog-password-label' }));
+        this._passwordLabel = new St.Label(({
-        this._passwordBox.add(this._passwordLabel, { y_fill: false, y_align: St.Align.MIDDLE });
+            style_class: 'prompt-dialog-password-label',
-        this._passwordEntry = new St.Entry({ style_class: 'prompt-dialog-password-entry',
+            y_align: Clutter.ActorAlign.CENTER,
+        }));
+        this._passwordBox.add_child(this._passwordLabel);
+        this._passwordEntry = new St.Entry({
+            style_class: 'prompt-dialog-password-entry',
             text: "",
-                                             can_focus: true });
+            can_focus: true,
+            x_expand: true,
+        });
         ShellEntry.addContextMenu(this._passwordEntry, { isPassword: true });
         this._passwordEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this));
-        this._passwordBox.add(this._passwordEntry,
+        this._passwordBox.add_child(this._passwordEntry);
-                              { expand: true });
 
         this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, true);
         this._passwordBox.add(this._workSpinner);
@@ -114,7 +114,7 @@ var AuthenticationDialog = GObject.registerClass({
         this._errorMessageLabel = new St.Label({ style_class: 'prompt-dialog-error-label' });
         this._errorMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
         this._errorMessageLabel.clutter_text.line_wrap = true;
-        content.messageBox.add(this._errorMessageLabel, { x_fill: false, x_align: St.Align.START });
+        content.messageBox.add_child(this._errorMessageLabel);
         this._errorMessageLabel.hide();
 
         this._infoMessageLabel = new St.Label({ style_class: 'prompt-dialog-info-label' });

js/ui/ctrlAltTab.js

@@ -177,10 +177,13 @@ class CtrlAltTabSwitcher extends SwitcherPopup.SwitcherList {
             icon = new St.Icon({ icon_name: item.iconName,
                                  icon_size: POPUP_APPICON_SIZE });
         }
-        box.add(icon, { x_fill: false, y_fill: false } );
+        box.add_child(icon);
 
-        let text = new St.Label({ text: item.name });
+        let text = new St.Label({
-        box.add(text, { x_fill: false });
+            text: item.name,
+            x_align: Clutter.ActorAlign.CENTER,
+        });
+        box.add_child(text);
 
         this.addItem(box, text);
     }

js/ui/dateMenu.js

@@ -91,7 +91,8 @@ class WorldClocksSection extends St.Button {
         super._init({
             style_class: 'world-clocks-button',
             x_fill: true,
-            can_focus: true
+            can_focus: true,
+            x_expand: true,
         });
         this._clock = new GnomeDesktop.WallClock();
         this._clockNotifyId = 0;
@@ -253,7 +254,8 @@ class WeatherSection extends St.Button {
         super._init({
             style_class: 'weather-button',
             x_fill: true,
-            can_focus: true
+            can_focus: true,
+            x_expand: true,
         });
 
         this._weatherClient = new Weather.WeatherClient();
@@ -565,7 +567,7 @@ class DateMenuButton extends PanelMenu.Button {
 
         // Fill up the first column
         this._messageList = new Calendar.CalendarMessageList();
-        hbox.add(this._messageList, { expand: true, y_fill: false, y_align: St.Align.START });
+        hbox.add_child(this._messageList);
 
         // Fill up the second column
         let boxLayout = new CalendarColumnLayout(this._calendar);
@@ -590,10 +592,10 @@ class DateMenuButton extends PanelMenu.Button {
         this._displaysSection.add_actor(displaysBox);
 
         this._clocksItem = new WorldClocksSection();
-        displaysBox.add(this._clocksItem, { x_fill: true });
+        displaysBox.add_child(this._clocksItem);
 
         this._weatherItem = new WeatherSection();
-        displaysBox.add(this._weatherItem, { x_fill: true });
+        displaysBox.add_child(this._weatherItem);
 
         // Done with hbox for calendar and event list
 

js/ui/dialog.js

@@ -36,19 +36,15 @@ class Dialog extends St.Widget {
         this._dialog.request_mode = Clutter.RequestMode.HEIGHT_FOR_WIDTH;
         this._dialog.set_offscreen_redirect(Clutter.OffscreenRedirect.ALWAYS);
 
-        this.contentLayout = new St.BoxLayout({ vertical: true,
+        this.contentLayout = new St.BoxLayout({
-                                                style_class: "modal-dialog-content-box" });
+            vertical: true,
-        this._dialog.add(this.contentLayout,
+            style_class: 'modal-dialog-content-box',
-                         { expand: true,
+            y_expand: true,
-                           x_fill: true,
+        });
-                           y_fill: true,
+        this._dialog.add_child(this.contentLayout);
-                           x_align: St.Align.MIDDLE,
-                           y_align: St.Align.START });
 
         this.buttonLayout = new St.Widget ({ layout_manager: new Clutter.BoxLayout({ homogeneous: true }) });
-        this._dialog.add(this.buttonLayout,
+        this._dialog.add_child(this.buttonLayout);
-                         { x_align: St.Align.MIDDLE,
-                           y_align: St.Align.START });
     }
 
     _onDestroy() {

js/ui/endSessionDialog.js

@@ -263,38 +263,35 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
         this._userLoadedId = this._user.connect('notify::is_loaded', this._sync.bind(this));
         this._userChangedId = this._user.connect('changed', this._sync.bind(this));
 
-        let mainContentLayout = new St.BoxLayout({ vertical: false });
+        let mainContentLayout = new St.BoxLayout({
-        this.contentLayout.add(mainContentLayout,
+            vertical: false,
-                               { x_fill: true,
+            x_expand: true,
-                                 y_fill: false });
+            y_expand: false,
+        });
+        this.contentLayout.add_child(mainContentLayout);
 
-        this._iconBin = new St.Bin();
+        this._iconBin = new St.Bin({
-        mainContentLayout.add(this._iconBin,
+            x_expand: true,
-                              { x_fill: true,
+        });
-                                y_fill: false,
+        this._iconBin.set_x_align(Clutter.ActorAlign.END);
-                                x_align: St.Align.END,
+        mainContentLayout.add_child(this._iconBin);
-                                y_align: St.Align.START });
 
         let messageLayout = new St.BoxLayout({ vertical: true,
                                                style_class: 'end-session-dialog-layout' });
-        mainContentLayout.add(messageLayout,
+        mainContentLayout.add_child(messageLayout);
-                              { y_align: St.Align.START });
 
         this._subjectLabel = new St.Label({ style_class: 'end-session-dialog-subject' });
 
-        messageLayout.add(this._subjectLabel,
+        messageLayout.add_child(this._subjectLabel);
-                          { x_fill: false,
-                            y_fill: false,
-                            x_align: St.Align.START,
-                            y_align: St.Align.START });
 
-        this._descriptionLabel = new St.Label({ style_class: 'end-session-dialog-description' });
+        this._descriptionLabel = new St.Label({
+            style_class: 'end-session-dialog-description',
+            y_expand: true,
+        });
         this._descriptionLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
         this._descriptionLabel.clutter_text.line_wrap = true;
 
-        messageLayout.add(this._descriptionLabel,
+        messageLayout.add_child(this._descriptionLabel);
-                          { y_fill: true,
-                            y_align: St.Align.START });
 
         this._checkBox = new CheckBox.CheckBox();
         this._checkBox.connect('clicked', this._sync.bind(this));
@@ -306,11 +303,13 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
         this._batteryWarning.clutter_text.line_wrap = true;
         messageLayout.add(this._batteryWarning);
 
-        this._scrollView = new St.ScrollView({ style_class: 'end-session-dialog-list' });
+        this._scrollView = new St.ScrollView({
+            style_class: 'end-session-dialog-list',
+            x_expand: true,
+            y_expand: true,
+        });
         this._scrollView.set_policy(St.PolicyType.NEVER, St.PolicyType.AUTOMATIC);
-        this.contentLayout.add(this._scrollView,
+        this.contentLayout.add_child(this._scrollView);
-                               { x_fill: true,
-                                 y_fill: true });
         this._scrollView.hide();
 
         this._inhibitorSection = new St.BoxLayout({ vertical: true,

js/ui/ibusCandidatePopup.js

@@ -35,8 +35,8 @@ var CandidateArea = GObject.registerClass({
                                          track_hover: true });
             box._indexLabel = new St.Label({ style_class: 'candidate-index' });
             box._candidateLabel = new St.Label({ style_class: 'candidate-label' });
-            box.add(box._indexLabel, { y_fill: false });
+            box.add_child(box._indexLabel);
-            box.add(box._candidateLabel, { y_fill: false });
+            box.add_child(box._candidateLabel);
             this._candidateBoxes.push(box);
             this.add(box);
 
@@ -49,13 +49,19 @@ var CandidateArea = GObject.registerClass({
 
         this._buttonBox = new St.BoxLayout({ style_class: 'candidate-page-button-box' });
 
-        this._previousButton = new St.Button({ style_class: 'candidate-page-button candidate-page-button-previous button' });
+        this._previousButton = new St.Button({
+            style_class: 'candidate-page-button candidate-page-button-previous button',
+            x_expand: true,
+        });
         this._previousButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
-        this._buttonBox.add(this._previousButton, { expand: true });
+        this._buttonBox.add_child(this._previousButton);
 
-        this._nextButton = new St.Button({ style_class: 'candidate-page-button candidate-page-button-next button' });
+        this._nextButton = new St.Button({
+            style_class: 'candidate-page-button candidate-page-button-next button',
+            x_expand: true,
+        });
         this._nextButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
-        this._buttonBox.add(this._nextButton, { expand: true });
+        this._buttonBox.add_child(this._nextButton);
 
         this.add(this._buttonBox);
 

js/ui/keyboard.js

@@ -167,7 +167,11 @@ class KeyContainer extends St.Widget {
 var Suggestions = GObject.registerClass(
 class Suggestions extends St.BoxLayout {
     _init() {
-        super._init({ style_class: 'word-suggestions', vertical: false });
+        super._init({
+            style_class: 'word-suggestions',
+            vertical: false,
+            x_align: Clutter.ActorAlign.CENTER,
+        });
         this.show();
     }
 
@@ -262,7 +266,7 @@ var Key = GObject.registerClass({
         /* Add the key in a container, so keys can be padded without losing
          * logical proportions between those.
          */
-        this.add(this.keyButton, { expand: true, x_fill: true });
+        this.add_child(this.keyButton);
         this.connect('destroy', this._onDestroy.bind(this));
 
         this._extended_keys = extendedKeys;
@@ -403,8 +407,11 @@ var Key = GObject.registerClass({
 
     _makeKey(key) {
         let label = GLib.markup_escape_text(key, -1);
-        let button = new St.Button ({ label: label,
+        let button = new St.Button ({
-                                      style_class: 'keyboard-key' });
+            label: label,
+            style_class: 'keyboard-key',
+            x_expand: true,
+        });
 
         button.keyWidth = 1;
         button.connect('button-press-event', () => {
@@ -902,16 +909,16 @@ var EmojiSelection = GObject.registerClass({
         this._emojiPager.connect('emoji', (pager, str) => {
             this.emit('emoji-selected', str);
         });
-        this.add(this._emojiPager, { expand: true });
+        this.add_child(this._emojiPager);
 
         this._pageIndicator = new PageIndicators.PageIndicators(
             Clutter.Orientation.HORIZONTAL
         );
-        this.add(this._pageIndicator, { expand: true, x_fill: false, y_fill: false });
+        this.add_child(this._pageIndicator);
         this._pageIndicator.setReactive(false);
 
         let bottomRow = this._createBottomRow();
-        this.add(bottomRow, { expand: true, x_fill: false, y_fill: false });
+        this.add_child(bottomRow);
 
         this._emojiPager.setCurrentPage(0);
     }
@@ -1261,10 +1268,10 @@ class Keyboard extends St.BoxLayout {
         this._currentPage = null;
 
         this._suggestions = new Suggestions();
-        this.add(this._suggestions, { x_align: St.Align.MIDDLE, x_fill: false });
+        this.add_child(this._suggestions);
 
         this._aspectContainer = new AspectContainer({ layout_manager: new Clutter.BinLayout() });
-        this.add(this._aspectContainer, { expand: true });
+        this.add_child(this._aspectContainer);
 
         this._emojiSelection = new EmojiSelection();
         this._emojiSelection.connect('toggle', this._toggleEmoji.bind(this));

js/ui/lookingGlass.js

@@ -114,7 +114,10 @@ var Notebook = GObject.registerClass({
     Signals: { 'selection': { param_types: [Clutter.Actor.$gtype] } },
 }, class Notebook extends St.BoxLayout {
     _init() {
-        super._init({ vertical: true });
+        super._init({
+            vertical: true,
+            y_expand: true,
+        });
 
         this.tabControls = new St.BoxLayout({ style_class: 'labels' });
 
@@ -131,10 +134,10 @@ var Notebook = GObject.registerClass({
             this.selectChild(child);
             return true;
         });
-        labelBox.add(label, { expand: true });
+        labelBox.add_child(label);
         this.tabControls.add(labelBox);
 
-        let scrollview = new St.ScrollView({ x_fill: true, y_fill: true });
+        let scrollview = new St.ScrollView({ y_expand: true });
         scrollview.get_hscroll_bar().hide();
         scrollview.add_actor(child);
 
@@ -145,7 +148,7 @@ var Notebook = GObject.registerClass({
                         _scrollToBottom: false };
         this._tabs.push(tabData);
         scrollview.hide();
-        this.add(scrollview, { expand: true });
+        this.add_child(scrollview);
 
         let vAdjust = scrollview.vscroll.adjustment;
         vAdjust.connect('changed', () => this._onAdjustScopeChanged(tabData));
@@ -263,6 +266,7 @@ class ObjLink extends St.Button {
             style_class: 'shell-link',
             label: text
         });
+        this.set_x_align(Clutter.ActorAlign.START);
         this.get_child().single_line_mode = true;
 
         this._obj = o;
@@ -326,7 +330,7 @@ var WindowList = GObject.registerClass({
             let box = new St.BoxLayout({ vertical: true });
             this.add(box);
             let windowLink = new ObjLink(this._lookingGlass, metaWindow, metaWindow.title);
-            box.add(windowLink, { x_align: St.Align.START, x_fill: false });
+            box.add_child(windowLink);
             let propsBox = new St.BoxLayout({ vertical: true, style: 'padding-left: 6px;' });
             box.add(propsBox);
             propsBox.add(new St.Label({ text: `wmclass: ${metaWindow.get_wm_class()}` }));
@@ -335,10 +339,10 @@ var WindowList = GObject.registerClass({
                 let icon = app.create_icon_texture(22);
                 let propBox = new St.BoxLayout({ style: 'spacing: 6px; ' });
                 propsBox.add(propBox);
-                propBox.add(new St.Label({ text: 'app: ' }), { y_fill: false });
+                propBox.add_child(new St.Label({ text: 'app: ' }));
                 let appLink = new ObjLink(this._lookingGlass, app, app.get_id());
-                propBox.add(appLink, { y_fill: false });
+                propBox.add_child(appLink);
-                propBox.add(icon, { y_fill: false });
+                propBox.add_child(icon);
             } else {
                 propsBox.add(new St.Label({ text: '<untracked>' }));
             }
@@ -384,10 +388,12 @@ class ObjInspector extends St.ScrollView {
 
         let hbox = new St.BoxLayout({ style_class: 'lg-obj-inspector-title' });
         this._container.add_actor(hbox);
-        let label = new St.Label({ text: 'Inspecting: %s: %s'.format(typeof obj,
+        let label = new St.Label({
-                                                                     objectToString(obj)) });
+            text: 'Inspecting: %s: %s'.format(typeof obj, objectToString(obj)),
+            x_expand: true,
+        });
         label.single_line_mode = true;
-        hbox.add(label, { expand: true, y_fill: false });
+        hbox.add_child(label);
         let button = new St.Button({ label: 'Insert', style_class: 'lg-obj-inspector-button' });
         button.connect('clicked', this._onInsert.bind(this));
         hbox.add(button);
@@ -503,8 +509,8 @@ var Inspector = GObject.registerClass({
                                               reactive: true });
         this._eventHandler = eventHandler;
         this.add_actor(eventHandler);
-        this._displayText = new St.Label();
+        this._displayText = new St.Label({ x_expand: true });
-        eventHandler.add(this._displayText, { expand: true });
+        eventHandler.add_child(this._displayText);
 
         eventHandler.connect('key-press-event', this._onKeyPressEvent.bind(this));
         eventHandler.connect('button-press-event', this._onButtonPressEvent.bind(this));
@@ -726,12 +732,18 @@ var Extensions = GObject.registerClass({
 
     _createExtensionDisplay(extension) {
         let box = new St.BoxLayout({ style_class: 'lg-extension', vertical: true });
-        let name = new St.Label({ style_class: 'lg-extension-name',
+        let name = new St.Label({
-                                  text: extension.metadata.name });
+            style_class: 'lg-extension-name',
-        box.add(name, { expand: true });
+            text: extension.metadata.name,
-        let description = new St.Label({ style_class: 'lg-extension-description',
+            x_expand: true,
-                                         text: extension.metadata.description || 'No description' });
+        });
-        box.add(description, { expand: true });
+        box.add_child(name);
+        let description = new St.Label({
+            style_class: 'lg-extension-description',
+            text: extension.metadata.description || 'No description',
+            x_expand: true,
+        });
+        box.add_child(description);
 
         let metaBox = new St.BoxLayout({ style_class: 'lg-extension-meta' });
         box.add(metaBox);
@@ -848,27 +860,37 @@ class LookingGlass extends St.BoxLayout {
 
         let notebook = new Notebook();
         this._notebook = notebook;
-        this.add(notebook, { expand: true });
+        this.add_child(notebook);
 
-        let emptyBox = new St.Bin();
+        let emptyBox = new St.Bin({ x_expand: true });
-        toolbar.add(emptyBox, { expand: true });
+        toolbar.add_child(emptyBox);
         toolbar.add_actor(notebook.tabControls);
 
         this._evalBox = new St.BoxLayout({ name: 'EvalBox', vertical: true });
         notebook.appendPage('Evaluator', this._evalBox);
 
-        this._resultsArea = new St.BoxLayout({ name: 'ResultsArea', vertical: true });
+        this._resultsArea = new St.BoxLayout({
-        this._evalBox.add(this._resultsArea, { expand: true });
+            name: 'ResultsArea',
+            vertical: true,
+            y_expand: true,
+        });
+        this._evalBox.add_child(this._resultsArea);
 
-        this._entryArea = new St.BoxLayout({ name: 'EntryArea' });
+        this._entryArea = new St.BoxLayout({
+            name: 'EntryArea',
+            y_align: Clutter.ActorAlign.END,
+        });
         this._evalBox.add_actor(this._entryArea);
 
         let label = new St.Label({ text: CHEVRON });
         this._entryArea.add(label);
 
-        this._entry = new St.Entry({ can_focus: true });
+        this._entry = new St.Entry({
+            can_focus: true,
+            x_expand: true,
+        });
         ShellEntry.addContextMenu(this._entry);
-        this._entryArea.add(this._entry, { expand: true });
+        this._entryArea.add_child(this._entry);
 
         this._windowList = new WindowList(this);
         notebook.appendPage('Windows', this._windowList);

js/ui/main.js

@@ -740,12 +740,13 @@ class RestartMessage extends ModalDialog.ModalDialog {
                       shouldFadeIn: false,
                       destroyOnClose: true });
 
-        let label = new St.Label({ text: message });
+        let label = new St.Label({
+            text: message,
+            x_align: Clutter.ActorAlign.CENTER,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
 
-        this.contentLayout.add(label, { x_fill: false,
+        this.contentLayout.add_child(label);
-                                        y_fill: false,
-                                        x_align: St.Align.MIDDLE,
-                                        y_align: St.Align.MIDDLE });
         this.buttonLayout.hide();
     }
 });

js/ui/osdWindow.js

@@ -61,8 +61,8 @@ class OsdWindow extends St.Widget {
         this._box.add_constraint(this._boxConstraint);
         this.add_actor(this._box);
 
-        this._icon = new St.Icon();
+        this._icon = new St.Icon({ y_expand: true });
-        this._box.add(this._icon, { expand: true });
+        this._box.add_child(this._icon);
 
         this._label = new St.Label();
         this._box.add(this._label);

js/ui/overview.js

@@ -118,7 +118,7 @@ class OverviewActor extends St.BoxLayout {
         this._controls = new OverviewControls.ControlsManager(this._searchEntry);
 
         // Add our same-line elements after the search entry
-        this.add(this._controls, { y_fill: true, expand: true });
+        this.add_child(this._controls);
     }
 
     get dash() {

js/ui/overviewControls.js

@@ -452,7 +452,7 @@ class ControlsManager extends St.Widget {
         this.add_actor(this._dashSlider);
 
         this._group.add_actor(this._dashSpacer);
-        this._group.add(this.viewSelector, { x_fill: true, expand: true });
+        this._group.add_child(this.viewSelector);
         this._group.add_actor(this._thumbnailsSlider);
 
         layout.connect('allocation-changed', this._updateWorkspacesGeometry.bind(this));

js/ui/padOsd.js

@@ -737,8 +737,8 @@ var PadOsd = GObject.registerClass({
         this.add_actor(buttonBox);
         this._editButton = new St.Button({ label: _("Edit…"),
                                            style_class: 'button',
-                                           x_align: Clutter.ActorAlign.CENTER,
                                            can_focus: true });
+        this._editButton.set_x_align(Clutter.ActorAlign.CENTER);
         this._editButton.connect('clicked', () => {
             this.setEditionMode(true);
         });

js/ui/popupMenu.js

@@ -291,9 +291,10 @@ class PopupSeparatorMenuItem extends PopupBaseMenuItem {
         this._syncVisibility();
 
         this._separator = new St.Widget({ style_class: 'popup-separator-menu-item',
+                                          x_expand: true,
                                           y_expand: true,
                                           y_align: Clutter.ActorAlign.CENTER });
-        this.add(this._separator, { expand: true });
+        this.add_child(this._separator);
     }
 
     _syncVisibility() {
@@ -338,8 +339,12 @@ var PopupSwitchMenuItem = GObject.registerClass({
 
         this.add_child(this.label);
 
-        this._statusBin = new St.Bin({ x_align: St.Align.END });
+        this._statusBin = new St.Bin({
-        this.add(this._statusBin, { expand: true, x_align: St.Align.END });
+            x_align: St.Align.END,
+            x_expand: true,
+        });
+        this._statusBin.set_x_align(Clutter.ActorAlign.END);
+        this.add_child(this._statusBin);
 
         this._statusLabel = new St.Label({
             text: '',
@@ -1132,8 +1137,11 @@ class PopupSubMenuMenuItem extends PopupBaseMenuItem {
         this.add_child(this.label);
         this.label_actor = this.label;
 
-        let expander = new St.Bin({ style_class: 'popup-menu-item-expander' });
+        let expander = new St.Bin({
-        this.add(expander, { expand: true });
+            style_class: 'popup-menu-item-expander',
+            x_expand: true,
+        });
+        this.add_child(expander);
 
         this._triangle = arrowIcon(St.Side.RIGHT);
         this._triangle.pivot_point = new Graphene.Point({ x: 0.5, y: 0.6 });

js/ui/runDialog.js

@@ -57,9 +57,7 @@ class RunDialog extends ModalDialog.ModalDialog {
         let label = new St.Label({ style_class: 'run-dialog-label',
                                    text: _("Enter a Command") });
 
-        this.contentLayout.add(label, { x_fill: false,
+        this.contentLayout.add_child(label);
-                                        x_align: St.Align.START,
-                                        y_align: St.Align.START });
 
         let entry = new St.Entry({ style_class: 'run-dialog-entry',
                                    can_focus: true });
@@ -68,29 +66,29 @@ class RunDialog extends ModalDialog.ModalDialog {
         entry.label_actor = label;
 
         this._entryText = entry.clutter_text;
-        this.contentLayout.add(entry, { y_align: St.Align.START });
+        this.contentLayout.add_child(entry);
         this.setInitialKeyFocus(this._entryText);
 
         this._errorBox = new St.BoxLayout({ style_class: 'run-dialog-error-box' });
 
-        this.contentLayout.add(this._errorBox, { expand: true });
+        this.contentLayout.add_child(this._errorBox);
 
         let errorIcon = new St.Icon({ icon_name: 'dialog-error-symbolic',
                                       icon_size: 24,
-                                      style_class: 'run-dialog-error-icon' });
+                                      style_class: 'run-dialog-error-icon',
+                                      y_align: Clutter.ActorAlign.CENTER });
 
-        this._errorBox.add(errorIcon, { y_align: St.Align.MIDDLE });
+        this._errorBox.add_child(errorIcon);
 
         this._commandError = false;
 
-        this._errorMessage = new St.Label({ style_class: 'run-dialog-error-label' });
+        this._errorMessage = new St.Label({
+            style_class: 'run-dialog-error-label',
+            y_align: Clutter.ActorAlign.CENTER,
+        });
         this._errorMessage.clutter_text.line_wrap = true;
 
-        this._errorBox.add(this._errorMessage, { expand: true,
+        this._errorBox.add_child(this._errorMessage);
-                                                 x_align: St.Align.START,
-                                                 x_fill: false,
-                                                 y_align: St.Align.MIDDLE,
-                                                 y_fill: false });
 
         this._errorBox.hide();
 

js/ui/screenShield.js

@@ -53,11 +53,17 @@ class ScreenShieldClock extends St.BoxLayout {
     _init() {
         super._init({ style_class: 'screen-shield-clock', vertical: true });
 
-        this._time = new St.Label({ style_class: 'screen-shield-clock-time' });
+        this._time = new St.Label({
-        this._date = new St.Label({ style_class: 'screen-shield-clock-date' });
+            style_class: 'screen-shield-clock-time',
+            x_align: Clutter.ActorAlign.CENTER,
+        });
+        this._date = new St.Label({
+            style_class: 'screen-shield-clock-date',
+            x_align: Clutter.ActorAlign.CENTER,
+        });
 
-        this.add(this._time, { x_align: St.Align.MIDDLE });
+        this.add_child(this._time);
-        this.add(this._date, { x_align: St.Align.MIDDLE });
+        this.add_child(this._date);
 
         this._wallClock = new GnomeDesktop.WallClock({ time_only: true });
         this._wallClock.connect('notify::clock', this._updateClock.bind(this));
@@ -98,7 +104,7 @@ var NotificationsBox = GObject.registerClass({
                                                    style_class: 'screen-shield-notifications-container' });
         this._scrollView.add_actor(this._notificationBox);
 
-        this.add(this._scrollView, { x_fill: true, x_align: St.Align.START });
+        this.add_child(this._scrollView);
 
         this._sources = new Map();
         Main.messageTray.getSources().forEach(source => {
@@ -139,10 +145,10 @@ var NotificationsBox = GObject.registerClass({
 
     _makeNotificationSource(source, box) {
         let sourceActor = new MessageTray.SourceActor(source, SUMMARY_ICON_SIZE);
-        box.add(sourceActor, { y_fill: true });
+        box.add_child(sourceActor);
 
         let textBox = new St.BoxLayout({ vertical: true });
-        box.add(textBox, { y_fill: false, y_align: St.Align.START });
+        box.add_child(textBox);
 
         let title = new St.Label({ text: source.title,
                                    style_class: 'screen-shield-notification-label' });
@@ -165,7 +171,7 @@ var NotificationsBox = GObject.registerClass({
         box.add(sourceBin);
 
         let textBox = new St.BoxLayout({ vertical: true });
-        box.add(textBox, { y_fill: false, y_align: St.Align.START });
+        box.add_child(textBox);
 
         let title = new St.Label({ text: source.title,
                                    style_class: 'screen-shield-notification-label' });
@@ -227,7 +233,7 @@ var NotificationsBox = GObject.registerClass({
         obj.sourceBox = new St.BoxLayout({ style_class: 'screen-shield-notification-source',
                                            x_expand: true });
         this._showSource(source, obj, obj.sourceBox);
-        this._notificationBox.add(obj.sourceBox, { x_fill: false, x_align: St.Align.START });
+        this._notificationBox.add_child(obj.sourceBox);
 
         obj.sourceCountChangedId = source.connect('notify::count', source => {
             this._countChanged(source, obj);
@@ -1138,20 +1144,13 @@ var ScreenShield = class {
                                                          vertical: true,
                                                          style_class: 'screen-shield-contents-box' });
         this._clock = new Clock();
-        this._lockScreenContentsBox.add(this._clock, {
+        this._lockScreenContentsBox.add_child(this._clock);
-            x_fill: true,
-            y_fill: true
-        });
 
         this._lockScreenContents.add_actor(this._lockScreenContentsBox);
 
         this._notificationsBox = new NotificationsBox();
         this._wakeUpScreenId = this._notificationsBox.connect('wake-up-screen', this._wakeUpScreen.bind(this));
-        this._lockScreenContentsBox.add(this._notificationsBox, {
+        this._lockScreenContentsBox.add_child(this._notificationsBox);
-            x_fill: true,
-            y_fill: true,
-            expand: true
-        });
 
         this._hasLockScreen = true;
     }

js/ui/search.js

@@ -70,18 +70,21 @@ class ListSearchResult extends SearchResult {
         this.style_class = 'list-search-result';
         this.x_fill = true;
 
-        let content = new St.BoxLayout({ style_class: 'list-search-result-content',
+        let content = new St.BoxLayout({
-                                         vertical: false });
+            style_class: 'list-search-result-content',
+            vertical: false,
+            x_expand: true,
+        });
         this.set_child(content);
 
         this._termsChangedId = 0;
 
-        let titleBox = new St.BoxLayout({ style_class: 'list-search-result-title' });
+        let titleBox = new St.BoxLayout({
+            style_class: 'list-search-result-title',
+            y_align: Clutter.ActorAlign.CENTER,
+        });
 
-        content.add(titleBox, { x_fill: true,
+        content.add_child(titleBox);
-                                y_fill: false,
-                                x_align: St.Align.START,
-                                y_align: St.Align.MIDDLE });
 
         // An icon for, or thumbnail of, content
         let icon = this.metaInfo['createIcon'](this.ICON_SIZE);
@@ -89,20 +92,20 @@ class ListSearchResult extends SearchResult {
             titleBox.add(icon);
         }
 
-        let title = new St.Label({ text: this.metaInfo['name'] });
+        let title = new St.Label({
-        titleBox.add(title, { x_fill: false,
+            text: this.metaInfo['name'],
-                              y_fill: false,
+            y_align: Clutter.ActorAlign.CENTER,
-                              x_align: St.Align.START,
+        });
-                              y_align: St.Align.MIDDLE });
+        titleBox.add_child(title);
 
         this.label_actor = title;
 
         if (this.metaInfo['description']) {
-            this._descriptionLabel = new St.Label({ style_class: 'list-search-result-description' });
+            this._descriptionLabel = new St.Label({
-            content.add(this._descriptionLabel, { x_fill: false,
+                style_class: 'list-search-result-description',
-                                                  y_fill: false,
+                y_align: Clutter.ActorAlign.CENTER,
-                                                  x_align: St.Align.START,
+            });
-                                                  y_align: St.Align.MIDDLE });
+            content.add_child(this._descriptionLabel);
 
             this._termsChangedId =
                 this._resultsView.connect('terms-changed',
@@ -163,9 +166,8 @@ var SearchResultsBase = GObject.registerClass({
         this._terms = [];
         this._focusChild = null;
 
-        this._resultDisplayBin = new St.Bin({ x_fill: true,
+        this._resultDisplayBin = new St.Bin({ x_fill: true });
-                                              y_fill: true });
+        this.add_child(this._resultDisplayBin);
-        this.add(this._resultDisplayBin, { expand: true });
 
         let separator = new St.Widget({ style_class: 'search-section-separator' });
         this.add(separator);
@@ -302,14 +304,14 @@ class ListSearchResults extends SearchResultsBase {
             Main.overview.toggle();
         });
 
-        this._container.add(this.providerInfo, { x_fill: false,
+        this._container.add_child(this.providerInfo);
-                                                 y_fill: false,
-                                                 x_align: St.Align.START,
-                                                 y_align: St.Align.START });
 
-        this._content = new St.BoxLayout({ style_class: 'list-search-results',
+        this._content = new St.BoxLayout({
-                                           vertical: true });
+            style_class: 'list-search-results',
-        this._container.add(this._content, { expand: true });
+            vertical: true,
+            x_expand: true,
+        });
+        this._container.add_child(this._content);
 
         this._resultDisplayBin.set_child(this._container);
     }
@@ -428,10 +430,12 @@ var SearchResultsView = GObject.registerClass({
         this._content = new MaxWidthBox({ name: 'searchResultsContent',
                                           vertical: true });
 
-        this._scrollView = new St.ScrollView({ x_fill: true,
+        this._scrollView = new St.ScrollView({
-                                               y_fill: false,
             overlay_scrollbars: true,
-                                               style_class: 'search-display vfade' });
+            style_class: 'search-display vfade',
+            x_expand: true,
+            y_expand: true,
+        });
         this._scrollView.set_policy(St.PolicyType.NEVER, St.PolicyType.AUTOMATIC);
         this._scrollView.add_actor(this._content);
 
@@ -439,18 +443,11 @@ var SearchResultsView = GObject.registerClass({
         action.connect('pan', this._onPan.bind(this));
         this._scrollView.add_action(action);
 
-        this.add(this._scrollView, {
+        this.add_child(this._scrollView);
-            x_fill: true,
-            y_fill: true,
-            expand: true,
-            x_align: St.Align.START,
-            y_align: St.Align.STAR
-        });
 
         this._statusText = new St.Label({ style_class: 'search-statustext' });
-        this._statusBin = new St.Bin({ x_align: St.Align.MIDDLE,
+        this._statusBin = new St.Bin({ y_expand: true });
-                                       y_align: St.Align.MIDDLE });
+        this.add_child(this._statusBin);
-        this.add(this._statusBin, { expand: true });
         this._statusBin.add_actor(this._statusText);
 
         this._highlightDefault = false;
@@ -772,6 +769,7 @@ class ProviderInfo extends St.Button {
                       accessible_name: provider.appInfo.get_name(),
                       track_hover: true });
 
+        this.set_y_align(Clutter.ActorAlign.START);
         this._content = new St.BoxLayout({ vertical: false,
                                            style_class: 'list-search-provider-content' });
         this.set_child(this._content);

js/ui/shellMountOperation.js

@@ -263,7 +263,7 @@ var ShellMountQuestionDialog = GObject.registerClass({
         super._init({ styleClass: 'mount-dialog' });
 
         this._content = new Dialog.MessageDialogContent({ icon });
-        this.contentLayout.add(this._content, { x_fill: true, y_fill: false });
+        this.contentLayout.add_child(this._content);
     }
 
     update(message, choices) {
@@ -299,8 +299,11 @@ var ShellMountPasswordDialog = GObject.registerClass({
         let rtl = grid.get_text_direction() === Clutter.TextDirection.RTL;
 
         if (flags & Gio.AskPasswordFlags.TCRYPT) {
-            this._keyfilesLabel = new St.Label(({ style_class: 'prompt-dialog-keyfiles-label',
+            this._keyfilesLabel = new St.Label({
-                                                  visible: false }));
+                style_class: 'prompt-dialog-keyfiles-label',
+                visible: false,
+                y_align: Clutter.ActorAlign.CENTER,
+            });
 
             this._hiddenVolume = new CheckBox.CheckBox(_("Hidden Volume"));
             content.messageBox.add(this._hiddenVolume);
@@ -318,7 +321,7 @@ var ShellMountPasswordDialog = GObject.registerClass({
             );
             this._keyfilesLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
             this._keyfilesLabel.clutter_text.line_wrap = true;
-            content.messageBox.add(this._keyfilesLabel, { y_fill: false, y_align: St.Align.MIDDLE, expand: true });
+            content.messageBox.add_child(this._keyfilesLabel);
 
             this._pimLabel = new St.Label({ style_class: 'prompt-dialog-password-label',
                                             text: _("PIM Number"),
@@ -491,14 +494,16 @@ var ShellProcessesDialog = GObject.registerClass({
         super._init({ styleClass: 'mount-dialog' });
 
         this._content = new Dialog.MessageDialogContent({ icon });
-        this.contentLayout.add(this._content, { x_fill: true, y_fill: false });
+        this.contentLayout.add_child(this._content);
 
-        let scrollView = new St.ScrollView({ style_class: 'mount-dialog-app-list' });
+        let scrollView = new St.ScrollView({
+            style_class: 'mount-dialog-app-list',
+            x_expand: true,
+            y_expand: true,
+        });
         scrollView.set_policy(St.PolicyType.NEVER,
                               St.PolicyType.AUTOMATIC);
-        this.contentLayout.add(scrollView,
+        this.contentLayout.add_child(scrollView);
-                               { x_fill: true,
-                                 y_fill: true });
         scrollView.hide();
 
         this._applicationList = new St.BoxLayout({ vertical: true });
@@ -527,7 +532,7 @@ var ShellProcessesDialog = GObject.registerClass({
                 return;
 
             let item = new ListItem(app);
-            this._applicationList.add(item, { x_fill: true });
+            this._applicationList.add_child(item);
 
             item.connect('activate', () => {
                 // use -1 to indicate Cancel

js/ui/slider.js

@@ -19,7 +19,8 @@ var Slider = GObject.registerClass({
             style_class: 'slider',
             can_focus: true,
             reactive: true,
-            accessible_role: Atk.Role.SLIDER
+            accessible_role: Atk.Role.SLIDER,
+            x_expand: true,
         });
 
         this._releaseId = 0;

js/ui/status/brightness.js

@@ -41,7 +41,7 @@ class Indicator extends PanelMenu.SystemIndicator {
         let icon = new St.Icon({ icon_name: 'display-brightness-symbolic',
                                  style_class: 'popup-menu-icon' });
         this._item.add(icon);
-        this._item.add(this._slider, { expand: true });
+        this._item.add_child(this._slider);
         this._item.connect('button-press-event', (actor, event) => {
             return this._slider.startDragging(event);
         });

js/ui/status/keyboard.js

@@ -21,9 +21,12 @@ class LayoutMenuItem extends PopupMenu.PopupBaseMenuItem {
     _init(displayName, shortName) {
         super._init();
 
-        this.label = new St.Label({ text: displayName });
+        this.label = new St.Label({
+            text: displayName,
+            x_expand: true,
+        });
         this.indicator = new St.Label({ text: shortName });
-        this.add(this.label, { expand: true });
+        this.add_child(this.label);
         this.add(this.indicator);
         this.label_actor = this.label;
     }
@@ -116,10 +119,10 @@ class InputSourceSwitcher extends SwitcherPopup.SwitcherList {
         let bin = new St.Bin({ style_class: 'input-source-switcher-symbol' });
         let symbol = new St.Label({ text: item.shortName });
         bin.set_child(symbol);
-        box.add(bin, { x_fill: false, y_fill: false } );
+        box.add_child(bin);
 
         let text = new St.Label({ text: item.displayName });
-        box.add(text, { x_fill: false });
+        box.add_child(text);
 
         this.addItem(box, text);
     }

js/ui/status/network.js

@@ -635,17 +635,23 @@ var NMWirelessDialogItem = GObject.registerClass({
         this.add_action(action);
 
         let title = ssidToLabel(this._ap.get_ssid());
-        this._label = new St.Label({ text: title });
+        this._label = new St.Label({
+            text: title,
+            x_expand: true,
+        });
 
         this.label_actor = this._label;
-        this.add(this._label, { x_align: St.Align.START });
+        this.add_child(this._label);
 
         this._selectedIcon = new St.Icon({ style_class: 'nm-dialog-icon',
                                            icon_name: 'object-select-symbolic' });
         this.add(this._selectedIcon);
 
-        this._icons = new St.BoxLayout({ style_class: 'nm-dialog-icons' });
+        this._icons = new St.BoxLayout({
-        this.add(this._icons, { expand: true, x_fill: false, x_align: St.Align.END });
+            style_class: 'nm-dialog-icons',
+            x_align: Clutter.ActorAlign.END,
+        });
+        this.add_child(this._icons);
 
         this._secureIcon = new St.Icon({ style_class: 'nm-dialog-icon' });
         if (this._ap._secType != NMAccessPointSecurity.NONE)
@@ -846,7 +852,10 @@ class NMWirelessDialog extends ModalDialog.ModalDialog {
         this.contentLayout.style_class = 'nm-dialog-content';
         this.contentLayout.add(headline);
 
-        this._stack = new St.Widget({ layout_manager: new Clutter.BinLayout() });
+        this._stack = new St.Widget({
+            layout_manager: new Clutter.BinLayout(),
+            y_expand: true,
+        });
 
         this._itemBox = new St.BoxLayout({ vertical: true });
         this._scrollView = new St.ScrollView({ style_class: 'nm-dialog-scroll-view' });
@@ -889,13 +898,13 @@ class NMWirelessDialog extends ModalDialog.ModalDialog {
                                                 text: _("Use hardware switch to turn off") });
         airplaneSubStack.add_actor(this._airplaneInactive);
 
-        this._airplaneBox.add(this._airplaneIcon, { x_align: St.Align.MIDDLE });
+        this._airplaneBox.add_child(this._airplaneIcon);
-        this._airplaneBox.add(this._airplaneHeadline, { x_align: St.Align.MIDDLE });
+        this._airplaneBox.add_child(this._airplaneHeadline);
-        this._airplaneBox.add(this._airplaneText, { x_align: St.Align.MIDDLE });
+        this._airplaneBox.add_child(this._airplaneText);
-        this._airplaneBox.add(airplaneSubStack, { x_align: St.Align.MIDDLE });
+        this._airplaneBox.add_child(airplaneSubStack);
         this._stack.add_child(this._airplaneBox);
 
-        this.contentLayout.add(this._stack, { expand: true });
+        this.contentLayout.add_child(this._stack);
 
         this._disconnectButton = this.addButton({ action: this.close.bind(this),
                                                   label: _("Cancel"),

js/ui/status/power.js

@@ -29,7 +29,7 @@ class Indicator extends PanelMenu.SystemIndicator {
         this._indicator = this._addIndicator();
         this._percentageLabel = new St.Label({ y_expand: true,
                                                y_align: Clutter.ActorAlign.CENTER });
-        this.add(this._percentageLabel, { expand: true, y_fill: true });
+        this.add_child(this._percentageLabel);
         this.add_style_class_name('power-status');
 
         this._proxy = new PowerManagerProxy(Gio.DBus.system, BUS_NAME, OBJECT_PATH,

js/ui/status/system.js

@@ -179,7 +179,9 @@ class Indicator extends PanelMenu.SystemIndicator {
                                    can_focus: true,
                                    track_hover: true,
                                    accessible_name: accessibleName,
+                                   x_expand: true,
                                    style_class: 'system-menu-action' });
+        icon.set_x_align(Clutter.ActorAlign.CENTER);
         icon.child = new St.Icon({ icon_name: iconName });
         return icon;
     }
@@ -251,14 +253,14 @@ class Indicator extends PanelMenu.SystemIndicator {
             log('Missing required core component Settings, expect trouble…');
             this._settingsAction = new St.Widget();
         }
-        item.add(this._settingsAction, { expand: true, x_fill: false });
+        item.add_child(this._settingsAction);
 
         this._orientationLockAction = this._createActionButton('', _("Orientation Lock"));
         this._orientationLockAction.connect('clicked', () => {
             this.menu.itemActivated(BoxPointer.PopupAnimation.NONE);
             this._systemActions.activateLockOrientation();
         });
-        item.add(this._orientationLockAction, { expand: true, x_fill: false });
+        item.add_child(this._orientationLockAction);
         this._systemActions.bind_property('can-lock-orientation',
                                           this._orientationLockAction,
                                           'visible',
@@ -273,7 +275,7 @@ class Indicator extends PanelMenu.SystemIndicator {
             this.menu.itemActivated(BoxPointer.PopupAnimation.NONE);
             this._systemActions.activateLockScreen();
         });
-        item.add(this._lockScreenAction, { expand: true, x_fill: false });
+        item.add_child(this._lockScreenAction);
         this._systemActions.bind_property('can-lock-screen',
                                           this._lockScreenAction,
                                           'visible',
@@ -300,7 +302,7 @@ class Indicator extends PanelMenu.SystemIndicator {
                                           bindFlags);
 
         this._altSwitcher = new AltSwitcher(this._powerOffAction, this._suspendAction);
-        item.add(this._altSwitcher, { expand: true, x_fill: false });
+        item.add_child(this._altSwitcher);
 
         this.menu.addMenuItem(item);
 

js/ui/status/volume.js

@@ -42,7 +42,7 @@ var StreamSlider = class {
 
         this._icon = new St.Icon({ style_class: 'popup-menu-icon' });
         this.item.add(this._icon);
-        this.item.add(this._slider, { expand: true });
+        this.item.add_child(this._slider);
         this.item.connect('button-press-event', (actor, event) => {
             return this._slider.startDragging(event);
         });

js/ui/switchMonitor.js

@@ -84,10 +84,10 @@ class SwitchMonitorSwitcher extends SwitcherPopup.SwitcherList {
 
         let icon = new St.Icon({ icon_name: item.icon,
                                  icon_size: APP_ICON_SIZE });
-        box.add(icon, { x_fill: false, y_fill: false } );
+        box.add_child(icon);
 
         let text = new St.Label({ text: item.label });
-        box.add(text, { x_fill: false });
+        box.add_child(text);
 
         this.addItem(box, text);
     }

js/ui/viewSelector.js

@@ -130,7 +130,10 @@ var ViewSelector = GObject.registerClass({
     }
 }, class ViewSelector extends Shell.Stack {
     _init(searchEntry, showAppsButton) {
-        super._init({ name: 'viewSelector' });
+        super._init({
+            name: 'viewSelector',
+            x_expand: true,
+        });
 
         this._showAppsButton = showAppsButton;
         this._showAppsButton.connect('notify::checked', this._onShowAppsButtonToggled.bind(this));

js/ui/windowManager.js

@@ -56,11 +56,13 @@ class DisplayChangeDialog extends ModalDialog.ModalDialog {
         let title = _("Do you want to keep these display settings?");
         let body = this._formatCountDown();
 
-        this._content = new Dialog.MessageDialogContent({ icon, title, body });
+        this._content = new Dialog.MessageDialogContent({
+            icon, title, body,
+            x_expand: true,
+            y_expand: true,
+        });
 
-        this.contentLayout.add(this._content,
+        this.contentLayout.add_child(this._content);
-                               { x_fill: true,
-                                 y_fill: true });
 
         /* Translators: this and the following message should be limited in length,
            to avoid ellipsizing the labels.