added keyboard shortcuts to toolbar

corevo · corevo · commit 91e335cf84b9 · 2018-08-23T15:54:46.000+03:00
diff --git a/packages/selenium-ide/src/neo/components/ActionButtons/DisableBreakpoints/index.jsx b/packages/selenium-ide/src/neo/components/ActionButtons/DisableBreakpoints/index.jsx
@@ -18,11 +18,15 @@
 import React from "react";
 import ActionButton from "../ActionButton";
 import classNames from "classnames";
+import { parse } from "modifier-keys";
 
 export default class DisableBreakpointsButton extends React.Component {
   render() {
     return (
-      <ActionButton data-tip="<p>Disable breakpoints</p>" {...this.props} className={classNames("si-disable-breakpoints", this.props.className)} />// eslint-disable-line react/prop-types
+      <ActionButton
+        data-tip={`<p>Disable breakpoints <span style="color: #929292;padding-left: 5px;">${parse("y", { primaryKey: true })}</span></p>`}
+        {...this.props}
+        className={classNames("si-disable-breakpoints", this.props.className)} />// eslint-disable-line react/prop-types
     );
   }
 }
diff --git a/packages/selenium-ide/src/neo/components/ActionButtons/Pause/index.jsx b/packages/selenium-ide/src/neo/components/ActionButtons/Pause/index.jsx
@@ -18,11 +18,15 @@
 import React from "react";
 import ActionButton from "../ActionButton";
 import classNames from "classnames";
+import { parse } from "modifier-keys";
 
 export default class PauseCurrentButton extends React.Component {
   render() {
     return (
-      <ActionButton data-tip="<p>Pause test execution</p>" {...this.props} className={classNames("si-pause", this.props.className)} />// eslint-disable-line react/prop-types
+      <ActionButton
+        data-tip={`<p>Pause test execution <span style="color: #929292;padding-left: 5px;">${parse("p", { primaryKey: true })}</span></p>`}
+        {...this.props}
+        className={classNames("si-pause", this.props.className)} />// eslint-disable-line react/prop-types
     );
   }
 }
diff --git a/packages/selenium-ide/src/neo/components/ActionButtons/PlayAll/index.jsx b/packages/selenium-ide/src/neo/components/ActionButtons/PlayAll/index.jsx
@@ -18,11 +18,15 @@
 import React from "react";
 import ActionButton from "../ActionButton";
 import classNames from "classnames";
+import { parse } from "modifier-keys";
 
 export default class PlayAllButton extends React.Component {
   render() {
     return (
-      <ActionButton data-tip="<p>Run all tests in suite</p>" {...this.props} className={classNames("si-play-all", this.props.className)} />// eslint-disable-line react/prop-types
+      <ActionButton
+        data-tip={`<p>Run all tests in suite <span style="color: #929292;padding-left: 5px;">${parse("r", { primaryKey: true, secondaryKey: true })}</span></p>`}
+        {...this.props}
+        className={classNames("si-play-all", this.props.className)} />// eslint-disable-line react/prop-types
     );
   }
 }
diff --git a/packages/selenium-ide/src/neo/components/ActionButtons/PlayCurrent/index.jsx b/packages/selenium-ide/src/neo/components/ActionButtons/PlayCurrent/index.jsx
@@ -18,11 +18,15 @@
 import React from "react";
 import ActionButton from "../ActionButton";
 import classNames from "classnames";
+import { parse } from "modifier-keys";
 
 export default class PlayCurrentButton extends React.Component {
   render() {
     return (
-      <ActionButton data-tip="<p>Run current test</p>" {...this.props} className={classNames("si-play", this.props.className)} />// eslint-disable-line react/prop-types
+      <ActionButton
+        data-tip={`<p>Run current test <span style="color: #929292;padding-left: 5px;">${parse("r", { primaryKey: true })}</span></p>`}
+        {...this.props}
+        className={classNames("si-play", this.props.className)} />// eslint-disable-line react/prop-types
     );
   }
 }
