Merge branch 'zrispo-feature-runtime-error-highlight'

client/constants.js

@@ -126,4 +126,7 @@ 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 HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING';
+export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING';
 export const SET_ASSETS = 'SET_ASSETS';

client/modules/IDE/actions/ide.js

@@ -235,6 +235,18 @@ export function hideHelpModal() {
   };
 }
 
+export function hideRuntimeErrorWarning() {
+  return {
+    type: ActionTypes.HIDE_RUNTIME_ERROR_WARNING
+  };
+}
+
+export function showRuntimeErrorWarning() {
+  return {
+    type: ActionTypes.SHOW_RUNTIME_ERROR_WARNING
+  };
+}
+
 export function startSketch() {
   return (dispatch) => {
     dispatch(clearConsole());
@@ -256,4 +268,3 @@ export function stopSketch() {
     dispatch(stopVisualSketch());
   };
 }
-

client/modules/IDE/components/Editor.jsx

@@ -53,10 +53,23 @@ class Editor extends React.Component {
   constructor(props) {
     super(props);
     this.tidyCode = this.tidyCode.bind(this);
+
+    this.updateLintingMessageAccessibility = 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);
     this.showFind = this.showFind.bind(this);
     this.findNext = this.findNext.bind(this);
     this.findPrev = this.findPrev.bind(this);
   }
+
   componentDidMount() {
     this.beep = new Audio(beepUrl);
     this.widgets = [];
@@ -73,17 +86,10 @@ class Editor extends React.Component {
       keyMap: 'sublime',
       highlightSelectionMatches: true, // highlight current search match
       lint: {
-        onUpdateLinting: 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),
+        onUpdateLinting: ((annotations) => {
+          this.props.hideRuntimeErrorWarning();
+          this.updateLintingMessageAccessibility(annotations);
+        }),
         options: {
           'asi': true,
           'eqeqeq': false,
@@ -93,7 +99,6 @@ class Editor extends React.Component {
       }
     });
 
-
     this._cm.setOption('extraKeys', {
       [`${metaKey}-Enter`]: () => null,
       [`Shift-${metaKey}-Enter`]: () => null,
@@ -171,6 +176,22 @@ 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');
+    }
+    if (this.props.runtimeErrorWarningVisible) {
+      this.props.consoleEvents.forEach((consoleEvent) => {
+        if (consoleEvent.method === 'error') {
+          const n = consoleEvent.arguments.replace(')', '').split(' ');
+          const lineNumber = parseInt(n[n.length - 1], 10) - 1;
+          this._cm.addLineClass(lineNumber, 'background', 'line-runtime-error');
+        }
+      });
+    }
   }
 
   componentWillUnmount() {
@@ -301,6 +322,10 @@ Editor.propTypes = {
     message: PropTypes.string.isRequired,
     id: PropTypes.number.isRequired
   })).isRequired,
+  consoleEvents: PropTypes.arrayOf(PropTypes.shape({
+    method: PropTypes.string.isRequired,
+    args: PropTypes.arrayOf(PropTypes.string)
+  })),
   updateLintMessage: PropTypes.func.isRequired,
   clearLintMessage: PropTypes.func.isRequired,
   indentationAmount: PropTypes.number.isRequired,
@@ -332,11 +357,15 @@ Editor.propTypes = {
   expandSidebar: PropTypes.func.isRequired,
   isUserOwner: PropTypes.bool,
   clearConsole: PropTypes.func.isRequired,
+  showRuntimeErrorWarning: PropTypes.func.isRequired,
+  hideRuntimeErrorWarning: PropTypes.func.isRequired,
+  runtimeErrorWarningVisible: PropTypes.bool.isRequired,
   provideController: PropTypes.func.isRequired
 };
 
 Editor.defaultProps = {
-  isUserOwner: false
+  isUserOwner: false,
+  consoleEvents: [],
 };
 
 export default Editor;

client/modules/IDE/pages/IDEView.jsx

@@ -340,6 +340,10 @@ class IDEView extends React.Component {
                   collapseSidebar={this.props.collapseSidebar}
                   isUserOwner={this.isUserOwner()}
                   clearConsole={this.props.clearConsole}
+                  consoleEvents={this.props.console}
+                  showRuntimeErrorWarning={this.props.showRuntimeErrorWarning}
+                  hideRuntimeErrorWarning={this.props.hideRuntimeErrorWarning}
+                  runtimeErrorWarningVisible={this.props.ide.runtimeErrorWarningVisible}
                   provideController={(ctl) => { this.cmController = ctl; }}
                 />
                 <Console
@@ -568,7 +572,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,
   project: PropTypes.shape({
@@ -685,6 +690,8 @@ IDEView.propTypes = {
   persistState: PropTypes.func.isRequired,
   showHelpModal: PropTypes.func.isRequired,
   hideHelpModal: PropTypes.func.isRequired,
+  showRuntimeErrorWarning: PropTypes.func.isRequired,
+  hideRuntimeErrorWarning: PropTypes.func.isRequired,
   startSketch: PropTypes.func.isRequired,
   startAccessibleSketch: PropTypes.func.isRequired
 };

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;
   }

client/styles/components/_editor.scss

@@ -278,6 +278,17 @@ pre.CodeMirror-line {
   font-family: serif;
 }
 
+
+.line-runtime-error + .CodeMirror-activeline-gutter {
+  background-color: rgb(255, 95, 82);
+  opacity: 0.3;
+}
+
+.line-runtime-error {
+  background-color: rgb(255, 95, 82) !important;
+  opacity: 0.3;
+}
+
 .editor-holder {
   height: calc(100% - #{29 / $base-font-size}rem);
   width: 100%;