We knew unicorns could bounce, but now they spin?!

One of the hidden features of Firefox 29 was a unicorn that bounced around the Firefox menu when it was emptied. The LA Times covered it in their list of five great features of Firefox 29.

Building on the fun, Firefox 32 (released today) will now spin the unicorn when you press the mouse down in the area that unicorn is bouncing.

The really cool thing about the unicorns movement, both bouncing and spinning, and coloring is that this is all completed using pure CSS. There is no Javascript triggering the animation, direction, or events.

The unicorn is shown when the menu’s :empty pseudo-class is true. The direction and speed of the movement is controlled via a CSS animation that moves the unicorn in the X- and Y-direction, with both moving at different speeds. On :hover, the image of the unicorn gets swapped from grayscale to colorful. Finally, :active triggers the spinning.

Refinements to the Linux theme in the new Firefox

Firefox on GTK Linux now matches the look of Firefox on Windows and Mac OS X. The new Firefox brings interactions and visual designs that were present previously only on Windows and Mac OS X to Linux to provide a more familiar user experience to Firefox users regardless of platform.

Firefox on Linux now has the familiar “keyhole” design. This design is an immediately recognizable feature of Firefox, and is shown by the shape of the back button connected to the forward button and location bar.

Many brands have identifiable shapes such as the Mickey Mouse ears that Disney uses, and the curvy bottle shape of Coke. These shapes are immediately recognizable as part of their respective brands, and bringing Linux in to the mix is something that has been on the Firefox front-end team’s backlog for a while now.

I’m really happy to see the keyhole shape now present on all of our tier-1 platforms: Windows, Mac OS X, and now Linux (GTK).

Another large refinement that has been brought to Linux is new toolbar icons for buttons such as the Home, Back/Forward, and tab close buttons. The iconography of our Linux version now matches that of Windows and Mac OS X.

These changes help unify the experience of Firefox users independent of platform, while also allowing for a faster pace of development for the people working on making Firefox.

If you’re already running Firefox, it will automatically update to the latest version. If not, you can download Firefox now, always free and always open.

The fresh and furiously fast Firefox

One of the less covered parts of this week’s Firefox release is high attention that was placed on the performance of the redesign of the tab shape.

The new Firefox introduces a new tab shape that is consistent with Firefox for Android, FirefoxOS, Thunderbird, as well as the web properties of Mozilla.

Firefox for Android

Firefox

As the Firefox team was implementing this new design, performance was a key metric that was measured and focused on. We wanted to not only bring a beautiful design to users, but one that matched the new sleek shape with an equally speedy outcome.

Each time a change was made to our source control repository, a fresh build of the browser was created and run against a suite of automated tests that measure the performance of the build. These results are then compared against the results of prior builds, allowing the team to track improvements and regressions.

One such test that was used is called TART, short for Tab Animation Regression Test. The test works by opening and closing tabs and measuring the amount of time needed to paint each frame of the animation. Normally Firefox only attempts to paint one frame every 16ms (equivalent to 60fps) but during TART that limit is disabled.

Users of Firefox can have infinite variations of hardware setup, some of which are much slower than our testing infrastructure. By trying to paint as fast as possible, we can get a number that will represent the maximum bound for our graphics performance on our fixed-setup testing infrastructure. By tracking this number, we project that the full Firefox user-base will on average see proportional performance gains.

Now to the numbers

In the previous version of Firefox on Windows 7, Firefox took an average of 3.52ms to paint each frame of the tab opening animation [1]. With the new version of Firefox, we have gotten this number down to 2.81ms, which is a 20% speed up!

When it comes to closing tabs, we saw a shift from 2.72ms to 1.88ms [2], an amazing 31% speed up!

Gains like the above only happen when a solid testing framework is in place and an equally solid team keeps performance as a top priority. Cheers to everyone that has helped make the new release of Firefox the fastest yet.

If you’re already running Firefox, it will automatically update to the latest version. If not, you can download Firefox now, always free and always open.

[1] icon-open-DPI1.all.TART (Fx28 1b8f6597b67f vs Fx29 f1c211a4714d)
[2] icon-close-DPI1.all.TART (Fx28 1b8f6597b67f vs Fx29 f1c211a4714d)

[Update: Thank you to Benedikt who in the comments below corrected a math error that I made with the percentage of improvements]

Customization in the new Firefox

Customization has always been a strong point for Firefox. From installing add-ons and themes to rearranging the controls in the toolbars, Firefox leads the pack in providing the best customization capabilities of any browser out there.

Providing user choice is central to Mozilla, and that is reflected strongly in Firefox. With our new and improved customization mode, users can now change what widgets will appear in their Firefox toolbar as well as the Firefox menu.

For example, users that often click on the “Save Page” button now have the ability to move the button to their toolbar in only two clicks of the mouse.

Conversely, users who sparingly use the Search box can now move it to the Firefox menu or remove it entirely. If you used Ctrl+K (Cmd+K on Mac) as a shortcut to access the Search box before, Firefox will still react to the shortcut even if the Search box has been moved to the Firefox menu.

Firefox offers two easy ways to customize the browser. Simple customizations such as moving an item between the toolbar and the menu can be made by right-clicking on the widget that you wish to move. Deeper customizations can be made by entering the customization mode, accessible through the Customization button in the Firefox menu.

Our new customization mode even supports touch-sensitive screens, bringing customization “to your fingertips”:

With the new Firefox, you can now customize your toolbar and menu to make Firefox yours. If you’re already running Firefox, it will automatically update to the latest version. If not, you can download Firefox now, always free and always open.

Bookmarking in the new Firefox

This week’s release of Firefox brings an improved bookmarking experience, tightening the relationship between adding a bookmark and retrieving it.

The traditional bookmark star has been moved out of the location bar and in to a new Bookmark Star + Bookmarks Menu widget. When a bookmark is added, a new animation shows the Bookmark Star filling in and bouncing over to the Bookmarks Menu.

A second click on the Bookmark Star allows you to tweak the bookmark name, folder, and tags. By default, bookmarks are placed in the Unsorted Bookmarks folder, which can be viewed by clicking on the Bookmarks Menu.

This new bookmarking widget doesn’t have to stay on your Firefox toolbar either. Firefox offers the best customization capabilities of all browsers, and this means that you can quickly move the widget to the new Firefox menu or hide it entirely.

This can be done quickly and effortlessly, by right-clicking on the Bookmarks widget and selecting either “Move to Menu” or “Remove from Toolbar”. You can also reposition the widget through the all-new customization mode that is accessible by clicking on the “Customize” button in the Firefox menu.

Clicking on the Bookmarks button in the Firefox menu will show the following view:

If you’re already running Firefox, it will automatically update to the latest version. If not, you can download Firefox now, always free and always open.