[gnome-shell/wip/jimmac/dash-icon-spacing: 12/72] viewSelector: Merge WINDOWS and APPS pages

[Jakub Steiner <jimmac src gnome org>]

commit 2c7db06bf12c086323c8a9521f74eac8541f7076
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Sat Dec 12 12:57:15 2020 -0300

    viewSelector: Merge WINDOWS and APPS pages
    
    Add them both in a StBoxLayout subclass with a vertical layout. This
    new AppsPageContainer class already contains an adjustment controlling
    the transition between workspaces and app grid states, and althought it
    is internal to it, it'll be easy to integrate with gestures in the
    future.
    
    Notice that AppDisplay is added before WorkspacesDisplay. That's because
    we want the paint order to paint WorkspacesDisplay on top of AppDisplay.

 js/ui/viewSelector.js   | 147 ++++++++++++++++++++++++++++++------------------
 js/ui/workspacesView.js |   1 +
 2 files changed, 94 insertions(+), 54 deletions(-)
---
diff --git a/js/ui/viewSelector.js b/js/ui/viewSelector.js
index bfb02a54ec..57cf0481f6 100644
--- a/js/ui/viewSelector.js
+++ b/js/ui/viewSelector.js
@@ -12,15 +12,13 @@ const Search = imports.ui.search;
 const ShellEntry = imports.ui.shellEntry;
 const WorkspacesView = imports.ui.workspacesView;
 const EdgeDragAction = imports.ui.edgeDragAction;
-const IconGrid = imports.ui.iconGrid;
 
 const SHELL_KEYBINDINGS_SCHEMA = 'org.gnome.shell.keybindings';
 var PINCH_GESTURE_THRESHOLD = 0.7;
 
 var ViewPage = {
-    WINDOWS: 1,
-    APPS: 2,
-    SEARCH: 3,
+    APPS: 1,
+    SEARCH: 2,
 };
 
 var FocusTrap = GObject.registerClass(
@@ -122,6 +120,84 @@ var ShowOverviewAction = GObject.registerClass({
     }
 });
 
