From 51831852bef2a48cd1781bda45b9ff0e5e48acfd Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 17 Jul 2017 16:13:59 -0400 Subject: [PATCH 01/10] Line error highlight styling --- client/modules/IDE/components/Editor.jsx | 2 ++ client/styles/components/_editor.scss | 25 ++++++++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 585f3772..97637bfc 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -105,6 +105,8 @@ class Editor extends React.Component { this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`; this._cm.setOption('indentWithTabs', this.props.isTabIndent); this._cm.setOption('tabSize', this.props.indentationAmount); + + this._cm.addLineClass(1, null, 'line-runtime-error'); } componentWillUpdate(nextProps) { diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index ad455a00..0d244103 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -27,6 +27,31 @@ padding-left: #{5 / $base-font-size}rem; } +.CodeMirror-activeline-background { + background-color: rgba(0,0,0,0.025) !important; +} + +.CodeMirror-linebackground { + +} + +.line-runtime-error { + background-color: #ffaaaa !important; + border-radius: 5px; +} + +.CodeMirror-guttermarker-subtle { + +} + +.CodeMirror-foldgutter-folded { + +} + +.CodeMirror-foldgutter-open { + +} + .CodeMirror-gutter-wrapper { right: 100%; top: 0; From 0faccbbc0473d4021d155e536e23f73522db9cb3 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 17 Jul 2017 17:27:21 -0400 Subject: [PATCH 02/10] Hacky runtime error highlight working --- client/modules/IDE/components/Editor.jsx | 23 ++++++++++++++++++++--- client/modules/IDE/pages/IDEView.jsx | 1 + 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 97637bfc..2507dd3e 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -105,8 +105,6 @@ class Editor extends React.Component { this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`; this._cm.setOption('indentWithTabs', this.props.isTabIndent); this._cm.setOption('tabSize', this.props.indentationAmount); - - this._cm.addLineClass(1, null, 'line-runtime-error'); } componentWillUpdate(nextProps) { @@ -142,6 +140,20 @@ class Editor extends React.Component { if (this.props.theme !== prevProps.theme) { this._cm.setOption('theme', `p5-${this.props.theme}`); } + for (let i = 0; i < 1000; i += 1) { + this._cm.removeLineClass(i, 'background', 'line-runtime-error'); + } + this.props.consoleEvents.forEach((consoleEvent) => { + if (consoleEvent.method === 'error') { + console.log(consoleEvent.arguments); + console.log(consoleEvent.source); + + const n = consoleEvent.arguments.replace(')', '').split(' '); + const lineNumber = parseInt(n[n.length - 1], 10) - 1; + console.log(lineNumber); + this._cm.addLineClass(lineNumber, 'background', 'line-runtime-error'); + } + }); } componentWillUnmount() { @@ -278,6 +290,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, @@ -313,7 +329,8 @@ Editor.propTypes = { }; Editor.defaultProps = { - isUserOwner: false + isUserOwner: false, + consoleEvents: [] }; export default Editor; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index fb957d27..4a119955 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -329,6 +329,7 @@ class IDEView extends React.Component { collapseSidebar={this.props.collapseSidebar} isUserOwner={this.isUserOwner()} clearConsole={this.props.clearConsole} + consoleEvents={this.props.console} /> Date: Wed, 26 Jul 2017 14:46:59 -0400 Subject: [PATCH 03/10] Runtime error line highlight dissappears on lint message update --- client/constants.js | 3 ++ client/modules/IDE/actions/ide.js | 12 +++++ client/modules/IDE/components/Editor.jsx | 60 ++++++++++++++---------- client/modules/IDE/pages/IDEView.jsx | 10 +++- client/modules/IDE/reducers/ide.js | 7 ++- 5 files changed, 65 insertions(+), 27 deletions(-) diff --git a/client/constants.js b/client/constants.js index 149dc79c..52e6f709 100644 --- a/client/constants.js +++ b/client/constants.js @@ -117,3 +117,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 HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING'; +export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING'; diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index 4f5c0662..691d08dc 100644 --- a/client/modules/IDE/actions/ide.js +++ b/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 + }; +} diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 2507dd3e..512dea96 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -38,6 +38,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); @@ -52,17 +53,7 @@ class Editor extends React.Component { gutters: ['CodeMirror-lint-markers'], keyMap: 'sublime', 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: this.onUpdateLinting, options: { 'asi': true, 'eqeqeq': false, @@ -140,26 +131,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 (consoleEvent.method === 'error') { - console.log(consoleEvent.arguments); - console.log(consoleEvent.source); - - const n = consoleEvent.arguments.replace(')', '').split(' '); - const lineNumber = parseInt(n[n.length - 1], 10) - 1; - console.log(lineNumber); - this._cm.addLineClass(lineNumber, '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() { 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)) { @@ -325,12 +334,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; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 4a119955..01dcf984 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -330,6 +330,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} /> { @@ -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; } From 4d3e998f333ac38024f91e505945396486c573ae Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Wed, 26 Jul 2017 15:17:05 -0400 Subject: [PATCH 04/10] Fix broken accessibility feature --- client/modules/IDE/components/Editor.jsx | 34 +++++++++++------------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 512dea96..9379bd94 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -38,7 +38,18 @@ class Editor extends React.Component { constructor(props) { super(props); this.tidyCode = this.tidyCode.bind(this); - this.onUpdateLinting = this.onUpdateLinting.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); } componentDidMount() { this.beep = new Audio(beepUrl); @@ -53,7 +64,10 @@ class Editor extends React.Component { gutters: ['CodeMirror-lint-markers'], keyMap: 'sublime', lint: { - onUpdateLinting: this.onUpdateLinting, + onUpdateLinting: ((annotations) => { + this.props.hideRuntimeErrorWarning(); + this.updateLintingMessageAccessibility(annotations); + }), options: { 'asi': true, 'eqeqeq': false, @@ -153,22 +167,6 @@ class Editor extends React.Component { 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)) { From 1bb0efdac87110dee0465e1160c900eb4877a3fb Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 17 Jul 2017 16:13:59 -0400 Subject: [PATCH 05/10] Line error highlight styling --- client/modules/IDE/components/Editor.jsx | 2 ++ client/styles/components/_editor.scss | 25 ++++++++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 0d365c97..82ca2200 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -118,6 +118,8 @@ class Editor extends React.Component { this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`; this._cm.setOption('indentWithTabs', this.props.isTabIndent); this._cm.setOption('tabSize', this.props.indentationAmount); + + this._cm.addLineClass(1, null, 'line-runtime-error'); } componentWillUpdate(nextProps) { diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index 194264d0..780b19a2 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -27,6 +27,31 @@ padding-left: #{5 / $base-font-size}rem; } +.CodeMirror-activeline-background { + background-color: rgba(0,0,0,0.025) !important; +} + +.CodeMirror-linebackground { + +} + +.line-runtime-error { + background-color: #ffaaaa !important; + border-radius: 5px; +} + +.CodeMirror-guttermarker-subtle { + +} + +.CodeMirror-foldgutter-folded { + +} + +.CodeMirror-foldgutter-open { + +} + .CodeMirror-gutter-wrapper { right: 100%; top: 0; From b5f9879c443efe5c77043f281fb97c2087501891 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 17 Jul 2017 17:27:21 -0400 Subject: [PATCH 06/10] Hacky runtime error highlight working --- client/modules/IDE/components/Editor.jsx | 23 ++++++++++++++++++++--- client/modules/IDE/pages/IDEView.jsx | 1 + 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 82ca2200..3091158b 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -118,8 +118,6 @@ class Editor extends React.Component { this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`; this._cm.setOption('indentWithTabs', this.props.isTabIndent); this._cm.setOption('tabSize', this.props.indentationAmount); - - this._cm.addLineClass(1, null, 'line-runtime-error'); } componentWillUpdate(nextProps) { @@ -155,6 +153,20 @@ class Editor extends React.Component { if (this.props.theme !== prevProps.theme) { this._cm.setOption('theme', `p5-${this.props.theme}`); } + for (let i = 0; i < 1000; i += 1) { + this._cm.removeLineClass(i, 'background', 'line-runtime-error'); + } + this.props.consoleEvents.forEach((consoleEvent) => { + if (consoleEvent.method === 'error') { + console.log(consoleEvent.arguments); + console.log(consoleEvent.source); + + const n = consoleEvent.arguments.replace(')', '').split(' '); + const lineNumber = parseInt(n[n.length - 1], 10) - 1; + console.log(lineNumber); + this._cm.addLineClass(lineNumber, 'background', 'line-runtime-error'); + } + }); } componentWillUnmount() { @@ -290,6 +302,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, @@ -325,7 +341,8 @@ Editor.propTypes = { }; Editor.defaultProps = { - isUserOwner: false + isUserOwner: false, + consoleEvents: [] }; export default Editor; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index ca6d22d3..62ec3269 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -341,6 +341,7 @@ class IDEView extends React.Component { collapseSidebar={this.props.collapseSidebar} isUserOwner={this.isUserOwner()} clearConsole={this.props.clearConsole} + consoleEvents={this.props.console} /> Date: Wed, 26 Jul 2017 14:46:59 -0400 Subject: [PATCH 07/10] Runtime error line highlight dissappears on lint message update --- client/constants.js | 3 ++ client/modules/IDE/actions/ide.js | 12 +++++ client/modules/IDE/components/Editor.jsx | 60 ++++++++++++++---------- client/modules/IDE/pages/IDEView.jsx | 10 +++- client/modules/IDE/reducers/ide.js | 7 ++- 5 files changed, 65 insertions(+), 27 deletions(-) diff --git a/client/constants.js b/client/constants.js index 81548d52..9eb0dfea 100644 --- a/client/constants.js +++ b/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'; diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index 0e8fa3ae..66146f00 100644 --- a/client/modules/IDE/actions/ide.js +++ b/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 + }; +} diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 3091158b..d93fc2d8 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/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) => { - 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: this.onUpdateLinting, 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 (consoleEvent.method === 'error') { - console.log(consoleEvent.arguments); - console.log(consoleEvent.source); - - const n = consoleEvent.arguments.replace(')', '').split(' '); - const lineNumber = parseInt(n[n.length - 1], 10) - 1; - console.log(lineNumber); - this._cm.addLineClass(lineNumber, '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() { 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; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 62ec3269..92cd06d5 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/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} /> { @@ -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; } From bca73885b287a01420d426d8bbca3ed0dc426bd2 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Wed, 26 Jul 2017 15:17:05 -0400 Subject: [PATCH 08/10] Fix broken accessibility feature --- client/modules/IDE/components/Editor.jsx | 34 +++++++++++------------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index d93fc2d8..f97cbfa6 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -49,7 +49,18 @@ class Editor extends React.Component { constructor(props) { super(props); this.tidyCode = this.tidyCode.bind(this); - this.onUpdateLinting = this.onUpdateLinting.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); } componentDidMount() { this.beep = new Audio(beepUrl); @@ -65,7 +76,10 @@ class Editor extends React.Component { keyMap: 'sublime', highlightSelectionMatches: true, // highlight current search match lint: { - onUpdateLinting: this.onUpdateLinting, + onUpdateLinting: ((annotations) => { + this.props.hideRuntimeErrorWarning(); + this.updateLintingMessageAccessibility(annotations); + }), options: { 'asi': true, 'eqeqeq': false, @@ -166,22 +180,6 @@ class Editor extends React.Component { 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)) { From 0989ff29eb94d7824a4868cc369237461a552b18 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 12 Oct 2017 15:38:02 -0400 Subject: [PATCH 09/10] fix other merge conflict errors --- client/constants.js | 3 --- client/modules/IDE/components/Editor.jsx | 2 +- client/modules/IDE/pages/IDEView.jsx | 5 +---- client/styles/components/_editor.scss | 25 ------------------------ 4 files changed, 2 insertions(+), 33 deletions(-) diff --git a/client/constants.js b/client/constants.js index b85e5009..7ef4983c 100644 --- a/client/constants.js +++ b/client/constants.js @@ -130,6 +130,3 @@ 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'; - -export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING'; -export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING'; diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index befb4efc..8414afbd 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -69,7 +69,7 @@ class Editor extends React.Component { this.findNext = this.findNext.bind(this); this.findPrev = this.findPrev.bind(this); } - + componentDidMount() { this.beep = new Audio(beepUrl); this.widgets = []; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 8e888178..5df93c2e 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -690,13 +690,10 @@ IDEView.propTypes = { persistState: PropTypes.func.isRequired, showHelpModal: PropTypes.func.isRequired, hideHelpModal: PropTypes.func.isRequired, -<<<<<<< HEAD showRuntimeErrorWarning: PropTypes.func.isRequired, - hideRuntimeErrorWarning: PropTypes.func.isRequired -======= + hideRuntimeErrorWarning: PropTypes.func.isRequired, startSketch: PropTypes.func.isRequired, startAccessibleSketch: PropTypes.func.isRequired ->>>>>>> master }; function mapStateToProps(state) { diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index 36c5fa07..bf317fb0 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -27,31 +27,6 @@ pre.CodeMirror-line { padding-left: #{5 / $base-font-size}rem; } -.CodeMirror-activeline-background { - background-color: rgba(0,0,0,0.025) !important; -} - -.CodeMirror-linebackground { - -} - -.line-runtime-error { - background-color: #ffaaaa !important; - border-radius: 5px; -} - -.CodeMirror-guttermarker-subtle { - -} - -.CodeMirror-foldgutter-folded { - -} - -.CodeMirror-foldgutter-open { - -} - .CodeMirror-gutter-wrapper { right: 100%; top: 0; From 39df7512c120f1d1d6e9293b79760822ab45bfc8 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 12 Oct 2017 17:13:27 -0400 Subject: [PATCH 10/10] update highlighted line styles --- client/styles/components/_editor.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index e3678ecc..ef380f30 100644 --- a/client/styles/components/_editor.scss +++ b/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%;