Merge pull request #1806 from ethereum/bootstrap_runtab_aliscious

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

@@ -117,7 +117,7 @@ var css = csjs`
     margin: 0;
     min-width: 100px;
     width: 100px;
-    font-size: 10px;
+    /* font-size: 10px; */
     word-break: inherit;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;

src/multiParamManager.js

@@ -123,6 +123,9 @@ class MultiParamManager {
     var onClick = (domEl) => {
       this.clickCallBack(this.funABI.inputs, this.basicInputField.value)
     }
+// TODO: if this is a lookup only make this button btn-info
+// otherwise it needs to have btn-warning injected
+// or do we need to only do this in 1 place - I have a feeling that this will happen in multiple places
 
     this.contractActionsContainerSingle = yo`<div class="${css.contractActionsContainerSingle}" >
       <button onclick=${() => { onClick() }} class="${css.instanceButton} btn btn-sm">${title}</button>${this.basicInputField}<i class="fa fa-angle-down ${css.methCaret}" onclick=${() => { this.switchMethodViewOn() }} title=${title} ></i>
@@ -171,14 +174,18 @@ class MultiParamManager {
     </div>`
 
     var contractProperty = yo`<div class="${css.contractProperty}">${this.contractActionsContainerSingle} ${this.contractActionsContainerMulti}</div>`
-
+// TODO: add class for btn-info to the button and remove stuff from the class
     if (this.lookupOnly) {
       contractProperty.classList.add(css.constant)
       button.setAttribute('title', (title + ' - call'))
       button.innerHTML = 'call'
       this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).setAttribute('title', (title + ' - call'))
+      this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).classList.add('btn-info')
+      button.classList.add('btn-info')
     } else {
+      this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).classList.add('btn-warning')
       button.innerHTML = 'transact'
+      button.classList.add('btn-warning')
     }
 
     if (this.funABI.inputs && this.funABI.inputs.length > 0) {

src/universal-dapp-styles.js

@@ -10,13 +10,14 @@ var css = csjs`
     justify-content: space-between;
     align-items: center;
     font-size: 11px;
-    height: 30px;
-    width: 97%;
+    /* height: 30px; */
+    /* width: 97%; */
     overflow: hidden;
     word-break: break-word;
     line-height: initial;
     overflow: visible;
-    margin-bottom: 10px;
+    margin-bottom: 0px;
+    padding-left: 10px;
   }
   .noInstancesText {
 
@@ -26,7 +27,7 @@ var css = csjs`
     align-items: baseline;
   }
   .titleText {
-    margin-right: 1em;
+    /* margin-right: 1em; */
     word-break: break-word;
     min-width: 230px;
   }
@@ -34,33 +35,29 @@ var css = csjs`
   .title .copy {
     color: var(--primary);
   }
+  .titleExpander {
+    margin-right: 10px;
+  }
+  .nameNbuts {
+    flex-wrap: nowrap;
+  }
   .instance {
     min-width: 310px;
     display: block;
     /* display: flex; */
     flex-direction: column;
-    padding: 5px 0 0 10px;
+    /* padding: 5px 0 0 10px; */
     margin-bottom: 10px;
   }
-  .instance .title:before {
-    content: "\\25BE";
-    margin-right: 5%;
-    font-size: 1.2rem
-  }
-  .instance.hidesub .title:before {
-    content: "\\25B8";
-    margin-right: 5%;
-    font-size: 1.2rem;
-  }
-  .instance.hidesub > * {
-      display: none;
-  }
   .instance.hidesub .title {
       display: flex;
   }
   .instance.hidesub .udappClose {
       display: flex;
   }
+  .instance.hidesub > * {
+    display: none;
+  }
   .methCaret {
     margin-right: 5px;
     cursor: pointer;
@@ -68,6 +65,14 @@ var css = csjs`
     padding-top: 5px;
     vertical-align: top;
   }
+  .cActionsWrapper {
+    padding: 10px;
+    border: 1px solid rgba(0,0,0,0.125);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0.25rem;
+    border-top-rightt-radius: 0;
+    border-bottom-right-radius: 0.25rem;
+  }
   .group:after {
     content: "";
     display: table;
@@ -109,10 +114,10 @@ var css = csjs`
     border-bottom-left-radius: 0;
   }
   .contractProperty button {
-    background-color: var(--warning);
+    /* background-color: var(--warning); */
     min-width: 100px;
     width: 100px;
-    font-size: 10px;
+    /* font-size: 10px; */
     margin:0;
     word-break: inherit;
   }
@@ -122,7 +127,7 @@ var css = csjs`
     border-color: lightgray;
   }
   .contractProperty.constant button {
-    background-color:var(--info);
+    /* background-color:var(--info); */
     min-width: 100px;
     width: 100px;
     font-size: 10px;
@@ -191,7 +196,7 @@ var css = csjs`
   .contractProperty.constant .multiTitle {
     display: inline-block;
     width: 90%;
-    font-size: 10px;
+    /* font-size: 10px; */
     height: 25px;
     padding-left: 20px;
     font-weight: bold;
@@ -233,13 +238,13 @@ var css = csjs`
     border-left: none;
     padding: 8px 8px 8px 10px;
     font-size: 10px;
-    height: 25px;
+    /* height: 25px; */
   }
   .hasArgs button {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right: 0;
-    height: 25px;
+    /* height: 25px; */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

src/universal-dapp-ui.js

@@ -63,34 +63,47 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
 UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) {
   var self = this
   address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
-  var instance = yo`<div class="instance card ${css.instance} ${css.hidesub}" 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}>
-    <div class="${css.titleText}"> ${contractName} at ${shortAddress} (${context}) </div>
-    ${copyToClipboard(() => address)}
+    <div class="${css.title} alert alert-dark">
+      <button class="btn btn-light ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}"><i class="fa fa-caret-right" aria-hidden="true"></i></button>
+      <div class="input-group ${css.nameNbuts}">
+        <div class="${css.titleText} input-group-prepend"><span class="input-group-text"> ${contractName} at ${shortAddress} (${context})</span></div>
+        <div class="btn-group">
+          <button class="btn btn-secondary">${copyToClipboard(() => address)}</button>
+        </div>
+      </div>
   </div>`
 
-  var close = yo`<div class="${css.udappClose}" onclick=${remove}><i class="${css.closeIcon} fa fa-close" aria-hidden="true"></i></div>`
-  title.appendChild(close)
+  var close = yo`<button class="${css.udappClose} btn btn-secondary" onclick=${remove}><i class="${css.closeIcon} fa fa-close" aria-hidden="true"></i></button>`
+  title.querySelector('.btn-group').appendChild(close)
+
+  var contractActionsWrapper = yo`
+  <div class="${css.cActionsWrapper}">
+  </div>`
 
   function remove () {
     instance.remove()
     // @TODO perhaps add a callack here to warn the caller that the instance has been removed
   }
 
-  function toggleClass () {
+  function toggleClass (e) {
     $(instance).toggleClass(`${css.hidesub}`)
+    // e.currentTarget.querySelector('i')
+    e.currentTarget.querySelector('i').classList.toggle(`fa-caret-right`)
+    e.currentTarget.querySelector('i').classList.toggle(`fa-caret-down`)
   }
 
   instance.appendChild(title)
+  instance.appendChild(contractActionsWrapper)
 
   // Add the fallback function
   var fallback = self.udapp.getFallbackInterface(contractABI)
   if (fallback) {
-    instance.appendChild(this.getCallButton({
+    contractActionsWrapper.appendChild(this.getCallButton({
       funABI: fallback,
       address: address,
       contractAbi: contractABI,
@@ -103,7 +116,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
       return
     }
     // @todo getData cannot be used with overloaded functions
-    instance.appendChild(this.getCallButton({
+    contractActionsWrapper.appendChild(this.getCallButton({
       funABI: funABI,
       address: address,
       contractAbi: contractABI,

test-browser/tests/ballot.js

@@ -38,7 +38,7 @@ function runTests (browser, testData) {
       .setValue('input[placeholder="uint8 _numProposals"]', '1')
       .click('#runTabView button[class^="instanceButton"]')
       .waitForElementPresent('.instance:nth-of-type(2)')
-      .click('.instance:nth-of-type(2)')
+      .click('.instance:nth-of-type(2) > div > button')
       .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)
@@ -66,7 +66,7 @@ function runTests (browser, testData) {
         })
       })
       .clickLaunchIcon('run')
-      .click('div[class^="udappClose"]')
+      .click('button[class^="udappClose"]')
       .perform((client, done) => {
         console.log('ballot.abi')
         contractHelper.addFile(browser, 'ballot.abi', { content: ballotABI }, () => {
@@ -89,7 +89,7 @@ function runTests (browser, testData) {
       .pause(500)
       .perform((client, done) => {
         console.log('delegate - transact (not payable)')
-        browser.waitForElementPresent('.instance:nth-of-type(2)').click('.instance:nth-of-type(2)').testFunction('delegate - transact (not payable)', '0xd3cd54e2f76f3993078ecf9e1b54a148def4520afc141a182293b3610bddf10f',
+        browser.waitForElementPresent('.instance:nth-of-type(2)').click('.instance:nth-of-type(2) > div > button').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

@@ -41,7 +41,7 @@ function testSimpleContract (browser, callback) {
     browser.clickLaunchIcon('run')
       .click('#runTabView button[class^="instanceButton"]')
       .waitForElementPresent('.instance:nth-of-type(2)')
-      .click('.instance:nth-of-type(2)')
+      .click('.instance:nth-of-type(2) > div > button')
       .click('#runTabView .instance div[class^="title"]')
       .click('#runTabView .instance div[class^="title"]')
       .testFunction('f - transact (not payable)',
@@ -72,7 +72,7 @@ function testReturnValues (browser, callback) {
     browser.clickLaunchIcon('run')
       .click('#runTabView button[class^="instanceButton"]')
       .waitForElementPresent('.instance:nth-of-type(2)')
-      .click('.instance:nth-of-type(2)')
+      .click('.instance:nth-of-type(2) > div > button')
       .testFunction('retunValues1 - transact (not payable)',
         '0xc3660c7ab6899f196e77d3ab3749169e22c00ae7f1b8fe3af0ce54df49504019',
         `[vm]\nfrom:0xca3...a733c\nto:testReturnValues.retunValues1() 0x5e7...26e9f\nvalue:0 wei\ndata:0x9ed...59eb7\nlogs:0\nhash:0xc36...04019`,
@@ -110,7 +110,7 @@ function testInputValues (browser, callback) {
     browser.clickLaunchIcon('run')
         .click('#runTabView button[class^="instanceButton"]')
         .waitForElementPresent('.instance:nth-of-type(2)')
-        .click('.instance:nth-of-type(2)')
+        .click('.instance:nth-of-type(2) > div > button')
      .testFunction('inputValue1 - transact (not payable)',
         '0xf3265e3d9cd9299958bf81bed3cdfdd537942f85b9e0b95c5468c691d9396505',
         `[vm]\nfrom:0xca3...a733c\nto:test.inputValue1(uint256,int256,string) 0x8c1...401f5\nvalue:0 wei\ndata:0xd69...00000\nlogs:0\nhash:0xf32...96505`,

test-browser/tests/simpleContract.js

@@ -84,7 +84,7 @@ function testAutoDeployLib (browser, callback) {
       contractHelper.createContract(browser, '', () => {
         contractHelper.getAddressAtPosition(browser, 0, (address) => {
           console.log(address)
-          browser.waitForElementPresent('.instance:nth-of-type(2)').click('.instance:nth-of-type(2)').perform(() => {
+          browser.waitForElementPresent('.instance:nth-of-type(2)').click('.instance:nth-of-type(2) > div > button').perform(() => {
             contractHelper.testConstantFunction(browser, address, 'get - call', '', '0: uint256: 45', () => { callback(null, browser) })
           })
         })
@@ -145,7 +145,7 @@ function checkDeployShouldSucceed (browser, address, callback) {
             contractHelper.createContract(browser, '', () => {
               contractHelper.getAddressAtPosition(browser, 1, (address) => {
                 browser.waitForElementPresent('.instance:nth-of-type(3)')
-                .click('.instance:nth-of-type(3)').perform(() => {
+                .click('.instance:nth-of-type(3) > div > button').perform(() => {
                   contractHelper.testConstantFunction(browser, address, 'get - call', '', '0: uint256: 45', () => { callback(null, browser) })
                 })
               })

test-browser/tests/units/testRecorder.js

@@ -14,9 +14,9 @@ module.exports = {
         .click('div[class^="cardContainer"] i[class^="arrow"]')
         .click('#runTabView .runtransaction')
         .waitForElementPresent('.instance:nth-of-type(2)')
-        .click('.instance:nth-of-type(2)')
+        .click('.instance:nth-of-type(2) > div > button')
         .waitForElementPresent('.instance:nth-of-type(3)')
-        .click('.instance:nth-of-type(3)')
+        .click('.instance:nth-of-type(3) > div > button')
         .clickFunction('getInt - call')
         .clickFunction('getAddress - call')
         .clickFunction('getFromLib - call')
@@ -38,7 +38,7 @@ module.exports = {
           })
         })
         .waitForElementPresent('.instance:nth-of-type(2)')
-        .click('.instance:nth-of-type(2)')
+        .click('.instance:nth-of-type(2) > div > button')
         .perform((client, done) => {
           browser.clickFunction('set - transact (not payable)', {types: 'uint256 _p', values: '34'})
               .click('i.savetransaction').modalFooterOKClick().getEditorValue(function (result) {