only load state 500ms after the last step change

src/ui/DropdownPanel.js

@@ -20,11 +20,32 @@ function DropdownPanel (_name, _opts) {
   this.view
 }
 
+DropdownPanel.prototype.setMessage = function (message) {
+  if (this.view) {
+    this.view.querySelector('.dropdownpanel .dropdownrawcontent').style.display = 'none'
+    this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'none'
+    this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'none'
+    this.message(message)
+  }
+}
+
+DropdownPanel.prototype.setLoading = function () {
+  if (this.view) {
+    this.view.querySelector('.dropdownpanel .dropdownrawcontent').style.display = 'none'
+    this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'none'
+    this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'inline-block'
+    this.message('')
+  }
+}
+
 DropdownPanel.prototype.update = function (_data, _header) {
   if (this.view) {
+    this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'none'
+    this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'block'
     this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = JSON.stringify(_data, null, '\t')
     this.view.querySelector('.dropdownpanel button.btn').style.display = 'block'
     this.view.querySelector('.title span').innerText = _header || ' '
+    this.message('')
     if (this.json) {
       this.treeView.update(_data)
     }
@@ -32,8 +53,10 @@ DropdownPanel.prototype.update = function (_data, _header) {
 }
 
 DropdownPanel.prototype.setContent = function (node) {
-  var parent = this.view.querySelector('.dropdownpanel div.dropdowncontent')
-  parent.replaceChild(node, parent.firstElementChild)
+  if (this.view) {
+    var parent = this.view.querySelector('.dropdownpanel div.dropdowncontent')
+    parent.replaceChild(node, parent.firstElementChild)
+  }
 }
 
 DropdownPanel.prototype.render = function (overridestyle) {
@@ -43,7 +66,19 @@ DropdownPanel.prototype.render = function (overridestyle) {
   }
   overridestyle === undefined ? {} : overridestyle
   var self = this
-  var view = yo`<div>
+  var view = yo`
+    <div>
+    <style>
+      @-moz-keyframes spin {
+        to { -moz-transform: rotate(359deg); }
+      }
+      @-webkit-keyframes spin {
+        to { -webkit-transform: rotate(359deg); }
+      }
+      @keyframes spin {
+        to {transform:rotate(359deg);}
+      }
+    </style>
     <div class='title' style=${ui.formatCss(styleDropdown.title)} onclick=${function () { self.toggle() }}>
       <div style=${ui.formatCss(styleDropdown.caret)} class='fa fa-caret-right'></div>
       <div style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div><span></span>
@@ -51,8 +86,10 @@ DropdownPanel.prototype.render = function (overridestyle) {
     <div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'>
       <button onclick=${function () { self.toggleRaw() }} style=${ui.formatCss(basicStyles.button, styleDropdown.copyBtn)} title='raw' class="btn fa fa-eye" type="button">
       </button>
+      <i class="fa fa-refresh" style=${ui.formatCss(styleDropdown.inner, overridestyle, {display: 'none', 'margin-left': '4px', 'margin-top': '4px', 'animation': 'spin 2s linear infinite'})} aria-hidden="true"></i>
       <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'>${content}</div>
       <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdownrawcontent' style='display:none'></div>
+      <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='message' style='display:none'></div>
     </div>
     </div>`
   if (!this.view) {
@@ -102,4 +139,12 @@ DropdownPanel.prototype.show = function () {
   }
 }
 
+DropdownPanel.prototype.message = function (message) {
+  if (this.view) {
+    var mes = this.view.querySelector('.dropdownpanel .message')
+    mes.innerText = message
+    mes.style.display = (message === '') ? 'none' : 'block'
+  }
+}
+
 module.exports = DropdownPanel

src/ui/SolidityState.js

@@ -24,54 +24,63 @@ function SolidityState (_parent, _traceManager, _codeManager, _solidityProxy) {
 }
 
 SolidityState.prototype.render = function () {
-  this.view = yo`<div id='soliditystate' >
-      <div id='warning'></div>
+  if (!this.view) {
+    this.view = yo`<div id='soliditystate' >
       ${this.basicPanel.render()}
     </div>`
+  }
   return this.view
 }
 
 SolidityState.prototype.init = function () {
   var self = this
+  var decodeTimeout = null
   this.parent.event.register('indexChanged', this, function (index) {
-    var warningDiv = this.view.querySelector('#warning')
-    warningDiv.innerHTML = ''
+    self.basicPanel.setMessage('')
     if (index < 0) {
-      warningDiv.innerHTML = 'invalid step index'
+      self.basicPanel.setMessage('invalid step index')
       return
     }
 
     if (self.parent.currentStepIndex !== index) return
-    if (!this.solidityProxy.loaded()) {
-      warningDiv.innerHTML = 'no source has been specified'
+    if (!self.solidityProxy.loaded()) {
+      self.basicPanel.setMessage('no source has been specified')
       return
     }
 
     if (!self.storageResolver) {
-      warningDiv.innerHTML = 'storage not ready'
       return
     }
+    if (decodeTimeout) {
+      window.clearTimeout(decodeTimeout)
+    }
+    self.basicPanel.setLoading()
+    decodeTimeout = setTimeout(() => {
+      decode(self, index)
+    }, 500)
+  })
+}
 
-    self.traceManager.getCurrentCalledAddressAt(self.parent.currentStepIndex, (error, address) => {
-      if (error) {
-        self.basicPanel.update({})
-        console.log(error)
+function decode (self, index) {
+  self.traceManager.getCurrentCalledAddressAt(self.parent.currentStepIndex, (error, address) => {
+    if (error) {
+      self.basicPanel.update({})
+      console.log(error)
+    } else {
+      if (self.stateVariablesByAddresses[address]) {
+        extractStateVariables(self, self.stateVariablesByAddresses[address], address)
       } else {
-        if (self.stateVariablesByAddresses[address]) {
-          extractStateVariables(self, self.stateVariablesByAddresses[address], address)
-        } else {
-          self.solidityProxy.extractStateVariablesAt(index, function (error, stateVars) {
-            if (error) {
-              self.basicPanel.update({})
-              console.log(error)
-            } else {
-              self.stateVariablesByAddresses[address] = stateVars
-              extractStateVariables(self, stateVars, address)
-            }
-          })
-        }
+        self.solidityProxy.extractStateVariablesAt(index, function (error, stateVars) {
+          if (error) {
+            self.basicPanel.update({})
+            console.log(error)
+          } else {
+            self.stateVariablesByAddresses[address] = stateVars
+            extractStateVariables(self, stateVars, address)
+          }
+        })
       }
-    })
+    }
   })
 }
 
@@ -82,8 +91,11 @@ function extractStateVariables (self, stateVars, address) {
     address: address
   }, self.storageResolver, self.traceManager)
   stateDecoder.decodeState(stateVars, storageViewer).then((result) => {
+    self.basicPanel.setMessage('')
     if (!result.error) {
       self.basicPanel.update(result)
+    } else {
+      self.basicPanel.setMessage(result.error)
     }
   })
 }