Starting in Firefox 11 (currently in the beta channel), there is a hidden preference (nglayout.debug.paint_flashing) to enable what we call “paint flashing”.

Whenever the layout engine determines that a region of the browser requires repainting, the region is tinted with a random color value. Regions experiencing heavy paint flashing can turn your browser in to a fun rave, but also show web developers (and browser developers too!)  areas of the code that aren’t being as optimal as possible.

For example, there is currently a bug on file for Firefox where the HTML5 video controls cause unnecessary paint flashing (bug 722261). Modifying the markup for the controls can fix this and improve the performance of the controls. Paint flashing was required to find this inefficiency, and it will also be the tool that we will thank for finding many other inefficiencies as we move forward.

To enable this feature in Firefox, go to about:config and create a new Boolean preference with the name of nglayout.debug.paint_flashing and set the preference to true.

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

On Thursday morning the students had a work-in-progress patch to move the tabs preferences pane to an in-content page. Later that night, I hosted an “office hours” time where I did a Google+ hangout with the students while they worked on the patches. This provided some quick back-and-forth conversations while they were working and I believe it allowed them to work at a faster pace. By late Thursday night, Friday morning for the students, we had a patch that loaded the tabs preferences and populated them with the correct state.

The students also set up their own user patch repository for the project.

I didn’t hear of much activity over the weekend. On Monday, Blair met with the students for our weekly update meeting and Devan sent out minutes from the meeting.

Moving the tabs preferences pane to in-content:

• Owen is going to work on styling the tabs.xul file and should be requesting feedback by Thursday.
• Owen and Devan are starting work on the the general homepage and should be requesting feedback by Monday.
• Jon and Joe will start working on the other XUL preference pages. They haven’t specified a date to request feedback by.

On how to organize the XUL documents for search functionality:

• We will use build-time includes to combine the various files along with a main skeleton file. Blair will send the team some example code for this.

The addition of the breadcrumbs will be delayed by a month or so, so don’t be surprised that the patches-so-far lack the breadcrumbs. Blair expects to have the breadcrumb implementation finished in a month or so.

There are some cases where animations in the user interface may appear jerky, having large pauses or stutters while transitioning from one state to another.

One example is the transition from an open tab to a closed tab. In today’s release version of Firefox, tabs close by reducing their width to 0 pixels while also reducing their opacity to become transparent at the same time. With these two animations occurring at the same time, the tab becomes invisible much earlier than its width becomes 0 pixels. This results in a visible hole in the tab strip.

Starting in Firefox 12 (currently in the Nightly phase), the animations delay the fading of the opacity to a later time to remove this visual hole.

Finding an issue like this may be easy, but seeing at a slow speed what is happening and if a fix works better is hard. Since these animations run pretty fast, developers need to slow the animations down.

Asa Dotzler used Camtasia Studio and recorded the tab closing transitions at 60 fps (Camtasia Recorder -> Tools -> Options -> Inputs -> 60 fps) and then encoded them at 15 fps (Save and Edit -> right-click on clip -> Clip Speed -> 25%). This provided us with a slow-motion reproduction of the animation (only animates in Firefox, click on the image to see the animation):

After Asa created the animation, Dao Gottwald put together a patch that tweaked the timings of the various transitions. I put together a new recording that showed the effect of this change (click on the image to see the animation):

Recording user interface features can really help get a detailed look at how the software looks and feels. Maybe there will be an opportunity for you to use software like this in the future

Last week the team landed their first patch and began working on fixing their second bug. Work has begun on moving the tabs pane to an in-content page, and the team has started to play with browser-chrome-tests, mixing XHTML and XUL, and putting together a project plan.

The basic plan of the the architecture is to place all the panes within one document and show/hide the panes when navigating the preferences. We can use pushState/popState to allow for forward/backward navigation, as well as perform in-content searches by showing/hiding the relevant sections.

The organization of the preferences will remain the same as it is today in Firefox. Any work on reorganizing the current preferences will be handled in a later phase that is not part of this project.

As a side note, I will be out of town for the next two Mondays but I will try to post updates when possible.

TL;DR: Desktop Firefox feedback and ui-review requests should go to ux-review@mozilla.com now instead of an individual.

For a long time, one or two members of the Firefox UX team received the majority of feedback and ui-review requests. Sometimes an the requestee goes on vacation, leading to slow feedback loops and stalled work.

The reality is that submitting patches that alter the user interface of Firefox doesn’t need to be a scary or long process. I’ve been working with the UX team to put together a set of steps that contributors can take when they want to get feedback or ui-reviews from the UX team.

Asking for general direction?

There are times where you may not know in which direction to go. There is nothing wrong with implementing what you think will provide the best user experience or implementing multiple variations of your idea. Sometimes the experience of implementing another idea may show advantages and disadvantages in the design and help with your decision making.

