From f465caf26dda89d03948365ecb8cdf21101a28d6 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 4 May 2020 16:29:57 +0200 Subject: [PATCH 1/7] allow multiple highlight per plugin --- src/app/editor/SourceHighlighters.js | 25 +++++++++++--- src/app/editor/editor.js | 12 ++++++- src/app/editor/sourceHighlighter.js | 3 +- test-browser/tests/editor.test.js | 50 ++++++++++++++++++++++++++++ 4 files changed, 84 insertions(+), 6 deletions(-) diff --git a/src/app/editor/SourceHighlighters.js b/src/app/editor/SourceHighlighters.js index bf44e50c27..7560d2832b 100644 --- a/src/app/editor/SourceHighlighters.js +++ b/src/app/editor/SourceHighlighters.js @@ -12,16 +12,33 @@ class SourceHighlighters { highlight (position, filePath, hexColor, from) { try { - if (!this.highlighters[from]) this.highlighters[from] = new SourceHighlighter() - this.highlighters[from].currentSourceLocation(null) - this.highlighters[from].currentSourceLocationFromfileName(position, filePath, hexColor) + if (!this.highlighters[from]) this.highlighters[from] = [] + const sourceHighlight = new SourceHighlighter() + sourceHighlight.currentSourceLocationFromfileName(position, filePath, hexColor) + this.highlighters[from].push(sourceHighlight) } catch (e) { throw e } } discardHighlight (from) { - if (this.highlighters[from]) this.highlighters[from].currentSourceLocation(null) + if (this.highlighters[from]) { + for (const index in this.highlighters[from]) this.highlighters[from][index].currentSourceLocation(null) + } + this.highlighters[from] = [] + } + + discardHighlightAt (line, filePath, from) { + if (this.highlighters[from]) { + for (const index in this.highlighters[from]) { + const highlight = this.highlighters[from][index] + if (highlight.source === filePath && + (highlight.position.start.line === line || highlight.position.end.line === line)) { + highlight.currentSourceLocation(null) + this.highlighters[from].splice(index, 1) + } + } + } } } diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js index f882e99a9e..369eee5a0e 100644 --- a/src/app/editor/editor.js +++ b/src/app/editor/editor.js @@ -46,7 +46,7 @@ const profile = { name: 'editor', description: 'service - editor', version: packageJson.version, - methods: ['highlight', 'discardHighlight', 'clearAnnotations', 'addAnnotation'] + methods: ['highlight', 'discardHighlight', 'discardHighlightAt', 'clearAnnotations', 'addAnnotation'] } class Editor extends Plugin { @@ -202,6 +202,16 @@ class Editor extends Plugin { this.sourceHighlighters.discardHighlight(from) } + discardHighlightAt (line, filePath) { + const { from } = this.currentRequest + this.sourceHighlighters.discardHighlightAt(line, filePath, from) + } + + currentHighlights () { + const { from } = this.currentRequest + return this.sourceHighlighters.currentHighlights(from) + } + setTheme (type) { this.editor.setTheme('ace/theme/' + this._themes[type]) } diff --git a/src/app/editor/sourceHighlighter.js b/src/app/editor/sourceHighlighter.js index 2bd6b2fb86..daec7811f1 100644 --- a/src/app/editor/sourceHighlighter.js +++ b/src/app/editor/sourceHighlighter.js @@ -13,6 +13,7 @@ class SourceHighlighter { fileManager: this._components.registry.get('filemanager').api, compilerArtefacts: this._components.registry.get('compilersartefacts').api } + this.position = null this.statementMarker = null this.fullLineMarker = null this.source = null @@ -61,7 +62,7 @@ class SourceHighlighter { this.statementMarker = this._deps.editor.addMarker(lineColumnPos, this.source, css.highlightcode.className + ' ' + css.customBackgroundColor.className) this._deps.editor.scrollToLine(lineColumnPos.start.line, true, true, function () {}) - + this.position = lineColumnPos if (lineColumnPos.start.line === lineColumnPos.end.line) { this.fullLineMarker = this._deps.editor.addMarker({ start: { diff --git a/test-browser/tests/editor.test.js b/test-browser/tests/editor.test.js index 2cc2e3fd21..bd2e04769e 100644 --- a/test-browser/tests/editor.test.js +++ b/test-browser/tests/editor.test.js @@ -70,6 +70,12 @@ module.exports = { .checkElementStyle('.ace_comment.ace_doc', 'color', aceThemes.dark.comment) .checkElementStyle('.ace_function', 'color', aceThemes.dark.function) .checkElementStyle('.ace_variable', 'color', aceThemes.dark.variable) + }, + + 'Should highlight source code': function (browser) { + browser.addFile('browser/sourcehighlight.js', sourcehighlightScript) + .switchFile('browser/sourcehighlight.js') + .executeScript('remix.exeCurrent()') .end() }, @@ -90,3 +96,47 @@ var aceThemes = { variable: 'rgb(153, 119, 68)' } } + +const sourcehighlightScript = ` +(async () => { + try { + const pos = { + start: { + line: 32, + column: 3 + }, + end: { + line: 32, + column: 20 + } + } + await remix.call('editor', 'highlight', pos, 'browser/3_Ballot.sol') + + const pos2 = { + start: { + line: 40, + column: 3 + }, + end: { + line: 40, + column: 20 + } + } + await remix.call('editor', 'highlight', pos2, 'browser/3_Ballot.sol') + + const pos3 = { + start: { + line: 50, + column: 3 + }, + end: { + line: 50, + column: 20 + } + } + await remix.call('editor', 'highlight', pos3, 'browser/3_Ballot.sol') + } catch (e) { + console.log(e.message) + } +})() +` From 3373887f61d320ce1594ed5faf7ec917727d265b Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Wed, 6 May 2020 16:10:26 +0000 Subject: [PATCH 2/7] Added line class to hightlighter --- src/app/editor/sourceHighlighter.js | 2 +- test-browser/commands/scrollUp.js | 25 ++++++++ test-browser/tests/editor.test.js | 97 ++++++++++++++++------------- 3 files changed, 79 insertions(+), 45 deletions(-) create mode 100644 test-browser/commands/scrollUp.js diff --git a/src/app/editor/sourceHighlighter.js b/src/app/editor/sourceHighlighter.js index daec7811f1..b6582e1fa9 100644 --- a/src/app/editor/sourceHighlighter.js +++ b/src/app/editor/sourceHighlighter.js @@ -60,7 +60,7 @@ class SourceHighlighter { } ` - this.statementMarker = this._deps.editor.addMarker(lineColumnPos, this.source, css.highlightcode.className + ' ' + css.customBackgroundColor.className) + this.statementMarker = this._deps.editor.addMarker(lineColumnPos, this.source, css.highlightcode.className + ' ' + css.customBackgroundColor.className + ' ' + `highlightLine${lineColumnPos.start.line}`) this._deps.editor.scrollToLine(lineColumnPos.start.line, true, true, function () {}) this.position = lineColumnPos if (lineColumnPos.start.line === lineColumnPos.end.line) { diff --git a/test-browser/commands/scrollUp.js b/test-browser/commands/scrollUp.js new file mode 100644 index 0000000000..28d5be2db2 --- /dev/null +++ b/test-browser/commands/scrollUp.js @@ -0,0 +1,25 @@ +const EventEmitter = require('events') + +class ScrollUp extends EventEmitter { + command (target, height) { + this.api.perform((done) => { + _scrollUp(this.api, target, height, () => { + done() + this.emit('complete') + }) + }) + return this + } +} + +function _scrollUp (browser, target, height, cb) { + browser.execute(function (target, height) { + const element = document.querySelector(target) + + element.scrollTop = element.scrollHeight - height + }, [target, height], function () { + cb() + }) +} + +module.exports = ScrollUp diff --git a/test-browser/tests/editor.test.js b/test-browser/tests/editor.test.js index bd2e04769e..47ddd6e34c 100644 --- a/test-browser/tests/editor.test.js +++ b/test-browser/tests/editor.test.js @@ -73,9 +73,16 @@ module.exports = { }, 'Should highlight source code': function (browser) { - browser.addFile('browser/sourcehighlight.js', sourcehighlightScript) + browser.addFile('sourcehighlight.js', sourcehighlightScript) .switchFile('browser/sourcehighlight.js') .executeScript('remix.exeCurrent()') + .scrollUp('*[data-id="editorInput"]', 100) + .pause(5000) + .scrollUp('.ace_scroller', 100) + .waitForElementPresent('.highlightLine32') + .checkElementStyle('.highlightLine32', 'background-color', 'rgb(8, 108, 181)') + .waitForElementPresent('.highlightLine40') + .checkElementStyle('.highlightLine40', 'background-color', 'rgb(8, 108, 181)') .end() }, @@ -97,46 +104,48 @@ var aceThemes = { } } -const sourcehighlightScript = ` -(async () => { - try { - const pos = { - start: { - line: 32, - column: 3 - }, - end: { - line: 32, - column: 20 - } - } - await remix.call('editor', 'highlight', pos, 'browser/3_Ballot.sol') - - const pos2 = { - start: { - line: 40, - column: 3 - }, - end: { - line: 40, - column: 20 - } - } - await remix.call('editor', 'highlight', pos2, 'browser/3_Ballot.sol') - - const pos3 = { - start: { - line: 50, - column: 3 - }, - end: { - line: 50, - column: 20 - } - } - await remix.call('editor', 'highlight', pos3, 'browser/3_Ballot.sol') - } catch (e) { - console.log(e.message) - } -})() -` +const sourcehighlightScript = { + content: ` + (async () => { + try { + const pos = { + start: { + line: 32, + column: 3 + }, + end: { + line: 32, + column: 20 + } + } + await remix.call('editor', 'highlight', pos, 'browser/3_Ballot.sol') + + const pos2 = { + start: { + line: 40, + column: 3 + }, + end: { + line: 40, + column: 20 + } + } + await remix.call('editor', 'highlight', pos2, 'browser/3_Ballot.sol') + + const pos3 = { + start: { + line: 50, + column: 3 + }, + end: { + line: 50, + column: 20 + } + } + await remix.call('editor', 'highlight', pos3, 'browser/3_Ballot.sol') + } catch (e) { + console.log(e.message) + } + })() + ` +} \ No newline at end of file From 6b5dd7475567321dc4c6343997260618de9e89b2 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 7 May 2020 03:28:59 +0000 Subject: [PATCH 3/7] Editor scroll --- test-browser/commands/editorScroll.js | 21 +++++++++++++++++++++ test-browser/commands/scrollUp.js | 25 ------------------------- test-browser/tests/editor.test.js | 6 +++--- 3 files changed, 24 insertions(+), 28 deletions(-) create mode 100644 test-browser/commands/editorScroll.js delete mode 100644 test-browser/commands/scrollUp.js diff --git a/test-browser/commands/editorScroll.js b/test-browser/commands/editorScroll.js new file mode 100644 index 0000000000..7dd060d9c4 --- /dev/null +++ b/test-browser/commands/editorScroll.js @@ -0,0 +1,21 @@ +const EventEmitter = require('events') + +// fix for editor scroll +class ScrollEditor extends EventEmitter { + command (direction, numberOfTimes) { + const browser = this.api + + browser.waitForElementPresent('.ace_text-input') + for (let i=0; i { + done() + this.emit('complete') + }) + return this + } +} + +module.exports = ScrollEditor diff --git a/test-browser/commands/scrollUp.js b/test-browser/commands/scrollUp.js deleted file mode 100644 index 28d5be2db2..0000000000 --- a/test-browser/commands/scrollUp.js +++ /dev/null @@ -1,25 +0,0 @@ -const EventEmitter = require('events') - -class ScrollUp extends EventEmitter { - command (target, height) { - this.api.perform((done) => { - _scrollUp(this.api, target, height, () => { - done() - this.emit('complete') - }) - }) - return this - } -} - -function _scrollUp (browser, target, height, cb) { - browser.execute(function (target, height) { - const element = document.querySelector(target) - - element.scrollTop = element.scrollHeight - height - }, [target, height], function () { - cb() - }) -} - -module.exports = ScrollUp diff --git a/test-browser/tests/editor.test.js b/test-browser/tests/editor.test.js index 47ddd6e34c..dc16f464dd 100644 --- a/test-browser/tests/editor.test.js +++ b/test-browser/tests/editor.test.js @@ -76,13 +76,13 @@ module.exports = { browser.addFile('sourcehighlight.js', sourcehighlightScript) .switchFile('browser/sourcehighlight.js') .executeScript('remix.exeCurrent()') - .scrollUp('*[data-id="editorInput"]', 100) - .pause(5000) - .scrollUp('.ace_scroller', 100) + .editorScroll('down', 60) .waitForElementPresent('.highlightLine32') .checkElementStyle('.highlightLine32', 'background-color', 'rgb(8, 108, 181)') .waitForElementPresent('.highlightLine40') .checkElementStyle('.highlightLine40', 'background-color', 'rgb(8, 108, 181)') + .waitForElementPresent('.highlightLine50') + .checkElementStyle('.highlightLine50', 'background-color', 'rgb(8, 108, 181)') .end() }, From bff67fd7a4feb6fa3ab478942f384ab0bae59098 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 7 May 2020 03:34:38 +0000 Subject: [PATCH 4/7] Fixed linting error --- test-browser/commands/editorScroll.js | 2 +- test-browser/tests/editor.test.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test-browser/commands/editorScroll.js b/test-browser/commands/editorScroll.js index 7dd060d9c4..d2b08c9ebe 100644 --- a/test-browser/commands/editorScroll.js +++ b/test-browser/commands/editorScroll.js @@ -6,7 +6,7 @@ class ScrollEditor extends EventEmitter { const browser = this.api browser.waitForElementPresent('.ace_text-input') - for (let i=0; i Date: Mon, 11 May 2020 11:53:56 +0200 Subject: [PATCH 5/7] add more tests --- test-browser/commands/elementIsNotPresent.js | 15 +++++++ test-browser/commands/elementIsPresent.js | 15 +++++++ test-browser/tests/editor.test.js | 46 ++++++++++++++++++++ 3 files changed, 76 insertions(+) create mode 100644 test-browser/commands/elementIsNotPresent.js create mode 100644 test-browser/commands/elementIsPresent.js diff --git a/test-browser/commands/elementIsNotPresent.js b/test-browser/commands/elementIsNotPresent.js new file mode 100644 index 0000000000..babd14ceb0 --- /dev/null +++ b/test-browser/commands/elementIsNotPresent.js @@ -0,0 +1,15 @@ +const EventEmitter = require('events') + +class ElementIsPresent extends EventEmitter { + command (cssSelector) { + this.api.execute((cssSelector) => { + return !!document.querySelector(cssSelector) + }, [cssSelector], (result) => { + this.api.assert.equal(false, result.value, `${cssSelector} should not be present`) + this.emit('complete') + }) + return this + } +} + +module.exports = ElementIsPresent diff --git a/test-browser/commands/elementIsPresent.js b/test-browser/commands/elementIsPresent.js new file mode 100644 index 0000000000..834dffec3e --- /dev/null +++ b/test-browser/commands/elementIsPresent.js @@ -0,0 +1,15 @@ +const EventEmitter = require('events') + +class ElementIsPresent extends EventEmitter { + command (cssSelector) { + this.api.execute((cssSelector) => { + return !!document.querySelector(cssSelector) + }, [cssSelector], (result) => { + this.api.assert.equal(true, result.value, `${cssSelector} should be present`) + this.emit('complete') + }) + return this + } +} + +module.exports = ElementIsPresent diff --git a/test-browser/tests/editor.test.js b/test-browser/tests/editor.test.js index fa251edbc0..1d57de6288 100644 --- a/test-browser/tests/editor.test.js +++ b/test-browser/tests/editor.test.js @@ -83,6 +83,28 @@ module.exports = { .checkElementStyle('.highlightLine40', 'background-color', 'rgb(8, 108, 181)') .waitForElementPresent('.highlightLine50') .checkElementStyle('.highlightLine50', 'background-color', 'rgb(8, 108, 181)') + }, + + 'Should remove 1 highlight from source code': function (browser) { + browser.addFile('removeSourcehighlightScript.js', removeSourcehighlightScript) + .switchFile('browser/removeSourcehighlightScript.js') + .executeScript('remix.exeCurrent()') + .switchFile('browser/3_Ballot.sol') + .editorScroll('down', 60) + .elementIsNotPresent('.highlightLine32') + .checkElementStyle('.highlightLine40', 'background-color', 'rgb(8, 108, 181)') + .checkElementStyle('.highlightLine50', 'background-color', 'rgb(8, 108, 181)') + }, + + 'Should remove all highlights from source code': function (browser) { + browser.addFile('removeAllSourcehighlightScript.js', removeAllSourcehighlightScript) + .switchFile('browser/removeAllSourcehighlightScript.js') + .executeScript('remix.exeCurrent()') + .switchFile('browser/3_Ballot.sol') + .editorScroll('down', 60) + .elementIsNotPresent('.highlightLine32') + .elementIsNotPresent('.highlightLine40') + .elementIsNotPresent('.highlightLine50') .end() }, @@ -149,3 +171,27 @@ const sourcehighlightScript = { })() ` } + +const removeSourcehighlightScript = { + content: ` + (async () => { + try { + await remix.call('editor', 'discardHighlightAt', 32, 'browser/3_Ballot.sol') + } catch (e) { + console.log(e.message) + } + })() + ` +} + +const removeAllSourcehighlightScript = { + content: ` + (async () => { + try { + await remix.call('editor', 'discardHighlight') + } catch (e) { + console.log(e.message) + } + })() + ` +} From 4d12181c5212f471fa05b06ecc11c0f621b888fc Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 11 May 2020 12:18:45 +0200 Subject: [PATCH 6/7] remove uneeded fn --- src/app/editor/editor.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js index 369eee5a0e..ea1a3fa4b8 100644 --- a/src/app/editor/editor.js +++ b/src/app/editor/editor.js @@ -207,11 +207,6 @@ class Editor extends Plugin { this.sourceHighlighters.discardHighlightAt(line, filePath, from) } - currentHighlights () { - const { from } = this.currentRequest - return this.sourceHighlighters.currentHighlights(from) - } - setTheme (type) { this.editor.setTheme('ace/theme/' + this._themes[type]) } From c58503046a3cf49bf7e0a6afb8f6531bb48fd0d7 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 11 May 2020 16:09:09 +0200 Subject: [PATCH 7/7] remove uneeded commands --- test-browser/commands/elementIsNotPresent.js | 15 --------------- test-browser/commands/elementIsPresent.js | 15 --------------- test-browser/tests/editor.test.js | 8 ++++---- 3 files changed, 4 insertions(+), 34 deletions(-) delete mode 100644 test-browser/commands/elementIsNotPresent.js delete mode 100644 test-browser/commands/elementIsPresent.js diff --git a/test-browser/commands/elementIsNotPresent.js b/test-browser/commands/elementIsNotPresent.js deleted file mode 100644 index babd14ceb0..0000000000 --- a/test-browser/commands/elementIsNotPresent.js +++ /dev/null @@ -1,15 +0,0 @@ -const EventEmitter = require('events') - -class ElementIsPresent extends EventEmitter { - command (cssSelector) { - this.api.execute((cssSelector) => { - return !!document.querySelector(cssSelector) - }, [cssSelector], (result) => { - this.api.assert.equal(false, result.value, `${cssSelector} should not be present`) - this.emit('complete') - }) - return this - } -} - -module.exports = ElementIsPresent diff --git a/test-browser/commands/elementIsPresent.js b/test-browser/commands/elementIsPresent.js deleted file mode 100644 index 834dffec3e..0000000000 --- a/test-browser/commands/elementIsPresent.js +++ /dev/null @@ -1,15 +0,0 @@ -const EventEmitter = require('events') - -class ElementIsPresent extends EventEmitter { - command (cssSelector) { - this.api.execute((cssSelector) => { - return !!document.querySelector(cssSelector) - }, [cssSelector], (result) => { - this.api.assert.equal(true, result.value, `${cssSelector} should be present`) - this.emit('complete') - }) - return this - } -} - -module.exports = ElementIsPresent diff --git a/test-browser/tests/editor.test.js b/test-browser/tests/editor.test.js index 1d57de6288..92dcfb24ba 100644 --- a/test-browser/tests/editor.test.js +++ b/test-browser/tests/editor.test.js @@ -91,7 +91,7 @@ module.exports = { .executeScript('remix.exeCurrent()') .switchFile('browser/3_Ballot.sol') .editorScroll('down', 60) - .elementIsNotPresent('.highlightLine32') + .waitForElementNotPresent('.highlightLine32') .checkElementStyle('.highlightLine40', 'background-color', 'rgb(8, 108, 181)') .checkElementStyle('.highlightLine50', 'background-color', 'rgb(8, 108, 181)') }, @@ -102,9 +102,9 @@ module.exports = { .executeScript('remix.exeCurrent()') .switchFile('browser/3_Ballot.sol') .editorScroll('down', 60) - .elementIsNotPresent('.highlightLine32') - .elementIsNotPresent('.highlightLine40') - .elementIsNotPresent('.highlightLine50') + .waitForElementNotPresent('.highlightLine32') + .waitForElementNotPresent('.highlightLine40') + .waitForElementNotPresent('.highlightLine50') .end() },