Merge pull request #2118 from ethereum/styleFixes_l

Style fixes for landing and deploy&run

src/app/debugger/debuggerUI/TxBrowser.js

@@ -84,30 +84,47 @@ TxBrowser.prototype.setState = function (state) {
 
 TxBrowser.prototype.render = function () {
   var self = this
-  let action = yo`<button class='btn btn-primary btn-sm ${css.txbutton}' id='load' title='${this.state.debugging ? 'Stop' : 'Start'} debugging' onclick=${function () { self.submit() }}>${this.state.debugging ? 'Stop' : 'Start'} debugging</button>`
-  var view = yo`<div class="${css.container}">
-        <div class="${css.txContainer}">
-          <div class="${css.txinputs} p-1 input-group">
+  this.state.txNumberInput = yo`
     <input
       value="${this.state.txNumber || ''}"
       class="form-control m-0 ${css.txinput}"
       id='txinput'
       onkeyup=${function () { self.updateTxN(arguments[0]) }}
       type='text'
-              placeholder=${'Transaction hash'}
+      oninput=${this.txInputChanged.bind(this)}
+      placeholder=${'Transaction hash, should start with 0x'}
     />
+  `
+  let txButton = yo`
+    <button
+      class='btn btn-primary btn-sm ${css.txbutton}'
+      id='load'
+      title='${this.state.debugging ? 'Stop' : 'Start'} debugging'
+      onclick=${function () { self.submit() }}
+    >
+      ${this.state.debugging ? 'Stop' : 'Start'} debugging
+    </button>
+  `
+  var view = yo`
+    <div class="${css.container}">
+      <div class="${css.txContainer}">
+        <div class="${css.txinputs} p-1 input-group">
+          ${this.state.txNumberInput}
         </div>
         <div class="${css.txbuttons} btn-group p-1">
-           ${action}
+          ${txButton}
         </div>
       </div>
       <span id='error'></span>
-      </div>`
+    </div>
+  `
   if (this.state.debugging) {
     view.querySelectorAll('input').forEach(element => { element.setAttribute('disabled', '') })
   }
   if (!this.state.txNumber) {
-    action.setAttribute('disabled', 'disabled')
+    view.querySelector("button[id='load']").setAttribute('disabled', '')
+  } else {
+    this.state.txNumberInput.removeAttribute('diabled', '')
   }
   if (!this.view) {
     this.view = view
@@ -116,4 +133,15 @@ TxBrowser.prototype.render = function () {
   return view
 }
 
+TxBrowser.prototype.txInputChanged = function (event) {
+  // todo check validation of txnumber in the input element, use
+  // required
+  // oninvalid="setCustomValidity('Please provide a valid transaction number, must start with 0x and have length of 22')"
+  // pattern="^0[x,X]+[0-9a-fA-F]{22}"
+  // this.state.txNumberInput.setCustomValidity('')
+
+  this.state.txNumber = event.target.value
+  yo.update(this.view, this.render())
+}
+
 module.exports = TxBrowser

src/app/files/file-explorer.js

@@ -157,15 +157,16 @@ function fileExplorer (localRegistry, files, menuItems) {
       var isRoot = data.path === self.files.type
       return yo`
         <div class="${css.items}">
-          <label
+          <span
             title="${data.path}"
             class="${css.label} ${!isRoot ? css.leaf : ''}"
             data-path="${data.path}"
             style="${isRoot ? 'font-weight:bold;' : ''}"
             onkeydown=${editModeOff}
             onblur=${editModeOff}
-          >${key.split('/').pop()}
-          </label>
+          >
+            ${key.split('/').pop()}
+          </span>
           ${isRoot ? self.renderMenuItems() : ''}
         </div>
       `
@@ -179,7 +180,7 @@ function fileExplorer (localRegistry, files, menuItems) {
     MENU_HANDLE = contextMenu(event, {
       'Rename': () => {
         if (self.files.readonly) { return tooltip('cannot rename folder. ' + self.files.type + ' is a read only explorer') }
-        var name = label.querySelector('label[data-path="' + key + '"]')
+        var name = label.querySelector('span[data-path="' + key + '"]')
         if (name) editModeOn(name)
       },
       'Delete': () => {
@@ -196,7 +197,7 @@ function fileExplorer (localRegistry, files, menuItems) {
     if (!self.files.readonly) {
       actions['Rename'] = () => {
         if (self.files.readonly) { return tooltip('cannot rename file. ' + self.files.type + ' is a read only explorer') }
-        var name = label.querySelector('label[data-path="' + key + '"]')
+        var name = label.querySelector('span[data-path="' + key + '"]')
         if (name) editModeOn(name)
       }
       actions['Delete'] = () => {
@@ -522,12 +523,12 @@ fileExplorer.prototype.renderMenuItems = function () {
     items = this.menuItems.map(({action, title, icon}) => {
       if (action === 'uploadFile') {
         return yo`
-          <span class="${icon} ${css.newFile}"  title="${title}">
+          <label class="${icon} ${css.newFile}"  title="${title}">
             <input type="file" onchange=${(event) => {
               event.stopPropagation()
               this.uploadFile(event)
             }} multiple />
-          </span>
+          </label>
         `
       } else {
         return yo`

src/app/panels/file-panel.js

@@ -83,7 +83,7 @@ module.exports = class Filepanel extends BaseApi {
       return yo`
         <div class=${css.container}>
           <div class="${css.fileexplorer}">           
-            <div>
+            <div class="${css.fileExplorerTree}">
               <div class=${css.treeview}>${fileExplorer.init()}</div>
               <div class="filesystemexplorer ${css.treeview}">${fileSystemExplorer.init()}</div>
               <div class="swarmexplorer ${css.treeview}">${swarmExplorer.init()}</div>

src/app/panels/styles/file-panel-styles.js

@@ -16,6 +16,9 @@ var css = csjs`
     padding-left      : 6px;
     padding-top       : 6px;
   }
+  .fileExplorerTree   {
+    cursor            : default;
+  }
   .gist            {
     padding           : 10px;
   }

src/app/tabs/runTab/contractDropdown.js

@@ -47,12 +47,13 @@ class ContractDropdownUI {
     this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="fas fa-times-circle ${css.errorIcon}" ></i>`
     var info = yo`<i class="fas fa-info ${css.infoDeployAction}" aria-hidden="true" title="*.sol files allows deploying and accessing contracts. *.abi files only allows accessing contracts."></i>`
 
-    this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="atAddress" />`
+    this.atAddress = yo`<button class="${css.atAddress} btn btn-sm btn-info" disabled id="runAndDeployAtAdressButton" onclick=${this.loadFromAddress.bind(this)}>At Address</button>`
+    this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="address of contract" oninput=${this.atAddressChanged.bind(this)} />`
     this.selectContractNames = yo`<select class="${css.contractNames} custom-select" disabled></select>`
 
     this.createPanel = yo`<div class="${css.button}"></div>`
     this.orLabel = yo`<div class="${css.orLabel}">or</div>`
-    var el = yo`
+    let el = yo`
       <div class="${css.container}">
         <div class="${css.subcontainer}">
           ${this.selectContractNames} ${this.compFails} ${info}
@@ -61,7 +62,7 @@ class ContractDropdownUI {
           ${this.createPanel}
           ${this.orLabel}
           <div class="${css.button} ${css.atAddressSect}">
-            <div class="${css.atAddress} btn btn-sm btn-info" onclick=${this.loadFromAddress.bind(this)}>At Address</div>
+            ${this.atAddress}
             ${this.atAddressButtonInput}
           </div>
         </div>
@@ -69,9 +70,20 @@ class ContractDropdownUI {
     `
     this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this))
     this.setInputParamsPlaceHolder()
+    if (!this.el) {
+      this.el = el
+    }
     return el
   }
 
+  atAddressChanged (event) {
+    if (!this.atAddressButtonInput.value) {
+      this.atAddress.setAttribute('disabled', 'true')
+    } else {
+      this.atAddress.removeAttribute('disabled')
+    }
+  }
+
   changeCurrentFile (currentFile) {
     if (!document.querySelector(`.${css.contractNames}`)) return
     document.querySelector(`.${css.contractNames}`).classList.remove(css.contractNamesError)

src/app/ui/landing-page/landing-page.js

@@ -38,6 +38,8 @@ let css = csjs`
   .jumboBtnContainer {
     float: left;
     padding-top: 15px;
+    display: flex;
+    white-space: nowrap;
   }
   .headlineContainer {
     float: left;
@@ -45,16 +47,15 @@ let css = csjs`
     margin: 0 50px 0 70px;
   }
   .hpSections {
+    min-width: 640px;
     margin: 0 60px;
   }
-  .solidityBtn {
-    margin-right: 40px;
-  }
   .labelIt {
     margin-bottom: 0;
   }
   .seeAll {
     margin-top: 7px;
+    white-space: nowrap;
   }
   .importFrom p {
     margin-right: 10px;
@@ -66,10 +67,9 @@ let css = csjs`
   .logoContainer img{
     height: 65px;
   }
-  .learnmore {
-    margin-right: 20px;
+  .enviroments {
+    display: flex;
   }
-
 }
 `
 
@@ -193,18 +193,18 @@ export class LandingPage extends BaseApi {
           <div class="${css.headlineContainer}">
             <h2 class="">The new layout has arrived</h2>
           </div>
-          <div class="${css.jumboBtnContainer}">
-            <button class="btn btn-primary btn-lg ${css.learnmore}" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
+          <div class="${css.jumboBtnContainer} px-5">
+            <button class="btn btn-primary btn-lg mx-3" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
             <button class="btn btn-secondary btn-lg" onclick=${() => { switchToPreviousVersion() }}>Use previous version</button>
           </div>
         </div><!-- end of jumbotron -->
       </div><!-- end of jumbotron container -->
       <div class="row ${css.hpSections}">
         <div id="col1" class="col-sm-6">
-          <div class="environment mb-5">
+          <div class="mb-5">
             <h4>Environments</h4>
-            <div>
-              <button class="btn btn-lg btn-secondary ${css.solidityBtn}" onclick=${() => { startSolidity() }}>Solidity</button>
+            <div class="${css.enviroments} pt-2">
+              <button class="btn btn-lg btn-secondary mr-3" onclick=${() => { startSolidity() }}>Solidity</button>
               <button class="btn btn-lg btn-secondary" onclick=${() => { startVyper() }}>Vyper</button>
             </div>
           </div>
@@ -240,7 +240,12 @@ export class LandingPage extends BaseApi {
             <h4>Featured Plugins</h4>
             <p class="mb-1 ${css.text}" onclick=${() => { startPipeline() }}>Pipeline</p>
             <p class="mb-1 ${css.text}" onclick=${() => { startDebugger() }}>Debugger</p>
-            <p class="mb-1"><button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-secondary ${css.seeAll}">See all Plugins <i class="fas fa-plug" ></i></button></p>
+            <p class="mb-1">
+              <button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-secondary ${css.seeAll}">
+                See all Plugins
+                <i class="fas fa-plug p-1" ></i>
+              </button>
+            </p>
           </div>
           <div class="resources">
             <h4>Resources</h4>

test-browser/commands/addAtAddressInstance.js

@@ -14,7 +14,7 @@ class addAtAddressInstance extends EventEmitter {
 
 function addInstance (browser, address, isValidFormat, isValidChecksum, callback) {
   browser.clickLaunchIcon('run').clearValue('.ataddressinput').setValue('.ataddressinput', address, function () {
-    browser.click('div[class^="atAddress"]')
+    browser.click('button[id^="runAndDeployAtAdressButton"]')
         .execute(function () {
           var ret = document.querySelector('div[class^="modal-body"] div').innerHTML
           document.querySelector('#modal-footer-ok').click()