add assembly items

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

@@ -9,8 +9,9 @@ module.exports = React.createClass({
   },
 
   render: function() {
-    return (<div>
-    <p><h1>Debugger</h1></p>
+    return (
+        <div>
+          <h1>Debugger</h1>
 		      <TxBrowser onNewTxRequested={this.retrieveVmTrace} />
 		      <VmTraceBrowser vmTrace={this.state.vmTrace} />
         </div>

src/txBrowser.js

@@ -11,7 +11,7 @@ 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) {
@@ -23,7 +23,6 @@ module.exports = React.createClass({
 	},
 
 	render: function() {		
-		
 		return (
 		<div>
 			<div><h3>Transaction details</h3></div>

src/vmTraceBrowser.js

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

src/web3Admin.js

@@ -58,8 +58,8 @@ module.exports = {
                 new web3._extend.Method({
                     name: 'vmTrace',
                     call: 'admin_eth_vmTrace',
-                    inputFormatter: [null, null, null],
-                    params: 3
+                    inputFormatter: [null, null],
+                    params: 2
                 }), 
             ],
             properties: