Layer displayer

October 30, 2011 11:39 AM

Tilt is a Firefox add-on that lets you visualize a web page's DOM (document object model) in 3D. In effect, you can see all the layers in a web page stacked upon each other with this.

Here's the MetaFilter FP in 3D. Gmail looks like some kind of Minecraft thing.

posted by ignignokt (53 comments total)

> In version 0.82, Tilt adds the ability to export to .obj, along with a material .mtl file and a .png texture.

Okay. That's going to help make really weird things.
posted by ardgedee at 12:22 PM on October 30, 2011 [1 favorite]

This is really cool :)
posted by carter at 12:33 PM on October 30, 2011

Awesome!

_{but does it export to vrml?}
posted by codacorolla at 12:41 PM on October 30, 2011 [4 favorites]

Sweet! Thanks for sharing this!
posted by wiskunde at 12:49 PM on October 30, 2011

This is great, thanks!
posted by clearlydemon at 12:49 PM on October 30, 2011

Very cool looking, but, does it serve any purpose. Can any useful information be gleaned from its pretty pictures?
posted by Windopaene at 12:51 PM on October 30, 2011

It does serve a purpose -- it improves visualization of the "layers" of rendering that go into producing the web page you're looking at. This can be useful for web designers and developers.
posted by sonic meat machine at 12:54 PM on October 30, 2011 [1 favorite]

Very cool looking, but, does it serve any purpose. Can any useful information be gleaned from its pretty pictures?


Yes, if you are inspecting a new site, it gives good starting points.

I think it's would be a great teaching tool.
posted by KaizenSoze at 12:55 PM on October 30, 2011

does it serve any purpose

Well I can use it to teach students how web pages are 'built.'
posted by carter at 1:01 PM on October 30, 2011 [3 favorites]

On preview etc etc.

It's useful for example for showing examples of bad design (e.g. msnbc.com 'below the fold').
posted by carter at 1:02 PM on October 30, 2011

Alas, doesn't work on my system under Firefox 8. (If it works and is installed, Ctrl-Shift-M is supposed to activate it.)
posted by JHarris at 1:04 PM on October 30, 2011

If the code which generates the page is properly formatted and indented you can get much of the same result simply by inspecting the source. The further indented the code, the higher the elevation on the 3d representation.
posted by Justinian at 1:04 PM on October 30, 2011

I agree - but this is a visual synopsis of what could be pages of code.
posted by carter at 1:13 PM on October 30, 2011 [2 favorites]

codacorolla: "Awesome!

_{but does it export to vrml?}"

don't make mark pesce cry like that.
posted by symbioid at 1:15 PM on October 30, 2011

doesn't work on my system under Firefox 8. (If it works and is installed, Ctrl-Shift-M is supposed to activate it.)

Ctrl-Shift-M merges windows if you have Tab Mix Plus installed. Maybe you're getting interference there.
posted by twoleftfeet at 1:58 PM on October 30, 2011

Firefox eight?!
posted by kenko at 2:12 PM on October 30, 2011 [3 favorites]

JHarris: It worked on Firefox 7.01 on Mac for me. Maybe it has trouble with beta versions?
posted by ignignokt at 2:40 PM on October 30, 2011

The further indented the code, the higher the elevation on the 3d representation.

So, then, would one of those websites where the dev was a real smartass and simply wrote it all out on a single line or two look, essentially, flat?
posted by Thorzdad at 2:44 PM on October 30, 2011

If the entire site just a line of plaintext with no HTML, yeah. If you're talking about the HTML itself having all newlines removed so that "view source" is a single line, then no. That has nothing to do with the structure of the page, since the hierarchy of elements isn't dependent on the keyed-in formatting of the source code.
posted by rhizome at 2:48 PM on October 30, 2011

I think the height hierarchy in the vizualization may be built partly on parsing the tags.

So (html - /html) (angle brackets omitted) sits underneath (head - /head) and (body - /body), which sit underneath divs, which sit underneath divs within divs, (or tables, tr and td tags etc.) and so on.

If a one line HTML source code contained the tags, then these would still be interpreted in terms of height.
posted by carter at 3:05 PM on October 30, 2011

carter, it says in the FPP what it's built on – the DOM is precisely the hierarchy of elements built by parsing the tags.
posted by nicwolff at 3:10 PM on October 30, 2011

Very cool.

Another neat Firefox add-on that's currently in development: pdf.js allows in-browser rendering of PDFs without an Adobe plugin.

It also doesn't respect any of the copy-protection flags like "don't print" and "don't save" for what it's worth - so grab a copy now and stick it somewhere safe. It's much easier than custom-compiling xpdf with the flags off.
posted by odinsdream at 3:11 PM on October 30, 2011 [6 favorites]

Interesting. I'm going to have to see if it has practical applications. I suspect the stuff I work on is going to look more like GMail than MeFi though.
posted by Artw at 3:25 PM on October 30, 2011

