Bug 1431573 - Part 9: Implement toggle pause/resume function by key board. r?gl
MozReview-Commit-ID: 7p1Iu54gIR8
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -72,16 +72,17 @@ class App extends PureComponent {
timeScale,
toggleElementPicker,
} = this.props;
return dom.div(
{
id: "animation-container",
className: detailVisibility ? "animation-detail-visible" : "",
+ tabIndex: -1,
},
animations.length ?
[
AnimationToolbar(
{
addAnimationsCurrentTimeListener,
animations,
removeAnimationsCurrentTimeListener,
--- a/devtools/client/inspector/animation/components/PauseResumeButton.js
+++ b/devtools/client/inspector/animation/components/PauseResumeButton.js
@@ -2,65 +2,91 @@
* 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 ReactDOM = require("devtools/client/shared/vendor/react-dom");
+
+const { KeyCodes } = require("devtools/client/shared/keycodes");
const { getStr } = require("../utils/l10n");
const { hasPlayingAnimation } = require("../utils/utils");
class PauseResumeButton extends PureComponent {
static get propTypes() {
return {
animations: PropTypes.arrayOf(PropTypes.object).isRequired,
setAnimationsPlayState: PropTypes.func.isRequired,
};
}
constructor(props) {
super(props);
+ this.onKeyDown = this.onKeyDown.bind(this);
+
this.state = {
isPlaying: false,
};
}
componentWillMount() {
this.updateState(this.props);
}
+ componentDidMount() {
+ const targetEl = this.getKeyEventTarget();
+ targetEl.addEventListener("keydown", this.onKeyDown);
+ }
+
componentWillReceiveProps(nextProps) {
this.updateState(nextProps);
}
- onClick() {
+ componentWillUnount() {
+ const targetEl = this.getKeyEventTarget();
+ targetEl.removeEventListener("keydown", this.onKeyDown);
+ }
+
+ getKeyEventTarget() {
+ return ReactDOM.findDOMNode(this).closest("#animation-container");
+ }
+
+ onToggleAnimationsPlayState() {
const { setAnimationsPlayState } = this.props;
const { isPlaying } = this.state;
setAnimationsPlayState(!isPlaying);
}
+ onKeyDown(e) {
+ if (e.keyCode === KeyCodes.DOM_VK_SPACE) {
+ this.onToggleAnimationsPlayState();
+ e.preventDefault();
+ }
+ }
+
updateState() {
const { animations } = this.props;
const isPlaying = hasPlayingAnimation(animations);
this.setState({ isPlaying });
}
render() {
const { isPlaying } = this.state;
return dom.button(
{
className: "pause-resume-button devtools-button" +
(isPlaying ? "" : " paused"),
- onClick: this.onClick.bind(this),
+ onClick: this.onToggleAnimationsPlayState.bind(this),
title: isPlaying ?
getStr("timeline.resumedButtonTooltip") :
getStr("timeline.pausedButtonTooltip"),
}
);
}
}