Before Readability

After Readability

Note: Readability runs fine on Minefield if you use Nightly Tester Tools to force-install. There’s also a bookmarklet version if you don’t want to install an add-on.

Luckily Rob taught me a trick to open up some space in my Firefox toolbar. Just right-click in the space beside your search bar, select Customize…, then add some “Spacers” where you want some extra space. Here’s a step by step guide, using the Two Little Birds persona:

1. Sad birdies, search bar in the way.

2. Right click beside the search bar and select Customize…

3. Open up the Customize menu…

4. Add some spacers, and remove some buttons to free up space…

5. Ta dah! No more sad birdies.

• Firefox 3 新功能指南 (simplified)
• Firefox 3新功能指南 (traditional)
• Petit guide de Firefox 3
• Guía de campo para Firefox 3
• Firefox3新機能ガイド
• 모질라 파이어폭스 3 에 대한 필드 가이드

If you’re interested in translating the Field Guide into other languages, see this post. After you have finished and posted your translation somewhere, post a note here and I’ll add a link to the English version of the Field Guide.

This is gonna be a crazy awesome day.

We’re done. Firefox 3 is going to be launched very soon. In anticipation of this long-awaited event, the folks in the Mozilla community have been writing extensively about the new and improved features you’ll see in the browser. The new features cover the full range from huge and game-changing to ones so subtle you may not notice them until you realize that using Firefox is just somehow easier and better. The range of improved features is similar — whole back-end systems have been rebuilt from scratch, while other features have been tweaked slightly or redesigned in small ways. Overall the result is the fastest, safest, slimmest, and easiest to use version of Firefox yet. We hope you like it.

Here’s a list of the features covered in this Guide.

• Add-on manager
• Bookmarks
• Cascading Style Sheets (CSS)
• Color profile support
• Download manager
• Font and text rendering
• Full page zoom
• History
• HTML Canvas
• Location bar UTF-8 support
• Malware protection
• Microformats API
• Offline web application support
• Password manager
• Performance improvements
• Phishing protection
• Plugins
• Site Identification button
• Smart Location Bar
• Tabs
• Themes
• Video and audio feeds
• Vista parental controls support
• Web application protocol handlers
• Conclusion

Add-on manager

In Firefox 3 the Add-on manager has been expanded to include a new “Get Add-ons” tab where you can view Recommended add-ons, search for new add-ons, see add-on descriptions and ratings, and install add-ons with a simple click. The Add-ons manager is now fully integrated with the addons.mozilla.org (AMO) website, making it easier than ever to find and experiment with new browser extensions and themes.

For more, see Get Add-ons in Firefox 3 by Madhava Enros.

Bookmarks

Firefox 3 introduces a set of new features to bookmarks that make them much easier to use, more useful in general, and much more useful for the terminally disorganized. The three main features being introduced are Bookmark Stars, Bookmark Tags, and Smart Bookmark Folders.

Bookmark Stars are a quick and easy way to bookmark a page with a single click. Bookmark Tags are a way to add “extra” information to a bookmark, allowing you to organize them in a much more flexible manner than old-style Folders would allow. Smart Bookmark Folders are “saved searches” that automatically update when you add new items matching that search to your bookmarks.

For more, see Firefox 3: Bookmarks by Deb Richardson.

Cascading Style Sheets (CSS)

A large number of CSS improvements have been made for Firefox 3, including support for: inline-block and inline-table, font-size-adjust on all platforms, the :default pseudo-class, HTML soft hyphens (­), the ime-mode property, white-space’s pre-wrap value, and dynamic updating for selectors like :first-child, :only-child, :last-child, and :empty. The Mozilla Developer Center has a full list of and documentation for all the CSS changes in Firefox 3, which you can find here: CSS improvements in Firefox 3.

For more, see Some new CSS features in Firefox 3 by David Baron.

Color profile support

Firefox 2 does not include support for color profiles, so the browser renders colors as best it can without doing special tweaks based on your system or custom color profiles. Firefox 3 does include full support for color profiles, allowing for a richer and more vibrant range of colors to be displayed in the browser. For a variety of reasons, however, color profile support is turned off by default and must be enabled through your custom browser preferences. It is likely that a future version of Firefox will see this feature enabled by default, which will be a happy day for photographers and visual artists everywhere.

For more, see Firefox 3: Color profile support by Deb Richardson.

Download manager

