[gnome-shell/wip/fmuellner/ease-actors: 15/20] messageTray: Stop tweening custom opacity property

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

commit 7a7544d5e84fd61fd08e8a6f4ff3af3c37768f2e
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Jul 20 21:46:19 2018 +0200

    messageTray: Stop tweening custom opacity property
    
    Notifications use a transition that overshoots the target value, however
    we can only really do that for the position and not the opacity where
    some values would end up out of the valid range.
    
    We currently address this by proxying the actual opacity property in a
    javascript property, and clamp it to the valid range in an onUpdate()
    callback.
    
    This won't be an option if we want to use Clutter animations, so instead,
    use separate tweens for opacity and position.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/22

 js/ui/messageTray.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)
---
diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 77d4364b0..920e71b1d 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1249,10 +1249,6 @@ var MessageTray = class MessageTray {
         this._notificationExpired = false;
     }
 
-    _clampOpacity() {
-        this._bannerBin.opacity = Math.max(0, Math.min(this._bannerBin._opacity, 255));
-    }
-
     _onIdleMonitorBecameActive() {
         this._userActiveWhileNotificationShown = true;
         this._updateNotificationTimeout(2000);
@@ -1279,7 +1275,6 @@ var MessageTray = class MessageTray {
 
         this._bannerBin.add_actor(this._banner.actor);
 
-        this._bannerBin._opacity = 0;
         this._bannerBin.opacity = 0;
         this._bannerBin.y = -this._banner.actor.height;
         this.actor.show();
@@ -1327,12 +1322,15 @@ var MessageTray = class MessageTray {
 
         this._notificationState = State.SHOWING;
         Tweener.removeTweens(this._bannerBin);
+        Tweener.addTween(this._bannerBin, {
+            opacity: 255,
+            time: ANIMATION_TIME / 1000,
+            transition: 'linear'
+        });
         Tweener.addTween(this._bannerBin, {
             y: 0,
-            _opacity: 255,
             time: ANIMATION_TIME / 1000,
             transition: 'easeOutBack',
-            onUpdate: () => this._clampOpacity,
             onComplete: () => {
                 this._notificationState = State.SHOWN;
                 this._showNotificationCompleted();
@@ -1400,12 +1398,15 @@ var MessageTray = class MessageTray {
         if (animate) {
             this._notificationState = State.HIDING;
             Tweener.removeTweens(this._bannerBin);
+            Tweener.addTween(this._bannerBin, {
+                opacity: 0,
+                time: ANIMATION_TIME / 1000,
+                transition: 'linear'
+            });
             Tweener.addTween(this._bannerBin, {
                 y: -this._bannerBin.height,
-                _opacity: 0,
                 time: ANIMATION_TIME / 1000,
                 transition: 'easeOutBack',
-                onUpdate: () => this._clampOpacity,
                 onComplete: () => {
                     this._notificationState = State.HIDDEN;
                     this._hideNotificationCompleted();