make dropdownlist use treeview

src/ui/CalldataPanel.js

@@ -5,7 +5,7 @@ var yo = require('yo-yo')
 function CalldataPanel (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
-  this.basicPanel = new DropdownPanel('Call Data')
+  this.basicPanel = new DropdownPanel('Call Data', {json: true})
   this.init()
 }
 

src/ui/CallstackPanel.js

@@ -5,7 +5,7 @@ var yo = require('yo-yo')
 function CallstackPanel (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
-  this.basicPanel = new DropdownPanel('Call Stack')
+  this.basicPanel = new DropdownPanel('Call Stack', {json: true})
   this.init()
 }
 

src/ui/CodeListView.js

@@ -11,7 +11,7 @@ function CodeListView (_parent, _codeManager) {
   this.address
   this.codeView
   this.itemSelected
-  this.basicPanel = new DropdownPanel('Instructions', true)
+  this.basicPanel = new DropdownPanel('Instructions', {json: false})
   this.init()
 }
 
@@ -51,8 +51,7 @@ CodeListView.prototype.changed = function (code, address, index) {
     this.code = code
     this.address = address
     this.codeView = this.renderAssemblyItems()
-    this.basicPanel.data = this.codeView
+    this.basicPanel.setContent(this.codeView)
-    this.basicPanel.update()
   }
   this.indexChanged(index)
 }

src/ui/DropdownPanel.js

@@ -3,49 +3,40 @@ var yo = require('yo-yo')
 var ui = require('../helpers/ui')
 var styleDropdown = require('./styles/dropdownPanel')
 var basicStyles = require('./styles/basicStyles')
+var TreeView = require('./TreeView')
 
