add CodeManager.js

src/asmCode.js

 'use strict'
 var React = require('react')
 var style = require('./basicStyles')
-var codeResolver = require('./codeResolver')
-var traceManagerUtil = require('./traceManagerUtil')
 
 module.exports = React.createClass({
   contextTypes: {
-    traceManager: React.PropTypes.object,
-    tx: React.PropTypes.object,
-    web3: React.PropTypes.object
+    codeManager: React.PropTypes.object
   },
 
   getInitialState: function () {
     return {
-      code: [],
-      selected: -1,
-      address: '' // selected instruction in the asm
-    }
-  },
-
-  getDefaultProps: function () {
-    return {
-      currentStepIndex: -1
+      code: '',
+      address: ''
     }
   },
 
   render: function () {
     return (
-      <select
-        size='10'
-        ref='itemsList'
-        style={style.instructionsList}
-        value={this.state.selected}>
+      <select size='10' ref='itemsList' style={style.instructionsList}>
         {this.renderAssemblyItems()}
       </select>
     )
   },
 
-  renderAssemblyItems: function () {
-    if (this.state.code) {
-      return this.state.code.map(function (item, i) {
-        return <option key={i} value={i}>{item}</option>
-      })
-    }
-  },
-
-  componentWillReceiveProps: function (nextProps) {
-    if (nextProps.currentStepIndex < 0) return
-    codeResolver.setWeb3(this.context.web3)
-    var self = this
-    if (nextProps.currentStepIndex === 0) {
-      self.ensureCodeLoaded(this.context.tx.to, nextProps.currentStepIndex)
-    } else {
-      this.context.traceManager.getCurrentCalledAddressAt(nextProps.currentStepIndex, function (error, address) {
-        if (error) {
-          console.log(error)
-        } else {
-          self.ensureCodeLoaded(address, nextProps.currentStepIndex)
-        }
-      })
-    }
+  componentDidMount: function () {
+    this.context.codeManager.registerIndexChangedListener(this, this.indexChanged)
+    this.context.codeManager.registerCodeChangedListener(this, this.codeChanged)
   },
 
-  ensureCodeLoaded: function (address, currentStep) {
-    if (address !== this.state.address) {
-      this.setState({
-        code: ['loading...']
-      })
-      var self = this
-      if (traceManagerUtil.isContractCreation(address)) {
-        this.context.traceManager.getContractCreationCode(address, function (error, hexCode) {
-          if (error) {
-            console.log(error)
-          } else {
-            var codes = codeResolver.cacheExecutingCode(address, hexCode)
-            self.updateCode(codes.code, address, currentStep)
-          }
-        })
-      } else {
-        codeResolver.resolveCode(address, currentStep, this.context.tx, function (address, code) {
-          if (window.ethDebuggerSelectedItem !== currentStep) {
-            console.log(currentStep + ' discarded. current is ' + window.ethDebuggerSelectedItem)
-            return
-          }
-          self.updateCode(code, address, currentStep)
-        })
-      }
-    } else {
-      this.setInstructionIndex(this.state.address, currentStep)
-    }
+  indexChanged: function (index) {
+    this.refs.itemsList.value = index
   },
 
-  updateCode: function (code, address, currentStep) {
+  codeChanged: function (code, address, index) {
     this.setState({
       code: code,
       address: address
     })
-    this.setInstructionIndex(address, currentStep)
+    this.refs.itemsList.value = index
   },
 
-  setInstructionIndex: function (address, step) {
-    var self = this
-    this.context.traceManager.getCurrentPC(step, function (error, instIndex) {
-      if (error) {
-        console.log(error)
-      } else {
-        self.setState({
-          selected: codeResolver.getInstructionIndex(address, instIndex)
-        })
-      }
-    })
+  shouldComponentUpdate: function (nextProps, nextState) {
+    if (nextState.address === this.state.address) {
+      return false
+    }
+    return true
+  },
+
+  renderAssemblyItems: function () {
+    if (this.state && this.state.code) {
+      return this.state.code.map(function (item, i) {
+        return <option key={i} value={i}>{item}</option>
+      })
+    }
   }
 })

src/buttonNavigator.js

@@ -36,6 +36,10 @@ module.exports = React.createClass({
     )
   },
 
+  shouldComponentUpdate: function () {
+    return false
+  },
+
   stepChanged: function (step) {
     this.refs.intoback.disabled = step <= 0
     this.refs.overback.disabled = step <= 0

src/codeManager.js

+'use strict'
+var traceManagerUtil = require('./traceManagerUtil')
+var codeResolver = require('./codeResolver')
+function CodeManager (_web3, _traceManager) {
+  this.web3 = _web3
+  this.isLoading = false
+  this.traceManager = _traceManager
+  this.currentAddress = ''
+  this.indexChangedlisteners = []
+  this.codeChangedlisteners = []
+  codeResolver.setWeb3(_web3)
+}
+
+CodeManager.prototype.registerIndexChangedListener = function (obj, func) {
+  this.indexChangedlisteners.push({
+    obj: obj,
+    func: func
+  })
+}
+
+CodeManager.prototype.registerCodeChangedListener = function (obj, func) {
+  this.codeChangedlisteners.push({
+    obj: obj,
+    func: func
+  })
+}
+
+CodeManager.prototype.resolveCodeFor = function (stepIndex, tx) {
+  if (stepIndex < 0) return
+  var self = this
+  if (stepIndex === 0) {
+    self.ensureCodeLoaded(tx.to, stepIndex, tx)
+  } else {
+    this.traceManager.getCurrentCalledAddressAt(stepIndex, function (error, address) {
+      if (error) {
+        console.log(error)
+      } else {
+        self.ensureCodeLoaded(address, stepIndex, tx)
+      }
+    })
+  }
+}
+
+CodeManager.prototype.ensureCodeLoaded = function (address, currentStep, tx) {
+  var self = this
+  if (address !== this.currentAddress) {
+    if (traceManagerUtil.isContractCreation(address)) {
+      this.traceManager.getContractCreationCode(address, function (error, hexCode) {
+        // contract creation
+        if (error) {
+          console.log(error)
+        } else {
+          var codes = codeResolver.cacheExecutingCode(address, hexCode)
+          self.getInstructionIndex(address, currentStep, function (error, result) {
+            if (!error) {
+              self.dispatchCodeChanged(codes.code, address, result)
+              self.currentAddress = address
+            } else {
+              console.log(error)
+            }
+          })
+        }
+      })
+    } else {
+      codeResolver.resolveCode(address, currentStep, tx, function (address, code) {
+        // resoling code from stack
+        self.getInstructionIndex(address, currentStep, function (error, result) {
+          if (!error) {
+            self.dispatchCodeChanged(code, address, result)
+            self.currentAddress = address
+          } else {
+            console.log(error)
+          }
+        })
+      })
+    }
+  } else {
+    // only set selected item
+    this.getInstructionIndex(this.currentAddress, currentStep, function (error, result) {
+      if (!error) {
+        self.dispatchIndexChanged(result)
+      }
+    })
+  }
+}
+
+CodeManager.prototype.getInstructionIndex = function (address, step, callback) {
+  this.traceManager.getCurrentPC(step, function (error, instIndex) {
+    if (error) {
+      console.log(error)
+      callback('Cannot retrieve current PC for ' + step, null)
+    } else {
+      var itemIndex = codeResolver.getInstructionIndex(address, instIndex)
+      callback(null, itemIndex)
+    }
+  })
+}
+
+CodeManager.prototype.dispatchIndexChanged = function (itemIndex) {
+  for (var listener in this.indexChangedlisteners) {
+    var l = this.indexChangedlisteners[listener]
+    l.func.call(l.obj, itemIndex)
+  }
+}
+
+CodeManager.prototype.dispatchCodeChanged = function (code, address, itemIndex) {
+  for (var listener in this.codeChangedlisteners) {
+    var l = this.codeChangedlisteners[listener]
+    l.func.call(l.obj, code, address, itemIndex)
+  }
+}
+
+module.exports = CodeManager

src/debugger.js

@@ -2,46 +2,40 @@
 var React = require('react')
 var TxBrowser = require('./txBrowser')
 var StepManager = require('./stepManager')
-var AssemblyItemsBrowser = require('./vmDebugger')
-var TraceManager = require('./traceManager')
+var VmDebugger = require('./vmDebugger')
 var style = require('./basicStyles')
 
 module.exports = React.createClass({
   getInitialState: function () {
     return {
       currentStepIndex: -1, // index of the selected item in the vmtrace
-      tx: null,
-      traceManager: null
+      tx: null
     }
   },
 
   childContextTypes: {
     web3: React.PropTypes.object,
     traceManager: React.PropTypes.object,
+    codeManager: React.PropTypes.object,
     tx: React.PropTypes.object
   },
 
   getChildContext: function () {
     return {
-      web3: this.props.web3,
-      traceManager: this.state.traceManager,
+      web3: this.props.context.web3,
+      traceManager: this.props.context.traceManager,
+      codeManager: this.props.context.codeManager,
       tx: this.state.tx
     }
   },
 
-  componentDidMount: function () {
-    this.setState({
-      traceManager: new TraceManager(this.props.web3)
-    })
-  },
-
   render: function () {
     return (
       <div style={style.font}>
         <h1 style={style.container}>Eth Debugger</h1>
         <TxBrowser onNewTxRequested={this.startDebugging} />
         <StepManager ref='stepManager' onStepChanged={this.stepChanged} />
-        <AssemblyItemsBrowser ref='assemblyitemsbrowser' currentStepIndex={this.state.currentStepIndex} />
+        <VmDebugger ref='assemblyitemsbrowser' currentStepIndex={this.state.currentStepIndex} />
       </div>
     )
   },
@@ -50,10 +44,11 @@ module.exports = React.createClass({
     this.setState({
       currentStepIndex: stepIndex
     })
+    this.props.context.codeManager.resolveCodeFor(stepIndex, this.state.tx)
   },
 
   startDebugging: function (blockNumber, txIndex, tx) {
-    if (this.state.traceManager.isLoading) {
+    if (this.props.context.traceManager.isLoading) {
       return
     }
     console.log('loading trace...')
@@ -61,12 +56,13 @@ module.exports = React.createClass({
       tx: tx
     })
     var self = this
-    this.state.traceManager.resolveTrace(tx, function (success) {
+    this.props.context.traceManager.resolveTrace(tx, function (success) {
       console.log('trace loaded ' + success)
       self.setState({
         currentStepIndex: 0
       })
       self.refs.stepManager.newTraceAvailable()
+      self.props.context.codeManager.resolveCodeFor(0, tx)
     })
   }
 })

src/index.js

@@ -3,17 +3,24 @@ var ReactDOM = require('react-dom')
 var React = require('react')
 var Web3 = require('web3')
 var Web3Admin = require('./web3Admin')
+var TraceManager = require('./traceManager')
+var CodeManager = require('./codeManager')
 
-function loadWeb3 () {
+function loadContext () {
   var web3 = new Web3()
   web3.setProvider(new web3.providers.HttpProvider('http://localhost:8545'))
   Web3Admin.extend(web3)
-  return web3
+  var traceManager = new TraceManager(web3)
+  return {
+    web3: web3,
+    traceManager: traceManager,
+    codeManager: new CodeManager(web3, traceManager)
+  }
 }
 
 var Debugger = require('./debugger')
 
 ReactDOM.render(
-  <Debugger web3={loadWeb3()} />,
+  <Debugger context={loadContext()} />,
   document.getElementById('app')
 )

src/slider.js

@@ -32,6 +32,10 @@ module.exports = React.createClass({
     )
   },
 
+  shouldComponentUpdate: function (nextProps, nextState) {
+    return (nextProps.max !== this.props.max || nextProps.min !== this.props.min)
+  },
+
   componentDidMount: function () {
     this.setValue(0)
   },

src/traceStepManager.js

@@ -42,7 +42,7 @@ TraceStepManager.prototype.findStepOutBack = function (currentStep) {
       depth++
     }
   }
-  return i + 1
+  return i
 }
 
 TraceStepManager.prototype.findStepOutForward = function (currentStep) {
@@ -62,7 +62,7 @@ TraceStepManager.prototype.findStepOutForward = function (currentStep) {
       depth++
     }
   }
-  return i - 1
+  return i
 }
 
 TraceStepManager.prototype.findNextCall = function (currentStep) {

src/vmDebugger.js

@@ -37,7 +37,7 @@ module.exports = React.createClass({
             <tbody>
               <tr>
                 <td>
-                  <ASMCode currentStepIndex={this.props.currentStepIndex} />
+                  <ASMCode ref='asmcode' currentStepIndex={this.props.currentStepIndex} />
                   <div style={Object.assign(style.inline, style.sticker)}>
                     <Sticker currentStepIndex={this.props.currentStepIndex} />
                   </div>
@@ -67,20 +67,5 @@ module.exports = React.createClass({
         </div>
       </div>
     )
-  },
-
-  componentWillReceiveProps: function (nextProps) {
-    if (nextProps.currentStepIndex < 0) return
-    if (window.ethDebuggerSelectedItem !== nextProps.currentStepIndex) return
-    var self = this
-    this.context.traceManager.getCurrentCalledAddressAt(nextProps.currentStepIndex, function (error, address) {
-      if (error) {
-        console.log(error)
-      } else if (window.ethDebuggerSelectedItem === nextProps.currentStepIndex) {
-        self.setState({
-          currentAddress: address
-        })
-      }
-    })
   }
 })