If you still have some general questions about design, please don’t hesitate to join the #ux channel on IRC. If somebody doesn’t answer your questions, just ask again in a few hours (people may be sleeping due to timezone differences).

Looking for specific feedback or ui-review on your patch?

If you’re about to upload a patch and request feedback or ui-review, please link to either a screenshot, screencast/video, and/or try-server builds that contain the patch.

Here are links to some good software that can be used to create screenshots and screencasts:

• TechSmith Jing (free and paid version makes PNG screenshots, free version makes SWF videos, paid version makes MP4 videos)
• TechSmith Camtasia Studio/Camtasia:Mac (useful for detailed/longer screencasts)
• Quicktime X/Player included on Snow Leopard and higher can do screen recordings (File > New Screen Recording)
• Miro Video Converter (to convert videos to WebM format for easy viewing in the browser)

Please attach your screenshots/screencasts to the bug, since Bugzilla will probably outlive an external media hosting website.

After attaching your media, please flag the special UX email address, ux-review@mozilla.com, for feedback or ui-review.

Expectations of the UX team

The UX team has a goal of responding to feedback and ui-review requests within 48 hours.

Credits

Special thanks go out to Jennifer Morrow (Boriss), Frank Yan, Matthew Noorenberghe, David Lawrence, Ann Ignacio, Henry Langi, and Alex Limi for their help in putting this all together.

For more information

If you have any changes that you would like to make or to see the most up-to-date version of this document, please see the page on developer.mozilla.org.

The team is comprised of four senior Computer Science students (pictured from left to right):

• Zuhao (Joe) Chen
• Owen Carpenter
• Devan Sayles
• Jon Rietveld

The team got builds up and running on Windows and Mac OS X and are close to getting their first bug fixed. I wrote up a short tutorial to get the students introduced to the preferences code in Firefox and they’ve gone through the tutorial and made their first sample preferences page. They are also busy at work putting together a project plan that Blair and I will review and provide feedback on. The students were also introduced to Zhenshuo Fang from the Firefox UX team, who is leading the user experience of the feature.

I have filed a tracking bug for the project and will file dependent bugs once we have fleshed out the smaller chunks.

One example is the Yo Dawg cheevo. The hint for this cheevo is, “I heard you like browsers”. If you’ve ever seen MTV’s Pimp My Ride television show, you may recall Xzibit pimping peoples cars by redecorating their trunk to resemble their favorite hobby. Xzibit would often say lines such as, “Yo dawg, I heard you like basketball, so I put a basketball court in your trunk so you can play basketball even when you’re not at a basketball court.”

Through the power of the internet, this morphed in to a meme that represents recursive levels of repetition. For example, the image on the right could carry along a phrase of, “Yo dawg, I heard you like pizza, so I put a pizza inside of your pizza so you can eat pizza while eating pizza!”.

Well … it turns out that you can actually put Firefox inside of Firefox.

So now you know where the “Yo Dawg” achievement comes from. To see this for yourself, try the following:

• Open Firefox (shame on you if you’re not already)
• Copy and paste this URL in to your address bar:
  • chrome://browser/content/browser.xul
• Hit enter

You will now see Firefox running inside of Firefox! This is a pretty cool trick, and it showcases the power of the user-interface programming language that Firefox uses to create itself.

This technology is XUL, pronounced as zool, and is very similar to HTML. Firefox also uses CSS and JavaScript. So with XUL, CSS, and JavaScript, Firefox is very similar to an extremely complicated web page that has more privileges than normal web pages

I hope you learned something. If you’re not already using Cheevos for Firefox, give it a try today and let me know what you think about it.

Based on the tweets from users of the add-on, here is a current leaderboard (note that no scores are verified):

1. @jankom has 270 points
2. @swarnendubiswas has 220 points
3. @goodguydan has 210 points
4. @paulrouget has 180 points
5. @raulmalea has 170 points
6. @curtisko has 155 points
7. @lepereporcher has 135 points
8. @weinjared has 130 points
9. @henrystivens has 30 points
10. @elefra_ has 20 points
11. @kpondign has 15 points
12. @velvetbites has 5 points

Download Cheevos for Firefox today and let the world know how much of Firefox you use

This work is done as part of a course at Michigan State that computer science students take before they graduate. The students work with companies within industry to get some more real-world experience and build their professional network. The course is officially called “CSE 498: Collaborative Design”, but the informal and popular name is “the Capstone course”.

Stephen Horlander has put together some fantastic designs for the students to reference and build towards. Blair McBride and I will be helping to mentor the students throughout the semester.

Here’s to a great semester!

Update: The students working on the project are Devan Sayles, Jon Rietveld, Owen Carpenter, and Zuhao (Joe) Chen. Welcome aboard!