The Long Road to Firefox 3

Mozilla Firefox logo

With the release of Firefox 3 last month, the Mozilla project, corporation, community, and the open-source software world in general have a great achievement on their collective hands.

My involvement with Mozilla began with a weblog post in October of 2003, over a year before the initial release of Firefox. During the year that led up to the release of Firefox 1.0, we assembled a team that created the branding and visual identity for Firefox (and later, Thunderbird).

As the launch of Firefox 1.0 approached, our involvement in the project grew from visual identity to include a redesign of the Mozilla.org in the summer of 2004 by our company, silverorange. This also meant a change in the nature of our involvement to include professional services. We were now making some money!

Though my involvement in Firefox was a only thin layer on top of the years of engineering, design, and development that truly built the product and organization, I’ve occasionally had some unique opportunities. On November 9th, 2004 at 4:51AM Atlantic time, I had the privilege of making the CVS-commit to the mozilla.org website that officially released Firefox 1.0.

With the release of Firefox 1.5 in November of 2005, we launched a the new Mozilla.com website (having separated the Firefox and Thunderbird products out from the larger Mozilla.org website). The release of Firefox 2, brought with it the first redesign of Mozilla.com where the visual style was provided by another design firm (NoBox) and our role was one of implementation.

With the release of Firefox 3, Mozilla.com received a major design, again with the visual style coming from another firm (The Royal Order of Experience Design from Chicago). The style of this new site is unlike anything we could have created ourselves and it made the implementation both challenging and fun.

The involvement that I and my co-workers had with Firefox and Mozilla has paralleled and contributed to the growth and success of our business. Our work with Firefox and Mozilla changed the world in which our company operated and provided a new set of extraordinary opportunities. When a guy named Kevin Rose called and asked us to help with the design of his new site, Digg, the first thing he said was that he had seen our work with Mozilla.

As the organization behind Firefox grew, and the scale and amounts of money floating around grew, I was skeptical of the long-term prospects of the project and of the product. Once Mozilla was big enough, I thought, they’d have the same problems any large software company has.

Firefox 3 has proven me wrong. I really expected Firefox to get bigger, dumber, slower, as the small founding team of developers was eclipsed by a larger team. Instead Mozilla has shown that they are not “any large software company”. Like Linux, Apache, and other great free-software projects before them, they have shown how an open-source project can defy the traditional rules of software project management. The product has gotten smaller, smarter, and faster. The organization continues to look at issues that matter for an open web.

It’s been fun. So, when does Firefox 4 come out?

 

The <Video> Tag

Brendan Eich, the Canada-loving technical leader of the Mozilla project, has written a piece on The Open Web and Its Adversaries and given a presentation on The Open Web. In addition to a general overview of what it means to have an open web, the post mentions work that Opera and Mozilla are doing with the WHAT working group to create new HTML tags for <audio> and <video>.

The basic idea (still in the early stages, I gather), is to create <audio> and <video> tags that would allow audio/video playback in the browsers without relying on a proprietary plugin (like Flash, in the case of YouTube). Browsers implementing the tags would be able to use any video format, but all browsers would support a base format of Ogg Theora and Ogg Vorbis.

Theora and Vorbis video and audio compression formats that are free, open-source, and unencumbered by patents. I’ve written before about the importance open formats for media.

If Firefox and Opera were able to leverage their combined corner of the market share and force Microsoft to implement such a setup in Internet Explorer (or if they did so eagerly on their own), it would be a great step forward for media on the web.

 

Scaling Images in Firefox 3

After making the post about smooth corners in Firefox 3 yesterday, I began to wonder what other smoothnesses (which should be a word) the next version of Firefox might have in store.

As I mentioned yesterday, the Cairo graphics library will power the rendering of web pages in Firefox. Functions such as resizing an image, are now performed by this new library.

In current web browsers, if you have an image that is 100 pixels by 100 pixels, but you tell the browser to resize it to 85×85px (by specifying the height and width in the HTML <img> tag), the results were ugly. The browser would resize the image, but not with any of the smoothness that you would see if you had resized the image in an application like Photoshop or the Gimp.

Now, in Firefox 3.0 Alpha 1, resizing an image like this actually produces a smoothly size image. This isn’t something I would recommend doing, but it is another nice example the improvements coming in the Firefox rendering engine.

Here’s an example of a PNG image version of the Firefox logo. There is only one source image used for all of these variations. This source image is 128 pixels by 128 pixels. The top row shows how Firefox 2 resizes the image, and the bottom row shows how it’s done in Firefox 3.0 Alpha 1.

Firefox image resizing comparison

I had the good fortune of meeting Carl Worth, a lead Cairo developer, a few years ago in Boston. He was a gentlemen and was more enthusiastic about tessellation than anyone I’ve ever met. It’s nice to see his hard work will be helping to improve such a widely adopted application as Firefox.

When a developer of a mapping application was considering a lower-quality view to make his maps render faster, Carl suggested that if Cairo was too slow, then it should be fixed, not worked-around. I understand that they’ve since made good progress on performance.

 

Cairo Corners in Firefox 3

The latest alpha releases of Firefox 3 use a library called “Cairo” for much of the graphics work (note: I don’t understand exactly what that means, but it doesn’t matter).

