[gnome-shell] overviewControls/controlsManager: Use a custom layout manager

[Marge Bot <marge-bot src gnome org>]

commit 55510e9cdf9251e81bda141271305bc1f9a634f6
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Wed Dec 30 17:16:18 2020 -0300

    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 |  6 +--
 .../gnome-shell-sass/widgets/_search-entry.scss    |  1 +
 js/ui/overviewControls.js                          | 63 ++++++++++++++++++----
 3 files changed, 54 insertions(+), 16 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss 
b/data/theme/gnome-shell-sass/widgets/_overview.scss
index eb62ba68f7..f952c52036 100644
--- a/data/theme/gnome-shell-sass/widgets/_overview.scss
+++ b/data/theme/gnome-shell-sass/widgets/_overview.scss
@@ -1,10 +1,6 @@
 /* OVERVIEW */
 
-#overview {
-  spacing: 24px;
-}
-
-#overview-group {
+.controls-manager {
   spacing: 24px;
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_search-entry.scss 
b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
index 329dbc7cd5..4568170e46 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss
+++ b/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;
diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 911576c4e2..d31c5b96ca 100644
--- a/js/ui/overviewControls.js
+++ b/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({
-            name: 'overview-group',
-            vertical: true,
-            x_expand: true,
-            y_expand: true,
-        });
-        this.add_actor(this._group);
+        this.add_child(searchEntryBin);
+        this.add_child(this.dash);
+        this.add_child(this.viewSelector);
 
-        this._group.add_child(searchEntryBin);
-        this._group.add_child(this.viewSelector);
-        this._group.add_actor(this.dash);
+        this.layout_manager = new ControlsManagerLayout(searchEntryBin,
+            this.viewSelector, this.dash);
 
         this.connect('destroy', this._onDestroy.bind(this));
     }