add contextView

src/app.js

@@ -35,6 +35,7 @@ var EventsDecoder = require('./app/execution/eventsDecoder')
 var handleImports = require('./app/compiler/compiler-imports')
 var FileManager = require('./app/files/fileManager')
 var ContextualListener = require('./app/editor/contextualListener')
+var ContextView = require('./app/editor/ContextView')
 
 var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
@@ -427,6 +428,13 @@ function run () {
     editor: editor.event
   })
 
+  // ---------------- ContextView -----------------------
+  this._components.contextView = new ContextView({
+    contextualListener: this._components.contextualListener
+  }, {
+    contextualListener: this._components.contextualListener.event
+  })
+
   // ----------------- Renderer -----------------
   var rendererAPI = {
     error: (file, error) => {

src/app/editor/contextView.js

+'use strict'
+var yo = require('yo-yo')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
+var csjs = require('csjs-inject')
+
+var css = csjs`
+  .contextview           {
+      position          : absolute;
+      background-color  : ${styles.colors.backgroundBlue};
+      opacity           : 0.8;
+    }
+`
+
+/*
+  Display information about the current focused code:
+   - if it's a reference, display information about the declaration
+   - jump to the declaration
+   - number of references
+   - rename declaration/references
+*/
+class ContextView {
+  constructor (api, event) {
+    this._api = api
+    this._event = event
+    this._view
+    this._nodes
+    event.contextualListener.register('contextChanged', nodes => {
+      this._nodes = nodes
+      this.update()
+    })
+  }
+
+  render () {
+    var view = yo`<div class=${css.contextview}>
+      <div>
+        <span>${this._renderItems()}</span>
+      </div>
+    </div>`
+    if (!this._view) {
+      this._view = view
+    }
+    return view
+  }
+
+  update () {
+    if (this._view) {
+      yo.update(this._view, this.render())
+    }
+  }
+
+  _renderItems () {
+    if (this._nodes && this._nodes.length) {
+      var last = this._nodes[this._nodes.length - 1]
+      if (this._api.contextualListener.declarationOf(last)) {
+        return renderReference(last)
+      }
+    }
+    return yo``
+  }
+}
+
+
+
+function renderReference (node) {
+  yo`<div><span>${node.name}</span></div>`
+}
+
+module.exports = ContextView

src/app/editor/contextualListener.js

 'use strict'
-var SourceMappingDecoder = require('ethereum-remix').util.SourceMappingDecoder
-var AstWalker = require('ethereum-remix').util.AstWalker
+var remix = require('ethereum-remix').util.AstWalker
+var SourceMappingDecoder = remix.util.SourceMappingDecoder
+var AstWalker = remix.util.AstWalker
+var EventManager = remix.lib.EventManager
 
+/*
+  trigger contextChanged(nodes)
+*/
 class ContextualListener {
   constructor (api, events) {
+    this.event = new EventManager()
     this._api = api
     this._index = {
       Declarations: {},
@@ -31,6 +37,13 @@ class ContextualListener {
     }, 1000)
   }
 
+  declarationOf (node) {
+    if (node.attributes.referencedDeclaration) {
+      return this._index['Declarations'][node.attributes.referencedDeclaration]
+    }
+    return null
+  }
+
   _highlightItems (cursorPosition, compilationResult, file) {
     if (this.currentPosition === cursorPosition) return
     if (this.currentFile !== file) {
@@ -43,6 +56,7 @@ 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)
       }