Merge pull request #1979 from ethereum/debuggerView

Debugger view

src/app/components/panel.js

@@ -93,6 +93,7 @@ export class AbstractPanel {
     const el = this.contents[name]
     delete this.contents[name]
     if (el) el.parentElement.removeChild(el)
+    if (name === this.active) this.active = undefined
   }
 
   /**

src/app/debugger/debuggerUI.js

@@ -1,6 +1,7 @@
 var TxBrowser = require('./debuggerUI/TxBrowser')
 var StepManagerUI = require('./debuggerUI/StepManager')
 var VmDebugger = require('./debuggerUI/VmDebugger')
+var toaster = require('../ui/tooltip')
 
 var Debugger = require('remix-debug').TransactionDebugger
 
@@ -104,14 +105,12 @@ class DebuggerUI {
 
   startDebugging (blockNumber, txNumber, tx) {
     const self = this
-    if (this.debugger) delete this.debugger
+    if (this.debugger) this.unLoad()
 
     let compilers = this.registry.get('compilersartefacts').api
     let lastCompilationResult
     if (compilers['__last']) lastCompilationResult = compilers['__last']
 
-    // TODO debugging with source highlight is disabled. see line 98
-
     executionContext.detectNetwork((error, network) => {
       let web3
       if (error || !network) {
@@ -128,11 +127,14 @@ class DebuggerUI {
       })
 
       this.listenToEvents()
-
       this.debugger.debug(blockNumber, txNumber, tx, () => {
         self.stepManager = new StepManagerUI(this.debugger.step_manager)
         self.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic)
+        self.txBrowser.setState({ blockNumber, txNumber, debugging: true })
         self.renderDebugger()
+      }).catch((error) => {
+        toaster(error)
+        this.unLoad()
       })
     })
   }
@@ -167,8 +169,10 @@ class DebuggerUI {
     yo.update(this.stepManagerView, yo`<div></div>`)
     if (this.vmDebugger) this.vmDebugger.remove()
     if (this.stepManager) this.stepManager.remove()
+    if (this.txBrowser) this.txBrowser.setState({debugging: false})
     this.vmDebugger = null
     this.stepManager = null
+    if (this.debugger) delete this.debugger
     this.event.trigger('traceUnloaded')
   }
 

src/app/debugger/debuggerUI/TxBrowser.js

@@ -40,52 +40,39 @@ var css = csjs`
 function TxBrowser () {
   this.event = new EventManager()
 
-  this.blockNumber
-  this.txNumber
-  this.view
-  this.setDefaultValues()
-}
-
-TxBrowser.prototype.setDefaultValues = function () {
-  this.connectInfo = ''
-  if (this.view) {
-    yo.update(this.view, this.render())
+  this.state = {
+    txNumber: undefined,
+    debugging: false
   }
+  this.view
 }
 
-TxBrowser.prototype.submit = function (tx) {
-  this.event.trigger('requestDebug', [this.blockNumber, this.txNumber, tx])
-}
-
-TxBrowser.prototype.update = function (error, tx) {
-  if (error) {
-    this.view.querySelector('#error').innerHTML = error
-    return
+TxBrowser.prototype.submit = function () {
+  if (this.state.debugging) {
+    this.unload()
+  } else {
+    this.event.trigger('requestDebug', [undefined, this.state.txNumber])
   }
-
-  if (!tx) {
-    this.view.querySelector('#error').innerHTML = 'Cannot find transaction with reference. Block number: ' + this.blockNumber + '. Transaction index/hash: ' + this.txNumber
-    return
-  }
-
-  this.view.querySelector('#error').innerHTML = ''
-}
-
-TxBrowser.prototype.updateBlockN = function (ev) {
-  this.blockNumber = ev.target.value
+  yo.update(this.view, this.render())
 }
 
 TxBrowser.prototype.updateTxN = function (ev) {
-  this.txNumber = ev.target.value
+  this.state.txNumber = ev.target.value
 }
 
 TxBrowser.prototype.load = function (txHash, tx) {
-  this.txNumber = txHash
+  this.state.txNumber = txHash
 }
 
-TxBrowser.prototype.unload = function (txHash) {
+TxBrowser.prototype.unload = function () {
   this.event.trigger('unloadRequested')
-  this.setDefaultValues()
+}
+
+TxBrowser.prototype.setState = function (state) {
+  this.state = {...this.state, ...state}
+  if (this.view) {
+    yo.update(this.view, this.render())
+  }
 }
 
 TxBrowser.prototype.render = function () {
@@ -93,17 +80,17 @@ TxBrowser.prototype.render = function () {
   var view = yo`<div class="${css.container}">
         <div class="${css.txContainer}">
           <div class="${css.txinputs} p-1 input-group">
-            <input class="form-control" class="${css.txinput}" onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
-            <input class="form-control" class="${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
+            <input value="${this.state.txNumber || ''}" class="form-control ${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction hash'} />
           </div>
           <div class="${css.txbuttons} btn-group p-1">
-            <button class='btn btn-primary btn-sm' id='load' class='${css.txbutton}' title='start debugging' onclick=${function () { self.submit() }}>Start debugging</button>
-            <button class='btn btn-primary btn-sm' id='unload' class='${css.txbutton}' title='stop debugging' onclick=${function () { self.unload() }}>Stop</button>
+            <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>
           </div>
         </div>
         <span id='error'></span>
       </div>`
-
+  if (this.state.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); }