LWN.net Logo

Tilt: 3D web page visualization

From hacks.mozilla.org comes Tilt, a Firefox extension which creates a 3D display of a pages document object model. "Unlike other developer tools or inspectors, Tilt allows for instant analysis of the relationship between various parts of a webpage in a graphical way, but also making it easy for someone to see obscured or out-of-page elements. Moreover, besides the 3D stacks, various information is available on request, regarding each node's type, id, class, or other attributes if available, providing a way to inspect (and edit) the inner HTML and other properties." There's a video available for those who want to see the eye candy in action without actually installing the extension.
(Log in to post comments)

Tilt: 3D web page visualization

Posted Jul 20, 2011 19:39 UTC (Wed) by JohnLenz (subscriber, #42089) [Link]

This would be especially nice to use with selenium, since with selenium you are always trying to select nodes to test but the mouse click always uses the top element. You could rotate the page sideways like in the video, and if the sides had the name of the tag, you could easily select the div containing a bunch of stuff into the selenium IDE.

Tilt: 3D web page visualization

Posted Jul 20, 2011 20:58 UTC (Wed) by zlynx (subscriber, #2285) [Link]

I just tried it with the Aurora version running on Win7. It didn't work, just made the tab freeze up.

Maybe it needs to be on version 5.0 instead of 7.?

Tilt: 3D web page visualization

Posted Jul 20, 2011 21:18 UTC (Wed) by cruff (subscriber, #7201) [Link]

Didn't work for me either running 5.0.

Tilt: 3D web page visualization

Posted Jul 20, 2011 21:53 UTC (Wed) by imphil (guest, #62487) [Link]

It works for me with Linux, the latest binary Nvidia driver and a current Firefox nightly. Make sure that WebGL is working by going to about:support and look there at the bottom of the page if WebGL is enabled.

After pressing CTRL-SHIFT-L it takes a couple seconds until the output appears here.

Tilt: 3D web page visualization

Posted Jul 21, 2011 1:06 UTC (Thu) by mgedmin (subscriber, #34497) [Link]

Does not work for me on Linux with Firefox 5.0 and Intel video (with working 3D). about:support doesn't mention WebGL at all.

Tilt: 3D web page visualization

Posted Jul 21, 2011 3:52 UTC (Thu) by kripkenstein (subscriber, #43281) [Link]

Do other WebGL demos work? Last I heard Intel drivers were still problematic.

You can try to change webgl.force-enabled to true and webgl.disabled to false in about:config, but that could lead to a lot of instability.

Tilt: 3D web page visualization

Posted Jul 21, 2011 6:42 UTC (Thu) by chax (guest, #52122) [Link]

Works for me on Firefox 4.0.1 on nVidia proprietary (Firefox supports WebGL since 3.6 or even earlier).

Tilt: 3D web page visualization

Posted Jul 21, 2011 23:44 UTC (Thu) by bjacob (subscriber, #58566) [Link]

As other posters mentioned, the main reason why Tilt might not work is if you're not getting WebGL. On Linux, I strongly suggest using Firefox 6 or newer; and if it's still not working, go to about:config and set webgl.force-enabled. As of Firefox 7, all recent stable Linux 3D drivers/systems are enabled by default. By "recent" I mean Mesa 7.10 or newer, for Mesa-based drivers. See:
https://wiki.mozilla.org/index.php?title=Blocklisting/Blo...

Tilt: 3D web page visualization

Posted Jul 21, 2011 14:54 UTC (Thu) by jhardin (guest, #3297) [Link]

I would love to see it run against a page generated from Microsoft Word using a document that had been edited for a long time by someone who doesn't grok styles. That would probably be freakin' hilarious.

Copyright © 2011, Eklektix, Inc.
Comments and public postings are copyrighted by their creators.
Linux is a registered trademark of Linus Torvalds