From 749f52fc8b2e99ff6a451fb617177d86eb6c865d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Sat, 10 Jun 2017 04:32:22 +0200
Subject: [PATCH] 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();