-function DropdownPanel (_name, _raw) {
+function DropdownPanel (_name, _opts) {
-  this.data
+  if (!_opts) {
+    _opts = {}
+  }
   this.name = _name
+  this.json = _opts.json
+  if (this.json) {
+    this.treeView = new TreeView(_opts)
+  }
   this.view
-  _raw = _raw === undefined ? false : _raw
-  this.raw = _raw
 }
 
 DropdownPanel.prototype.update = function (_data) {
-  if (!this.view) {
+  if (this.view) {
-    return
+    this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = JSON.stringify(_data, null, '\t')
-  }
-  if (_data) {
-    this.data = _data
-  }
-  this.view.querySelector('.dropdownpanel div.dropdowncontent').innerHTML = ''
-  if (!this.raw) {
-    var data = JSON.stringify(this.data, null, '\t')
-    if (!this.data || data === '[]' || data === '{}') {
-      this.data = ['Empty']
-    }
-    var div = document.createElement('div')
-    if (Array.isArray(this.data)) {
-      this.data.map(function (item, i) {
-        div.appendChild(yo`<div>${item}</div>`)
-      })
-    } else {
-      for (var k in this.data) {
-        var content = typeof this.data[k] === 'string' ? this.data[k] : JSON.stringify(this.data[k])
-        div.appendChild(yo`<div><div title=${k} style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '10%'})} >${k}</div><div title=${content} style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '78%'})} >${content}</div></div>`)
-      }
-    }
-    this.view.querySelector('.dropdownpanel div.dropdowncontent').appendChild(div)
     this.view.querySelector('.dropdownpanel button.btn').style.display = 'block'
-    this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = data
+    if (this.json) {
-  } else {
+      this.treeView.update(_data)
-    this.view.querySelector('.dropdownpanel div.dropdowncontent').appendChild(this.data)
+    }
-    this.view.querySelector('.dropdownpanel button.btn').style.display = 'none'
   }
 }
 
+DropdownPanel.prototype.setContent = function (node) {
+  var parent = this.view.querySelector('.dropdownpanel div.dropdowncontent')
+  parent.replaceChild(node, parent.firstElementChild)
+}
+
 DropdownPanel.prototype.render = function (overridestyle) {
+  var content = yo`<div>Empty</div>`
+  if (this.json) {
+    content = this.treeView.render({})
+  }
   overridestyle === undefined ? {} : overridestyle
   var self = this
   var view = yo`<div>
@@ -55,7 +46,7 @@ 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>
-      <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'><div>Empty</div></div>
+      <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>
     </div>`

src/ui/FullStoragesChanges.js

@@ -8,7 +8,7 @@ function FullStoragesChanges (_parent, _traceManager) {
   this.addresses = []
   this.view
   this.traceLength
-  this.basicPanel = new DropdownPanel('Full Storages Changes')
+  this.basicPanel = new DropdownPanel('Full Storages Changes', {json: true})
   this.init()
 }
 

src/ui/MemoryPanel.js

@@ -6,7 +6,7 @@ var yo = require('yo-yo')
 function MemoryPanel (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
-  this.basicPanel = new DropdownPanel('Memory')
+  this.basicPanel = new DropdownPanel('Memory', {json: true})
   this.init()
 }
 

src/ui/SolidityLocals.js

@@ -9,7 +9,7 @@ class SolidityLocals {
     this.parent = _parent
     this.internalTreeCall = internalTreeCall
     this.traceManager = _traceManager
-    this.basicPanel = new DropdownPanel('Solidity Locals')
+    this.basicPanel = new DropdownPanel('Solidity Locals', {json: true})
     this.init()
   }
 

src/ui/SolidityState.js

@@ -8,7 +8,7 @@ function SolidityState (_parent, _traceManager, _codeManager, _solidityProxy) {
   this.traceManager = _traceManager
   this.codeManager = _codeManager
   this.solidityProxy = _solidityProxy
-  this.basicPanel = new DropdownPanel('Solidity State')
+  this.basicPanel = new DropdownPanel('Solidity State', {json: true})
   this.init()
 }
 

src/ui/StackPanel.js

@@ -6,7 +6,7 @@ var yo = require('yo-yo')
 function StackPanel (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
-  this.basicPanel = new DropdownPanel('Stack')
+  this.basicPanel = new DropdownPanel('Stack', {json: true})
   this.init()
 }
 

src/ui/StepDetail.js

@@ -6,7 +6,7 @@ function StepDetail (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
 
-  this.basicPanel = new DropdownPanel('Step detail')
+  this.basicPanel = new DropdownPanel('Step detail', {json: true})
 
   this.detail = initDetail()
   this.view

src/ui/StoragePanel.js

@@ -5,7 +5,7 @@ var yo = require('yo-yo')
 function StoragePanel (_parent, _traceManager, _address) {
   this.parent = _parent
   this.traceManager = _traceManager
-  this.basicPanel = new DropdownPanel('Storage Changes')
+  this.basicPanel = new DropdownPanel('Storage Changes', {json: true})
   this.address = _address
   this.init()
   this.disabled = false

src/ui/TxBrowser.js

@@ -14,7 +14,7 @@ function TxBrowser (_parent) {
   this.txNumber
   this.view
   this.displayConnectionSetting = true
-  this.basicPanel = new DropdownPanel('Transaction')
+  this.basicPanel = new DropdownPanel('Transaction', {json: true})
   this.basicPanel.data = {}
   var self = this
   _parent.event.register('providerChanged', this, function (provider) {

src/ui/VmDebugger.js

@@ -24,7 +24,7 @@ function VmDebugger (_parent, _traceManager, _codeManager, _solidityProxy, _call
   this.solidityLocals = new SolidityLocals(_parent, _traceManager, _callTree)
 
   /* Return values - */
-  this.returnValuesPanel = new DropdownPanel('Return Value')
+  this.returnValuesPanel = new DropdownPanel('Return Value', {json: true})
   this.returnValuesPanel.data = {}
   _parent.event.register('indexChanged', this.returnValuesPanel, function (index) {
     var self = this