[gnome-shell/wip/new-notifications: 558/569] messageTray: Glue the notification to the bottom of the screen, always

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

commit 9f2e5b9b5184be704ac5d60287d5d712c1235663
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 9ec4357..715cc9b 100644
--- a/js/ui/components/telepathyClient.js
+++ b/js/ui/components/telepathyClient.js
@@ -738,8 +738,6 @@ const ChatNotification = new Lang.Class({
         this._lastMessageBox.add(body, props.childProps);
         this._bodyBox.add_child(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 cc44eb6..7347183 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1470,6 +1470,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);
@@ -2297,7 +2300,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();
@@ -2332,23 +2334,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() {
@@ -2413,8 +2408,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,
@@ -2422,7 +2416,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();
@@ -2465,28 +2458,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() {