The Download manager has changed quite a bit for Firefox 3, and now includes the oft-requested ability to pause and resume downloads, both manually and automatically. Other changes include the addition of a download status indicator to the bottom status bar, the ability to search through downloaded files in the manager, an enhanced file display that includes more detailed file information, and the ability to revisit the original download page by right clicking on the file in the Download manager.

For more, see Download Manager in Firefox 3 by Madhava Enros.

Font and text rendering

When Mozilla developers decided to incorporate the Cairo subsystem and build a new graphics layer from scratch, they also decided to completely rework the system that renders text in the browser. The result is that Firefox 3 has improved support for font kerning, ligatures, international text, partial ligatures, font hinting, anti-aliasing, font types, and font selection. Firefox 3 represents a huge step forward in font support and text rendering, and Mozilla developers are already working on further enhancements for future releases.

For more, see Firefox 3: Fonts and text by Stuart Parmenter and Deb Richardson.

Full page zoom

Page zoom has been completely reworked for Firefox 3 and now includes both full page and text only zoom.

Full page zoom scales the page layout and structure while allowing you complete control over the size of the displayed content. Text only zoom, on the other hand, only zooms the text on a page, leaving the images and page layout untouched.

A new and extremely useful feature of page zoom is that Firefox now automatically remembers the zoom level you set on a per-site basis. Once you zoom in to (or out of) a page on a site, Firefox will remember and restore that zoom level the next time you visit any page that is part of that site.

For more, see Full Page Zoom by Seth Bindernagel.

History

Firefox 3 has made browser history astonishingly useful. Not only is History a key source of information for the new Smart Location Bar, it has been improved in several other ways. History now stores sites’ favicons (small, identifying graphics) along with the other location data to make scanning and identifying history entries much easier. The History Sidebar and History Menu have been tweaked as well, and a whole new History Library has been added to the Firefox Library (formerly the Bookmark Organizer). Overall, Firefox 3 has raised History from being occasionally useful to being an absolutely essential part of daily browser use.

For more, see Firefox 3: History by Deb Richardson.

HTML Canvas

Firefox 3’s HTML Canvas implementation has been improved and now includes an experimental text rendering API. This API is described in detail at the Drawing text using a canvas article at the Mozilla Developer Center (MDC). Also new is support for the transform() and setTransform() methods, which are documented as part of the MDC’s fantastic Canvas tutorial. Two-dimensional Canvas performance has also been improved and is faster on all platforms.

To see a couple of great canvas demos, check out John Resig’s Processing.js and Aza Raskin’s Algorithm Ink.

For more, see HTML Canvas in Firefox 3 by Vlad Vukićević.

Location bar UTF-8 support

Those who mainly use the US-ASCII Web may not notice one of the big changes in the Firefox 3 location bar: UTF-8 multi-byte support. This is a very large usability win because non-ASCII language URIs were unreadable machine-code in Firefox 2, where now they are rendered in human readable fonts in Firefox 3.

For more, see Firefox 3: UTF-8 support in location bar by Gen Kenai.

Malware protection

“Malware” is what we call web sites that try to install unwanted software or otherwise do unauthorized things to your computer. Firefox 3 keeps track of all reported malware sites, protecting you by blocking them before the pages even load, ensuring that your computer is never at risk. You can ignore the warnings if you want — it’s your browser, after all — but we’re hoping this added security will help protect users and make the Web safer for everyone.

For more, see Mal-what? Firefox 3 vs. Bad People by Johnathan Nightingale.

Microformats API

Microformats are a set of simple, open data formats that are built upon existing standards. Firefox 3 includes a new microformats API that can be used to build add-ons, but they are otherwise not currently exposed through the Firefox 3 user interface.

For more, see IBM’s new tutorial about how to use the new microformats API in Firefox 3 extensions, and Where are the microformats in Firefox 3? by Mike Kaply.

Offline web application support

Firefox 3 implements online and offline events from the WHATWG Web Applications 1.0 specification. This means that web developers can create web applications that will work in Firefox even when the computer is offline. When in “offline mode”, a web application’s data is stored locally on your computer, which is then synchronized back to the server when that computer comes back online.

For more, see Online and offline events, Offline resources in Firefox, Firefox 3: Offline App Demo by Mark Finkle, Offline Web Applications (Feb 2007) by Robert O’Callahan.

Password manager

