Bug 1431573 - Part 3: Implement rewind button. r=gl

MozReview-Commit-ID: H7XX5rUIqZG

devtools/client/inspector/animation/animation.js

@@ -29,6 +29,7 @@ class AnimationInspector {
     this.getAnimatedPropertyMap = this.getAnimatedPropertyMap.bind(this);
     this.getComputedStyle = this.getComputedStyle.bind(this);
     this.getNodeFromActor = this.getNodeFromActor.bind(this);
+    this.rewindAnimationsCurrentTime = this.rewindAnimationsCurrentTime.bind(this);
     this.selectAnimation = this.selectAnimation.bind(this);
     this.setAnimationsPlayState = this.setAnimationsPlayState.bind(this);
     this.setDetailVisibility = this.setDetailVisibility.bind(this);
@@ -61,6 +62,7 @@ class AnimationInspector {
       getAnimatedPropertyMap,
       getComputedStyle,
       getNodeFromActor,
+      rewindAnimationsCurrentTime,
       selectAnimation,
       setAnimationsPlayState,
       setDetailVisibility,
@@ -85,6 +87,7 @@ class AnimationInspector {
           getNodeFromActor,
           onHideBoxModelHighlighter,
           onShowBoxModelHighlighterForNode,
+          rewindAnimationsCurrentTime,
           selectAnimation,
           setAnimationsPlayState,
           setDetailVisibility,
@@ -219,6 +222,12 @@ class AnimationInspector {
     this.inspector.store.dispatch(updateSidebarSize(size));
   }
 
+  async rewindAnimationsCurrentTime() {
+    const animations = this.state.animations;
+    await this.animationsFront.setCurrentTimes(animations, 0, true);
+    this.updateAnimations(animations);
+  }
+
   selectAnimation(animation) {
     this.inspector.store.dispatch(updateSelectedAnimation(animation));
   }

devtools/client/inspector/animation/components/AnimationToolbar.js

@@ -9,11 +9,13 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const PauseResumeButton = createFactory(require("./PauseResumeButton"));
+const RewindButton = createFactory(require("./RewindButton"));
 
 class AnimationToolbar extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      rewindAnimationsCurrentTime: PropTypes.func.isRequired,
       setAnimationsPlayState: PropTypes.func.isRequired,
     };
   }
@@ -21,6 +23,7 @@ class AnimationToolbar extends PureComponent {
   render() {
     const {
       animations,
+      rewindAnimationsCurrentTime,
       setAnimationsPlayState,
     } = this.props;
 
@@ -28,6 +31,11 @@ class AnimationToolbar extends PureComponent {
       {
         className: "animation-toolbar devtools-toolbar",
       },
+      RewindButton(
+        {
+          rewindAnimationsCurrentTime,
+        }
+      ),
       PauseResumeButton(
         {
           animations,

devtools/client/inspector/animation/components/App.js

@@ -26,6 +26,7 @@ class App extends PureComponent {
       getNodeFromActor: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+      rewindAnimationsCurrentTime: PropTypes.func.isRequired,
       selectAnimation: PropTypes.func.isRequired,
       setAnimationsPlayState: PropTypes.func.isRequired,
       setDetailVisibility: PropTypes.func.isRequired,
@@ -49,6 +50,7 @@ class App extends PureComponent {
       getNodeFromActor,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
+      rewindAnimationsCurrentTime,
       selectAnimation,
       setAnimationsPlayState,
       setDetailVisibility,
@@ -67,6 +69,7 @@ class App extends PureComponent {
         AnimationToolbar(
           {
             animations,
+            rewindAnimationsCurrentTime,
             setAnimationsPlayState,
           }
         ),

devtools/client/inspector/animation/components/RewindButton.js

@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const { getStr } = require("../utils/l10n");
+
+class RewindButton extends PureComponent {
+  static get propTypes() {
+    return {
+      rewindAnimationsCurrentTime: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const { rewindAnimationsCurrentTime } = this.props;
+
+    return dom.button(
+      {
+        className: "rewind-button devtools-button",
+        onClick: rewindAnimationsCurrentTime,
+        title: getStr("timeline.rewindButtonTooltip"),
+      }
+    );
+  }
+}
+
+module.exports = RewindButton;

devtools/client/inspector/animation/components/moz.build

@@ -28,4 +28,5 @@ DevToolsModules(
     'KeyframesProgressTickList.js',
     'NoAnimationPanel.js',
     'PauseResumeButton.js',
+    'RewindButton.js',
 )

devtools/client/themes/animation.css

@@ -15,6 +15,7 @@
   --keyframe-marker-shadow-color: #c4c4c4;
   --pause-image: url(chrome://devtools/skin/images/pause.svg);
   --resume-image: url(chrome://devtools/skin/images/play.svg);
+  --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
   --sidebar-width: 200px;
   --stroke-color-cssanimation: var(--theme-highlight-lightorange);
   --stroke-color-csstransition: var(--theme-highlight-bluegrey);
@@ -31,6 +32,7 @@
   --command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg);
   --pause-image: url(chrome://devtools/skin/images/firebug/pause.svg);
   --resume-image: url(chrome://devtools/skin/images/firebug/play.svg);
+  --rewind-image: url(chrome://devtools/skin/images/firebug/rewind.svg);
 }
 
 /* Root element of animation inspector */
@@ -65,6 +67,10 @@
   background-image: var(--resume-image);
 }
 
+.rewind-button::before {
+  background-image: var(--rewind-image);
+}
+
 /* Animation List Container */
 .animation-list-container {
   display: flex;