Disable the step button when the user edits running code

apps/src/StudioApp.js

@@ -51,7 +51,7 @@ import {getValidatedResult, initializeContainedLevel} from './containedLevels';
 import {lockContainedLevelAnswers} from './code-studio/levels/codeStudioLevels';
 import {parseElement as parseXmlElement} from './xml';
 import {resetAniGif} from '@cdo/apps/utils';
-import {setIsRunning, setStepSpeed} from './redux/runState';
+import {setIsRunning, setIsEditWhileRun, setStepSpeed} from './redux/runState';
 import {setPageConstants} from './redux/pageConstants';
 import {setVisualizationScale} from './redux/layout';
 import {mergeProgress} from './code-studio/progressRedux';
@@ -559,6 +559,7 @@ StudioApp.prototype.init = function(config) {
         this.editDuringRunAlert === undefined &&
         this.getCode().trim() !== this.executingCode.trim()
       ) {
+        getStore().dispatch(setIsEditWhileRun(true));
         this.editDuringRunAlert = this.displayWorkspaceAlert(
           'warning',
           React.createElement('div', {}, msg.editDuringRunMessage()),
@@ -976,6 +977,7 @@ StudioApp.prototype.toggleRunReset = function(button) {
     if (this.editDuringRunAlert !== undefined) {
       ReactDOM.unmountComponentAtNode(this.editDuringRunAlert);
       this.editDuringRunAlert = undefined;
+      getStore().dispatch(setIsEditWhileRun(false));
     }
   } else {
     this.executingCode = this.getCode().trim();

apps/src/lib/tools/jsdebugger/DebugButtons.jsx

@@ -13,6 +13,7 @@ export default connect(
   state => ({
     isAttached: selectors.isAttached(state),
     isPaused: selectors.isPaused(state),
+    isEditWhileRun: selectors.isEditWhileRun(state),
     canRunNext: selectors.canRunNext(state)
   }),
   {
@@ -33,6 +34,7 @@ export default connect(
       stepOver: PropTypes.func.isRequired,
       togglePause: PropTypes.func.isRequired,
       isPaused: PropTypes.bool.isRequired,
+      isEditWhileRun: PropTypes.bool.isRequired,
       isAttached: PropTypes.bool.isRequired,
       canRunNext: PropTypes.bool.isRequired
     };
@@ -76,7 +78,7 @@ export default connect(
     };
 
     render() {
-      const {isAttached, isPaused, canRunNext} = this.props;
+      const {isAttached, isPaused, canRunNext, isEditWhileRun} = this.props;
       return (
         <div
           id="debug-commands"
@@ -122,7 +124,8 @@ export default connect(
               id="stepOverButton"
               className="debugger_button"
               onClick={this.stepOver}
-              disabled={!isPaused || !isAttached}
+              disabled={!isPaused || !isAttached || isEditWhileRun}
+              title={isEditWhileRun ? i18n.editDuringRunMessage() : undefined}
             >
               <img
                 src="/blockly/media/1x1.gif"
@@ -136,7 +139,8 @@ export default connect(
               id="stepOutButton"
               className="debugger_button"
               onClick={this.stepOut}
-              disabled={!isPaused || !isAttached}
+              disabled={!isPaused || !isAttached || isEditWhileRun}
+              title={isEditWhileRun ? i18n.editDuringRunMessage() : undefined}
             >
               <img
                 src="/blockly/media/1x1.gif"
@@ -152,7 +156,8 @@ export default connect(
               id="stepInButton"
               className="debugger_button"
               onClick={this.stepIn}
-              disabled={!isPaused && isAttached}
+              disabled={(!isPaused && isAttached) || isEditWhileRun}
+              title={isEditWhileRun ? i18n.editDuringRunMessage() : undefined}
             >
               <img
                 src="/blockly/media/1x1.gif"

apps/src/lib/tools/jsdebugger/JsDebugger.jsx

@@ -110,6 +110,7 @@ class JsDebugger extends React.Component {
     isDebuggerPaused: PropTypes.bool.isRequired,
     isDebuggingSprites: PropTypes.bool.isRequired,
     isRunning: PropTypes.bool.isRequired,
+    isEditWhileRun: PropTypes.bool.isRequired,
     stepSpeed: PropTypes.number.isRequired,
     isOpen: PropTypes.bool.isRequired,
     isAttached: PropTypes.bool.isRequired,
@@ -461,7 +462,7 @@ class JsDebugger extends React.Component {
 
   render() {
     const {appType, isAttached, canRunNext, isRunning} = this.props;
-    const hasFocus = this.props.isDebuggerPaused;
+    const hasFocus = this.props.isDebuggerPaused && !this.props.isEditWhileRun;
 
     const canShowDebugSprites = appType === 'gamelab';
 
@@ -657,6 +658,7 @@ export default connect(
     debugSlider: !!state.pageConstants.showDebugSlider,
     appType: state.pageConstants.appType,
     isRunning: state.runState.isRunning,
+    isEditWhileRun: state.runState.isEditWhileRun,
     isDebuggerPaused: state.runState.isDebuggerPaused,
     isDebuggingSprites: state.runState.isDebuggingSprites,
     stepSpeed: state.runState.stepSpeed,

apps/src/lib/tools/jsdebugger/redux.js

@@ -47,6 +47,10 @@ export function isPaused(state) {
   return state.runState.isDebuggerPaused;
 }
 
+export function isEditWhileRun(state) {
+  return state.runState.isEditWhileRun;
+}
+
 function getObserver(state) {
   return getRoot(state).observer;
 }
@@ -83,6 +87,7 @@ export const selectors = {
   getCommandHistory,
   getJSInterpreter,
   isPaused,
+  isEditWhileRun,
   isAttached,
   canRunNext,
   getLogOutput,

apps/src/redux/runState.js

@@ -4,6 +4,7 @@
 import _ from 'lodash';
 
 const SET_IS_RUNNING = 'runState/SET_IS_RUNNING';
+const SET_IS_EDIT_WHILE_RUN = 'runState/SET_IS_EDIT_WHILE_RUN';
 const SET_IS_DEBUGGER_PAUSED = 'runState/SET_IS_DEBUGGER_PAUSED';
 const SET_STEP_SPEED = 'runState/SET_STEP_SPEED';
 const SET_AWAITING_CONTAINED_RESPONSE =
@@ -12,6 +13,7 @@ const SET_IS_DEBUGGING_SPRITES = 'runState/SET_IS_DEBUGGING_SPRITES';
 
 const initialState = {
   isRunning: false,
+  isEditWhileRun: false,
   isDebuggerPaused: false,
   nextStep: null,
   stepSpeed: 1,
@@ -36,6 +38,12 @@ export default function reducer(state, action) {
     });
   }
 
+  if (action.type === SET_IS_EDIT_WHILE_RUN) {
+    return _.assign({}, state, {
+      isEditWhileRun: action.isEditWhileRun
+    });
+  }
+
   if (action.type === SET_IS_DEBUGGER_PAUSED) {
     return _.assign({}, state, {
       isRunning: action.isDebuggerPaused ? true : state.isRunning,
@@ -79,6 +87,14 @@ export const setIsRunning = isRunning => ({
   isRunning: isRunning
 });
 
+/**
+ * @param {boolean} isRunning - Whether the app is currently running or not.
+ */
+export const setIsEditWhileRun = isEditWhileRun => ({
+  type: SET_IS_EDIT_WHILE_RUN,
+  isEditWhileRun: isEditWhileRun
+});
+
 /**
  * @param {boolean} isDebuggerPaused - Whether the app is currently paused in the
  *   debugger