From 5d54ced57ec719de6f69daa0a8eea798f347df49 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 27 Apr 2016 15:46:57 +0200 Subject: [PATCH 1/4] add slider --- package.json | 2 +- src/assemblyItemsBrowser.js | 42 ++++++----------------------------- src/debugger.js | 12 +++++----- src/slider.js | 31 ++++++++++++++++++++++++++ src/sliderStyles.js | 17 ++++++++++++++ src/vmTraceBrowser.js | 9 ++++++-- src/vmTraceButtonNavigator.js | 30 +++++++++++++++++++++++++ 7 files changed, 99 insertions(+), 44 deletions(-) create mode 100644 src/slider.js create mode 100644 src/sliderStyles.js create mode 100644 src/vmTraceButtonNavigator.js diff --git a/package.json b/package.json index 8ca7f55e7a..e8aa6317df 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ }, "devDependencies": { "babel-preset-react": "^6.5.0", - "babelify": "^7.2.0", + "babelify": "^7.2.0" }, "scripts": { "install": "npm install --save react react-dom; npm install -g browserify; npm install --save babelify babel-preset-react; npm install web3", diff --git a/src/assemblyItemsBrowser.js b/src/assemblyItemsBrowser.js index 52e2d0ec14..ab62adfcf3 100644 --- a/src/assemblyItemsBrowser.js +++ b/src/assemblyItemsBrowser.js @@ -1,8 +1,10 @@ var React = require('react'); var BasicPanel = require('./basicPanel') var Sticker = require('./sticker') +var ButtonNavigator = require('./vmTraceButtonNavigator') var codeUtils = require('./codeUtils') var style = require('./basicStyles') +var Slider = require('./slider'); module.exports = React.createClass({ @@ -36,14 +38,10 @@ module.exports = React.createClass({ return (
Current code: {this.state.currentAddress}
-
- - - - + +
-
@@ -82,7 +80,7 @@ module.exports = React.createClass({ ); }, - + renderStorageRow: function(data) { var ret = [] @@ -117,17 +115,7 @@ module.exports = React.createClass({ this.state.codes[address] = code[0] this.state.instructionsIndexByBytesOffset[address] = code[1] } - }, - - checkButtonState: function(incr) - { - if (!this.props.vmTrace) - return "disabled" - if (incr === -1) - return this.state.currentSelected === 0 ? "disabled" : "" - else if (incr === 1) - return this.state.currentSelected >= this.props.vmTrace.length - 1 ? "disabled" : "" - }, + }, renderAssemblyItems: function() { @@ -170,7 +158,7 @@ module.exports = React.createClass({ updateState: function(props, vmTraceIndex) { - if (!props.vmTrace) + if (!props.vmTrace || !props.vmTrace[vmTraceIndex]) return var previousState = this.state.currentSelected var stateChanges = {} @@ -245,22 +233,6 @@ module.exports = React.createClass({ this.moveSelection(-1) }, - stepOverBack: function() - { - if (this.isReturnInstruction(this.state.currentSelected - 1)) - this.stepOutBack(); - else - this.moveSelection(-1); - }, - - stepOverForward: function() - { - if (this.isCallInstruction(this.state.currentSelected)) - this.stepOutForward(); - else - this.moveSelection(1); - }, - stepIntoForward: function() { this.moveSelection(1) diff --git a/src/debugger.js b/src/debugger.js index 8838d8aa21..fdb570a8d4 100644 --- a/src/debugger.js +++ b/src/debugger.js @@ -6,19 +6,19 @@ var style = require('./basicStyles') module.exports = React.createClass({ getInitialState: function() { - return {vmTrace: null, state: ""} + return {vmTrace: null, state: "", currentStep: -1} }, render: function() { return (
-

Eth Debugger

- -
{this.state.state}
- +

Eth Debugger

+ +
{this.state.state}
+
); - }, + }, retrieveVmTrace: function(blockNumber, txNumber) { diff --git a/src/slider.js b/src/slider.js new file mode 100644 index 0000000000..4205460fca --- /dev/null +++ b/src/slider.js @@ -0,0 +1,31 @@ +var React = require('react'); +var style = require('./sliderStyles') + +module.exports = React.createClass({ + + propTypes: { + onChange: React.PropTypes.func.isRequired, + }, + + getDefaultProps: function() + { + return { + min: 0, + max: 500, + step: 0 + }; + }, + + render: function() { + return ( +
+ +
+ ); + }, + + onChange: function(event) + { + this.props.onChange(event.currentTarget.value) + } +}) diff --git a/src/sliderStyles.js b/src/sliderStyles.js new file mode 100644 index 0000000000..d6cc8de75d --- /dev/null +++ b/src/sliderStyles.js @@ -0,0 +1,17 @@ +module.exports = { + rule: + { + 'width': '600px', + }, + runner: + { + 'position': 'absolute', + 'width': '16px', + 'height': '16px', + 'margin': '0', + 'padding': '0', + 'overflow': 'hidden', + 'border': '1px solid #a4bed4', + 'background-color': '#f1f7ff' + } +} \ No newline at end of file diff --git a/src/vmTraceBrowser.js b/src/vmTraceBrowser.js index 2704e68e2e..11e53326cd 100644 --- a/src/vmTraceBrowser.js +++ b/src/vmTraceBrowser.js @@ -2,7 +2,12 @@ var React = require('react'); var AssemblyItemsBrowser = require('./assemblyItemsBrowser'); module.exports = React.createClass({ + render: function() { - return ( ) - } + return ( +
+ +
+ ) + }, }); diff --git a/src/vmTraceButtonNavigator.js b/src/vmTraceButtonNavigator.js new file mode 100644 index 0000000000..85592c7983 --- /dev/null +++ b/src/vmTraceButtonNavigator.js @@ -0,0 +1,30 @@ +var React = require('react'); + +module.exports = React.createClass({ + + propTypes: { + stepIntoBack: React.PropTypes.func.isRequired, + stepIntoForward: React.PropTypes.func.isRequired, + stepOverBack: React.PropTypes.func.isRequired, + stepOverForward: React.PropTypes.func.isRequired, + }, + + render: function() { + return ( +
+ + + + +
+ ); + }, + + checkButtonState: function(incr) + { + if (incr === -1) + return this.props.step === 0 ? "disabled" : "" + else if (incr === 1) + return this.props.step >= this.props.vmTraceLength - 1 ? "disabled" : "" + }, +}) \ No newline at end of file From 0898e10a26ad5b3e657b66a594b16fde5eff48c8 Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 28 Apr 2016 13:06:34 +0200 Subject: [PATCH 2/4] slider - bugfix --- src/assemblyItemsBrowser.js | 91 ++++++++++++++++++++----------------- src/slider.js | 20 +++++--- src/txBrowser.js | 3 +- 3 files changed, 65 insertions(+), 49 deletions(-) diff --git a/src/assemblyItemsBrowser.js b/src/assemblyItemsBrowser.js index ab62adfcf3..59684fd89b 100644 --- a/src/assemblyItemsBrowser.js +++ b/src/assemblyItemsBrowser.js @@ -11,8 +11,8 @@ module.exports = React.createClass({ getInitialState: function() { return { - currentSelected: 0, // current selected item in the vmTrace - selectedInst: 0, // current selected item in the contract assembly code + currentSelected: -1, // current selected item in the vmTrace + selectedInst: -1, // current selected item in the contract assembly code currentAddress: null, currentStack: null, currentLevels: null, @@ -39,7 +39,7 @@ module.exports = React.createClass({
Current code: {this.state.currentAddress}
- +
@@ -133,6 +133,7 @@ module.exports = React.createClass({ if (!nextProps.vmTrace) return this.buildCallStack(nextProps.vmTrace) + this.setState({"currentSelected": -1}) this.updateState(nextProps, 0) }, @@ -142,7 +143,7 @@ module.exports = React.createClass({ return var callStack = [] var depth = -1 - for (var k = 1; k < vmTrace.length; k++) + for (var k = 0; k < vmTrace.length; k++) { var trace = vmTrace[k] if (trace.depth === undefined || trace.depth === depth) @@ -160,49 +161,41 @@ module.exports = React.createClass({ { if (!props.vmTrace || !props.vmTrace[vmTraceIndex]) return - var previousState = this.state.currentSelected + var previousIndex = this.state.currentSelected var stateChanges = {} - - var currentAddress = this.state.currentAddress - if (!currentAddress) - currentAddress = props.vmTrace[vmTraceIndex].address - if (props.vmTrace[vmTraceIndex].address && props.vmTrace[vmTraceIndex].address !== this.state.currentAddress) - { - this.resolveAddress(props.vmTrace[vmTraceIndex].address) - stateChanges["currentAddress"] = props.vmTrace[vmTraceIndex].address - } - - if (props.vmTrace[vmTraceIndex].stack) + + if (props.vmTrace[vmTraceIndex].stack) // there's always a stack { var stack = props.vmTrace[vmTraceIndex].stack stack.reverse() stateChanges["currentStack"] = stack } - - var callStackIndex = vmTraceIndex - if (vmTraceIndex < previousState) - callStackIndex = this.retrieveLastSeenProperty(vmTraceIndex, "depth", props.vmTrace) - if (this.state.callStack[callStackIndex] || callStackIndex === 0) - stateChanges["currentCallStack"] = this.state.callStack[callStackIndex] - - 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 - - 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) - - var callDataIndex = vmTraceIndex - if (vmTraceIndex < previousState) - callDataIndex = this.retrieveLastSeenProperty(vmTraceIndex, "calldata", props.vmTrace) - if (props.vmTrace[vmTraceIndex].calldata || callDataIndex === 0) - stateChanges["currentCallData"] = [props.vmTrace[callDataIndex].calldata] - + + var currentAddress = this.state.currentAddress + var addressIndex = this.shouldUpdateStateProperty("address", vmTraceIndex, previousIndex, props.vmTrace) + if (addressIndex > -1) + { + currentAddress = props.vmTrace[addressIndex].address + this.resolveAddress(currentAddress) + Object.assign(stateChanges, { "currentAddress": currentAddress }) + } + + var depthIndex = this.shouldUpdateStateProperty("depth", vmTraceIndex, previousIndex, props.vmTrace) + if (depthIndex > -1) + Object.assign(stateChanges, { "currentCallStack": this.state.callStack[depthIndex] }) + + var storageIndex = this.shouldUpdateStateProperty("storage", vmTraceIndex, previousIndex, props.vmTrace) + if (storageIndex > -1) + Object.assign(stateChanges, { "currentStorage": props.vmTrace[storageIndex].storage }) + + var memoryIndex = this.shouldUpdateStateProperty("memory", vmTraceIndex, previousIndex, props.vmTrace) + if (memoryIndex > -1) + Object.assign(stateChanges, { "currentMemory": this.formatMemory(props.vmTrace[memoryIndex].memory, 16) }) + + var callDataIndex = this.shouldUpdateStateProperty("calldata", vmTraceIndex, previousIndex, props.vmTrace) + if (callDataIndex > -1) + Object.assign(stateChanges, { "currentCallData": [props.vmTrace[callDataIndex].calldata] }) + stateChanges["selectedInst"] = this.state.instructionsIndexByBytesOffset[currentAddress][props.vmTrace[vmTraceIndex].pc] stateChanges["currentSelected"] = vmTraceIndex @@ -212,9 +205,23 @@ module.exports = React.createClass({ "Step Cost: " + props.vmTrace[vmTraceIndex].gascost, "Remaining Gas: " + props.vmTrace[vmTraceIndex].gas ] - + this.refs.slider.setValue(vmTraceIndex) this.setState(stateChanges) }, + + shouldUpdateStateProperty: function(vmTraceName, nextIndex, previousIndex, vmTrace) + { + var propIndex = -1 + if (previousIndex + 1 === nextIndex) + propIndex = nextIndex + else + propIndex = this.retrieveLastSeenProperty(nextIndex, vmTraceName, vmTrace) + + if (propIndex > -1 && vmTrace[propIndex][vmTraceName] !== undefined) + return propIndex + else + return -1 + }, retrieveLastSeenProperty: function(currentIndex, propertyName, vmTrace) { diff --git a/src/slider.js b/src/slider.js index 4205460fca..1a25503625 100644 --- a/src/slider.js +++ b/src/slider.js @@ -11,21 +11,29 @@ module.exports = React.createClass({ { return { min: 0, - max: 500, - step: 0 + max: 500 }; }, render: function() { return (
- +
); }, - onChange: function(event) + onMouseUp: function(event) { - this.props.onChange(event.currentTarget.value) - } + this.props.onChange(parseInt(this.refs.rule.value)) + }, + + setValue: function(value) + { + var diff = value - this.refs.rule.value + if (diff > 0) + this.refs.rule.stepUp(diff) + else + this.refs.rule.stepDown(Math.abs(diff)) + } }) diff --git a/src/txBrowser.js b/src/txBrowser.js index b391353dcb..dd73a5b59e 100644 --- a/src/txBrowser.js +++ b/src/txBrowser.js @@ -13,7 +13,8 @@ module.exports = React.createClass({ submit: function() { var tx = web3.eth.getTransactionFromBlock(this.state.blockNumber, this.state.txNumber) - this.setState({from: tx.from, to: tx.to, hash: tx.hash}) + if (tx) + this.setState({from: tx.from, to: tx.to, hash: tx.hash}) this.props.onNewTxRequested(this.state.blockNumber, parseInt(this.state.txNumber)) }, From f1f883a5a32f59cd6351f61de52c3ca0bba5272b Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 28 Apr 2016 13:10:07 +0200 Subject: [PATCH 3/4] indent --- src/assemblyItemsBrowser.js | 2 +- src/debugger.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/assemblyItemsBrowser.js b/src/assemblyItemsBrowser.js index 59684fd89b..66a25df2cd 100644 --- a/src/assemblyItemsBrowser.js +++ b/src/assemblyItemsBrowser.js @@ -80,7 +80,7 @@ module.exports = React.createClass({
); }, - + renderStorageRow: function(data) { var ret = [] diff --git a/src/debugger.js b/src/debugger.js index fdb570a8d4..51c2d3a2f4 100644 --- a/src/debugger.js +++ b/src/debugger.js @@ -14,11 +14,11 @@ module.exports = React.createClass({

Eth Debugger

-
{this.state.state}
+
{this.state.state}
); - }, + }, retrieveVmTrace: function(blockNumber, txNumber) { From 953ff7e958d0b335e8bf8cb9b1e6b5d2e05f2646 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 2 May 2016 12:20:16 +0200 Subject: [PATCH 4/4] indent --- src/assemblyItemsBrowser.js | 4 ++- src/slider.js | 63 ++++++++++++++++++------------------- 2 files changed, 33 insertions(+), 34 deletions(-) diff --git a/src/assemblyItemsBrowser.js b/src/assemblyItemsBrowser.js index 66a25df2cd..0912ac0bd7 100644 --- a/src/assemblyItemsBrowser.js +++ b/src/assemblyItemsBrowser.js @@ -40,7 +40,9 @@ module.exports = React.createClass({
Current code: {this.state.currentAddress}
- +
diff --git a/src/slider.js b/src/slider.js index 1a25503625..6d03dee231 100644 --- a/src/slider.js +++ b/src/slider.js @@ -2,38 +2,35 @@ var React = require('react'); var style = require('./sliderStyles') module.exports = React.createClass({ - - propTypes: { - onChange: React.PropTypes.func.isRequired, - }, - - getDefaultProps: function() - { - return { - min: 0, - max: 500 - }; - }, - render: function() { - return ( -
- -
- ); - }, - - onMouseUp: function(event) - { - this.props.onChange(parseInt(this.refs.rule.value)) - }, - - setValue: function(value) - { - var diff = value - this.refs.rule.value - if (diff > 0) - this.refs.rule.stepUp(diff) - else - this.refs.rule.stepDown(Math.abs(diff)) - } + propTypes: { + onChange: React.PropTypes.func.isRequired, + }, + + getDefaultProps: function () { + return { + min: 0, + max: 500 + }; + }, + + render: function () { + return ( +
+ +
+ ); + }, + + onMouseUp: function (event) { + this.props.onChange(parseInt(this.refs.rule.value)) + }, + + setValue: function (value) { + var diff = value - this.refs.rule.value + if (diff > 0) + this.refs.rule.stepUp(diff) + else + this.refs.rule.stepDown(Math.abs(diff)) + } })