[gnome-shell] workspace: Use invisible guide actor to center overlay title on border

[Florian Müllner <fmuellner src gnome org>]

commit 9b22f6183feed55c10d888c1b296b200396dc540
Author: Sebastian Keller <skeller gnome org>
Date:   Sun Jun 14 06:14:57 2020 +0200

    workspace: Use invisible guide actor to center overlay title on border
    
    Using CSS to center the title actor on the border is a bit ugly, because
    it requires the CSS to match the calculations used in chromeHeights().
    Also it is not possible to use CSS margins for cases where the position
    of the actor is determined at run time, such as for the close button.
    
    Instead use an invisible actor that spans between the horizontal and
    vertical center lines of the border as guide when aligning the title
    actor.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1313

 .../gnome-shell-sass/widgets/_window-picker.scss   |  1 -
 js/ui/workspace.js                                 | 23 ++++++++++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss 
b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
index 2425e22bd1..48d6f73f56 100644
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
@@ -35,7 +35,6 @@ $window_clone_border_size: 6px;
 
 // Window titles
 .window-caption {
-  margin-top: $window_clone_border_size / 2;
   color: $osd_fg_color;
   background-color: $osd_bg_color;
   border:1px solid $osd_outer_borders_color;
diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index 9d8f8db7a2..54cbb5e9fc 100644
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -283,6 +283,19 @@ var WindowClone = GObject.registerClass({
             align_axis: Clutter.AlignAxis.BOTH,
             factor: 0.5,
         }));
+        this._borderCenter = new Clutter.Actor();
+        this._border.bind_property('visible', this._borderCenter, 'visible',
+            GObject.BindingFlags.SYNC_CREATE);
+        this._borderCenterConstraint = new Clutter.BindConstraint({
+            source: this._windowContainer,
+            coordinate: Clutter.BindCoordinate.SIZE,
+        });
+        this._borderCenter.add_constraint(this._borderCenterConstraint);
+        this._borderCenter.add_constraint(new Clutter.AlignConstraint({
+            source: this._windowContainer,
+            align_axis: Clutter.AlignAxis.BOTH,
+            factor: 0.5,
+        }));
         this._border.connect('style-changed',
             this._onBorderStyleChanged.bind(this));
 
@@ -292,13 +305,17 @@ var WindowClone = GObject.registerClass({
             text: this._getCaption(),
             reactive: true,
         });
+        this._title.add_constraint(new Clutter.BindConstraint({
+            source: this._borderCenter,
+            coordinate: Clutter.BindCoordinate.POSITION,
+        }));
         this._title.add_constraint(new Clutter.AlignConstraint({
-            source: this._windowContainer,
+            source: this._borderCenter,
             align_axis: Clutter.AlignAxis.X_AXIS,
             factor: 0.5,
         }));
         this._title.add_constraint(new Clutter.AlignConstraint({
-            source: this._windowContainer,
+            source: this._borderCenter,
             align_axis: Clutter.AlignAxis.Y_AXIS,
             pivot_point: new Graphene.Point({ x: -1, y: 0.5 }),
             factor: 1,
@@ -337,6 +354,7 @@ var WindowClone = GObject.registerClass({
         }));
         this._closeButton.connect('clicked', () => this.deleteAll());
 
+        this.add_child(this._borderCenter);
         this.add_child(this._border);
         this.add_child(this._title);
         this.add_child(this._closeButton);
@@ -376,6 +394,7 @@ var WindowClone = GObject.registerClass({
         // Increase the size of the border actor so the border outlines
         // the bounding box
         this._borderConstraint.offset = this._borderSize * 2;
+        this._borderCenterConstraint.offset = this._borderSize;
     }
 
     _windowCanClose() {