add slider

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",

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 (
 			<div style={this.props.vmTrace === null ? style.hidden : style.display} >
 			<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>
-				<button onClick={this.stepOverBack} disabled={ this.checkButtonState(-1) } >Step Over Back</button>
-				<button onClick={this.stepOverForward} disabled={ this.checkButtonState(1) } >Step Over Forward</button>
-				<button onClick={this.stepIntoForward} disabled={ this.checkButtonState(1) } >Step Into Forward</button>
+				<Slider step={this.state.currentSelected} onChange={this.selectState} min="0" max={this.props.vmTrace ? this.props.vmTrace.length : 0}/>
+				<ButtonNavigator vmTraceLength={this.props.vmTrace ? this.props.vmTrace.length : 0} step={this.state.currentSelected} stepIntoBack={this.stepIntoBack} stepIntoForward={this.stepIntoForward} stepOverBack={this.stepOverBack} stepOverForward={this.stepOverForward} />
 			</div>
-
 			<div style={style.container}>
 			<table>
 				<tbody>
@@ -82,7 +80,7 @@ module.exports = React.createClass({
 			</div>		
 			);
 	},
-
+	
 	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)

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 (
 			<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} />
+				<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>
 			);
-	},
+	},	
 
 	retrieveVmTrace: function(blockNumber, txNumber)
 	{

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 (
+			<div>
+                <input style={style.rule} type="range" value={this.props.step} min={this.props.min} max={this.props.max} onChange={this.onChange}  />               
+			</div>
+			);
+	},
+	
+	onChange: function(event)
+	{
+		this.props.onChange(event.currentTarget.value)
+	}
+})

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'
+    }
+}

src/vmTraceBrowser.js

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

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 (
+			<div>
+				<button onClick={this.props.stepIntoBack} disabled={this.checkButtonState(-1)} >Step Into Back</button>
+				<button onClick={this.props.stepOverBack} disabled={this.checkButtonState(-1)} >Step Over Back</button>
+				<button onClick={this.props.stepOverForward} disabled={this.checkButtonState(1)} >Step Over Forward</button>
+				<button onClick={this.props.stepIntoForward} disabled={this.checkButtonState(1)} >Step Into Forward</button>
+			</div>
+			);
+	},
+	
+	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" : "" 
+	},
+})