Bug 1431573 - Part 9: Implement toggle pause/resume function by key board. r?gl draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 13 Mar 2018 14:31:11 +0900
changeset 766612 2bbff8cbd50420cca3e6d015e9f55f8c7408937e
parent 766611 c620bc400812f416d1569745d45cf98a892bc578
child 766613 994a27eb97e27d8c011919b69d93e384f1551cac
push id102370
push userbmo:dakatsuka@mozilla.com
push dateTue, 13 Mar 2018 06:01:02 +0000
reviewersgl
bugs1431573
milestone61.0a1
Bug 1431573 - Part 9: Implement toggle pause/resume function by key board. r?gl MozReview-Commit-ID: 7p1Iu54gIR8
devtools/client/inspector/animation/components/App.js
devtools/client/inspector/animation/components/PauseResumeButton.js
--- 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"),
       }
     );
   }
 }