In Firefox 3 the Password manager features are significantly improved and much more thoughtfully designed. The dialog box asking whether you would like Firefox to save a password has been replaced entirely — instead of popping up a dialog you are forced to dismiss before the login has succeeded, Firefox 3 presents the option to store a given password using an information bar that slides down from the top of the screen after you have logged in. This information bar is non-modal, so you can continue using the Web as normal without being forced to dismiss it first. The information bar will just hang around until you tell it what to do or leave the site you’re on.

Additionally, the Password manager has filtering and searching capabilities, making it significantly easier to find and manage passwords for particular sites. These changes are relatively subtle, but if you have hundreds of stored passwords, these small changes can make a huge difference over all.

For more, see Firefox 3: Password Management by Deb Richardson.

Performance improvements

Firefox 3 is the fastest, slimmest version of Firefox yet. Speed tests are showing a 2-4x improvement over Firefox 2 and 9x over Internet Explorer 7. Memory usage tests measure that Firefox 3 is 2x more efficient than Firefox 2 and 4.7x more efficient than IE7. There’s been a tremendous focus on performance for this release, and an incredible amount of effort has gone in to achieving these numbers.

For more about the memory usage improvements, see Firefox 3 Memory Usage by Stuart Parmenter.

Phishing protection

In addition to the new Malware protection that has been added for this release, Firefox 3 also has improved Phishing protection. Reported phishing sites are now blocked up front, before the pages are even loaded, so your computer is never in danger. Firefox 2 loaded the page, but warned you that it was a reported phishing site by greying it out and displaying a warning dialog. Firefox 3’s method, which matches the new Malware protection behaviour, is more secure and exposes you to less risk over all.

For more, see Mal-what? Firefox 3 vs. Bad People by Johnathan Nightingale.

Plugins

Plugins are small third-party programs that can be added to Firefox to manage content that Firefox does not handle itself. Without the Flash plugin, for example, you wouldn’t be able to watch YouTube videos. Firefox 3 offers a new feature as part of the revamped Add-ons manager which you can use to view, enable, and disable any plugins you have installed. You can also use the Plugins display to visit the original source of the plugin (if it is specified) by right-clicking on the plugin name and selecting “Visit Home Page”.

Also, as with other add-ons in Firefox 3, if a plugin is found to contain a security vulnerability, Firefox will automatically disable it and tell you where to get an updated version. This is a significant security improvement for Firefox, which previously had no way to let you know that you had bad plugins installed.

For more, see Firefox 3: Plugins by Deb Richardson.

Site Identification button

Ensuring that users are safe, secure, and protected while they browse the Web is one of the greatest challenges facing browser makers. Firefox 3 introduces an extremely important new security feature known as the Site Identification button. This button replaces and builds upon the ubiquitous “padlock” icon that has for so long been the primary security indicator used in browsers. Rather than just displaying a little padlock somewhere, Firefox 3 finds out as much as it can about the site you’re browsing and makes that information easily accessible through a button at the left end of the location bar.

The button can be one of three colors — gray, blue, or green — and displays the new Site Identification dialog when clicked. The dialog includes a matching gray, blue, or green “Passport Officer” icon, and shows a summary of the information available about the site’s identity. Now, instead of having a single indicator that a connection is either encrypted or not (the padlock), Firefox 3 provides you with much more information, covering a wide range of different security levels and situations.

For more, see Firefox 3: Site Identification button by Deb Richardson.

Smart Location Bar

In Firefox 3 the Location bar has been completely revamped in extremely exciting ways. Affectionately nicknamed the “AwesomeBar”, the new Smart Location Bar lets you use the URL field of your browser to do a keyword search of your history and bookmarks. You no longer have to remember the domain of the page you’re looking for — the Smart Location Bar will match what you’re typing (even multiple words!) against the URLs, page titles, and tags in your bookmarks and history, returning results sorted according to an algorithm that combines frequency and recency.

The Smart Location Bar results also show pages’ favicons, full titles, URLs, and whether you have bookmarked or tagged the site previously. While the change from Firefox 2 to Firefox 3 can be a little jarring for some, once you’ve used the Smart Location Bar for a while, you’ll wonder how you ever lived without it.

For more, see AwesomeBar is awesome by Deb Richardson, and this short screencast by Mike Beltzner.

Tabs

