dash: Re-fittsify

Now that the dash is no longer attached to a screen edge, it lost
its "infinite width" (Fitts' law). Restore it by moving the visible
bar into a separate layer underneath the actual icons, extend the
icons to the bottom edge, and replace the margin around the dash
with padding inside the icons.

https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/89

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

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

@@ -5,15 +5,14 @@ $dash_placeholder_size: 32px;
 $dash_padding: $base_padding + 4px; // 10px
 $dash_spacing: $base_padding / 4;
 
+$dash_bottom_margin: $base_margin * 4;
 
 $dash_border_radius: $modal_radius * 1.5;
 
 #dash {
-  background-color: $dash_background_color;
   @include fontsize($base_font_size - 2);
-  margin: $base_margin * 4 $base_margin * 2;
+  margin: $base_margin * 4 $base_margin * 2 0;
   padding: 0 $dash_padding;
-  border-radius: $dash_border_radius;
 
   .placeholder {
     // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
@@ -32,14 +31,21 @@ $dash_border_radius: $modal_radius * 1.5;
   }
 }
 
+.dash-background {
+  background-color: $dash_background_color;
+  margin-bottom: $dash_bottom_margin;
+  padding: $dash_padding;
+  border-radius: $dash_border_radius;
+}
+
 // Dash Items
-.dash-item-container > StWidget {
+.dash-item-container .app-well-app, .show-apps {
-  padding: $dash_padding $dash_spacing;
+  padding: 0 $dash_spacing $dash_bottom_margin;
 }
 
 .dash-separator {
   width: 1px;
-  margin: 0 ($dash_spacing + ($dash_padding / 2));
+  margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin;
   background-color: transparentize($osd_fg_color,0.7);
 }
 

js/ui/dash.js

@@ -60,6 +60,7 @@ class DashItemContainer extends St.Widget {
         super._init({
             style_class: 'dash-item-container',
             pivot_point: new Graphene.Point({ x: .5, y: .5 }),
+            layout_manager: new Clutter.BinLayout(),
             scale_x: 0,
             scale_y: 0,
             opacity: 0,
@@ -152,6 +153,7 @@ class DashItemContainer extends St.Widget {
         this.destroy_all_children();
 
         this.child = actor;
+        this.child.y_expand = true;
         this.add_actor(this.child);
     }
 
@@ -203,6 +205,8 @@ class ShowAppsIcon extends DashItemContainer {
                                           { setSizeManually: true,
                                             showLabel: false,
                                             createIcon: this._createIcon.bind(this) });
+        this.icon.y_align = Clutter.ActorAlign.CENTER;
+
         this.toggleButton.add_actor(this.icon);
         this.toggleButton._delegate = this;
 
@@ -300,7 +304,7 @@ const baseIconSizes = [16, 22, 24, 32, 48, 64];
 
 var Dash = GObject.registerClass({
     Signals: { 'icon-size-changed': {} },
-}, class Dash extends St.BoxLayout {
+}, class Dash extends St.Widget {
     _init() {
         this._maxWidth = -1;
         this.iconSize = 64;
@@ -317,26 +321,49 @@ var Dash = GObject.registerClass({
         super._init({
             name: 'dash',
             offscreen_redirect: Clutter.OffscreenRedirect.ALWAYS,
+            layout_manager: new Clutter.BinLayout(),
+        });
+
+        this._dashContainer = new St.BoxLayout({
             x_align: Clutter.ActorAlign.CENTER,
+            y_expand: true,
         });
 
         this._box = new St.Widget({
             clip_to_allocation: true,
             layout_manager: new DashIconsLayout(),
-            x_expand: true,
+            y_expand: true,
-            x_align: Clutter.ActorAlign.CENTER,
         });
         this._box._delegate = this;
-        this.add_child(this._box);
+
+        this._dashContainer.add_child(this._box);
 
         this._showAppsIcon = new ShowAppsIcon();
         this._showAppsIcon.show(false);
         this._showAppsIcon.icon.setIconSize(this.iconSize);
         this._hookUpLabel(this._showAppsIcon);
-        this.add_child(this._showAppsIcon);
+        this._dashContainer.add_child(this._showAppsIcon);
 
         this.showAppsButton = this._showAppsIcon.toggleButton;
 
+        const background = new St.Widget({
+            style_class: 'dash-background',
+        });
+
+        const sizerBox = new Clutter.Actor();
+        sizerBox.add_constraint(new Clutter.BindConstraint({
+            source: this._showAppsIcon.icon,
+            coordinate: Clutter.BindCoordinate.HEIGHT,
+        }));
+        sizerBox.add_constraint(new Clutter.BindConstraint({
+            source: this._dashContainer,
+            coordinate: Clutter.BindCoordinate.WIDTH,
+        }));
+        background.add_child(sizerBox);
+
+        this.add_child(background);
+        this.add_child(this._dashContainer);
+
         this.connect('notify::width', () => {
             if (this._maxWidth !== this.width)
                 this._queueRedisplay();