[gnome-shell/wip/fmuellner/overview-tweaks: 11/16] workspace: Only reveal title captions on hover

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

commit 8ab910ad63c47a6d5ad60134042bf6d5c37832c9
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.css               |    7 +---
 js/ui/workspace.js                       |   48 +++++++++++------------------
 3 files changed, 22 insertions(+), 40 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index eb10af6..77c6028 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1105,13 +1105,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.css b/data/theme/gnome-shell.css
index 56c8d04..c9b1765 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1105,13 +1105,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 94a6f53..d2a34a2 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() {