js: Cleanup use of StBin

StBins (inc StButton) should have their content managed via :child
rather than add_child()

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3010>

js/ui/altTab.js

@@ -965,7 +965,7 @@ class ThumbnailSwitcher extends SwitcherPopup.SwitcherList {
 
             let clone = _createWindowClone(mutterWindow, thumbnailSize);
             this._thumbnailBins[i].set_height(binHeight);
-            this._thumbnailBins[i].add_child(clone);
+            this._thumbnailBins[i].child = clone;
 
             mutterWindow.connectObject('destroy',
                 source => this._removeThumbnail(source, clone), this);

js/ui/dash.js

@@ -210,7 +210,7 @@ class ShowAppsIcon extends DashItemContainer {
         });
         this.icon.y_align = Clutter.ActorAlign.CENTER;
 
-        this.toggleButton.add_child(this.icon);
+        this.toggleButton.child = this.icon;
         this.toggleButton._delegate = this;
 
         this.setChild(this.toggleButton);

js/ui/dateMenu.js

@@ -64,7 +64,7 @@ class TodayButton extends St.Button {
         });
 
         const hbox = new St.BoxLayout({vertical: true});
-        this.add_child(hbox);
+        this.child = hbox;
 
         this._dayLabel = new St.Label({
             style_class: 'day-label',

js/ui/magnifier.js

@@ -1469,17 +1469,19 @@ class ZoomRegion {
     // Private methods //
 
     _createActors() {
+        // Add a group to clip the contents of the magnified view.
+        const mainGroup = new Clutter.Actor({clip_to_allocation: true});
+
         // The root actor for the zoom region
-        this._magView = new St.Bin({style_class: 'magnifier-zoom-region'});
+        this._magView = new St.Bin({
+            style_class: 'magnifier-zoom-region',
+            child: mainGroup,
+        });
         global.stage.add_child(this._magView);
 
         // hide the magnified region from CLUTTER_PICK_ALL
         Shell.util_set_hidden_from_pick(this._magView, true);
 
-        // Add a group to clip the contents of the magnified view.
-        let mainGroup = new Clutter.Actor({clip_to_allocation: true});
-        this._magView.set_child(mainGroup);
-
         // Add a background for when the magnified uiGroup is scrolled
         // out of view (don't want to see desktop showing through).
         this._background = new Background.SystemBackground();

js/ui/pageIndicators.js

@@ -62,10 +62,10 @@ export const PageIndicators = GObject.registerClass({
                                  St.ButtonMask.TWO |
                                  St.ButtonMask.THREE,
                     reactive: this._reactive,
-                });
+                    child: new St.Widget({
-                indicator.child = new St.Widget({
+                        style_class: 'page-indicator-icon',
-                    style_class: 'page-indicator-icon',
+                        pivot_point: new Graphene.Point({x: 0.5, y: 0.5}),
-                    pivot_point: new Graphene.Point({x: 0.5, y: 0.5}),
+                    }),
                 });
                 indicator.connect('clicked', () => {
                     this.emit('page-activated', pageIndex);

js/ui/search.js

@@ -304,7 +304,7 @@ class ListSearchResults extends SearchResultsBase {
         });
         this._container.add_child(this._content);
 
-        this._resultDisplayBin.set_child(this._container);
+        this._resultDisplayBin.child = this._container;
     }
 
     _setMoreCount(count) {
@@ -468,10 +468,10 @@ class GridSearchResults extends SearchResultsBase {
             this._grid.layout_manager.spacing = node.get_length('spacing');
         });
 
-        this._resultDisplayBin.set_child(new St.Bin({
+        this._resultDisplayBin.child = new St.Bin({
             child: this._grid,
             x_align: Clutter.ActorAlign.CENTER,
-        }));
+        });
 
         this._maxResults = provider.maxResults ?? -1;
     }
@@ -588,9 +588,11 @@ export const SearchResultsView = GObject.registerClass({
             x_align: Clutter.ActorAlign.CENTER,
             y_align: Clutter.ActorAlign.CENTER,
         });
-        this._statusBin = new St.Bin({y_expand: true});
+        this._statusBin = new St.Bin({
+            y_expand: true,
+            child: this._statusText,
+        });
         this.add_child(this._statusBin);
-        this._statusBin.add_child(this._statusText);
 
         this._highlightDefault = false;
         this._defaultResult = null;

js/ui/status/keyboard.js

@@ -125,14 +125,15 @@ class InputSourceSwitcher extends SwitcherPopup.SwitcherList {
     _addIcon(item) {
         let box = new St.BoxLayout({vertical: true});
 
-        let bin = new St.Bin({style_class: 'input-source-switcher-symbol'});
+        const symbol = new St.Bin({
-        let symbol = new St.Label({
+            style_class: 'input-source-switcher-symbol',
-            text: item.shortName,
+            child: new St.Label({
-            x_align: Clutter.ActorAlign.CENTER,
+                text: item.shortName,
-            y_align: Clutter.ActorAlign.CENTER,
+                x_align: Clutter.ActorAlign.CENTER,
+                y_align: Clutter.ActorAlign.CENTER,
+            }),
         });
-        bin.set_child(symbol);
+        box.add_child(symbol);
-        box.add_child(bin);
 
         let text = new St.Label({
             text: item.displayName,