Merge pull request #526 from ethereum/highlightsCleaner

Hide Highlights of plugin if not in focused

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)
+    browser.waitForElementVisible('li[key="browser/removeSourcehighlightScript.js"]')
-    .openFile('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)
+    browser.waitForElementVisible('li[key="browser/removeAllSourcehighlightScript.js"]')
-    .openFile('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')

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 */

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]) {

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;
+          position: absolute;
-          z-index:2;
+          z-index: 2;
-          opacity: 0.4;
+          opacity: 0.1;
           background-color: var(--info);
         }
         `

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)

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

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