I downgraded to Firefox 7.0.1 (which I had been meaning to do for a while), and Tilt still won't work. It is odd.
posted by JHarris at 3:45 PM on October 30, 2011

Can't wait for them to catch up with other browsers in terms of version numbers so they can slow the fuck down with the silly versions and stop breaking plugins all the time.
posted by Artw at 3:49 PM on October 30, 2011 [3 favorites]

Interesting, but until it actually builds off of the DOM structure (rather than the developer tabbing) it isn't going to be particularly useful, except as a teaching aid used with perfectly-tabbed stuff.

I know you're thinking "but it isn't hard to tab stuff correctly" but tell that to the Java developers whose HTML code I have to troubleshoot.
posted by davejay at 4:40 PM on October 30, 2011

Is that what it's doing? Then it's way less useful, practically useless.
posted by Artw at 4:43 PM on October 30, 2011

It's not. It's using the DOM as far as I can tell.
posted by ymgve at 4:47 PM on October 30, 2011

the DOM is precisely the hierarchy of elements built by parsing the tags.

Ah thanks. Didn't realize that. Anyway, this is the most fun I've had with web sites for a long time.
posted by carter at 4:49 PM on October 30, 2011

That would be more useful. Probably easier to do as well - parsing the spaces in raggedy HTML source would be a nightmare.
posted by Artw at 4:49 PM on October 30, 2011

I have Firefox version 4. Do I need to upgrade for this?
posted by zardoz at 4:59 PM on October 30, 2011

zardoz... you need version 7.01 for the many security fixes that have come down the pipe. Crazy version numbers non-withstanding.
posted by PROD_TPSL at 5:42 PM on October 30, 2011 [1 favorite]

Can't wait for them to catch up with other browsers in terms of version numbers so they can slow the fuck down with the silly versions and stop breaking plugins all the time.

They should sniff for features rather than version numbers.
posted by ryoshu at 7:15 PM on October 30, 2011

Am I the only one who is thinking values of b will give rise to dom! ... ?
posted by zomg at 8:15 PM on October 30, 2011

Firefox eight?!

They changed their version numbering to keep up with Chrome (now on v15 or something) But the numbering is pretty ridiculous.

And yes, this is useful if you're a web designer, Even for your own pages. Sometimes it's hard to tell what div's in what and with this it can be helpful. Actually I've always kind of wanted a tool like this.
posted by delmoi at 9:03 PM on October 30, 2011

Can't wait for them to catch up with other browsers in terms of version numbers so they can slow the fuck down with the silly versions and stop breaking plugins all the time.

I work at Mozilla, but not directly on Firefox.

There are a number of reasons why Mozilla moved to a 6-week cycle for Firefox releases, but the main reason is that one release a year was just not often enough to get new features to users quickly. It's not just about 'keeping up with Chrome' so much as it is about features that were sitting in Beta versions for half-a-year or more when they could have been in use by users much sooner.

For the vast majority of Addons for Firefox, developers can use the new Addons SDK and Builder which ensures that the Addon can be installed without a browser restart AND does not need to be modified for each new release.

Some Addon functionality goes beyond what the Addons SDK and Builder provide (Tilt may be one example, actually) then the Addon does need to be revised for each new release. That being said, for those Addons hosted at Mozilla, Mozilla provides an automated version update for the Addons who require it. Only Addons not hosted at Mozilla require the developer to revise them for each new Firefox release.
posted by gen at 9:08 PM on October 30, 2011 [1 favorite]

There have always been a ton of toold for outlining divs and inspecting elements and so on... I used to use various favelets/bookmarklets to add borders back in the bad old days when layout was very table based and likely to get deep. TBH I don't tend to use much more than Firebug these days, and if I really want to add the funky outlines I do it from the console.

Still, I'll probably give this a try.
posted by Artw at 9:13 PM on October 30, 2011

There are a number of reasons why Mozilla moved to a 6-week cycle for Firefox releases, but the main reason is that one release a year was just not often enough to get new features to users quickly. It's not just about 'keeping up with Chrome' so much as it is about features that were sitting in Beta versions for half-a-year or more when they could have been in use by users much sooner.

Well that's all very well in theory, but in practice Mozilla now releases a browser with incremental changes every six weeks then issues a press release expecting a hand-job for it, and it occasioanlly breaks things. And people have kind of caught on. It's incredibly tedious - you need to either go back to real version numbers or make each update a smooth nonevent, like it is with Chrome.

Also whoever at the company who prioritised various flashy but generally unused HTML5 features over fixing the memory and performance issues needs holding down and slapping repeatedly.
posted by Artw at 9:19 PM on October 30, 2011 [1 favorite]

There have always been a ton of toold for outlining divs and inspecting elements and so on

I know, but how many of them let you do 3D fly-throughs ...?
posted by carter at 9:26 PM on October 30, 2011

I can add bevels!
posted by Artw at 9:28 PM on October 30, 2011

