Backed out 3 changesets (bug 1120833, bug 1149711) for causing bug 1150615.

Backed out changeset 527c548ff03c (bug 1149711)
Backed out changeset 2fe22ffef154 (bug 1120833)
Backed out changeset 501fa7c170ed (bug 1120833)

CLOSED TREE

browser/devtools/animationinspector/animation-controller.js

@@ -109,7 +109,6 @@ let AnimationsController = {
 
     this.onPanelVisibilityChange = this.onPanelVisibilityChange.bind(this);
     this.onNewNodeFront = this.onNewNodeFront.bind(this);
-    this.onAnimationMutations = this.onAnimationMutations.bind(this);
 
     this.startListeners();
 
@@ -152,9 +151,6 @@ 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() {
@@ -217,34 +213,6 @@ 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.currentTime);
+        this.displayTime(this.player.state.duration);
+        this.stopListeners();
         break;
       case "running":
         this.startTimelineAnimation();
@@ -399,10 +399,6 @@ PlayerWidget.prototype = {
         this.stopTimelineAnimation();
         this.displayTime(this.player.state.currentTime);
         break;
-      case "idle":
-        this.stopTimelineAnimation();
-        this.displayTime(0);
-        break;
     }
   },
 
@@ -439,6 +435,10 @@ 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,6 +452,10 @@ 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/devtools/animationinspector/test/browser.ini

@@ -18,8 +18,6 @@ support-files =
 [browser_animation_playerWidgets_have_control_buttons.js]
 [browser_animation_playerWidgets_meta_data.js]
 [browser_animation_playerWidgets_state_after_pause.js]
-[browser_animation_refresh_on_added_animation.js]
-[browser_animation_refresh_on_removed_animation.js]
 [browser_animation_refresh_when_active.js]
 [browser_animation_same_nb_of_playerWidgets_and_playerFronts.js]
 [browser_animation_setting_currentTime_works_and_pauses.js]

browser/devtools/animationinspector/test/browser_animation_playerWidgets_disables_on_finished.js

