add contextview to editorpanel

src/app/editor/contextView.js

@@ -7,9 +7,13 @@ var csjs = require('csjs-inject')
 
 var css = csjs`
   .contextview           {
-      position          : absolute;
       background-color  : ${styles.colors.backgroundBlue};
       opacity           : 0.8;
+      width             : 20em;
+      height            : 5em;
+      border-color      : transparent;
+      border-radius     : 3px;
+      border            : .3px solid hsla(0, 0%, 40%, .2);
     }
 `
 
@@ -26,6 +30,7 @@ class ContextView {
     this._event = event
     this._view
     this._nodes
+    this._current
     event.contextualListener.register('contextChanged', nodes => {
       this._nodes = nodes
       this.update()
@@ -35,36 +40,59 @@ class ContextView {
   render () {
     var view = yo`<div class=${css.contextview}>
       <div>
-        <span>${this._renderItems()}</span>
+        <span>${this._renderTarget()}</span>
       </div>
     </div>`
     if (!this._view) {
       this._view = view
+      this.hide()
     }
     return view
   }
 
+  hide () {
+    if (this._view) {
+      this._view.style.display = 'none'
+    }
+  }
+
+  show () {
+    if (this._view) {
+      this._view.style.display = 'block'
+    }
+  }
+
   update () {
     if (this._view) {
       yo.update(this._view, this.render())
+      this._view.style.display = this._current ? 'block' : 'none'
     }
   }
 
-  _renderItems () {
+  _renderTarget () {
+    this._current = null
     if (this._nodes && this._nodes.length) {
       var last = this._nodes[this._nodes.length - 1]
-      if (this._api.contextualListener.declarationOf(last)) {
-        return renderReference(last)
+      if (last.name === 'ContractDefinition' || last.name === 'FunctionDefinition' || last.name === 'ModifierDefinition' || last.name === 'VariableDeclaration') {
+        this._current = last
+      } else {
+        var target = this._api.contextualListener.declarationOf(last)
+        if (target) {
+          this._current = target
         }
       }
-    return yo``
     }
+    return this._renderDeclarations(this._current)
   }
 
-
-
-function renderReference (node) {
-  yo`<div><span>${node.name}</span></div>`
+  _renderDeclarations (node) {
+    if (!node) return yo`<div></div>`
+    var references = this._api.contextualListener.referencesOf(node)
+    references = yo`<div>${references ? references.length : '0'} references</div>`
+    return yo`<div><div>${node.attributes.type} ${node.attributes.name} (${node.name})</div>
+      <div>${references}</div>
+    </div>`
+  }
 }
 
 module.exports = ContextView

src/app/panels/editor-panel.js

@@ -126,6 +126,14 @@ var css = csjs`
   .banner             {
     width             : 25em;
   }
+  
+  .contextviewcontainer{
+    position          : absolute;
+    z-index           : 100;
+    right             : 20px;
+    top               : 20px;
+    width             : 20em;
+  }
 `
 
 class EditorPanel {
@@ -221,6 +229,9 @@ class EditorPanel {
     self._view.terminal = self._components.terminal.render()
     self._view.content = yo`
       <div class=${css.content}>
+        <div class=${css.contextviewcontainer}>
+          ${self._api.contextview.render()}
+        </div>      
         ${self._view.editor}
         ${self._view.terminal}
       </div>