Shared publicly  - 
 
I am loving Firefox 11's 3D DOM Viewer!
Let us use it for a mini Google+ case study ...

Today, Firefox announced that they released version 11 of their browser. (I am really excited for version 13 which will come out in three months). I took a screenshot of the 3D DOM viewer of Google+ Stream so we can talk about it below.

So what can we learn from this 3D representation? People say that it wont help web developers solve real-world problems, but I will disagree with that. It will help us know how complex our DOM really is. The deeper the DOM, the heavier the site would be. The heavier the site, the more kilobytes will get transferred, and the rendering would be slower.

For example, look how deep the "Google Chat" is on the left. There are 24 levels of DOM just to create this chat user interface. With basic HTML/CSS knowledge, you could recreate that with just a simple unordered list, it isn't a complex UI component. You can save many bytes of data by optimizing that piece of code. But if you look further, there are many areas that could use optimization. An example of an optimization would be fiddled as the following http://jsfiddle.net/HYCQG/, instead of 15 layers, it could be just 1.

Imagine we redesign Google+ while taking into account this 3D DOM Viewer, by redesigning many areas in Google+, we can save couple of kilobytes per request. With such a high traffic website, you can save resources and rendering time. And that would be a win win for both Google and Users because speed matters and performance matters.

Some tips for navigation:

- Left click and hold to rotate the page.
- Double click a node to show the html
- Right click and drag to pan
- Scroll to zoom
- Use W, A, S, D to rotate the page
- Use the arrow keys to pan through the page.
- Press ESC to exit

Kudos for the Firefox team! The web got better!
151
126
Chris Knutson's profile photoMohamed Mansour's profile photoAnil Dobariya's profile photoHampa kr's profile photo
42 comments
 
Interesting, this may force me to use Firefox for more than just testing. 
 
I found out about that view not too long ago, and I love it! I think it can absolutely be useful, and of course it looks cool -- and I think that's a good enough reason to use it. :)
 
+Joshua Woodward it was out for a while, 9 months ago in development/plugin (fixed by Joshua), but now it is out for everyone :) Personalized search ftw (if you follow the right people hehe)!
 
Google+ Posts are near instant for people in your circles.
 
that is sick! I wonder when chrome will implement it
 
I wonder if it'll take time getting used to it?
 
better get used to it I bet this is going to be everywhere in a few months
 
+Janis Kay pretty easy, you use your keyboard to navigate, and mouse to free look :) Then you can click to check the DOM
 
I installed the addon quite a while back, but it was quite buggy for me at the time. I am extremely excited to see Firefox come out with this and it will be a huge help for developers. Especially if you take on second-hand projects!
 
I updated the post to include some navigation tips!

- Left click and hold to rotate the page.
- Double click a node to show the html
- Right click and drag to pan
- Scroll to zoom
- Use W, A, S, D to rotate the page
- Use the arrow keys to pan through the page.
- Press ESC to exit
 
Firefox has been buggy for me and a few others for awhile now. Hope they fix that, too.
 
A great new take on an old technology. Not something I ever would have thought of creating, but now that I see it like that, I can imagine how handy it could be. Web Devs rejoice; this is great. No doubt the chrome version will follow.
 
unfortunately my stone age PC doesn't have the capability to view webgl :( looks like I'm going to be missing out until I can afford an upgrade.
 
I don't think the chat window is unnecessarily deep. It's an iframe, so starting with its <html> tag it's 15 layers deep. By my count there are only 2 useless <div>s (right under <body>, and right above the <ul> that holds the list of people).
 
+Jake Schmidt I actually counted 20 (removing the parent divs for the page which are 4 level deeps). Yea since it is an iframe we can subtract 5 levels! But 15 levels is still excessive for ordered list that is not a complex UI component :) 7 levels for each list item, the remaining for the ul and container (it is using tables :x)
 
+Masroor Ahmed look at +Jordan Arseno's link. Version 11 of Firefox was released this morning, the video that Jordan posted explains how it is used. It is pretty self explanatory once you open it up, ease of use ftw!
 
yeah i have downloaded it ... just trying to run the 3d thing
 
+Masroor Ahmed did you watch the video that +Jordan Arseno (last post) recommended, it shows you how it was activated. If it doesn't work for you, submit a bug report over at bugzilla :)
 
yeah i watched it ... and still doesn't work for me
 
I still disagree that it's excessive. The best I can figure out removes 4 levels (remove 2 useless DIVs, combine 2 adjacent levels of DIVs, and remove the innermost DIV). The rest seems pretty functional to me. You tend to get these kind of structures with tree-shaped languages - raw parse trees for real programming languages can get gnarly, but they're easy enough to simplify internally.

I wonder how hard it would be to detect non-functional DIVs programmatically. Or even better, to detect adjacent DOM layers that could be combined.
 
+Jake Schmidt well, instead of 15 levels for that chat (not including the body, html, etc). Here is a fiddle that I did quickly that removes all the 14 levels which are useless (why have those tables in the first place?) http://jsfiddle.net/HYCQG/ which has just 1 level and an status image for another level. Excessive usage of markup isn't needed for this simple UI component. I bet the UI closure template components are over complicating it.
 
I think the tables are for backwards compatibility. Specifically, I don't think your code would work on IE6 (background-image in an empty span). Ditto for the <button> tag - screen readers, maybe, from the looks of it. I could be wrong, though.

You did remove 5 levels, which is more than I expected. You might be right about this one.
 
+Jake Schmidt Google+ does not support IE6 (it brings up an ugly dialog) and many products :) I agree buttons are good for screen readers, but there are ARIA roles that could be defined in HTML that screen readers are better suited for. But, I don't know how it supports legacy screen readers, so buttons might be better suited for older screen readers. http://www.w3.org/TR/wai-aria/
 
This will revolutionalize how we design our doms and will especially hel people who prefer more visual approaches
 
I always like when cool addons/extensions are incorporated into main product code.
 
Wow, that's crazy... there's no way they need that many layers... this is why I'm so against WYSIWYG editors, way too inefficient.
 
it does not work in firefox 11.
super bummed
Add a comment...