@@ -23,9 +23,19 @@ add_task(function*() {
   is(controller.animationPlayers.length, 2, "2 animation players exist");
 
   info("Wait for both animations to end");
+
   let promises = controller.animationPlayers.map(front => {
-    return waitForPlayState(front, "finished");
+    let def = promise.defer();
+    let onStateChanged = () => {
+      if (front.state.playState === "finished") {
+        front.off(front.AUTO_REFRESH_EVENT, onStateChanged);
+        def.resolve();
+      }
+    };
+    front.on(front.AUTO_REFRESH_EVENT, onStateChanged);
+    return def.promise;
   });
+
   yield promise.all(promises);
 
   for (let widgetEl of panel.playersEl.querySelectorAll(".player-widget")) {

browser/devtools/animationinspector/test/browser_animation_playerWidgets_dont_show_time_after_duration.js

@@ -28,7 +28,15 @@ add_task(function*() {
   let widget = panel.playerWidgets[0];
   let front = widget.player;
 
-  yield waitForPlayState(front, "finished");
+  let def = promise.defer();
+  let onStateChanged = () => {
+    if (front.state.playState === "finished") {
+      front.off(front.AUTO_REFRESH_EVENT, onStateChanged);
+      def.resolve();
+    }
+  };
+  front.on(front.AUTO_REFRESH_EVENT, onStateChanged);
+  yield def.promise;
 
   is(widget.currentTimeEl.value, front.state.duration,
     "The timeline slider has the right value");

browser/devtools/animationinspector/test/browser_animation_refresh_on_added_animation.js

@@ -1,34 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that the panel content refreshes when new animations are added.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {toolbox, inspector, panel} = yield openAnimationInspector();
-
-  info("Select a non animated node");
-  yield selectNode(".still", inspector);
-
-  is(panel.playersEl.querySelectorAll(".player-widget").length, 0,
-    "There are no player widgets in the panel");
-
-  info("Listen to the next UI update event");
-  let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
-
-  info("Start an animation on the node");
-  yield executeInContent("devtools:test:setAttribute", {
-    selector: ".still",
-    attributeName: "class",
-    attributeValue: "ball animated"
-  });
-
-  yield onPanelUpdated;
-  ok(true, "The panel update event was fired");
-
-  is(panel.playersEl.querySelectorAll(".player-widget").length, 1,
-    "There is one player widget in the panel");
-});

browser/devtools/animationinspector/test/browser_animation_refresh_on_removed_animation.js

@@ -1,61 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that the panel content refreshes when animations are removed.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {toolbox, inspector, panel} = yield openAnimationInspector();
-
-  info("Select a animated node");
-  yield selectNode(".animated", inspector);
-
-  is(panel.playersEl.querySelectorAll(".player-widget").length, 1,
-    "There is one player widget in the panel");
-
-  info("Listen to the next UI update event");
-  let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
-
-  info("Remove the animation on the node by removing the class");
-  yield executeInContent("devtools:test:setAttribute", {
-    selector: ".animated",
-    attributeName: "class",
-    attributeValue: "ball still test-node"
-  });
-
-  yield onPanelUpdated;
-  ok(true, "The panel update event was fired");
-
-  is(panel.playersEl.querySelectorAll(".player-widget").length, 0,
-    "There are no player widgets in the panel anymore");
-
-  info("Add an finite animation on the node again, and wait for it to end");
-  onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
-  yield executeInContent("devtools:test:setAttribute", {
-    selector: ".test-node",
-    attributeName: "class",
-    attributeValue: "ball short"
-  });
-  yield onPanelUpdated;
-  is(panel.playersEl.querySelectorAll(".player-widget").length, 1,
-    "There is one player widget in the panel again");
-
-  info("Wait until the animation finishes");
-  let widget = panel.playerWidgets[0];
-  yield waitForPlayState(widget.player, "finished");
-
-  is(panel.playersEl.querySelectorAll(".player-widget").length, 1,
-    "There is still a player widget in the panel after the animation finished");
-
-  info("Checking that the animation's currentTime can still be set");
-
-  info("Click at the center of the slider input")
-  let input = widget.currentTimeEl;
-  let win = input.ownerDocument.defaultView;
-  EventUtils.synthesizeMouseAtCenter(input, {type: "mousedown"}, win);
-
-  yield checkPausedAt(widget, 1000);
-});

browser/devtools/animationinspector/test/browser_animation_setting_currentTime_works_and_pauses.js

@@ -41,3 +41,23 @@ add_task(function*() {
 
   yield checkPausedAt(widget, 2000);
 });
+
+function* checkPausedAt(widget, time) {
+  info("Wait for the next auto-update");
+
+  let onPaused = promise.defer();
+  widget.player.on(widget.player.AUTO_REFRESH_EVENT, function onRefresh() {
+    info("Still waiting for the player to pause");
+    if (widget.player.state.playState === "paused") {
+      ok(true, "The player's playState is paused");
+      widget.player.off(widget.player.AUTO_REFRESH_EVENT, onRefresh);
+      onPaused.resolve();
+    }
+  });
+  yield onPaused.promise;
+
+  ok(widget.el.classList.contains("paused"), "The widget is in paused mode");
+  is(widget.player.state.currentTime, time,
+    "The player front's currentTime was set to " + time);
+  is(widget.currentTimeEl.value, time, "The input's value was set to " + time);
+}

browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_changes.js

@@ -16,10 +16,6 @@ add_task(function*() {
 
   info("Get the player widget");
   let widget = panel.playerWidgets[0];
-  let player = widget.player;
-
-  info("Wait for paused playState");
-  let onPaused = waitForPlayState(player, "paused");
 
   info("Pause the animation via the content DOM");
   yield executeInContent("Test:ToggleAnimationPlayer", {
@@ -28,15 +24,13 @@ add_task(function*() {
     pause: true
   });
 
-  yield onPaused;
+  info("Wait for the next state update");
+  yield onceNextPlayerRefresh(widget.player);
 
-  is(player.state.playState, "paused", "The AnimationPlayerFront is paused");
+  is(widget.player.state.playState, "paused", "The AnimationPlayerFront is paused");
   ok(widget.el.classList.contains("paused"), "The button's state has changed");
   ok(!widget.rafID, "The smooth timeline animation has been stopped");
 
-  info("Wait for running playState");
-  let onRunning = waitForPlayState(player, "running");
-
   info("Play the animation via the content DOM");
   yield executeInContent("Test:ToggleAnimationPlayer", {
     selector: ".animated",
@@ -44,9 +38,10 @@ add_task(function*() {
     pause: false
   });
 
-  yield onRunning;
+  info("Wait for the next state update");
+  yield onceNextPlayerRefresh(widget.player);
 
-  is(player.state.playState, "running", "The AnimationPlayerFront is running");
+  is(widget.player.state.playState, "running", "The AnimationPlayerFront is running");
   ok(widget.el.classList.contains("running"), "The button's state has changed");
   ok(widget.rafID, "The smooth timeline animation has been started");
 });

browser/devtools/animationinspector/test/head.js

@@ -284,8 +284,10 @@ let togglePlayPauseButton = Task.async(function*(widget) {
 
   yield onClicked;
 
-  // Wait until the state changes.
-  yield waitForPlayState(widget.player, nextState);
+  // Wait for the next sate change event to make sure the state is updated
+  yield waitForStateCondition(widget.player, state => {
+    return state.playState === nextState;
+  }, "after clicking the toggle button");
 });
 
 /**
@@ -315,19 +317,6 @@ let waitForStateCondition = Task.async(function*(player, conditionCheck, desc=""
   return def.promise;
 });
 
-/**
- * Wait for a player's auto-refresh events and stop when the playState is the
- * provided string.
- * @param {AnimationPlayerFront} player
- * @param {String} playState The playState to expect.
- * @return {Promise} Resolves when the playState has changed to the expected value.
- */
-function waitForPlayState(player, playState) {
-  return waitForStateCondition(player, state => {
-    return state.playState === playState;
-  }, "Waiting for animation to be " + playState);
-}
-
 /**
  * Get the current playState of an animation player on a given node.
  */
@@ -337,24 +326,6 @@ let getAnimationPlayerState = Task.async(function*(selector, animationIndex=0) {
   return playState;
 });
 
-/**
- * Listen to AnimationPlayerFront auto-refresh events and wait until the
- * animation is paused. When done, check its currentTime.
- * @param {PlayerWidget} widget.
- * @param {Numer} time.
- * @return {Promise} Resolves when the animation is paused and tests have ran.
- */
-let checkPausedAt = Task.async(function*(widget, time) {
-  info("Wait for the next auto-refresh");
-
-  yield waitForPlayState(widget.player, "paused");
-
-  ok(widget.el.classList.contains("paused"), "The widget is in paused mode");
-  is(widget.player.state.currentTime, time,
-    "The player front's currentTime was set to " + time);
-  is(widget.currentTimeEl.value, time, "The input's value was set to " + time);
-});
-
 /**
  * Is the given node visible in the page (rendered in the frame tree).
  * @param {DOMNode}

browser/themes/shared/devtools/animationinspector.css

@@ -99,6 +99,13 @@ 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,6 +404,11 @@ 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);