Merge pull request #40 from yann300/ui

src/ASMCode.js

 'use strict'
-var style = require('./basicStyles')
+var style = require('./styles/basicStyles')
 var yo = require('yo-yo')
 var CodeManager = require('./code/codeManager')
 var ui = require('./helpers/ui')

src/BasicPanel.js

 'use strict'
-var style = require('./basicStyles')
+var style = require('./styles/basicStyles')
 var yo = require('yo-yo')
 var ui = require('./helpers/ui')
 

src/ButtonNavigator.js

@@ -49,7 +49,7 @@ ButtonNavigator.prototype.stepChanged = function (step) {
   if (!this.traceManager) {
     this.intoForwardDisabled = true
     this.overForwardDisabled = true
-    this.NextCallDisabled = true
+    this.nextCallDisabled = true
   } else {
     var self = this
     this.traceManager.getLength(function (error, length) {
@@ -58,7 +58,7 @@ ButtonNavigator.prototype.stepChanged = function (step) {
         self.overBackDisabled = true
         self.intoForwardDisabled = true
         self.overForwardDisabled = true
-        self.NextcallDisabled = true
+        self.nextCallDisabled = true
         console.log(error)
       } else {
         self.intoForwardDisabled = step >= length - 1

src/Ethdebugger.js

@@ -3,7 +3,8 @@ var TxBrowser = require('./TxBrowser')
 var StepManager = require('./StepManager')
 var TraceManager = require('./trace/traceManager')
 var VmDebugger = require('./VmDebugger')
-var style = require('./basicStyles')
+var Sticker = require('./Sticker')
+var style = require('./styles/basicStyles')
 var util = require('./helpers/global')
 var EventManager = require('./lib/eventManager')
 var yo = require('yo-yo')
@@ -31,14 +32,20 @@ function Ethdebugger () {
     self.stepChanged(stepIndex)
   })
   this.vmDebugger = new VmDebugger(this, this.traceManager, this.web3)
+  this.sticker = new Sticker(this, this.traceManager, this.web3)
 }
 
 Ethdebugger.prototype.render = function () {
   return (
   yo`<div style=${ui.formatCss(style.font)}>
-        <h1 style=${ui.formatCss(style.container)}>Eth Debugger</h1>
+        <h1 style=${ui.formatCss(style.container)}>VM Debugger</h1>
+        <div style='display:inline-block'>
           ${this.txBrowser.render()}
           ${this.stepManager.render()}
+        </div>
+        <div style='display:inline-block'>
+          ${this.sticker.render()}
+        </div>
         ${this.vmDebugger.render()}
      </div>`
   )
@@ -46,7 +53,7 @@ Ethdebugger.prototype.render = function () {
 
 Ethdebugger.prototype.unLoad = function () {
   this.traceManager.init()
-  this.stepManager.init()
+  this.stepManager.reset()
   this.trigger('traceUnloaded')
 }
 

src/Slider.js

 'use strict'
-var style = require('./sliderStyles')
+var style = require('./styles/sliderStyles')
 var util = require('./helpers/global')
 var EventManager = require('./lib/eventManager')
 var yo = require('yo-yo')
@@ -33,18 +33,11 @@ Slider.prototype.render = function () {
   return view
 }
 
-Slider.prototype.init = function () {
-  var self = this
-  this.traceManager.getLength(function (error, length) {
-    if (error) {
-      console.log(error)
-    } else {
-      self.max = length
-      self.disabled = length === 0
-      yo.update(self.view, self.render())
-      self.setValue(0)
-    }
-  })
+Slider.prototype.init = function (length) {
+  this.max = length
+  this.disabled = length === 0
+  yo.update(this.view, this.render())
+  this.setValue(0)
 }
 
 Slider.prototype.onMouseUp = function (event) {

src/StepManager.js

 'use strict'
 var ButtonNavigator = require('./ButtonNavigator')
 var Slider = require('./Slider')
-var style = require('./basicStyles')
+var style = require('./styles/basicStyles')
 var util = require('./helpers/global')
 var EventManager = require('./lib/eventManager')
 var yo = require('yo-yo')
@@ -14,10 +14,13 @@ function StepManager (_parent, _traceManager) {
 
   var self = this
   this.parent.register('newTraceLoaded', this, function () {
-    self.traceManager.getLength(function (length) {
-      self.slider.max = length
-      self.slider.init()
+    self.traceManager.getLength(function (error, length) {
+      if (error) {
+        console.log(error)
+      } else {
+        self.slider.init(length)
         self.init()
+      }
     })
   })
 
@@ -53,6 +56,12 @@ StepManager.prototype.render = function () {
   )
 }
 
+StepManager.prototype.reset = function () {
+  this.slider.setValue(0)
+  this.currentStepIndex = 0
+  this.buttonNavigator.stepChanged(0)
+}
+
 StepManager.prototype.init = function () {
   this.slider.setValue(0)
   this.changeState(0)

src/Sticker.js

@@ -5,23 +5,25 @@ function Sticker (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
 
-  this.vmTraceStep
-  this.step
-  this.addmemory
-  this.gas
-  this.remainingGas
+  this.vmTraceStep = '-'
+  this.step = '-'
+  this.addmemory = '-'
+  this.gas = '-'
+  this.remainingGas = '-'
+  this.loadedAddress = '-'
+  this.hide = true
 
   this.view
   this.init()
 }
 
 Sticker.prototype.render = function () {
-  var view = yo`<div>
+  var view = yo`<div style=${this.hide ? 'display: none' : 'display: block'}>
     <table>
       <tbody>
         <tr key='vmtracestep'>
           <td>
-            vmtracestep
+            VMtracestep:
           </td>
           <td>
             ${this.vmTraceStep}
@@ -29,7 +31,7 @@ Sticker.prototype.render = function () {
         </tr>
         <tr key='step'>
           <td>
-            step
+            Step:
           </td>
           <td>
             ${this.step}
@@ -37,7 +39,7 @@ Sticker.prototype.render = function () {
         </tr>
         <tr key='addmemory'>
           <td>
-            add memory
+            Add memory:
           </td>
           <td>
             ${this.addmemory}
@@ -45,7 +47,7 @@ Sticker.prototype.render = function () {
         </tr>
         <tr key='gas'>
           <td>
-            gas
+            Gas:
           </td>
           <td>
             ${this.gas}
@@ -53,12 +55,20 @@ Sticker.prototype.render = function () {
         </tr>
         <tr key='remaininggas'>
           <td>
-            remaining gas
+            Remaining gas:
           </td>
           <td>
             ${this.remainingGas}
           </td>
         </tr>
+        <tr key='remaininggas'>
+          <td>
+            Loaded address:
+          </td>
+          <td>
+            ${this.loadedAddress}
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>`
@@ -70,6 +80,16 @@ Sticker.prototype.render = function () {
 
 Sticker.prototype.init = function () {
   var self = this
+  this.parent.register('traceUnloaded', this, function () {
+    self.hide = true
+    yo.update(self.view, self.render())
+  })
+
+  this.parent.register('newTraceLoaded', this, function () {
+    self.hide = false
+    yo.update(self.view, self.render())
+  })
+
   this.parent.register('indexChanged', this, function (index) {
     if (index < 0) return
 
@@ -78,7 +98,7 @@ Sticker.prototype.init = function () {
     self.traceManager.getCurrentStep(index, function (error, step) {
       if (error) {
         console.log(error)
-        self.step = ''
+        self.step = '-'
       } else {
         self.step = step
       }
@@ -88,7 +108,7 @@ Sticker.prototype.init = function () {
     self.traceManager.getMemExpand(index, function (error, addmem) {
       if (error) {
         console.log(error)
-        self.addmemory = ''
+        self.addmemory = '-'
       } else {
         self.addmemory = addmem
       }
@@ -98,17 +118,27 @@ Sticker.prototype.init = function () {
     self.traceManager.getStepCost(index, function (error, gas) {
       if (error) {
         console.log(error)
-        self.gas = gas
+        self.gas = '-'
       } else {
         self.gas = gas
       }
       yo.update(self.view, self.render())
     })
 
+    self.traceManager.getCurrentCalledAddressAt(index, function (error, address) {
+      if (error) {
+        console.log(error)
+        self.loadedAddress = '-'
+      } else {
+        self.loadedAddress = address
+      }
+      yo.update(self.view, self.render())
+    })
+
     self.traceManager.getRemainingGas(index, function (error, remaingas) {
       if (error) {
         console.log(error)
-        self.remainingGas = ''
+        self.remainingGas = '-'
       } else {
         self.remainingGas = remaingas
       }

src/TxBrowser.js

-var style = require('./basicStyles')
+var style = require('./styles/basicStyles')
 var util = require('./helpers/global')
 var EventManager = require('./lib/eventManager')
 var traceHelper = require('./helpers/traceHelper')
@@ -10,13 +10,14 @@ function TxBrowser (_web3) {
   this.web3 = _web3
 
   this.blockNumber
-  this.txNumber = '0x71a6d583d16d142c5c3e8903060e8a4ee5a5016348a9448df6c3e63b68076ec4'
+  this.txNumber
   this.hash
   this.from
   this.to
   this.view
-}
 
+  this.setDefaultValues()
+}
 
 // 0xcda2b2835add61af54cf83bd076664d98d7908c6cd98d86423b3b48d8b8e51ff
 // creation 0xa9619e1d0a35b2c1d686f5b661b3abd87f998d2844e8e9cc905edb57fc9ce349
@@ -25,6 +26,14 @@ function TxBrowser (_web3) {
 // creation: 0x72908de76f99fca476f9e3a3b5d352f350a98cd77d09cebfc59ffe32a6ecaa0b
 // invokation: 0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51
 
+TxBrowser.prototype.setDefaultValues = function () {
+  this.from = ' - '
+  this.to = ' - '
+  this.hash = ' - '
+  this.blockNumber = null
+  this.txNumber = '0x71a6d583d16d142c5c3e8903060e8a4ee5a5016348a9448df6c3e63b68076ec4'
+}
+
 TxBrowser.prototype.submit = function () {
   if (!this.txNumber) {
     return
@@ -47,11 +56,15 @@ TxBrowser.prototype.submit = function () {
     this.from = tx.from
     this.to = tx.to
     this.hash = tx.hash
-    yo.update(this.view, this.render())
     this.trigger('newTxRequested', [this.blockNumber, this.txNumber, tx])
   } else {
+    var mes = '<not found>'
+    this.from = mes
+    this.to = mes
+    this.hash = mes
     console.log('cannot find ' + this.blockNumber + ' ' + this.txNumber)
   }
+  yo.update(this.view, this.render())
 }
 
 TxBrowser.prototype.updateBlockN = function (ev) {
@@ -62,6 +75,11 @@ TxBrowser.prototype.updateTxN = function (ev) {
   this.txNumber = ev.target.value
 }
 
+TxBrowser.prototype.init = function (ev) {
+  this.setDefaultValues()
+  yo.update(this.view, this.render())
+}
+
 TxBrowser.prototype.render = function () {
   var self = this
   var view = yo`<div style=${ui.formatCss(style.container)}>

src/VmDebugger.js

 'use strict'
-var Sticker = require('./Sticker')
-var style = require('./basicStyles')
+var style = require('./styles/basicStyles')
 var ASMCode = require('./ASMCode')
 var CalldataPanel = require('./CalldataPanel')
 var MemoryPanel = require('./MemoryPanel')
@@ -11,7 +10,6 @@ var yo = require('yo-yo')
 var ui = require('./helpers/ui')
 
 function VmDebugger (_parent, _traceManager, _web3) {
-  this.sticker = new Sticker(_parent, _traceManager, _web3)
   this.asmCode = new ASMCode(_parent, _traceManager, _web3)
   this.stackPanel = new StackPanel(_parent, _traceManager)
   this.storagePanel = new StoragePanel(_parent, _traceManager)
@@ -35,10 +33,8 @@ VmDebugger.prototype.render = function () {
             <tbody>
               <tr>
                 <td>
+                  
                   ${this.asmCode.render()}
-                  <div style=${ui.formatCss(style.inline, style.sticker)}>
-                    ${this.sticker.render()}
-                  </div>
                 </td>
                 <td>
                   ${this.stackPanel.render()}

src/basicStyles.js → src/styles/basicStyles.js

@@ -11,8 +11,8 @@ module.exports = {
     'font-style': 'italic'
   },
   instructionsList: {
-    'width': '320px',
-    'height': '300px'
+    'width': '600px',
+    'height': '330px'
   },
   transactionInfo: {
     'margin-top': '5px'