Thanks to this new graphics infrastructure, boxes with corners rounded by the pre-CSS 3 property border-radius are rendered with beautiful anti-aliasing (currently accessible as the non-standard -moz-border-radius and soon -webkit-border-radius). Stated more simply, rounded boxes are prettier.

Here’s a quick comparison of a box with CSS rounded-corners rendered in Firefox 3.0 Alpha 1 versus Firefox 2.0:

Firefox rounded corner comparison

The difference is subtle, especially with lighter colours like these, but this example represents a significant improvement in the abilities and quality of rendering in Firefox.

Also note that Firefox 3 probably won’t be released until the second half of 2007 (that’s not based on anything official – just a guess).

 

Tango Theme for Firefox

Garrett LeSage and a group of other good people have completed a nice upgrade of the Tango theme for Firefox 2. The theme brings the icons from the Tango Desktop Project to Firefox along with many improvements in making Firefox look and feel more like a native application on Linux.

Tango theme for Firefox 2 preview

There are also a series of “sub-themes” as well. The Gnome sub-theme matches with the default Gnome icon theme, Tangerine matches with the Ubuntu theme, and Industrial for the old Industrial Gnome theme.

Highly recommended for those using Firefox on Linux. There are rumblings of an update for the Tango theme for Thunderbird 2 as well.

 

Firefox 2

Since you are on the internet right now (admit it, you are), you are probably aware that Firefox 2 has been released. My congratulations to all involved. While I was much less involved in the visual design this time around, it was still a pleasure to have been involved at all.

The Mozilla.com website has been updated as well. This website update was something that I was much more involved with than the actual browser update. The design itself was done by the Nobox Marketing Group (get it?) with the implementation handled by our team at silverorange and the good people at Mozilla.

My favourite new feature in Firefox 2 (after the spell checking and recently-closed tabs, that is): Try entering a math formula into the Google search box (I’d recommend 57 * 4 / pi). Notice that the solution to your formula is instantly displayed in the suggested results. Thanks to Paul Kim for pointing out this gem.

 

Thunderbird Extension Request: Colordiff for Thunderbird

I have a quick Thunderbird extension request for the throngs of aimless developers waiting to build software at my whim. When reviewing changes to a source code repository, such as Subversion or CVS, most tools offer nice syntax highlighting for the “diff” view.

Even on the command line, output of SVN and CVS commands can be “piped” into the command-line utility, colordiff, for a similar beautification.

Several projects I work on (or hang around pretending to work) have mailing lists of changes to CVS and SVN repositories. I’d love to see a Thunderbird extension that provided syntax highlighting for the diff format automatically in these emails.

 

The Photoshopping of Firefox

Yesterday’s Firefox launch garnered a lot of press. I noticed a peculiar pattern emerging on some of the news sites. There seems to be a whole weird underworld of hastily-photoshopped graphics for news sites.

Here is a collection of some images from some Firefox 1.0 launch news articles I found across the website with color commentary. It’s too bad Salon.com hasn’t done a story on Firefox, because their article graphics are like works of art.

Enterprise Linux IT Screenshot of Firefox

Enterprise Linux IT (day 1)

I call this one “Firefox Christ”. If I’m interpreting it correctly, it depicts the ascension of Firefox back to heaven after having spent three days in hell.

Enterprise Linux IT Screenshot of Firefox

Enterprise Linux IT (day 2)

Apparently not content with their apocalyptic graphic from day 1, the Enterprise Linux IT site went tech on day 2. We can assume that the ones and zeros are some kind of “data”.

Linux Insider IT Screenshot of Firefox

Linux Insider

One of several sites that surrounded the logo in a blurry halo. This is somewhat understandable, as it was probably a way to mask the edges of the logo since they probably had to just crop a low-res version from the Mozilla website. That doesn’t excuse the Times New Roman text title here.

News.com Screenshot of Firefox

News.com

I get the “1.0” road sign, but I’m really confused about the little Firefox rolling in the background. Maybe it symbolizes the “roll to 1.0”?

VNUnet Screenshot of Firefox

VNUnet

I like what they did with the close-cropping, but they went a little crazy with the JPEG compression.

CNN Screenshot of Firefox

CNN

A simple image of the logo seems like something that would be hard to get wrong. CNN.com decided it needed a peach/orange background gradient. Maybe that was a screenshot from somewhere I don’t know about?

BBC News Screenshot of Firefox

BBC News

The best of the bunch, but I think that mostly because this is a screenshot of a graphic I made for the Mozilla.org home page. Still, it is simple, straightforward, and doesn’t include any wacky photoshopping.

 

Firefox 1.0 is here!

It is 4:51AM Atlantic time and I am sitting in bed with my laptop on my lap. One minute ago, Ben Goodger gave me the final word and I made this CVS commit to the mozilla.org website:

steven%silverorange.com 2004-11-09 00:50
People of Earth, I give you Firefox 1.0

It’s been a long time coming, but Firefox 1.0 is here. See 1.0 announcement posts on Mitchell Baker’s weblog and Ben Goodger’s weblog.

It is an honour to be a part of this announcement.