diff --git a/packages/selenium-ide/src/neo/components/ActionButtons/Record/index.jsx b/packages/selenium-ide/src/neo/components/ActionButtons/Record/index.jsx
@@ -18,6 +18,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
+import { parse } from "modifier-keys";
 import "./style.css";
 
 const RecordButton = styled.button`
@@ -91,7 +92,12 @@ export default class Record extends React.Component {
   };
   render() {
     return (
-      <div className="record" data-tip={this.props.isRecording ? "<p>Stop recording</p>" : "<p>Start recording</p>"}>
+      <div
+        className="record"
+        data-tip={this.props.isRecording ?
+          `<p>Stop recording <span style="color: #929292;padding-left: 5px;">${parse("u", { primaryKey: true })}</span></p>` :
+          `<p>Start recording <span style="color: #929292;padding-left: 5px;">${parse("u", { primaryKey: true })}</span></p>`
+        }>
         <RecordButton disabled={this.props.disabled} isActive={this.props.isRecording} onClick={this.props.onClick}></RecordButton>
       </div>
     );
diff --git a/packages/selenium-ide/src/neo/components/ActionButtons/StepInto/index.jsx b/packages/selenium-ide/src/neo/components/ActionButtons/StepInto/index.jsx
@@ -18,11 +18,15 @@
 import React from "react";
 import ActionButton from "../ActionButton";
 import classNames from "classnames";
+import { parse } from "modifier-keys";
 
 export default class StepIntoButton extends React.Component {
   render() {
     return (
-      <ActionButton data-tip="<p>Run current command</p>" {...this.props} className={classNames("si-step-down", this.props.className)} />// eslint-disable-line react/prop-types
+      <ActionButton
+        data-tip={`<p>Step over current command <span style="color: #929292;padding-left: 5px;">${parse("'", { primaryKey: true })}</span></p>`}
+        {...this.props}
+        className={classNames("si-step-down", this.props.className)} />// eslint-disable-line react/prop-types
     );
   }
 }
diff --git a/packages/selenium-ide/src/neo/components/ActionButtons/Stop/index.jsx b/packages/selenium-ide/src/neo/components/ActionButtons/Stop/index.jsx
@@ -18,11 +18,15 @@
 import React from "react";
 import ActionButton from "../ActionButton";
 import classNames from "classnames";
+import { parse } from "modifier-keys";
 
 export default class StopButton extends React.Component {
   render() {
     return (
-      <ActionButton data-tip="<p>Stop test execution</p>" {...this.props} className={classNames("si-stop", this.props.className)} />// eslint-disable-line react/prop-types
+      <ActionButton
+        data-tip={`<p>Stop test execution <span style="color: #929292;padding-left: 5px;">${parse(".", { primaryKey: true })}</span></p>`}
+        {...this.props}
+        className={classNames("si-stop", this.props.className)} />// eslint-disable-line react/prop-types
     );
   }
 }
diff --git a/packages/selenium-ide/src/neo/components/ToolBar/index.jsx b/packages/selenium-ide/src/neo/components/ToolBar/index.jsx
@@ -17,6 +17,7 @@
 
 import React from "react";
 import { observer } from "mobx-react";
+import { parse } from "modifier-keys";
 import PlayAll from "../../components/ActionButtons/PlayAll";
 import PlayCurrent from "../../components/ActionButtons/PlayCurrent";
 import Pause from "../../components/ActionButtons/Pause";
@@ -34,35 +35,29 @@ import "./style.css";
 @observer
 export default class ToolBar extends React.Component {
   render() {
-    const isPlayingSuite = PlaybackState.isPlaying && !!PlaybackState.currentRunningSuite;
-    const isPlayingTest = PlaybackState.isPlaying && PlaybackState.currentRunningTest && !PlaybackState.currentRunningSuite;
     const isTestEmpty = UiState.selectedTest.test && !UiState.selectedTest.test.commands.length;
     const isCommandValid = UiState.selectedCommand && UiState.selectedCommand.isValid;
     return (
       <div className="toolbar">
         <PlayAll
-          isActive={!PlaybackState.paused && isPlayingSuite}
-          disabled={!UiState.selectedTest.suite || isPlayingTest}
-          onClick={() => (!PlaybackState.paused ? PlaybackState.startPlayingSuite() : PlaybackState.resume())}
+          isActive={!PlaybackState.paused && PlaybackState.isPlayingSuite}
+          disabled={!PlaybackState.canPlaySuite}
+          onClick={PlaybackState.playSuiteOrResume}
         />
         <PlayCurrent
-          isActive={!PlaybackState.paused && isPlayingTest}
-          disabled={isTestEmpty || isPlayingSuite}
-          onClick={() => (!PlaybackState.paused ? PlaybackState.startPlaying() : PlaybackState.resume())}
+          isActive={!PlaybackState.paused && PlaybackState.isPlayingTest}
+          disabled={isTestEmpty || PlaybackState.isPlayingSuite}
+          onClick={PlaybackState.playTestOrResume}
         />
         { PlaybackState.isPlaying ? <Stop onClick={() => {PlaybackState.abortPlaying();}} /> : null }
         { PlaybackState.isPlaying ?
           <Pause isActive={PlaybackState.paused}
-            data-tip={!PlaybackState.paused ? "<p>Pause test execution</p>" : "<p>Resume test execution</p>"}
-            onClick={() => (!PlaybackState.paused ? PlaybackState.pause() : PlaybackState.resume())} /> : null }
-        <StepInto disabled={!isCommandValid} onClick={() => {
-          if (!PlaybackState.paused) {
-            PlaybackState.startPlaying(UiState.selectedCommand, true);
-          } else {
-            PlaybackState.resume(true);
-          }
-        }}
-        />
+            data-tip={!PlaybackState.paused ?
+              `<p>Pause test execution <span style="color: #929292;padding-left: 5px;">${parse("p", { primaryKey: true })}</span></p>` :
+              `<p>Resume test execution <span style="color: #929292;padding-left: 5px;">${parse("p", { primaryKey: true })}</span></p>`
+            }
+            onClick={PlaybackState.pauseOrResume} /> : null }
+        <StepInto disabled={!isCommandValid} onClick={PlaybackState.stepOver} />
         <GaugeMenu opener={
           <SpeedGauge speed={UiState.gaugeSpeed} />
         } value={PlaybackState.delay} maxDelay={PlaybackState.maxDelay} onChange={PlaybackState.setDelay} />
diff --git a/packages/selenium-ide/src/neo/containers/Panel/index.jsx b/packages/selenium-ide/src/neo/containers/Panel/index.jsx
@@ -38,6 +38,7 @@ import Console from "../Console";
 import Modal from "../Modal";
 import Changelog from "../../components/Changelog";
 import UiState from "../../stores/view/UiState";
+import PlaybackState from "../../stores/view/PlaybackState";
 import "../../side-effects/contextMenu";
 import "../../styles/app.css";
 import "../../styles/font.css";
@@ -132,6 +133,7 @@ if (browser.windows) {
   handleKeyDown(e) {
     modifier(e);
     const key = e.key.toUpperCase();
+    const bothModifiers = (e.primaryKey && e.secondaryKey);
     const onlyPrimary = (e.primaryKey && !e.secondaryKey);
     const noModifiers = (!e.primaryKey && !e.secondaryKey);
 
@@ -141,6 +143,40 @@ if (browser.windows) {
     } else if (onlyPrimary && key === "O" && this.openFile) {
       e.preventDefault();
       this.openFile();
+    } else if (onlyPrimary && key === "R") {
+      // run test
+      e.preventDefault();
+      if (!PlaybackState.isPlayingSuite) {
+        PlaybackState.playTestOrResume();
+      }
+    } else if (bothModifiers && e.code === "KeyR") {
+      // run suite
+      e.preventDefault();
+      if (PlaybackState.canPlaySuite) {
+        PlaybackState.playSuiteOrResume();
+      }
+    } else if (onlyPrimary && key === "P") {
+      // pause
+      e.preventDefault();
+      PlaybackState.pauseOrResume();
+    } else if (onlyPrimary && key === ".") {
+      // stop
+      e.preventDefault();
+      PlaybackState.abortPlaying();
+    } else if (onlyPrimary && key === "'") {
+      // step over
+      e.preventDefault();
+      PlaybackState.stepOver();
+    } else if (onlyPrimary && key === "Y") {
+      // disable breakpoints
+      e.preventDefault();
+      PlaybackState.toggleDisableBreakpoints();
+    } else if (onlyPrimary && key === "U") {
+      // record
+      e.preventDefault();
+      if (!PlaybackState.isPlaying) {
+        UiState.toggleRecord();
+      }
     } else if (noModifiers && key === "ESCAPE") {
       UiState.toggleConsole();
     }
diff --git a/packages/selenium-ide/src/neo/stores/view/PlaybackState.js b/packages/selenium-ide/src/neo/stores/view/PlaybackState.js
@@ -81,6 +81,18 @@ class PlaybackState {
     }, {});
   }
 
+  @computed get isPlayingSuite() {
+    return this.isPlaying && !!this.currentRunningSuite;
+  }
+
+  @computed get isPlayingTest() {
+    return this.isPlaying && this.currentRunningTest && !this.currentRunningSuite;
+  }
+
+  @computed get canPlaySuite() {
+    return UiState.selectedTest.suite && !this.isPlayingTest;
+  }
+
   @action.bound toggleDisableBreakpoints() {
     this.breakpointsDisabled = !this.breakpointsDisabled;
   }
@@ -121,6 +133,38 @@ class PlaybackState {
     this.currentRunningSuite = undefined;
   }
 
+  @action.bound playSuiteOrResume() {
+    if (this.paused) {
+      return this.resume();
+    } else if (!this.isPlaying) {
+      this.startPlayingSuite();
+    }
+  }
+
+  @action.bound playTestOrResume() {
+    if (this.paused) {
+      return this.resume();
+    } else if (!this.isPlaying) {
+      return this.startPlaying();
+    }
+  }
+
+  @action.bound pauseOrResume() {
+    if (this.paused) {
+      return this.resume();
+    } else if (this.isPlaying) {
+      return this.pause();
+    }
+  }
+
+  @action.bound stepOver() {
+    if (this.paused) {
+      this.resume(true);
+    } else if (!this.isPlaying) {
+      this.startPlaying(UiState.selectedCommand, true);
+    }
+  }
+
   @action.bound startPlayingSuite() {
     const playSuite = action(() => {
       const { suite } = UiState.selectedTest;
@@ -293,14 +337,16 @@ class PlaybackState {
   }
 
   @action.bound abortPlaying() {
-    this.aborted = true;
-    this._testsToRun = [];
-    if (this.paused) {
-      this.setCommandStateAtomically(this.currentExecutingCommandNode.command.id, this.callstack.length ? this.callstack.length - 1 : undefined, PlaybackStates.Fatal, "Playback aborted");
-    } else {
-      this.setCommandStateAtomically(this.currentExecutingCommandNode.command.id, this.callstack.length ? this.callstack.length - 1 : undefined, PlaybackStates.Undetermined, "Aborting...");
+    if (this.isPlaying) {
+      this.aborted = true;
+      this._testsToRun = [];
+      if (this.paused) {
+        this.setCommandStateAtomically(this.currentExecutingCommandNode.command.id, this.callstack.length ? this.callstack.length - 1 : undefined, PlaybackStates.Fatal, "Playback aborted");
+      } else {
+        this.setCommandStateAtomically(this.currentExecutingCommandNode.command.id, this.callstack.length ? this.callstack.length - 1 : undefined, PlaybackStates.Undetermined, "Aborting...");
+      }
+      this.stopPlayingGracefully();
     }
-    this.stopPlayingGracefully();
   }
 
   @action.bound forceFailure() {
