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

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

commit e06cdef672827b90a02f0b6537896f2ac1e6dc43
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                       |   47 +++++++++++------------------
 3 files changed, 22 insertions(+), 39 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index a86551b..8c55e2a 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1127,13 +1127,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 3cc6d5b..de9126d 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1127,13 +1127,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 c93170b..7552357 100644
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -466,6 +466,7 @@ const WindowOverlay = new Lang.Class({
         this._windowAddedId = 0;
 
         button.hide();
+        title.hide();
 
         this.title = title;
         this.closeButton = button;
@@ -498,7 +499,6 @@ const WindowOverlay = new Lang.Class({
     show: function() {
         this._hidden = false;
 
-        this.title.show();
         if (this._windowClone.actor.has_pointer)
             this._animateVisible();
     },
@@ -639,39 +639,28 @@ const 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 +701,7 @@ const WindowOverlay = new Lang.Class({
         }
         this.closeButton.hide();
         this.border.hide();
-        this.title.remove_style_pseudo_class('hover');
+        this.title.hide();
     },
 
     _onStyleChanged: function() {