slayeroffice - web experiments gone horribly awry

05.07.2004 - Document Tree Chart Favelet

This past week I had the opportunity to sit in on a Web Standards presentation with Eric Meyer and Molly Holzschlag, hosted by an organization within my company with about 20 times more developers than my own. Thanks go to Kimberly for the invitation.

During the presentation, Eric showed a chart representing the Document Tree, which looked something like this:

He then lamented that there was nothing around that could create this sort of thing for you. This of course caused me to stop paying attention to everything he was saying (no fault of his presentation...I'm easily distracted) to think on a way of doing it. I then started messing around with writing it, but then Molly yelled at me for typing and not paying attention.

Ok...she didn't actually yell and it wasn't directed at me specifically, but all the same I had to wait until I got home to work on it.

It turned out to be a bit more complicated than I expected it would be, but I ended up hitting on a good way to go about it and what I consider a fair way to display the information given the limitations of the medium and the vast differences in markup around the web. Here's what it looks like:

As you can see, it shows a reasonably intuitive layout of the document, with the HTML element first, with two labels for the HEAD and BODY as children of that label, and so on and so forth throughout. You end up with a sort of inverted city skyline which happens to be particularly interesting, visually speaking, on sites using table based layouts.

A few notes:

• Fark.com caused Firefox to lock up on me when I invoked it there...I suspect the lengthy table, so be aware that a site with a good deal of nested markup may cause you problems.
• Depending on the amount of markup, it may take a little bit to render the chart. The more markup, the longer it takes...around 4 seconds for me on this site using Firefox 0.8.
• While the code has been built with MSIE6 in mind, it will return immediately when invoked until I work out some rather severe bugs.

One other interesting thing of note - to accomplish this, I used object references as the indexes in my span object array. Mozilla & Firefox had no issues with that whatsoever, but MSIE6 saw the [object] as a literal string and not as a unique identifier. Meaning, Firefox saw this:

p[[object HTMLImageElement]];

which evaluates to a unique reference to a unique object, while MSIE saw this:

p["[object]"];

So every time a new element was encountered by MSIE, it would simply append it to the previous sibling, rather than the correct object who's index was its parent node. I ended up using MSIE's proprietary uniqueID attribute (the first time ever) to get around this, but there are still problems.

Finally, the link:
Document Tree Chart

This is also available through the Favelet Suite.

Comments

Comments have been closed for this post.