fix debugging

package.json

@@ -38,7 +38,7 @@
     "npm-run-all": "^4.0.2",
     "onchange": "^3.2.1",
     "remix-analyzer": "latest",
-    "remix-lib": "../remix/remix-lib",
+    "remix-lib": "./remix/remix-lib",
     "remix-solidity": "latest",
     "remix-tests": "latest",
     "remixd": "git+https://github.com/ethereum/remixd.git",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "http-server": "0.9.0",
-    "remix-debug": "../remix/remix-debug",
+    "remix-debug": "./remix/remix-debug",
     "remixd": "git+https://github.com/ethereum/remixd.git"
   },
   "repository": {

src/app/debugger/debugger.js

@@ -75,15 +75,18 @@ function Debugger (container, sourceHighlighter, localRegistry) {
   })
 
   // register selected code item, highlight the corresponding source location
-  this.debugger.codeManager.event.register('changed', this, function (code, address, index) {
+  this.debugger_ui.event.register('indexChanged', function (index) {
     if (self._deps.compiler.lastCompilationResult) {
-      self.debugger.callTree.sourceLocationTracker.getSourceLocationFromInstructionIndex(address, index, self._deps.compiler.lastCompilationResult.data.contracts, function (error, rawLocation) {
+      self.debugger.traceManager.getCurrentCalledAddressAt(index, (error, address) => {
-        if (!error && self._deps.compiler.lastCompilationResult && self._deps.compiler.lastCompilationResult.data) {
+        if (error) return console.log(error)
-          var lineColumnPos = self._deps.offsetToLineColumnConverter.offsetToLineColumn(rawLocation, rawLocation.file, self._deps.compiler.lastCompilationResult.source.sources)
+        self.debugger.callTree.sourceLocationTracker.getSourceLocationFromInstructionIndex(address, index, self._deps.compiler.lastCompilationResult.data.contracts, function (error, rawLocation) {
-          self._components.sourceHighlighter.currentSourceLocation(lineColumnPos, rawLocation)
+          if (!error && self._deps.compiler.lastCompilationResult && self._deps.compiler.lastCompilationResult.data) {
-        } else {
+            var lineColumnPos = self._deps.offsetToLineColumnConverter.offsetToLineColumn(rawLocation, rawLocation.file, self._deps.compiler.lastCompilationResult.source.sources)
-          self._components.sourceHighlighter.currentSourceLocation(null)
+            self._components.sourceHighlighter.currentSourceLocation(lineColumnPos, rawLocation)
-        }
+          } else {
+            self._components.sourceHighlighter.currentSourceLocation(null)
+          }
+        })
       })
     }
   })

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

@@ -2,8 +2,8 @@
 var DropdownPanel = require('./DropdownPanel')
 var yo = require('yo-yo')
 
-function CalldataPanel (_parent, _traceManager) {
+function CalldataPanel (_parentUI, _traceManager) {
-  this.parent = _parent
+  this._parentUI = _parentUI
   this.traceManager = _traceManager
   this.basicPanel = new DropdownPanel('Call Data', {json: true})
   this.init()
@@ -15,15 +15,15 @@ CalldataPanel.prototype.render = function () {
 
 CalldataPanel.prototype.init = function () {
   var self = this
-  this.parent.event.register('indexChanged', this, function (index) {
+  this._parentUI.event.register('indexChanged', this, function (index) {
     if (index < 0) return
-    if (self.parent.currentStepIndex !== index) return
+    if (self._parentUI.currentStepIndex !== index) return
 
     self.traceManager.getCallDataAt(index, function (error, calldata) {
       if (error) {
         self.basicPanel.update({})
         console.log(error)
-      } else if (self.parent.currentStepIndex === index) {
+      } else if (self._parentUI.currentStepIndex === index) {
         self.basicPanel.update(calldata)
       }
     })

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

@@ -69,18 +69,7 @@ function EthdebuggerUI (opts) {
   this.txBrowser.event.register('unloadRequested', this, function (blockNumber, txIndex, tx) {
     self.unLoad()
   })
-  this.stepManager = new StepManager(this, this.debugger.traceManager)
-  this.stepManager.event.register('stepChanged', this, function (stepIndex) {
-    self.stepChanged(stepIndex)
-  })
 
-  this.debugger.codeManager.event.register('changed', this, (code, address, instIndex) => {
-    self.debugger.callTree.sourceLocationTracker.getSourceLocationFromVMTraceIndex(address, this.currentStepIndex, this.debugger.solidityProxy.contracts, (error, sourceLocation) => {
-      if (!error) {
-        self.event.trigger('sourceLocationChanged', [sourceLocation])
-      }
-    })
-  })
 }
 
 EthdebuggerUI.prototype.setManagers = function () {
@@ -186,11 +175,11 @@ EthdebuggerUI.prototype.debug = function (tx) {
 }
 
 EthdebuggerUI.prototype.render = function () {
-  var view = yo`<div>
+  this.browserView = yo`<div class="${css.innerShift}">
-        <div class="${css.innerShift}">
           ${this.txBrowser.render()}
-          ${this.stepManager.render()}
+        </div>`
-        </div>
+  var view = yo`<div>
+        ${this.browserView}
         <div class="${css.statusMessage}" >${this.statusMessage}</div>
      </div>`
   if (!this.view) {
@@ -220,8 +209,6 @@ EthdebuggerUI.prototype.startDebugging = function (blockNumber, txIndex, tx) {
     return
   }
 
-  this.statusMessage = 'Loading trace...'
-  yo.update(this.view, this.render())
   console.log('loading trace...')
   this.tx = tx
   //this.tx.hash = txIndex
@@ -232,8 +219,21 @@ EthdebuggerUI.prototype.startDebugging = function (blockNumber, txIndex, tx) {
   //this.debugger.addProvider('web3', executionContext.web3())
   //this.debugger.switchProvider('web3')
 
-  this.vmDebugger = new VmDebugger(this, this.debugger.traceManager, this.debugger.codeManager, this.debugger.solidityProxy, this.debugger.callTree)
+  this.stepManager = new StepManager(this, this.debugger.traceManager)
+  this.stepManager.event.register('stepChanged', this, function (stepIndex) {
+    self.stepChanged(stepIndex)
+  })
 
+  this.debugger.codeManager.event.register('changed', this, (code, address, instIndex) => {
+    self.debugger.callTree.sourceLocationTracker.getSourceLocationFromVMTraceIndex(address, this.currentStepIndex, this.debugger.solidityProxy.contracts, (error, sourceLocation) => {
+      if (!error) {
+        self.event.trigger('sourceLocationChanged', [sourceLocation])
+      }
+    })
+  })
+
+  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())
 
   this.debugger.debug(tx)

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

@@ -3,8 +3,7 @@ var DropdownPanel = require('./DropdownPanel')
 var remixDebug = require('remix-debug')
 var stateDecoder = remixDebug.SolidityDecoder.stateDecoder
 var solidityTypeFormatter = require('./SolidityTypeFormatter')
-var remixLib = require('remix-lib')
+var StorageViewer = remixDebug.storage.StorageViewer
-var StorageViewer = remixLib.Storage.StorageViewer
 var yo = require('yo-yo')
 
 function SolidityState (_parent, _traceManager, _codeManager, _solidityProxy) {

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

@@ -2,8 +2,9 @@
 var yo = require('yo-yo')
 var DropdownPanel = require('./DropdownPanel')
 
-function StepDetail (_parent, _traceManager) {
+function StepDetail (_parentUI, _traceManager) {
-  this.parent = _parent
+  this.debugger = _parentUI.debugger
+  this.parentUI = _parentUI
   this.traceManager = _traceManager
 
   this.basicPanel = new DropdownPanel('Step detail', {json: true, displayContentOnly: true})
@@ -19,17 +20,17 @@ StepDetail.prototype.render = function () {
 
 StepDetail.prototype.init = function () {
   var self = this
-  this.parent.event.register('traceUnloaded', this, function () {
+  this.debugger.event.register('traceUnloaded', this, function () {
     self.detail = initDetail()
     self.basicPanel.update(self.detail)
   })
 
-  this.parent.event.register('newTraceLoaded', this, function () {
+  this.debugger.event.register('newTraceLoaded', this, function () {
     self.detail = initDetail()
     self.basicPanel.update(self.detail)
   })
 
-  this.parent.event.register('indexChanged', this, function (index) {
+  this.parentUI.event.register('indexChanged', this, function (index) {
     if (index < 0) return
 
     self.detail['vm trace step'] = index

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

@@ -80,12 +80,10 @@ StepManager.prototype.resolveToReducedTrace = function (value, incr) {
 }
 
 StepManager.prototype.render = function () {
-  return (
+  return yo`<div>
-  yo`<div>
         ${this.slider.render()}
         ${this.buttonNavigator.render()}
       </div>`
-  )
 }
 
 StepManager.prototype.reset = function () {

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

@@ -1,7 +1,7 @@
 'use strict'
 var DropdownPanel = require('./DropdownPanel')
-var remixLib = require('remix-lib')
+var remixDebug = require('remix-debug')
-var StorageViewer = remixLib.Storage.StorageViewer
+var StorageViewer = remixDebug.storage.StorageViewer
 var yo = require('yo-yo')
 
 function StoragePanel (_parent, _traceManager) {

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

@@ -29,14 +29,14 @@ function VmDebugger (_parentUI, _traceManager, _codeManager, _solidityProxy, _ca
   let _parent = _parentUI.debugger
 
   this.asmCode = new CodeListView(_parent, _codeManager)
-  this.stackPanel = new StackPanel(_parent, _traceManager)
+  this.stackPanel = new StackPanel(_parentUI, _traceManager)
-  this.storagePanel = new StoragePanel(_parent, _traceManager)
+  this.storagePanel = new StoragePanel(_parentUI, _traceManager)
-  this.memoryPanel = new MemoryPanel(_parent, _traceManager)
+  this.memoryPanel = new MemoryPanel(_parentUI, _traceManager)
-  this.calldataPanel = new CalldataPanel(_parent, _traceManager)
+  this.calldataPanel = new CalldataPanel(_parentUI, _traceManager)
-  this.callstackPanel = new CallstackPanel(_parent, _traceManager)
+  this.callstackPanel = new CallstackPanel(_parentUI, _traceManager)
-  this.stepDetail = new StepDetail(_parent, _traceManager)
+  this.stepDetail = new StepDetail(_parentUI, _traceManager)
-  this.solidityState = new SolidityState(_parent, _traceManager, _codeManager, _solidityProxy)
+  this.solidityState = new SolidityState(_parentUI, _traceManager, _codeManager, _solidityProxy)
-  this.solidityLocals = new SolidityLocals(_parent, _traceManager, _callTree)
+  this.solidityLocals = new SolidityLocals(_parentUI, _traceManager, _callTree)
 
   /* Return values - */
   this.returnValuesPanel = new DropdownPanel('Return Value', {json: true})