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') diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index b68f7430ad..53a8e4fc8e 100644 --- a/apps/remix-ide/src/app/components/side-panel.js +++ b/apps/remix-ide/src/app/components/side-panel.js @@ -91,8 +91,13 @@ export class SidePanel extends AbstractPanel { }) } + focus (name) { + this.emit('focusChanged', name) + } + removeView (profile) { super.removeView(profile) + this.emit('pluginDisabled', profile.name) this.verticalIcons.unlinkContent(profile) } @@ -108,6 +113,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..1cb6a15576 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 { } } + // highlights all locations for @from plugin + 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].source, + this.highlighters[from][index].style + ) + 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 67e6d52c05..d4d2c5a534 100644 --- a/apps/remix-ide/src/app/editor/contextualListener.js +++ b/apps/remix-ide/src/app/editor/contextualListener.js @@ -123,14 +123,15 @@ class ContextualListener extends Plugin { } _highlightInternal (position, 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/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js index 996eeedf17..2fbe481293 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,16 @@ 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) { 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..5c51225670 100644 --- a/apps/remix-ide/src/app/editor/sourceHighlighter.js +++ b/apps/remix-ide/src/app/editor/sourceHighlighter.js @@ -39,6 +39,8 @@ class SourceHighlighter { this.source = null if (lineColumnPos) { this.source = filePath + 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() @@ -49,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}; } ` 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;\