[gnome-shell] workspace: Round the corners of the wallpaper

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

commit 63cf60b731edced67ec14c87492bf08783ac7d3c
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Mon Feb 8 16:33:06 2021 +0100

    workspace: Round the corners of the wallpaper
    
    As planned and shown in the mockups for GNOME 40, round the corners of
    the background wallpaper of workspaces.
    
    To do that we use the new rounded-clipping support of
    MetaBackgroundContent and we animate the radius by attaching it to the
    stateAdjustment just like everything else.
    
    Because we show only a part of the wallpaper and "cut away" the area of
    the panel in WorkspaceBackgrounds vfunc_allocate(), we also need to set
    the rounded clips bounding rect to the rectangle we're actually showing,
    otherwise the texture would be rounded in the region that's cut away.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1651>

 js/ui/workspace.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)
---
diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index 6bf5cfe26f..e75d64377c 100644
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -24,6 +24,8 @@ var WINDOW_REPOSITIONING_DELAY = 750;
 var LAYOUT_SCALE_WEIGHT = 1;
 var LAYOUT_SPACE_WEIGHT = 0.1;
 
+const BACKGROUND_CORNER_RADIUS_PIXELS = 30;
+
 // Window Thumbnail Layout Algorithm
 // =================================
 //
@@ -612,8 +614,14 @@ var WorkspaceLayout = GObject.registerClass({
                 this._windowSlots = this._getWindowSlots(box.copy());
         }
 
-        if (this._background)
+        if (this._background) {
+            const { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
+            const cornerRadius = scaleFactor * BACKGROUND_CORNER_RADIUS_PIXELS;
+            this._background.cornerRadius =
+                Util.lerp(0, cornerRadius, this._stateAdjustment.value);
+
             this._background.allocate(box);
+        }
 
         const allocationScale = containerBox.get_width() / this._workarea.width;
 
@@ -924,6 +932,14 @@ class WorkspaceBackground extends St.Widget {
         const yOff = (contentHeight / this._workarea.height) *
             (this._workarea.y - monitor.y);
 
+        const rect = new Graphene.Rect();
+        rect.origin.x = this._workarea.x - monitor.x;
+        rect.origin.y = this._workarea.y - monitor.y;
+        rect.size.width = this._workarea.width;
+        rect.size.height = this._workarea.height;
+
+        this._bgManager.backgroundActor.content.set_rounded_clip_bounds(rect);
+
         contentBox.x1 -= xOff;
         contentBox.y1 -= yOff;
         contentBox.set_size(xOff + contentWidth, yOff + contentHeight);
@@ -936,6 +952,10 @@ class WorkspaceBackground extends St.Widget {
             this._bgManager = null;
         }
     }
+
+    set cornerRadius(radius) {
+        this._bgManager.backgroundActor.content.rounded_clip_radius = radius;
+    }
 });
 
 /**