From b3ebc5f6fd0cb53c1d94202d343527ed91300f58 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Tue, 20 Oct 2020 12:34:14 +0200 Subject: [PATCH 1/7] better editor highlight --- apps/remix-ide/src/app/components/side-panel.js | 4 ++++ apps/remix-ide/src/app/editor/contextualListener.js | 8 +++++--- apps/remix-ide/src/assets/js/editor/darkTheme.js | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index b68f7430ad..1e520a71fd 100644 --- a/apps/remix-ide/src/app/components/side-panel.js +++ b/apps/remix-ide/src/app/components/side-panel.js @@ -91,6 +91,10 @@ export class SidePanel extends AbstractPanel { }) } + focus (name) { + this.emit('focusChanged', name) + } + removeView (profile) { super.removeView(profile) this.verticalIcons.unlinkContent(profile) diff --git a/apps/remix-ide/src/app/editor/contextualListener.js b/apps/remix-ide/src/app/editor/contextualListener.js index 67e6d52c05..f5e1ca2faf 100644 --- a/apps/remix-ide/src/app/editor/contextualListener.js +++ b/apps/remix-ide/src/app/editor/contextualListener.js @@ -123,14 +123,16 @@ class ContextualListener extends Plugin { } _highlightInternal (position, node) { + console.log('highlighting______', node) + if (node.nodeType == 'Block') return let lastCompilationResult = this._deps.compilersArtefacts['__last'] if (lastCompilationResult && lastCompilationResult.languageversion.indexOf('soljson') === 0) { let lineColumn = this._deps.offsetToLineColumnConverter.offsetToLineColumn(position, position.file, lastCompilationResult.getSourceCode().sources, lastCompilationResult.getAsts()) const css = csjs` .highlightref_fullLine { - position:absolute; - z-index:2; - opacity: 0.4; + position: absolute; + z-index: 2; + opacity: 0.1; background-color: var(--info); } ` diff --git a/apps/remix-ide/src/assets/js/editor/darkTheme.js b/apps/remix-ide/src/assets/js/editor/darkTheme.js index 2b1334cf2e..ace91156ed 100644 --- a/apps/remix-ide/src/assets/js/editor/darkTheme.js +++ b/apps/remix-ide/src/assets/js/editor/darkTheme.js @@ -50,7 +50,7 @@ ace.define("ace/theme/remixDark",["require","exports","module","ace/lib/dom"], f border: 1px solid #FCE94F;\ }\ .ace-remixDark .ace_marker-layer .ace_active-line {\ - background: #363950;\ + background: #262843;\ }\ .ace-remixDark .ace_gutter-active-line {\ background-color: #363950;\ From 49afe64b74bcdb4175375c5a7bf52d4711025530 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Wed, 28 Oct 2020 12:20:55 +0100 Subject: [PATCH 2/7] hide highlight on focus change --- .../src/app/components/side-panel.js | 1 + .../src/app/editor/SourceHighlighters.js | 30 +++++++++++++++++-- .../src/app/editor/contextualListener.js | 1 - apps/remix-ide/src/app/editor/editor.js | 5 +++- .../src/app/editor/sourceHighlighter.js | 1 + libs/remix-simulator/src/provider.js | 2 +- 6 files changed, 34 insertions(+), 6 deletions(-) diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index 1e520a71fd..541e2b1ed3 100644 --- a/apps/remix-ide/src/app/components/side-panel.js +++ b/apps/remix-ide/src/app/components/side-panel.js @@ -112,6 +112,7 @@ export class SidePanel extends AbstractPanel { async showContent (name) { super.showContent(name) this.renderHeader() + this.focus(name) } /** The header of the side panel */ diff --git a/apps/remix-ide/src/app/editor/SourceHighlighters.js b/apps/remix-ide/src/app/editor/SourceHighlighters.js index 7bd678148c..2accd543b3 100644 --- a/apps/remix-ide/src/app/editor/SourceHighlighters.js +++ b/apps/remix-ide/src/app/editor/SourceHighlighters.js @@ -1,9 +1,6 @@ 'use strict' const SourceHighlighter = require('./sourceHighlighter') -// EditorApi: -// - methods: ['highlight', 'discardHighlight'], - class SourceHighlighters { constructor () { @@ -28,6 +25,24 @@ class SourceHighlighters { } } + highlightAllFrom (from) { + try { + if (!this.highlighters[from]) return + const sourceHighlight = new SourceHighlighter() + for (const index in this.highlighters[from]) { + sourceHighlight.currentSourceLocationFromfileName( + this.highlighters[from][index].position, + this.highlighters[from][index].filePath, + this.highlighters[from][index].hexColor + ) + this.highlighters[from][index] = sourceHighlight + } + } catch (e) { + throw e + } + } + + discardHighlight (from) { if (this.highlighters[from]) { for (const index in this.highlighters[from]) this.highlighters[from][index].currentSourceLocation(null) @@ -35,6 +50,15 @@ class SourceHighlighters { this.highlighters[from] = [] } + hideHighlightsExcept (toStay) { + for (const highlighter in this.highlighters) { + for (const index in this.highlighters[highlighter]) { + this.highlighters[highlighter][index].currentSourceLocation(null) + } + this.highlightAllFrom(toStay) + } + } + discardHighlightAt (line, filePath, from) { if (this.highlighters[from]) { for (const index in this.highlighters[from]) { diff --git a/apps/remix-ide/src/app/editor/contextualListener.js b/apps/remix-ide/src/app/editor/contextualListener.js index f5e1ca2faf..5bacee4fc7 100644 --- a/apps/remix-ide/src/app/editor/contextualListener.js +++ b/apps/remix-ide/src/app/editor/contextualListener.js @@ -123,7 +123,6 @@ class ContextualListener extends Plugin { } _highlightInternal (position, node) { - console.log('highlighting______', node) if (node.nodeType == 'Block') return let lastCompilationResult = this._deps.compilersArtefacts['__last'] if (lastCompilationResult && lastCompilationResult.languageversion.indexOf('soljson') === 0) { diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js index 996eeedf17..553deb3d03 100644 --- a/apps/remix-ide/src/app/editor/editor.js +++ b/apps/remix-ide/src/app/editor/editor.js @@ -189,7 +189,6 @@ class Editor extends Plugin { this.editor.on('changeSession', () => { this._onChange() this.event.trigger('sessionSwitched', []) - this.editor.getSession().on('change', () => { this._onChange() this.event.trigger('contentChanged', []) @@ -197,6 +196,10 @@ class Editor extends Plugin { }) } + onActivation () { + this.on('sidePanel', 'focusChanged', (name) => this.sourceHighlighters.hideHighlightsExcept(name)) + } + highlight (position, filePath, hexColor) { const { from } = this.currentRequest this.sourceHighlighters.highlight(position, filePath, hexColor, from) diff --git a/apps/remix-ide/src/app/editor/sourceHighlighter.js b/apps/remix-ide/src/app/editor/sourceHighlighter.js index 8b45d3dc49..54121e8094 100644 --- a/apps/remix-ide/src/app/editor/sourceHighlighter.js +++ b/apps/remix-ide/src/app/editor/sourceHighlighter.js @@ -39,6 +39,7 @@ class SourceHighlighter { this.source = null if (lineColumnPos) { this.source = filePath + if (!this.source) this.source = this._deps.fileManager.currentFile() if (this._deps.fileManager.currentFile() !== this.source) { await this._deps.fileManager.open(this.source) this.source = this._deps.fileManager.currentFile() diff --git a/libs/remix-simulator/src/provider.js b/libs/remix-simulator/src/provider.js index 58c3c6fa9b..da85e71c96 100644 --- a/libs/remix-simulator/src/provider.js +++ b/libs/remix-simulator/src/provider.js @@ -41,7 +41,7 @@ class Provider { } sendAsync (payload, callback) { - log.info('payload method is ', payload.method) + //log.info('payload method is ', payload.method) const method = this.methods[payload.method] if (this.options.logDetails) { From 735730ae7632a2dcf617906c771497b47e874432 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Wed, 28 Oct 2020 14:35:23 +0100 Subject: [PATCH 3/7] added onDeactivation --- apps/remix-ide/src/app/editor/editor.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js index 553deb3d03..619915e994 100644 --- a/apps/remix-ide/src/app/editor/editor.js +++ b/apps/remix-ide/src/app/editor/editor.js @@ -200,6 +200,10 @@ class Editor extends Plugin { this.on('sidePanel', 'focusChanged', (name) => this.sourceHighlighters.hideHighlightsExcept(name)) } + onDeactivation () { + this.off('sidePanel', 'focusChanged') + } + highlight (position, filePath, hexColor) { const { from } = this.currentRequest this.sourceHighlighters.highlight(position, filePath, hexColor, from) From d2f964b36dd260cd2b97efc80b087c59ab322415 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Wed, 28 Oct 2020 17:00:40 +0100 Subject: [PATCH 4/7] corrected SourceHighlighter input --- apps/remix-ide/src/app/editor/SourceHighlighters.js | 4 ++-- apps/remix-ide/src/app/editor/sourceHighlighter.js | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/remix-ide/src/app/editor/SourceHighlighters.js b/apps/remix-ide/src/app/editor/SourceHighlighters.js index 2accd543b3..0d212e74b7 100644 --- a/apps/remix-ide/src/app/editor/SourceHighlighters.js +++ b/apps/remix-ide/src/app/editor/SourceHighlighters.js @@ -32,8 +32,8 @@ class SourceHighlighters { for (const index in this.highlighters[from]) { sourceHighlight.currentSourceLocationFromfileName( this.highlighters[from][index].position, - this.highlighters[from][index].filePath, - this.highlighters[from][index].hexColor + this.highlighters[from][index].source, + this.highlighters[from][index].style ) this.highlighters[from][index] = sourceHighlight } diff --git a/apps/remix-ide/src/app/editor/sourceHighlighter.js b/apps/remix-ide/src/app/editor/sourceHighlighter.js index 54121e8094..5c51225670 100644 --- a/apps/remix-ide/src/app/editor/sourceHighlighter.js +++ b/apps/remix-ide/src/app/editor/sourceHighlighter.js @@ -39,7 +39,8 @@ class SourceHighlighter { this.source = null if (lineColumnPos) { this.source = filePath - if (!this.source) this.source = this._deps.fileManager.currentFile() + this.style = style || 'var(--info)' + //if (!this.source) this.source = this._deps.fileManager.currentFile() if (this._deps.fileManager.currentFile() !== this.source) { await this._deps.fileManager.open(this.source) this.source = this._deps.fileManager.currentFile() @@ -50,16 +51,16 @@ class SourceHighlighter { position:absolute; z-index:20; opacity: 0.3; - background-color: ${style || 'var(--info)'}; + background-color: ${this.style}; } .highlightcode_fullLine { position:absolute; z-index:20; opacity: 0.5; - background-color: ${style || 'var(--info)'}; + background-color: ${this.style}; } .customBackgroundColor { - background-color: ${style || 'var(--info)'}; + background-color: ${this.style}; } ` From d8897474d2dd34956eea1442704ffb0626d63258 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Thu, 29 Oct 2020 10:23:43 +0100 Subject: [PATCH 5/7] force discard all highlights when plugin is deactivated --- apps/remix-ide/src/app/components/side-panel.js | 1 + apps/remix-ide/src/app/editor/SourceHighlighters.js | 1 - apps/remix-ide/src/app/editor/editor.js | 2 ++ 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index 541e2b1ed3..53a8e4fc8e 100644 --- a/apps/remix-ide/src/app/components/side-panel.js +++ b/apps/remix-ide/src/app/components/side-panel.js @@ -97,6 +97,7 @@ export class SidePanel extends AbstractPanel { removeView (profile) { super.removeView(profile) + this.emit('pluginDisabled', profile.name) this.verticalIcons.unlinkContent(profile) } diff --git a/apps/remix-ide/src/app/editor/SourceHighlighters.js b/apps/remix-ide/src/app/editor/SourceHighlighters.js index 0d212e74b7..412288aad6 100644 --- a/apps/remix-ide/src/app/editor/SourceHighlighters.js +++ b/apps/remix-ide/src/app/editor/SourceHighlighters.js @@ -42,7 +42,6 @@ class SourceHighlighters { } } - discardHighlight (from) { if (this.highlighters[from]) { for (const index in this.highlighters[from]) this.highlighters[from][index].currentSourceLocation(null) diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js index 619915e994..2fbe481293 100644 --- a/apps/remix-ide/src/app/editor/editor.js +++ b/apps/remix-ide/src/app/editor/editor.js @@ -198,10 +198,12 @@ class Editor extends Plugin { onActivation () { this.on('sidePanel', 'focusChanged', (name) => this.sourceHighlighters.hideHighlightsExcept(name)) + this.on('sidePanel', 'pluginDisabled', (name) => this.sourceHighlighters.discardHighlight(name)) } onDeactivation () { this.off('sidePanel', 'focusChanged') + this.off('sidePanel', 'pluginDisabled') } highlight (position, filePath, hexColor) { From b020dd71c132df788ea04c7d6a0f8ecc0353a8d0 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 2 Nov 2020 14:58:11 +0100 Subject: [PATCH 6/7] Fixed failing e2e tests --- apps/remix-ide-e2e/src/tests/editor.test.ts | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/apps/remix-ide-e2e/src/tests/editor.test.ts b/apps/remix-ide-e2e/src/tests/editor.test.ts index 928ab7f4ce..8ac886a3ad 100644 --- a/apps/remix-ide-e2e/src/tests/editor.test.ts +++ b/apps/remix-ide-e2e/src/tests/editor.test.ts @@ -77,7 +77,10 @@ module.exports = { }, 'Should highlight source code': function (browser: NightwatchBrowser) { + // include all files here because switching between plugins in side-panel removes highlight browser.addFile('sourcehighlight.js', sourcehighlightScript) + .addFile('removeSourcehighlightScript.js', removeSourcehighlightScript) + .addFile('removeAllSourcehighlightScript.js', removeAllSourcehighlightScript) .openFile('browser/sourcehighlight.js') .executeScript('remix.exeCurrent()') .editorScroll('down', 60) @@ -90,20 +93,26 @@ module.exports = { }, 'Should remove 1 highlight from source code': function (browser: NightwatchBrowser) { - browser.addFile('removeSourcehighlightScript.js', removeSourcehighlightScript) - .openFile('browser/removeSourcehighlightScript.js') + browser.waitForElementVisible('li[key="browser/removeSourcehighlightScript.js"]') + .click('li[key="browser/removeSourcehighlightScript.js"]') + .pause(2000) .executeScript('remix.exeCurrent()') - .openFile('browser/3_Ballot.sol') + .waitForElementVisible('li[key="browser/3_Ballot.sol"]') + .click('li[key="browser/3_Ballot.sol"]') + .pause(2000) .waitForElementNotPresent('.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: NightwatchBrowser) { - browser.addFile('removeAllSourcehighlightScript.js', removeAllSourcehighlightScript) - .openFile('browser/removeAllSourcehighlightScript.js') + browser.waitForElementVisible('li[key="browser/removeAllSourcehighlightScript.js"]') + .click('li[key="browser/removeAllSourcehighlightScript.js"]') + .pause(2000) .executeScript('remix.exeCurrent()') - .openFile('browser/3_Ballot.sol') + .waitForElementVisible('li[key="browser/3_Ballot.sol"]') + .click('li[key="browser/3_Ballot.sol"]') + .pause(2000) .waitForElementNotPresent('.highlightLine32') .waitForElementNotPresent('.highlightLine40') .waitForElementNotPresent('.highlightLine50') From 33cadf4333643961f5ee23fdbbd7ac2e70504786 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Mon, 2 Nov 2020 16:20:20 +0100 Subject: [PATCH 7/7] style fixes --- apps/remix-ide/src/app/editor/SourceHighlighters.js | 1 + apps/remix-ide/src/app/editor/contextualListener.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/remix-ide/src/app/editor/SourceHighlighters.js b/apps/remix-ide/src/app/editor/SourceHighlighters.js index 412288aad6..1cb6a15576 100644 --- a/apps/remix-ide/src/app/editor/SourceHighlighters.js +++ b/apps/remix-ide/src/app/editor/SourceHighlighters.js @@ -25,6 +25,7 @@ class SourceHighlighters { } } + // highlights all locations for @from plugin highlightAllFrom (from) { try { if (!this.highlighters[from]) return diff --git a/apps/remix-ide/src/app/editor/contextualListener.js b/apps/remix-ide/src/app/editor/contextualListener.js index 5bacee4fc7..d4d2c5a534 100644 --- a/apps/remix-ide/src/app/editor/contextualListener.js +++ b/apps/remix-ide/src/app/editor/contextualListener.js @@ -123,7 +123,7 @@ class ContextualListener extends Plugin { } _highlightInternal (position, node) { - if (node.nodeType == 'Block') return + if (node.nodeType === 'Block') return let lastCompilationResult = this._deps.compilersArtefacts['__last'] if (lastCompilationResult && lastCompilationResult.languageversion.indexOf('soljson') === 0) { let lineColumn = this._deps.offsetToLineColumnConverter.offsetToLineColumn(position, position.file, lastCompilationResult.getSourceCode().sources, lastCompilationResult.getAsts())