From c0a4d90847484077b97cf4fe99b40c017f972c40 Mon Sep 17 00:00:00 2001
From: Georges Basile Stavracas Neto <georges.stavracas@gmail.com>
Date: Fri, 22 Jan 2021 10:36:37 -0300
Subject: [PATCH] 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 5d9d7d717..aca1ddfd5 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 dcc93bb44..32388621e 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);