add properties

src/ui/SolidityLocals.js

@@ -13,7 +13,8 @@ class SolidityLocals {
     this.basicPanel = new DropdownPanel('Solidity Locals', {
       json: true,
       formatData: solidityTypeFormatter.formatData,
-      extractData: solidityTypeFormatter.extractData
+      extractData: solidityTypeFormatter.extractData,
+      extractProperties: solidityTypeFormatter.extractProperties
     })
     this.init()
     this.view

src/ui/SolidityState.js

@@ -12,7 +12,8 @@ function SolidityState (_parent, _traceManager, _codeManager, _solidityProxy) {
   this.basicPanel = new DropdownPanel('Solidity State', {
     json: true,
     formatData: solidityTypeFormatter.formatData,
-    extractData: solidityTypeFormatter.extractData
+    extractData: solidityTypeFormatter.extractData,
+    extractProperties: solidityTypeFormatter.extractProperties
   })
   this.init()
   this.view

src/ui/SolidityTypeFormatter.js

 'use strict'
 var yo = require('yo-yo')
+var BN = require('ethereumjs-util').BN
 
 module.exports = {
   formatData: formatData,
+  extractProperties: extractProperties,
   extractData: extractData
 }
 
 function formatData (key, data) {
   var style = fontColor(data)
-  var type = ''
-  return yo`<label>${key}: <label style=${style}>${data.self}</label><label style='font-style:italic'> ${type}</label></label>`
+  return yo`<label>${key}: <label style=${style}>${data.self}</label><label style='font-style:italic'> ${data.isProperty ? '' : data.type}</label></label>`
+}
+
+function extractProperties (data, parent, key) {
+  var ret = {}
+  if (isArray(data.type)) {
+    var length = new BN(data.length.replace('0x', ''), 16)
+    ret['length'] = {
+      self: length.toString(10),
+      type: 'uint',
+      isProperty: true
+    }
+  }
+  return ret
 }
 
 function extractData (item, parent, key) {
@@ -17,11 +31,8 @@ function extractData (item, parent, key) {
   if (item.type.lastIndexOf(']') === item.type.length - 1) {
     ret.children = item.value || []
     ret.isArray = true
-    if (!parent.isArray) {
-      ret.self = item.type
-    } else {
-      ret.self = 'Array'
-    }
+    ret.self = parent.isArray ? 'Array' : item.type
+    ret.length = item.length
   } else if (item.type.indexOf('struct') === 0) {
     ret.children = item.value || []
     ret.self = 'Struct' + '{' + Object.keys(ret.children).length + '}'
@@ -48,3 +59,8 @@ function fontColor (data) {
   }
   return 'color:' + color
 }
+
+function isArray (type) {
+  return type.lastIndexOf(']') === type.length - 1
+}
+

src/ui/TreeView.js

@@ -12,6 +12,7 @@ class TreeView {
     this.beforeJsonValueRendered = opts.beforeJsonValueRendered || noop
     this.extractData = opts.extractData || this.extractDataDefault
     this.formatData = opts.formatData || this.formatDataDefault
+    this.extractProperties = opts.extractProperties || this.extractPropertiesDefault
     this.view = null
     this.cssLabel = ui.formatCss(opts.css || {}, style.label)
     this.cssList = ui.formatCss(opts.css || {}, style.list)
@@ -40,7 +41,8 @@ class TreeView {
     var children = Object.keys(data.children).map((innerkey) => {
       return this.renderObject(data.children[innerkey], data, innerkey, expand)
     })
-    return this.formatDataInternal(key, data, children, expand)
+    var properties = this.extractProperties(item, parent, key)
+    return this.formatDataInternal(key, data, children, properties, expand)
   }
 
   renderProperties (json, expand) {
@@ -50,11 +52,14 @@ class TreeView {
     return yo`<ul style=${this.cssList}>${children}</ul>`
   }
 
-  formatDataInternal (key, data, children, expand) {
+  formatDataInternal (key, data, children, properties, expand) {
+    var renderedProperties = Object.keys(properties).map((item) => {
+      return this.formatDataInternal(item, properties[item], [], [], false)
+    })
     var label = yo`<span style=${this.cssLabel}><label style='position:absolute;margin-top: 2px'></label><span style='margin-left: 10px'>${this.formatData(key, data)}</span></span>`
     var renderedChildren = ''
     if (children.length) {
-      renderedChildren = yo`<ul style=${this.cssList}>${children}</ul>`
+      renderedChildren = yo`<ul style=${this.cssList}>${renderedProperties}${children}</ul>`
       renderedChildren.style.display = expand ? 'block' : 'none'
       label.firstElementChild.className = expand ? 'fa fa-caret-down' : 'fa fa-caret-right'
       label.onclick = function () {
@@ -66,6 +71,10 @@ class TreeView {
     return yo`<li style=${this.cssList}>${label}${renderedChildren}</li>`
   }
 
+  extractPropertiesDefault (key, data) {
+    return {}
+  }
+
   formatDataDefault (key, data) {
     return yo`<label>${key}: ${data.self}</label>`
   }