Visualizing the DOM nodes depth and coordinates

The most important part of Tilt was actually visualizing the DOM nodes depth and coordinates in 3D manner, by positioning them relative to parent offsets and sizing them based on the client width and height dimensions. This is exactly what’s been implemented in the past week, so let’s take a look.

This is an idea of the direction in which Tilt should evolve, as seen on the wiki page:

Tilt mockupFrom the start, the general concept was that “Tilt allows a person to instantly see the relationship between various parts of a web-page and their ancestors in a fun and graphical way”. As you can see, by layering the DOM nodes based on the depth as stacks, positioning and even texturing them accordingly makes a very interesting web-page inspector. These “layers could be built from DIVs, ULs or any containing node with children” and also “elements with absolute position or floats”.

Therefore, two main challenges arise so let’s analyze each problem and find the solution.

  1. Acquiring the texture of the webpage
  2. Traversing the DOM to create the visualization mesh

To get the texture of the webpage, until a WebGL extension will be created to access the actual pixels and share memory with the renderer, a shim could be implemented in Javascript to simulate this behavior. This is easily done using the canvas.drawWindow() method, as explained in the “Drawing graphics with canvas” article on the MDC docs. For security reasons, this API cannot currently be used by Web content. It is chrome only. Long story short, this is the implementation (for more code, see jTiltUtils.js and jTiltExtensions.js on github):

The second challenge was traversing a document object model and building the visualization mesh from it. This is done quite easily using a recursive function and harnessing the Javascript beauty of lambda functions. Starting from the top node, traverse each of the children and call a function:

Quite elegant. Moreover, the get the coordinates (x, y, width and height) for each node, we make use of the offsetParent, offsetTop, offsetLeft and clientWidth & clientHeight properties:

If you want to see more details on how the visualization mesh with each stack shape is build and how the texture coordinates are calculated, check out the jTiltVisualization.js file. Here’s a quick look on how things look for now:

Note that a single mesh is created! Drawing chunks of 3D models, each one with it’s own texture (for example) would be highly inefficient, thus some clever optimizations are done here. An entire object, built of triangles is computed, without duplicating any vertex or corner (by using index buffers), and a single texture is applied to the entire mesh, by computing the u, v coordinates relative to the width and height of the DOM texture.

The following videos are a proof of concept of visualizing the DOM nodes depth and coordinates. The only thing remaining to do now is make the extension usable, ergonomic and fun. But you can check it out now!

Having fun with DOM nodes and effects, and applying the document texture:

Tags: , , , , , , , , ,

2 comments

  1. So cool to see this tool alive, in the field!! I have had exactly the same idea in my head and actually did my Msc thesis on the subject. I didn’t have the time to develop my idea any further out of the conceptual stage I left it at in December, 2010. So, I am really excited to see that somebody actually did do it! It offers so many possibilities to web developers, I’ll be following this project with great interest!

    If you’d like to check my thesis for some thoughts on the subject, check it out here: http://bit.ly/domscape. A video of my thesis concept here: http://vimeo.com/18895373

    Best regards,
    Eelke Boezeman

  2. Would be really neat to have this combined with the Gecko Reflow visualizer somehow http://blog.mozilla.org/gen/2009/04/09/how-to-make-your-own-gecko-reflow-video/