diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js index 87647d4529..d8ac14d057 100644 --- a/remix-debugger/src/ui/TreeView.js +++ b/remix-debugger/src/ui/TreeView.js @@ -74,30 +74,29 @@ class TreeView { } formatData (key, data, children, expand, keyPath) { + var self = this var li = yo`
  • ` - var label = yo`
    ${this.formatSelf(key, data, li)}
    ` - var renderedChildren = null - if (data.isNode || children.length) { - renderedChildren = yo`` - renderedChildren.style.display = this.nodeIsExpanded[keyPath] !== undefined ? (this.nodeIsExpanded[keyPath] ? 'block' : 'none') : (expand ? 'block' : 'none') - label.firstElementChild.className = renderedChildren.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down' - var self = this + var caret = yo`
    ` + var label = yo` +
    + ${caret} + ${self.formatSelf(key, data, li)} +
    ` + li.appendChild(label) + if (data.children) { + var isExpanded = self.nodeIsExpanded[keyPath] + var list = yo`` + list.style.display = isExpanded !== undefined ? (isExpanded ? 'block' : 'none') : (expand ? 'block' : 'none') + caret.className = list.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down' label.onclick = function () { - this.firstElementChild.className = this.firstElementChild.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right' - var list = this.parentElement.querySelector('ul') + caret.className = caret.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right' list.style.display = list.style.display === 'none' ? 'block' : 'none' self.nodeIsExpanded[keyPath] = list.style.display === 'block' - self.event.trigger('nodeClick', [keyPath, renderedChildren]) + self.event.trigger('nodeClick', [keyPath, list]) } + li.appendChild(list) } else { - label.firstElementChild.style.visibility = 'hidden' - label.onclick = () => { - this.event.trigger('leafClick', [keyPath, renderedChildren]) - } - } - li.appendChild(label) - if (renderedChildren) { - li.appendChild(renderedChildren) + caret.style.visibility = 'hidden' } return li }