styling

src/app/debugger/debuggerUI/TxBrowser.js

@@ -80,21 +80,13 @@ TxBrowser.prototype.setState = function (state) {
   }
 }
 
-TxBrowser.prototype.setTx = function (blockNumber, txNumber) {
-  this.blockNumber = blockNumber
-  this.txNumber = txNumber
-  if (this.view) {
-    yo.update(this.view, this.render())
-  }
-}
-
 TxBrowser.prototype.render = function () {
   var self = this
   var view = yo`<div class="${css.container}">
         <div class="${css.txContainer}">
           <div class="${css.txinputs} p-1 input-group">
-            <input value=${this.blockNumber || ''} class="form-control ${css.txinput}" onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
-            <input value=${this.txNumber || ''} class="form-control ${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
+            <input value="${this.blockNumber || ''}" class="form-control ${css.txinput}" onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
+            <input value="${this.txNumber || ''}" class="form-control ${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
           </div>
           <div class="${css.txbuttons} btn-group p-1">
             <button class='btn btn-primary btn-sm ${css.txbutton}' id='load' title='${this.debugging ? 'Stop' : 'Start'} debugging' onclick=${function () { self.submit() }}>${this.debugging ? 'Stop' : 'Start'} debugging</button>
@@ -102,7 +94,9 @@ TxBrowser.prototype.render = function () {
         </div>
         <span id='error'></span>
       </div>`
-
+  if (this.debugging) {
+    view.querySelectorAll('input').forEach(element => { element.setAttribute('disabled', '') })
+  }
   if (!this.view) {
     this.view = view
   }

src/app/debugger/debuggerUI/VmDebugger.js

@@ -16,8 +16,10 @@ var DropdownPanel = require('./vmDebugger/DropdownPanel')
 
 var css = csjs`
   .asmCode {
+    width: 100%;
   }
   .stepDetail {
+    width: 100%;
   }
   .vmheadView {
     margin-top:10px;

src/app/debugger/debuggerUI/vmDebugger/DropdownPanel.js

@@ -121,7 +121,7 @@ DropdownPanel.prototype.render = function (overridestyle, node) {
       <div class='message' style='display:none'></div>
     </div>`
   var view = yo`
-    <div class="border border-primary rounded p-1 m-1">
+    <div class="border rounded p-1 m-1 bg-light">
     <style>
       @-moz-keyframes spin {
         to { -moz-transform: rotate(359deg); }