[gnome-shell] overviewControls: Limit Dash height to 15% of the overview's

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

commit c0a4d90847484077b97cf4fe99b40c017f972c40
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Fri Jan 22 10:36:37 2021 -0300

    overviewControls: Limit Dash height to 15% of the overview's
    
    Back when the Dash was vertical, the size of each item was calculated
    solely based on the available height. After making the Dash horizontal,
    this was swapped by the available width. However, when the height of the
    Dash decreases, the current code results in never scaling them up ever
    again.
    
    Fix that by making ControlsManagerLayout explicitly pass the maximum Dash
    sizes. Remove the 'notify::width' handler that served the same purpose.
    
    Fixes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3651
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1638>

 js/ui/dash.js             | 38 ++++++++++++++++++++++++--------------
 js/ui/overviewControls.js |  7 ++++++-
 2 files changed, 30 insertions(+), 15 deletions(-)
---
diff --git a/js/ui/dash.js b/js/ui/dash.js
index 5d9d7d717d..aca1ddfd5c 100644
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -307,6 +307,7 @@ var Dash = GObject.registerClass({
 }, class Dash extends St.Widget {
     _init() {
         this._maxWidth = -1;
+        this._maxHeight = -1;
         this.iconSize = 64;
         this._shownInitially = false;
 
@@ -346,7 +347,7 @@ var Dash = GObject.registerClass({
 
         this.showAppsButton = this._showAppsIcon.toggleButton;
 
-        const background = new St.Widget({
+        this._background = new St.Widget({
             style_class: 'dash-background',
         });
 
@@ -359,17 +360,11 @@ var Dash = GObject.registerClass({
             source: this._dashContainer,
             coordinate: Clutter.BindCoordinate.WIDTH,
         }));
-        background.add_child(sizerBox);
+        this._background.add_child(sizerBox);
 
-        this.add_child(background);
+        this.add_child(this._background);
         this.add_child(this._dashContainer);
 
-        this.connect('notify::width', () => {
-            if (this._maxWidth !== this.width)
-                this._queueRedisplay();
-            this._maxWidth = this.width;
-        });
-
         this._workId = Main.initializeDeferredWork(this._box, this._redisplay.bind(this));
 
         this._appSystem = Shell.AppSystem.get_default();
@@ -588,7 +583,7 @@ var Dash = GObject.registerClass({
 
         iconChildren.push(this._showAppsIcon);
 
-        if (this._maxWidth === -1)
+        if (this._maxWidth === -1 || this._maxHeight === -1)
             return;
 
         const themeNode = this.get_theme_node();
@@ -607,21 +602,26 @@ var Dash = GObject.registerClass({
 
         // Enforce valid spacings during the size request
         firstIcon.icon.ensure_style();
-        let [, iconWidth] = firstIcon.icon.get_preferred_width(-1);
-        let [, buttonWidth] = firstButton.get_preferred_width(-1);
+        const [, , iconWidth, iconHeight] = firstIcon.icon.get_preferred_size();
+        const [, , buttonWidth, buttonHeight] = firstButton.get_preferred_size();
 
         // Subtract icon padding and box spacing from the available width
         availWidth -= iconChildren.length * (buttonWidth - iconWidth) +
                        (iconChildren.length - 1) * spacing;
 
-        let availSize = availWidth / iconChildren.length;
+        let availHeight = this._maxHeight;
+        availHeight -= this._background.get_theme_node().get_vertical_padding();
+        availHeight -= themeNode.get_vertical_padding();
+        availHeight -= buttonHeight - iconHeight;
+
+        const maxIconSize = Math.min(availWidth / iconChildren.length, availHeight);
 
         let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
         let iconSizes = baseIconSizes.map(s => s * scaleFactor);
 
         let newIconSize = baseIconSizes[0];
         for (let i = 0; i < iconSizes.length; i++) {
-            if (iconSizes[i] <= availSize)
+            if (iconSizes[i] <= maxIconSize)
                 newIconSize = baseIconSizes[i];
         }
 
@@ -970,4 +970,14 @@ var Dash = GObject.registerClass({
 
         return true;
     }
+
+    setMaxSize(maxWidth, maxHeight) {
+        if (this._maxWidth === maxWidth &&
+            this._maxHeight === maxHeight)
+            return;
+
+        this._maxWidth = maxWidth;
+        this._maxHeight = maxHeight;
+        this._queueRedisplay();
+    }
 });
diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index dcc93bb44f..32388621e9 100644
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -14,6 +14,7 @@ const WorkspaceThumbnail = imports.ui.workspaceThumbnail;
 const WorkspacesView = imports.ui.workspacesView;
 
 const SMALL_WORKSPACE_RATIO = 0.15;
+const DASH_MAX_HEIGHT_RATIO = 0.15;
 
 var SIDE_CONTROLS_ANIMATION_TIME = Overview.ANIMATION_TIME;
 
@@ -118,7 +119,11 @@ class ControlsManagerLayout extends Clutter.BoxLayout {
         availableHeight -= searchHeight + spacing;
 
         // Dash
-        const [, dashHeight] = this._dash.get_preferred_height(width);
+        const maxDashHeight = Math.round(box.get_height() * DASH_MAX_HEIGHT_RATIO);
+        this._dash.setMaxSize(width, maxDashHeight);
+
+        let [, dashHeight] = this._dash.get_preferred_height(width);
+        dashHeight = Math.min(dashHeight, maxDashHeight);
         childBox.set_origin(0, height - dashHeight);
         childBox.set_size(width, dashHeight);
         this._dash.allocate(childBox);