[gnome-shell/wip/fmuellner/spinner] animation: Optionally animate spinner start/stop

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

commit 36fb4fc26fe75c917d3a5d676432cbde174195ee
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed Nov 28 17:34:48 2018 +0100

    animation: Optionally animate spinner start/stop
    
    In contrast to generic animated icons, it is reasonable to expect
    spinners to be invisible while inactive. Implement that behavior
    in the new Spinner class and optionally animate the transitions.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/316

 js/ui/animation.js              | 44 ++++++++++++++++++++++++++++++++++++++++-
 js/ui/components/keyring.js     | 28 ++++----------------------
 js/ui/components/polkitAgent.js | 29 ++++-----------------------
 3 files changed, 51 insertions(+), 50 deletions(-)
---
diff --git a/js/ui/animation.js b/js/ui/animation.js
index ebd7972c1..5b4a10c08 100644
--- a/js/ui/animation.js
+++ b/js/ui/animation.js
@@ -8,7 +8,11 @@ const St = imports.gi.St;
 const Signals = imports.signals;
 const Atk = imports.gi.Atk;
 
+const Tweener = imports.ui.tweener;
+
 var ANIMATED_ICON_UPDATE_TIMEOUT = 16;
+var SPINNER_ANIMATION_TIME = 0.3;
+var SPINNER_ANIMATION_DELAY = 1.0;
 
 var Animation = new Lang.Class({
     Name: 'Animation',
@@ -92,8 +96,46 @@ var Spinner = new Lang.Class({
     Name: 'Spinner',
     Extends: AnimatedIcon,
 
-    _init(size) {
+    _init(size, animate=false) {
         let file = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
         this.parent(file, size);
+
+        this.actor.opacity = 0;
+        this._animate = animate;
+    },
+
+    play() {
+        Tweener.removeTweens(this.actor);
+
+        if (this._animate) {
+            this.parent();
+            Tweener.addTween(this.actor, {
+                opacity: 255,
+                delay: SPINNER_ANIMATION_DELAY,
+                time: SPINNER_ANIMATION_TIME,
+                transition: 'linear'
+            });
+        } else {
+            this.actor.opacity = 255;
+            this.parent();
+        }
+    },
+
+    stop() {
+        Tweener.removeTweens(this.actor);
+
+        if (this._animate) {
+            Tweener.addTween(this.actor, {
+                opacity: 0,
+                time: SPINNER_ANIMATION_TIME,
+                transition: 'linear',
+                onComplete: () => {
+                    this.stop(false);
+                }
+            });
+        } else {
+            this.actor.opacity = 0;
+            this.parent();
+        }
     }
 });
diff --git a/js/ui/components/keyring.js b/js/ui/components/keyring.js
index 037bc097a..180b86556 100644
--- a/js/ui/components/keyring.js
+++ b/js/ui/components/keyring.js
@@ -17,8 +17,6 @@ const CheckBox = imports.ui.checkBox;
 const Tweener = imports.ui.tweener;
 
 var WORK_SPINNER_ICON_SIZE = 16;
-var WORK_SPINNER_ANIMATION_DELAY = 1.0;
-var WORK_SPINNER_ANIMATION_TIME = 0.3;
 
 var KeyringDialog = new Lang.Class({
     Name: 'KeyringDialog',
@@ -69,27 +67,10 @@ var KeyringDialog = new Lang.Class({
         if (!this._workSpinner)
             return;
 
-        Tweener.removeTweens(this._workSpinner.actor);
-        if (working) {
+        if (working)
             this._workSpinner.play();
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 255,
-                               delay: WORK_SPINNER_ANIMATION_DELAY,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear'
-                             });
-        } else {
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 0,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear',
-                               onCompleteScope: this,
-                               onComplete() {
-                                   if (this._workSpinner)
-                                       this._workSpinner.stop();
-                               }
-                             });
-        }
+        else
+            this._workSpinner.stop();
     },
 
     _buildControlTable() {
@@ -114,8 +95,7 @@ var KeyringDialog = new Lang.Class({
             ShellEntry.addContextMenu(this._passwordEntry, { isPassword: true });
             this._passwordEntry.clutter_text.connect('activate', this._onPasswordActivate.bind(this));
 
-            this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE);
-            this._workSpinner.actor.opacity = 0;
+            this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, true);
 
             if (rtl) {
                 layout.attach(this._workSpinner.actor, 0, row, 1, 1);
diff --git a/js/ui/components/polkitAgent.js b/js/ui/components/polkitAgent.js
index 4bcbe30e7..4b2a2cacb 100644
--- a/js/ui/components/polkitAgent.js
+++ b/js/ui/components/polkitAgent.js
@@ -25,8 +25,6 @@ const Tweener = imports.ui.tweener;
 var DIALOG_ICON_SIZE = 48;
 
 var WORK_SPINNER_ICON_SIZE = 16;
-var WORK_SPINNER_ANIMATION_DELAY = 1.0;
-var WORK_SPINNER_ANIMATION_TIME = 0.3;
 
 var AuthenticationDialog = new Lang.Class({
     Name: 'AuthenticationDialog',
@@ -117,9 +115,7 @@ var AuthenticationDialog = new Lang.Class({
         this._passwordBox.add(this._passwordEntry,
                               { expand: true });
 
-        this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE);
-        this._workSpinner.actor.opacity = 0;
-
+        this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, true);
         this._passwordBox.add(this._workSpinner.actor);
 
         this.setInitialKeyFocus(this._passwordEntry);
@@ -163,27 +159,10 @@ var AuthenticationDialog = new Lang.Class({
     },
 
     _setWorking(working) {
-        Tweener.removeTweens(this._workSpinner.actor);
-        if (working) {
+        if (working)
             this._workSpinner.play();
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 255,
-                               delay: WORK_SPINNER_ANIMATION_DELAY,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear'
-                             });
-        } else {
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 0,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear',
-                               onCompleteScope: this,
-                               onComplete() {
-                                   if (this._workSpinner)
-                                       this._workSpinner.stop();
-                               }
-                             });
-        }
+        else
+            this._workSpinner.stop();
     },
 
     performAuthentication() {