From 2d615054e65aa2b999da23a824d77231531599dc Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Mon, 17 Jun 2019 14:07:12 +0200
Subject: [PATCH] fixed disabel for deploy and run and debugger tabs

---
 src/app/debugger/debuggerUI/TxBrowser.js   | 67 ++++++++++++++++------
 src/app/files/file-explorer.js             |  8 +--
 src/app/panels/file-panel.js               |  2 +-
 src/app/panels/styles/file-panel-styles.js |  3 +
 src/app/tabs/runTab/contractDropdown.js    | 19 +++++-
 5 files changed, 72 insertions(+), 27 deletions(-)

diff --git a/src/app/debugger/debuggerUI/TxBrowser.js b/src/app/debugger/debuggerUI/TxBrowser.js
index 12abb5137a..e656dbecc6 100644
--- a/src/app/debugger/debuggerUI/TxBrowser.js
+++ b/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">
-            <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'}
-            />
-          </div>
-          <div class="${css.txbuttons} btn-group p-1">
-           ${action}
-          </div>
+  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'
+      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>
-        <span id='error'></span>
-      </div>`
+        <div class="${css.txbuttons} btn-group p-1">
+          ${txButton}
+        </div>
+      </div>
+      <span id='error'></span>
+    </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,16 @@ TxBrowser.prototype.render = function () {
   return view
 }
 
+TxBrowser.prototype.txInputChanged = function (event) {
+
+  // todo check validation of txnumber
+  //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
diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js
index b4b24f2841..0e113b6e8b 100644
--- a/src/app/files/file-explorer.js
+++ b/src/app/files/file-explorer.js
@@ -157,7 +157,7 @@ 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}"
@@ -165,7 +165,7 @@ function fileExplorer (localRegistry, files, menuItems) {
             onkeydown=${editModeOff}
             onblur=${editModeOff}
           >${key.split('/').pop()}
-          </label>
+          </span>
           ${isRoot ? self.renderMenuItems() : ''}
         </div>
       `
@@ -522,12 +522,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`
diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js
index 2c8d844611..c63117ba95 100644
--- a/src/app/panels/file-panel.js
+++ b/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>
diff --git a/src/app/panels/styles/file-panel-styles.js b/src/app/panels/styles/file-panel-styles.js
index 6effb8a4f1..a2fc6a7c67 100644
--- a/src/app/panels/styles/file-panel-styles.js
+++ b/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;
   }
diff --git a/src/app/tabs/runTab/contractDropdown.js b/src/app/tabs/runTab/contractDropdown.js
index f32a7bad35..51f974c191 100644
--- a/src/app/tabs/runTab/contractDropdown.js
+++ b/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" onclick=${this.loadFromAddress.bind(this)}>At Address</button>`
+    this.atAddressButtonInput = yo`<input class="${css.input} ${css.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,17 +62,29 @@ 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>
       </div>
     `
+    if (!this.atAddressButtonInput.value) {
+      this.atAddress.setAttribute('disabled', 'true')
+    } else {
+      this.atAddress.removeAttribute('disabled')
+    }
     this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this))
     this.setInputParamsPlaceHolder()
+    if (!this.el) {
+      this.el = el
+    }
     return el
   }
 
+  atAddressChanged(event) {
+    yo.update(this.el, this.render())
+  }
+
   changeCurrentFile (currentFile) {
     if (!document.querySelector(`.${css.contractNames}`)) return
     document.querySelector(`.${css.contractNames}`).classList.remove(css.contractNamesError)