First draft

src/app/editor/contextView.js

@@ -42,6 +42,15 @@ var css = csjs`
     float             : right;
     margin-left       : 15px;
   }
+  .gasEstimation {
+    margin-left: 15px;
+    display: flex;
+    align-items: center;
+  }
+  .gasStationIcon {
+    height: 13px;
+    margin-right: 5px;
+  }
 `
 
 /*
@@ -159,7 +168,14 @@ class ContextView {
       <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>
+        ${showGasEstimation()}
     </div>`
+
+    function showGasEstimation () {
+      var estimatedGas = self._api.contextualListener.gasEstimation(node) + ' gas'
+      if (node.name === 'FunctionDefinition'  && !node.attributes.isConstructor) var el = yo`<div class=${css.gasEstimation}> <img class=${css.gasStationIcon} title='Estimated gas price' src='https://png.icons8.com/gas-station/win8/50/000000'> ${estimatedGas}</div>`
+      return el
+    }
   }
 }
 

src/app/editor/contextualListener.js

@@ -39,9 +39,6 @@ class ContextualListener {
 
   getActiveHighlights () {
     return [...this._activeHighlights]
-    // return [...this._activeHighlights].sort((a,b) => {
-    //   return a.position.start - b.position.start
-    // })
   }
 
   declarationOf (node) {
@@ -94,6 +91,27 @@ class ContextualListener {
     }
   }
 
+  _getGasEstimation (results) {
+    this.contractName = Object.keys(results.data.contracts[results.source.target])[0]
+    this.target = results.data.contracts[results.source.target]
+    this.functions = Object.keys(this.target[this.contractName].evm.gasEstimates.external)
+  }
+
+  gasEstimation (node) {
+    if (node.name === 'FunctionDefinition') {
+      var functionName = node.attributes.name
+      var fn
+      for (var x in this.functions) {
+        if (!!~this.functions[x].indexOf(functionName)) {
+          fn = this.functions[x]
+          break
+        }
+      }
+      var estimation = this.target[this.contractName].evm.gasEstimates.external[fn]
+      return estimation
+    }
+  }
+
   _highlight (node, compilationResult) {
     if (!node) return
     var position = this.sourceMappingDecoder.decode(node.src)
@@ -122,6 +140,7 @@ class ContextualListener {
       highlights(node.id)
       this._highlight(node, compilationResult)
     }
+    this._getGasEstimation(compilationResult)
   }
 
   _stopHighlighting () {