[gnome-shell/wip/jimmac/dash-icon-spacing: 7/72] overview: Move background to Workspace

[Jakub Steiner <jimmac src gnome org>]

commit f899cb39dd8d1df66fe0745f2acefdf75db707fe
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Mon Jun 1 19:24:17 2020 -0300

    overview: Move background to Workspace

 js/ui/overview.js       |  73 +---------------------------
 js/ui/workspace.js      | 127 ++++++++++++++++++++++++++++++++++++++++++++++--
 js/ui/workspacesView.js |   1 -
 3 files changed, 124 insertions(+), 77 deletions(-)
---
diff --git a/js/ui/overview.js b/js/ui/overview.js
index 42d6739bfd..1100d0d7c6 100644
--- a/js/ui/overview.js
+++ b/js/ui/overview.js
@@ -8,20 +8,13 @@ const Signals = imports.signals;
 // this is defined here to make it available in imports.
 var ANIMATION_TIME = 250;
 
-const Background = imports.ui.background;
 const DND = imports.ui.dnd;
 const LayoutManager = imports.ui.layout;
-const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
 const MessageTray = imports.ui.messageTray;
 const OverviewControls = imports.ui.overviewControls;
 const Params = imports.misc.params;
 
-// Must be less than ANIMATION_TIME, since we switch to
-// or from the overview completely after ANIMATION_TIME,
-// and don't want the shading animation to get cut off
-var SHADE_ANIMATION_TIME = 240;
-
 var DND_WINDOW_SWITCH_TIMEOUT = 750;
 
 var OVERVIEW_ACTIVATION_TIMEOUT = 0.5;
