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

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

commit 18af42596f6384e9dc91fd25eb9f0d1468db28dc
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-sass              |    2 +-
 data/theme/gnome-shell.css               |    3 +--
 js/ui/workspace.js                       |   23 ++++++++---------------
 4 files changed, 11 insertions(+), 20 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-sass b/data/theme/gnome-shell-sass
index 82941c9..0321593 160000
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 82941c9d93a879bab99545fdf57e4bb3299a9e7f
+Subproject commit 03215934c2b3c9137ff7b0e0434fcf4d52f82cfa
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;