Merge pull request #868 from ethereum/runTab_fixes

Refactor run tab (value, create and atAddress buttons, instance title)

src/app.js

@@ -214,8 +214,21 @@ function run () {
     },
     getValue: (cb) => {
       try {
-        var comp = $('#value').val().split(' ')
-        cb(null, executionContext.web3().toWei(comp[0], comp.slice(1).join(' ')))
+        var number = document.querySelector('#value').value
+        var select = document.getElementById('unit')
+        var index = select.selectedIndex
+        var selectedUnit = select.querySelectorAll('option')[index].dataset.unit
+        var unit = 'ether' // default
+        if (selectedUnit === 'ether') {
+          unit = 'ether'
+        } else if (selectedUnit === 'finney') {
+          unit = 'finney'
+        } else if (selectedUnit === 'gwei') {
+          unit = 'gwei'
+        } else if (selectedUnit === 'wei') {
+          unit = 'wei'
+        }
+        cb(null, executionContext.web3().toWei(number, unit))
       } catch (e) {
         cb(e)
       }

src/app/execution/txLogger.js

@@ -20,6 +20,9 @@ var css = csjs`
     align-items: end;
     justify-content: space-between;
   }
+  .txLog {
+    width: 75%;
+  }
   .tx {
     color: ${styles.terminal.text_Title_TransactionLog};
     font-weight: bold;
@@ -45,19 +48,11 @@ var css = csjs`
   .buttons {
     display: flex;
   }
-  .debug {
-    ${styles.terminal.button_Log_Debug}
-  }
-  .details {
-    ${styles.terminal.button_Log_Details}
-  }
   .debug, .details {
-    min-height: 18px;
-    max-height: 18px;
-    width: 45px;
-    min-width: 45px;
-    font-size: 10px;
+    color: ${styles.terminal.link_Debug};
+    min-width: 55px;
     margin-left: 5px;
+    cursor: pointer;
   }
   .clipboardCopy {
     margin-right: 0.5em;
@@ -206,7 +201,7 @@ function renderCall (self, data) {
   var tx = yo`
     <span id="tx${data.tx.hash}">
       <div class="${css.log}">
-        <span><span class=${css.tx}>[call]</span> from:${from}, to:${to}, data:${input}, return: </span>
+        <span class=${css.txLog}><span class=${css.tx}>[call]</span> from:${from}, to:${to}, data:${input}, return: </span>
         <div class=${css.buttons}>
           <button class=${css.details} onclick=${txDetails}>Details</button>
           <button class=${css.debug} onclick=${debug}>Debug</button>
@@ -284,7 +279,7 @@ function renderUnknownTransaction (self, data) {
 }
 
 function renderEmptyBlock (self, data) {
-  return yo`<span><span class='${css.tx}'>[block:${data.block.number} - 0 transactions]</span></span>`
+  return yo`<span class=${css.txLog}><span class='${css.tx}'>[block:${data.block.number} - 0 transactions]</span></span>`
 }
 
 function context (self, opts) {
@@ -300,13 +295,13 @@ function context (self, opts) {
   var i = data.tx.transactionIndex
   var value = val ? typeConversion.toInt(val) : 0
   if (executionContext.getProvider() === 'vm') {
-    return yo`<span><span class=${css.tx}>[vm]</span> from:${from}, to:${to}, value:${value} wei, data:${input}, ${logs} logs, hash:${hash}</span>`
+    return yo`<span class=${css.txLog}><span class=${css.tx}>[vm]</span> from:${from}, to:${to}, value:${value} wei, data:${input}, ${logs} logs, hash:${hash}</span>`
   } else if (executionContext.getProvider() !== 'vm' && data.resolvedData) {
-    return yo`<span><span class='${css.tx}'>[block:${block} txIndex:${i}]</span> from:${from}, to:${to}, value:${value} wei, ${logs} logs, data:${input}, hash:${hash}</span>`
+    return yo`<span class=${css.txLog}><span class='${css.tx}'>[block:${block} txIndex:${i}]</span> from:${from}, to:${to}, value:${value} wei, ${logs} logs, data:${input}, hash:${hash}</span>`
   } else {
     to = helper.shortenHexData(to)
     hash = helper.shortenHexData(data.tx.blockHash)
-    return yo`<span><span class='${css.tx}'>[block:${block} txIndex:${i}]</span> from:${from}, to:${to}, value:${value} wei</span>`
+    return yo`<span class=${css.txLog}><span class='${css.tx}'>[block:${block} txIndex:${i}]</span> from:${from}, to:${to}, value:${value} wei</span>`
   }
 }
 

src/app/panels/editor-panel.js

@@ -269,6 +269,7 @@ class EditorPanel {
     self._view.terminal = self._components.terminal.render()
     self._view.content = yo`
       <div class=${css.content}>
+        ${self._renderTabsbar()}
         <div class=${css.contextviewcontainer}>
           ${self._api.contextview.render()}
         </div>
@@ -278,7 +279,6 @@ class EditorPanel {
     `
     self._view.el = yo`
       <div class=${css.editorpanel}>
-        ${self._renderTabsbar()}
         ${self._view.content}
       </div>
     `

src/app/tabs/run-tab.js

@@ -45,6 +45,16 @@ var css = csjs`
   .col2 {
     ${styles.rightPanel.runTab.input_RunTab}
   }
+  .col2_1 {
+    ${styles.rightPanel.runTab.input_RunTab}
+    width: 165px;
+    min-width: 165px;
+  }
+  .col2_2 {
+    ${styles.rightPanel.runTab.dropdown_RunTab}
+    width: 82px;
+    min-width: 82px;
+  }
   .select {
     ${styles.rightPanel.runTab.dropdown_RunTab}
     font-weight: normal;
@@ -81,6 +91,7 @@ var css = csjs`
   }
   .contractNames {
     ${styles.rightPanel.runTab.dropdown_RunTab}
+    width: 100%;
   }
   .subcontainer {
     display: flex;
@@ -151,15 +162,15 @@ var css = csjs`
     margin-left: 10%;
   }
   .errorIcon {
-    color: ${styles.colors.red};;
+    color: ${styles.colors.red};
     margin-left: 15px;
   }
   .errorIcon {
-    color: ${styles.colors.red};;
+    color: ${styles.colors.red};
     margin-left: 15px;
   }
   .failDesc {
-    color: ${styles.colors.red};;
+    color: ${styles.colors.red};
     padding-left: 10px;
     display: inline;
   }
@@ -254,8 +265,8 @@ function contractDropdown (appAPI, appEvents, instanceContainer) {
     }
   })
 
-  var atAddressButtonInput = yo`<input class="${css.input} ataddressinput" placeholder="Enter contract's address - i.e. 0x60606..." title="atAddress" />`
-  var createButtonInput = yo`<input class="${css.input}" placeholder="" title="create" />`
+  var atAddressButtonInput = yo`<input class="${css.input} ataddressinput" placeholder="Load contract from Address" title="atAddress" />`
+  var createButtonInput = yo`<input class="${css.input}" placeholder="" title="Create" />`
   var selectContractNames = yo`<select class="${css.contractNames}" disabled></select>`
   var el = yo`
     <div class="${css.container}">
@@ -264,12 +275,12 @@ function contractDropdown (appAPI, appEvents, instanceContainer) {
       </div>
       <div class="${css.buttons}">
         <div class="${css.button}">
-          <div class="${css.atAddress}" onclick=${function () { loadFromAddress(appAPI) }}>At Address</div>
-          ${atAddressButtonInput}
+          ${createButtonInput}
+          <div class="${css.create}" onclick=${function () { createInstance() }} >Create</div>
         </div>
         <div class="${css.button}">
-          <div class="${css.create}" onclick=${function () { createInstance() }} >Create</div>
-          ${createButtonInput}
+          ${atAddressButtonInput}
+          <div class="${css.atAddress}" onclick=${function () { loadFromAddress(appAPI) }}>At Address</div>
         </div>
       </div>
     </div>
@@ -406,13 +417,19 @@ function settings (appAPI, appEvents) {
         <div class="${css.col1_1}">Gas limit</div>
         <input type="number" class="${css.col2}" id="gasLimit" value="3000000">
       </div>
-      <div class="${css.crow} hide">
+      <div class="${css.crow}" style="display: none">
       <div class="${css.col1_1}">Gas Price</div>
         <input type="number" class="${css.col2}" id="gasPrice" value="0">
       </div>
       <div class="${css.crow}">
       <div class="${css.col1_1}">Value</div>
-        <input type="text" class="${css.col2}" id="value" value="0" title="(e.g. .7 ether ...)">
+        <input type="text" class="${css.col2_1}" id="value" value="0" title="Enter the value and choose the unit">
+        <select name="unit" class="${css.col2_2}" id="unit">
+          <option data-unit="wei">wei</option>
+          <option data-unit="gwei">gwei</option>
+          <option data-unit="finney">finney</option>
+          <option data-unit="ether">ether</option>
+        </select>
       </div>
     </div>
   `

src/universal-dapp.js

@@ -36,12 +36,15 @@ var css = csjs`
     justify-content: space-between;
     align-items: center;
     font-size: 11px;
-    width: 75%;
-    min-width: 500px;
+    min-width: 350px;
     overflow: hidden;
     word-break: break-word;
     line-height: initial;
   }
+  .titleLine {
+    display: flex;
+    align-items: baseline;
+  }
   .titleText {
     margin-right: 1em;
     word-break: break-word;
@@ -63,7 +66,7 @@ var css = csjs`
   .instance.hidesub > * {
       display: none;
   }
-  .instance.hidesub .title {
+  .instance.hidesub .titleLine {
       display: flex;
   }
   .copy  {
@@ -295,13 +298,17 @@ UniversalDApp.prototype.renderInstance = function (contract, address, contractNa
 
   address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
   var shortAddress = helper.shortenAddress(address)
-  var title = yo`<div class="${css.title}" onclick=${toggleClass}>
+  var title = yo`
+    <div class=${css.titleLine}>
+      <div class="${css.title}" onclick=${toggleClass}>
         <div class="${css.titleText}"> ${contractName} at ${shortAddress} (${context}) </div>
+      </div>
       <i class="fa fa-clipboard ${css.copy}" aria-hidden="true" onclick=${copyToClipboard} title='Copy to clipboard'></i>
-  </div>`
+    </div>
+  `
   if (self.removable_instances) {
     var close = yo`<div class="${css.udappClose}" onclick=${remove}><i class="${css.closeIcon} fa fa-close" aria-hidden="true"></i></div>`
-    title.appendChild(close)
+    title.querySelector(`.${css.title}`).appendChild(close)
   }
 
   function toggleClass () {

test-browser/helpers/contracts.js

@@ -67,11 +67,15 @@ function testFunction (fnFullName, txHash, log, expectedInput, expectedReturn, e
   // this => browser
   this.waitForElementPresent('.instance button[title="' + fnFullName + '"]')
     .perform(function (client, done) {
+      client.execute(function () {
+        document.querySelector('#optionViews').scrollTop = document.querySelector('#optionViews').scrollHeight
+      }, [], function () {
         if (expectedInput) {
           client.setValue('#runTabView input[title="' + expectedInput.types + '"]', expectedInput.values, function () {})
         }
         done()
       })
+    })
     .click('.instance button[title="' + fnFullName + '"]')
     .pause(500)
     .waitForElementPresent('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"]')