Firefox 3D view | Hacker News Reader

Firefox 3D view

developer.mozilla.org

130 pointsarunabh40 comments

Here's the blog post in which I introduced the feature...

http://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-dev...

The 3D view is not "every day" useful, but people have found it to be a quick way to spot unexpected nesting issues.

As noted elsewhere, this feature started life as an add-on made during Google Summer of Code 2011 by Victor Porof, who continues to work on Firefox developer tools today.

(in case you hadn't guessed, I work for Mozilla... usual biases therefore apply ;)

It's apparently very useful for discovering some nasty XSS bugs. I think eventually, this might be one of the "last stops" in testing new front-end designs; a staple, but not something you need to be switching into every five minutes (unless there's something to be fixed.)

Very jealous of this as a Chrome user. :) Good job guys.

It was the most awesome thing in my talk at HOPE Number 9 about using browser tools to figure out what sites are doing. I compared it with the scene in Jurassic Park where the girl "knows Unix".

2010:

"Check out this site. Design is awesome."

"Yeah but did you view source? Terrible semantics and inline css."

2012:

"Check out this site. Design is awesome."

"Yeah but did use 3D View? The element stacking is terrible. Doesn't have those nice symmetrical pyramids you like to see."

I am a bit baffled by the switch from your 2010 scenario myself. Many people were obsessed with semantic markup, but now things like bootstrap.css come along that clearly violate that idea and I don't hear a peep about it.

Some people reconcile it by saying bootstrap is (as the name implies) just for getting things up and running and once your site is stable you should switch to better markup. But I don't think anyone actually does that.

This post has a nice writeup on how this 3D view helped find an XSS vulnerability in a webapp: http://drewgoodwin.com/posts/2012/07/17/firefox-3d-view-help...

Cool. To see it, turn on inspector (right-click page, inspect element) and on the info bar at the bottom is a "3D View" button. Try both mouse buttons and the mouse wheel.

Too bad they didn't put some inertia in it, it would be fun to flick around the webpage.

"This content covers features introduced in Firefox 11"

We're now on Firefox 14. It's reasonably old.

It has been out for awhile, but it seems like a lot of people weren't aware of the feature. One additional usage - introduce non-programmers/web designers to what is really behind what they see on a webpage. Most people find the 3D view pretty cool, no matter if they're a technical person or not. It's also been great to see the FF developer tools improve so much recently.

Of course, Firefox 11 was less than 6 months ago.

It was an add-on ("Tilt" iirc) before that too.

In a similar spirit, I wrote a crumpled paper web browser around an IE instance in WPF once: http://blogs.msdn.com/b/sean_mcdirmid/archive/2009/07/27/a-w...

Not very useful, but a cool effect. Life is much better when we can host web browser instances as textures. Geometry (as in this case) would allow for even better effects; I feel bad that I never thought of that!

It's been around as an addon for a while, I think it was put into FF at version 11 (March 2012). I really think it should have remained as an extension, it looks neat but is pretty useless.

It's not entirely useless: I think it at least could be used to provide beginners with some feeling/visualisation for how layout of a webpage works.

I opened a long page, tilted a little, reached the end, and pressed the down button to scroll the page up. Heavens! It's like watching the first scene of Star Wars.

"Use cases ... it looks awesome". Heh.

There's another thread on HN that shows it can be used to spot XSS vulnerabilities.

It also makes pages with a billion wrapper divs look much thicker! Therefore I use it to get an impression of the weight/awkwardness of the DOM of a page.

finally, you can see what's behind each website!

http://i.imgur.com/PiNtn.png

I actually toyed around with this when it was first announced, sometimes the results are quite unique.

Check out this screenshot from cityofchicago.org, the 3D DOM looks strikingly similar to the Willis (Sears) Tower...

http://i.imgur.com/udact.png

[edit] Looking back, it's just the "G+" feature on any page...

Nice feature but poor UI (controls) for me. Zoom (mousewheel) and rotate (left click) should take place around the cursor (or the 3d space it is currently hovering over) rather than the centre of the screen. Makes things much easier for the user (especially the power-user, who this is aimed at and can spare the 30-seconds to figure out how it works).

As an extra, clicking the mousewheel down should allow you to 'pan' (rather than 'rotate' on mouse1)...

Would make things much nicer...

A click, rather than the mouse pointer, is useful for setting the center of rotation in 3d views...I prefer middle button (scroll wheel) click.

this has been around for a while now...

I was all ready to say "What the hell are people still talking about 3D web browsers for?", but that's actually kind of neat.

Go to facebook page and try it. It is almost like Manhattan in 3d

i use something similar for WPF called Snoop. these types of things are also useful when you're trying to see the complexity or optimize the nesting levels of your controls.

If I had a fast enough machine, I'd like to capture some zooming, panning and rotating of my SVG based application for a schnazzy eye-candy video.

Oddly enough, I've actually used this exactly once. If you've got phantom elements sitting over something it can be quite useful to visualize them

Are you still able to interact with the document whilst in 3d mode? e.g. test jQuery animations, etc (unfortunately can't try it myself)

You cannot, unfortunately. I tried simply animating some elements with .animate, and it did not work.

As someone who teaches intro to HTML classes, 3D view is a cool way to explain divs, spans, etc.

Does anyone know if Chrome are planning to follow suit?

http://www.google.com/intl/en/landing/chrome/cadie/

can someone tell me how to get this to actually work? I'm on firefox 15 and I don't see this feature?

You have to open the inspector first (Ctrl+Shift+I or Firefox->Web Developer->Inspector), and then click the "3D" button on the bottom left (or bottom right if you're on some beta/nightlies).

Unfortunately it requires webgl which I don't have on any pc. I couldn't find any easy way to install it.

Check `about:support` and see if webgl was disabled because of the driver version. That might be it.

it's not new? that's why i'm using firefox as a developer. It is awesome!

Utterly useless.

old news

still, pretty cool

Reply on news.ycombinator.com