Restore debugger UI code

apps/remix-ide/src/app/tabs/debugger/debuggerUI.js

@@ -1,8 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom'
-import { StepManager } from '@remix-project/debugger-ui'
 var TxBrowser = require('./debuggerUI/TxBrowser')
-// var StepManagerUI = require('./debuggerUI/StepManager')
+var StepManagerUI = require('./debuggerUI/StepManager')
 var VmDebugger = require('./debuggerUI/VmDebugger')
 var toaster = require('../../ui/tooltip')
 
@@ -61,7 +58,7 @@ class DebuggerUI {
     this.sourceHighlighter = new SourceHighlighter()
 
     this.startTxBrowser()
-    // this.stepManager = null
+    this.stepManager = null
 
     this.statusMessage = ''
     this.currentReceipt
@@ -187,7 +184,7 @@ class DebuggerUI {
 
     this.listenToEvents()
     this.debugger.debug(blockNumber, txNumber, tx, () => {
-      // this.stepManager = new StepManagerUI(this.debugger.step_manager)
+      this.stepManager = new StepManagerUI(this.debugger.step_manager)
       this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic)
       this.txBrowser.setState({ blockNumber, txNumber, debugging: true })
       this.renderDebugger()
@@ -229,7 +226,7 @@ class DebuggerUI {
   render () {
     this.debuggerPanelsView = yo`<div class="px-2"></div>`
     this.debuggerHeadPanelsView = yo`<div class="px-2"></div>`
-    this.stepManagerView = yo`<div id="stepManager-ui" class="px-2"></div>`
+    this.stepManagerView = yo`<div class="px-2"></div>`
 
     var view = yo`
       <div>
@@ -259,10 +256,10 @@ class DebuggerUI {
     yo.update(this.debuggerPanelsView, yo`<div></div>`)
     yo.update(this.stepManagerView, yo`<div></div>`)
     if (this.vmDebugger) this.vmDebugger.remove()
-    // if (this.stepManager) this.stepManager.remove()
+    if (this.stepManager) this.stepManager.remove()
     if (this.txBrowser) this.txBrowser.setState({debugging: false})
     this.vmDebugger = null
-    // this.stepManager = null
+    this.stepManager = null
     if (this.debugger) delete this.debugger
     this.event.trigger('traceUnloaded')
   }
@@ -274,7 +271,7 @@ class DebuggerUI {
   renderDebugger () {
     yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead())
     yo.update(this.debuggerPanelsView, this.vmDebugger.render())
-    ReactDOM.render(<StepManager stepManager={this.debugger.step_manager} />, document.getElementById('stepManager-ui'))
+    yo.update(this.stepManagerView, this.stepManager.render())
   }
 
 }