From 44b60c4d99e81b8a50b9004d9f28f0a144400317 Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 21 Apr 2016 15:30:47 +0200 Subject: [PATCH] change vmTrace call styling --- src/assemblyItemsBrowser.js | 116 +++++++++++++++++++++++------------- src/basicPanel.js | 14 ++--- src/basicStyles.js | 21 ++++--- src/sticker.js | 36 +++++++++++ src/txBrowser.js | 2 +- src/vmTraceManager.js | 2 +- src/web3Admin.js | 7 +++ 7 files changed, 141 insertions(+), 57 deletions(-) create mode 100644 src/sticker.js diff --git a/src/assemblyItemsBrowser.js b/src/assemblyItemsBrowser.js index 0d2082419b..40a4b43ed3 100644 --- a/src/assemblyItemsBrowser.js +++ b/src/assemblyItemsBrowser.js @@ -1,5 +1,6 @@ var React = require('react'); var BasicPanel = require('./basicPanel') +var Sticker = require('./sticker') var codeUtils = require('./codeUtils') var style = require('./basicStyles') @@ -16,12 +17,10 @@ module.exports = React.createClass({ currentStorage: null, currentMemory: null, currentCallData: null, - lastLevels: null, - lastStorage: null, - lastMemory: null, - lastCallData: null, + currentStepInfo: null, codes: {}, // assembly items instructions list by contract addesses - instructionsIndexByBytesOffset: {} // mapping between bytes offset and instructions index. + instructionsIndexByBytesOffset: {}, // mapping between bytes offset and instructions index. + levels: {} }; }, @@ -37,25 +36,50 @@ module.exports = React.createClass({ return (
{this.state.currentAddress}
+
- - - - + + + +
+
- -
-
- - - - - -
-
+ + + + + + + + + + + + + + + +
+ +
+ +
+ 		+ +
+ + + +
+ + + +
+ + ); }, @@ -108,7 +132,7 @@ module.exports = React.createClass({ renderAssemblyItems: function() { if (this.props.vmTrace) - { + { return this.state.codes[this.state.currentAddress].map(function(item, i) { return ; @@ -117,10 +141,28 @@ module.exports = React.createClass({ }, componentWillReceiveProps: function (nextProps) - { + { + this.buildCallStack(nextProps.vmTrace) this.updateState(nextProps, 0) }, + buildCallStack: function(vmTrace) + { + this.state.levels = {} + var depth = 0 + var currentAddress = vmTrace[0].address + var callStack = [currentAddress] + for (var k in vmTrace) + { + var trace = vmTrace[k] + if (trace.depth > depth) + callStack.push(trace.address) // new context + else if (trace.depth < depth) + callStack.pop() // returning from context + this.state.levels[trace.steps] = callStack + } + }, + updateState: function(props, vmTraceIndex) { var previousState = this.state.currentSelected @@ -142,41 +184,33 @@ module.exports = React.createClass({ stateChanges["currentStack"] = stack } - if (props.vmTrace[vmTraceIndex].levels) - { - var levels = props.vmTrace[vmTraceIndex].levels - var callStack = [] - for (var k in levels) - callStack.push(props.vmTrace[levels[k]].address) - stateChanges["currentCallStack"] = callStack - lastCallStack = callStack - } + if (this.state.levels[vmTraceIndex]) + stateChanges["currentCallStack"] = this.state.levels[vmTraceIndex] var storageIndex = vmTraceIndex if (vmTraceIndex < previousState) storageIndex = this.retrieveLastSeenProperty(vmTraceIndex, "storage", props.vmTrace) if (props.vmTrace[storageIndex].storage || storageIndex === 0) - { stateChanges["currentStorage"] = props.vmTrace[storageIndex].storage - lastStorage = props.vmTrace[storageIndex].storage - } var memoryIndex = vmTraceIndex if (vmTraceIndex < previousState) memoryIndex = this.retrieveLastSeenProperty(vmTraceIndex, "memory", props.vmTrace) if (props.vmTrace[memoryIndex].memory || memoryIndex === 0) - { stateChanges["currentMemory"] = this.formatMemory(props.vmTrace[memoryIndex].memory, 16) - lastMemory = this.formatMemory(props.vmTrace[memoryIndex].memory, 16) - } if (props.vmTrace[vmTraceIndex].calldata) - { stateChanges["currentCallData"] = props.vmTrace[vmTraceIndex].calldata - lastCallData = props.vmTrace[vmTraceIndex].calldata - } stateChanges["selectedInst"] = this.state.instructionsIndexByBytesOffset[currentAddress][props.vmTrace[vmTraceIndex].pc] stateChanges["currentSelected"] = vmTraceIndex + + stateChanges["currentStepInfo"] = [ + "Current Step: " + props.vmTrace[vmTraceIndex].steps, + "Adding Memory: " + (props.vmTrace[vmTraceIndex].memexpand ? props.vmTrace[vmTraceIndex].memexpand : ""), + "Step Cost: " + props.vmTrace[vmTraceIndex].gascost, + "Remaining Gas: " + props.vmTrace[vmTraceIndex].gas + ] + this.setState(stateChanges) }, diff --git a/src/basicPanel.js b/src/basicPanel.js index 6ede0be160..8fb1d8ba3f 100644 --- a/src/basicPanel.js +++ b/src/basicPanel.js @@ -17,13 +17,13 @@ module.exports = React.createClass({ return (
{this.props.name}
-
- - - {this.renderItems()} - -
-
+
+ + + {this.renderItems()} + +
+
); }, diff --git a/src/basicStyles.js b/src/basicStyles.js index d9e0b402d4..e356b3d5b6 100644 --- a/src/basicStyles.js +++ b/src/basicStyles.js @@ -12,23 +12,21 @@ module.exports = { { 'fontStyle': 'italic' }, - instructions: + instructionsList: { - 'width': '650px' + 'width': "320px" }, panel: { container: { - 'margin': '10px', 'border': '1px solid', - 'width': '650px' + 'width': '600px' }, tableContainer: { - 'minHeight': '50px', - 'maxHeight': '200px', - 'overflowY': 'scroll' + 'height': '150px', + 'overflowY': 'auto' }, table: { @@ -47,5 +45,14 @@ module.exports = { display: { 'display': 'block' + }, + sticker: + { + 'verticalAlign': 'top', + 'margin': '5px' + }, + inline: + { + 'display': 'inline-block' } } \ No newline at end of file diff --git a/src/sticker.js b/src/sticker.js new file mode 100644 index 0000000000..99c04ee832 --- /dev/null +++ b/src/sticker.js @@ -0,0 +1,36 @@ +var React = require('react'); +var style = require('./basicStyles') + +module.exports = React.createClass({ + + getDefaultProps: function() + { + return { + data: null, + }; + }, + + render: function() + { + return ( +
+ + {this.renderItems()} +
+
+ ); + }, + + renderItems: function() + { + + if (this.props.data) + { + var ret = [] + for (var key in this.props.data) + ret.push({this.props.data[key]}) + return ret + } + return null + }, +}) diff --git a/src/txBrowser.js b/src/txBrowser.js index 113a35db9d..8ca7fe6b51 100644 --- a/src/txBrowser.js +++ b/src/txBrowser.js @@ -26,7 +26,7 @@ module.exports = React.createClass({ render: function() { return (
- +
diff --git a/src/vmTraceManager.js b/src/vmTraceManager.js index 4b7edbd80b..2dd9bb313c 100644 --- a/src/vmTraceManager.js +++ b/src/vmTraceManager.js @@ -1,5 +1,5 @@ module.exports = { retrieveVmTrace: function(blockNumber, txNumber) { - return web3.admin.vmTrace(blockNumber, parseInt(txNumber), "T0Li2pYtq70="); + return web3.debug.debugTrace(blockNumber, parseInt(txNumber)); } } diff --git a/src/web3Admin.js b/src/web3Admin.js index 099b051141..0e4b139bd3 100644 --- a/src/web3Admin.js +++ b/src/web3Admin.js @@ -92,6 +92,13 @@ module.exports = { property: 'debug', methods: [ + new web3._extend.Method({ + name: 'debugTrace', + call: 'debug_trace', + params: 1, + inputFormatter: [null, null], + params: 2 + }), new web3._extend.Method({ name: 'printBlock', call: 'debug_printBlock',