Visualization of the DOM tree in 3D (Firefox extension)



    The Tilt extension for Firefox builds a three-dimensional model of the current web page, using WebGL for fast rendering. Thus, you can instantly analyze the page structure and the relationship between different parts.

    As you know, using the Document Object Model (DOM), any HTML document can be represented as a tree of nodes, each node of which is an element, attribute, text, graphic, or other object. This extension builds such a tree, superimposing on it a texture of text and graphics that are located in the corresponding nodes of the tree.

    As shown in the video, in addition to the usual visualization, the plugin displays, with a right-click, various information about each node type, id, class or other attributes).



    The authors of the extension are Victor Porof (main part), Cedric Vivier (rendering DOM elements in the form of WebGL textures, equivalent to canvas.drawWindow, see bug No. 653656 ) and Rob Campbell (author of the idea).

    Source code on guthub Developer
    Blog
    Last stable build: tilt.xpi

    After installing the extension, it is launched by pressing Ctrl + Shift + L (or Cmd + Shift + L on the poppy) or by selecting the corresponding menu item in the browser, exit - by pressing Esc. The extension works on any page.

    In the future, developers plan to add new features, including updating and updating the 3D model on the fly (as soon as the page changes, CSS transformation for each node is initiated; plus setting up the display of elements, including transparency and relative position of 3D nodes); rendering not only the whole page, but the individual parts using z-index; creation of tools more convenient for the web developer; better integration with the Ace editor and Firefox Developer Tools (highlighting the currently selected node, instant 3D preview), exporting 3D graphics to other browsers or applications (via a file with 3D objects, probably .obj and / or COLLADA).

    The biggest breakthrough will be the possibility of 3D-surfing between pages, as in normal 2D-mode.

    For a complete list of plans to improve the extension, see the TODO.md list .

    Also popular now: