[gnome-shell] windowPreview: Allow titles to overlap other previews

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

commit 5e10bed4585bc73d73a33a6fec9f202f1a13ec47
Author: Florian Müllner <fmuellner gnome org>
Date:   Mon Oct 12 13:19:07 2020 +0200

    windowPreview: Allow titles to overlap other previews
    
    We are about to add additional chrome, but still want to use
    as much space as possible for the previews. Allowing titles
    to overlap other previews should help keeping the additional
    whitespace requirement low.
    
    https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/81
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1605>

 js/ui/windowPreview.js | 42 ++++++++++++++++++++++++++++--------------
 js/ui/workspace.js     |  5 +++--
 2 files changed, 31 insertions(+), 16 deletions(-)
---
diff --git a/js/ui/windowPreview.js b/js/ui/windowPreview.js
index 014b2cc581..319ccf5f07 100644
--- a/js/ui/windowPreview.js
+++ b/js/ui/windowPreview.js
@@ -429,14 +429,20 @@ var WindowPreview = GObject.registerClass({
         return app.get_name();
     }
 
+    overlapHeights() {
+        const [, titleHeight] = this._title.get_preferred_height(-1);
+
+        const topOverlap = 0;
+        const bottomOverlap = titleHeight / 2;
+
+        return [topOverlap, bottomOverlap];
+    }
+
     chromeHeights() {
         const [, closeButtonHeight] = this._closeButton.get_preferred_height(-1);
-        const [, titleHeight] = this._title.get_preferred_height(-1);
 
         const topOversize = (this._borderSize / 2) + (closeButtonHeight / 2);
-        const bottomOversize = Math.max(
-            this._borderSize,
-            (titleHeight / 2) + (this._borderSize / 2));
+        const bottomOversize = this._borderSize;
 
         return [topOversize, bottomOversize];
     }
@@ -462,6 +468,7 @@ var WindowPreview = GObject.registerClass({
             return;
 
         this._overlayShown = true;
+        this._restack();
 
         // If we're supposed to animate and an animation in our direction
         // is already happening, let that one continue
@@ -493,6 +500,7 @@ var WindowPreview = GObject.registerClass({
             return;
 
         this._overlayShown = false;
+        this._restack();
 
         // If we're supposed to animate and an animation in our direction
         // is already happening, let that one continue
@@ -739,6 +747,21 @@ var WindowPreview = GObject.registerClass({
         return true;
     }
 
+    _restack() {
+        // We may not have a parent if DnD completed successfully, in
+        // which case our clone will shortly be destroyed and replaced
+        // with a new one on the target workspace.
+        const parent = this.get_parent();
+        if (parent !== null) {
+            if (this._overlayShown)
+                parent.set_child_above_sibling(this, null);
+            else if (this._stackAbove === null)
+                parent.set_child_below_sibling(this, null);
+            else if (!this._stackAbove._overlayShown)
+                parent.set_child_above_sibling(this, this._stackAbove);
+        }
+    }
+
     _onDragBegin(_draggable, _time) {
         this.inDrag = true;
         this.hideOverlay(false);
@@ -760,16 +783,7 @@ var WindowPreview = GObject.registerClass({
     _onDragEnd(_draggable, _time, _snapback) {
         this.inDrag = false;
 
-        // We may not have a parent if DnD completed successfully, in
-        // which case our clone will shortly be destroyed and replaced
-        // with a new one on the target workspace.
-        let parent = this.get_parent();
-        if (parent !== null) {
-            if (this._stackAbove == null)
-                parent.set_child_below_sibling(this, null);
-            else
-                parent.set_child_above_sibling(this, this._stackAbove);
-        }
+        this._restack();
 
         if (this['has-pointer'])
             this.showOverlay(true);
diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index b9f8c27209..a93ec27264 100644
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -469,10 +469,11 @@ var WorkspaceLayout = GObject.registerClass({
             colSpacing += Math.max(leftOversize, rightOversize);
 
         if (containerBox) {
-            containerBox.x1 += leftOversize;
+            const [topOverlap, bottomOverlap] = window.overlapHeights();
+            containerBox.x1 += leftOversize + topOverlap;
             containerBox.x2 -= rightOversize;
             containerBox.y1 += topOversize;
-            containerBox.y2 -= bottomOversize;
+            containerBox.y2 -= bottomOversize + bottomOverlap;
         }
 
         return [rowSpacing, colSpacing, containerBox];