[gnome-shell] workspaceSwitcherPopup: Implement new OSD design

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

commit f88222edd6ff4dd1fcc4b1de9ec5176d9fdbf294
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed Jan 26 01:33:21 2022 +0100

    workspaceSwitcherPopup: Implement new OSD design
    
    Move the popup to the bottom and represent workspaces as small dots
    instead of as scaled down representations of the work area.
    
    https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/152
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2127>

 .../widgets/_workspace-switcher.scss               |  38 ++----
 js/ui/workspaceSwitcherPopup.js                    | 145 +++------------------
 2 files changed, 29 insertions(+), 154 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss 
b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
index 3edacda5b4..1996e09f75 100644
--- a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
@@ -1,38 +1,24 @@
 /* Workspace Switcher */
 
-$ws_padding: $base_padding*2;
-$ws_border_radius: $modal_radius + 8px;
-
-.workspace-switcher-group {
-  padding: $base_padding * 2;
-}
-
-.workspace-switcher-container {
-  @extend %osd_panel;
-  padding: $ws_padding;
-  border-radius: $ws_border_radius;
-  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
-}
+$ws_indicator_height: $base_icon_size * 2;
+$ws_dot_active: $ws_indicator_height / 3;
+$ws_dot_inactive: $ws_indicator_height / 6;
 
 .workspace-switcher {
-  background: transparent;
-  border: none;
-  border-radius: 0;
+  @extend %osd_panel;
+  margin: 4em;
   spacing: $base_spacing * 2;
 }
 
 .ws-switcher-indicator {
-  background: transparent;
-  height: 50px;
-  background-size: 32px;
-  border: 1px solid transparentize($osd_fg_color,0.9);
-  border-radius: $base_border_radius + 3px;
+  background-color: transparentize($osd_fg_color,0.5);
+  padding: $ws_dot_inactive / 2;
+  margin: ($ws_indicator_height - $ws_dot_inactive) / 2;
+  border-radius: $ws_indicator_height;
 
   &:active {
-    height: 52px;
-    background-color: $selected_bg_color;
-    border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%));
-    border-radius: $base_border_radius + 3px;
-    color: $selected_fg_color;
+    background-color: $osd_fg_color;
+    padding: $ws_dot_active / 2;
+    margin: ($ws_indicator_height - $ws_dot_active) / 2;
   }
 }
diff --git a/js/ui/workspaceSwitcherPopup.js b/js/ui/workspaceSwitcherPopup.js
index 9c5b3a9a71..23bb983167 100644
--- a/js/ui/workspaceSwitcherPopup.js
+++ b/js/ui/workspaceSwitcherPopup.js
@@ -3,140 +3,35 @@
 
 const { Clutter, GLib, GObject, St } = imports.gi;
 
+const Layout = imports.ui.layout;
 const Main = imports.ui.main;
 
 var ANIMATION_TIME = 100;
 var DISPLAY_TIMEOUT = 600;
 
