[gnome-shell] workspaceThumbnail: Scale workspaces in and out

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

commit 9db9445b0f2ce22732c6e5020a6c08fda2c0017b
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Wed Jan 27 13:28:36 2021 -0300

    workspaceThumbnail: Scale workspaces in and out
    
    Make the slide property control the workspace scale, so that new workspaces
    scale up, and destroyed workspaces scale down. The scale is done horizontally,
    and only slightly vertically, as per design direction.
    
    Rework the state tracking mechanism to remove the COLLAPSING state, since there's
    no split between sliding out and collapsing anymore. Also remove the corresponding
    'collapse-fraction' property from WorkspaceThumbnail.
    
    Make ThumbnailsBox.vfunc_get_preferred_width() consider the slide-position property.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1593>

 js/ui/workspaceThumbnail.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)
---
diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js
index 4ca1dd48b8..4c6909245f 100644
--- a/js/ui/workspaceThumbnail.js
+++ b/js/ui/workspaceThumbnail.js
@@ -5,6 +5,7 @@ const { Clutter, Gio, GLib, GObject, Graphene, Meta, Shell, St } = imports.gi;
 
 const DND = imports.ui.dnd;
 const Main = imports.ui.main;
+const Util = imports.misc.util;
 const Workspace = imports.ui.workspace;
 
 // The maximum size of a thumbnail is 5% the width and height of the screen
@@ -257,6 +258,7 @@ var WorkspaceThumbnail = GObject.registerClass({
         super._init({
             clip_to_allocation: true,
             style_class: 'workspace-thumbnail',
+            pivot_point: new Graphene.Point({ x: 0.5, y: 0.5 }),
         });
         this._delegate = this;
 
@@ -334,6 +336,11 @@ var WorkspaceThumbnail = GObject.registerClass({
     set slide_position(slidePosition) {
         if (this._slidePosition == slidePosition)
             return;
+
+        const scale = Util.lerp(1, 0.75, slidePosition);
+        this.set_scale(scale, scale);
+        this.opacity = Util.lerp(255, 0, slidePosition);
+
         this._slidePosition = slidePosition;
         this.notify('slide-position');
         this.queue_relayout();
@@ -1205,8 +1212,19 @@ var ThumbnailsBox = GObject.registerClass({
         let nWorkspaces = this._thumbnails.length;
         let totalSpacing = (nWorkspaces - 1) * spacing;
 
-        const naturalWidth =
-            totalSpacing + nWorkspaces * this._porthole.width * MAX_THUMBNAIL_SCALE;
+        const naturalWidth = this._thumbnails.reduce((accumulator, thumbnail, index) => {
+            let workspaceSpacing = 0;
+
+            if (index > 0)
+                workspaceSpacing += spacing / 2;
+            if (index < this._thumbnails.length - 1)
+                workspaceSpacing += spacing / 2;
+
+            const progress = 1 - thumbnail.collapse_fraction;
+            const width = (this._porthole.width * MAX_THUMBNAIL_SCALE + workspaceSpacing) * progress;
+            return accumulator + width;
+        }, 0);
+
         return themeNode.adjust_preferred_width(totalSpacing, naturalWidth);
     }