add new vm debugger

src/app/debugger/debuggerUI.js

@@ -4,6 +4,7 @@ var SourceHighlighter = require('../editor/sourceHighlighter')
 var TxBrowser = require('./debuggerUI/TxBrowser')
 var StepManagerUI = require('./debuggerUI/StepManager')
 var StepManager = require('./stepManager')
+var VmDebugger = require('./debuggerUI/VmDebugger')
 var remixLib = require('remix-lib')
 var executionContext = remixLib.execution.executionContext
 var traceHelper = remixLib.helpers.trace
@@ -113,7 +114,9 @@ class DebuggerUI {
 
     this.debugger_ui.stepManager = this.stepManager
 
-    this.debugger_ui.createAndAddVmDebugger()
+    this.debugger_ui.vmDebugger = new VmDebugger(this.debugger_ui, this.transactionDebugger.debugger.traceManager, this.transactionDebugger.debugger.codeManager, this.transactionDebugger.debugger.solidityProxy, this.transactionDebugger.debugger.callTree)
+    this.debugger_ui.andAddVmDebugger()
+
     this.transactionDebugger.debugger.debug(tx)
   }
 

src/app/debugger/debuggerUI/VmDebugger.js

@@ -0,0 +1,126 @@
+'use strict'
+var csjs = require('csjs-inject')
+var CodeListView = require('../remix-debugger/src/ui/CodeListView')
+var CalldataPanel = require('../remix-debugger/src/ui/CalldataPanel')
+var MemoryPanel = require('../remix-debugger/src/ui/MemoryPanel')
+var CallstackPanel = require('../remix-debugger/src/ui/CallstackPanel')
+var StackPanel = require('../remix-debugger/src/ui/StackPanel')
+var StoragePanel = require('../remix-debugger/src/ui/StoragePanel')
+var FullStoragesChangesPanel = require('../remix-debugger/src/ui/FullStoragesChanges')
+var StepDetail = require('../remix-debugger/src/ui/StepDetail')
+var DropdownPanel = require('../remix-debugger/src/ui/DropdownPanel')
+var SolidityState = require('../remix-debugger/src/ui/SolidityState')
+var SolidityLocals = require('../remix-debugger/src/ui/SolidityLocals')
+var remixDebug = require('remix-debug')
+var StorageResolver = remixDebug.storage.StorageResolver
+var yo = require('yo-yo')
+
+var css = csjs`
+  .asmCode {
+    float: left;
+    width: 50%;
+  }
+  .stepDetail {
+  }
+  .vmheadView {
+    margin-top:10px;
+  }
+`
+
+function VmDebugger (_parentUI, _traceManager, _codeManager, _solidityProxy, _callTree) {
+  let _parent = _parentUI.debugger
+  var self = this
+  this.view
+  this.asmCode = new CodeListView(_parent, _codeManager)
+  this.stackPanel = new StackPanel(_parentUI, _traceManager)
+  this.storagePanel = new StoragePanel(_parentUI, _traceManager)
+  this.memoryPanel = new MemoryPanel(_parentUI, _traceManager)
+  this.calldataPanel = new CalldataPanel(_parentUI, _traceManager)
+  this.callstackPanel = new CallstackPanel(_parentUI, _traceManager)
+  this.stepDetail = new StepDetail(_parentUI, _traceManager)
+  this.solidityState = new SolidityState(_parentUI, _traceManager, _codeManager, _solidityProxy)
+  this.solidityLocals = new SolidityLocals(_parentUI, _traceManager, _callTree)
+
+  /* Return values - */
+  this.returnValuesPanel = new DropdownPanel('Return Value', {json: true})
+  this.returnValuesPanel.data = {}
+  _parentUI.event.register('indexChanged', this.returnValuesPanel, function (index) {
+    if (!self.view) return
+    var innerself = this
+    _traceManager.getReturnValue(index, function (error, returnValue) {
+      if (error) {
+        innerself.update([error])
+      } else if (_parentUI.currentStepIndex === index) {
+        innerself.update([returnValue])
+      }
+    })
+  })
+  /* Return values - */
+
+  this.fullStoragesChangesPanel = new FullStoragesChangesPanel(_parentUI, _traceManager)
+
+  _parent.event.register('newTraceLoaded', this, function () {
+    if (!self.view) return
+    var storageResolver = new StorageResolver({web3: _parent.web3})
+    self.storagePanel.storageResolver = storageResolver
+    self.solidityState.storageResolver = storageResolver
+    self.solidityLocals.storageResolver = storageResolver
+    self.fullStoragesChangesPanel.storageResolver = storageResolver
+    self.asmCode.basicPanel.show()
+    self.stackPanel.basicPanel.show()
+    self.storagePanel.basicPanel.show()
+    self.memoryPanel.basicPanel.show()
+    self.calldataPanel.basicPanel.show()
+    self.callstackPanel.basicPanel.show()
+  })
+  _parent.event.register('traceUnloaded', this, function () {
+    if (!self.view) return
+  })
+  _parent.callTree.event.register('callTreeReady', () => {
+    if (!self.view) return
+    if (_parent.callTree.reducedTrace.length) {
+      self.solidityLocals.basicPanel.show()
+      self.solidityState.basicPanel.show()
+    }
+  })
+}
+
+VmDebugger.prototype.renderHead = function () {
+  var headView = yo`<div id='vmheadView' class=${css.vmheadView}>
+        <div>
+          <div class=${css.asmCode}>${this.asmCode.render()}</div>
+          <div class=${css.stepDetail}>${this.stepDetail.render()}</div>
+        </div>
+      </div>`
+  if (!this.headView) {
+    this.headView = headView
+  }
+  return headView
+}
+
+VmDebugger.prototype.remove = function () {
+  // used to stop listenning on event. bad and should be "refactored"
+  this.view = null
+}
+
+VmDebugger.prototype.render = function () {
+  var view = yo`<div id='vmdebugger'>
+        <div>
+            ${this.solidityLocals.render()}
+            ${this.solidityState.render()}
+            ${this.stackPanel.render()}
+            ${this.memoryPanel.render()}
+            ${this.storagePanel.render()}
+            ${this.callstackPanel.render()}
+            ${this.calldataPanel.render()}
+            ${this.returnValuesPanel.render()}
+            ${this.fullStoragesChangesPanel.render()}
+          </div>
+      </div>`
+  if (!this.view) {
+    this.view = view
+  }
+  return view
+}
+
+module.exports = VmDebugger

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

@@ -1,7 +1,7 @@
 'use strict'
 // var TxBrowser = require('./TxBrowser')
 // var StepManager = require('./StepManager')
-var VmDebugger = require('./VmDebugger')
+// var VmDebugger = require('./VmDebugger')
 
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
@@ -103,8 +103,7 @@ EthdebuggerUI.prototype.startDebugging = function (blockNumber, txIndex, tx) {
   return true
 }
 
-EthdebuggerUI.prototype.createAndAddVmDebugger = function () {
+EthdebuggerUI.prototype.andAddVmDebugger = function () {
-  this.vmDebugger = new VmDebugger(this, this.debugger.traceManager, this.debugger.codeManager, this.debugger.solidityProxy, this.debugger.callTree)
   yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead())
   yo.update(this.debuggerPanelsView, this.vmDebugger.render())
   yo.update(this.stepManagerView, this.stepManager.render())