Tabs haven’t changed a whole lot between Firefox 2 and Firefox 3 except for the addition of new smooth scrolling animation. When you scrolled your tab bar in Firefox 2, the tabs moved back and forth a full tab at a time. This made scrolling a bit choppy and disjointed. With smooth tab scrolling, it’s much easier to understand how the movement is happening, and where tabs are moving to and from. This is most clearly demonstrated with a demo movie, so I created a quick one which you can see here: Firefox 3: Smooth tab scrolling (.swf).

Themes

One of the primary goals of the Firefox 3 visual refresh was to better integrate the browser with each computer platform while maintaining a unique visual identity and presence. Firefox 2 looked more or less the same on Windows, Mac, and Linux, but this is not the case for Firefox 3. There are four distinct new themes for Firefox 3 — one each for Linux, Mac OS X, Windows XP, and Windows Vista — and it touches every aspect of the application. Every button, window, tab, icon, and dialog box now blends in with the native platform, making Firefox feel much more like a natural part of your computing environment.

For more, see Firefox 3 Themes by Alex Faaborg, and Firefox 3 for theme developers by Gavin Sharp.

Video and audio feeds

Firefox 3 includes an enhanced feed preview page that now detects and displays enclosures alongside the associated blog entries. Additionally, Firefox 3 has the ability to associate video podcasts with one application, audio podcasts with another, and all other kinds of feeds with a third. These modifications are relatively subtle but fantastically useful once you start taking advantage of them.

For more, see Firefox 3 and enclosures by Will Guaraldi.

Vista parental controls support

Windows Vista includes built in parental controls that help you manage what your children can do on the computer. Firefox 3 includes some support for these parental controls — the Download manager is aware of situations where content gets blocked by proxies, and blocked downloads now display the correct UI message to indicate what has happened. This feature is only available for the Vista platform, and will be expanding and improving in future versions of Firefox.

For more, see Firefox 3: Parental controls by Jim Mathies and Mark Finkle.

Web application protocol handlers

Web application protocol handlers are a new Firefox 3 feature that gives more power to web applications. When you click on a link with a specific protocol, Firefox can now send that link data to a specified web application, if that web application has added support for this feature. For example, “mailto:” links can now be handled by a web application such as Yahoo! mail instead of by the default mail client on your desktop. Other currently supported protocols include “webcal:”, “tel:”, and “fax:”.

Developers who are interested in adding protocol support to web applications should read the Web-based protocol handlers article at the Mozilla Developer Center.

For more, see Firefox 3: Web protocol handlers by Mark Finkle.

Conclusion

There you have it, a broad (but by no means complete) swath of the new and improved features in Firefox 3 from Add-on management through Web application protocol handlers. Almost every part of the browser has been improved in some way.

Firefox 3 has been in development for roughly three years, all told, and has been contributed to by thousands of developers, designers, localizers, testers, marketers, and documentation writers around the globe. The Firefox browser is produced by one of the greatest open source communities in the world, and we’re all extremely proud of it and excited to finally get it into the hands of millions of people.

If you haven’t yet, you should go to the Firefox Download Day site and help set a new Guinness World Record. Once you’re done there, head over to Mozilla Party Central and find or set up an event to take part in. We hope you’ll all join us and help celebrate the release of the best Firefox ever.

Text and screenshots are licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

When Mozilla developers decided to incorporate the Cairo subsystem and build a new graphics layer from scratch, they also decided to completely rework the system that renders text in the browser.

Text is an incredibly important part of the Web. While graphics, audio, and video are increasingly common, we still spend the majority of our time on the Web just reading stuff. All the words you read in a web browser are rendered using a font which contains a set of glyphs used to form individual letters. For more simple written languages there may be a straightforward one-to-one mapping of characters to glyphs, but for more complex languages, one glyph may represent multiple characters.

Fonts can also contain additional features that let applications know how render the text in more advanced ways.

Kerning

Image source: Wikimedia Commons

Firefox 3 has improved support for font kerning, a fairly common font feature used to create visually equal spaces between letters. These fine spacing adjustments help the eye move more smoothly along a line of text. While these adjustments are usually quite subtle, they result in text that is much easier to read, which is why books and printed media make use of kerning most of the time. Not all fonts include kerning information, however, so Firefox can only kern those fonts that support it.

Ligatures

Font ligatures are now fully supported in Firefox 3. In written languages a ligature occurs where two or more letter-forms are joined as a single glyph. Ligatures usually replace consecutive characters that share common components, but aren’t widely used in English and other Latin language fonts. One English font that does make heavy use of ligatures is Zapfino, which has multiple sets of ligatures, some “required” and other “discretionary” that can be optionally applied.

