Merge pull request #1916 from ethereum/contextView

Improve solidity context view

src/app/editor/contextView.js

@@ -36,19 +36,17 @@ class ContextView {
       this.update()
     })
     this.contextualListener.event.register('stopHighlighting', () => {
-      this.hide()
     })
   }
 
   render () {
-    const view = yo`<div class="${css.contextview} ${css.contextviewcontainer} badge badge-secondary border-top-0">
+    const view = yo`<div class="${css.contextview} ${css.contextviewcontainer} badge bg-light border-0">
       <div class=${css.container}>
         ${this._renderTarget()}
       </div>
     </div>`
     if (!this._view) {
       this._view = view
-      this.hide()
     }
     return view
   }
@@ -68,7 +66,6 @@ class ContextView {
   update () {
     if (this._view) {
       yo.update(this._view, this.render())
-      this._view.style.display = this._current ? 'block' : 'none'
     }
   }
 
@@ -169,14 +166,13 @@ class ContextView {
       }
     }
 
-    return yo`<div class=${css.line}>
+    return yo`<div class=${css.line}>${showGasEstimation()}
       <div title=${type} class=${css.type}>${type}</div>
       <div title=${node.attributes.name} class=${css.name}>${node.attributes.name}</div>
       <i class="fas fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
       <span class=${css.referencesnb}>${references}</span>
       <i data-action='previous' class="fas fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i>
       <i data-action='next' class="fas fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
-        ${showGasEstimation()}
     </div>`
   }
 }

src/app/editor/styles/contextView-styles.js

@@ -3,6 +3,8 @@ var csjs = require('csjs-inject')
 var css = csjs`
   .contextview            {
     opacity             : 1;
+    position            : relative;
+    height              : 20px;
   }
   .container              {
     padding             : 1px 15px;
@@ -14,7 +16,7 @@ var css = csjs`
     text-overflow       : ellipsis;
     overflow            : hidden;
     white-space         : nowrap;
-    font-size           : 18px;
+    font-size           : 13px;
   }
   .type                   {
     font-style        : italic;
@@ -35,7 +37,7 @@ var css = csjs`
     margin-left       : 15px;
   }
   .gasEstimation {
-    margin-left: 15px;
+    margin-right: 15px;
     display: flex;
     align-items: center;
   }
@@ -44,10 +46,7 @@ var css = csjs`
     margin-right: 5px;
   }
   .contextviewcontainer{
-    position          : absolute;
-    top               : 35px;
     z-index           : 50;
-    left              : 40%;
     border-radius     : 1px;
     border            : 2px solid var(--secondary);
   }

src/app/panels/editor-panel.js

@@ -71,17 +71,19 @@ class EditorPanel {
       // we check upstream for "fileChanged"
       self._view.editor.style.display = 'block'
       self._view.mainPanel.style.display = 'none'
+      self._components.contextView.show()
     })
     self.tabProxy.event.on('switchFile', (file) => {
       self._view.editor.style.display = 'block'
       self._view.mainPanel.style.display = 'none'
+      self._components.contextView.show()
     })
     self.tabProxy.event.on('closeFile', (file) => {
     })
     self.tabProxy.event.on('switchApp', showApp)
     self.tabProxy.event.on('closeApp', (name) => {
       self._view.editor.style.display = 'block'
-      self._components.contextView.hide()
+      self._components.contextView.show()
       self._view.mainPanel.style.display = 'none'
     })
     self.data = {
@@ -181,9 +183,9 @@ class EditorPanel {
     self._view.content = yo`
       <div class=${css.content}>
         ${self.tabProxy.renderTabsbar()}
-        ${self._components.contextView.render()}
         ${self._view.editor}
         ${self._view.mainPanel}
+        ${self._components.contextView.render()}
         ${self._view.terminal}
       </div>
     `