[gnome-shell/wip/fmuellner/overview-tweaks: 21/28] workspace: Move window captions

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

commit 90b173a581527c8d8e557baa506d378dc72ef6db
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 0655814..fae6429 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1112,8 +1112,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 d2d8c5e..c2e62b1 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1112,8 +1112,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 440da58..a1b565b 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;