7 ms·

Firefox 3D view

130 points by arunabh 14y ago

bprater 14y ago
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.
itsbits 14y ago
this has been around for a while now...
johnny_reilly 14y ago
Does anyone know if Chrome are planning to follow suit?
- arunabh 14y ago
  http://www.google.com/intl/en/landing/chrome/cadie/ http://www.google.com/intl/en/landing/chrome/cadie/
zarify 14y ago
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.
AshleysBrain 14y ago
"Use cases ... it looks awesome". Heh.
- thinkingisfun 14y ago
  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.
- sergiotapia 14y ago
  There's another thread on HN that shows it can be used to spot XSS vulnerabilities.
highace 14y ago
"This content covers features introduced in Firefox 11" We're now on Firefox 14. It's reasonably old.
- freditup 14y ago
  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.
- ward 14y ago
  It was an add-on ("Tilt" iirc) before that too.
- TallGuyShort 14y ago
  Of course, Firefox 11 was less than 6 months ago.
trinary 14y ago
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.
- dbaupp 14y ago
  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.
redact207 14y ago
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.
0x0 14y ago
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-helps-spot-xss-vulnerabilities/ http://drewgoodwin.com/posts/2012/07/17/firefox-3d-view-help...
jofo25 14y ago
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)
- achal 14y ago
  You cannot, unfortunately. I tried simply animating some elements with .animate, and it did not work.
Trezoid 14y ago
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
kivo 14y ago
it's not new? that's why i'm using firefox as a developer. It is awesome!
hastur 14y ago
old news still, pretty cool
twelvechairs 14y ago
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...
- brudgers 14y ago
  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.
wangweij 14y ago
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.
seanmcdirmid 14y ago
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-web-browser-suitable-for-harry-potter-in-wpf.aspx 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!
neel8986 14y ago
Go to facebook page and try it. It is almost like Manhattan in 3d
dangoor 14y ago
Here's the blog post in which I introduced the feature... http://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-developer-tools-and-add-on-sync/ 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 ;)
- Andrex 14y ago
  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.
- unwiredben 14y ago
  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".
jastr 14y ago
As someone who teaches intro to HTML classes, 3D view is a cool way to explain divs, spans, etc.
v33ra 14y ago
finally, you can see what's behind each website! http://i.imgur.com/PiNtn.png http://i.imgur.com/PiNtn.png
- jbottigliero 14y ago
  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 http://i.imgur.com/udact.png [edit] Looking back, it's just the "G+" feature on any page...
bretthopper 14y ago
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."
- sopooneo 14y ago
  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.
euroclydon 14y ago
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.
cancelbubble 14y ago
Anyone else not getting the 3D button? When I inspect this page, for example, I get the DOM hierarchy/breadcrumb at the bottom, but there is no 3D to the right of my current selector. Running FF 14.0.1. http://imgur.com/5b3hy http://imgur.com/5b3hy
detay 14y ago
Utterly useless.
BaconJuice 14y ago
can someone tell me how to get this to actually work? I'm on firefox 15 and I don't see this feature?
- achal 14y ago
  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).
  - mchahn 14y ago
    Unfortunately it requires webgl which I don't have on any pc. I couldn't find any easy way to install it.
    - achal 14y ago
      Check `about:support` and see if webgl was disabled because of the driver version. That might be it.

130 points by arunabh 14y ago

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.

itsbits 14y ago

this has been around for a while now...

johnny_reilly 14y ago

Does anyone know if Chrome are planning to follow suit?

arunabh 14y ago
http://www.google.com/intl/en/landing/chrome/cadie/ http://www.google.com/intl/en/landing/chrome/cadie/

zarify 14y ago

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.

AshleysBrain 14y ago

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

thinkingisfun 14y ago
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.
sergiotapia 14y ago
There's another thread on HN that shows it can be used to spot XSS vulnerabilities.

highace 14y ago

"This content covers features introduced in Firefox 11" We're now on Firefox 14. It's reasonably old.

freditup 14y ago
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.
ward 14y ago
It was an add-on ("Tilt" iirc) before that too.
TallGuyShort 14y ago
Of course, Firefox 11 was less than 6 months ago.

trinary 14y ago

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.

dbaupp 14y ago
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.

redact207 14y ago

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.

0x0 14y ago

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-helps-spot-xss-vulnerabilities/ http://drewgoodwin.com/posts/2012/07/17/firefox-3d-view-help...

jofo25 14y ago

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)

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

Trezoid 14y ago

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

kivo 14y ago

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

hastur 14y ago

old news still, pretty cool

twelvechairs 14y ago

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...

brudgers 14y ago
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.

wangweij 14y ago

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.

seanmcdirmid 14y ago

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-web-browser-suitable-for-harry-potter-in-wpf.aspx 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!

neel8986 14y ago

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

dangoor 14y ago

Here's the blog post in which I introduced the feature... http://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-developer-tools-and-add-on-sync/ 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 ;)

Andrex 14y ago
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.
unwiredben 14y ago
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".

jastr 14y ago

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

v33ra 14y ago

finally, you can see what's behind each website! http://i.imgur.com/PiNtn.png http://i.imgur.com/PiNtn.png

jbottigliero 14y ago
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 http://i.imgur.com/udact.png [edit] Looking back, it's just the "G+" feature on any page...

bretthopper 14y ago

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."

sopooneo 14y ago
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.

euroclydon 14y ago

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.

cancelbubble 14y ago

Anyone else not getting the 3D button? When I inspect this page, for example, I get the DOM hierarchy/breadcrumb at the bottom, but there is no 3D to the right of my current selector. Running FF 14.0.1. http://imgur.com/5b3hy http://imgur.com/5b3hy

detay 14y ago

Utterly useless.

BaconJuice 14y ago

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

achal 14y ago
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).
- mchahn 14y ago
  Unfortunately it requires webgl which I don't have on any pc. I couldn't find any easy way to install it.
  - achal 14y ago
    Check `about:support` and see if webgl was disabled because of the driver version. That might be it.