Runtime error line highlight dissappears on lint message update

client/constants.js

@@ -127,3 +127,6 @@ export const CLEAR_PERSISTED_STATE = 'CLEAR_PERSISTED_STATE';
 export const SHOW_HELP_MODAL = 'SHOW_HELP_MODAL';
 export const HIDE_HELP_MODAL = 'HIDE_HELP_MODAL';
 export const SET_ASSETS = 'SET_ASSETS';
+
+export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING';
+export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING';

client/modules/IDE/actions/ide.js

@@ -233,3 +233,15 @@ export function hideHelpModal() {
     type: ActionTypes.HIDE_HELP_MODAL
   };
 }
+
+export function hideRuntimeErrorWarning() {
+  return {
+    type: ActionTypes.HIDE_RUNTIME_ERROR_WARNING
+  };
+}
+
+export function showRuntimeErrorWarning() {
+  return {
+    type: ActionTypes.SHOW_RUNTIME_ERROR_WARNING
+  };
+}

client/modules/IDE/components/Editor.jsx

@@ -49,6 +49,7 @@ class Editor extends React.Component {
   constructor(props) {
     super(props);
     this.tidyCode = this.tidyCode.bind(this);
+    this.onUpdateLinting = this.onUpdateLinting.bind(this);
   }
   componentDidMount() {
     this.beep = new Audio(beepUrl);
@@ -64,17 +65,7 @@ class Editor extends React.Component {
       keyMap: 'sublime',
       highlightSelectionMatches: true, // highlight current search match
       lint: {
-        onUpdateLinting: debounce((annotations) => {
+        onUpdateLinting: this.onUpdateLinting,
-          this.props.clearLintMessage();
-          annotations.forEach((x) => {
-            if (x.from.line > -1) {
-              this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
-            }
-          });
-          if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
-            this.beep.play();
-          }
-        }, 2000),
         options: {
           'asi': true,
           'eqeqeq': false,
@@ -153,26 +144,44 @@ class Editor extends React.Component {
     if (this.props.theme !== prevProps.theme) {
       this._cm.setOption('theme', `p5-${this.props.theme}`);
     }
+
+    if (prevProps.consoleEvents !== this.props.consoleEvents) {
+      this.props.showRuntimeErrorWarning();
+    }
     for (let i = 0; i < 1000; i += 1) {
       this._cm.removeLineClass(i, 'background', 'line-runtime-error');
     }
-    this.props.consoleEvents.forEach((consoleEvent) => {
+    if (this.props.runtimeErrorWarningVisible) {
-      if (consoleEvent.method === 'error') {
+      this.props.consoleEvents.forEach((consoleEvent) => {
-        console.log(consoleEvent.arguments);
+        if (consoleEvent.method === 'error') {
-        console.log(consoleEvent.source);
+          const n = consoleEvent.arguments.replace(')', '').split(' ');
-
+          const lineNumber = parseInt(n[n.length - 1], 10) - 1;
-        const n = consoleEvent.arguments.replace(')', '').split(' ');
+          this._cm.addLineClass(lineNumber, 'background', 'line-runtime-error');
-        const lineNumber = parseInt(n[n.length - 1], 10) - 1;
+        }
-        console.log(lineNumber);
+      });
-        this._cm.addLineClass(lineNumber, 'background', 'line-runtime-error');
+    }
-      }
-    });
   }
 
   componentWillUnmount() {
     this._cm = null;
   }
 
+  onUpdateLinting() {
+    this.props.hideRuntimeErrorWarning();
+
+    debounce((annotations) => {
+      this.props.clearLintMessage();
+      annotations.forEach((x) => {
+        if (x.from.line > -1) {
+          this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
+        }
+      });
+      if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
+        this.beep.play();
+      }
+    }, 2000);
+  }
+
   getFileMode(fileName) {
     let mode;
     if (fileName.match(/.+\.js$/i)) {
@@ -337,12 +346,15 @@ Editor.propTypes = {
   collapseSidebar: PropTypes.func.isRequired,
   expandSidebar: PropTypes.func.isRequired,
   isUserOwner: PropTypes.bool,
-  clearConsole: PropTypes.func.isRequired
+  clearConsole: PropTypes.func.isRequired,
+  showRuntimeErrorWarning: PropTypes.func.isRequired,
+  hideRuntimeErrorWarning: PropTypes.func.isRequired,
+  runtimeErrorWarningVisible: PropTypes.bool.isRequired,
 };
 
 Editor.defaultProps = {
   isUserOwner: false,
-  consoleEvents: []
+  consoleEvents: [],
 };
 
 export default Editor;

client/modules/IDE/pages/IDEView.jsx

@@ -342,6 +342,9 @@ class IDEView extends React.Component {
                   isUserOwner={this.isUserOwner()}
                   clearConsole={this.props.clearConsole}
                   consoleEvents={this.props.console}
+                  showRuntimeErrorWarning={this.props.showRuntimeErrorWarning}
+                  hideRuntimeErrorWarning={this.props.hideRuntimeErrorWarning}
+                  runtimeErrorWarningVisible={this.props.ide.runtimeErrorWarningVisible}
                 />
                 <Console
                   consoleEvents={this.props.console}
@@ -570,7 +573,8 @@ IDEView.propTypes = {
     previousPath: PropTypes.string.isRequired,
     justOpenedProject: PropTypes.bool.isRequired,
     errorType: PropTypes.string,
-    helpType: PropTypes.string
+    helpType: PropTypes.string,
+    runtimeErrorWarningVisible: PropTypes.bool.isRequired,
   }).isRequired,
   stopSketch: PropTypes.func.isRequired,
   startAccessibleOutput: PropTypes.func.isRequired,
@@ -688,7 +692,9 @@ IDEView.propTypes = {
   clearPersistedState: PropTypes.func.isRequired,
   persistState: PropTypes.func.isRequired,
   showHelpModal: PropTypes.func.isRequired,
-  hideHelpModal: PropTypes.func.isRequired
+  hideHelpModal: PropTypes.func.isRequired,
+  showRuntimeErrorWarning: PropTypes.func.isRequired,
+  hideRuntimeErrorWarning: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/ide.js

@@ -18,7 +18,8 @@ const initialState = {
   infiniteLoopMessage: '',
   justOpenedProject: false,
   previousPath: '/',
-  errorType: undefined
+  errorType: undefined,
+  runtimeErrorWarningVisible: true,
 };
 
 const ide = (state = initialState, action) => {
@@ -95,6 +96,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { helpType: action.helpType });
     case ActionTypes.HIDE_HELP_MODAL:
       return Object.assign({}, state, { helpType: undefined });
+    case ActionTypes.HIDE_RUNTIME_ERROR_WARNING:
+      return Object.assign({}, state, { runtimeErrorWarningVisible: false });
+    case ActionTypes.SHOW_RUNTIME_ERROR_WARNING:
+      return Object.assign({}, state, { runtimeErrorWarningVisible: true });
     default:
       return state;
   }