refactor stop and stop sketch actions, add start and stop sketch to nav

client/components/Nav.jsx

@@ -241,7 +241,6 @@ class Nav extends React.PureComponent {
               </li>
             </ul>
           </li>
-          {/*
           <li className={navDropdownState.sketch}>
             <button
               onClick={this.toggleDropdown.bind(this, 'sketch')}
@@ -257,14 +256,27 @@ class Nav extends React.PureComponent {
                 <InlineSVG src={triangleUrl} />
               </li>
               <li className="nav__dropdown-item">
-                Run
+                <button
+                  onClick={this.props.startSketch}
+                  onFocus={this.handleFocus.bind(this, 'sketch')}
+                  onBlur={this.handleBlur}
+                >
+                  Run
+                  <span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
+                </button>
               </li>
               <li className="nav__dropdown-item">
-                Stop
+                <button
+                  onClick={this.props.stopSketch}
+                  onFocus={this.handleFocus.bind(this, 'sketch')}
+                  onBlur={this.handleBlur}
+                >
+                  Stop
+                  <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
+                </button>
               </li>
             </ul>
           </li>
-          */}
           <li className={navDropdownState.help}>
             <button
               onClick={this.toggleDropdown.bind(this, 'help')}
@@ -418,7 +430,9 @@ Nav.propTypes = {
     showFind: PropTypes.func,
     findNext: PropTypes.func,
     findPrev: PropTypes.func
-  })
+  }),
+  startSketch: PropTypes.func.isRequired,
+  stopSketch: PropTypes.func.isRequired
 };
 
 Nav.defaultProps = {

client/modules/IDE/actions/ide.js

@@ -1,12 +1,13 @@
 import * as ActionTypes from '../../../constants';
+import { clearConsole } from './console';
 
-export function startSketch() {
+export function startVisualSketch() {
   return {
     type: ActionTypes.START_SKETCH
   };
 }
 
-export function stopSketch() {
+export function stopVisualSketch() {
   return {
     type: ActionTypes.STOP_SKETCH
   };
@@ -20,7 +21,7 @@ export function startRefreshSketch() {
 
 export function startSketchAndRefresh() {
   return (dispatch) => {
-    dispatch(startSketch());
+    dispatch(startVisualSketch());
     dispatch(startRefreshSketch());
   };
 }
@@ -233,3 +234,26 @@ export function hideHelpModal() {
     type: ActionTypes.HIDE_HELP_MODAL
   };
 }
+
+export function startSketch() {
+  return (dispatch) => {
+    dispatch(clearConsole());
+    dispatch(startSketchAndRefresh());
+  };
+}
+
+export function startAccessibleSketch() {
+  return (dispatch) => {
+    dispatch(clearConsole());
+    dispatch(startAccessibleOutput());
+    dispatch(startSketchAndRefresh());
+  };
+}
+
+export function stopSketch() {
+  return (dispatch) => {
+    dispatch(stopAccessibleOutput());
+    dispatch(stopVisualSketch());
+  };
+}
+

client/modules/IDE/components/Toolbar.jsx

@@ -60,11 +60,7 @@ class Toolbar extends React.Component {
       <div className="toolbar">
         <button
           className="toolbar__play-sketch-button"
-          onClick={() => {
-            this.props.clearConsole();
-            this.props.startAccessibleOutput();
-            this.props.startSketchAndRefresh();
-          }}
+          onClick={this.props.startAccessibleSketch}
           aria-label="play sketch"
           disabled={this.props.infiniteLoop}
         >
@@ -72,10 +68,7 @@ class Toolbar extends React.Component {
         </button>
         <button
           className={playButtonClass}
-          onClick={() => {
-            this.props.clearConsole();
-            this.props.startSketchAndRefresh();
-          }}
+          onClick={this.props.startSketch}
           aria-label="play only visual sketch"
           disabled={this.props.infiniteLoop}
         >
@@ -83,7 +76,7 @@ class Toolbar extends React.Component {
         </button>
         <button
           className={stopButtonClass}
-          onClick={() => { this.props.stopAccessibleOutput(); this.props.stopSketch(); }}
+          onClick={this.props.stopSketch}
           aria-label="stop sketch"
         >
           <InlineSVG src={stopUrl} alt="Stop Sketch" />
@@ -185,8 +178,6 @@ Toolbar.propTypes = {
   isPlaying: PropTypes.bool.isRequired,
   preferencesIsVisible: PropTypes.bool.isRequired,
   stopSketch: PropTypes.func.isRequired,
-  startAccessibleOutput: PropTypes.func.isRequired,
-  stopAccessibleOutput: PropTypes.func.isRequired,
   setProjectName: PropTypes.func.isRequired,
   openPreferences: PropTypes.func.isRequired,
   owner: PropTypes.shape({
@@ -205,10 +196,10 @@ Toolbar.propTypes = {
   autorefresh: PropTypes.bool.isRequired,
   setAutorefresh: PropTypes.func.isRequired,
   setServeSecure: PropTypes.func.isRequired,
-  startSketchAndRefresh: PropTypes.func.isRequired,
+  startSketch: PropTypes.func.isRequired,
+  startAccessibleSketch: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
-  currentUser: PropTypes.string,
-  clearConsole: PropTypes.func.isRequired
+  currentUser: PropTypes.string
 };
 
 Toolbar.defaultProps = {

client/modules/IDE/pages/IDEView.jsx

@@ -165,8 +165,7 @@ class IDEView extends React.Component {
     } else if (e.keyCode === 13 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
       e.preventDefault();
       e.stopPropagation();
-      this.props.clearConsole();
-      this.props.startSketchAndRefresh();
+      this.props.startSketch();
     } else if (e.keyCode === 50 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) {
       e.preventDefault();
       this.props.setTextOutput(false);
@@ -213,6 +212,7 @@ class IDEView extends React.Component {
           cloneProject={this.props.cloneProject}
           project={this.props.project}
           logoutUser={this.props.logoutUser}
+          startSketch={this.props.startSketch}
           stopSketch={this.props.stopSketch}
           showShareModal={this.props.showShareModal}
           showErrorModal={this.props.showErrorModal}
@@ -225,8 +225,6 @@ class IDEView extends React.Component {
           className="Toolbar"
           isPlaying={this.props.ide.isPlaying}
           stopSketch={this.props.stopSketch}
-          startAccessibleOutput={this.props.startAccessibleOutput}
-          stopAccessibleOutput={this.props.stopAccessibleOutput}
           projectName={this.props.project.name}
           setProjectName={this.props.setProjectName}
           showEditProjectName={this.props.showEditProjectName}
@@ -243,10 +241,10 @@ class IDEView extends React.Component {
           infiniteLoop={this.props.ide.infiniteLoop}
           autorefresh={this.props.preferences.autorefresh}
           setAutorefresh={this.props.setAutorefresh}
-          startSketchAndRefresh={this.props.startSketchAndRefresh}
+          startSketch={this.props.startSketch}
+          startAccessibleSketch={this.props.startAccessibleSketch}
           saveProject={this.props.saveProject}
           currentUser={this.props.user.username}
-          clearConsole={this.props.clearConsole}
           showHelpModal={this.props.showHelpModal}
         />
         <Preferences
@@ -574,8 +572,6 @@ IDEView.propTypes = {
     helpType: PropTypes.string
   }).isRequired,
   stopSketch: PropTypes.func.isRequired,
-  startAccessibleOutput: PropTypes.func.isRequired,
-  stopAccessibleOutput: PropTypes.func.isRequired,
   project: PropTypes.shape({
     id: PropTypes.string,
     name: PropTypes.string.isRequired,
@@ -674,7 +670,6 @@ IDEView.propTypes = {
   setUnsavedChanges: PropTypes.func.isRequired,
   setTheme: PropTypes.func.isRequired,
   setAutorefresh: PropTypes.func.isRequired,
-  startSketchAndRefresh: PropTypes.func.isRequired,
   endSketchRefresh: PropTypes.func.isRequired,
   startRefreshSketch: PropTypes.func.isRequired,
   setBlobUrl: PropTypes.func.isRequired,
@@ -689,7 +684,9 @@ IDEView.propTypes = {
   clearPersistedState: PropTypes.func.isRequired,
   persistState: PropTypes.func.isRequired,
   showHelpModal: PropTypes.func.isRequired,
-  hideHelpModal: PropTypes.func.isRequired
+  hideHelpModal: PropTypes.func.isRequired,
+  startSketch: PropTypes.func.isRequired,
+  startAccessibleSketch: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {