Merge pull request #1219 from ethereum/runTab

ci/browser_tests.sh

@@ -42,7 +42,7 @@ done
 
 npm run nightwatch_remote_chrome || TEST_EXITCODE=1
 npm run nightwatch_remote_firefox || TEST_EXITCODE=1
-npm run nightwatch_remote_safari || TEST_EXITCODE=1
+# npm run nightwatch_remote_safari || TEST_EXITCODE=1
 # npm run nightwatch_remote_ie || TEST_EXITCODE=1
 # npm run nightwatch_remote_parallel || TEST_EXITCODE=1
 

nightwatch.js

@@ -53,8 +53,8 @@ module.exports = {
       'desiredCapabilities': {
         'browserName': 'safari',
         'javascriptEnabled': true,
-        'platform': 'OS X 10.11',
-        'version': '10.0',
+        'platform': 'macOS 10.13',
+        'version': '11.0',
         'acceptSslCerts': true,
         'build': 'build-' + buildId,
         'tunnel-identifier': 'browsersolidity_tests_' + buildId

src/app.js

@@ -523,7 +523,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
       editor: self._components.editor,
       config: self._api.config,
       txListener: txlistener,
-      contextview: self._components.contextView
+      contextview: self._components.contextView,
+      udapp: () => { return udapp }
     }
   })
   this._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))

src/app/panels/editor-panel.js

