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!

Through trial-and-error, I’ve learned the following shortcuts for navigating with the 3D view, also called Tilt.

• The arrow keys, up/down/left/right, provide panning.
• The W-A-S-D keys provide forms of roll, pitch, and yaw.
• The + and – keys provide zooming in and out.

The Inspector’s 3D view is really cool, giving web developers another tool to use when debugging issues with sites (and a way to take cool pictures as well ).

Browsing the internet with the lights turned off and clicking on a link to an image used to result in short term blindness, what I like to call getting “blinded by the light”. It’s crazy that Bruce Springsteen and Manfred Mann have been talking about this use case for so long and it took until now for it to get fixed

Here’s some screenshots of what it looks like in case you’re using something older than Firefox Aurora or one of those other web browsers:

The cool kids using Firefox Aurora or Firefox Nightly are seeing and experiencing this change already. Join us today!

[1] For those feeling like this is too much change, Dagger has created the “Old Default Image” add-on that adds the ability to revert to the previous behavior or change the background color to your own liking.

About a month ago, I registered the domain msuja.ws (as well as msujaws.com). I set up a simple page on the site that directs users to various webpages/websites about me. I’ve also been using the domain as a URL shortener, but like most lazy developers I chose the simplest and easiest route.

To do so, I uploaded an .htaccess file that does a permanent-redirect to the longer URL. Here is the current state of the file:

redirect 301 /1 http://msujaws.wordpress.com/2011/12/16/more-enhancements-for-html5-video-and-audio-in-firefox/
redirect 301 /f http://msujaws.wordpress.com/2011/12/17/nuking-parts-of-firefoxs-main-thead-io/
redirect 301 /9 http://msujaws.wordpress.com/2011/12/20/my-contributions-to-todays-firefox-release/
redirect 301 /c http://msujaws.wordpress.com/2011/12/23/announcing-cheevos-for-firefox/
redirect 301 /cheevos https://addons.mozilla.org/en-US/firefox/addon/cheevos/

To add a new shortened URL, I connect to the server via FTP and append another line.

It’s pretty easy for one person, and it’s nice to have both control over the shortener as well as letting other people know that this is a link from me that can be trusted.

Cheevos for Firefox is an addon for Firefox that makes learning about different parts of the browser fun, as well as giving you the opportunity to brag to your friends about your pro-level web surfing.

With Cheevos for Firefox, you will gain achievements for using Firefox. Whether it’s finding hidden Easter eggs within the product, or taking advantage of the power of the world’s fastest, most extensible, most personalizable, and most friendly web browser, Cheevos for Firefox will surprise and make using the web browser more fun than ever.

Varying levels of points are awarded based on the difficulty of acquiring an achievement. See how many points you can collect!

Thanks go out to all the people who have helped test, add features, and recommend ideas for new achievements:

• Matthew Wein
• Felipe Gomes
• Matthew Noorenberghe
• Stephen Horlander
• Eric Jensen
• Randall Brown
• Jim Dusseau
• Frank Yan
• Justin Dolske

Download Cheevos for Firefox today and let everyone know what you think of it!