Bug 1120343 - 2 - Add rewind and fast-forward buttons to animation player widgets; r=miker

--HG--
extra : rebase_source : 0945ad99c5b266ce5127ef02212aa3848ed79a43
extra : histedit_source : 8dbfdd50200f240df15b263c487d85e5260c15bf

browser/devtools/animationinspector/animation-panel.js

@@ -184,6 +184,8 @@ function PlayerWidget(player, containerEl) {
 
   this.onStateChanged = this.onStateChanged.bind(this);
   this.onPlayPauseBtnClick = this.onPlayPauseBtnClick.bind(this);
+  this.onRewindBtnClick = this.onRewindBtnClick.bind(this);
+  this.onFastForwardBtnClick = this.onFastForwardBtnClick.bind(this);
   this.onCurrentTimeChanged = this.onCurrentTimeChanged.bind(this);
 
   this.metaDataComponent = new PlayerMetaDataHeader();
@@ -211,7 +213,8 @@ PlayerWidget.prototype = {
     this.metaDataComponent.destroy();
 
     this.el.remove();
-    this.playPauseBtnEl = this.currentTimeEl = this.timeDisplayEl = null;
+    this.playPauseBtnEl = this.rewindBtnEl = this.fastForwardBtnEl = null;
+    this.currentTimeEl = this.timeDisplayEl = null;
     this.containerEl = this.el = this.player = null;
   }),
 
@@ -219,6 +222,8 @@ PlayerWidget.prototype = {
     this.player.on(this.player.AUTO_REFRESH_EVENT, this.onStateChanged);
     this.playPauseBtnEl.addEventListener("click", this.onPlayPauseBtnClick);
     if (AnimationsController.hasSetCurrentTime) {
+      this.rewindBtnEl.addEventListener("click", this.onRewindBtnClick);
+      this.fastForwardBtnEl.addEventListener("click", this.onFastForwardBtnClick);
       this.currentTimeEl.addEventListener("input", this.onCurrentTimeChanged);
     }
   },
@@ -227,6 +232,8 @@ PlayerWidget.prototype = {
     this.player.off(this.player.AUTO_REFRESH_EVENT, this.onStateChanged);
     this.playPauseBtnEl.removeEventListener("click", this.onPlayPauseBtnClick);
     if (AnimationsController.hasSetCurrentTime) {
+      this.rewindBtnEl.removeEventListener("click", this.onRewindBtnClick);
+      this.fastForwardBtnEl.removeEventListener("click", this.onFastForwardBtnClick);
       this.currentTimeEl.removeEventListener("input", this.onCurrentTimeChanged);
     }
   },
@@ -259,8 +266,7 @@ PlayerWidget.prototype = {
       }
     });
 
-    // Control buttons (when currentTime becomes settable, rewind and
+    // Control buttons.
-    // fast-forward can be added here).
     this.playPauseBtnEl = createNode({
       parent: playbackControlsEl,
       nodeType: "button",
@@ -269,6 +275,24 @@ PlayerWidget.prototype = {
       }
     });
 
+    if (AnimationsController.hasSetCurrentTime) {
+      this.rewindBtnEl = createNode({
+        parent: playbackControlsEl,
+        nodeType: "button",
+        attributes: {
+          "class": "rw devtools-button"
+        }
+      });
+
+      this.fastForwardBtnEl = createNode({
+        parent: playbackControlsEl,
+        nodeType: "button",
+        attributes: {
+          "class": "ff devtools-button"
+        }
+      });
+    }
+
     // Sliders container.
     let slidersContainerEl = createNode({
       parent: timelineEl,
@@ -332,6 +356,20 @@ PlayerWidget.prototype = {
     }
   },
 
+  onRewindBtnClick: function() {
+    this.setCurrentTime(0, true);
+  },
+
+  onFastForwardBtnClick: function() {
+    let state = this.player.state;
+
+    let time = state.duration;
+    if (state.iterationCount) {
+     time = state.iterationCount * state.duration;
+    }
+    this.setCurrentTime(time, true);
+  },
+
   /**
    * Executed when the current-time range input is changed.
    */
@@ -375,8 +413,8 @@ PlayerWidget.prototype = {
       throw new Error("This server version doesn't support setting animations' currentTime");
     }
 
-    this.stopTimelineAnimation();
     if (shouldPause) {
+      this.stopTimelineAnimation();
       yield this.pause();
     }
 
@@ -384,6 +422,10 @@ PlayerWidget.prototype = {
       time += this.player.state.delay;
     }
 
+    // Set the time locally first so it feels instant, even if the request to
+    // actually set the time is async.
+    this.displayTime(time);
+
     yield this.player.setCurrentTime(time);
   }),
 

browser/themes/linux/jar.mn

@@ -314,6 +314,10 @@ browser.jar:
   skin/classic/browser/devtools/debugger-pause@2x.png     (../shared/devtools/images/debugger-pause@2x.png)
   skin/classic/browser/devtools/debugger-play.png      (../shared/devtools/images/debugger-play.png)
   skin/classic/browser/devtools/debugger-play@2x.png      (../shared/devtools/images/debugger-play@2x.png)
