diff --git a/devtools/client/inspector/animation/animation.js b/devtools/client/inspector/animation/animation.js index 55699e67a57f..a54283323f01 100644 --- a/devtools/client/inspector/animation/animation.js +++ b/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)); } diff --git a/devtools/client/inspector/animation/components/AnimationToolbar.js b/devtools/client/inspector/animation/components/AnimationToolbar.js index 93c72cb8ed2e..47001cd0eb71 100644 --- a/devtools/client/inspector/animation/components/AnimationToolbar.js +++ b/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, diff --git a/devtools/client/inspector/animation/components/App.js b/devtools/client/inspector/animation/components/App.js index 14c3fbcb16ba..ef62f683777e 100644 --- a/devtools/client/inspector/animation/components/App.js +++ b/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, } ), diff --git a/devtools/client/inspector/animation/components/RewindButton.js b/devtools/client/inspector/animation/components/RewindButton.js new file mode 100644 index 000000000000..1ff5c194483d --- /dev/null +++ b/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; diff --git a/devtools/client/inspector/animation/components/moz.build b/devtools/client/inspector/animation/components/moz.build index aa8847d081f5..39c7bbdea172 100644 --- a/devtools/client/inspector/animation/components/moz.build +++ b/devtools/client/inspector/animation/components/moz.build @@ -28,4 +28,5 @@ DevToolsModules( 'KeyframesProgressTickList.js', 'NoAnimationPanel.js', 'PauseResumeButton.js', + 'RewindButton.js', ) diff --git a/devtools/client/themes/animation.css b/devtools/client/themes/animation.css index a0d1c3aa79cf..216a1a4a9416 100644 --- a/devtools/client/themes/animation.css +++ b/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;