Zapfino font ligature demo in a Firefox 3 textbox. Turns out Firefox doesn’t know how to spell Zapfino.

Ligatures in international text

While ligatures aren’t used that often in English, they are used very frequently in languages such as Arabic and Hindi (among countless others). Ligatures are required to render these languages properly.

Below is an example of a line of Arabic (which is read right to left) being written without ligatures (top) and with ligatures (bottom). The top version is actually unreadable, as it cannot be rendered correctly without ligatures.

Partial ligatures

Image source: Robert O’Callahan

Another feature of the new text system is the ability to lay out a string of content and then render any substring using the whole-string layout. This is important because the user should be able to select any substring, and Firefox needs to draw that substring using the current selection colors. Ligatures complicate this, but Robert O’Callahan has devised a system that makes this work in Firefox 3.

Hinting

Image source: Wikimedia Commons

Firefox 3 also has improved support for font hinting, another feature that complicates font rendering. Fonts can contain and run small sets of mathematical instructions to tune glyph shapes at different sizes. This is often seen at small sizes where it is used to increase readability, but it means you can’t uniformly scale a font as the font size changes. This is why web page layout can change if you’re zooming in or out.

Font smoothing, anti-aliasing

There are a number of ways to anti-alias text and all three major platforms (Windows, OS X, and Linux) do it differently. Joel on Software covers the differences nicely, so I won’t go into a lot of detail here. Suffice it to say that Firefox 3 continues to obey system settings on all platforms, so text in your browser will look like text in the other applications on your system.

Font types

There are a number of different types of fonts, the most common of which are OpenType, TrueType, Type 1, Postscript, and bitmap. The focus generally seems to be on OpenType these days, which supports all sorts of complicated features, but the others are still commonplace on many systems. Firefox 3 is now able to render all these different types of fonts properly, where most other browsers, including Firefox 2, cannot.

Font selection

Firefox 3 tries as hard as it can to render readable text no matter what fonts are requested. Pages often don’t specify a font at all, but if your computer contains a font that can render the text or glyphs in question, Firefox 3 will find that font and use it when rendering the web page. This means that Firefox 3 can successfully render text where other browsers fail.

What’s next?

While font support and text rendering in Firefox 3 have been improved a great deal, this isn’t the end of the story. Mozilla developers are already looking at supporting even more font and text features that could appear in future versions of Firefox, including better font family merging, font-stretch, text shadows, and downloadable fonts. For now, Firefox 3 represents a huge step forward in font support and text rendering. The new graphics layer has made it possible for Firefox 3 to support more languages (and therefore more localizations) than ever before.

Plugins are small third-party programs that can be added to Firefox to manage content that Firefox does not handle itself. Popular plugins include Adobe’s Flash player, Quicktime, Windows Media Player, Java, RealPlayer, and Shockwave. Without the Flash plugin, for example, you wouldn’t be able to watch YouTube videos.

In Firefox 2 the only way to get information about what plugins you have installed is to type “about:plugins” in the location bar. This brings up a page of somewhat complicated, detailed information about the plugins that looks like the following screenshot. The page is a simple list of information — there is no way to interact with the plugins through the page at all.

Firefox 3 still has the about:plugins page, but also offers a much more useful new feature as part of the revamped Add-ons Manager. In Firefox 3, you can open the Plugins section of the Add-ons Manager by going to the “Tools” menu, selecting “Add-ons”, then clicking on the “Plugins” tab of the Add-on Manager.

Here you can see a much simpler and easier to understand list of installed plugins and their version numbers. Each plugin can also be enabled or disabled with a single click, and you can go to the original source of the plugin (if it is specified) by right-clicking and selecting “Visit Home Page”.

In addition, like with other add-ons in Firefox 3, if a plugin is found to contain a security vulnerability, Firefox will automatically disable it and tell you where to get an updated version. This is a significant security improvement for Firefox, which previously had no way to let you know that you had bad plugins installed. The list of blocked plugins is stored locally on your computer, and Firefox periodically verifies that the list is completely up to date. If Mozilla knows about a vulnerable plugin, you’ll be informed and protected automatically within 24 hours.

And there you have it. Another small but vital improvement that makes Firefox 3 significantly safer and easier to use.

