-
VM Debugger
-
+
${this.txBrowser.render()}
${this.stepManager.render()}
-
- ${this.sticker.render()}
-
${this.statusMessage}
${this.vmDebugger.render()}
`
@@ -121,7 +115,7 @@ Ethdebugger.prototype.startDebugging = function (blockNumber, txIndex, tx) {
this.tx = tx
var self = this
this.traceManager.resolveTrace(tx, function (error, result) {
- console.log('trace loaded ' + result + ' ' + error)
+ console.log('trace loaded ' + result)
if (result) {
self.statusMessage = ''
yo.update(self.view, self.render())
diff --git a/src/ui/FullStoragesChanges.js b/src/ui/FullStoragesChanges.js
index 3ddf9f0dbb..512448bcb5 100644
--- a/src/ui/FullStoragesChanges.js
+++ b/src/ui/FullStoragesChanges.js
@@ -1,5 +1,5 @@
'use strict'
-var BasicPanel = require('./BasicPanel')
+var DropdownPanel = require('./DropdownPanel')
var yo = require('yo-yo')
function FullStoragesChanges (_parent, _traceManager) {
@@ -8,7 +8,7 @@ function FullStoragesChanges (_parent, _traceManager) {
this.addresses = []
this.view
this.traceLength
- this.basicPanel = new BasicPanel('Full Storages Changes', '1205px', '100px')
+ this.basicPanel = new DropdownPanel('Full Storages Changes')
this.init()
}
@@ -20,14 +20,6 @@ FullStoragesChanges.prototype.render = function () {
return view
}
-FullStoragesChanges.prototype.hide = function () {
- this.view.style.display = 'none'
-}
-
-FullStoragesChanges.prototype.show = function () {
- this.view.style.display = 'block'
-}
-
FullStoragesChanges.prototype.init = function () {
var self = this
this.parent.register('newTraceLoaded', this, function (length) {
@@ -35,9 +27,7 @@ FullStoragesChanges.prototype.init = function () {
self.traceManager.getAddresses(function (error, addresses) {
if (!error) {
self.addresses = addresses
- self.basicPanel.data = ''
- yo.update(self.view, self.render())
- self.hide()
+ self.basicPanel.update({})
}
})
@@ -58,14 +48,10 @@ FullStoragesChanges.prototype.init = function () {
self.traceManager.getStorageAt(index, null, function (error, result) {
if (!error) {
storageJSON[self.addresses[k]] = result
- self.basicPanel.data = JSON.stringify(storageJSON, null, '\t')
- yo.update(self.view, self.render())
- self.show()
+ self.basicPanel.update(storageJSON)
}
}, self.addresses[k])
}
- } else {
- self.hide()
}
})
}
diff --git a/src/ui/MemoryPanel.js b/src/ui/MemoryPanel.js
index 0a7e6a8ef7..cd6161109f 100644
--- a/src/ui/MemoryPanel.js
+++ b/src/ui/MemoryPanel.js
@@ -1,12 +1,12 @@
'use strict'
-var BasicPanel = require('./BasicPanel')
+var DropdownPanel = require('./DropdownPanel')
var util = require('../helpers/ui')
var yo = require('yo-yo')
function MemoryPanel (_parent, _traceManager) {
this.parent = _parent
this.traceManager = _traceManager
- this.basicPanel = new BasicPanel('Memory')
+ this.basicPanel = new DropdownPanel('Memory')
this.init()
}
@@ -23,11 +23,10 @@ MemoryPanel.prototype.init = function () {
self.traceManager.getMemoryAt(index, function (error, memory) {
if (error) {
console.log(error)
- self.basicPanel.data = ''
+ self.basicPanel.update({})
} else if (self.parent.currentStepIndex === index) {
- self.basicPanel.data = util.formatMemory(memory, 16)
+ self.basicPanel.update(util.formatMemory(memory, 16))
}
- self.basicPanel.update()
})
})
}
diff --git a/src/ui/StackPanel.js b/src/ui/StackPanel.js
index 956ea1fb65..927af283a7 100644
--- a/src/ui/StackPanel.js
+++ b/src/ui/StackPanel.js
@@ -1,12 +1,12 @@
'use strict'
-var BasicPanel = require('./BasicPanel')
+var DropdownPanel = require('./DropdownPanel')
var ui = require('../helpers/ui')
var yo = require('yo-yo')
function StackPanel (_parent, _traceManager) {
this.parent = _parent
this.traceManager = _traceManager
- this.basicPanel = new BasicPanel('Stack')
+ this.basicPanel = new DropdownPanel('Stack')
this.init()
}
@@ -22,22 +22,21 @@ StackPanel.prototype.init = function () {
self.traceManager.getStackAt(index, function (error, stack) {
if (error) {
- self.basicPanel.data = ''
+ self.basicPanel.update({})
console.log(error)
} else if (self.parent.currentStepIndex === index) {
- self.basicPanel.data = self.format(stack)
+ self.basicPanel.update(self.format(stack))
}
- self.basicPanel.update()
})
})
}
StackPanel.prototype.format = function (stack) {
- var ret = ''
- for (var key in stack) {
- var hex = ui.normalizeHex(stack[key])
- ret += hex + '\n'
- }
+ var ret = []
+ stack.map(function (item, i) {
+ var hex = ui.normalizeHex(item)
+ ret.push(hex)
+ })
return ret
}
diff --git a/src/ui/StepDetail.js b/src/ui/StepDetail.js
new file mode 100644
index 0000000000..ab1feeaa79
--- /dev/null
+++ b/src/ui/StepDetail.js
@@ -0,0 +1,100 @@
+'use strict'
+var yo = require('yo-yo')
+var DropdownPanel = require('./DropdownPanel')
+
+function StepDetail (_parent, _traceManager) {
+ this.parent = _parent
+ this.traceManager = _traceManager
+
+ this.basicPanel = new DropdownPanel('Step detail')
+
+ this.detail = initDetail()
+ this.view
+ this.init()
+}
+
+StepDetail.prototype.render = function () {
+ return yo`
${this.basicPanel.render()}
`
+}
+
+StepDetail.prototype.init = function () {
+ var self = this
+ this.parent.register('traceUnloaded', this, function () {
+ self.detail = initDetail()
+ self.basicPanel.update(self.detail)
+ })
+
+ this.parent.register('newTraceLoaded', this, function () {
+ self.detail = initDetail()
+ self.basicPanel.update(self.detail)
+ })
+
+ this.parent.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': '-'
+ }
+}
diff --git a/src/ui/StepManager.js b/src/ui/StepManager.js
index bb7763e824..bcb3c6089c 100644
--- a/src/ui/StepManager.js
+++ b/src/ui/StepManager.js
@@ -1,11 +1,9 @@
'use strict'
var ButtonNavigator = require('./ButtonNavigator')
var Slider = require('./Slider')
-var style = require('./styles/basicStyles')
var util = require('../helpers/global')
var EventManager = require('../lib/eventManager')
var yo = require('yo-yo')
-var ui = require('../helpers/ui')
function StepManager (_parent, _traceManager) {
util.extend(this, new EventManager())
@@ -49,7 +47,7 @@ function StepManager (_parent, _traceManager) {
StepManager.prototype.render = function () {
return (
- yo`
+ yo`
${this.slider.render()}
${this.buttonNavigator.render()}
`
diff --git a/src/ui/Sticker.js b/src/ui/Sticker.js
deleted file mode 100644
index e32f76b11d..0000000000
--- a/src/ui/Sticker.js
+++ /dev/null
@@ -1,150 +0,0 @@
-'use strict'
-var yo = require('yo-yo')
-
-function Sticker (_parent, _traceManager) {
- this.parent = _parent
- this.traceManager = _traceManager
-
- this.vmTraceStep = '-'
- this.step = '-'
- this.addmemory = '-'
- this.gas = '-'
- this.remainingGas = '-'
- this.loadedAddress = '-'
- this.hide = true
-
- this.view
- this.init()
-}
-
-Sticker.prototype.render = function () {
- var view = yo`
-
-
-
- |
- VMtracestep:
- |
-
- ${this.vmTraceStep}
- |
-
-
- |
- Step:
- |
-
- ${this.step}
- |
-
-
- |
- Add memory:
- |
-
- ${this.addmemory}
- |
-
-
- |
- Gas:
- |
-
- ${this.gas}
- |
-
-
- |
- Remaining gas:
- |
-
- ${this.remainingGas}
- |
-
-
- |
- Loaded address:
- |
-
- ${this.loadedAddress}
- |
-
-
-
-
`
- if (!this.view) {
- this.view = view
- }
- return view
-}
-
-Sticker.prototype.init = function () {
- var self = this
- this.parent.register('traceUnloaded', this, function () {
- self.hide = true
- yo.update(self.view, self.render())
- })
-
- this.parent.register('newTraceLoaded', this, function () {
- self.hide = false
- yo.update(self.view, self.render())
- })
-
- this.parent.register('indexChanged', this, function (index) {
- if (index < 0) return
-
- self.vmTraceStep = index
-
- self.traceManager.getCurrentStep(index, function (error, step) {
- if (error) {
- console.log(error)
- self.step = '-'
- } else {
- self.step = step
- }
- yo.update(self.view, self.render())
- })
-
- self.traceManager.getMemExpand(index, function (error, addmem) {
- if (error) {
- console.log(error)
- self.addmemory = '-'
- } else {
- self.addmemory = addmem
- }
- yo.update(self.view, self.render())
- })
-
- self.traceManager.getStepCost(index, function (error, gas) {
- if (error) {
- console.log(error)
- self.gas = '-'
- } else {
- self.gas = gas
- }
- yo.update(self.view, self.render())
- })
-
- self.traceManager.getCurrentCalledAddressAt(index, function (error, address) {
- if (error) {
- console.log(error)
- self.loadedAddress = '-'
- } else {
- self.loadedAddress = address
- }
- yo.update(self.view, self.render())
- })
-
- self.traceManager.getRemainingGas(index, function (error, remaingas) {
- if (error) {
- console.log(error)
- self.remainingGas = '-'
- } else {
- self.remainingGas = remaingas
- }
- yo.update(self.view, self.render())
- })
- })
-}
-
-module.exports = Sticker
diff --git a/src/ui/StoragePanel.js b/src/ui/StoragePanel.js
index abe41e5b73..454f0aac9b 100644
--- a/src/ui/StoragePanel.js
+++ b/src/ui/StoragePanel.js
@@ -1,11 +1,11 @@
'use strict'
-var BasicPanel = require('./BasicPanel')
+var DropdownPanel = require('./DropdownPanel')
var yo = require('yo-yo')
function StoragePanel (_parent, _traceManager, _address) {
this.parent = _parent
this.traceManager = _traceManager
- this.basicPanel = new BasicPanel('Storage Changes')
+ this.basicPanel = new DropdownPanel('Storage Changes')
this.address = _address
this.init()
this.disabled = false
@@ -25,21 +25,12 @@ StoragePanel.prototype.init = function () {
self.traceManager.getStorageAt(index, self.parent.tx, function (error, storage) {
if (error) {
console.log(error)
- self.basicPanel.data = self.formatStorage(storage)
+ self.basicPanel.update({})
} else if (self.parent.currentStepIndex === index) {
- self.basicPanel.data = self.formatStorage(storage)
+ self.basicPanel.update(storage)
}
- self.basicPanel.update()
}, self.address)
})
}
-StoragePanel.prototype.formatStorage = function (storage) {
- var ret = ''
- for (var key in storage) {
- ret += key + ' ' + storage[key] + '\n'
- }
- return ret
-}
-
module.exports = StoragePanel
diff --git a/src/ui/TxBrowser.js b/src/ui/TxBrowser.js
index a4d18413f9..058b80413a 100644
--- a/src/ui/TxBrowser.js
+++ b/src/ui/TxBrowser.js
@@ -5,17 +5,17 @@ var traceHelper = require('../helpers/traceHelper')
var yo = require('yo-yo')
var ui = require('../helpers/ui')
var init = require('../helpers/init')
+var DropdownPanel = require('./DropdownPanel')
function TxBrowser (_parent) {
util.extend(this, new EventManager())
this.blockNumber
this.txNumber
- this.hash
- this.from
- this.to
this.view
this.displayConnectionSetting = true
+ this.basicPanel = new DropdownPanel('Transaction')
+ this.basicPanel.data = {}
var self = this
_parent.register('providerChanged', this, function (provider) {
self.displayConnectionSetting = provider === 'INTERNAL'
@@ -33,12 +33,10 @@ function TxBrowser (_parent) {
// invokation: 0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51
TxBrowser.prototype.setDefaultValues = function () {
- this.from = ' - '
- this.to = ' - '
- this.hash = ' - '
this.blockNumber = null
- this.txNumber = ''
this.connectInfo = ''
+ this.basicPanel.data = {}
+ this.basicPanel.update()
this.updateWeb3Url(util.web3.currentProvider.host)
}
@@ -57,23 +55,24 @@ TxBrowser.prototype.submit = function () {
} catch (e) {
console.log(e)
}
- console.log(JSON.stringify(tx))
+ var info = {}
if (tx) {
if (!tx.to) {
tx.to = traceHelper.contractCreationToken('0')
}
- this.from = tx.from
- this.to = tx.to
- this.hash = tx.hash
+ info.from = tx.from
+ info.to = tx.to
+ info.hash = tx.hash
this.trigger('newTraceRequested', [this.blockNumber, this.txNumber, tx])
} else {
var mes = '
'
- this.from = mes
- this.to = mes
- this.hash = mes
+ info.from = mes
+ info.to = mes
+ info.hash = mes
console.log('cannot find ' + this.blockNumber + ' ' + this.txNumber)
}
- yo.update(this.view, this.render())
+ this.basicPanel.data = info
+ this.basicPanel.update()
}
TxBrowser.prototype.updateWeb3Url = function (newhost) {
@@ -110,13 +109,16 @@ TxBrowser.prototype.updateTxN = function (ev) {
TxBrowser.prototype.load = function (txHash) {
this.txNumber = txHash
- yo.update(this.view, this.render())
this.submit()
}
+TxBrowser.prototype.unload = function (txHash) {
+ this.trigger('unloadRequested')
+ this.init()
+}
+
TxBrowser.prototype.init = function (ev) {
this.setDefaultValues()
- yo.update(this.view, this.render())
}
TxBrowser.prototype.connectionSetting = function () {
@@ -131,43 +133,16 @@ TxBrowser.prototype.connectionSetting = function () {
TxBrowser.prototype.render = function () {
var self = this
- var view = yo`
+ var view = yo`
${this.connectionSetting()}
-
-
-