ui changes

src/assemblyItemsBrowser.js

@@ -20,7 +20,7 @@ module.exports = React.createClass({
 			currentStepInfo: null,
 			codes: {}, // assembly items instructions list by contract addesses
 			instructionsIndexByBytesOffset: {}, // mapping between bytes offset and instructions index.
-			levels: {}
+			callStack: {}
 		};
 	},
 
@@ -35,7 +35,7 @@ module.exports = React.createClass({
 	{		
 		return (
 			<div style={this.props.vmTrace === null ? style.hidden : style.display} >
-			<div style={style.container}><span style={style.address}>{this.state.currentAddress}</span></div> 
+			<div style={style.container}><span style={style.address}>Current code: {this.state.currentAddress}</span></div> 
 			
 			<div style={style.container}>
 				<button onClick={this.stepIntoBack} disabled={ this.checkButtonState(-1) } >Step Into Back</button>
@@ -142,29 +142,36 @@ module.exports = React.createClass({
 
 	componentWillReceiveProps: function (nextProps) 
 	{ 
+		if (!nextProps.vmTrace)
+			return
 		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)
+		if (!vmTrace)
+			return
+		var callStack = []
+		var depth = -1
+		for (var k = 1; k < vmTrace.length; k++)
 		{
 			var trace = vmTrace[k]
+			if (trace.depth === undefined || trace.depth === depth)
+				continue
 			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 
+			depth = trace.depth
+			this.state.callStack[k] = callStack.slice(0)
 		}
 	},
 
 	updateState: function(props, vmTraceIndex)
 	{
+		if (!props.vmTrace)
+			return
 		var previousState = this.state.currentSelected
 		var stateChanges = {}
 
@@ -184,8 +191,11 @@ module.exports = React.createClass({
 			stateChanges["currentStack"] = stack
 		}
 
-		if (this.state.levels[vmTraceIndex])
-			stateChanges["currentCallStack"] = this.state.levels[vmTraceIndex]
+		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)
@@ -199,8 +209,12 @@ module.exports = React.createClass({
 		if (props.vmTrace[memoryIndex].memory || memoryIndex === 0)
 			stateChanges["currentMemory"] = this.formatMemory(props.vmTrace[memoryIndex].memory, 16)
 
-		if (props.vmTrace[vmTraceIndex].calldata)
-			stateChanges["currentCallData"] = props.vmTrace[vmTraceIndex].calldata
+		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]
+
 		stateChanges["selectedInst"] = this.state.instructionsIndexByBytesOffset[currentAddress][props.vmTrace[vmTraceIndex].pc]
 		stateChanges["currentSelected"] = vmTraceIndex
 
@@ -225,8 +239,8 @@ module.exports = React.createClass({
 		}
 		return index	
 	},
-	
-	stepIntoBack: function ()
+
+	stepIntoBack: function()
 	{
 		this.moveSelection(-1)
 	},
@@ -271,7 +285,7 @@ module.exports = React.createClass({
 	isCallInstruction: function(index)
 	{
 		var state = this.props.vmTrace[index];
-		return state.instname === "CALL" || state.instname === "CREATE" || state.instname === "DELEGATECALL"
+		return state.instname === "CALL" || state.instname === "CALLCODE" || state.instname === "CREATE" || state.instname === "DELEGATECALL"
 	},
 
 	isReturnInstruction: function(index)

src/basicStyles.js

@@ -16,6 +16,10 @@ module.exports = {
 	{
 		'width': "320px"
 	},
+	transactionInfo:
+	{
+		'marginTop': '5px'
+	},
 	panel:
 	{
 		container:

src/debugger.js

@@ -6,7 +6,7 @@ var style = require('./basicStyles')
 
 module.exports = React.createClass({
 	getInitialState: function() {
-		return {vmTrace: null}
+		return {vmTrace: null, state: ""}
 	},
 
 	render: function() {
@@ -14,6 +14,7 @@ module.exports = React.createClass({
 			<div style={style.wrapper} >
 			<h1 style={style.container} >Eth Debugger</h1>
 			<TxBrowser onNewTxRequested={this.retrieveVmTrace} />
+			<div style={style.container} >{this.state.state}</div>
 			<VmTraceBrowser vmTrace={this.state.vmTrace} />
 			</div>
 			);
@@ -21,6 +22,11 @@ module.exports = React.createClass({
 
 	retrieveVmTrace: function(blockNumber, txNumber)
 	{
-		this.setState({vmTrace: VmTraceManager.retrieveVmTrace(blockNumber, txNumber)});
+		this.setState({state: "loading..."})
+		var deb = this
+		VmTraceManager.retrieveVmTrace(blockNumber, txNumber, function(error, result)
+		{
+			deb.setState({vmTrace: result, state: ""});
+		})
 	}
 });

src/txBrowser.js

@@ -7,12 +7,14 @@ module.exports = React.createClass({
 	},
 
 	getInitialState: function() {
-		return {blockNumber: "1160004", txNumber: "1"}
+		return {blockNumber: "1382256", txNumber: "1", from: "", to: "", hash: ""}
 	},
 
 	submit: function()
 	{
-		this.props.onNewTxRequested(this.state.blockNumber, parseInt(this.state.txNumber));
+		var tx = web3.eth.getTransactionFromBlock(this.state.blockNumber, this.state.txNumber)
+		this.setState({from: tx.from, to: tx.to, hash: tx.hash})
+		this.props.onNewTxRequested(this.state.blockNumber, parseInt(this.state.txNumber))
 	},
 	
 	updateBlockN: function(ev) {
@@ -26,9 +28,14 @@ module.exports = React.createClass({
 	render: function() {		
 		return (
 			<div style={style.container} >
-			<input onChange={this.updateBlockN} type="text" placeholder= {"Block number or hash e.g. : " + this.state.blockNumber}></input>
-			<input onChange={this.updateTxN} type="text" placeholder={"Transaction Number e.g. : " + this.state.txNumber}></input>
+			<input onChange={this.updateBlockN} type="text" placeholder= {"Block number or hash (default 1382256)" + this.state.blockNumber}></input>
+			<input onChange={this.updateTxN} type="text" placeholder={"Transaction Number (default 1) " + this.state.txNumber}></input>
 			<button onClick={this.submit}>Get</button>
+			<div style={style.transactionInfo}>
+			<div>Hash: {this.state.hash}</div>
+			<div>From: {this.state.from}</div>
+			<div>To: {this.state.to}</div>
+			</div>
 			</div>
 			);
 	}

src/vmTraceManager.js

 module.exports = {
-	retrieveVmTrace: function(blockNumber, txNumber) {		
-		return web3.debug.debugTrace(blockNumber, parseInt(txNumber));
+	retrieveVmTrace: function(blockNumber, txNumber, callBack) {
+			web3.debug.trace(blockNumber, parseInt(txNumber), function(error, result)
+			{
+				callBack(error, result)
+			});
 	}
 }

src/web3Admin.js

@@ -93,7 +93,7 @@ module.exports = {
         	methods:
         	[
         	new web3._extend.Method({
-        		name: 'debugTrace',
+        		name: 'trace',
         		call: 'debug_trace',
         		params: 1,
         		inputFormatter: [null, null],