From 5610a2435dec78bd0dd2d2878f4d0b50372b5214 Mon Sep 17 00:00:00 2001
From: Daniel van Vugt <daniel.van.vugt@canonical.com>
Date: Fri, 5 Oct 2018 09:09:22 +0000
Subject: [PATCH] iconGrid: Defer and group animation cleanup

The `reactive` property of icon actors was being restored 24 times over
the course of the spring animation, all at slightly different times as
each icon finished animating at different times.

The problem is that toggling `reactive` on an `StWidget` incurs a style
change of the `insensitive` pseudo class, and style changes would quickly
queue relayouts incurring full stage reallocation. This occurred many times
during a spring animation hogging the CPU and limiting the frame rate.

The solution is defer and batch the cleanup for all icons until after the
last icon has finished animating. This way the CPU impact of the style
change and stage relayout isn't felt during the animation so the frame
rate remains higher and smoother. The overall CPU usage of the animation
is also reduced as the remaining relayouts are much more likely to be
grouped into a single frame.

Icon spring animation performance on an i7-7700:
Before: 83% CPU and 47 FPS
After : 78% CPU and 54 FPS
which is about a 22% increase in performance per clock (FPS/CPU).

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/253


(cherry picked from commit a5e6dd52d20981066ffb8e64a8537ba3a3f7044c)
---
 js/ui/iconGrid.js | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 60f2653f0..538970034 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -418,6 +418,11 @@ var IconGrid = new Lang.Class({
     },
 
     _animationDone() {
+        this._clonesAnimating.forEach(clone => {
+            clone.source.reactive = true;
+            clone.source.opacity = 255;
+            clone.destroy();
+        });
         this._clonesAnimating = [];
         this.emit('animation-done');
     },
@@ -538,10 +543,6 @@ var IconGrid = new Lang.Class({
                                    onComplete: () => {
                                        if (isLastItem)
                                            this._animationDone();
-
-                                       actor.opacity = 255;
-                                       actor.reactive = true;
-                                       actorClone.destroy();
                                    }};
                 fadeParams = { time: ANIMATION_FADE_IN_TIME_FOR_ITEM,
                                transition: 'easeInOutQuad',
@@ -562,12 +563,8 @@ var IconGrid = new Lang.Class({
                                    scale_x: scaleX,
                                    scale_y: scaleY,
                                    onComplete: () => {
-                                       if (isLastItem) {
+                                       if (isLastItem)
                                            this._animationDone();
-                                           this._restoreItemsOpacity();
-                                       }
-                                       actor.reactive = true;
-                                       actorClone.destroy();
                                    }};
                 fadeParams = { time: ANIMATION_FADE_IN_TIME_FOR_ITEM,
                                transition: 'easeInOutQuad',
@@ -581,12 +578,6 @@ var IconGrid = new Lang.Class({
         }
     },
 
-    _restoreItemsOpacity() {
-        for (let index = 0; index < this._items.length; index++) {
-            this._items[index].actor.opacity = 255;
-        }
-    },
-
     _getAllocatedChildSizeAndSpacing(child) {
         let [,, natWidth, natHeight] = child.get_preferred_size();
         let width = Math.min(this._getHItemSize(), natWidth);