overviewControls/controlsManager: Use a custom layout manager

In the future, we want to tightly control the state of the
layout throught gestures, which requires hooking everything
together with adjustments. This is the first step in this
direction.

Add a new custom layout manager for ControlsManager that
allocates the search entry, the view selector, and the Dash,
vertically.

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

data/theme/gnome-shell-sass/widgets/_overview.scss

@@ -1,10 +1,6 @@
 /* OVERVIEW */
 
-#overview {
+.controls-manager {
-  spacing: 24px;
-}
-
-#overview-group {
   spacing: 24px;
 }
 

data/theme/gnome-shell-sass/widgets/_search-entry.scss

@@ -11,6 +11,7 @@ $search_entry_height: 36px;
   color: transparentize($fg_color,0.3);
   background-color: $bg_color;
   border-color: $borders_color;
+  margin-top: 24px;
 
   &:hover {
     background-color: $hover_bg_color;

js/ui/overviewControls.js

@@ -6,11 +6,57 @@ const { Clutter, GObject, St } = imports.gi;
 const Dash = imports.ui.dash;
 const ViewSelector = imports.ui.viewSelector;
 
+var ControlsManagerLayout = GObject.registerClass(
+class ControlsManagerLayout extends Clutter.BoxLayout {
+    _init(searchEntry, viewSelector, dash) {
+        super._init({ orientation: Clutter.Orientation.VERTICAL });
+
+        this._searchEntry = searchEntry;
+        this._viewSelector = viewSelector;
+        this._dash = dash;
+    }
+
+    vfunc_set_container(container) {
+        this._container = container;
+        this.hookup_style(container);
+    }
+
+    vfunc_allocate(container, box) {
+        const childBox = new Clutter.ActorBox();
+
+        const { spacing } = this;
+
+        const [width, height] = box.get_size();
+        let availableHeight = height;
+
+        // Search entry
+        const [searchHeight] = this._searchEntry.get_preferred_height(width);
+        childBox.set_origin(0, 0);
+        childBox.set_size(width, searchHeight);
+        this._searchEntry.allocate(childBox);
+
+        availableHeight -= searchHeight + spacing;
+
+        // Dash
+        const [, dashHeight] = this._dash.get_preferred_height(width);
+        childBox.set_origin(0, height - dashHeight);
+        childBox.set_size(width, dashHeight);
+        this._dash.allocate(childBox);
+
+        availableHeight -= dashHeight + spacing;
+
+        // ViewSelector
+        childBox.set_origin(0, searchHeight + spacing);
+        childBox.set_size(width, availableHeight);
+        this._viewSelector.allocate(childBox);
+    }
+});
+
 var ControlsManager = GObject.registerClass(
 class ControlsManager extends St.Widget {
     _init() {
         super._init({
-            layout_manager: new Clutter.BinLayout(),
+            style_class: 'controls-manager',
             x_expand: true,
             y_expand: true,
             clip_to_allocation: true,
@@ -54,17 +100,12 @@ class ControlsManager extends St.Widget {
         this.viewSelector = new ViewSelector.ViewSelector(this._searchEntry,
             this._workspaceAdjustment, this.dash.showAppsButton);
 
-        this._group = new St.BoxLayout({
+        this.add_child(searchEntryBin);
-            name: 'overview-group',
+        this.add_child(this.dash);
-            vertical: true,
+        this.add_child(this.viewSelector);
-            x_expand: true,
-            y_expand: true,
-        });
-        this.add_actor(this._group);
 
-        this._group.add_child(searchEntryBin);
+        this.layout_manager = new ControlsManagerLayout(searchEntryBin,
-        this._group.add_child(this.viewSelector);
+            this.viewSelector, this.dash);
-        this._group.add_actor(this.dash);
 
         this.connect('destroy', this._onDestroy.bind(this));
     }