MarionetteLabs/marionette.inspector — pull request #52 by jasonLaster (2014-11-13 16:03:50+00:00)
Title: Replace the UI view tree

This is a fairly hefty PR to replace the existing UI tree.

![](http://f.cl.ly/items/033q011140281K3N333J/Image%202014-11-13%20at%2010.58.25%20AM.png)

The main motivation was that the old UI tree was rendered as a table and turned into a tree via a jquery library `tree-grid`. This approach was good to prove the concept, but would not work for long. A) it was terribly slow. B) it didn't let us do search features like scroll into view or maintain collapse/expand states when the tree would re-render

The new UI tree is built with a small tree component that I wrote in isolation that uses a recursive `CompositeView` for the UI. There's also a new Tree Node model that handles maintaining a collection of child nodes and updating the tree when it receives a json blob. This second part is important because we get the UI tree as a json blob from the agent:

```json
{
name: app,
cid: -1,
nodes: [
{name: 'header', cid: 'view12', nodes: []},
{name: 'main', cid: 'view14', nodes: []}
{name: 'footer', cid: 'view15', nodes: []}
]
}
```