From 96f44e1959b6247d698ad562d40fedbbf883fd58 Mon Sep 17 00:00:00 2001
From: Giovanni Campagna <gcampagna@src.gnome.org>
Date: Sat, 24 Nov 2012 04:04:38 +0100
Subject: [PATCH] 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 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index c2583ed84..ef7c9d62a 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');
-        }
+            !this.closeButton.has_pointer)
+            this._animateInvisible();
 
         return false;
     },