delete old remix debugger files

src/app/debugger/debuggerUI/vmDebugger/CodeListView.js

 'use strict'
-var style = require('../../remix-debugger/src/ui/styles/basicStyles')
+var style = require('../styles/basicStyles')
 var yo = require('yo-yo')
 var remixLib = require('remix-lib')
 var DropdownPanel = require('./DropdownPanel')

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

-'use strict'
-var remixLib = require('remix-lib')
-var EventManager = remixLib.EventManager
-var yo = require('yo-yo')
-
-var csjs = require('csjs-inject')
-var styleGuide = require('../../../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .buttons {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .stepButtons {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-  .stepButton {
-    ${styles.rightPanel.debuggerTab.button_Debugger}
-  }
-  .jumpButtons {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-  .jumpButton {
-    ${styles.rightPanel.debuggerTab.button_Debugger}
-  }
-  .navigator {
-    color: ${styles.rightPanel.debuggerTab.text_Primary};
-  }
-  .navigator:hover {
-    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
-  }
-`
-
-function ButtonNavigator (_parent, _traceManager) {
-  this.event = new EventManager()
-  this.intoBackDisabled = true
-  this.overBackDisabled = true
-  this.intoForwardDisabled = true
-  this.overForwardDisabled = true
-  this.jumpOutDisabled = true
-  this.jumpNextBreakpointDisabled = true
-  this.jumpPreviousBreakpointDisabled = true
-
-  this.traceManager = _traceManager
-  this.currentCall = null
-  this.revertionPoint = null
-
-  _parent.event.register('indexChanged', this, (index) => {
-    if (!this.view) return
-    if (index < 0) return
-    if (_parent.currentStepIndex !== index) return
-
-    this.traceManager.buildCallPath(index, (error, callsPath) => {
-      if (error) {
-        console.log(error)
-        resetWarning(this)
-      } else {
-        this.currentCall = callsPath[callsPath.length - 1]
-        if (this.currentCall.reverted) {
-          this.revertionPoint = this.currentCall.return
-          this.view.querySelector('#reverted').style.display = 'block'
-          this.view.querySelector('#reverted #outofgas').style.display = this.currentCall.outOfGas ? 'inline' : 'none'
-          this.view.querySelector('#reverted #parenthasthrown').style.display = 'none'
-        } else {
-          var k = callsPath.length - 2
-          while (k >= 0) {
-            var parent = callsPath[k]
-            if (parent.reverted) {
-              this.revertionPoint = parent.return
-              this.view.querySelector('#reverted').style.display = 'block'
-              this.view.querySelector('#reverted #parenthasthrown').style.display = parent ? 'inline' : 'none'
-              this.view.querySelector('#reverted #outofgas').style.display = 'none'
-              return
-            }
-            k--
-          }
-          resetWarning(this)
-        }
-      }
-    })
-  })
-
-  this.view
-}
-
-module.exports = ButtonNavigator
-
-ButtonNavigator.prototype.render = function () {
-  var self = this
-  var view = yo`<div class="${css.buttons}">
-    <div class="${css.stepButtons}">
-      <button id='overback' title='Step over back' class='${css.navigator} ${css.stepButton} fa fa-reply' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
-      <button id='intoback' title='Step back' class='${css.navigator} ${css.stepButton} fa fa-level-up' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
-      <button id='intoforward' title='Step into'  class='${css.navigator} ${css.stepButton} fa fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
-      <button id='overforward' title='Step over forward' class='${css.navigator} ${css.stepButton} fa fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
-    </div>
-
-    <div class="${css.jumpButtons}">
-      <button id='jumppreviousbreakpoint' title='Jump to the previous breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-backward' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
-      <button id='jumpout' title='Jump out' class='${css.navigator} ${css.jumpButton} fa fa-eject' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
-      <button id='jumpnextbreakpoint' title='Jump to the next breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-forward' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>
-    </div>
-    <div id='reverted' style="display:none">
-      <button id='jumptoexception' title='Jump to exception' class='${css.navigator} ${css.button} fa fa-exclamation-triangle' onclick=${function () { self.event.trigger('jumpToException', [self.revertionPoint]) }} disabled=${this.jumpOutDisabled} >
-      </button>
-      <span>State changes made during this call will be reverted.</span>
-      <span id='outofgas' style="display:none">This call will run out of gas.</span>
-      <span id='parenthasthrown' style="display:none">The parent call will throw an exception</span>
-    </div>
-  </div>`
-  if (!this.view) {
-    this.view = view
-  }
-  return view
-}
-
-ButtonNavigator.prototype.reset = function () {
-  this.intoBackDisabled = true
-  this.overBackDisabled = true
-  this.intoForwardDisabled = true
-  this.overForwardDisabled = true
-  this.jumpOutDisabled = true
-  this.jumpNextBreakpointDisabled = true
-  this.jumpPreviousBreakpointDisabled = true
-  resetWarning(this)
-}
-
-ButtonNavigator.prototype.stepChanged = function (step) {
-  this.intoBackDisabled = step <= 0
-  this.overBackDisabled = step <= 0
-  if (!this.traceManager) {
-    this.intoForwardDisabled = true
-    this.overForwardDisabled = true
-  } else {
-    var self = this
-    this.traceManager.getLength(function (error, length) {
-      if (error) {
-        self.reset()
-        console.log(error)
-      } else {
-        self.jumpNextBreakpointDisabled = step >= length - 1
-        self.jumpPreviousBreakpointDisabled = step <= 0
-        self.intoForwardDisabled = step >= length - 1
-        self.overForwardDisabled = step >= length - 1
-        var stepOut = self.traceManager.findStepOut(step)
-        self.jumpOutDisabled = stepOut === step
-      }
-      self.updateAll()
-    })
-  }
-  this.updateAll()
-}
-
-ButtonNavigator.prototype.updateAll = function () {
-  this.updateDisabled('intoback', this.intoBackDisabled)
-  this.updateDisabled('overback', this.overBackDisabled)
-  this.updateDisabled('overforward', this.overForwardDisabled)
-  this.updateDisabled('intoforward', this.intoForwardDisabled)
-  this.updateDisabled('jumpout', this.jumpOutDisabled)
-  this.updateDisabled('jumptoexception', this.jumpOutDisabled)
-  this.updateDisabled('jumpnextbreakpoint', this.jumpNextBreakpointDisabled)
-  this.updateDisabled('jumppreviousbreakpoint', this.jumpPreviousBreakpointDisabled)
-}
-
-ButtonNavigator.prototype.updateDisabled = function (id, disabled) {
-  if (disabled) {
-    document.getElementById(id).setAttribute('disabled', true)
-  } else {
-    document.getElementById(id).removeAttribute('disabled')
-  }
-}
-
-function resetWarning (self) {
-  self.view.querySelector('#reverted #outofgas').style.display = 'none'
-  self.view.querySelector('#reverted #parenthasthrown').style.display = 'none'
-  self.view.querySelector('#reverted').style.display = 'none'
-}
-
-module.exports = ButtonNavigator

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

-'use strict'
-var DropdownPanel = require('./DropdownPanel')
-var yo = require('yo-yo')
-
-function CalldataPanel (_parentUI, _traceManager) {
-  this._parentUI = _parentUI
-  this.traceManager = _traceManager
-  this.basicPanel = new DropdownPanel('Call Data', {json: true})
-  this.init()
-}
-
-CalldataPanel.prototype.render = function () {
-  return yo`<div id='calldatapanel' >${this.basicPanel.render()}</div>`
-}
-
-CalldataPanel.prototype.init = function () {
-  var self = this
-  this._parentUI.event.register('indexChanged', this, function (index) {
-    if (index < 0) 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._parentUI.currentStepIndex === index) {
-        self.basicPanel.update(calldata)
-      }
-    })
-  })
-}
-
-module.exports = CalldataPanel

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

-'use strict'
-var DropdownPanel = require('./DropdownPanel')
-var yo = require('yo-yo')
-
-function CallstackPanel (_parent, _traceManager) {
-  this.parent = _parent
-  this.traceManager = _traceManager
-  this.basicPanel = new DropdownPanel('Call Stack', {json: true})
-  this.init()
-}
-
-CallstackPanel.prototype.render = function () {
-  return yo`<div id='callstackpanel' >${this.basicPanel.render()}</div>`
-}
-
-CallstackPanel.prototype.init = function () {
-  var self = this
-  this.parent.event.register('indexChanged', this, function (index) {
-    if (index < 0) return
-    if (self.parent.currentStepIndex !== index) return
-
-    self.traceManager.getCallStackAt(index, function (error, callstack) {
-      if (error) {
-        console.log(error)
-        self.basicPanel.update({})
-      } else if (self.parent.currentStepIndex === index) {
-        self.basicPanel.update(callstack)
-      }
-    })
-  })
-}
-
-module.exports = CallstackPanel

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

-'use strict'
-var style = require('./styles/basicStyles')
-var yo = require('yo-yo')
-var remixLib = require('remix-lib')
-var DropdownPanel = require('./DropdownPanel')
-var EventManager = remixLib.EventManager
-var csjs = require('csjs-inject')
-var styleGuide = require('../../../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .instructions {
-    ${styles.rightPanel.debuggerTab.box_Debugger}
-    overflow-y: scroll;
-    max-height: 150px;
-  }
-`
-function CodeListView (_parent, _codeManager) {
-  this.event = new EventManager()
-  this.parent = _parent
-  this.codeManager = _codeManager
-  this.code
-  this.address
-  this.codeView
-  this.itemSelected
-  this.basicPanel = new DropdownPanel('Instructions', {json: false, displayContentOnly: true})
-  this.basicPanel.event.register('hide', () => {
-    this.event.trigger('hide', [])
-  })
-  this.basicPanel.event.register('show', () => {
-    this.event.trigger('show', [])
-  })
-  this.init()
-}
-
-CodeListView.prototype.render = function () {
-  return yo`<div id='asmcodes' >${this.basicPanel.render({height: style.instructionsList.height})}</div>`
-}
-
-CodeListView.prototype.init = function () {
-  var self = this
-  this.codeManager.event.register('changed', this, this.changed)
-  this.parent.event.register('traceUnloaded', this, function () {
-    self.changed([], '', -1)
-  })
-}
-
-CodeListView.prototype.indexChanged = function (index) {
-  if (index >= 0) {
-    if (this.itemSelected) {
-      this.itemSelected.removeAttribute('selected')
-      this.itemSelected.removeAttribute('style')
-      if (this.itemSelected.firstChild) {
-        this.itemSelected.firstChild.removeAttribute('style')
-      }
-    }
-    this.itemSelected = this.codeView.children[index]
-    this.itemSelected.setAttribute('style', 'background-color: ' + styles.rightPanel.debuggerTab.text_BgHighlight)
-    this.itemSelected.setAttribute('selected', 'selected')
-    if (this.itemSelected.firstChild) {
-      this.itemSelected.firstChild.setAttribute('style', 'margin-left: 2px')
-    }
-    this.codeView.scrollTop = this.itemSelected.offsetTop - parseInt(this.codeView.offsetTop)
-  }
-}
-
-CodeListView.prototype.changed = function (code, address, index) {
-  if (this.address !== address) {
-    this.code = code
-    this.address = address
-    this.codeView = this.renderAssemblyItems()
-    this.basicPanel.setContent(this.codeView)
-  }
-  this.indexChanged(index)
-}
-
-CodeListView.prototype.renderAssemblyItems = function () {
-  if (this.code) {
-    var codeView = this.code.map(function (item, i) {
-      return yo`<div key=${i} value=${i}><span>${item}</span></div>`
-    })
-    return yo`<div class=${css.instructions} id='asmitems' ref='itemsList'>
-      ${codeView}
-    </div>`
-  }
-}
-
-module.exports = CodeListView

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

-'use strict'
-var yo = require('yo-yo')
-const copy = require('clipboard-copy')
-var remixLib = require('remix-lib')
-var TreeView = require('../../../../ui/TreeView') // TODO setup a direct reference to the UI components
-var EventManager = remixLib.EventManager
-
-var csjs = require('csjs-inject')
-var styleGuide = require('../../../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .title {
-    margin-top: 10px;
-    ${styles.rightPanel.debuggerTab.dropdown_Debugger};
-    display: flex;
-    align-items: center;
-  }
-  .name {
-    font-weight: bold;
-  }
-  .nameDetail {
-    font-weight: bold;
-    margin-left: 3px;
-  }
-  .icon {
-    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
-    margin-right: 5%;
-  }
-  .eyeButton {
-    margin: 3px;
-  }
-  .eyeButton:hover {
-    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
-  }
-  .dropdownpanel {
-    ${styles.rightPanel.debuggerTab.dropdown_Debugger};
-    width: 100%;
-  }
-  .dropdownrawcontent {
-    padding: 2px;
-    word-break: break-all;
-  }
-  .message {
-    padding: 2px;
-    word-break: break-all;
-  }
-  .refresh {
-    display: none;
-    margin-left: 4px;
-    margin-top: 4px; 
-    animation: spin 2s linear infinite;
-  }
-`
-
-function DropdownPanel (_name, _opts) {
-  this.event = new EventManager()
-  if (!_opts) {
-    _opts = {}
-  }
-  this.name = _name
-  this.header = ''
-  this.json = _opts.json
-  this.displayContentOnly = _opts.displayContentOnly
-  if (this.json) {
-    this.treeView = new TreeView(_opts)
-  }
-  this.view
-}
-
-DropdownPanel.prototype.setMessage = function (message) {
-  if (this.view) {
-    this.view.querySelector('.dropdownpanel .dropdownrawcontent').style.display = 'none'
-    this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'none'
-    this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'none'
-    this.message(message)
-  }
-}
-
-DropdownPanel.prototype.setLoading = function () {
-  if (this.view) {
-    this.view.querySelector('.dropdownpanel .dropdownrawcontent').style.display = 'none'
-    this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'none'
-    this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'inline-block'
-    this.message('')
-  }
-}
-
-DropdownPanel.prototype.setUpdating = function () {
-  if (this.view) {
-    this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = styles.appProperties.greyedText_color
-  }
-}
-
-DropdownPanel.prototype.update = function (_data, _header) {
-  if (this.view) {
-    this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'none'
-    this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'block'
-    this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = styles.appProperties.mainText_Color
-    this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = JSON.stringify(_data, null, '\t')
-    if (!this.displayContentOnly) {
-      this.view.querySelector('.title div.btn').style.display = 'block'
-      this.view.querySelector('.title span').innerText = _header || ' '
-    }
-    this.message('')
-    if (this.json) {
-      this.treeView.update(_data)
-    }
-  }
-}
-
-DropdownPanel.prototype.setContent = function (node) {
-  if (this.view) {
-    var parent = this.view.querySelector('.dropdownpanel div.dropdowncontent')
-    parent.replaceChild(node, parent.firstElementChild)
-  }
-}
-
-DropdownPanel.prototype.render = function (overridestyle) {
-  var content = yo`<div>Empty</div>`
-  if (this.json) {
-    content = this.treeView.render({})
-  }
-  overridestyle === undefined ? {} : overridestyle
-  var self = this
-  var title = !self.displayContentOnly ? yo`<div class="${css.title} title">
-      <div class="${css.icon} fa fa-caret-right" onclick=${function () { self.toggle() }} ></div>
-      <div class="${css.name}" onclick=${function () { self.toggle() }} >${this.name}</div><span class="${css.nameDetail}" onclick=${function () { self.toggle() }} ></span>
-      <div onclick=${function () { self.copyClipboard() }} title='raw' class="${css.eyeButton} btn fa fa-clipboard"></div>
-    </div>` : yo`<div></div>`
-
-  var contentNode = yo`<div class='dropdownpanel' style='display:none'>
-      <i class="${css.refresh} fa fa-refresh" aria-hidden="true"></i>
-      <div class='dropdowncontent'>${content}</div>
-      <div class='dropdownrawcontent' style='display:none'></div>
-      <div class='message' style='display:none'></div>
-    </div>`
-  var view = yo`
-    <div>
-    <style>
-      @-moz-keyframes spin {
-        to { -moz-transform: rotate(359deg); }
-      }
-      @-webkit-keyframes spin {
-        to { -webkit-transform: rotate(359deg); }
-      }
-      @keyframes spin {
-        to {transform:rotate(359deg);}
-      }
-    </style>
-    ${title}
-    ${contentNode}
-    </div>`
-  if (!this.view) {
-    this.view = view
-  }
-  if (self.displayContentOnly) contentNode.style.display = 'block'
-  return view
-}
-
-DropdownPanel.prototype.copyClipboard = function () {
-  var content = this.view.querySelector('.dropdownpanel .dropdownrawcontent')
-  if (content) copy(content.innerText ? content.innerText : content.textContent)
-}
-
-DropdownPanel.prototype.toggle = function () {
-  var el = this.view.querySelector('.dropdownpanel')
-  var caret = this.view.querySelector('.title').firstElementChild
-  if (el.style.display === '') {
-    el.style.display = 'none'
-    caret.className = `${css.icon} fa fa-caret-right`
-    this.event.trigger('hide', [])
-  } else {
-    el.style.display = ''
-    caret.className = `${css.icon} fa fa-caret-down`
-    this.event.trigger('show', [])
-  }
-}
-
-DropdownPanel.prototype.hide = function () {
-  if (this.view && !this.displayContentOnly) {
-    var caret = this.view.querySelector('.title').firstElementChild
-    var el = this.view.querySelector('.dropdownpanel')
-    el.style.display = 'none'
-    caret.className = `${css.icon} fa fa-caret-right`
-    this.event.trigger('hide', [])
-  }
-}
-
-DropdownPanel.prototype.show = function () {
-  if (this.view && !this.displayContentOnly) {
-    var caret = this.view.querySelector('.title').firstElementChild
-    var el = this.view.querySelector('.dropdownpanel')
-    el.style.display = ''
-    caret.className = `${css.icon} fa fa-caret-down`
-    this.event.trigger('show', [])
-  }
-}
-
-DropdownPanel.prototype.message = function (message) {
-  if (this.view) {
-    var mes = this.view.querySelector('.dropdownpanel .message')
-    mes.innerText = message
-    mes.style.display = (message === '') ? 'none' : 'block'
-  }
-}
-
-module.exports = DropdownPanel

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

-'use strict'
-var TxBrowser = require('./TxBrowser')
-var StepManager = require('./StepManager')
-var remixLib = require('remix-lib')
-var TraceManager = remixLib.trace.TraceManager
-var VmDebugger = require('./VmDebugger')
-var init = remixLib.init
-var executionContext = remixLib.execution.executionContext
-var EventManager = remixLib.EventManager
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-var Web3Providers = remixLib.vm.Web3Providers
-var DummyProvider = remixLib.vm.DummyProvider
-var CodeManager = remixLib.code.CodeManager
-var remixDebug = require('remix-debug')
-var SolidityProxy = remixDebug.SolidityDecoder.SolidityProxy
-var InternalCallTree = remixDebug.SolidityDecoder.InternalCallTree
-
-var css = csjs`
-  .statusMessage {
-    margin-left: 15px;
-  }
-  .innerShift {
-    padding: 2px;
-    margin-left: 10px;
-  }
-`
-
-function Ethdebugger (opts) {
-  this.opts = opts || {}
-  if (!this.opts.compilationResult) this.opts.compilationResult = () => { return null }
-
-  var self = this
-  this.event = new EventManager()
-
-  this.currentStepIndex = -1
-  this.tx
-  this.statusMessage = ''
-
-  this.view
-  this.web3Providers = new Web3Providers()
-  this.addProvider('DUMMYWEB3', new DummyProvider())
-  this.switchProvider('DUMMYWEB3')
-  this.traceManager = new TraceManager()
-  this.codeManager = new CodeManager(this.traceManager)
-  this.solidityProxy = new SolidityProxy(this.traceManager, this.codeManager)
-
-  var callTree = new InternalCallTree(this.event, this.traceManager, this.solidityProxy, this.codeManager, { includeLocalVariables: true })
-  this.callTree = callTree // TODO: currently used by browser solidity, we should improve the API
-
-  this.event.register('indexChanged', this, function (index) {
-    self.codeManager.resolveStep(index, self.tx)
-  })
-
-  this.txBrowser = new TxBrowser(this)
-  this.txBrowser.event.register('newTxLoading', this, function () {
-    self.unLoad()
-  })
-  this.txBrowser.event.register('newTraceRequested', this, function (blockNumber, txIndex, tx) {
-    console.dir('newTraceRequestd')
-    console.dir(arguments)
-    self.startDebugging(blockNumber, txIndex, tx)
-  })
-  this.txBrowser.event.register('unloadRequested', this, function (blockNumber, txIndex, tx) {
-    self.unLoad()
-  })
-  this.stepManager = new StepManager(this, this.traceManager)
-  this.stepManager.event.register('stepChanged', this, function (stepIndex) {
-    self.stepChanged(stepIndex)
-  })
-  this.vmDebugger = new VmDebugger(this, this.traceManager, this.codeManager, this.solidityProxy, callTree)
-
-  this.codeManager.event.register('changed', this, (code, address, instIndex) => {
-    this.callTree.sourceLocationTracker.getSourceLocationFromVMTraceIndex(address, this.currentStepIndex, this.solidityProxy.contracts, (error, sourceLocation) => {
-      if (!error) {
-        this.event.trigger('sourceLocationChanged', [sourceLocation])
-      }
-    })
-  })
-}
-
-Ethdebugger.prototype.setManagers = function () {
-  this.traceManager = new TraceManager({web3: this.web3})
-  this.codeManager = new CodeManager(this.traceManager)
-  this.solidityProxy = new SolidityProxy(this.traceManager, this.codeManager)
-  this.storageResolver = null
-  var callTree = new InternalCallTree(this.event, this.traceManager, this.solidityProxy, this.codeManager, { includeLocalVariables: true })
-  this.callTree = callTree // TODO: currently used by browser solidity, we should improve the API
-  this.vmDebugger = new VmDebugger(this, this.traceManager, this.codeManager, this.solidityProxy, callTree)
-
-  this.callTree = new InternalCallTree(this.event, this.traceManager, this.solidityProxy, this.codeManager, { includeLocalVariables: true })
-}
-
-Ethdebugger.prototype.setBreakpointManager = function (breakpointManager) {
-  this.breakpointManager = breakpointManager
-}
-
-Ethdebugger.prototype.web3 = function () {
-  return global.web3
-}
-
-Ethdebugger.prototype.addProvider = function (type, obj) {
-  this.web3Providers.addProvider(type, obj)
-  this.event.trigger('providerAdded', [type])
-}
-
-Ethdebugger.prototype.updateWeb3Reference = function () {
-  if (!this.txBrowser) return
-  this.txBrowser.web3 = this.web3
-}
-
-Ethdebugger.prototype.switchProvider = function (type) {
-  var self = this
-  this.web3Providers.get(type, function (error, obj) {
-    if (error) {
-      console.log('provider ' + type + ' not defined')
-    } else {
-      self.web3 = obj
-      self.setManagers()
-      self.updateWeb3Reference()
-      executionContext.detectNetwork((error, network) => {
-        if (error || !network) {
-          global.web3Debug = obj
-        } else {
-          var webDebugNode = init.web3DebugNode(network.name)
-          global.web3Debug = !webDebugNode ? obj : webDebugNode
-        }
-        self.updateWeb3Reference()
-      })
-      self.event.trigger('providerChanged', [type])
-    }
-  })
-}
-
-Ethdebugger.prototype.setCompilationResult = function (compilationResult) {
-  if (compilationResult && compilationResult.sources && compilationResult.contracts) {
-    this.solidityProxy.reset(compilationResult)
-  } else {
-    this.solidityProxy.reset({})
-  }
-}
-
-Ethdebugger.prototype.debug = function (tx) {
-  this.setCompilationResult(this.opts.compilationResult())
-  if (tx instanceof Object) {
-    this.txBrowser.load(tx.hash)
-  } else if (tx instanceof String) {
-    this.txBrowser.load(tx)
-  }
-}
-
-Ethdebugger.prototype.render = function () {
-  var view = yo`<div>
-        <div class="${css.innerShift}">
-          ${this.txBrowser.render()}
-          ${this.vmDebugger.renderHead()}
-          ${this.stepManager.render()}
-        </div>
-        <div class="${css.statusMessage}" >${this.statusMessage}</div>
-        ${this.vmDebugger.render()}
-     </div>`
-  if (!this.view) {
-    this.view = view
-  }
-  return view
-}
-
-Ethdebugger.prototype.unLoad = function () {
-  this.traceManager.init()
-  this.codeManager.clear()
-  this.stepManager.reset()
-  this.event.trigger('traceUnloaded')
-}
-
-Ethdebugger.prototype.stepChanged = function (stepIndex) {
-  this.currentStepIndex = stepIndex
-  this.event.trigger('indexChanged', [stepIndex])
-}
-
-Ethdebugger.prototype.startDebugging = function (blockNumber, txIndex, tx) {
-  console.dir('startDebugging')
-  console.dir(arguments)
-  if (this.traceManager.isLoading) {
-    return
-  }
-  this.setCompilationResult(this.opts.compilationResult())
-  this.statusMessage = 'Loading trace...'
-  yo.update(this.view, this.render())
-  console.log('loading trace...')
-  this.tx = tx
-  var self = this
-  console.dir('resolving a trace with tx: ')
-  console.dir(tx)
-  this.traceManager.resolveTrace(tx, function (error, result) {
-    console.log('trace loaded ' + result)
-    if (result) {
-      self.statusMessage = ''
-      yo.update(self.view, self.render())
-      self.event.trigger('newTraceLoaded', [self.traceManager.trace])
-      if (self.breakpointManager && self.breakpointManager.hasBreakpoint()) {
-        self.breakpointManager.jumpNextBreakpoint(0, false)
-      }
-    } else {
-      self.statusMessage = error ? error.message : 'Trace not loaded'
-      yo.update(self.view, self.render())
-    }
-  })
-}
-
-module.exports = Ethdebugger

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

-'use strict'
-var DropdownPanel = require('./DropdownPanel')
-var remixDebug = require('remix-debug')
-var StorageViewer = remixDebug.storage.StorageViewer
-var yo = require('yo-yo')
-
-function FullStoragesChanges (_parent, _traceManager) {
-  this.storageResolver = null
-  this.parent = _parent
-  this.debugger = _parent.debugger
-  this.traceManager = _traceManager
-  this.addresses = []
-  this.view
-  this.traceLength
-  this.basicPanel = new DropdownPanel('Full Storages Changes', {json: true})
-  this.init()
-}
-
-FullStoragesChanges.prototype.render = function () {
-  var view = yo`<div id='fullstorageschangespanel' >${this.basicPanel.render()}</div>`
-  if (!this.view) {
-    this.view = view
-  }
-  return view
-}
-
-FullStoragesChanges.prototype.init = function () {
-  var self = this
-  this.debugger.event.register('newTraceLoaded', this, function (length) {
-    self.panels = []
-    self.traceManager.getAddresses(function (error, addresses) {
-      if (!error) {
-        self.addresses = addresses
-        self.basicPanel.update({})
-      }
-    })
-
-    self.traceManager.getLength(function (error, length) {
-      if (!error) {
-        self.traceLength = length
-      }
-    })
-  })
-
-  this.debugger.event.register('indexChanged', this, function (index) {
-    if (index < 0) return
-    if (self.parent.currentStepIndex !== index) return
-    if (!self.storageResolver) return
-
-    if (index === self.traceLength - 1) {
-      var storageJSON = {}
-      for (var k in self.addresses) {
-        var address = self.addresses[k]
-        var storageViewer = new StorageViewer({
-          stepIndex: self.parent.currentStepIndex,
-          tx: self.parent.tx,
-          address: address
-        }, self.storageResolver, self.traceManager)
-        storageViewer.storageRange(function (error, result) {
-          if (!error) {
-            storageJSON[address] = result
-            self.basicPanel.update(storageJSON)
-          }
-        })
-      }
-    } else {
-      self.basicPanel.update({})
-    }
-  })
-}
-
-module.exports = FullStoragesChanges

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

-'use strict'
-var DropdownPanel = require('./DropdownPanel')
-var remixLib = require('remix-lib')
-var ui = remixLib.helpers.ui
-var yo = require('yo-yo')
-
-function MemoryPanel (_parent, _traceManager) {
-  this.parent = _parent
-  this.traceManager = _traceManager
-  this.basicPanel = new DropdownPanel('Memory', {
-    json: true,
-    css: {
-      'font-family': 'monospace'
-    }})
-  this.init()
-}
-
-MemoryPanel.prototype.render = function () {
-  return yo`<div id='memorypanel' >${this.basicPanel.render()}</div>`
-}
-
-MemoryPanel.prototype.init = function () {
-  var self = this
-  this.parent.event.register('indexChanged', this, function (index) {
-    if (index < 0) return
-    if (self.parent.currentStepIndex !== index) return
-
-    self.traceManager.getMemoryAt(index, function (error, memory) {
-      if (error) {
-        console.log(error)
-        self.basicPanel.update({})
-      } else if (self.parent.currentStepIndex === index) {
-        self.basicPanel.update(ui.formatMemory(memory, 16))
-      }
-    })
-  })
-}
-
-module.exports = MemoryPanel

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

-'use strict'
-var remixLib = require('remix-lib')
-var EventManager = remixLib.EventManager
-var yo = require('yo-yo')
-
-class Slider {
-  constructor (_traceManager, _stepOverride) {
-    this.event = new EventManager()
-    this.traceManager = _traceManager
-    this.max
-    this.disabled = true
-    this.view
-    this.solidityMode = false
-    this.stepOverride = _stepOverride
-
-    this.previousValue = null
-  }
-
-  render () {
-    var self = this
-    var view = yo`<div>
-        <input
-          id='slider'
-          style='width: 100%'
-          type='range'
-          min=0
-          max=${this.max}
-          value=0
-          onchange=${function () { self.onChange() }}
-          oninput=${function () { self.onChange() }}
-          disabled=${this.disabled} />
-      </div>`
-    if (!this.view) {
-      this.view = view
-    }
-    return view
-  }
-
-  init (length) {
-    var slider = this.view.querySelector('#slider')
-    slider.setAttribute('max', length - 1)
-    this.max = length - 1
-    this.updateDisabled(length === 0)
-    this.disabled = length === 0
-    this.setValue(0)
-  }
-
-  onChange (event) {
-    var value = parseInt(this.view.querySelector('#slider').value)
-    if (this.stepOverride) {
-      var correctedValue = this.stepOverride(value)
-      if (correctedValue !== value) {
-        this.setValue(correctedValue)
-        value = correctedValue
-      }
-    }
-    if (value === this.previousValue) return
-    this.previousValue = value
-    this.event.trigger('moved', [value])
-  }
-
-  setValue (value) {
-    this.view.querySelector('#slider').value = value
-  }
-
-  updateDisabled (disabled) {
-    if (disabled) {
-      this.view.querySelector('#slider').setAttribute('disabled', true)
-    } else {
-      this.view.querySelector('#slider').removeAttribute('disabled')
-    }
-  }
-}
-
-module.exports = Slider

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

-'use strict'
-var DropdownPanel = require('./DropdownPanel')
-var remixDebug = require('remix-debug')
-var localDecoder = remixDebug.SolidityDecoder.localDecoder
-var solidityTypeFormatter = require('./SolidityTypeFormatter')
-var StorageViewer = remixDebug.storage.StorageViewer
-var yo = require('yo-yo')
-
-class SolidityLocals {
-
-  constructor (_parent, _traceManager, _internalTreeCall) {
-    this.parent = _parent
-    this.internalTreeCall = _internalTreeCall
-    this.storageResolver = null
-    this.traceManager = _traceManager
-    this.basicPanel = new DropdownPanel('Solidity Locals', {
-      json: true,
-      formatSelf: solidityTypeFormatter.formatSelf,
-      extractData: solidityTypeFormatter.extractData
-    })
-    this.init()
-    this.view
-  }
-
-  render () {
-    this.view = yo`<div id='soliditylocals' >
-    ${this.basicPanel.render()}
-    </div>`
-    return this.view
-  }
-
-  init () {
-    var decodeTimeout = null
-    this.parent.event.register('sourceLocationChanged', this, (sourceLocation) => {
-      if (!this.storageResolver) {
-        this.basicPanel.setMessage('storage not ready')
-        return
-      }
-      if (decodeTimeout) {
-        window.clearTimeout(decodeTimeout)
-      }
-      this.basicPanel.setUpdating()
-      decodeTimeout = setTimeout(() => {
-        decode(this, sourceLocation)
-      }, 500)
-    })
-  }
-}
-
-function decode (self, sourceLocation) {
-  self.basicPanel.setMessage('')
-  self.traceManager.waterfall([
-    self.traceManager.getStackAt,
-    self.traceManager.getMemoryAt,
-    self.traceManager.getCurrentCalledAddressAt],
-    self.parent.currentStepIndex,
-    (error, result) => {
-      if (!error) {
-        var stack = result[0].value
-        var memory = result[1].value
-        try {
-          var storageViewer = new StorageViewer({
-            stepIndex: self.parent.currentStepIndex,
-            tx: self.parent.tx,
-            address: result[2].value
-          }, self.storageResolver, self.traceManager)
-          localDecoder.solidityLocals(self.parent.currentStepIndex, self.internalTreeCall, stack, memory, storageViewer, sourceLocation).then((locals) => {
-            if (!locals.error) {
-              self.basicPanel.update(locals)
-            }
-            if (!Object.keys(locals).length) {
-              self.basicPanel.setMessage('no locals')
-            }
-          })
-        } catch (e) {
-          self.basicPanel.setMessage(e.message)
-        }
-      } else {
-        console.log(error)
-      }
-    })
-}
-module.exports = SolidityLocals

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

-'use strict'
-var DropdownPanel = require('./DropdownPanel')
-var remixDebug = require('remix-debug')
-var stateDecoder = remixDebug.SolidityDecoder.stateDecoder
-var solidityTypeFormatter = require('./SolidityTypeFormatter')
-var StorageViewer = remixDebug.storage.StorageViewer
-var yo = require('yo-yo')
-
-function SolidityState (_parent, _traceManager, _codeManager, _solidityProxy) {
-  this.storageResolver = null
-  this.parent = _parent
-  this.traceManager = _traceManager
-  this.codeManager = _codeManager
-  this.solidityProxy = _solidityProxy
-  this.basicPanel = new DropdownPanel('Solidity State', {
-    json: true,
-    formatSelf: solidityTypeFormatter.formatSelf,
-    extractData: solidityTypeFormatter.extractData
-  })
-  this.init()
-  this.view
-  this.stateVariablesByAddresses = {}
-  _parent.event.register('traceUnloaded', () => { this.stateVariablesByAddresses = {} })
-  _parent.event.register('newTraceLoaded', () => { this.stateVariablesByAddresses = {} })
-}
-
-SolidityState.prototype.render = function () {
-  if (!this.view) {
-    this.view = yo`<div id='soliditystate' >
-      ${this.basicPanel.render()}
-    </div>`
-  }
-  return this.view
-}
-
-SolidityState.prototype.init = function () {
-  var self = this
-  var decodeTimeout = null
-  this.parent.event.register('indexChanged', this, function (index) {
-    if (index < 0) {
-      self.basicPanel.setMessage('invalid step index')
-      return
-    }
-
-    if (self.parent.currentStepIndex !== index) return
-    if (!self.solidityProxy.loaded()) {
-      self.basicPanel.setMessage('no source has been specified')
-      return
-    }
-
-    if (!self.storageResolver) {
-      return
-    }
-    if (decodeTimeout) {
-      window.clearTimeout(decodeTimeout)
-    }
-    self.basicPanel.setUpdating()
-    decodeTimeout = setTimeout(() => {
-      decode(self, index)
-    }, 500)
-  })
-}
-
-function decode (self, index) {
-  self.traceManager.getCurrentCalledAddressAt(self.parent.currentStepIndex, (error, address) => {
-    if (error) {
-      self.basicPanel.update({})
-      console.log(error)
-    } else {
-      if (self.stateVariablesByAddresses[address]) {
-        extractStateVariables(self, self.stateVariablesByAddresses[address], address)
-      } else {
-        self.solidityProxy.extractStateVariablesAt(index, function (error, stateVars) {
-          if (error) {
-            self.basicPanel.update({})
-            console.log(error)
-          } else {
-            self.stateVariablesByAddresses[address] = stateVars
-            extractStateVariables(self, stateVars, address)
-          }
-        })
-      }
-    }
-  })
-}
-
-function extractStateVariables (self, stateVars, address) {
-  var storageViewer = new StorageViewer({
-    stepIndex: self.parent.currentStepIndex,
-    tx: self.parent.tx,
-    address: address
-  }, self.storageResolver, self.traceManager)
-  stateDecoder.decodeState(stateVars, storageViewer).then((result) => {
-    self.basicPanel.setMessage('')
-    if (!result.error) {
-      self.basicPanel.update(result)
-    } else {
-      self.basicPanel.setMessage(result.error)
-    }
-  })
-}
-
-module.exports = SolidityState

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

-'use strict'
-var yo = require('yo-yo')
-var BN = require('ethereumjs-util').BN
-
-module.exports = {
-  formatSelf: formatSelf,
-  extractData: extractData
-}
-
-function formatSelf (key, data) {
-  var style = fontColor(data)
-  var keyStyle = data.isProperty ? 'color:#847979' : ''
-  if (data.type === 'string') {
-    data.self = JSON.stringify(data.self)
-  }
-  return yo`<label style=${keyStyle}>${key}: <label style=${style}>${data.self}</label><label style='font-style:italic'> ${data.isProperty || !data.type ? '' : ' ' + data.type}</label></label>`
-}
-
-function extractData (item, parent, key) {
-  var ret = {}
-  if (item.isProperty) {
-    return item
-  }
-  if (item.type.lastIndexOf(']') === item.type.length - 1) {
-    ret.children = (item.value || []).map(function (item, index) {
-      return {key: index, value: item}
-    })
-    ret.children.unshift({
-      key: 'length',
-      value: {
-        self: (new BN(item.length.replace('0x', ''), 16)).toString(10),
-        type: 'uint',
-        isProperty: true
-      }
-    })
-    ret.isArray = true
-    ret.self = parent.isArray ? '' : item.type
-  } else if (item.type.indexOf('struct') === 0) {
-    ret.children = Object.keys((item.value || {})).map(function (key) {
-      return {key: key, value: item.value[key]}
-    })
-    ret.self = item.type
-    ret.isStruct = true
-  } else if (item.type.indexOf('mapping') === 0) {
-    ret.children = Object.keys((item.value || {})).map(function (key) {
-      return {key: key, value: item.value[key]}
-    })
-    ret.isMapping = true
-    ret.self = item.type
-  } else {
-    ret.children = null
-    ret.self = item.value
-    ret.type = item.type
-  }
-  return ret
-}
-
-function fontColor (data) {
-  var color = '#124B46'
-  if (data.isArray || data.isStruct || data.isMapping) {
-    color = '#847979'
-  } else if (data.type.indexOf('uint') === 0 ||
-              data.type.indexOf('int') === 0 ||
-              data.type.indexOf('bool') === 0 ||
-              data.type.indexOf('enum') === 0) {
-    color = '#0F0CE9'
-  } else if (data.type === 'string') {
-    color = '#E91E0C'
-  }
-  return 'color:' + color
-}

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

-'use strict'
-var DropdownPanel = require('./DropdownPanel')
-var yo = require('yo-yo')
-
-function StackPanel (_parent, _traceManager) {
-  this.parent = _parent
-  this.traceManager = _traceManager
-  this.basicPanel = new DropdownPanel('Stack', {json: true, displayContentOnly: false})
-  this.init()
-}
-
-StackPanel.prototype.render = function () {
-  return yo`<div id='stackpanel' >${this.basicPanel.render()}</div>`
-}
-
-StackPanel.prototype.init = function () {
-  var self = this
-  this.parent.event.register('indexChanged', this, function (index) {
-    if (index < 0) return
-    if (self.parent.currentStepIndex !== index) return
-
-    self.traceManager.getStackAt(index, function (error, stack) {
-      if (error) {
-        self.basicPanel.update({})
-        console.log(error)
-      } else if (self.parent.currentStepIndex === index) {
-        self.basicPanel.update(stack)
-      }
-    })
-  })
-}
-
-module.exports = StackPanel

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

-'use strict'
-var yo = require('yo-yo')
-var DropdownPanel = require('./DropdownPanel')
-
-function StepDetail (_parentUI, _traceManager) {
-  this.debugger = _parentUI.debugger
-  this.parentUI = _parentUI
-  this.traceManager = _traceManager
-
-  this.basicPanel = new DropdownPanel('Step detail', {json: true, displayContentOnly: true})
-
-  this.detail = initDetail()
-  this.view
-  this.init()
-}
-
-StepDetail.prototype.render = function () {
-  return yo`<div id='stepdetail' >${this.basicPanel.render()}</div>`
-}
-
-StepDetail.prototype.init = function () {
-  var self = this
-  this.debugger.event.register('traceUnloaded', this, function () {
-    self.detail = initDetail()
-    self.basicPanel.update(self.detail)
-  })
-
-  this.debugger.event.register('newTraceLoaded', this, function () {
-    self.detail = initDetail()
-    self.basicPanel.update(self.detail)
-  })
-
-  this.parentUI.event.register('indexChanged', this, function (index) {
-    if (index < 0) return
-
-    self.detail['vm trace step'] = index
-
-    self.traceManager.getCurrentStep(index, function (error, step) {
-      if (error) {
-        console.log(error)
-        self.detail['execution step'] = '-'
-      } else {
-        self.detail['execution step'] = step
-      }
-      self.basicPanel.update(self.detail)
-    })
-
-    self.traceManager.getMemExpand(index, function (error, addmem) {
-      if (error) {
-        console.log(error)
-        self.detail['add memory'] = '-'
-      } else {
-        self.detail['add memory'] = addmem
-      }
-      self.basicPanel.update(self.detail)
-    })
-
-    self.traceManager.getStepCost(index, function (error, gas) {
-      if (error) {
-        console.log(error)
-        self.detail.gas = '-'
-      } else {
-        self.detail.gas = gas
-      }
-      self.basicPanel.update(self.detail)
-    })
-
-    self.traceManager.getCurrentCalledAddressAt(index, function (error, address) {
-      if (error) {
-        console.log(error)
-        self.detail['loaded address'] = '-'
-      } else {
-        self.detail['loaded address'] = address
-      }
-      self.basicPanel.update(self.detail)
-    })
-
-    self.traceManager.getRemainingGas(index, function (error, remaingas) {
-      if (error) {
-        console.log(error)
-        self.detail['remaining gas'] = '-'
-      } else {
-        self.detail['remaining gas'] = remaingas
-      }
-      self.basicPanel.update(self.detail)
-    })
-  })
-}
-
-module.exports = StepDetail
-
-function initDetail () {
-  return {
-    'vm trace step': '-',
-    'execution step': '-',
-    'add memory': '',
-    'gas': '',
-    'remaining gas': '-',
-    'loaded address': '-'
-  }
-}

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

-'use strict'
-var ButtonNavigator = require('./ButtonNavigator')
-var Slider = require('./Slider')
-var remixLib = require('remix-lib')
-var EventManager = remixLib.EventManager
-var yo = require('yo-yo')
-var util = remixLib.util
-
-function StepManager (_parent, _traceManager) {
-  this.event = new EventManager()
-  this.parent = _parent.debugger
-  this.traceManager = _traceManager
-  this.sourceMapByAddress = {}
-  this.solidityMode = false
-
-  var self = this
-  this.parent.event.register('newTraceLoaded', this, function () {
-    if (!this.slider) return
-    self.traceManager.getLength(function (error, length) {
-      if (error) {
-        console.log(error)
-      } else {
-        self.slider.init(length)
-        self.init()
-      }
-    })
-  })
-
-  this.slider = new Slider(this.traceManager, (step) => {
-    return this.solidityMode ? this.resolveToReducedTrace(step, 0) : step
-  })
-  this.slider.event.register('moved', this, function (step) {
-    self.sliderMoved(step)
-  })
-
-  this.parent.callTree.event.register('callTreeReady', () => {
-    if (!this.slider) return
-    if (this.parent.callTree.functionCallStack.length) {
-      this.jumpTo(this.parent.callTree.functionCallStack[0])
-    }
-  })
-
-  this.buttonNavigator = new ButtonNavigator(_parent, this.traceManager)
-  this.buttonNavigator.event.register('stepIntoBack', this, function () {
-    self.stepIntoBack()
-  })
-  this.buttonNavigator.event.register('stepIntoForward', this, function () {
-    self.stepIntoForward()
-  })
-  this.buttonNavigator.event.register('stepOverBack', this, function () {
-    self.stepOverBack()
-  })
-  this.buttonNavigator.event.register('stepOverForward', this, function () {
-    self.stepOverForward()
-  })
-  this.buttonNavigator.event.register('jumpOut', this, function () {
-    self.jumpOut()
-  })
-  this.buttonNavigator.event.register('jumpToException', this, function (exceptionIndex) {
-    self.jumpTo(exceptionIndex)
-  })
-  this.buttonNavigator.event.register('jumpNextBreakpoint', (exceptionIndex) => {
-    self.parent.breakpointManager.jumpNextBreakpoint(_parent.currentStepIndex, true)
-  })
-  this.buttonNavigator.event.register('jumpPreviousBreakpoint', (exceptionIndex) => {
-    self.parent.breakpointManager.jumpPreviousBreakpoint(_parent.currentStepIndex, true)
-  })
-}
-
-StepManager.prototype.remove = function () {
-  // used to stop listenning on event. bad and should be "refactored"
-  this.slider.view = null
-  this.slider = null
-  this.buttonNavigator.view = null
-  this.buttonNavigator = null
-}
-
-StepManager.prototype.resolveToReducedTrace = function (value, incr) {
-  if (this.parent.callTree.reducedTrace.length) {
-    var nextSource = util.findClosestIndex(value, this.parent.callTree.reducedTrace)
-    nextSource = nextSource + incr
-    if (nextSource <= 0) {
-      nextSource = 0
-    } else if (nextSource > this.parent.callTree.reducedTrace.length) {
-      nextSource = this.parent.callTree.reducedTrace.length - 1
-    }
-    return this.parent.callTree.reducedTrace[nextSource]
-  }
-  return value
-}
-
-StepManager.prototype.render = function () {
-  return yo`<div>
-        ${this.slider.render()}
-        ${this.buttonNavigator.render()}
-      </div>`
-}
-
-StepManager.prototype.reset = function () {
-  this.slider.setValue(0)
-  this.currentStepIndex = 0
-  this.buttonNavigator.reset()
-}
-
-StepManager.prototype.init = function () {
-  this.slider.setValue(0)
-  this.changeState(0)
-}
-
-StepManager.prototype.newTraceAvailable = function () {
-  this.init()
-}
-
-StepManager.prototype.jumpTo = function (step) {
-  if (!this.traceManager.inRange(step)) {
-    return
-  }
-  this.slider.setValue(step)
-  this.changeState(step)
-}
-
-StepManager.prototype.sliderMoved = function (step) {
-  if (!this.traceManager.inRange(step)) {
-    return
-  }
-  this.changeState(step)
-}
-
-StepManager.prototype.stepIntoForward = function () {
-  if (!this.traceManager.isLoaded()) {
-    return
-  }
-  var step = this.currentStepIndex
-  if (this.solidityMode) {
-    step = this.resolveToReducedTrace(step, 1)
-  } else {
-    step += 1
-  }
-  if (!this.traceManager.inRange(step)) {
-    return
-  }
-  this.slider.setValue(step)
-  this.changeState(step)
-}
-
-StepManager.prototype.stepIntoBack = function () {
-  if (!this.traceManager.isLoaded()) {
-    return
-  }
-  var step = this.currentStepIndex
-  if (this.solidityMode) {
-    step = this.resolveToReducedTrace(step, -1)
-  } else {
-    step -= 1
-  }
-  if (!this.traceManager.inRange(step)) {
-    return
-  }
-  this.slider.setValue(step)
-  this.changeState(step)
-}
-
-StepManager.prototype.stepOverForward = function () {
-  if (!this.traceManager.isLoaded()) {
-    return
-  }
-  var step = this.traceManager.findStepOverForward(this.currentStepIndex)
-  if (this.solidityMode) {
-    step = this.resolveToReducedTrace(step, 1)
-  }
-  this.slider.setValue(step)
-  this.changeState(step)
-}
-
-StepManager.prototype.stepOverBack = function () {
-  if (!this.traceManager.isLoaded()) {
-    return
-  }
-  var step = this.traceManager.findStepOverBack(this.currentStepIndex)
-  if (this.solidityMode) {
-    step = this.resolveToReducedTrace(step, -1)
-  }
-  this.slider.setValue(step)
-  this.changeState(step)
-}
-
-StepManager.prototype.jumpOut = function () {
-  if (!this.traceManager.isLoaded()) {
-    return
-  }
-  var step = this.traceManager.findStepOut(this.currentStepIndex)
-  if (this.solidityMode) {
-    step = this.resolveToReducedTrace(step, 0)
-  }
-  this.slider.setValue(step)
-  this.changeState(step)
-}
-
-StepManager.prototype.changeState = function (step) {
-  this.currentStepIndex = step
-  this.buttonNavigator.stepChanged(step)
-  this.event.trigger('stepChanged', [step])
-}
-
-module.exports = StepManager

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

-'use strict'
-var DropdownPanel = require('./DropdownPanel')
-var remixDebug = require('remix-debug')
-var StorageViewer = remixDebug.storage.StorageViewer
-var yo = require('yo-yo')
-
-function StoragePanel (_parent, _traceManager) {
-  this.parent = _parent
-  this.storageResolver = null
-  this.traceManager = _traceManager
-  this.basicPanel = new DropdownPanel('Storage', {json: true})
-  this.init()
-  this.disabled = false
-}
-
-StoragePanel.prototype.render = function () {
-  return yo`<div id='storagepanel' >${this.basicPanel.render()}</div>`
-}
-
-StoragePanel.prototype.init = function () {
-  var self = this
-  this.parent.event.register('indexChanged', this, function (index) {
-    if (self.disabled) return
-    if (index < 0) return
-    if (self.parent.currentStepIndex !== index) return
-    if (!self.storageResolver) return
-
-    this.traceManager.getCurrentCalledAddressAt(index, (error, address) => {
-      if (!error) {
-        var storageViewer = new StorageViewer({
-          stepIndex: self.parent.currentStepIndex,
-          tx: self.parent.tx,
-          address: address
-        }, self.storageResolver, self.traceManager)
-
-        storageViewer.storageRange((error, storage) => {
-          if (error) {
-            console.log(error)
-            self.basicPanel.update({})
-          } else if (self.parent.currentStepIndex === index) {
-            var header = storageViewer.isComplete(address) ? 'completely loaded' : 'partially loaded...'
-            self.basicPanel.update(storage, header)
-          }
-        })
-      }
-    })
-  })
-}
-
-module.exports = StoragePanel

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

-var remixLib = require('remix-lib')
-var EventManager = remixLib.EventManager
-var traceHelper = remixLib.helpers.trace
-var yo = require('yo-yo')
-var init = remixLib.init
-var csjs = require('csjs-inject')
-var styleGuide = require('../../../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .container {
-    display: flex;
-    flex-direction: column;
-  }
-  .txContainer {
-    display: flex;
-    flex-direction: column;
-  }
-  .txinputs {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-  .txinput {
-    ${styles.rightPanel.debuggerTab.input_Debugger}
-    margin: 3px;
-    width: inherit;
-  }
-  .txbuttons {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-  .txbutton {
-    ${styles.rightPanel.debuggerTab.button_Debugger}
-    width: inherit;
-  }
-  .txbuttonstart {
-    ${styles.rightPanel.debuggerTab.button_Debugger}
-  }
-  .txbutton:hover {
-    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
-  }
-  .vmargin {
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
-`
-function TxBrowser (_parent, opts) {
-  this.event = new EventManager()
-
-  this.blockNumber
-  this.txNumber
-  this.view
-  this.displayConnectionSetting = opts.displayConnectionSetting
-  this.web3 = opts.web3
-  var self = this
-  _parent.event.register('providerChanged', this, function (provider) {
-    self.setDefaultValues()
-    if (self.view) {
-      yo.update(self.view, self.render())
-    }
-  })
-}
-
-// creation 0xa9619e1d0a35b2c1d686f5b661b3abd87f998d2844e8e9cc905edb57fc9ce349
-// invokation 0x71a6d583d16d142c5c3e8903060e8a4ee5a5016348a9448df6c3e63b68076ec4 0xcda2b2835add61af54cf83bd076664d98d7908c6cd98d86423b3b48d8b8e51ff
-// test:
-// creation: 0x72908de76f99fca476f9e3a3b5d352f350a98cd77d09cebfc59ffe32a6ecaa0b
-// invokation: 0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51
-
-TxBrowser.prototype.setDefaultValues = function () {
-  this.connectInfo = ''
-  if (this.view) {
-    yo.update(this.view, this.render())
-  }
-}
-
-TxBrowser.prototype.submit = function (tx) {
-  var self = this
-  self.event.trigger('newTxLoading', [this.blockNumber, this.txNumber])
-  if (tx) {
-    return self.update(null, tx)
-  }
-  if (!this.txNumber) {
-    self.update('no tx index or tx hash to look for')
-    return
-  }
-  try {
-    if (this.txNumber.indexOf('0x') !== -1) {
-      self.web3.eth.getTransaction(this.txNumber, function (error, result) {
-        self.update(error, result)
-      })
-    } else {
-      self.web3.eth.getTransactionFromBlock(this.blockNumber, this.txNumber, function (error, result) {
-        self.update(error, result)
-      })
-    }
-  } catch (e) {
-    self.update(e.message)
-  }
-}
-
-TxBrowser.prototype.update = function (error, tx) {
-  var info = {}
-  if (error) {
-    this.view.querySelector('#error').innerHTML = error
-  } else {
-    if (tx) {
-      this.view.querySelector('#error').innerHTML = ''
-      if (!tx.to) {
-        tx.to = traceHelper.contractCreationToken('0')
-      }
-      info.from = tx.from
-      info.to = tx.to
-      info.hash = tx.hash
-      this.event.trigger('newTraceRequested', [this.blockNumber, this.txNumber, tx])
-    } else {
-      var mes = '<not found>'
-      info.from = mes
-      info.to = mes
-      info.hash = mes
-      this.view.querySelector('#error').innerHTML = 'Cannot find transaction with reference. Block number: ' + this.blockNumber + '. Transaction index/hash: ' + this.txNumber
-    }
-  }
-}
-
-TxBrowser.prototype.updateWeb3Url = function (newhost) {
-  init.setProvider(global.web3, newhost)
-  var self = this
-  this.checkWeb3(function (error, block) {
-    if (!error) {
-      self.connectInfo = 'Connected to ' + global.web3.currentProvider.host + '. Current block number: ' + block
-    } else {
-      self.connectInfo = 'Unable to connect to ' + global.web3.currentProvider.host + '. ' + error.message
-    }
-    yo.update(self.view, self.render())
-  })
-}
-
-TxBrowser.prototype.checkWeb3 = function (callback) {
-  try {
-    global.web3.eth.getBlockNumber(function (error, block) {
-      callback(error, block)
-    })
-  } catch (e) {
-    console.log(e)
-    callback(e.message, null)
-  }
-}
-
-TxBrowser.prototype.updateBlockN = function (ev) {
-  this.blockNumber = ev.target.value
-}
-
-TxBrowser.prototype.updateTxN = function (ev) {
-  this.txNumber = ev.target.value
-}
-
-TxBrowser.prototype.load = function (txHash, tx) {
-  this.txNumber = txHash
-  this.submit(tx)
-}
-
-TxBrowser.prototype.unload = function (txHash) {
-  this.event.trigger('unloadRequested')
-  this.init()
-}
-
-TxBrowser.prototype.init = function (ev) {
-  this.setDefaultValues()
-}
-
-TxBrowser.prototype.connectionSetting = function () {
-  if (this.displayConnectionSetting) {
-    var self = this
-    return yo`<div class="${css.vmargin}"><span>Node URL: </span><input onkeyup=${function () { self.updateWeb3Url(arguments[0].target.value) }} value=${global.web3.currentProvider ? global.web3.currentProvider.host : ' - none - '} type='text' />
-              <span>${this.connectInfo}</span></div>`
-  } else {
-    return ''
-  }
-}
-
-TxBrowser.prototype.render = function () {
-  var self = this
-  var view = yo`<div class="${css.container}">
-        ${this.connectionSetting()}
-        <div class="${css.txContainer}">
-          <div class="${css.txinputs}">
-            <input class="${css.txinput}" onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
-            <input class="${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
-          </div>
-          <div class="${css.txbuttons}">
-            <button id='load' class='${css.txbutton}' title='start debugging' onclick=${function () { self.submit() }}>Start debugging</button>
-            <button id='unload' class='${css.txbutton}' title='stop debugging' onclick=${function () { self.unload() }}>Stop</button>
-          </div>
-        </div>
-        <span id='error'></span>
-      </div>`
-  if (!this.view) {
-    this.view = view
-  }
-  return view
-}
-
-module.exports = TxBrowser

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

-'use strict'
-var csjs = require('csjs-inject')
-var CodeListView = require('./CodeListView')
-var CalldataPanel = require('./CalldataPanel')
-var MemoryPanel = require('./MemoryPanel')
-var CallstackPanel = require('./CallstackPanel')
-var StackPanel = require('./StackPanel')
-var StoragePanel = require('./StoragePanel')
-var FullStoragesChangesPanel = require('./FullStoragesChanges')
-var StepDetail = require('./StepDetail')
-var DropdownPanel = require('./DropdownPanel')
-var SolidityState = require('./SolidityState')
-var SolidityLocals = require('./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/lib/cmdInterpreterAPI.js

@@ -10,7 +10,7 @@ var globalRegistry = require('../global/registry')
 var SourceHighlighter = require('../app/editor/sourceHighlighter')
 var RemixDebug = require('remix-debug').EthDebugger
 var TreeView = require('../app/ui/TreeView') // TODO setup a direct reference to the UI components
-var solidityTypeFormatter = require('../app/debugger/remix-debugger/src/ui/SolidityTypeFormatter')
+var solidityTypeFormatter = require('../app/debugger/debuggerUI/vmDebugger/utils/SolidityTypeFormatter')
 
 class CmdInterpreterAPI {
   constructor (terminal, localRegistry) {