Merge pull request #930 from ethereum/ide2

More IDE/editor Features

src/app.js

@@ -319,7 +319,7 @@ function run () {
         var css = 'highlightreference'
         if (node.children && node.children.length) {
           // If node has children, highlight the entire line. if not, just highlight the current source position of the node.
-          css = 'highlightreferenceline'
+          css = 'highlightreference'
           lineColumn = {
             start: {
               line: lineColumn.start.line,
@@ -357,7 +357,7 @@ function run () {
           fileManager.switchFile(filename)
         }
         if (lineColumn.start && lineColumn.start.line && lineColumn.start.column) {
-          editor.gotoLine(lineColumn.start.line, lineColumn.start.column + 1)
+          editor.gotoLine(lineColumn.start.line, lineColumn.end.column + 1)
         }
       }
     }

src/app/editor/contextView.js

@@ -29,18 +29,18 @@ var css = csjs`
   }
   .name                   {
     font-weight       : bold;
-    margin-right      : 15px;
   }
-  .jumpto                 {
+  .jump                   {
     cursor            : pointer;
-    margin-right      : 5px;
+    margin            : 0 5px;
     color             : ${styles.editor.icon_Color_Editor};
   }
-  jumpto:hover            {
+  .jump:hover              {
     color             : ${styles.editor.icon_HoverColor_Editor};
   }
   .referencesnb           {
     float             : right;
+    margin-left       : 15px;
   }
 `
 
@@ -59,6 +59,7 @@ class ContextView {
     this._nodes
     this._current
     this.sourceMappingDecoder = new SourceMappingDecoder()
+    this.previousElement = null
     event.contextualListener.register('contextChanged', nodes => {
       this._nodes = nodes
       this.update()
@@ -98,7 +99,7 @@ class ContextView {
   }
 
   _renderTarget () {
-    this._current = null
+    var previous = this._current
     if (this._nodes && this._nodes.length) {
       var last = this._nodes[this._nodes.length - 1]
       if (isDefinition(last)) {
@@ -107,19 +108,41 @@ class ContextView {
         var target = this._api.contextualListener.declarationOf(last)
         if (target) {
           this._current = target
+        } else {
+          this._current = last
         }
       }
     }
-    return this._render(this._current)
+    if (!this._current || !previous || previous.id !== this._current.id) {
+      this.previousElement = this._render(this._current, last)
+    }
+    return this.previousElement
   }
 
-  _render (node) {
+  _render (node, nodeAtCursorPosition) {
     if (!node) return yo`<div></div>`
     var self = this
     var references = this._api.contextualListener.referencesOf(node)
     var type = node.attributes.type ? node.attributes.type : node.name
     references = `${references ? references.length : '0'} reference(s)`
 
+    var ref = 0
+    var nodes = self._api.contextualListener.getActiveHighlights()
+    for (var k in nodes) {
+      if (nodeAtCursorPosition.id === nodes[k].nodeId) {
+        ref = k
+        break
+      }
+    }
+
+    // JUMP BETWEEN REFERENCES
+    function jump (e) {
+      e.target.dataset.action === 'next' ? ref++ : ref--
+      if (ref < 0) ref = nodes.length - 1
+      if (ref >= nodes.length) ref = 0
+      self._api.jumpTo(nodes[ref].position)
+    }
+
     function jumpTo () {
       if (node && node.src) {
         var position = self.sourceMappingDecoder.decode(node.src)
@@ -130,10 +153,12 @@ class ContextView {
     }
 
     return yo`<div class=${css.line}>
-      <div title=${type} class=${css.type} >${type}</div>
+      <div title=${type} class=${css.type}>${type}</div>
-      <div title=${node.attributes.name} class=${css.name} >${node.attributes.name}</div>
+      <div title=${node.attributes.name} class=${css.name}>${node.attributes.name}</div>
-      <i title='Go to Definition' class="fa fa-share ${css.jumpto}" aria-hidden="true" onclick=${jumpTo}></i>
+      <i class="fa fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
       <span class=${css.referencesnb}>${references}</span>
+      <i data-action='previous' class="fa fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i>
+      <i data-action='next' class="fa fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
     </div>`
   }
 }

src/app/editor/contextualListener.js

@@ -37,6 +37,13 @@ class ContextualListener {
     }, 1000)
   }
 
+  getActiveHighlights () {
+    return [...this._activeHighlights]
+    // return [...this._activeHighlights].sort((a,b) => {
+    //   return a.position.start - b.position.start
+    // })
+  }
+
   declarationOf (node) {
     if (node.attributes && node.attributes.referencedDeclaration) {
       return this._index['FlatReferences'][node.attributes.referencedDeclaration]
@@ -60,10 +67,10 @@ class ContextualListener {
     this.currentFile = file
     if (compilationResult && compilationResult.data && compilationResult.data.sources[file]) {
       var nodes = this.sourceMappingDecoder.nodesAtPosition(null, cursorPosition, compilationResult.data.sources[file])
-      this.event.trigger('contextChanged', [nodes])
       if (nodes && nodes.length && nodes[nodes.length - 1]) {
         this._highlightExpressions(nodes[nodes.length - 1], compilationResult)
       }
+      this.event.trigger('contextChanged', [nodes])
     }
   }
 
@@ -92,7 +99,7 @@ class ContextualListener {
     var position = this.sourceMappingDecoder.decode(node.src)
     var eventId = this._api.highlight(position, node)
     if (eventId) {
-      this._activeHighlights.push({ eventId, position, fileTarget: this._api.getSourceName(position.file) })
+      this._activeHighlights.push({ eventId, position, fileTarget: this._api.getSourceName(position.file), nodeId: node.id })
     }
   }
 
@@ -113,6 +120,7 @@ class ContextualListener {
       this._highlight(current, compilationResult)
     } else {
       highlights(node.id)
+      this._highlight(node, compilationResult)
     }
   }
 

src/app/editor/editor.js

@@ -6,6 +6,7 @@ var csjs = require('csjs-inject')
 var ace = require('brace')
 var Range = ace.acequire('ace/range').Range
 require('brace/ext/language_tools')
+require('brace/ext/searchbox')
 var langTools = ace.acequire('ace/ext/language_tools')
 require('./mode-solidity.js')
 var styleGuide = remixLib.ui.styleGuide
@@ -225,6 +226,8 @@ function Editor (opts = {}) {
     editor.gotoLine(line + 1, col - 1, true)
   }
 
+  this.find = (string) => editor.find(string)
+
   // Do setup on initialisation here
   editor.on('changeSession', function () {
     event.trigger('sessionSwitched', [])
@@ -236,7 +239,6 @@ function Editor (opts = {}) {
 
   // Unmap ctrl-t & ctrl-f
   editor.commands.bindKeys({ 'ctrl-t': null })
-  editor.commands.bindKeys({ 'ctrl-f': null })
 
   editor.resize(true)
 }

src/app/editor/mode-solidity.js

@@ -68,7 +68,7 @@ var JavaScriptHighlightRules = function(options) {
             "contract|library|constant|event|modifier|" +
             "struct|mapping|enum|break|continue|delete|else|for|function|" +
             "if|new|return|returns|var|while|using|" +
-            "private|public|external|internal|storage|memory",
+            "private|public|external|internal|storage|memory|payable|view|pure|",
         "storage.type":
             "constant|var|function",
         "constant.language.boolean": "true|false"