+var AppsPageContainer = GObject.registerClass(
+class AppsPageContainer extends St.Widget {
+    _init(workspacesDisplay, appDisplay, showAppsButton) {
+        super._init();
+
+        // 0 for window picker, 1 for app grid
+        this._adjustment = new St.Adjustment({
+            actor: this,
+            value: 0,
+            lower: 0,
+            upper: 1,
+        });
+        this._adjustment.connect('notify::value', () => {
+            this._update();
+            this.queue_relayout();
+        });
+
+        this._showAppsButton = showAppsButton;
+        showAppsButton.connect('notify::checked',
+            this._onShowAppsButtonToggled.bind(this));
+
+        this._appDisplay = appDisplay;
+        this.add_child(appDisplay);
+
+        this._workspacesDisplay = workspacesDisplay;
+        this.add_child(workspacesDisplay);
+
+        this.connect('notify::mapped', () => {
+            workspacesDisplay.setPrimaryWorkspaceVisible(this.mapped);
+        });
+
+        this._update();
+    }
+
+    _onShowAppsButtonToggled() {
+        const checked = this._showAppsButton.checked;
+
+        const value = checked ? 1 : 0;
+        this._adjustment.ease(value, {
+            duration: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        });
+    }
+
+    _update() {
+        const progress = this._adjustment.value;
+
+        this._appDisplay.opacity = progress * 255;
+        this._appDisplay.visible = progress !== 0;
+    }
+
+    _getWorkspacesBoxes(box) {
+        const initialBox = box.copy();
+
+        const finalBox = box.copy();
+        finalBox.set_size(
+            box.get_width(),
+            Math.round(box.get_height() * 0.15));
+
+        return [initialBox, finalBox];
+    }
+
+    vfunc_allocate(box) {
+        this.set_allocation(box);
+
+        const progress = this._adjustment.value;
+        const [initialBox, finalBox] = this._getWorkspacesBoxes(box);
+        const workspacesBox = initialBox.interpolate(finalBox, progress);
+        this._workspacesDisplay.allocate(workspacesBox);
+
+        if (this._appDisplay.visible) {
+            const appDisplayBox = box.copy();
+            appDisplayBox.y1 += Math.ceil(finalBox.get_height());
+            this._appDisplay.allocate(appDisplayBox);
+        }
+    }
+});
+
 var ViewSelector = GObject.registerClass({
     Signals: {
         'page-changed': {},
@@ -174,12 +250,12 @@ var ViewSelector = GObject.registerClass({
 
         this._workspacesDisplay =
             new WorkspacesView.WorkspacesDisplay(workspaceAdjustment);
-        this._workspacesPage = this._addPage(this._workspacesDisplay,
-                                             _("Windows"), 'focus-windows-symbolic');
-
         this.appDisplay = new AppDisplay.AppDisplay();
-        this._appsPage = this._addPage(this.appDisplay,
-                                       _("Applications"), 'view-app-grid-symbolic');
+
+        const appsContainer = new AppsPageContainer(
+            this._workspacesDisplay, this.appDisplay, showAppsButton);
+        this._appsPage =
+            this._addPage(appsContainer, _('Applications'), 'view-app-grid-symbolic');
 
         this._searchResults = new Search.SearchResultsView();
         this._searchPage = this._addPage(this._searchResults,
@@ -208,17 +284,6 @@ var ViewSelector = GObject.registerClass({
                 this._stageKeyPressId = 0;
             }
         });
-        Main.overview.connect('shown', () => {
-            // If we were animating from the desktop view to the
-            // apps page the workspace page was visible, allowing
-            // the windows to animate, but now we no longer want to
-            // show it given that we are now on the apps page or
-            // search page.
-            if (this._activePage != this._workspacesPage) {
-                this._workspacesPage.opacity = 0;
-                this._workspacesPage.hide();
-            }
-        });
 
         Main.wm.addKeybinding('toggle-application-view',
                               new Gio.Settings({ schema_id: SHELL_KEYBINDINGS_SCHEMA }),
@@ -277,21 +342,14 @@ var ViewSelector = GObject.registerClass({
         this.reset();
         this._workspacesDisplay.animateToOverview(this._showAppsButton.checked);
         this._activePage = null;
-        if (this._showAppsButton.checked)
-            this._showPage(this._appsPage);
-        else
-            this._showPage(this._workspacesPage);
+        this._showPage(this._appsPage);
 
         if (!this._workspacesDisplay.activeWorkspaceHasMaximizedWindows())
             Main.overview.fadeOutDesktop();
     }
 
     animateFromOverview() {
-        // Make sure workspace page is fully visible to allow
-        // workspace.js do the animation of the windows
-        this._workspacesPage.opacity = 255;
-
-        this._workspacesDisplay.animateFromOverview(this._activePage != this._workspacesPage);
+        this._workspacesDisplay.animateFromOverview(false);
 
         this._showAppsButton.checked = false;
 
@@ -348,28 +406,14 @@ var ViewSelector = GObject.registerClass({
 
         this.emit('page-empty');
 
-        this._activePage.show();
-
-        if (this._activePage == this._appsPage && oldPage == this._workspacesPage) {
-            // Restore opacity, in case we animated via _fadePageOut
-            this._activePage.opacity = 255;
-            this.appDisplay.animate(IconGrid.AnimationDirection.IN);
-        } else {
+        if (this._activePage) {
+            this._activePage.show();
             this._fadePageIn();
         }
     }
 
     _animateOut(page) {
-        let oldPage = page;
-        if (page == this._appsPage &&
-            this._activePage == this._workspacesPage &&
-            !Main.overview.animationInProgress) {
-            this.appDisplay.animate(IconGrid.AnimationDirection.OUT, () => {
-                this._animateIn(oldPage);
-            });
-        } else {
-            this._fadePageOut(page);
-        }
+        this._fadePageOut(page);
     }
 
     _showPage(page) {
@@ -395,8 +439,7 @@ var ViewSelector = GObject.registerClass({
     }
 
     _onShowAppsButtonToggled() {
-        this._showPage(this._showAppsButton.checked
-            ? this._appsPage : this._workspacesPage);
+        this._showPage(this._appsPage);
     }
 
     _onStageKeyPress(actor, event) {
@@ -430,9 +473,7 @@ var ViewSelector = GObject.registerClass({
     }
 
     _searchCancelled() {
-        this._showPage(this._showAppsButton.checked
-            ? this._appsPage
-            : this._workspacesPage);
+        this._showPage(this._appsPage);
 
         // Leave the entry focused when it doesn't have any text;
         // when replacing a selected search term, Clutter emits
@@ -599,9 +640,7 @@ var ViewSelector = GObject.registerClass({
     }
 
     getActivePage() {
-        if (this._activePage == this._workspacesPage)
-            return ViewPage.WINDOWS;
-        else if (this._activePage == this._appsPage)
+        if (this._activePage === this._appsPage)
             return ViewPage.APPS;
         else
             return ViewPage.SEARCH;
diff --git a/js/ui/workspacesView.js b/js/ui/workspacesView.js
index e9b838fde9..b1d3011bf7 100644
--- a/js/ui/workspacesView.js
+++ b/js/ui/workspacesView.js
@@ -350,6 +350,7 @@ class WorkspacesDisplay extends St.Widget {
     _init(scrollAdjustment) {
         super._init({
             visible: false,
+            y_expand: true,
             clip_to_allocation: true,
         });
         this.connect('notify::allocation', this._updateWorkspacesActualGeometry.bind(this));