don't use treeview properties

src/ui/SolidityTypeFormatter.js

@@ -4,7 +4,6 @@ var BN = require('ethereumjs-util').BN
 
 module.exports = {
   formatData: formatData,
-  extractProperties: extractProperties,
   extractData: extractData
 }
 
@@ -17,28 +16,29 @@ function formatData (key, data) {
   return yo`<label style=${keyStyle}>${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) {
   var ret = {}
+  if (item.isProperty) {
+    return item
+  }
   if (item.type.lastIndexOf(']') === item.type.length - 1) {
-    ret.children = item.value || []
+    ret.children = (item.value || []).map(function (item, index) {
+      return {key: index, value: item}
+    })
+    ret.children.unshift({
+      key: 'length',
+      value: {
+        self: (new BN(item.length.replace('0x', ''), 16)).toString(10),
+        type: 'uint',
+        isProperty: true
+      }
+    })
     ret.isArray = true
     ret.self = parent.isArray ? 'Array' : item.type
-    ret.length = item.length
   } else if (item.type.indexOf('struct') === 0) {
-    ret.children = item.value || []
+    ret.children = Object.keys((item.value || {})).map(function (key) {
+      return {key: key, value: item.value[key]}
+    })
     ret.self = item.type
     ret.isStruct = true
   } else {

src/ui/TreeView.js

@@ -39,11 +39,10 @@ class TreeView {
 
   renderObject (item, parent, key, expand) {
     var data = this.extractData(item, parent, key)
-    var children = Object.keys(data.children).map((innerkey) => {
-      return this.renderObject(data.children[innerkey], data, innerkey, expand)
+    var children = (data.children || []).map((child, index) => {
+      return this.renderObject(child.value, data, child.key, expand)
     })
-    var properties = this.extractProperties(item, parent, key)
-    return this.formatDataInternal(key, data, children, properties, expand)
+    return this.formatDataInternal(key, data, children, expand)
   }
 
   renderProperties (json, expand) {
@@ -53,14 +52,11 @@ class TreeView {
     return yo`<ul style=${this.cssUl}>${children}</ul>`
   }
 
-  formatDataInternal (key, data, children, properties, expand) {
-    var renderedProperties = Object.keys(properties).map((item) => {
-      return this.formatDataInternal(item, properties[item], [], [], false)
-    })
+  formatDataInternal (key, data, children, expand) {
     var label = yo`<span style=${this.cssLabel}><label style=${ui.formatCss(style.caret)}></label><span style=${ui.formatCss(style.data)}>${this.formatData(key, data)}</span></span>`
     var renderedChildren = ''
     if (children.length) {
-      renderedChildren = yo`<ul style=${this.cssUl}>${renderedProperties}${children}</ul>`
+      renderedChildren = yo`<ul style=${this.cssUl}>${children}</ul>`
       renderedChildren.style.display = expand ? 'block' : 'none'
       label.firstElementChild.className = expand ? 'fa fa-caret-down' : 'fa fa-caret-right'
       label.onclick = function () {
@@ -83,10 +79,14 @@ class TreeView {
   extractDataDefault (item, parent, key) {
     var ret = {}
     if (item instanceof Array) {
-      ret.children = item
+      ret.children = item.map((item, index) => {
+        return {key: index, value: item}
+      })
       ret.self = 'Array'
     } else if (item instanceof Object) {
-      ret.children = item
+      ret.children = Object.keys(item).map((key) => {
+        return {key: key, value: item[key]}
+      })
       ret.self = 'Object'
     } else {
       ret.self = item