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

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

commit 9dc4bccec6975c034c44e0d69b62f39379f1bcdb
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 will prevent 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.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/22

 js/ui/popupMenu.js | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)
---
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 8fd439fc8..cab383e92 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -1013,18 +1013,16 @@ var PopupSubMenu = class extends PopupMenuBase {
         if (animate) {
             let [, 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,
-                               onUpdate: () => {
-                                   this._arrow.rotation_angle_z = this.actor._arrowRotation;
-                               },
                                onComplete: () => {
                                    this.actor.set_height(-1);
                                }
                              });
+            Tweener.addTween(this._arrow,
+                             { rotation_angle_z: targetAngle,
+                               time: 0.25 });
         } else {
             this._arrow.rotation_angle_z = targetAngle;
         }
@@ -1044,19 +1042,17 @@ var PopupSubMenu = class extends PopupMenuBase {
             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,
-                               onUpdate: () => {
-                                   this._arrow.rotation_angle_z = this.actor._arrowRotation;
-                               },
                                onComplete: () => {
                                    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();