Bug 1120833 - 3 - Refresh the list of animation widgets when new animations are added; r=miker

The animation-controler was in charge of getting new animation players and refreshing
the UI when done. This is still the case, but it now listens for mutation events from
the actor too, and when they happen, it simply asks the ui to refresh again.
Also, animations with playState "finished" that remain in the animation inspector panel
can now be played again.

browser/devtools/animationinspector/animation-controller.js

@@ -109,6 +109,7 @@ let AnimationsController = {
 
     this.onPanelVisibilityChange = this.onPanelVisibilityChange.bind(this);
     this.onNewNodeFront = this.onNewNodeFront.bind(this);
+    this.onAnimationMutations = this.onAnimationMutations.bind(this);
 
     this.startListeners();
 
@@ -151,6 +152,9 @@ let AnimationsController = {
     gInspector.selection.off("new-node-front", this.onNewNodeFront);
     gInspector.sidebar.off("select", this.onPanelVisibilityChange);
     gToolbox.off("select", this.onPanelVisibilityChange);
+    if (this.isListeningToMutations) {
+      this.animationsFront.off("mutations", this.onAnimationMutations);
+    }
   },
 
   isPanelVisible: function() {
@@ -213,6 +217,34 @@ let AnimationsController = {
 
     this.animationPlayers = yield this.animationsFront.getAnimationPlayersForNode(nodeFront);
     this.startAllAutoRefresh();
+
+    // Start listening for animation mutations only after the first method call
+    // otherwise events won't be sent.
+    if (!this.isListeningToMutations && this.hasMutationEvents) {
+      this.animationsFront.on("mutations", this.onAnimationMutations);
+      this.isListeningToMutations = true;
+    }
+  }),
+
+  onAnimationMutations: Task.async(function*(changes) {
+    // Insert new players into this.animationPlayers when new animations are
+    // added.
+    for (let {type, player} of changes) {
+      if (type === "added") {
+        this.animationPlayers.push(player);
+        player.startAutoRefresh();
+      }
+
+      if (type === "removed") {
+        player.stopAutoRefresh();
+        yield player.release();
+        let index = this.animationPlayers.indexOf(player);
+        this.animationPlayers.splice(index, 1);
+      }
+    }
+
+    // Let the UI know the list has been updated.
+    this.emit(this.PLAYERS_UPDATED_EVENT, this.animationPlayers);
   }),
 
   startAllAutoRefresh: function() {

browser/devtools/animationinspector/animation-panel.js

@@ -383,14 +383,14 @@ PlayerWidget.prototype = {
    */
   onStateChanged: function() {
     let state = this.player.state;
+
     this.updateWidgetState(state);
     this.metaDataComponent.render(state);
 
     switch (state.playState) {
       case "finished":
         this.stopTimelineAnimation();
-        this.displayTime(this.player.state.duration);
-        this.stopListeners();
+        this.displayTime(this.player.state.currentTime);
         break;
       case "running":
         this.startTimelineAnimation();
@@ -399,6 +399,10 @@ PlayerWidget.prototype = {
         this.stopTimelineAnimation();
         this.displayTime(this.player.state.currentTime);
         break;
+      case "idle":
+        this.stopTimelineAnimation();
+        this.displayTime(0);
+        break;
     }
   },
 
@@ -435,10 +439,6 @@ PlayerWidget.prototype = {
    * switched to the right state, and the timeline animation is stopped.
    */
   pause: function() {
-    if (this.player.state.playState === "finished") {
-      return;
-    }
-
     // Switch to the right className on the element right away to avoid waiting
     // for the next state update to change the playPause icon.
     this.updateWidgetState({playState: "paused"});
@@ -452,10 +452,6 @@ PlayerWidget.prototype = {
    * switched to the right state, and the timeline animation is started.
    */
   play: function() {
-    if (this.player.state.playState === "finished") {
-      return;
-    }
-
     // Switch to the right className on the element right away to avoid waiting
     // for the next state update to change the playPause icon.
     this.updateWidgetState({playState: "running"});

browser/themes/shared/devtools/animationinspector.css

@@ -99,13 +99,6 @@ body {
   }
 }
 
-/* Disabled playerWidget when the animation has ended */
-
-.finished {
-  pointer-events: none;
-  opacity: .5;
-}
-
 /* Animation title gutter, contains the name, duration, iteration */
 
 .animation-title {

toolkit/devtools/server/actors/animation.js

@@ -404,11 +404,6 @@ let AnimationPlayerFront = FrontClass(AnimationPlayerActor, {
       return;
     }
 
-    // If the animationplayer is now finished, stop auto-refreshing.
-    if (data.playState === "finished") {
-      this.stopAutoRefresh();
-    }
-
     if (this.currentStateHasChanged) {
       this.state = data;
       events.emit(this, this.AUTO_REFRESH_EVENT, this.state);