Merge pull request #1888 from ethereum/runtab_network

src/app/tabs/runTab/settings.js

-var $ = require('jquery')
-var yo = require('yo-yo')
-var remixLib = require('remix-lib')
-var EventManager = remixLib.EventManager
-var css = require('../styles/run-tab-styles')
-var copyToClipboard = require('../../ui/copy-to-clipboard')
-var modalDialogCustom = require('../../ui/modal-dialog-custom')
-var addTooltip = require('../../ui/tooltip')
-var helper = require('../../../lib/helper.js')
+const $ = require('jquery')
+const yo = require('yo-yo')
+const remixLib = require('remix-lib')
+const EventManager = remixLib.EventManager
+const css = require('../styles/run-tab-styles')
+const copyToClipboard = require('../../ui/copy-to-clipboard')
+const modalDialogCustom = require('../../ui/modal-dialog-custom')
+const addTooltip = require('../../ui/tooltip')
+const helper = require('../../../lib/helper.js')
+const globalRegistry = require('../../../global/registry')
 
 class SettingsUI {
 
   constructor (settings) {
     this.settings = settings
     this.event = new EventManager()
+    this._components = {}
 
     this.settings.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
       if (error) return
@@ -20,6 +22,11 @@ class SettingsUI {
       this.updateAccountBalances()
     })
 
+    this._components.registry = globalRegistry
+    this._deps = {
+      networkModule: this._components.registry.get('network').api
+    }
+
     setInterval(() => {
       this.updateAccountBalances()
     }, 10 * 1000)
@@ -40,7 +47,7 @@ class SettingsUI {
   }
 
   render () {
-    this.netUI = yo`<span class=${css.network}></span>`
+    this.netUI = yo`<span class="${css.network} badge badge-secondary"></span>`
 
     var environmentEl = yo`
       <div class="${css.crow}">
@@ -48,7 +55,6 @@ class SettingsUI {
           Environment
         </div>
         <div class=${css.environment}>
-          ${this.netUI}
           <select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="form-control ${css.select}">
             <option id="vm-mode"
               title="Execution environment does not connect to any node, everything is local and in memory only."
@@ -68,8 +74,16 @@ class SettingsUI {
         </div>
       </div>
     `
-
-    var accountEl = yo`
+    const networkEl = yo`
+    <div class="${css.crow}">
+        <div class="${css.col1_1}">
+        </div>
+        <div class="${css.environment}">
+          ${this.netUI}
+        </div>
+      </div>
+    `
+    const accountEl = yo`
       <div class="${css.crow}">
         <div class="${css.col1_1}">
           Account
@@ -83,14 +97,14 @@ class SettingsUI {
       </div>
     `
 
-    var gasPriceEl = yo`
+    const gasPriceEl = yo`
       <div class="${css.crow}">
         <div class="${css.col1_1}">Gas limit</div>
         <input type="number" class="form-control ${css.gasNval} ${css.col2}" id="gasLimit" value="3000000">
       </div>
     `
 
-    var valueEl = yo`
+    const valueEl = yo`
       <div class="${css.crow}">
         <div class="${css.col1_1}">Value</div>
         <div class="${css.gasValueContainer}">
@@ -105,9 +119,10 @@ class SettingsUI {
       </div>
     `
 
-    var el = yo`
+    const el = yo`
       <div class="${css.settings}">
         ${environmentEl}
+        ${networkEl}
         ${accountEl}
         ${gasPriceEl}
         ${valueEl}
@@ -231,7 +246,8 @@ class SettingsUI {
         this.netUI.innerHTML = 'can\'t detect network '
         return
       }
-      this.netUI.innerHTML = `<i class="${css.networkItem} fas fa-plug" aria-hidden="true"></i> ${name} (${id || '-'})`
+      let network = this._deps.networkModule.getNetworkProvider
+      this.netUI.innerHTML = (network() !== 'vm') ? `${name} (${id || '-'}) network` : ''
     })
   }
 

src/app/tabs/styles/run-tab-styles.js

@@ -202,14 +202,7 @@ var css = csjs`
     display: inline;
   }
   .network {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: absolute;
-    color: grey;
-    width: 100%;
-    height: 100%;
-    padding-right: 53px;
+    margin-left: 8px;
     pointer-events: none;
   }
   .networkItem {

test-browser/helpers/contracts.js

@@ -101,7 +101,7 @@ function clickFunction (fnFullName, expectedInput) {
   this.waitForElementPresent('.instance button[title="' + fnFullName + '"]')
     .perform(function (client, done) {
       client.execute(function () {
-        document.querySelector('#optionViews').scrollTop = document.querySelector('#optionViews').scrollHeight
+        document.querySelector('#runTabView').scrollTop = document.querySelector('#runTabView').scrollHeight
       }, [], function () {
         if (expectedInput) {
           client.setValue('#runTabView input[title="' + expectedInput.types + '"]', expectedInput.values, function () {})
@@ -143,7 +143,7 @@ function getAddressAtPosition (browser, index, callback) {
 function testConstantFunction (browser, address, fnFullName, expectedInput, expectedOutput, cb) {
   browser.waitForElementPresent('.instance button[title="' + fnFullName + '"]').perform(function (client, done) {
     client.execute(function () {
-      document.querySelector('#optionViews').scrollTop = document.querySelector('#optionViews').scrollHeight
+      document.querySelector('#runTabView').scrollTop = document.querySelector('#runTabView').scrollHeight
     }, [], function () {
       if (expectedInput) {
         client.setValue('#runTabView input[title="' + expectedInput.types + '"]', expectedInput.values, function () {})
@@ -181,7 +181,7 @@ function testFunction (fnFullName, txHash, log, expectedInput, expectedReturn, e
   this.waitForElementPresent('.instance button[title="' + fnFullName + '"]')
     .perform(function (client, done) {
       client.execute(function () {
-        document.querySelector('#optionViews').scrollTop = document.querySelector('#optionViews').scrollHeight
+        document.querySelector('#runTabView').scrollTop = document.querySelector('#runTabView').scrollHeight
       }, [], function () {
         if (expectedInput) {
           client.setValue('#runTabView input[title="' + expectedInput.types + '"]', expectedInput.values, function () {})