[gnome-shell] WindowOverlay: animate the close button together with the border

[Giovanni Campagna <gcampagna src gnome org>]

commit 96f44e1959b6247d698ad562d40fedbbf883fd58
Author: Giovanni Campagna <gcampagna src gnome org>
Date:   Sat Nov 24 04:04:38 2012 +0100

    WindowOverlay: animate the close button together with the border
    
    Since the introduction of overlay hover borders, there has a been
    a timing disconnection between hiding the border and button, and
    this creates noise and reduces the effect of the window+overlay
    as a single unit.
    Solve that by animating the close button too, so that the two actors
    are shown and hidden always at the same time.
    Also, consolidate the code to make it clear to future authors that
    those two items need to stay coordinated.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=688966

 js/ui/workspace.js |   40 ++++++++++++++++++++++++++--------------
 1 files changed, 26 insertions(+), 14 deletions(-)
---
diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index c2583ed..ef7c9d6 100644
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -500,11 +500,9 @@ const WindowOverlay = new Lang.Class({
 
     hide: function() {
         this._hidden = true;
-        this.closeButton.hide();
         this.title.hide();
-        this.title.remove_style_pseudo_class('hover');
 
-        this.border.hide();
+        this.hideCloseButton();
     },
 
     show: function() {
@@ -664,7 +662,13 @@ const WindowOverlay = new Lang.Class({
 
     _animateVisible: function() {
         this._parentActor.raise_top();
+
         this.closeButton.show();
+        this.closeButton.opacity = 0;
+        Tweener.addTween(this.closeButton,
+                         { opacity: 255,
+                           time: CLOSE_BUTTON_FADE_TIME,
+                           transition: 'easeOutQuad' });
 
         this.border.show();
         this.border.opacity = 0;
@@ -676,6 +680,22 @@ const WindowOverlay = new Lang.Class({
         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');
+    },
+
     _onEnter: function() {
         // We might get enter events on the clone while the overlay is
         // hidden, e.g. during animations, we ignore these events,
@@ -695,18 +715,10 @@ const WindowOverlay = new Lang.Class({
 
     _idleToggleCloseButton: function() {
         this._idleToggleCloseId = 0;
-        if (!this._windowClone.actor.has_pointer &&
-            !this.closeButton.has_pointer) {
-            this.closeButton.hide();
-
-            this.border.opacity = 255;
-            Tweener.addTween(this.border,
-                             { opacity: 0,
-                               time: CLOSE_BUTTON_FADE_TIME,
-                               transition: 'easeInQuad' });
 
-            this.title.remove_style_pseudo_class('hover');
-        }
+        if (!this._windowClone.actor.has_pointer &&
+            !this.closeButton.has_pointer)
+            this._animateInvisible();
 
         return false;
     },