From fdf24ceecc62984bf932db5275aedcc3b02375bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Fri, 20 Jul 2018 21:46:19 +0200
Subject: [PATCH] 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();