Ensuring that users are safe, secure, and protected while they browse the Web is one of the greatest challenges facing browser makers. Browser security involves a delicate balance between protecting the user from the dangers that exist on the Web and overly restricting the user’s freedom to go where she wants and see what she wants while surfing.

One of my favorite new Firefox 3 security features is the Site Identification button. This button replaces and builds upon the ubiquitous “padlock” icon that has for so long been the primary security indicator used in browsers. Firefox 2, for example, indicates that the connection to a site is encrypted by changing the background color of the location bar and displaying a padlock icon.

There is a major problem with the padlock, however, in that a lot of people believe that it means more than it really does. I certainly thought so until I had a long chat with Johnathan Nightingale (Mozilla’s security UI guru and lead imagineer for this feature) who explained to me that the padlock simply means “encrypted” rather than “safe”. Where the padlock has a very specific meaning related to browser security, I had given it a deeper, broader meaning that it didn’t really deserve.

So, what’s the difference between “encrypted” and “safe”? It turns out that it’s not actually that hard to set up a site that will get your browser to display a padlock. In fact, it’s easy enough that essentially anyone can do it, including bad guys who are just out to steal your credit card info, identity, and whatever else they can get. So the padlock means “encrypted” but doesn’t say anything about the validity of the domain, nor about the identity of the people at the other end of the encrypted connection.

It’s even possible to easily spoof a padlock of sorts, as demonstrated here:

The padlock isn’t in the right place, and it isn’t even quite the right padlock, but many users wouldn’t notice, falling back on the learned-but-not-quite-correct “padlock equals safe” assumption. It’s a very simple and imperfect spoof (they just have a padlock favicon for the website), but it’s enough to confuse and trick some users. Clearly things need to be improved.

How Firefox 3 makes things better

This is where the new Firefox 3 Site Identification Button comes in. Rather than just displaying a little padlock somewhere, Firefox 3 finds out as much as it can about the site you’re browsing and makes that information easily accessible through a single click of a button at the left end of the location bar.

The button can be one of three colors — gray, blue, or green — and displays the new Site Identification dialog when clicked. The dialog includes a matching gray, blue, or green “Passport Officer” icon, and shows a summary of the information available about the site’s identity.

So, instead of having a single indicator that a connection is either encrypted or not (the padlock), Firefox 3 presents you with information that covers a range of different security levels.

Here’s what the various colors mean:

Gray – No identity information

The gray Site Identification button indicates that the site doesn’t provide any identity information at all. Also, the connection between the browser and the server is either unencrypted or only partially encrypted, and should not be considered safe against possible eavesdroppers.

Most of the Web will have the gray button, because most sites don’t involve passing sensitive information back and forth and don’t really need to have verified identities or encrypted connections. So, gray is fine for the majority of sites.

Note: If you’re sending any sort of sensitive information (bank information, credit card data, Social Security Numbers, etc.) the Site Identification button should not be gray.

The gray Site Identity button, along with the fact that the Firefox 3 location bar doesn’t display a padlock in the location bar as a security indicator, makes it obvious that this site is spoofing a padlock and isn’t really encrypted or secure:

Blue – Basic identity information

The blue Site Identification button indicates that the site’s domain has been verified, and the connection between the browser and the server is encrypted and therefore protected against eavesdroppers.

When a domain has been verified, it means that the people who are running the site have bought a certificate proving that they own the domain and it is not being spoofed. For example, my bank’s site has this sort of certificate and an encrypted connection, so it displays a blue Site Identification button. When I click on the Site Identification button, it tells me that the easyweb.tdcanadatrust.com site is verified to be part of tdcanadatrust.com, as certified by RSA Data Security Inc. It also assures me that the connection is encrypted so no one can eavesdrop on the connection and steal my bank login information that way.

What’s not verfied in this situation is who actually owns the domain in question. There is no guarantee that tdcanadatrust.com is actually owned by the Toronto Dominion Bank. All that is being guaranteed here is that the domain is a valid domain, and my connection to it is encrypted.

If I’m still leery about a site’s identity when it is displaying a blue Site Identification button, I can see more information about the site by clicking the “More information…” button on the Site Identification dialog. Here I can view the site’s identity certificate, whether I’ve visited the site before, and if I have any cookies or passwords stored for the site.

This is the “Privacy and History” section of the security information displayed by the “More information…” button. Firefox 3 is here telling me that I’ve visited the site 94 times since I last cleared my browser history, that my browser is storing at least one cookie for the site, and that I have no saved passwords for the site. All of this information fits with my expectations, so I’m confident that this site is the site I think it is, and can now go about my banking more or less worry-free.

