27
Jul 11

Progress

Tilt is getting closer and closer to a beta development stage, let’s see what’s been going on.

The most important added feature is the html preview window, currently using the Cloud9 source code editor Ace. Each time a node is double clicked, a popup panel shows up, displaying the formatted, syntax colored inner html for that particular node, along with the class and id if available. Since it would have been a tremendous work to implement a rich text edit box in WebGL, the easiest hack was to use an iframe containing a simple html document embedding the Ace editor.

This simple page is contained in an iframe defined in xul, inside a panel. On a double click event, all we needed to do was to get the iframe content document, access the <pre> editor element by id, set its inner html to the corresponding inner html of the selected node, then call a function to format and highlight the text. It’s really easy to implement such panels in Firefox, as ‘openPopup()’ and ‘closePopup()’ functions do all the heavy lifting.

The xul responsible with the iframe:

This isn’t, however, all the planned functionality for the html panel. A great and useful feature would be to actually edit and update the webpage rendering in real time as the code changes, and this is planned to be implemented in the following months. This behavior can lead to interesting functionality, and combining it with the Style Editor and Style Inspector would make a nice development/debugging environment. Thus, the next best move is to replace the Ace editor with the Orion Code Editor, actively developed in the devtools area.

To achieve this functionality, an optimized equivalent of canvas.drawWindow is needed, to minimize memory usage and seamlessly update the visualization as the DOM and style changes. A lot of progress has been done with #653656, and the first Javascript shim implementation is available. Once the specifications are consolidated and agreed upon, the MOZ_window_region_texture WebGL extension will be implemented in Tilt.

The way rendering webpages is done has changed quite a bit in the past months. The first experiments were focused on a more translucent visualization and now, all the nodes are rendered opaque. The community feedback has been great in both cases, so the best idea is to keep both rendering methods, and also adding customization functionality. The best way to achieve this is to implement a simple UI with sliders and other elements controlling hue, saturation, brightness, contrast and render mode (wireframe or opaque) for the visualization. Thus, transitioning between multiple ways of visualizing the webpage can be done seamlessly, and fine tuned values can be perfect for different goals.

The current GUI is a work in progress implementation in WebGL, as it would have been too much of a performance hit to implement simple sliders and buttons in XUL. The first mockups for the user interface have been finished:

A couple of other things are planned for the user interface, the most important ones being:

  • zoom and rotation sliders (+ auto rotation)
  • customizable thickness and spacing between nodes
  • preview pane in the lower right (showing the visible area of the webpage, like a map)
  • DOM tree structure in the lower left (along with a search field, go-to-node functionality)
  • reset, zoom in, zoom out buttons
  • menu in the upper right (including the export button)

For now, the major focus is implementing all of the UI functionality, to make Tilt more useful and friendly for debuggers both from the HTML and CSS world. It’s been quite a tremendous effort to create a special UI library and event modules in WebGL, but now that most of the elements have been finished, implementing the actual UI should be the next step.

As a final note, Tilt has been released as an alpha preview last week on hacks.mozilla.org, receiving a lot of feedback from the community. Most of the suggestions will make it into Tilt in the near future, the most interesting ones being:

  • exporting the visualization to different formats (especially 3D models – COLLADA, .OBJ), feature which would add a lot of possibilities like importing into games; the visualization will also be exported to other WebGL supporting browsers
  • modifying and updating the 3D webpage mesh on the fly (as the webpage changes, exposing CSS transforms for each node), meaning that interactive movies, animations and even “DOM art” can be done using Tilt (see this video, creating a 3D Reddit logo).
  • adding a zoom control which isolates a DOM node and it’s children only
  • display useful information on the sides of the nodes too (also a color code to make the most common html elements appear clearly)
  • implement CSS editing functionality, along with the HTML editor panel
  • using head tracking from a webcam to modify the perspective of a webpage

 


13
Jun 11

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: