Merge pull request #2815 from ethereum/fix#2793

Allow multiple highlight per plugin

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()
+      if (!this.highlighters[from]) this.highlighters[from] = []
-      this.highlighters[from].currentSourceLocation(null)
+      const sourceHighlight = new SourceHighlighter()
-      this.highlighters[from].currentSourceLocationFromfileName(position, filePath, hexColor)
+      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)
+        }
+      }
+    }
   }
 }
 

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,11 @@ class Editor extends Plugin {
     this.sourceHighlighters.discardHighlight(from)
   }
 
+  discardHighlightAt (line, filePath) {
+    const { from } = this.currentRequest
+    this.sourceHighlighters.discardHighlightAt(line, filePath, from)
+  }
+
   setTheme (type) {
     this.editor.setTheme('ace/theme/' + this._themes[type])
   }

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
@@ -59,9 +60,9 @@ 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) {
         this.fullLineMarker = this._deps.editor.addMarker({
           start: {

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 < numberOfTimes; i++) {
+      if (direction.toLowerCase() === 'up') browser.sendKeys('.ace_text-input', browser.Keys.ARROW_UP)
+      if (direction.toLowerCase() === 'down') browser.sendKeys('.ace_text-input', browser.Keys.ARROW_DOWN)
+    }
+    browser.perform((done) => {
+      done()
+      this.emit('complete')
+    })
+    return this
+  }
+}
+
+module.exports = ScrollEditor

test-browser/tests/editor.test.js

@@ -70,6 +70,41 @@ 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('sourcehighlight.js', sourcehighlightScript)
+    .switchFile('browser/sourcehighlight.js')
+    .executeScript('remix.exeCurrent()')
+    .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)')
+  },
+
+  '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)
+    .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) {
+    browser.addFile('removeAllSourcehighlightScript.js', removeAllSourcehighlightScript)
+    .switchFile('browser/removeAllSourcehighlightScript.js')
+    .executeScript('remix.exeCurrent()')
+    .switchFile('browser/3_Ballot.sol')
+    .editorScroll('down', 60)
+    .waitForElementNotPresent('.highlightLine32')
+    .waitForElementNotPresent('.highlightLine40')
+    .waitForElementNotPresent('.highlightLine50')
     .end()
   },
 
@@ -90,3 +125,73 @@ var aceThemes = {
     variable: 'rgb(153, 119, 68)'
   }
 }
+
+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)
+    }
+  })()
+  `
+}
+
+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)
+    }
+  })()
+  `
+}