Green – Complete identity information

The green Site Identification button indicates that the site provides fully verified identity information about its owner, and that the connection is encrypted.

If a site has a green Site Identification button it means that it is using a new “Extended Validation certificate” (EV). You can read all about EV certificates at the link above, but to make a long story a little shorter, EV certificates are a special type of site validation certificate that requires a significantly more rigorous identity verification process than other types of certificate. So, while the blue Site Identification button indicates that a site’s domain is not being spoofed but does not have any verified information about who actually owns the domain, the green Site Identification button indicates that the domain is valid and that the owners of the domain are who you would expect them to be.

With the EV certificate, the Site Identification button assures you that paypal.com is owned by Paypal Inc., for example. Not only does the Site Identification button go green on the Paypal site, it also expands and displays the name of the owner in the button itself. The Site Identification dialog presents further detailed information.

To contrast, here’s what Firefox 2 does when it is on the paypal.com site:

If I click on the padlock, it brings up this Page Info:

Compared to the Firefox 3 Site Identification information, the Firefox 2 padlock and Page Info dialog aren’t exactly enlightening.

But wait, there’s more!

In other situations the Passport Officer icon appears in two other colors, but not as part of the Site Identification button.

Yellow – Invalid identity certificate

One thing you may encounter while surfing with Firefox 3 is a page that has a yellow Passport Officer icon. While the Site Identification button doesn’t have a “yellow” state, the Passport Officer icon will appear when there is some sort of problem with a site’s identity certificate.

The page above is actually generated by Firefox 3 itself, and its purpose is to block you from going to a site that has an invalid identity certificate. Just like driver’s licenses and passports, site identifications need to be renewed or they expire. And just like only you can use your passport, each web site should present the credentials belonging to that site.

In the case pictured above, the problem being warned about is that the site has a “self signed” identity certificate. On the Web, self signed certificates are like passports you made at home — they don’t mean anything, no one’s verified them, and while maybe the information on them is real, Firefox wants you to know that the passport has not been validated.

There are many perfectly valid sites that use self signed certificates simply so they can support encrypted connections to the server, and are not doing anything untoward or nefarious at all. This is why Firefox 3 allows you to add exceptions for sites who have self signed certificates that you know are not trying to trick you. Adding an exception is a simple process that only needs to be done once for each site encountered.

At the bottom of the “Secure Connection Failed” page that is blocking access to the site (shown above), there is a link that reads, “Or you can add an exception…”. Click this, and it shows the following to verify that this is what you really want to do:

Click the “Add Exception…” button there, and you’ll see this dialog, where you complete the process:

If you want to add the exception temporarily, make sure the “Permanently store this exception” checkbox at the bottom of the dialog is unchecked. Then click “Confirm Security Exception”, and Firefox 3 will no longer block you from visiting the page.

The yellow Passport Officer icon will appear in other situations as well, all related to there being a problem with the site’s identity certificate. The warning page will clearly explain what’s wrong and what you should do about it.

Red – Reported attack site

There is also a stern red Passport Officer icon who carries a little stop sign rather than a passport. This is part of Firefox 3’s Malware and Phishing protection system that protects users against reported attack sites, but I’ll talk about that stuff in a later blog post. For now, be assured that if you encounter the red Passport Officer, he’s protecting you from potential attacks and is only here to help.

The Firefox 3 system — with its Site Identification button, Site Identification dialog, much friendlier security-related Page Information, and invalid certificate warning pages — is vastly superior to older systems that relied so heavily on the padlock. Not only have the security indicators been expanded and improved, it’s also now much easier to understand the levels of security being encountered while surfing the Web. No system is perfect, of course, but Firefox 3 makes some extremely important and valuable strides towards improving user safety and security on the Web.

I got my first camera around 1985 or so. It was second-hand Fujica 35mm with a 50mm lens that I purchased for $110. I ran a lot of film through that camera, and used it constantly through all of high school and university, going so far as to process my own film, do my own prints, and work as the photo editor for the school paper. I finally replaced my old Fujica with a second-hand Nikon FM2n (and a handful of used prime lenses) in 1997 or 1998. Since then, of course, I’ve been a digital camera junkie, starting with a 1 megapixel Kodak DC240, then moving up through a host of various Nikon and Canon point-and-shoots until finally scraping together the cash for a proper DSLR, the Nikon D70s. I’ve upgraded once since then to the Nikon D80, and I think this is all the camera I need until Nikon puts out a reasonably priced full-frame sensor model. In short, I’m a bit of a photography enthusiast.

