[gnome-shell/wip/notif-d2: 10/18] messageTray: Glue the notification to the bottom of the screen, always

[Jasper St. Pierre <jstpierre src gnome org>]

commit ae74dbd1bbae6a32f8692dd97e8f53eafe7bfa83
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Thu Dec 5 01:45:34 2013 -0500

    messageTray: Glue the notification to the bottom of the screen, always
    
    We'll animate notifications popping up with another system soon enough,
    instead. The idea here is that instead of carefully animating the Y
    position of the notificationWidget when a notification updates, we
    simply animate the height of the new actor inside the notification.
    This will fix some of the awkward updates where instead of the
    notification content expanding, we see the buttons or action area
    pushed off the edge of the screen...
    
    Animations that happen as a result of adding something new to the
    notification or expanding it should be done by tweeing the new actors
    in inside the notification.

 js/ui/components/telepathyClient.js |    2 -
 js/ui/messageTray.js                |   50 +++++++---------------------------
 2 files changed, 11 insertions(+), 41 deletions(-)
---
diff --git a/js/ui/components/telepathyClient.js b/js/ui/components/telepathyClient.js
index 1cb0c25..f58c4a3 100644
--- a/js/ui/components/telepathyClient.js
+++ b/js/ui/components/telepathyClient.js
@@ -737,8 +737,6 @@ const ChatNotification = new Lang.Class({
         this._lastMessageBox.add(body, props.childProps);
         this.addActor(this._lastMessageBox);
 
-        this.updated();
-
         let timestamp = props.timestamp;
         this._history.unshift({ actor: body, time: timestamp,
                                 realMessage: group != 'meta' });
diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index c63267d..2f1db1a 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1692,6 +1692,9 @@ const MessageTray = new Lang.Class({
                                                    layout_manager: new Clutter.BinLayout() });
         this._notificationWidget.connect('key-release-event', Lang.bind(this, 
this._onNotificationKeyRelease));
         this._notificationWidget.connect('notify::hover', Lang.bind(this, this._onNotificationHoverChanged));
+        this._notificationWidget.connect('notify::height', Lang.bind(this, function() {
+            this._notificationWidget.translation_y = -this._notificationWidget.height;
+        }));
 
         this._notificationBin = new St.Bin({ y_expand: true });
         this._notificationBin.set_y_align(Clutter.ActorAlign.START);
@@ -2519,7 +2522,6 @@ const MessageTray = new Lang.Class({
         this._notificationBin.child = this._notification.actor;
 
         this._notificationWidget.opacity = 0;
-        this._notificationWidget.y = 0;
         this._notificationWidget.show();
 
         this._updateShowingNotification();
@@ -2554,23 +2556,16 @@ const MessageTray = new Lang.Class({
         // We tween all notifications to full opacity. This ensures that both new notifications and
         // notifications that might have been in the process of hiding get full opacity.
         //
-        // We tween any notification showing in the banner mode to the appropriate height
-        // (which is banner height or expanded height, depending on the notification state)
-        // This ensures that both new notifications and notifications in the banner mode that might
-        // have been in the process of hiding are shown with the correct height.
-        //
         // We use this._showNotificationCompleted() onComplete callback to extend the time the updated
         // notification is being shown.
 
-        let tweenParams = { opacity: 255,
-                            y: -this._notificationWidget.height,
-                            time: ANIMATION_TIME,
-                            transition: 'easeOutQuad',
-                            onComplete: this._showNotificationCompleted,
-                            onCompleteScope: this
-                          };
-
-        this._tween(this._notificationWidget, '_notificationState', State.SHOWN, tweenParams);
+        this._tween(this._notificationWidget, '_notificationState', State.SHOWN,
+                    { opacity: 255,
+                      time: ANIMATION_TIME,
+                      transition: 'easeOutQuad',
+                      onComplete: this._showNotificationCompleted,
+                      onCompleteScope: this
+                    });
    },
 
     _showNotificationCompleted: function() {
@@ -2635,8 +2630,7 @@ const MessageTray = new Lang.Class({
 
         if (animate) {
             this._tween(this._notificationWidget, '_notificationState', State.HIDDEN,
-                        { y: this.actor.height,
-                          opacity: 0,
+                        { opacity: 0,
                           time: ANIMATION_TIME,
                           transition: 'easeOutQuad',
                           onComplete: this._hideNotificationCompleted,
@@ -2644,7 +2638,6 @@ const MessageTray = new Lang.Class({
                         });
         } else {
             Tweener.removeTweens(this._notificationWidget);
-            this._notificationWidget.y = this.actor.height;
             this._notificationWidget.opacity = 0;
             this._notificationState = State.HIDDEN;
             this._hideNotificationCompleted();
@@ -2687,28 +2680,7 @@ const MessageTray = new Lang.Class({
     },
 
     _onNotificationExpanded: function() {
-        let expandedY = - this._notificationWidget.height;
         this._closeButton.show();
-
-        // Don't animate the notification to its new position if it has shrunk:
-        // there will be a very visible "gap" that breaks the illusion.
-        if (this._notificationWidget.y < expandedY) {
-            this._notificationWidget.y = expandedY;
-        } else if (this._notification.y != expandedY) {
-            // Tween also opacity here, to override a possible tween that's
-            // currently hiding the notification.
-            Tweener.addTween(this._notificationWidget,
-                             { y: expandedY,
-                               opacity: 255,
-                               time: ANIMATION_TIME,
-                               transition: 'easeOutQuad',
-                               // HACK: Drive the state machine here better,
-                               // instead of overwriting tweens
-                               onComplete: Lang.bind(this, function() {
-                                   this._notificationState = State.SHOWN;
-                               }),
-                             });
-        }
     },
 
     _ensureNotificationFocused: function() {