@@ -176,15 +169,6 @@ var Overview = class {
         if (this.isDummy)
             return;
 
-        // The main Background actors are inside global.window_group which are
-        // hidden when displaying the overview, so we create a new
-        // one. Instances of this class share a single CoglTexture behind the
-        // scenes which allows us to show the background with different
-        // rendering options without duplicating the texture data.
-        this._backgroundGroup = new Meta.BackgroundGroup({ reactive: true });
-        Main.layoutManager.overviewGroup.add_child(this._backgroundGroup);
-        this._bgManagers = [];
-
         this._desktopFade = new St.Widget();
         Main.layoutManager.overviewGroup.add_child(this._desktopFade);
 
@@ -227,50 +211,6 @@ var Overview = class {
             this.init();
     }
 
-    _updateBackgrounds() {
-        for (let i = 0; i < this._bgManagers.length; i++)
-            this._bgManagers[i].destroy();
-
-        this._bgManagers = [];
-
-        for (let i = 0; i < Main.layoutManager.monitors.length; i++) {
-            let bgManager = new Background.BackgroundManager({ container: this._backgroundGroup,
-                                                               monitorIndex: i,
-                                                               vignette: true });
-            this._bgManagers.push(bgManager);
-        }
-    }
-
-    _unshadeBackgrounds() {
-        let backgrounds = this._backgroundGroup.get_children();
-        for (let i = 0; i < backgrounds.length; i++) {
-            backgrounds[i].ease_property('@content.brightness', 1.0, {
-                duration: SHADE_ANIMATION_TIME,
-                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-            });
-            backgrounds[i].ease_property('@content.vignette-sharpness', 0.0, {
-                duration: SHADE_ANIMATION_TIME,
-                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-            });
-        }
-    }
-
-    _shadeBackgrounds() {
-        let backgrounds = this._backgroundGroup.get_children();
-        for (let i = 0; i < backgrounds.length; i++) {
-            backgrounds[i].ease_property('@content.brightness',
-                Lightbox.VIGNETTE_BRIGHTNESS, {
-                    duration: SHADE_ANIMATION_TIME,
-                    mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                });
-            backgrounds[i].ease_property('@content.vignette-sharpness',
-                Lightbox.VIGNETTE_SHARPNESS, {
-                    duration: SHADE_ANIMATION_TIME,
-                    mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                });
-        }
-    }
-
     _sessionUpdated() {
         const { hasOverview } = Main.sessionMode;
         if (!hasOverview)
@@ -393,13 +333,6 @@ var Overview = class {
         return Clutter.EVENT_PROPAGATE;
     }
 
-    addAction(action) {
-        if (this.isDummy)
-            return;
-
-        this._backgroundGroup.add_action(action);
-    }
-
     _getDesktopClone() {
         let windows = global.get_window_actors().filter(
             w => w.meta_window.get_window_type() === Meta.WindowType.DESKTOP);
@@ -423,8 +356,6 @@ var Overview = class {
 
         this._coverPane.set_position(0, 0);
         this._coverPane.set_size(global.screen_width, global.screen_height);
-
-        this._updateBackgrounds();
     }
 
     _onRestacked() {
@@ -579,14 +510,13 @@ var Overview = class {
         Meta.disable_unredirect_for_display(global.display);
         this.viewSelector.animateToOverview();
 
-        this._overview.opacity = 0;
+        this._overview.opacity = 255;
         this._overview.ease({
             opacity: 255,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             duration: ANIMATION_TIME,
             onComplete: () => this._showDone(),
         });
-        this._shadeBackgrounds();
 
         Main.layoutManager.overviewGroup.set_child_above_sibling(
             this._coverPane, null);
@@ -650,7 +580,6 @@ var Overview = class {
             duration: ANIMATION_TIME,
             onComplete: () => this._hideDone(),
         });
-        this._unshadeBackgrounds();
 
         Main.layoutManager.overviewGroup.set_child_above_sibling(
             this._coverPane, null);
diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index de1ce2d316..581e2a80e7 100644
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -1,8 +1,9 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Workspace */
 
-const { Clutter, GLib, GObject, St } = imports.gi;
+const { Clutter, GLib, GObject, Meta, St } = imports.gi;
 
+const Background = imports.ui.background;
 const DND = imports.ui.dnd;
 const Main = imports.ui.main;
 const Overview = imports.ui.overview;
@@ -406,6 +407,7 @@ var WorkspaceLayout = GObject.registerClass({
         this._container = null;
         this._windows = new Map();
         this._sortedWindows = [];
+        this._background = null;
         this._lastBox = null;
         this._windowSlots = [];
         this._layout = null;
@@ -588,6 +590,9 @@ var WorkspaceLayout = GObject.registerClass({
                 this._windowSlots = this._getWindowSlots(box.copy());
         }
 
+        if (this._background)
+            this._background.allocate(box);
+
         const allocationScale = containerBox.get_width() / this._workarea.width;
 
         const workspaceBox = new Clutter.ActorBox();
@@ -595,7 +600,7 @@ var WorkspaceLayout = GObject.registerClass({
         let childBox = new Clutter.ActorBox();
 
         for (const child of container) {
-            if (!child.visible)
+            if (!child.visible || child === this._background)
                 continue;
 
             // The fifth element in the slot array is the WindowPreview
@@ -747,6 +752,16 @@ var WorkspaceLayout = GObject.registerClass({
         this.layout_changed();
     }
 
+    setBackground(background) {
+        if (this._background)
+            this._container.remove_child(this._background);
+
+        this._background = background;
+
+        if (this._background)
+            this._container.add_child(this._background);
+    }
+
     syncStacking(stackIndices) {
         const windows = [...this._windows.keys()];
         windows.sort((a, b) => {
@@ -756,7 +771,7 @@ var WorkspaceLayout = GObject.registerClass({
             return stackIndices[seqA] - stackIndices[seqB];
         });
 
-        let lastWindow = null;
+        let lastWindow = this._background;
         for (const window of windows) {
             window.setStackAbove(lastWindow);
             lastWindow = window;
@@ -830,6 +845,106 @@ var WorkspaceLayout = GObject.registerClass({
     }
 });
 
+var WorkspaceBackground = GObject.registerClass(
+class WorkspaceBackground extends St.Widget {
+    _init(monitorIndex) {
+        super._init({
+            style_class: 'workspace-background',
+            reactive: false,
+            clip_to_allocation: true,
+        });
+
+        this._monitorIndex = monitorIndex;
+        this._workarea = Main.layoutManager.getWorkAreaForMonitor(monitorIndex);
+
+        this._backgroundGroup = new Meta.BackgroundGroup({
+            layout_manager: new Clutter.BinLayout(),
+            x_expand: true,
+            y_expand: true,
+        });
+        this.add_child(this._backgroundGroup);
+
+        this._bgManager = null;
+
+        this.update();
+
+        this.connect('destroy', this._onDestroy.bind(this));
+    }
+
+    _getAdjustedWorkarea() {
+        const workarea = this._workarea.copy();
+
+        const themeNode = this.get_theme_node();
+        workarea.width -= themeNode.get_horizontal_padding();
+        workarea.height -= themeNode.get_vertical_padding();
+
+        return workarea;
+    }
+
+    vfunc_get_preferred_width(forHeight) {
+        const workarea = this._getAdjustedWorkarea();
+        if (forHeight === -1)
+            return [0, workarea.width];
+
+        const workAreaAspectRatio = workarea.width / workarea.height;
+        const widthPreservingAspectRatio = forHeight * workAreaAspectRatio;
+
+        return [0, widthPreservingAspectRatio];
+    }
+
+    vfunc_get_preferred_height(forWidth) {
+        const workarea = this._getAdjustedWorkarea();
+        if (forWidth === -1)
+            return [0, workarea.height];
+
+        const workAreaAspectRatio = workarea.width / workarea.height;
+        const heightPreservingAspectRatio = forWidth / workAreaAspectRatio;
+
+        return [0, heightPreservingAspectRatio];
+    }
+
+    vfunc_allocate(box) {
+        this.set_allocation(box);
+
+        const themeNode = this.get_theme_node();
+        const contentBox = themeNode.get_content_box(box);
+
+        const [contentWidth, contentHeight] = contentBox.get_size();
+        const monitor = Main.layoutManager.monitors[this._monitorIndex];
+        const xOff = (contentWidth / this._workarea.width) *
+            (this._workarea.x - monitor.x);
+        const yOff = (contentHeight / this._workarea.height) *
+            (this._workarea.y - monitor.y);
+
+        contentBox.x1 -= xOff;
+        contentBox.y1 -= yOff;
+        contentBox.set_size(xOff + contentWidth, yOff + contentHeight);
+        this._backgroundGroup.allocate(contentBox);
+    }
+
+
+    _onDestroy() {
+        if (this._bgManager) {
+            this._bgManager.destroy();
+            this._bgManager = null;
+        }
+    }
+
+    update() {
+        if (this._bgManager) {
+            this._bgManager.destroy();
+            this._bgManager = null;
+        }
+
+        this._bgManager = new Background.BackgroundManager({
+            container: this._backgroundGroup,
+            monitorIndex: this._monitorIndex,
+            controlPosition: false,
+            forceSize: false,
+        });
+    }
+});
+
 /**
  * @metaWorkspace: a #Meta.Workspace, or null
  */
@@ -849,6 +964,10 @@ class Workspace extends St.Widget {
         if (monitorIndex != Main.layoutManager.primaryIndex)
             this.add_style_class_name('external-monitor');
 
+        // Background
+        this._background = new WorkspaceBackground(monitorIndex);
+        this.layout_manager.setBackground(this._background);
+
         this.connect('style-changed', this._onStyleChanged.bind(this));
         this.connect('destroy', this._onDestroy.bind(this));
 
@@ -1269,7 +1388,7 @@ class Workspace extends St.Widget {
         this.layout_manager.addWindow(clone, metaWindow);
 
         if (this._windows.length == 0)
-            clone.setStackAbove(null);
+            clone.setStackAbove(this._background);
         else
             clone.setStackAbove(this._windows[this._windows.length - 1]);
 
diff --git a/js/ui/workspacesView.js b/js/ui/workspacesView.js
index c57129e508..9fd99b7dc1 100644
--- a/js/ui/workspacesView.js
+++ b/js/ui/workspacesView.js
@@ -379,7 +379,6 @@ class WorkspacesDisplay extends St.Widget {
                 this._workspacesViews[index].getActiveWorkspace().isEmpty())
                 Main.overview.hide();
         });
-        Main.overview.addAction(clickAction);
         this.bind_property('mapped', clickAction, 'enabled', GObject.BindingFlags.SYNC_CREATE);
         this._clickAction = clickAction;