[gnome-shell] workspace: Only reveal title captions on hover

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

commit 4fd5eee2c6a9b4e63e873f5e714cd1bd848d85e9
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Jun 1 16:11:56 2017 +0200

    workspace: Only reveal title captions on hover
    
    While the new title position gives the previews more space, they now
    overlay the content which may hide valuable information. Address this
    by only revealing the title as additional information on hover, like
    we do for other auxiliary elements.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=783953

 data/theme/gnome-shell-high-contrast.css |    7 +---
 data/theme/gnome-shell-sass              |    2 +-
 data/theme/gnome-shell.css               |    7 +---
 js/ui/workspace.js                       |   48 +++++++++++------------------
 4 files changed, 23 insertions(+), 41 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index e43b9c0..442a7f3 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1107,13 +1107,10 @@ StScrollBar {
 
 .window-caption {
   spacing: 25px;
-  color: #eeeeec;
-  background-color: rgba(46, 52, 54, 0.7);
+  color: #ffffff;
+  background-color: #215d9c;
   border-radius: 8px;
   padding: 4px 12px; }
-  .window-caption:hover {
-    background-color: #215d9c;
-    color: #ffffff; }
 
 .search-entry {
   width: 320px;
diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index b178ba1..3ce23ca 160000
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit b178ba1d9d090e269b898952fd5a79c54ddc6f75
+Subproject commit 3ce23ca9648c131a33b79f37b3e19001ff45450d
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c57fae7..3c753bf 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1107,13 +1107,10 @@ StScrollBar {
 
 .window-caption {
   spacing: 25px;
-  color: #eeeeec;
-  background-color: rgba(46, 52, 54, 0.7);
+  color: #ffffff;
+  background-color: #215d9c;
   border-radius: 8px;
   padding: 4px 12px; }
-  .window-caption:hover {
-    background-color: #215d9c;
-    color: #ffffff; }
 
 .search-entry {
   width: 320px;
diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index a1b565b..7399a6e 100644
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -466,6 +466,7 @@ var WindowOverlay = new Lang.Class({
         this._windowAddedId = 0;
 
         button.hide();
+        title.hide();
 
         this.title = title;
         this.closeButton = button;
@@ -490,7 +491,6 @@ var WindowOverlay = new Lang.Class({
 
     hide: function() {
         this._hidden = true;
-        this.title.hide();
 
         this.hideCloseButton();
     },
@@ -498,7 +498,6 @@ var WindowOverlay = new Lang.Class({
     show: function() {
         this._hidden = false;
 
-        this.title.show();
         if (this._windowClone.actor['has-pointer'])
             this._animateVisible();
     },
@@ -639,39 +638,28 @@ var WindowOverlay = new Lang.Class({
     _animateVisible: function() {
         this._parentActor.raise_top();
 
-        if (this._windowCanClose()) {
-            this.closeButton.show();
-            this.closeButton.opacity = 0;
-            Tweener.addTween(this.closeButton,
+        let toAnimate = [this.border, this.title];
+        if (this._windowCanClose())
+            toAnimate.push(this.closeButton);
+
+        toAnimate.forEach(a => {
+            a.show();
+            a.opacity = 0;
+            Tweener.addTween(a,
                              { opacity: 255,
                                time: CLOSE_BUTTON_FADE_TIME,
                                transition: 'easeOutQuad' });
-        }
-
-        this.border.show();
-        this.border.opacity = 0;
-        Tweener.addTween(this.border,
-                         { opacity: 255,
-                           time: CLOSE_BUTTON_FADE_TIME,
-                           transition: 'easeOutQuad' });
-
-        this.title.add_style_pseudo_class('hover');
+        });
     },
 
     _animateInvisible: function() {
-        this.closeButton.opacity = 255;
-        Tweener.addTween(this.closeButton,
-                         { opacity: 0,
-                           time: CLOSE_BUTTON_FADE_TIME,
-                           transition: 'easeInQuad' });
-
-        this.border.opacity = 255;
-        Tweener.addTween(this.border,
-                         { opacity: 0,
-                           time: CLOSE_BUTTON_FADE_TIME,
-                           transition: 'easeInQuad' });
-
-        this.title.remove_style_pseudo_class('hover');
+        [this.closeButton, this.border, this.title].forEach(a => {
+            a.opacity = 255;
+            Tweener.addTween(a,
+                             { opacity: 0,
+                               time: CLOSE_BUTTON_FADE_TIME,
+                               transition: 'easeInQuad' });
+        });
     },
 
     _onEnter: function() {
@@ -712,7 +700,7 @@ var WindowOverlay = new Lang.Class({
         }
         this.closeButton.hide();
         this.border.hide();
-        this.title.remove_style_pseudo_class('hover');
+        this.title.hide();
     },
 
     _onStyleChanged: function() {