One thing that has always irritated me about looking at pictures on the web is that browsers don’t seem to display photographs properly. And by “photographs” I really mean “colors”. I spend a lot of time tweaking pictures in Photoshop, but when I upload them to my Flickr account and look at them in Firefox 2 the colors aren’t the same — they’re more washed out, dull, and lifeless. It’s a subtle thing, but annoying nonetheless.

Here’s an example of what I mean. The following is a split-photo created from two screenshots — one of my Flickr photos displayed in Firefox 2, and the same photo displayed in Photoshop:

It turns out that these differences are because of something called “color profile support”. Firefox 2 does not include support for color profiles, so the browser renders colors as best it can without doing special tweaks based on your system or custom color profiles.

The good news is that Firefox 3 does include full support for color profiles. The bad news is that color profile support will be turned off by default when Firefox 3 ships. I’ll explain why this is the case a little later.

Here’s a three-split photograph created using screenshots of another of my Flickr photos in Firefox 2, Firefox 3 (with color profile support enabled), and Photoshop. As you can see, the Firefox 3 photo matches the Photoshop photo exactly. This is happy news for photographers.

There are two ways to turn on color profile support in Firefox 3. The easiest is to install the Color Management add-on (which will work with Firefox 3 Beta 5). After you install the add-on and restart Firefox 3, color profile support is enabled, and you can specify a custom color profile by going to the Tools menu, selecting “Add-ons”, and clicking the Color Management add-on “Preferences” button. If you do not specify a color profile, the system default profile will be used, which should be OK for most people.

The second way to turn on color profile support is through the about:config page, which is a special page where a huge number of different (and usually hidden) Firefox options can be tweaked. This is not a recommended method for most people — about:config options should only be edited if you are very aware of what you’re doing. That said, if you do want to edit the options there, they are gfx.color_management.enabled and gfx.color_management.display_profile. For more about editing about:config, see the SUMO knowledgebase article, or the more detailed (if slightly out of date) content over on MozillaZine.

Here’s another example photo, this time just Firefox 2 compared to Firefox 3 with color profile support enabled:

Why wouldn’t you want it turned on?

So, if color profile support is so awesome (and it really is, in my opinion), why won’t it be on by default for Firefox 3? There are two main reasons.

First, color profile support causes a roughly 10-15% performance hit in many of our performance tests. If the images that you’re viewing are of a reasonable size, that’s probably negligible. If they’re large, it could be noticeable. We’re working on improving the performance of this feature so that we can turn it on by default in future releases.

Second, plugins do not currently support color profiles. What this means is if a plugin has been color-matched precisely with other parts of the page, it may no longer match when color profile support is turned on. As an example, here are two screenshots of a plugin displayed on the GuildWars game website, Firefox 2 on the left, and Firefox 3 (with color profile support enabled) on the right. You’ll notice that the background grey on the Firefox 3 screenshot is a lot darker, so the corners and bottom of the plugin no longer match it exactly. This is caused by color profile support being enabled — if disabled, Firefox 3 renders the background grey exactly the same way as Firefox 2.

So, there are currently some trade offs involved with enabling color profile support, and the Firefox 3 developers have opted to leave it disabled by default for the time being. That said, I have been using Firefox 3 with color profile support enabled for months and have never encountered any noticeable performance impact. It is likely that a future version of Firefox will see this feature enabled by default, which will be a happy day as everyone will then be able to see photographs on the web as they were meant to be seen. There will be great rejoicing.

For more examples of Firefox 2 vs. Firefox 3 (with color profile support enabled) screenshots, check out my Flickr set.

Post a comment here (moderation is on, so it could take a while for your comment to show up) or email me privately at deb-at-dria-dot-org.

On Smart Agents — Are services like StumbleUpon a rudimentary sort of “SmartAgent” where, instead of developing machine intelligence, we harness the “wisdom of crowds” to find new undiscovered content that fits into patterns of interest we develop over time?

• On Tabs
• Download Manager ideas
• On Tagging II (follow up to On Tagging).

Feel free to comment here or on the wiki Discuss pages, if you like.

Where you can find it: Shiira Project.