August was a busy month. Tilt development was focused on finishing the user interface and adding an improved user experience. We also added more developer-oriented features and functionality.
The most interesting addition was the “minidom” — a tree view representation in the lower left, showing a minimalistic snapshot of the document object model of a webpage. Each node is assigned a color associated by tag name (blue for div, green for span etc.) and represented as a strip, along with visual markers for it’s id and/or class if available. Each one of these strips also has a width relative to the type, id and class name length for the respective element. The coloring for individual elements is easily changeable using a color picker.
Clicking a strip in the tree view (or directly a node on the 3D document visualization mesh) now also highlights the node with a colored quad. This behavior is a good way to relate with the Style Inspector, and a more unified interaction between them is planned in the future (along with other developer tools like Style Editor).
All of these additions make it easier to analyze the bounds of each node, along with the html, computed css and attributes (which are available in the popup panel editor).
A requested feature was the ability to export the visualization as a 3D mesh, to be used in games or other 3D editors. In version 0.82, Tilt adds the ability to export to .obj, along with a material .mtl file and a .png texture. The .obj open format ensures the fact that the mesh can be opened with almost any editor, from Blender to Maya. Here’s a ray-traced rendering of hacks.mozilla.org in Blender:
The exported .png can also be used to create full screenshots of webpages, as it saves the visible part of a document along with it’s “offscreen” elements.
The three months dedicated to developing Tilt in the Google Summer of Code timeframe have finished, but that doesn’t mean an ending for improving this extension. It’s worth mentioning that version 0.82 of Tilt is now waiting approval to be public in addons.mozilla.org and a great thing to know that, already, even though Tilt isn’t public yet, there are already over 8,000 users.
Implementing more and more features is a sure thing in the near future. The nearest milestone (0.9) will add enhancements like: highlighting and scrolling a selected element in the “minidom”, making a selected strip center/zoom the node stack in the visualization, adding controls to move up/down the dom tree in the editor panel popup, and adding more functionality for the user interface. See all the TODOs and the planned features for more details. You can try some of these additions in the beta from the r90 branch on github.