Works fine for me in Firefox 8. I don't know what is "crazy" about version numbers, we've had them for years.
posted by juiceCake at 9:38 PM on October 30, 2011

There are a number of reasons why Mozilla moved to a 6-week cycle for Firefox releases, but the main reason is that one release a year was just not often enough to get new features to users quickly. It's not just about 'keeping up with Chrome' so much as it is about features that were sitting in Beta versions for half-a-year or more when they could have been in use by users much sooner.

Uh, sure... but you could have called those browsers 4.1, 4.2, 4.3 and so on. For a major version number update you expect a UI refresh. I mean, Linux Kernel 2.0 came out in June of 1996, and 3.0 came out July 2011. I'm sure plenty of features were added during that time period.

Also whoever at the company who prioritised various flashy but generally unused HTML5 features over fixing the memory and performance issues needs holding down and slapping repeatedly.

Well, the features are unused because not all the browsers support them. I'm all for full HTML5 implementation. Including the range input type which FF doesn't seem to support for some reason.
posted by delmoi at 9:42 PM on October 30, 2011

It's incredibly tedious - you need to either go back to real version numbers or make each update a smooth nonevent, like it is with Chrome.

We agree. Update fatigue is a real concern for us. We're working on silent updates and hope to have it in Firefox in early 2012.

Also whoever at the company who prioritised various flashy but generally unused HTML5 features over fixing the memory and performance issues needs holding down and slapping repeatedly.

We need to provide both new support for HTML5 (and related) functionality that isn't yet available, as well as make Firefox lighter and faster at the same time. Nick Nethercote, who helps manage the memshrink project for Firefox, is showing that we're making real, concrete progress with memory management as well as with JavaScript performance. Performance overall (including startup performance, UI/ front end responsiveness, as well as the impact that Addons have to Firefox's performance) is a big effort for us.

If you saw the news about the in-browser h.264 video decoder that is in development, you'll note that Firefox Nightly is 2X faster than Chrome for this right now. So we know we're doing something right. We've got lots more to do and we'd appreciate your feedback along the way.
posted by gen at 9:49 PM on October 30, 2011 [5 favorites]

delmoi, I'll check into that bug to see what the issue is.
posted by gen at 9:51 PM on October 30, 2011

So here's a movie of an amazon.com page giving a fair impression of an Imperial Battleship. It's a bit herky-jerky but running Tilt and recording the screen max'd out both my processors.
posted by carter at 9:51 PM on October 30, 2011 [4 favorites]

delmoi: "I mean, Linux Kernel 2.0 came out in June of 1996, and 3.0 came out July 2011."

That may be the case, but the decision to move from 2.6 to 3.0 was still largely arbitrary.
posted by brokkr at 5:21 AM on October 31, 2011

This is exactly what I needed this past Friday afternoon. Saved for future reference. Thanks.
posted by howling fantods at 10:28 AM on October 31, 2011

Ooh. Trying it on the site I'm working on now actually looks pretty good in this, despite multiple levels of templates.
posted by Artw at 10:41 AM on October 31, 2011

That may be the case, but the decision to move from 2.6 to 3.0 was still largely arbitrary.

Right, which actually makes my point stronger, but was too complicated to explain.
posted by delmoi at 12:11 PM on October 31, 2011

One thing I've noticed: Overflow:auto gets handled very weirdly.
posted by Artw at 1:33 PM on October 31, 2011

Has anyone else noticed that shadowed text is all wrong in chrome now? It seems like they're trying to do sub-pixel rendering on the text but not the shadows.
posted by delmoi at 7:25 PM on October 31, 2011

> We're working on silent updates and hope to have it in Firefox in early 2012.

I've got more versions of Firefox running concurrently than I do of Internet Explorer, all because of the extensive version compatibility testing I've got to do for my clients' websites; At one time I only had to test on 2, 3.5 and 3.6; now I've got to keep copies of 3.6, 4, 5, 6, 7, and the 8 beta available for feature testing.

By contrast, I only have to test IE 6, 7, 8, and 9, and even in most of the corporate community IE 6 is effectively a wash at this point.

Silent updates are good in a way -- I can tell clients we support the latest version of Chrome and Safari, whatever they are, and leave it at that -- but Chrome and Safari are less popular than Firefox and IE (on my clients' sites; I can't speak for the web at large), and it's easier to write off small feature losses there as graceful degradation rather than bugs. Firefox has a sufficiently large userbase in corporate settings where upgrades are locked down until IT vets them that I can't count on users upgrading concurrently, or upgrading from a given version at all.

So I want to take hope in your remark, but I'm also afraid of this indicating the real hurt is yet to come.
posted by ardgedee at 7:48 PM on October 31, 2011

delmoi: Right, which actually makes my point stronger, but was too complicated to explain.

... and the margin: 1px; is too small to contain your proof.
posted by brokkr at 12:58 PM on November 2, 2011