adapt UI

src/app/debugger/remix-debugger/src/ui/EthdebuggerUI.js

@@ -169,12 +169,18 @@ EthdebuggerUI.prototype.debug = function (tx) {
 }
 
 EthdebuggerUI.prototype.render = function () {
-  this.browserView = yo`<div class="${css.innerShift}">
-          ${this.txBrowser.render()}
-        </div>`
+  this.debuggerPanelsView = yo`<div class="${css.innerShift}"></div>`
+  this.debuggerHeadPanelsView = yo`<div class="${css.innerShift}"></div>`
+  this.stepManagerView = yo`<div class="${css.innerShift}"></div>`
+
   var view = yo`<div>
-        ${this.browserView}
+        <div class="${css.innerShift}">
+          ${this.txBrowser.render()}
+          ${this.debuggerHeadPanelsView}
+          ${this.stepManagerView}
+        </div>
         <div class="${css.statusMessage}" >${this.statusMessage}</div>
+        ${this.debuggerPanelsView}
      </div>`
   if (!this.view) {
     this.view = view
@@ -187,6 +193,7 @@ EthdebuggerUI.prototype.unLoad = function () {
   // this.debugger.codeManager.clear()
   // this.debugger.stepManager.reset()
   this.debugger.unLoad()
+  yo.update(this.debuggerHeadPanelsView, yo`<div></div>`)
   yo.update(this.debuggerPanelsView, yo`<div></div>`)
   yo.update(this.stepManagerView, yo`<div></div>`)
   if (this.vmDebugger) this.vmDebugger.remove()
@@ -233,8 +240,9 @@ EthdebuggerUI.prototype.startDebugging = function (blockNumber, txIndex, tx) {
   })
 
   this.vmDebugger = new VmDebugger(this, this.debugger.traceManager, this.debugger.codeManager, this.debugger.solidityProxy, this.debugger.callTree)
-  this.browserView.appendChild(this.stepManager.render())
-  this.view.appendChild(this.vmDebugger.render())
+  yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead())
+  yo.update(this.debuggerPanelsView, this.vmDebugger.render())
+  yo.update(this.stepManagerView, this.stepManager.render())
 
   this.debugger.debug(tx)
 

src/app/debugger/remix-debugger/src/ui/VmDebugger.js

@@ -64,12 +64,9 @@ function VmDebugger (_parentUI, _traceManager, _codeManager, _solidityProxy, _ca
     self.solidityState.storageResolver = storageResolver
     self.solidityLocals.storageResolver = storageResolver
     self.fullStoragesChangesPanel.storageResolver = storageResolver
-    self.headView.style.display = 'block'
-    self.view.style.display = 'block'
   })
   _parent.event.register('traceUnloaded', this, function () {
-    self.headView.style.display = 'none'
-    self.view.style.display = 'none'
+    if (!self.view) return
   })
   _parent.callTree.event.register('callTreeReady', () => {
     if (!self.view) return
@@ -87,7 +84,7 @@ function VmDebugger (_parentUI, _traceManager, _codeManager, _solidityProxy, _ca
 }
 
 VmDebugger.prototype.renderHead = function () {
-  var headView = yo`<div id='vmheadView' style='display:none'>
+  var headView = yo`<div id='vmheadView'>
         <div>
           <div class=${css.asmCode}>${this.asmCode.render()}</div>
           <div class=${css.stepDetail}>${this.stepDetail.render()}</div>
@@ -105,7 +102,7 @@ VmDebugger.prototype.remove = function () {
 }
 
 VmDebugger.prototype.render = function () {
-  var view = yo`<div id='vmdebugger' style='display:none'>
+  var view = yo`<div id='vmdebugger'>
         <div>
             ${this.solidityLocals.render()}
             ${this.solidityState.render()}