Merge pull request #12 from yann300/txBrowser

src/assemblyItemsBrowser.js

+var React = require('react');
+
+module.exports = React.createClass({
+
+	getInitialState: function()
+	{
+		return {
+			currentSelected: null,
+			currentAddress: null
+		};
+	},
+
+	getDefaultProps: function() 
+	{
+		return {
+			vmTrace: null
+		};
+	},	
+
+	render: function() 
+	{		
+		if (!this.props.vmTrace || !this.props.vmTrace.vmtrace || this.props.vmTrace.vmtrace.length === 0)
+			return null;
+		this.state.currentAddress = this.props.vmTrace.vmtrace[0].address
+		this.state.currentSelected = this.props.vmTrace.codesmap[this.state.currentAddress][this.props.vmTrace.vmtrace[0].pc]
+		return (
+			<div>
+			<div id="action" >
+			<button onClick={this.stepIntoBack} >stepIntoBack</button>
+			<button onClick={this.stepOverBack} >stepOverBack</button>
+			<button onClick={this.stepOverForward} >stepOverForward</button>
+			<button onClick={this.stepIntoForward} >stepIntoForward</button>
+			</div>
+			<div>
+			<select size="10" ref='itemsList' value={this.state.currentSelected}>
+			{ this.renderAssemblyItems() }
+			</select>
+			</div>
+			</div>
+			);
+	},
+
+	renderAssemblyItems: function()
+	{
+		if (this.props.vmTrace)
+		{      
+			var selectedItem = this.state.currentSelected
+			return this.props.vmTrace.vmtrace.map(function(item, i) 
+			{
+				return <option key={i} value={i} >{item.instname}</option>;
+			});	
+		}
+	},
+
+	
+	stepIntoBack: function ()
+	{
+		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)
+	},
+
+	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);
+	},
+
+	isCallInstruction: function(index)
+	{
+		var state = this.props.vmTrace.vmtrace[index];
+		return state.instname === "CALL" || state.instname === "CREATE";
+	},
+
+	isReturnInstruction: function(index)
+	{
+		var state = this.props.vmTrace.vmtrace[index];
+		return state.instname === "RETURN"
+	},
+
+	stepOutBack: function()
+	{
+		var i = this.state.currentSelected - 1;
+		var depth = 0;
+		while (--i >= 0) {
+			if (this.isCallInstruction(i))
+				if (depth == 0)
+					break;
+				else depth--;
+				else if (this.isReturnInstruction(i))
+					depth++;
+			}
+			this.selectState(i);
+		},
+
+		stepOutForward: function()
+		{
+			var i = this.state.currentSelected;
+			var depth = 0;
+			while (++i < this.props.vmTrace.vmtrace.length) {
+				if (this.isReturnInstruction(i))
+					if (depth == 0)
+						break;
+					else
+						depth--;
+					else if (this.isCallInstruction(i))
+						depth++;
+				}
+				this.selectState(i + 1);
+			},
+
+			moveSelection: function(incr)
+			{
+				this.selectState(this.state.currentSelected + incr)
+			},
+
+			selectState: function(index)
+			{
+				var newIndex = this.props.vmTrace.codesmap[this.state.currentAddress][this.props.vmTrace.vmtrace[index].pc]
+				this.state.currentSelected = index
+				this.refs.itemsList.value = this.state.currentSelected
+				if (this.props.vmTrace.vmtrace[index].address && this.state.currentAddress !== this.props.vmTrace.vmtrace[index].address)
+					this.state.currentAddress = this.props.vmTrace.vmtrace[index].address
+			},
+		})

src/debugger.js

@@ -4,21 +4,22 @@ var VmTraceManager = require('./vmTraceManager');
 var VmTraceBrowser = require('./vmTraceBrowser');
 
 module.exports = React.createClass({
-  getInitialState: function() {
-	return {vmTrace: null}
-  },
+	getInitialState: function() {
+		return {vmTrace: null}
+	},
 
-  render: function() {
-    return (<div>
-    <p><h1>Debugger</h1></p>
-		<TxBrowser onNewTxRequested={this.retrieveVmTrace} />
-		<VmTraceBrowser vmTrace={this.state.vmTrace} />
-	</div>
-    );
-  },
+	render: function() {
+		return (
+			<div>
+			<h1>Debugger</h1>
+			<TxBrowser onNewTxRequested={this.retrieveVmTrace} />
+			<VmTraceBrowser vmTrace={this.state.vmTrace} />
+			</div>
+			);
+	},
 
-  retrieveVmTrace: function(blockNumber, txNumber)
-  {
-	  this.setState({vmTrace: VmTraceManager.retrieveVmTrace(blockNumber, txNumber)});
-  }
+	retrieveVmTrace: function(blockNumber, txNumber)
+	{
+		this.setState({vmTrace: VmTraceManager.retrieveVmTrace(blockNumber, txNumber)});
+	}
 });

src/index.js

@@ -10,6 +10,6 @@ Web3Admin.extend(web3);
 var Debugger = require('./debugger');
 
 ReactDOM.render(
-  <Debugger/>,
-  document.getElementById('app')
+	<Debugger/>,
+	document.getElementById('app')
 );

src/txBrowser.js

@@ -11,26 +11,25 @@ module.exports = React.createClass({
 
 	submit: function()
 	{
-		this.props.onNewTxRequested(this.state.blockNumber, parseInt(this.state.txNumber), "TmrjdiILLn0=");
+		this.props.onNewTxRequested(this.state.blockNumber, parseInt(this.state.txNumber));
 	},
 	
 	updateBlockN: function(ev) {
-	  this.state.blockNumber = ev.target.value;
+		this.state.blockNumber = ev.target.value;
 	},
 	
 	updateTxN: function(ev) {
-	  this.state.txNumber = ev.target.value;
+		this.state.txNumber = ev.target.value;
 	},
 
-	render: function() {
-		
+	render: function() {		
 		return (
-		<div>
+			<div>
 			<div><h3>Transaction details</h3></div>
 			<input onChange={this.updateBlockN} type="text" placeholder= {"Block number e.g. : " + this.state.blockNumber}></input>
 			<input onChange={this.updateTxN} type="text" placeholder={"Transaction Number e.g. : " + this.state.txNumber}></input>
 			<button onClick={this.submit}>Get</button>
-		</div>
-		);
+			</div>
+			);
 	}
 })

src/vmTraceBrowser.js

 var React = require('react');
+var AssemblyItemsBrowser = require('./assemblyItemsBrowser');
 
 module.exports = React.createClass({
-  render: function() {
-	return (<div>{this.props.vmTrace}</div>)
-  }
+	render: function() {
+		return ( <AssemblyItemsBrowser vmTrace={this.props.vmTrace} /> )
+	}
 });

src/vmTraceManager.js

 module.exports = {
 	retrieveVmTrace: function(blockNumber, txNumber) {
-		return web3.admin.vmTrace(blockNumber, parseInt(txNumber), "TmrjdiILLn0=");
+		return web3.admin.vmTrace(blockNumber, parseInt(txNumber));
 	}
 }