About this time last year, I introduced a tree views module to my Verbosio XML editing project, which I’m still building infrastructure for. One piece of that infrastructure uses the TreeViews module, and adapts it for simple sequences of objects in a common format. Event logs were the use-case for this.
(This is currently independent of Mozilla Firefox’s own Log.jsm support, which is pretty nice itself!)
Let’s say you have a simple array of simple objects. They all have a certain minimal set of properties. If you want to visualize these objects laid out in a table, then each row can represent an object, and each column a property of the object. XUL trees can build this table-like view, but they need some help. First, they need a tree view that supports objects of the same basic type (TreeViews.jsm). Second, they need to be built with the columns you want.
FastEventLog.jsm does this. There’s two methods: addPropertyColumn() and appendTree(). The first takes a property name, a label, the column width, and a couple other optional details. The second method takes a box to hold the XUL tree element, a specialized “id prefix”, a tree height, and the array of objects you want to show to the user.
If you have two separate arrays with the same structure, you can call appendTree twice. (Think expected results versus actual results.)
When working on my asynchronous transaction manager idea (more on that in a future post), I realized I couldn’t easily visualize what had happened. The Firefox devtools debugger is awesome, especially with Thunderbird’s Remote Developer Tools Server extension. But the debugger’s JavaScript object tree showed arrays of objects in an ordinary key: value hierarchy. The data I wanted was buried very deep, and impractical to really analyze. So I built FastEventLog.jsm and a helper XUL file to turn the tree branches I needed into XUL trees.
The above is a screenshot with a bug deliberately introduced into the underlying transactions test to show what FastEventLog and TreeObjectModel (from TreeViews.jsm) can produce. This little table view made diagnosing bugs in the async transaction manager very easy!
As usual, this FastEventLog.jsm is available under MPL / GPL / LGPL tri-license.