add indexChanged event

src/calldataPanel.js

@@ -4,7 +4,9 @@ var BasicPanel = require('./basicPanel')
 
 module.exports = React.createClass({
   contextTypes: {
-    traceManager: React.PropTypes.object
+    traceManager: React.PropTypes.object,
+    codeManager: React.PropTypes.object,
+    root: React.PropTypes.object
   },
 
   getDefaultProps: function () {
@@ -25,20 +27,22 @@ module.exports = React.createClass({
     )
   },
 
-  componentWillReceiveProps: function (nextProps) {
-    if (nextProps.currentStepIndex < 0) return
-    if (window.ethDebuggerSelectedItem !== nextProps.currentStepIndex) return
-
+  componentDidMount: function () {
     var self = this
-    this.context.traceManager.getCallDataAt(nextProps.currentStepIndex, function (error, calldata) {
+    this.context.root.register('indexChanged', this, function (index) {
+      if (index < 0) return
+      if (window.ethDebuggerSelectedItem !== index) return
+
+      self.context.traceManager.getCallDataAt(index, function (error, calldata) {
         if (error) {
           console.log(error)
-      } else if (window.ethDebuggerSelectedItem === nextProps.currentStepIndex) {
+        } else if (window.ethDebuggerSelectedItem === index) {
           self.setState({
             data: self.format(calldata)
           })
         }
       })
+    })
   },
 
   format: function (calldata) {

src/callstackPanel.js

@@ -4,7 +4,9 @@ var BasicPanel = require('./basicPanel')
 
 module.exports = React.createClass({
   contextTypes: {
-    traceManager: React.PropTypes.object
+    traceManager: React.PropTypes.object,
+    codeManager: React.PropTypes.object,
+    root: React.PropTypes.object
   },
 
   getDefaultProps: function () {
@@ -25,20 +27,22 @@ module.exports = React.createClass({
     )
   },
 
-  componentWillReceiveProps: function (nextProps) {
-    if (nextProps.currentStepIndex < 0) return
-    if (window.ethDebuggerSelectedItem !== nextProps.currentStepIndex) return
-
+  componentDidMount: function () {
     var self = this
-    this.context.traceManager.getCallStackAt(nextProps.currentStepIndex, function (error, callstack) {
+    this.context.root.register('indexChanged', this, function (index) {
+      if (index < 0) return
+      if (window.ethDebuggerSelectedItem !== index) return
+
+      self.context.traceManager.getCallStackAt(index, function (error, callstack) {
         if (error) {
           console.log(error)
-      } else if (window.ethDebuggerSelectedItem === nextProps.currentStepIndex) {
+        } else if (window.ethDebuggerSelectedItem === index) {
           self.setState({
             data: self.format(callstack)
           })
         }
       })
+    })
   },
 
   format: function (callstack) {

src/codeManager.js

@@ -53,6 +53,7 @@ CodeManager.prototype.ensureCodeLoaded = function (address, currentStep, tx) {
           self.getInstructionIndex(address, currentStep, function (error, result) {
             if (!error) {
               self.trigger('codeChanged', [codes.code, address, result])
+              self.trigger('indexChanged', [result])
               self.currentAddress = address
             } else {
               console.log(error)
@@ -67,6 +68,7 @@ CodeManager.prototype.ensureCodeLoaded = function (address, currentStep, tx) {
         self.getInstructionIndex(address, currentStep, function (error, result) {
           if (!error) {
             self.trigger('codeChanged', [code, address, result])
+            self.trigger('indexChanged', [result])
             self.currentAddress = address
           } else {
             console.log(error)

src/debugger.js

@@ -4,6 +4,8 @@ var TxBrowser = require('./txBrowser')
 var StepManager = require('./stepManager')
 var VmDebugger = require('./vmDebugger')
 var style = require('./basicStyles')
+var util = require('./util')
+var eventManager = require('./eventManager')
 
 module.exports = React.createClass({
   getInitialState: function () {
@@ -17,6 +19,7 @@ module.exports = React.createClass({
     web3: React.PropTypes.object,
     traceManager: React.PropTypes.object,
     codeManager: React.PropTypes.object,
+    root: React.PropTypes.object,
     tx: React.PropTypes.object
   },
 
@@ -25,6 +28,7 @@ module.exports = React.createClass({
       web3: this.props.context.web3,
       traceManager: this.props.context.traceManager,
       codeManager: this.props.context.codeManager,
+      root: this,
       tx: this.state.tx
     }
   },
@@ -41,12 +45,17 @@ module.exports = React.createClass({
   },
 
   stepChanged: function (stepIndex) {
+    this.trigger('indexChanged', [stepIndex])
     this.setState({
       currentStepIndex: stepIndex
     })
     this.props.context.codeManager.resolveStep(stepIndex, this.state.tx)
   },
 
+  componentWillMount: function () {
+    util.extend(this, eventManager)
+  },
+
   startDebugging: function (blockNumber, txIndex, tx) {
     if (this.props.context.traceManager.isLoading) {
       return
@@ -58,11 +67,12 @@ module.exports = React.createClass({
     var self = this
     this.props.context.traceManager.resolveTrace(tx, function (success) {
       console.log('trace loaded ' + success)
-      self.setState({
-        currentStepIndex: 0
-      })
+      if (success) {
+        self.stepChanged(0)
         self.refs.stepManager.newTraceAvailable()
-      self.props.context.codeManager.resolveStep(0, tx)
+      } else {
+        console.log('trace not loaded')
+      }
     })
   }
 })

src/memoryPanel.js

@@ -5,7 +5,9 @@ var BasicPanel = require('./basicPanel')
 module.exports = React.createClass({
   contextTypes: {
     traceManager: React.PropTypes.object,
-    web3: React.PropTypes.object
+    web3: React.PropTypes.object,
+    codeManager: React.PropTypes.object,
+    root: React.PropTypes.object
   },
 
   getDefaultProps: function () {
@@ -26,20 +28,22 @@ module.exports = React.createClass({
     )
   },
 
-  componentWillReceiveProps: function (nextProps) {
-    if (nextProps.currentStepIndex < 0) return
-    if (window.ethDebuggerSelectedItem !== nextProps.currentStepIndex) return
-
+  componentDidMount: function () {
     var self = this
-    this.context.traceManager.getMemoryAt(nextProps.currentStepIndex, function (error, memory) {
+    this.context.root.register('indexChanged', this, function (index) {
+      if (index < 0) return
+      if (window.ethDebuggerSelectedItem !== index) return
+
+      self.context.traceManager.getMemoryAt(index, function (error, memory) {
         if (error) {
           console.log(error)
-      } else if (window.ethDebuggerSelectedItem === nextProps.currentStepIndex) {
+        } else if (window.ethDebuggerSelectedItem === index) {
           self.setState({
             data: self.formatMemory(memory, 16)
           })
         }
       })
+    })
   },
 
   formatMemory: function (mem, width) {

src/stackPanel.js

@@ -4,7 +4,9 @@ var BasicPanel = require('./basicPanel')
 
 module.exports = React.createClass({
   contextTypes: {
-    traceManager: React.PropTypes.object
+    traceManager: React.PropTypes.object,
+    codeManager: React.PropTypes.object,
+    root: React.PropTypes.object
   },
 
   getDefaultProps: function () {
@@ -25,20 +27,22 @@ module.exports = React.createClass({
     )
   },
 
-  componentWillReceiveProps: function (nextProps) {
-    if (nextProps.currentStepIndex < 0) return
-    if (window.ethDebuggerSelectedItem !== nextProps.currentStepIndex) return
-
+  componentDidMount: function () {
     var self = this
-    this.context.traceManager.getStackAt(nextProps.currentStepIndex, function (error, stack) {
+    this.context.root.register('indexChanged', this, function (index) {
+      if (index < 0) return
+      if (window.ethDebuggerSelectedItem !== index) return
+
+      self.context.traceManager.getStackAt(index, function (error, stack) {
         if (error) {
           console.log(error)
-      } else if (window.ethDebuggerSelectedItem === nextProps.currentStepIndex) {
+        } else if (window.ethDebuggerSelectedItem === index) {
           self.setState({
             data: self.format(stack)
           })
         }
       })
+    })
   },
 
   format: function (stack) {

src/stepManager.js

@@ -3,6 +3,8 @@ var React = require('react')
 var ButtonNavigator = require('./buttonNavigator')
 var Slider = require('./slider')
 var style = require('./basicStyles')
+var util = require('./util')
+var eventManager = require('./eventManager')
 
 module.exports = React.createClass({
   propTypes: {
@@ -41,6 +43,7 @@ module.exports = React.createClass({
   },
 
   componentDidMount: function () {
+    // util.extend(this, eventManager)
     this.changeState(-1)
   },
 
@@ -70,8 +73,8 @@ module.exports = React.createClass({
     if (!this.context.traceManager.inRange(step)) {
       return
     }
-    this.props.onStepChanged(step)
     this.changeState(step)
+    this.props.onStepChanged(step)
   },
 
   stepIntoForward: function () {
@@ -82,9 +85,9 @@ module.exports = React.createClass({
     if (!this.context.traceManager.inRange(step)) {
       return
     }
-    this.props.onStepChanged(step)
     this.refs.slider.setValue(step)
     this.changeState(step)
+    this.props.onStepChanged(step)
   },
 
   stepIntoBack: function () {
@@ -95,9 +98,9 @@ module.exports = React.createClass({
     if (!this.context.traceManager.inRange(step)) {
       return
     }
-    this.props.onStepChanged(step)
     this.refs.slider.setValue(step)
     this.changeState(step)
+    this.props.onStepChanged(step)
   },
 
   stepOverForward: function () {
@@ -105,9 +108,9 @@ module.exports = React.createClass({
       return
     }
     var step = this.context.traceManager.findStepOverForward(this.state.currentStepIndex)
-    this.props.onStepChanged(step)
     this.refs.slider.setValue(step)
     this.changeState(step)
+    this.props.onStepChanged(step)
   },
 
   stepOverBack: function () {
@@ -115,9 +118,9 @@ module.exports = React.createClass({
       return
     }
     var step = this.context.traceManager.findStepOverBack(this.state.currentStepIndex)
-    this.props.onStepChanged(step)
     this.refs.slider.setValue(step)
     this.changeState(step)
+    this.props.onStepChanged(step)
   },
 
   jumpToNextCall: function () {
@@ -125,9 +128,9 @@ module.exports = React.createClass({
       return
     }
     var step = this.context.traceManager.findNextCall(this.state.currentStepIndex)    
-    this.props.onStepChanged(step)
     this.refs.slider.setValue(step)
     this.changeState(step)
+    this.props.onStepChanged(step)
   },
 
   changeState: function (step) {   

src/sticker.js

@@ -3,7 +3,9 @@ var React = require('react')
 
 module.exports = React.createClass({
   contextTypes: {
-    traceManager: React.PropTypes.object
+    traceManager: React.PropTypes.object,
+    codeManager: React.PropTypes.object,
+    root: React.PropTypes.object
   },
 
   getDefaultProps: function () {
@@ -80,11 +82,12 @@ module.exports = React.createClass({
     return null
   },
 
-  componentWillReceiveProps: function (nextProps) {
-    if (nextProps.currentStepIndex < 0) return
-
+  componentDidMount: function () {
     var self = this
-    this.context.traceManager.getCurrentStep(nextProps.currentStepIndex, function (error, step) {
+    this.context.root.register('indexChanged', this, function (index) {
+      if (index < 0) return
+
+      self.context.traceManager.getCurrentStep(index, function (error, step) {
         if (error) {
           console.log(error)
         } else {
@@ -94,7 +97,7 @@ module.exports = React.createClass({
         }
       })
 
-    this.context.traceManager.getMemExpand(nextProps.currentStepIndex, function (error, addmem) {
+      self.context.traceManager.getMemExpand(index, function (error, addmem) {
         if (error) {
           console.log(error)
         } else {
@@ -104,7 +107,7 @@ module.exports = React.createClass({
         }
       })
 
-    this.context.traceManager.getStepCost(nextProps.currentStepIndex, function (error, gas) {
+      self.context.traceManager.getStepCost(index, function (error, gas) {
         if (error) {
           console.log(error)
         } else {
@@ -114,7 +117,7 @@ module.exports = React.createClass({
         }
       })
 
-    this.context.traceManager.getRemainingGas(nextProps.currentStepIndex, function (error, remaingas) {
+      self.context.traceManager.getRemainingGas(index, function (error, remaingas) {
         if (error) {
           console.log(error)
         } else {
@@ -123,5 +126,6 @@ module.exports = React.createClass({
           })
         }
       })
+    })
   }
 })

src/storagePanel.js

@@ -5,7 +5,9 @@ var BasicPanel = require('./basicPanel')
 module.exports = React.createClass({
   contextTypes: {
     traceManager: React.PropTypes.object,
-    tx: React.PropTypes.object
+    tx: React.PropTypes.object,
+    codeManager: React.PropTypes.object,
+    root: React.PropTypes.object
   },
 
   getDefaultProps: function () {
@@ -26,20 +28,22 @@ module.exports = React.createClass({
     )
   },
 
-  componentWillReceiveProps: function (nextProps) {
-    if (nextProps.currentStepIndex < 0) return
-    if (window.ethDebuggerSelectedItem !== nextProps.currentStepIndex) return
-
+  componentDidMount: function () {
     var self = this
-    this.context.traceManager.getStorageAt(nextProps.currentStepIndex, this.context.tx, function (error, storage) {
+    this.context.root.register('indexChanged', this, function (index) {
+      if (index < 0) return
+      if (window.ethDebuggerSelectedItem !== index) return
+
+      self.context.traceManager.getStorageAt(index, self.context.tx, function (error, storage) {
         if (error) {
           console.log(error)
-      } else if (window.ethDebuggerSelectedItem === nextProps.currentStepIndex) {
+        } else if (window.ethDebuggerSelectedItem === index) {
           self.setState({
             data: self.formatStorage(storage)
           })
         }
       })
+    })
   },
 
   formatStorage: function (storage) {

src/vmDebugger.js

@@ -10,16 +10,6 @@ var StackPanel = require('./stackPanel')
 var StoragePanel = require('./storagePanel')
 
 module.exports = React.createClass({
-  contextTypes: {
-    traceManager: React.PropTypes.object
-  },
-
-  getInitialState: function () {
-    return {
-      currentAddress: null
-    }
-  },
-
   getDefaultProps: function () {
     return {
       currentStepIndex: -1 // index of the selected item in the vmtrace
@@ -30,9 +20,6 @@ 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}>
           <table>
             <tbody>
               <tr>