My contributions to today’s Firefox release
31 January, 2012 § 20 Comments
Today (1/31/2011) marks the release of an update for Firefox that defaults add-ons to compatible, introduces native web developer tools, implements CSS3 3D transforms, and adds native support for elements to be rendered in fullscreen. Of the aforementioned features, I contributed a tiny amount toward the fullscreen support for Firefox 10.
Conditional Forward button
The User Research team at Mozilla performed a heatmap study to find what user interface features are used the most within the web browser. One of the findings was that the forward button is very seldom used. The forward button is only enabled less than 10% of the time, except this button consumes valuable screen space 100% of the time.
Firefox 10 introduces the “conditional forward” button. We have unified the back/forward navigation controls and address bar. When the forward button is disabled, it hides behind the back button, only to reappear when it is actually useful.
This change removes some of the visual noise in the main toolbar, as well as unifying the navigation mental model. The address bar shows the location and the back-forward button modifies the location, so it is only logical to visually align these two controls.
We also understand it is impossible to please everyone. If this feature is too much change for you, you can customize your toolbar and place a toolbar item between the back-forward buttons and address bar and the conditional forward button feature will be turned off.
DOM Fullscreen API
Firefox 10 introduces the DOM Fullscreen API. This API allows websites to request page elements to be rendered in fullscreen. This feature will provide necessary capabilities for HTML5 video to compete with Flash as well as an immersive environment for HTML5 games.
For Firefox 10, I implemented the document.mozFullScreenEnabled API. This boolean lets a website know if the feature has been enabled and the fullscreen request has the potential for being granted. For security reasons, iframes lacking the mozallowfullscreen attribute will not be granted fullscreen access.
For more information, see the “Using full-screen mode” article on the Mozilla Developer Network.
HTML5 Video Statistics
If you’re a web developer or just curious to see debugging information about the video you’re watching, you can now right-click on the video and choose “Show Statistics”. The statistics will overlay the video and update as the video plays.
This feature uses the statistics API that Chris Pearce implemented for Firefox 5.
Mentored Bugs
I helped mentor Matthew Wein (my brother) on fixing his first bug in Firefox. Matthew added the capability for frames of HTML5 video to be saved to disk. Simply right-click on an HTML5 video and choose “Save Snapshot As…” to save the current frame to disk.
If you’d like to get started in an open source project that reaches over 400,000,000 people, I’ve got a nice list of bugs that I’d be more than happy to help you out with.
JAWS 
Random, tiny, useless nit, but I’m pretty sure the Forward button hides behind the AwesomeBar, not the Back button.
The AwesomeBar is the popup menu that is below the address bar. I don’t see the Forward button sliding behind the AwesomeBar in my version of Firefox. Can you make a video/screencast of the animation on your version?
What about users who want conditional forward but we also want the home button on the left-hand side… possibly with a few other buttons like Greasemonkey and CookieMonster to minimize visual clutter to the right of the toolbar?
Recent versions of Firefox (4.0 and above) seem to follow this recurring pattern of implementing new features, but forcing people who want customization to reinvent them separately.
For example, my mother prefers her stop/reload buttons to the left of the address bar but, last I checked, I still had to use a userChrome.css tweak to collapse them together when not stuck to the right end of the address bar.
I won’t bore you with my rants on the backwardness of requiring an extension to enable scroll-wheel tab switching (like all other browsers and Linux desktop apps with tab widgets) when devs hide behind “desktop integration” as a reason to not offer the keyhole back/forward buttons to Linux users.
(Or how it’s silly to require an extension to put the RSS indicator back in the address bar where it’s intuitively near other page-scoped, conditional buttons… the same type of reasoning used to defend “Tabs on Top” as default.)
I’ve considered taking up offers of mentorship and getting familiar with the Firefox codebase, but given that all the entry-level bugs I see are supposedly mis-understood features, I think I’ll just stick to writing cross-browser extensions using the commonalities between Greasemonkey and other userscript harnesses and, maybe, eventually use Add-On Builder to write a FlashBlock-like extension for controlling GIF/APNG animation. (Are the docs correct in saying that the Add-On Builder STILL only lets you create toolbar buttons that are trapped in the add-on bar?)
Adding the ability for the customizations that you have mentioned increases the complexity of code at an alarming rate. It would be great to support all of these use-cases, but unfortunately doing so will negatively impact the maintainability of the default theme as well as vastly increase the number of cases for people to test.
The most direct answer for these questions is that the default install of Firefox needs to be a great browser for 98% of users. Firefox, unlike other browsers, has and supports extensions for these extra tweaks. Extensions do a great job at supporting various features that people would like to see, and I’m happy to see that we have a thriving extension community.
> Are the docs correct in saying that the Add-On Builder STILL only lets you create toolbar buttons that are trapped in the add-on bar?
The Add-On SDK makes it very easy to add buttons to the add-on bar. However, if you would like to add buttons to the navigation toolbar you can use Erik Vold’s library that adds support for toolbar buttons (https://github.com/voldsoftware/toolbarbutton-jplib). I use this library in my extension (https://addons.mozilla.org/en-US/firefox/addon/cheevos/) to add a toolbar button to the navigation toolbar.
Great summary. Easy to follow with visual aids.
“view -> toolbars -> customize” allows you to customize your toolbar, including moving the home button or stop button to wherever you like or adding/removing any button you like to your toolbar. no need for editing “userChrome.css”.
@Robert: That’s how I put her stop and reload buttons back where she wanted them. Didn’t stop me from needing to use a userChrome.css tweak because they only collapse together into a single button when they’re to the right of the address bar.
@msujaws: I can understand that, I suppose. Still doesn’t feel like the best possible solution somehow.
As for Add-On SDK, I still think it’s counter-intuitive at best to constrain widgets to a special location in the chrome now that native extensions are using toolbar buttons for their “statusbar” widgets… especially in the Add-on SDK’s standard library.
Thanks, though, for pointing out toolbarbutton-jplib. I don’t suppose you’d know either a library for creating icons in the Firefox address bar (what Chrome calls “Page Actions”) or the terminology I’d need to google for such a thing? If I can find that, then it and Erik Vold’s stuff should allow me to comfortably implement the majority of my ideas using Add-on Builder.
Unfortunately I don’t know of such a library, but there may exist one already somewhere on the depths of the internet. Let me know if you find one! 🙂
I’m sorry, I haven’t heard that excuse before. In fact, we’d like to get the keyhole back/forward buttons on Linux. We just need someone to step forward and offer to help contribute the patches. https://bugzilla.mozilla.org/show_bug.cgi?id=572484
Ahh, I’d forgotten about that. The “GNOME should decide what kinds of borders toolbar buttons get” excuse I gave was the one used for several versions (introduction of the keyhole through Firefox 3.5, I think) but somewhere around 3.6 or 4.0, there was a minor mention that they’d changed their minds and I’d forgotten about it since nothing ever seemed to make it into a release.
Today is literally the first day of a new semester for me and I also promised my mother a website but, once my schedule settles down, I suppose I could try jumping in the deep end with a bug like that. It’d definitely be something I consider relevant. (My main concern there is that, while I’m pretty good at styling HTML, I’m still sort of flailing in the dark when I try to accomplish something when I style XUL with Stylish)
Are there any guides for how to develop Firefox themes as efficiently as possible? (eg. minimal browser restarting, tips and tricks, caveats for new devs, etc.)
Thanks! That’d be great to get your help.
As for guides on how to developer for Firefox with efficient CSS, etc, you can read these pages:
“For security reasons, iframes lacking the mozallowfullscreen attribute will be granted fullscreen access.”
I think you meant “won’t be granted”? 😉
Ah yes. Thanks 🙂
More customization is clearly focused in future features for Firefox : https://wiki.mozilla.org/Toolbar_Customization and https://wiki.mozilla.org/Features/Desktop/Panel_Menu
In fact I think Firefox should take the best in each other web browser : the simple and clear interface from Chrome, the customization from Opera, Mac support from Safari and security and a few other ideas from IE and of course innovates. 😉
I’ve actually already run across the Writing Efficient CSS page and I already use multiple profiles to keep my webdev extensions from making my normal profile sluggish.
The problem is that there isn’t really anything there for someone who’s familiar with CSS as it applies to HTML but keeps tripping over CSS as it applies to XUL. (eg. Why doesn’t applying padding/margins/etc. to X do anything? Why is this still getting padded out when I’ve forced margins and padding to zero? etc.)
I know there exists some good documentation for the questions that you have but my searches can’t find them. Feel free to send me an email or message me on IRC and I’ll be glad to help you out.
Have you seen this page before? It has some very good tips on it: https://wiki.mozilla.org/DevTools/CSSTips
I had not. Thank you very much. I think, now that I have that, all I need to do is look up some guides on writing themes in order to fill in the gaps.
Sorry for taking so long to respond. I discovered a couple of days ago that one of the courses I’m taking via distance education is making an attempt to be more freeform and not doing a very good job, so I’ve been distracted and stressed as I try to figure out what my responsibilities as a student actually are.