- clean

src/asmCode.js

@@ -4,7 +4,9 @@ var style = require('./basicStyles')
 
 module.exports = React.createClass({
   contextTypes: {
-    codeManager: React.PropTypes.object
+    codeManager: React.PropTypes.object,
+    root: React.PropTypes.object,
+    tx: React.PropTypes.object
   },
 
   getInitialState: function () {
@@ -23,10 +25,14 @@ module.exports = React.createClass({
   },
 
   componentDidMount: function () {
+    var self = this
     this.context.codeManager.register('indexChanged', this, this.indexChanged)
     this.context.codeManager.register('codeChanged', this, this.codeChanged)
     this.context.codeManager.register('loadingCode', this, function (address) {
     })
+    this.context.root.register('indexChanged', this, function (index) {
+      self.context.codeManager.resolveStep(index, self.context.tx)
+    })
   },
 
   indexChanged: function (index) {

src/calldataPanel.js

@@ -9,12 +9,6 @@ module.exports = React.createClass({
     root: React.PropTypes.object
   },
 
-  getDefaultProps: function () {
-    return {
-      currentStepIndex: -1
-    }
-  },
-
   getInitialState: function () {
     return {
       data: null

src/callstackPanel.js

@@ -9,12 +9,6 @@ module.exports = React.createClass({
     root: React.PropTypes.object
   },
 
-  getDefaultProps: function () {
-    return {
-      currentStepIndex: -1
-    }
-  },
-
   getInitialState: function () {
     return {
       data: null

src/codeManager.js

@@ -2,7 +2,7 @@
 var traceManagerUtil = require('./traceManagerUtil')
 var codeResolver = require('./codeResolver')
 var util = require('./util')
-var eventManager = require('./eventManager')
+var EventManager = require('./eventManager')
 
 /*
   resolve contract code referenced by vmtrace in order to be used by asm listview.
@@ -14,7 +14,7 @@ var eventManager = require('./eventManager')
 */
 
 function CodeManager (_web3, _traceManager) {
-  util.extend(this, eventManager)
+  util.extend(this, new EventManager())
   this.web3 = _web3
   this.isLoading = false
   this.traceManager = _traceManager

src/debugger.js

@@ -5,7 +5,7 @@ var StepManager = require('./stepManager')
 var VmDebugger = require('./vmDebugger')
 var style = require('./basicStyles')
 var util = require('./util')
-var eventManager = require('./eventManager')
+var EventManager = require('./eventManager')
 
 module.exports = React.createClass({
   getInitialState: function () {
@@ -14,7 +14,7 @@ module.exports = React.createClass({
       tx: null
     }
   },
-  
+
   childContextTypes: {
     web3: React.PropTypes.object,
     traceManager: React.PropTypes.object,
@@ -49,11 +49,10 @@ module.exports = React.createClass({
     this.setState({
       currentStepIndex: stepIndex
     })
-    this.props.context.codeManager.resolveStep(stepIndex, this.state.tx)
   },
 
   componentWillMount: function () {
-    util.extend(this, eventManager)
+    util.extend(this, new EventManager())
   },
 
   startDebugging: function (blockNumber, txIndex, tx) {
@@ -68,8 +67,7 @@ module.exports = React.createClass({
     this.props.context.traceManager.resolveTrace(tx, function (success) {
       console.log('trace loaded ' + success)
       if (success) {
-        self.stepChanged(0)
-        self.refs.stepManager.newTraceAvailable()
+        self.trigger('newTraceLoaded')
       } else {
         console.log('trace not loaded')
       }

src/eventManager.js

 'use strict'
-module.exports = {
-  registered: {},
+function EventManager () {
+  this.registered = {}
+}
 
-  register: function (eventName, obj, func) {
-    if (!this.registered[eventName]) {
-      this.registered[eventName] = []
+EventManager.prototype.unregister = function (eventName, obj) {
+  for (var reg in this.registered[eventName]) {
+    if (this.registered[eventName][reg] && this.registered[eventName][reg].obj === obj) {
+      this.registered[eventName].splice(reg, 1)
+      return
     }
-    this.registered[eventName].push({
-      obj: obj,
-      func: func
-    })
-  },
+  } 
+}
 
-  trigger: function (eventName, args) {
-    for (var listener in this.registered[eventName]) {
-      var l = this.registered[eventName][listener]
-      l.func.apply(l.obj, args)
-    }
+EventManager.prototype.register = function (eventName, obj, func) {
+  if (!this.registered[eventName]) {
+    this.registered[eventName] = []
   }
+  this.registered[eventName].push({
+    obj: obj,
+    func: func
+  })
+}
 
+EventManager.prototype.trigger = function (eventName, args) {
+  for (var listener in this.registered[eventName]) {
+    var l = this.registered[eventName][listener]
+    l.func.apply(l.obj, args)
+  }
 }
+
+module.exports = EventManager

src/memoryPanel.js

@@ -10,12 +10,6 @@ module.exports = React.createClass({
     root: React.PropTypes.object
   },
 
-  getDefaultProps: function () {
-    return {
-      currentStepIndex: -1
-    }
-  },
-
   getInitialState: function () {
     return {
       data: null

src/stackPanel.js

@@ -9,12 +9,6 @@ module.exports = React.createClass({
     root: React.PropTypes.object
   },
 
-  getDefaultProps: function () {
-    return {
-      currentStepIndex: -1
-    }
-  },
-
   getInitialState: function () {
     return {
       data: null

src/stepManager.js

@@ -3,8 +3,6 @@ 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: {
@@ -12,7 +10,8 @@ module.exports = React.createClass({
   },
 
   contextTypes: {
-    traceManager: React.PropTypes.object
+    traceManager: React.PropTypes.object,
+    root: React.PropTypes.object
   },
 
   getInitialState: function () {
@@ -43,7 +42,10 @@ module.exports = React.createClass({
   },
 
   componentDidMount: function () {
-    // util.extend(this, eventManager)
+    var self = this
+    this.context.root.register('newTraceLoaded', this, function () {
+      self.newTraceAvailable()
+    })
     this.changeState(-1)
   },
 
@@ -53,7 +55,7 @@ module.exports = React.createClass({
 
   init: function () {
     this.refs.slider.setValue(0)
-    this.changeState(-1)
+    this.changeState(0)
   },
 
   newTraceAvailable: function () {
@@ -64,7 +66,6 @@ module.exports = React.createClass({
         console.log(error)
       } else {
         self.setState({ traceLength: length })
-        self.changeState(0)
       }
     })
   },
@@ -74,7 +75,6 @@ module.exports = React.createClass({
       return
     }
     this.changeState(step)
-    this.props.onStepChanged(step)
   },
 
   stepIntoForward: function () {
@@ -87,7 +87,6 @@ module.exports = React.createClass({
     }
     this.refs.slider.setValue(step)
     this.changeState(step)
-    this.props.onStepChanged(step)
   },
 
   stepIntoBack: function () {
@@ -100,7 +99,6 @@ module.exports = React.createClass({
     }
     this.refs.slider.setValue(step)
     this.changeState(step)
-    this.props.onStepChanged(step)
   },
 
   stepOverForward: function () {
@@ -110,7 +108,7 @@ module.exports = React.createClass({
     var step = this.context.traceManager.findStepOverForward(this.state.currentStepIndex)
     this.refs.slider.setValue(step)
     this.changeState(step)
-    this.props.onStepChanged(step)
+    
   },
 
   stepOverBack: function () {
@@ -120,24 +118,23 @@ module.exports = React.createClass({
     var step = this.context.traceManager.findStepOverBack(this.state.currentStepIndex)
     this.refs.slider.setValue(step)
     this.changeState(step)
-    this.props.onStepChanged(step)
   },
 
   jumpToNextCall: function () {
     if (!this.context.traceManager.isLoaded()) {
       return
     }
-    var step = this.context.traceManager.findNextCall(this.state.currentStepIndex)    
+    var step = this.context.traceManager.findNextCall(this.state.currentStepIndex)
     this.refs.slider.setValue(step)
     this.changeState(step)
-    this.props.onStepChanged(step)
   },
 
-  changeState: function (step) {   
+  changeState: function (step) {
     this.updateGlobalSelectedItem(step)
     this.setState({
       currentStepIndex: step
     })
     this.refs.buttons.stepChanged(step)
+    this.props.onStepChanged(step)
   }
 })

src/sticker.js

@@ -8,12 +8,6 @@ module.exports = React.createClass({
     root: React.PropTypes.object
   },
 
-  getDefaultProps: function () {
-    return {
-      currentStepIndex: -1
-    }
-  },
-
   getInitialState: function () {
     return {
       step: '',

src/storagePanel.js

@@ -10,12 +10,6 @@ module.exports = React.createClass({
     root: React.PropTypes.object
   },
 
-  getDefaultProps: function () {
-    return {
-      currentStepIndex: -1
-    }
-  },
-
   getInitialState: function () {
     return {
       data: null

src/util.js

@@ -4,6 +4,5 @@ module.exports = {
     for (var property in source) {
       destination[property] = source[property]
     }
-    // return destination
   }
 }

src/vmDebugger.js

@@ -10,12 +10,6 @@ var StackPanel = require('./stackPanel')
 var StoragePanel = require('./storagePanel')
 
 module.exports = React.createClass({
-  getDefaultProps: function () {
-    return {
-      currentStepIndex: -1 // index of the selected item in the vmtrace
-    }
-  },
-
   render: function () {
     return (
       <div style={this.props.vmTrace === null ? style.hidden : style.display}>
@@ -24,29 +18,29 @@ module.exports = React.createClass({
             <tbody>
               <tr>
                 <td>
-                  <ASMCode ref='asmcode' currentStepIndex={this.props.currentStepIndex} />
+                  <ASMCode />
                   <div style={Object.assign(style.inline, style.sticker)}>
-                    <Sticker currentStepIndex={this.props.currentStepIndex} />
+                    <Sticker />
                   </div>
                 </td>
                 <td>
-                  <StackPanel currentStepIndex={this.props.currentStepIndex} />
+                  <StackPanel />
                 </td>
               </tr>
               <tr>
                 <td>
-                  <StoragePanel currentStepIndex={this.props.currentStepIndex} />
+                  <StoragePanel />
                 </td>
                 <td>
-                  <MemoryPanel currentStepIndex={this.props.currentStepIndex} />
+                  <MemoryPanel />
                 </td>
               </tr>
               <tr>
                 <td>
-                  <CalldataPanel currentStepIndex={this.props.currentStepIndex} />
+                  <CalldataPanel />
                 </td>
                 <td>
-                  <CallstackPanel currentStepIndex={this.props.currentStepIndex} />
+                  <CallstackPanel />
                 </td>
               </tr>
             </tbody>