+  skin/classic/browser/devtools/fast-forward.png       (../shared/devtools/images/fast-forward.png)
+  skin/classic/browser/devtools/fast-forward@2x.png    (../shared/devtools/images/fast-forward@2x.png)
+  skin/classic/browser/devtools/rewind.png             (../shared/devtools/images/rewind.png)
+  skin/classic/browser/devtools/rewind@2x.png          (../shared/devtools/images/rewind@2x.png)
   skin/classic/browser/devtools/debugger-step-in.png   (../shared/devtools/images/debugger-step-in.png)
   skin/classic/browser/devtools/debugger-step-in@2x.png   (../shared/devtools/images/debugger-step-in@2x.png)
   skin/classic/browser/devtools/debugger-step-out.png  (../shared/devtools/images/debugger-step-out.png)

browser/themes/osx/jar.mn

@@ -446,6 +446,10 @@ browser.jar:
   skin/classic/browser/devtools/debugger-pause@2x.png       (../shared/devtools/images/debugger-pause@2x.png)
   skin/classic/browser/devtools/debugger-play.png           (../shared/devtools/images/debugger-play.png)
   skin/classic/browser/devtools/debugger-play@2x.png        (../shared/devtools/images/debugger-play@2x.png)
+  skin/classic/browser/devtools/fast-forward.png            (../shared/devtools/images/fast-forward.png)
+  skin/classic/browser/devtools/fast-forward@2x.png         (../shared/devtools/images/fast-forward@2x.png)
+  skin/classic/browser/devtools/rewind.png                  (../shared/devtools/images/rewind.png)
+  skin/classic/browser/devtools/rewind@2x.png               (../shared/devtools/images/rewind@2x.png)
   skin/classic/browser/devtools/debugger-step-in.png        (../shared/devtools/images/debugger-step-in.png)
   skin/classic/browser/devtools/debugger-step-in@2x.png     (../shared/devtools/images/debugger-step-in@2x.png)
   skin/classic/browser/devtools/debugger-step-out.png       (../shared/devtools/images/debugger-step-out.png)

browser/themes/shared/devtools/animationinspector.css

@@ -135,7 +135,6 @@ body {
 }
 
 .timeline .playback-controls {
-  width: 50px;
   display: flex;
   flex-direction: row;
 }
@@ -147,8 +146,6 @@ body {
   border-width: 0 1px 0 0;
 }
 
-/* Play/pause button */
-
 .timeline .toggle::before {
   background-image: url(debugger-pause.png);
 }
@@ -158,6 +155,14 @@ body {
   background-image: url(debugger-play.png);
 }
 
+.timeline .ff::before {
+  background-image: url(fast-forward.png);
+}
+
+.timeline .rw::before {
+  background-image: url(rewind.png);
+}
+
 @media (min-resolution: 2dppx) {
   .timeline .toggle::before {
     background-image: url(debugger-pause@2x.png);
@@ -167,6 +172,14 @@ body {
   .finished .timeline .toggle::before {
     background-image: url(debugger-play@2x.png);
   }
+
+  .timeline .ff::before {
+    background-image: url(fast-forward@2x.png);
+  }
+
+  .timeline .rw::before {
+    background-image: url(rewind@2x.png);
+  }
 }
 
 /* Slider (input type range) container */

browser/themes/windows/jar.mn

@@ -352,6 +352,10 @@ browser.jar:
         skin/classic/browser/devtools/debugger-pause@2x.png         (../shared/devtools/images/debugger-pause@2x.png)
         skin/classic/browser/devtools/debugger-play.png             (../shared/devtools/images/debugger-play.png)
         skin/classic/browser/devtools/debugger-play@2x.png          (../shared/devtools/images/debugger-play@2x.png)
+        skin/classic/browser/devtools/fast-forward.png              (../shared/devtools/images/fast-forward.png)
+        skin/classic/browser/devtools/fast-forward@2x.png           (../shared/devtools/images/fast-forward@2x.png)
+        skin/classic/browser/devtools/rewind.png                    (../shared/devtools/images/rewind.png)
+        skin/classic/browser/devtools/rewind@2x.png                 (../shared/devtools/images/rewind@2x.png)
         skin/classic/browser/devtools/debugger-step-in.png          (../shared/devtools/images/debugger-step-in.png)
         skin/classic/browser/devtools/debugger-step-in@2x.png       (../shared/devtools/images/debugger-step-in@2x.png)
         skin/classic/browser/devtools/debugger-step-out.png         (../shared/devtools/images/debugger-step-out.png)
@@ -824,6 +828,10 @@ browser.jar:
         skin/classic/aero/browser/devtools/debugger-pause@2x.png     (../shared/devtools/images/debugger-pause@2x.png)
         skin/classic/aero/browser/devtools/debugger-play.png         (../shared/devtools/images/debugger-play.png)
         skin/classic/aero/browser/devtools/debugger-play@2x.png      (../shared/devtools/images/debugger-play@2x.png)
+        skin/classic/aero/browser/devtools/fast-forward.png          (../shared/devtools/images/fast-forward.png)
+        skin/classic/aero/browser/devtools/fast-forward@2x.png       (../shared/devtools/images/fast-forward@2x.png)
+        skin/classic/aero/browser/devtools/rewind.png                (../shared/devtools/images/rewind.png)
+        skin/classic/aero/browser/devtools/rewind@2x.png             (../shared/devtools/images/rewind@2x.png)
         skin/classic/aero/browser/devtools/debugger-step-in.png      (../shared/devtools/images/debugger-step-in.png)
         skin/classic/aero/browser/devtools/debugger-step-in@2x.png   (../shared/devtools/images/debugger-step-in@2x.png)
         skin/classic/aero/browser/devtools/debugger-step-out.png     (../shared/devtools/images/debugger-step-out.png)