Bug 1120343 - 1 - Allow setting animations' currentTime by clicking/dragging the timeline; r=miker

--HG--
extra : rebase_source : 9ec165736d6119edeabba893bb93985db489ea28
extra : histedit_source : 6926f2c047f1a32e82175ea8ffc450cef6614a90

browser/devtools/animationinspector/animation-controller.js

@@ -99,8 +99,11 @@ let AnimationsController = {
 
     let target = gToolbox.target;
     this.animationsFront = new AnimationsFront(target.client, target.form);
-    // Not all server versions provide a way to pause all animations at once.
+
+    // Expose actor capabilities.
     this.hasToggleAll = yield target.actorHasMethod("animations", "toggleAll");
+    this.hasSetCurrentTime = yield target.actorHasMethod("animationplayer",
+                                                         "setCurrentTime");
 
     this.onPanelVisibilityChange = this.onPanelVisibilityChange.bind(this);
     this.onNewNodeFront = this.onNewNodeFront.bind(this);

browser/devtools/animationinspector/animation-panel.js

@@ -184,6 +184,7 @@ function PlayerWidget(player, containerEl) {
 
   this.onStateChanged = this.onStateChanged.bind(this);
   this.onPlayPauseBtnClick = this.onPlayPauseBtnClick.bind(this);
+  this.onCurrentTimeChanged = this.onCurrentTimeChanged.bind(this);
 
   this.metaDataComponent = new PlayerMetaDataHeader();
 }
@@ -217,11 +218,17 @@ PlayerWidget.prototype = {
   startListeners: function() {
     this.player.on(this.player.AUTO_REFRESH_EVENT, this.onStateChanged);
     this.playPauseBtnEl.addEventListener("click", this.onPlayPauseBtnClick);
+    if (AnimationsController.hasSetCurrentTime) {
+      this.currentTimeEl.addEventListener("input", this.onCurrentTimeChanged);
+    }
   },
 
   stopListeners: function() {
     this.player.off(this.player.AUTO_REFRESH_EVENT, this.onStateChanged);
     this.playPauseBtnEl.removeEventListener("click", this.onPlayPauseBtnClick);
+    if (AnimationsController.hasSetCurrentTime) {
+      this.currentTimeEl.removeEventListener("input", this.onCurrentTimeChanged);
+    }
   },
 
   createMarkup: function() {
@@ -288,12 +295,14 @@ PlayerWidget.prototype = {
         "min": "0",
         "max": max,
         "step": "10",
-        "value": "0",
+        "value": "0"
-        // The currentTime isn't settable yet, so disable the timeline slider
-        "disabled": "true"
       }
     });
 
+    if (!AnimationsController.hasSetCurrentTime) {
+      this.currentTimeEl.setAttribute("disabled", "true");
+    }
+
     // Time display
     this.timeDisplayEl = createNode({
       parent: timelineEl,
@@ -323,6 +332,14 @@ PlayerWidget.prototype = {
     }
   },
 
+  /**
+   * Executed when the current-time range input is changed.
+   */
+  onCurrentTimeChanged: function(e) {
+    let time = e.target.value;
+    this.setCurrentTime(parseFloat(time), true);
+  },
+
   /**
    * Whenever a player state update is received.
    */
@@ -347,6 +364,29 @@ PlayerWidget.prototype = {
     }
   },
 
+  /**
+   * Set the current time of the animation.
+   * @param {Number} time.
+   * @param {Boolean} shouldPause Should the player be paused too.
+   * @return {Promise} Resolves when the current time has been set.
+   */
+  setCurrentTime: Task.async(function*(time, shouldPause) {
+    if (!AnimationsController.hasSetCurrentTime) {
+      throw new Error("This server version doesn't support setting animations' currentTime");
+    }
+
+    this.stopTimelineAnimation();
+    if (shouldPause) {
+      yield this.pause();
+    }
+
+    if (this.player.state.delay) {
+      time += this.player.state.delay;
+    }
+
+    yield this.player.setCurrentTime(time);
+  }),
+
   /**
    * Pause the animation player via this widget.
    * @return {Promise} Resolves when the player is paused, the button is