@@ -28,6 +28,7 @@ class EditorPanel {
       terminal: new Terminal({
         api: {
           cmdInterpreter: self._api.cmdInterpreter,
+          udapp: self._api.udapp,
           getPosition (event) {
             var limitUp = 36
             var limitDown = 20

src/app/panels/styles/terminal-styles.js

@@ -27,20 +27,20 @@ var css = csjs`
     display           : flex;
     align-items       : center;
     width             : 100%;
-    padding           : 5px;
   }
   .clear           {
-    margin-left       : 10px;
-    margin-right      : 10px;
+    margin-right      : 20px;
     width             : 10px;
     cursor            : pointer;
     color             : ${styles.terminal.icon_Color_TogglePanel};
+    display           : flex;
   }
   .clear:hover              {
     color             : ${styles.terminal.icon_HoverColor_Menu};
   }
   .toggleTerminal              {
-    margin-right      : 10px;
+    margin-right      : 20px;
+    margin-left       : 20px;
     font-size         : 14px;
     font-weight       : bold;
     cursor            : pointer;
@@ -56,6 +56,7 @@ var css = csjs`
     height            : 100%;
     overflow-y        : auto;
     font-family       : monospace;
+    margin            : 0px;
   }
   .terminal_bg     {
     display           : flex;
@@ -137,9 +138,21 @@ var css = csjs`
     align-items                 : center;
     justify-content             : center;
   }
-  .listen {
-    min-width         : 120px;
-    display           : flex;
+  .listen {}
+  .verticalLine {
+    border-left       : 1px solid ${styles.colors.veryLightGrey};
+    height            : 65%;
+    margin-right      : 30px;   }
+  .pendingTx {
+    border            : 1px solid ${styles.terminal.icon_HoverColor_Menu};
+    border-radius: 50%;
+    margin-right: 30px;
+    min-width: 13px;
+    height: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
   }
   .dragbarHorizontal  {
     position          : absolute;

src/app/panels/terminal.js

@@ -105,23 +105,40 @@ class Terminal {
         ${self._view.input}
       </div>
     `
-    self._view.icon = yo`<i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize} class="${css.toggleTerminal} fa fa-angle-double-down"></i>`
-    self._view.dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
+    self._view.icon = yo`
+      <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
+      class="${css.toggleTerminal} fa fa-angle-double-down"></i>`
+    self._view.dragbar = yo`
+      <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
     self._view.dropdown = self._components.dropdown.render()
+    self._view.pendingTxCount = yo`<div class=${css.pendingTx} title='Pending Transactions'>${self._view.pendingTxCount}</div>`
     self._view.bar = yo`
       <div class=${css.bar}>
         ${self._view.dragbar}
         <div class=${css.menu}>
           ${self._view.icon}
           <div class=${css.clear} onclick=${clear}>
-          <i class="fa fa-ban" aria-hidden="true" onmouseenter=${hover} onmouseleave=${hover}></i>
+            <i class="fa fa-ban" aria-hidden="true" title="Clear console"
+            onmouseenter=${hover} onmouseleave=${hover}></i>
+          </div>
+          ${self._view.pendingTxCount}
+          <div class=${css.verticalLine}></div>
+          <div class=${css.listen}>
+            <input onchange=${listenOnNetwork} type="checkbox"
+            title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you">
           </div>
           ${self._view.dropdown}
-          <div class=${css.search}><i class="fa fa-search ${css.searchIcon}" aria-hidden="true"></i><input type="text" class=${css.filter} onkeydown=${filter}  placeholder="Search transactions"></div>
-          <div class=${css.listen}><input onchange=${listenOnNetwork} type="checkbox"><label title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created from the GUI">Listen on network</label></div>
+          <div class=${css.search}>
+            <i class="fa fa-search ${css.searchIcon}" aria-hidden="true"></i>
+            <input type="text" class=${css.filter} onkeydown=${filter}  placeholder="Search transactions">
+          </div>
         </div>
       </div>
     `
+    setInterval(() => {
+      updatePendingTxs(self._api, self._view.pendingTxCount)
+    }, 5000)
+
     function listenOnNetwork (ev) {
       self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
     }
@@ -563,5 +580,10 @@ function domTerminalFeatures (self, scopedCommands) {
 }
 
 function blockify (el) { return yo`<div class=${css.block}>${el}</div>` }
+// PENDING TX
+function updatePendingTxs (api, el) {
+  var count = Object.keys(api.udapp().pendingTransactions()).length
+  el.innerText = count
+}
 
 module.exports = Terminal

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

@@ -8,11 +8,29 @@ var css = csjs`
     display: flex;
     flex-direction: column;
   }
+  .instanceContainerTitle {
+    font-weight: bold;
+    margin-bottom: 5%;
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+  }
   .settings {
     ${styles.rightPanel.runTab.box_RunTab}
     margin-bottom: 2%;
     padding: 10px 15px 15px 15px;
   }
+  .recorderCount {
+    border: 1px solid ${styles.rightPanel.runTab.icon_HoverColor};
+    border-radius: 50%;
+    margin-right: 30px;
+    min-width: 13px;
+    height: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+  }
   .crow {
     margin-top: .5em;
     display: flex;
@@ -54,11 +72,13 @@ var css = csjs`
     width: 250px;
   }
   .instanceContainer {
+    ${styles.rightPanel.runTab.box_Instance}
     display: flex;
     flex-direction: column;
-    margin-top: 2%;
+    margin-bottom: 2%;
     border: none;
     text-align: center;
+    padding: 10px 0px 15px 15px;
   }
   .pendingTxsContainer  {
     ${styles.rightPanel.runTab.box_Instance}
@@ -70,8 +90,16 @@ var css = csjs`
   }
   .container {
     ${styles.rightPanel.runTab.box_RunTab}
-    margin-top: 2%;
+    margin-bottom: 2%;
+  }
+  .recorderCollapsedView,
+  .recorderExpandedView {
+    display: flex;
+    flex-direction: column;
   }
+  .recorderDescription {
+    margin: 0 15px 15px 0;
+   }
   .contractNames {
     ${styles.rightPanel.runTab.dropdown_RunTab}
     width: 100%;
@@ -105,6 +133,7 @@ var css = csjs`
   .noInstancesText {
     ${styles.rightPanel.runTab.box_Instance}
     font-style: italic;
+    text-align: left;
   }
   .pendingTxsText {
     ${styles.rightPanel.runTab.borderBox_Instance}
@@ -176,14 +205,14 @@ var css = csjs`
   .networkItem {
     margin-right: 5px;
   }
-  .clearinstance {}
+  .clearinstance {
+    margin-right: 15px;
+  }
   .transactionActions {
     display: flex;
-    width: 70px;
-    justify-content: space-between;
-    border: 1px solid ${styles.rightPanel.runTab.additionalText_Color};
-    padding: 5px;
-    border-radius: 3px;
+    justify-content: space-evenly;
+    ${styles.rightPanel.runTab.box_Info_RunTab};
+    width: 145px;
 }
 `
 

src/app/ui/card.js

+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles-guide/theme-chooser')
+var styles = styleGuide.chooser()
+var remixLib = require('remix-lib')
+var EventManager = remixLib.EventManager
+
+module.exports = class Card {
+  constructor (api, events, opts) {
+    const self = this
+    self._api = api
+    self._events = events
+    self._opts = opts
+    self._view = {}
+    self.event = new EventManager()
+  }
+  render () {
+    const self = this
+    if (self._view.el) return self._view.el
+
+    self._view.cardBody = yo`<div class=${css.cardBody}></div>`
+    self._view.arrow = yo`<i class="${css.arrow} fa fa-angle-up"
+    onclick=${(ev) => trigger(ev.target)}></i>`
+
+    self._view.expandCollapseButton = yo`
+    <div class=${css.expandCollapseButton}>${self._view.arrow}</div>`
+
+    self._view.statusBar = yo`<div class=${css.statusBar}>${self._opts.collapsedView}</div>`
+
+    self._view.cardHeader = yo`
+    <div class=${css.cardHeader}>
+      <div class=${css.cardTitles}>
+        <div class=${css.cardTitle}>${self._opts.title}</div>
+        ${self._view.statusBar}
+      </div>
+      <div class=${css.expandCollapseButton}>${self._view.expandCollapseButton}</div>
+    </div>`
+
+    function trigger (el) {
+      var body = self._view.cardBody
+      var status = self._view.statusBar
+      el.classList.toggle('fa-angle-down')
+      var arrow = el.classList.toggle('fa-angle-up') ? 'down' : 'up'
+      self.event.trigger('expandCollapseCard', [arrow, body, status])
+    }
+
+    // HTML
+    self._view.el = yo`
+      <div class=${css.cardContainer}>
+        ${self._view.cardHeader}
+        ${self._view.cardBody}
+      </div>`
+
+    return self._view.el
+  }
+
+}
+
+const css = csjs`
+  .cardContainer {
+    ${styles.remix.solidBox};
+    margin-bottom       : 2%;
+  }
+  .cardHeader {
+    display             : flex;
+    justify-content     : space-between;
+  }
+  .statusBar {}
+  .cardBody {}
+  .cardTitles {
+    display             : flex;
+    flex-direction      : row;
+    align-items         : center;
+  }
+  .cardTitle {
+    font-size           : 13px;
+    font-weight         : bold;
+    color               : ${styles.appProperties.mainText_Color};
+    margin-right        : 5px;
+  }
+  .expandCollapseButton {}
+  .arrow {
+    margin-right        : 15px;
+    color               : ${styles.appProperties.icon_Color};
+    font-weight         : bold;
+    cursor              : pointer;
+    font-size           : 14px;
+  }
+  .arrow:hover {
+    color               : ${styles.appProperties.icon_HoverColor};
+  }
+
+`

src/app/ui/styles-guide/style-guide.js

@@ -390,7 +390,12 @@ function styleGuide () {
       tooltip_CopyToClipboard_Color: appProperties.tooltip_Color,
 
       icon_Color_CopyToClipboard: appProperties.icon_Color,
-      icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor
+      icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor,
+
+      solidBox: appProperties.uiElements.solidBorderBox({
+        BackgroundColor: appProperties.solidBox_BackgroundColor,
+        Color: appProperties.solidBox_TextColor
+      })
     },
 
     /* ------------------------------------------------------
@@ -569,6 +574,12 @@ function styleGuide () {
           Color: appProperties.solidBox_TextColor
         }),
 
+        box_Info_RunTab: appProperties.uiElements.dottedBorderBox({
+          BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBorderBox_TextColor
+        }),
+
         dropdown_RunTab: appProperties.uiElements.dropdown({
           BackgroundColor: appProperties.dropdown_BackgroundColor,
           BorderColor: appProperties.dropdown_BorderColor,

src/app/ui/styles/dropdown-styles.js

@@ -10,6 +10,7 @@ var css = csjs`
     display           : flex;
     flex-direction    : column;
     margin-right      : 10px;
+    width             : auto;
   }
   .selectbox          {
     display           : flex;

src/recorder.js

@@ -131,6 +131,7 @@ class Recorder {
   append (timestamp, record) {
     var self = this
     self.data.journal.push({ timestamp, record })
+    self.event.trigger('newTxRecorded', [self.data.journal.length])
   }
 
   /**
@@ -167,6 +168,7 @@ class Recorder {
     self.data._abis = {}
     self.data._contractABIReferences = {}
     self.data._linkReferences = {}
+    self.event.trigger('cleared', [])
   }
 
   /**

src/universal-dapp-styles.js

@@ -10,7 +10,7 @@ var css = csjs`
   .title {
     ${styles.rightPanel.runTab.titlebox_RunTab}
     display: flex;
-    justify-content: end;
+    justify-content: space-between;
     align-items: center;
     font-size: 11px;
     height: 30px;
@@ -21,6 +21,9 @@ var css = csjs`
     overflow: visible;
     margin-bottom: 10px;
   }
+  .noInstancesText {
+
+  }
   .titleLine {
     display: flex;
     align-items: baseline;
@@ -35,11 +38,9 @@ var css = csjs`
     color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard};
   }
   .instance {
-    ${styles.rightPanel.runTab.box_Instance};
-    margin-bottom: 10px;
-    padding: 10px 15px 15px 15px;
-    position: relative;
-    overflow: visible;
+    min-width: 310px;
+    display: flex;
+    flex-direction: column;
   }
   .instance .title:before {
     content: "\\25BE";
@@ -81,7 +82,9 @@ var css = csjs`
   .closeIcon {
     font-size: 12px;
     cursor: pointer;
+    margin-left: 5px;
   }
+  .udapp {}
   .udappClose {
     display: flex;
     justify-content: flex-end;
@@ -211,7 +214,7 @@ var css = csjs`
     margin-right: 5%;
     font-size: 10px;
     border-width: 1px;
-    width: inherit; 
+    width: inherit;
   }
   .multiHeader button {
     display: inline-block;

src/universal-dapp-ui.js

@@ -14,7 +14,6 @@ var MultiParamManager = require('./multiParamManager')
 function UniversalDAppUI (udapp, opts = {}) {
   var self = this
   this.udapp = udapp
-
   self.el = yo`<div class=${css.udapp}></div>`
 }
 
@@ -23,6 +22,10 @@ UniversalDAppUI.prototype.reset = function () {
 }
 
 UniversalDAppUI.prototype.renderInstance = function (contract, address, contractName) {
+  var noInstances = document.querySelector('[class^="noInstancesText"]')
+  if (noInstances) {
+    noInstances.parentNode.removeChild(noInstances)
+  }
   var abi = this.udapp.getABI(contract)
   return this.renderInstanceFromABI(abi, address, contractName)
 }
@@ -33,22 +36,25 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
 // this returns a DOM element
 UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) {
   var self = this
-
-  function remove () { instance.remove() }
-
   address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
-  var instance = yo`<div class="instance ${css.instance}" id="instance${address}"></div>`
+  var instance = yo`<div class="instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
   var context = self.udapp.context()
 
   var shortAddress = helper.shortenAddress(address)
-  var title = yo`<div class="${css.title}" onclick=${toggleClass}>
+  var title = yo`
+    <div class="${css.title}" onclick=${toggleClass}>
     <div class="${css.titleText}"> ${contractName} at ${shortAddress} (${context}) </div>
     ${copyToClipboard(() => address)}
   </div>`
 
   if (self.udapp.removable_instances) {
     var close = yo`<div class="${css.udappClose}" onclick=${remove}><i class="${css.closeIcon} fa fa-close" aria-hidden="true"></i></div>`
-    instance.appendChild(close)
+    title.appendChild(close)
+  }
+
+  function remove () {
+    instance.remove()
+    // @TODO perhaps add a callack here to warn the caller that the instance has been removed
   }
 
   function toggleClass () {

test-browser/helpers/contracts.js

@@ -43,7 +43,7 @@ function getCompiledContracts (browser, compiled, callback) {
 function createContract (browser, inputParams, callback) {
   browser.click('.runView')
   .setValue('div[class^="contractActionsContainerSingle"] input', inputParams, function () {
-    browser.click('#runTabView button[class^="instanceButton"]').perform(function () { callback() })
+    browser.click('#runTabView button[class^="instanceButton"]').pause(500).perform(function () { callback() })
   })
 }
 

test-browser/tests/ballot.js

@@ -36,6 +36,8 @@ function runTests (browser, testData) {
   }).click('.runView')
       .setValue('input[placeholder="uint8 _numProposals"]', '1')
       .click('#runTabView button[class^="instanceButton"]')
+      .waitForElementPresent('.instance:nth-of-type(2)')
+      .click('.instance:nth-of-type(2)')
       .testFunction('delegate - transact (not payable)', '0x0571a2439ea58bd349dd130afb8aff62a33af14c06de0dbc3928519bdf13ce2e',
         `[vm]\nfrom:0xca3...a733c\nto:Ballot.delegate(address) 0x692...77b3a\nvalue:0 wei\ndata:0x5c1...4d2db\nlogs:0\nhash:0x057...3ce2e`,
         {types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"'}, null, null)
@@ -83,9 +85,10 @@ function runTests (browser, testData) {
           done()
         })
       })
+      .pause(500)
       .perform((client, done) => {
         console.log('delegate - transact (not payable)')
-        browser.testFunction('delegate - transact (not payable)', '0xd3cd54e2f76f3993078ecf9e1b54a148def4520afc141a182293b3610bddf10f',
+        browser.waitForElementPresent('.instance:nth-of-type(2)').click('.instance:nth-of-type(2)').testFunction('delegate - transact (not payable)', '0xd3cd54e2f76f3993078ecf9e1b54a148def4520afc141a182293b3610bddf10f',
               `[vm]\nfrom:0xca3...a733c\nto:Ballot.delegate(address) 0x692...77b3a\nvalue:0 wei\ndata:0x5c1...4d2db\nlogs:0\nhash:0xd3c...df10f`,
               {types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"'}, null, null, () => { done() })
       }).end()

test-browser/tests/compiling.js

@@ -39,7 +39,8 @@ function testSimpleContract (browser, callback) {
   contractHelper.testContracts(browser, 'Untitled.sol', sources[0]['browser/Untitled.sol'], ['TestContract'], function () {
     browser.click('.runView')
       .click('#runTabView button[class^="instanceButton"]')
-      .pause(500)
+      .waitForElementPresent('.instance:nth-of-type(2)')
+      .click('.instance:nth-of-type(2)')
       .click('#runTabView .instance div[class^="title"]')
       .click('#runTabView .instance div[class^="title"]')
       .testFunction('f - transact (not payable)',
@@ -69,7 +70,8 @@ function testReturnValues (browser, callback) {
   contractHelper.testContracts(browser, 'returnValues.sol', sources[1]['browser/returnValues.sol'], ['testReturnValues'], function () {
     browser.click('.runView')
       .click('#runTabView button[class^="instanceButton"]')
-      .pause(500)
+      .waitForElementPresent('.instance:nth-of-type(2)')
+      .click('.instance:nth-of-type(2)')
       .testFunction('retunValues1 - transact (not payable)',
         '0x79dc928d149d2ade02ab610a8ae290636222d034d4adce0bb08a68401e3d1f7f',
         `[vm]\nfrom:0xca3...a733c\nto:testReturnValues.retunValues1() 0x5e7...26e9f\nvalue:0 wei\ndata:0x9ed...59eb7\nlogs:0\nhash:0x79d...d1f7f`,
@@ -107,7 +109,8 @@ function testInputValues (browser, callback) {
   contractHelper.testContracts(browser, 'inputValues.sol', sources[2]['browser/inputValues.sol'], ['test'], function () {
     browser.click('.runView')
         .click('#runTabView button[class^="instanceButton"]')
-        .pause(500)
+        .waitForElementPresent('.instance:nth-of-type(2)')
+        .click('.instance:nth-of-type(2)')
       .testFunction('inputValue1 - transact (not payable)',
         '0x917a873d27d105213eaf5461e14780387ccceb66fed574f8432d1963917832ae',
         `[vm]\nfrom:0xca3...a733c\nto:test.inputValue1(uint256,int256,string) 0x8c1...401f5\nvalue:0 wei\ndata:0xd69...00000\nlogs:0\nhash:0x917...832ae`,

test-browser/tests/units/testRecorder.js

@@ -10,7 +10,12 @@ module.exports = {
     contractHelper.addFile(browser, 'scenario.json', {content: records}, () => {
       browser
         .click('.runView')
+        .click('div[class^="cardContainer"] i[class^="arrow"]')
         .click('#runTabView .runtransaction')
+        .waitForElementPresent('.instance:nth-of-type(2)')
+        .click('.instance:nth-of-type(2)')
+        .waitForElementPresent('.instance:nth-of-type(3)')
+        .click('.instance:nth-of-type(3)')
         .clickFunction('getInt - call')
         .clickFunction('getAddress - call')
         .clickFunction('getFromLib - call')
@@ -31,6 +36,8 @@ module.exports = {
             done()
           })
         })
+        .waitForElementPresent('.instance:nth-of-type(2)')
+        .click('.instance:nth-of-type(2)')
         .perform((client, done) => {
           browser.clickFunction('set - transact (not payable)', {types: 'uint256 _p', values: '34'})
               .click('i.savetransaction').modalFooterOKClick().getEditorValue(function (result) {