[gnome-shell/wip/fmuellner/ease-actors: 5/6] popupMenu: Split submenu expansion and arrow rotation

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

commit 258e9660712e2b7670d7c0f57f03090d3da6f6ac
Author: Florian Müllner <fmuellner gnome org>
Date:   Sat Jun 10 04:32:22 2017 +0200

    popupMenu: Split submenu expansion and arrow rotation
    
    When expanding a submenu, we currently use a single tween to animate
    both the submenu actor and the source arrow. We do this by tweening
    a monkey-patched JS property on the main actor, which we then use
    to update the arrow's GObject property on updates. As Clutter cannot
    animate random JS properties, this trick prevents us from using
    implicit animations here.
    
    The only reason I can think of for using a single tween is to keep
    both animations in perfect lock step, but as expansion and rotation
    are visually quite distinct, this shouldn't be required, so just
    set up separate animations for each actor.

 js/ui/popupMenu.js | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)
---
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index cb975f5f5..f7d8c8a57 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -989,20 +989,17 @@ var PopupSubMenu = new Lang.Class({
         if (animate) {
             let [minHeight, naturalHeight] = this.actor.get_preferred_height(-1);
             this.actor.height = 0;
-            this.actor._arrowRotation = this._arrow.rotation_angle_z;
             Tweener.addTween(this.actor,
-                             { _arrowRotation: targetAngle,
-                               height: naturalHeight,
+                             { height: naturalHeight,
                                time: 0.25,
-                               onUpdateScope: this,
-                               onUpdate: function() {
-                                   this._arrow.rotation_angle_z = this.actor._arrowRotation;
-                               },
                                onCompleteScope: this,
                                onComplete: function() {
                                    this.actor.set_height(-1);
                                }
                              });
+            Tweener.addTween(this._arrow,
+                             { rotation_angle_z: targetAngle,
+                               time: 0.25 });
         } else {
             this._arrow.rotation_angle_z = targetAngle;
         }
@@ -1022,21 +1019,18 @@ var PopupSubMenu = new Lang.Class({
             animate = false;
 
         if (animate) {
-            this.actor._arrowRotation = this._arrow.rotation_angle_z;
             Tweener.addTween(this.actor,
-                             { _arrowRotation: 0,
-                               height: 0,
+                             { height: 0,
                                time: 0.25,
-                               onUpdateScope: this,
-                               onUpdate: function() {
-                                   this._arrow.rotation_angle_z = this.actor._arrowRotation;
-                               },
                                onCompleteScope: this,
                                onComplete: function() {
                                    this.actor.hide();
                                    this.actor.set_height(-1);
                                },
                              });
+            Tweener.addTween(this._arrow,
+                             { rotation_angle_z: 0,
+                               time: 0.25 });
         } else {
             this._arrow.rotation_angle_z = 0;
             this.actor.hide();