[gnome-shell/T29763: 80/249] viewsSelector: New ViewsClone class for desaturated versions of the desktop

[Matthew Leeds <mwleeds src gnome org>]

commit f850f5fd883464ef0ace1aa3166251052094b77a
Author: Mario Sanchez Prada <mario endlessm com>
Date:   Wed Jun 14 18:09:45 2017 +0100

    viewsSelector: New ViewsClone class for desaturated versions of the desktop
    
    This will be used from the main layout manager and the overview to create
    desaturated versions of the desktop (desktop search widget + icons grid)
    that we can show both underneath running windows and when in the "window
    picker" mode.
    
     * 2020-03-17: Drop AllViewLayout
    
    https://phabricator.endlessm.com/T17662
    https://phabricator.endlessm.com/T17789
    https://phabricator.endlessm.com/T17979
    https://phabricator.endlessm.com/T19824

 js/ui/appDisplay.js   | 17 ++++++++++
 js/ui/viewSelector.js | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 109 insertions(+), 1 deletion(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 8370b3de6f..97179de56c 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -59,6 +59,15 @@ const EOS_LINK_PREFIX = 'eos-link-';
 
 const EOS_APP_CENTER_ID = 'org.gnome.Software.desktop';
 
+var EOS_INACTIVE_GRID_OPACITY = 96;
+var EOS_ACTIVE_GRID_OPACITY = 255;
+
+var EOS_INACTIVE_GRID_TRANSITION = Clutter.AnimationMode.EASE_OUT_QUAD;
+var EOS_ACTIVE_GRID_TRANSITION = Clutter.AnimationMode.EASE_IN_QUAD;
+
+var EOS_INACTIVE_GRID_SATURATION = 1;
+var EOS_ACTIVE_GRID_SATURATION = 0;
+
 function _getCategories(info) {
     let categoriesStr = info.get_categories();
     if (!categoriesStr)
@@ -282,6 +291,10 @@ var BaseAppView = GObject.registerClass({
     adaptToSize(_width, _height) {
         throw new GObject.NotImplementedError('adaptToSize in %s'.format(this.constructor.name));
     }
+
+    get gridActor() {
+        return this._grid;
+    }
 });
 
 var AppDisplay = GObject.registerClass(
@@ -896,6 +909,10 @@ class AppDisplay extends BaseAppView {
 
         return true;
     }
+
+    get scrollView() {
+        return this._scrollView;
+    }
 });
 
 var AppSearchProvider = class AppSearchProvider {
diff --git a/js/ui/viewSelector.js b/js/ui/viewSelector.js
index e002c76402..383d549cfd 100644
--- a/js/ui/viewSelector.js
+++ b/js/ui/viewSelector.js
@@ -1,5 +1,5 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported ViewSelector */
+/* exported ViewSelector, ViewsClone */
 
 const { EosMetrics, Clutter, Gio,
         GLib, GObject, Meta, Shell, St } = imports.gi;
@@ -286,6 +286,97 @@ class ViewsDisplayConstraint extends LayoutManager.MonitorConstraint {
     }
 });
 
+var ViewsClone = GObject.registerClass(
+class ViewsClone extends St.Widget {
+    _init(viewSelector, viewsDisplay, forOverview) {
+        this._viewSelector = viewSelector;
+        this._viewsDisplay = viewsDisplay;
+        this._forOverview = forOverview;
+
+        let appDisplay = this._viewsDisplay.appDisplay;
+        let entry = new ShellEntry.OverviewEntry();
+        entry.reactive = false;
+        entry.clutter_text.reactive = false;
+
+        const appDisplayClone = new AppDisplay.AppDisplay();
+        appDisplayClone._eventBlocker.visible = true;
+
+        let layoutManager = new ViewsDisplayLayout(entry, appDisplayClone, null);
+        super._init({
+            layout_manager: layoutManager,
+            x_expand: true,
+            y_expand: true,
+            reactive: false,
+            visible: false,
+            opacity: 0,
+        });
+
+        Shell.util_set_hidden_from_pick(this, true);
+
+        // Ensure the cloned grid is scrolled to the same page as the original one
+        let originalAdjustment = appDisplay.scrollView.vscroll.adjustment;
+        let cloneAdjustment = appDisplayClone.scrollView.vscroll.adjustment;
+        originalAdjustment.bind_property('value', cloneAdjustment, 'value', 
GObject.BindingFlags.SYNC_CREATE);
+
+        this.add_child(entry);
+        this.add_child(appDisplayClone);
+
+        this._saturation = new Clutter.DesaturateEffect({
+            name: 'saturation',
+            factor: AppDisplay.EOS_INACTIVE_GRID_SATURATION,
+        });
+        this.add_effect(this._saturation);
+
+        let workareaConstraint = new LayoutManager.MonitorConstraint({
+            primary: true,
+            work_area: true,
+        });
+        this.add_constraint(workareaConstraint);
+
+        Main.overview.connect('showing', () => {
+            this.opacity = AppDisplay.EOS_INACTIVE_GRID_OPACITY;
+            this._saturation.factor = AppDisplay.EOS_INACTIVE_GRID_SATURATION;
+        });
+        Main.overview.connect('hidden', () => {
+            this.opacity = AppDisplay.EOS_INACTIVE_GRID_OPACITY;
+            this._saturation.factor = AppDisplay.EOS_INACTIVE_GRID_SATURATION;
+
+            // When we're hidden and coming from the apps page, tween out the
+            // clone saturation and opacity in the background as an override
+            if (!this._forOverview &&
+                this._viewSelector.getActivePage() === ViewPage.APPS) {
+                this.show();
+                this.opacity = AppDisplay.EOS_ACTIVE_GRID_OPACITY;
+                this.saturation = AppDisplay.EOS_ACTIVE_GRID_SATURATION;
+                this.ease({
+                    opacity: AppDisplay.EOS_INACTIVE_GRID_OPACITY,
+                    duration: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME,
+                    mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                });
+
+                this.ease_property(
+                    '@effects.saturation.factor',
+                    AppDisplay.EOS_INACTIVE_GRID_SATURATION, {
+                        duration: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME,
+                        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                    });
+
+                GLib.idle_add(GLib.PRIORITY_DEFAULT, () => {
+                    appDisplayClone.gridActor.queue_relayout();
+                    return GLib.SOURCE_REMOVE;
+                });
+            }
+        });
+    }
+
+    set saturation(factor) {
+        this._saturation.factor = factor;
+    }
+
+    get saturation() {
+        return this._saturation.factor;
+    }
+});
 var ViewsDisplay = GObject.registerClass(
 class ViewsDisplay extends St.Widget {
     _init() {