-var WorkspaceSwitcherPopupList = GObject.registerClass(
-class WorkspaceSwitcherPopupList extends St.Widget {
+
+var WorkspaceSwitcherPopup = GObject.registerClass(
+class WorkspaceSwitcherPopup extends Clutter.Actor {
     _init() {
         super._init({
-            style_class: 'workspace-switcher',
             offscreen_redirect: Clutter.OffscreenRedirect.ALWAYS,
+            x_expand: true,
+            y_expand: true,
+            x_align: Clutter.ActorAlign.CENTER,
+            y_align: Clutter.ActorAlign.END,
         });
 
-        this._itemSpacing = 0;
-        this._childHeight = 0;
-        this._childWidth = 0;
-        this._orientation = global.workspace_manager.layout_rows == -1
-            ? Clutter.Orientation.VERTICAL
-            : Clutter.Orientation.HORIZONTAL;
-
-        this.connect('style-changed', () => {
-            this._itemSpacing = this.get_theme_node().get_length('spacing');
-        });
-    }
-
-    _getPreferredSizeForOrientation(_forSize) {
-        let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
-        let themeNode = this.get_theme_node();
-
-        let availSize;
-        if (this._orientation == Clutter.Orientation.HORIZONTAL)
-            availSize = workArea.width - themeNode.get_horizontal_padding();
-        else
-            availSize = workArea.height - themeNode.get_vertical_padding();
-
-        let size = 0;
-        for (let child of this.get_children()) {
-            let [, childNaturalHeight] = child.get_preferred_height(-1);
-            let height = childNaturalHeight * workArea.width / workArea.height;
-
-            if (this._orientation == Clutter.Orientation.HORIZONTAL)
-                size += height * workArea.width / workArea.height;
-            else
-                size += height;
-        }
-
-        let workspaceManager = global.workspace_manager;
-        let spacing = this._itemSpacing * (workspaceManager.n_workspaces - 1);
-        size += spacing;
-        size = Math.min(size, availSize);
-
-        if (this._orientation == Clutter.Orientation.HORIZONTAL) {
-            this._childWidth = (size - spacing) / workspaceManager.n_workspaces;
-            return themeNode.adjust_preferred_width(size, size);
-        } else {
-            this._childHeight = (size - spacing) / workspaceManager.n_workspaces;
-            return themeNode.adjust_preferred_height(size, size);
-        }
-    }
-
-    _getSizeForOppositeOrientation() {
-        let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
-
-        if (this._orientation == Clutter.Orientation.HORIZONTAL) {
-            this._childHeight = Math.round(this._childWidth * workArea.height / workArea.width);
-            return [this._childHeight, this._childHeight];
-        } else {
-            this._childWidth = Math.round(this._childHeight * workArea.width / workArea.height);
-            return [this._childWidth, this._childWidth];
-        }
-    }
-
-    vfunc_get_preferred_height(forWidth) {
-        if (this._orientation == Clutter.Orientation.HORIZONTAL)
-            return this._getSizeForOppositeOrientation();
-        else
-            return this._getPreferredSizeForOrientation(forWidth);
-    }
-
-    vfunc_get_preferred_width(forHeight) {
-        if (this._orientation == Clutter.Orientation.HORIZONTAL)
-            return this._getPreferredSizeForOrientation(forHeight);
-        else
-            return this._getSizeForOppositeOrientation();
-    }
-
-    vfunc_allocate(box) {
-        this.set_allocation(box);
-
-        let themeNode = this.get_theme_node();
-        box = themeNode.get_content_box(box);
-
-        let childBox = new Clutter.ActorBox();
-
-        let rtl = this.text_direction == Clutter.TextDirection.RTL;
-        let x = rtl ? box.x2 - this._childWidth : box.x1;
-        let y = box.y1;
-        for (let child of this.get_children()) {
-            childBox.x1 = Math.round(x);
-            childBox.x2 = Math.round(x + this._childWidth);
-            childBox.y1 = Math.round(y);
-            childBox.y2 = Math.round(y + this._childHeight);
-
-            if (this._orientation == Clutter.Orientation.HORIZONTAL) {
-                if (rtl)
-                    x -= this._childWidth + this._itemSpacing;
-                else
-                    x += this._childWidth + this._itemSpacing;
-            } else {
-                y += this._childHeight + this._itemSpacing;
-            }
-            child.allocate(childBox);
-        }
-    }
-});
-
-var WorkspaceSwitcherPopup = GObject.registerClass(
-class WorkspaceSwitcherPopup extends St.Widget {
-    _init() {
-        super._init({ x: 0,
-                      y: 0,
-                      width: global.screen_width,
-                      height: global.screen_height,
-                      style_class: 'workspace-switcher-group' });
+        const constraint = new Layout.MonitorConstraint({ primary: true });
+        this.add_constraint(constraint);
 
         Main.uiGroup.add_actor(this);
 
         this._timeoutId = 0;
 
-        this._container = new St.BoxLayout({ style_class: 'workspace-switcher-container' });
-        this.add_child(this._container);
-
-        this._list = new WorkspaceSwitcherPopupList();
-        this._container.add_child(this._list);
+        this._list = new St.BoxLayout({
+            style_class: 'workspace-switcher',
+        });
+        this.add_child(this._list);
 
         this._redisplay();
 
@@ -167,12 +62,6 @@ class WorkspaceSwitcherPopup extends St.Widget {
 
             this._list.add_actor(indicator);
         }
-
-        let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
-        let [, containerNatHeight] = this._container.get_preferred_height(global.screen_width);
-        let [, containerNatWidth] = this._container.get_preferred_width(containerNatHeight);
-        this._container.x = workArea.x + Math.floor((workArea.width - containerNatWidth) / 2);
-        this._container.y = workArea.y + Math.floor((workArea.height - containerNatHeight) / 2);
     }
 
     display(activeWorkspaceIndex) {
@@ -186,8 +75,8 @@ class WorkspaceSwitcherPopup extends St.Widget {
 
         const duration = this.visible ? 0 : ANIMATION_TIME;
         this.show();
-        this._container.opacity = 0;
-        this._container.ease({
+        this.opacity = 0;
+        this.ease({
             opacity: 255,
             duration,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
@@ -197,7 +86,7 @@ class WorkspaceSwitcherPopup extends St.Widget {
     _onTimeout() {
         GLib.source_remove(this._timeoutId);
         this._timeoutId = 0;
-        this._container.ease({
+        this.ease({
             opacity: 0.0,
             duration: ANIMATION_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,