[gnome-shell/wip/fmuellner/overview-tweaks: 3/10] workspace: Move window captions

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

commit 0db80025cd970cb71393e0462c5077dbe1f4778f
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Jun 1 16:32:45 2017 +0200

    workspace: Move window captions
    
    We consider the window previews the primary way to identify a window,
    so it makes sense to give them as much space as possible. So in order
    to not have title captions take up too much vertical space, overlay
    them on top of the preview borders.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=783953

 data/theme/gnome-shell-high-contrast.css |    3 +--
 data/theme/gnome-shell.css               |    3 +--
 js/ui/workspace.js                       |   23 ++++++++---------------
 3 files changed, 10 insertions(+), 19 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 2de48db..e9855df 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1108,8 +1108,7 @@ StScrollBar {
   color: #eeeeec;
   background-color: rgba(46, 52, 54, 0.7);
   border-radius: 8px;
-  padding: 4px 12px;
-  -shell-caption-spacing: 12px; }
+  padding: 4px 12px; }
   .window-caption:hover {
     background-color: #215d9c;
     color: #ffffff; }
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index f835c6d..b9a56c6 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1108,8 +1108,7 @@ StScrollBar {
   color: #eeeeec;
   background-color: rgba(46, 52, 54, 0.7);
   border-radius: 8px;
-  padding: 4px 12px;
-  -shell-caption-spacing: 12px; }
+  padding: 4px 12px; }
   .window-caption:hover {
     background-color: #215d9c;
     color: #ffffff; }
diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index ff2618a..94a6f53 100644
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -439,7 +439,6 @@ var WindowOverlay = new Lang.Class({
         let title = new St.Label({ style_class: 'window-caption',
                                    text: metaWindow.title });
         title.clutter_text.ellipsize = Pango.EllipsizeMode.END;
-        title._spacing = 0;
         windowClone.actor.label_actor = title;
 
         this._updateCaptionId = metaWindow.connect('notify::title',
@@ -475,8 +474,8 @@ var WindowOverlay = new Lang.Class({
         Shell.util_set_hidden_from_pick(this.title, true);
         Shell.util_set_hidden_from_pick(this.border, true);
 
-        parentActor.add_actor(this.title);
         parentActor.add_actor(this.border);
+        parentActor.add_actor(this.title);
         parentActor.add_actor(this.closeButton);
         title.connect('style-changed',
                       Lang.bind(this, this._onStyleChanged));
@@ -506,7 +505,7 @@ var WindowOverlay = new Lang.Class({
 
     chromeHeights: function () {
         return [Math.max(this.borderSize, this.closeButton.height - this.closeButton._overlap),
-                this.title.height + this.title._spacing];
+                (this.title.height - this.borderSize) / 2];
     },
 
     chromeWidths: function () {
@@ -552,7 +551,7 @@ var WindowOverlay = new Lang.Class({
         title.width = prevTitleWidth;
 
         let titleX = cloneX + (cloneWidth - titleWidth) / 2;
-        let titleY = cloneY + cloneHeight + title._spacing;
+        let titleY = cloneY + cloneHeight - (title.height - this.borderSize) / 2;
 
         if (animate)
             this._animateOverlayActor(title, Math.floor(titleX), Math.floor(titleY), titleWidth);
@@ -717,9 +716,6 @@ var WindowOverlay = new Lang.Class({
     },
 
     _onStyleChanged: function() {
-        let titleNode = this.title.get_theme_node();
-        this.title._spacing = titleNode.get_length('-shell-caption-spacing');
-
         let closeNode = this.closeButton.get_theme_node();
         this.closeButton._overlap = closeNode.get_length('-shell-close-overlap');
 
@@ -1951,19 +1947,16 @@ var Workspace = new Lang.Class({
             right: node.get_padding(St.Side.RIGHT),
         };
 
-        let closeButtonHeight, captionHeight;
-        let leftBorder, rightBorder;
-
         // All of the overlays have the same chrome sizes,
         // so just pick the first one.
         let overlay = this._windowOverlays[0];
-        [closeButtonHeight, captionHeight] = overlay.chromeHeights();
-        [leftBorder, rightBorder] = overlay.chromeWidths();
+        let [topBorder, bottomBorder] = overlay.chromeHeights();
+        let [leftBorder, rightBorder] = overlay.chromeWidths();
 
-        rowSpacing += captionHeight;
+        rowSpacing += (topBorder + bottomBorder) / 2;
         columnSpacing += (rightBorder + leftBorder) / 2;
-        padding.top += closeButtonHeight;
-        padding.bottom += captionHeight;
+        padding.top += topBorder;
+        padding.bottom += bottomBorder;
         padding.left += leftBorder;
         padding.right += rightBorder;