Firefox

Field Guide to Firefox 3

June 12th, 2008  |  Published in Browsers, Firefox, Mozilla, Work

FieldGuideToFirefox3sm


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

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

bookmarks2

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)

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

color-profile

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

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

fonts-and-text

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

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

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

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

location-bar

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

“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

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

offline

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

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

performance

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

phishing

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

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

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.

larry

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

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

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

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

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

vista-parental-controls

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

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.



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

All about SUMO: an interview with David Tenser

June 11th, 2008  |  Published in Firefox, Mozilla, Work

SUMO (support.mozilla.com) is the new community-powered Firefox user support site. If you have any questions about or problems with Firefox, SUMO is the place to go to find documentation, answers to frequently asked questions, a bustling community forum, and incredibly helpful folks in the new Live Chat facility.

David Tenser has been part of the Mozilla community for many years, and is now heading up the SUMO project. He took some time out of his increasingly busy schedule (Firefox 3 is just around the corner, after all) to answer a few questions for me.

Deb: Could you tell us a little bit about yourself and your history with the Mozilla project?

David: Certainly! Back in 2002, when Firefox was still known as Phoenix and wasn’t used by that many people, I started to help other users of the browser on the MozillaZine support forums and became more and more familiar with the ins and outs of the software. Although Phoenix was still very rough around the edges, it quickly became more popular. I noticed that people were asking the same questions over and over again in the forums, so I decided to do something about that and created a website listing the most frequently asked questions. From that point, my involvement with Mozilla got a lot deeper and I found myself spending several hours every day working on the site and helping people in the forums.

When Firefox 1.0 was about to be released, my help site was moved over to mozilla.org and became the official support site for Firefox. To show how much Mozilla appreciated my work on it, Marcia sent me a Firefox mug. From that day, I started to drink coffee like never before and four years later, it feels like something is wrong if I’m not drinking my morning coffee from that very mug. :)

To make a long story short, I was hired by Mozilla last year as the project manager for Firefox Support (SUMO), which finally turned my hobby into my full-time job, and made one of my dreams come true.

On a more personal note, I’m a guy who loves traveling, photography, animals, gadgets (sometimes referred to as the small units of proud men), and open source software. I live in Sweden with my girlfriend and our two cats in Eskilstuna, a city about one hour away from the glamorous Capital of Scandinavia. Oh, and did I mention I have a Firefox mug?

Deb: What is SUMO, and what purpose does it serve?

David: SUMO is short for support.mozilla.com, the official, community-powered support website for Mozilla Firefox. The main purpose of the site is to provide support for users of Firefox, helping them fix problems they might be running into, as well as teaching people how to use Firefox.

However, there are other important reasons why SUMO exists. Mozilla is a global community and there are many people interested in helping us promote the open web. Take me for example — when I started to volunteer for Mozilla, I wasn’t a particularly skilled software developer, so the thought of contributing code-wise felt unrealistic. Still, I wanted to give something back to Mozilla which provided me with the best web browser I’ve ever tried. To me, support was a way to contribute to the Mozilla project without the need for particular software development skills. During the process of helping people, my knowledge improved and I was able to become more deeply involved with the project.

Support is a powerful way for people to get involved with Mozilla, and really anyone can contribute with something. It’s also a fun way to learn more about your favorite browser while helping and interacting with other people.

Of course, Mozilla community support has existed for a long time. The difference with SUMO is that we are providing the infrastructure, empowering the community with a solution focusing on providing the best possible support experience. Hosting the website ourselves gives us the important benefit of learning more about our users. For example, we can see exactly which articles in the Knowledge Base are the most popular for any given week. Expect to see more around this soon as we just recently switched our site statistics backend. It’s also important to note that the increased knowledge about our users is helpful to everyone involved with the project, including all of our volunteers.

Deb: Who are the current staff of the SUMO project, and what are their roles?

David: It really depends on how you count, which I’ll get back to shortly. There are currently three people (aside from myself) working directly on the SUMO project:

Chris Ilias is the main administrator of the Knowledge Base and is, among other things, responsible for content review, user administration, and contributor documentation. He is also writing and editing support articles, and regularly talks to localizers to make sure they are on track and that their feedback is considered.

Jason Barnabe is the support forum administrator, and is also a skilled web developer who helps fixing bugs and implementing new features on the site. Recently, he has taken a more active role in this regard, and he has grand plans for making the forum a lot more useful for both helpers and end-users, which we’ll see more of soon.

Majken Connor is the administrator of Live Chat and is responsible for the helper training program and making sure the process of helping Firefox users is documented. She is also actively communicating with helpers to find out more about our shortcomings so we can continuously improve how we do things.

Although there is one person responsible for each of the three components of SUMO, everyone on the team also has an eye on the project as a whole, ensuring that the project is moving in the right direction. This is very important, as the individual components all play an important role in the overall project. Aside from countless discussions in the newsgroup, we have open meetings every Monday where we discuss aspects of the whole project. Anyone is invited to call in and participate, by the way.

Getting back to my original comment, SUMO is very much a community effort. As such, it’s hard to really define the different roles in the project. For example, we have Nelson Ko from the TikiWiki community working as our main software developer, implementing new features and fixing lots of bugs. He is working closely with the web development team at Mozilla, but he is also working with other TikiWiki community members such as Sylvie Greverend and Alexander Mette to make sure the changes we do in SUMO are merged upstream.

Then we have a number of key community members taking increasingly more active roles within the project. For example, Matthew Middleton and Cheng Wang have both done tremendous efforts recently with Live Chat and planning and executing events such as Support Firefox Day. Another example is Bo Bayles who is writing a lot of the excellent content in the Knowledge Base, as well as answering a lot of questions in the support forum.

So, the current staff of the SUMO project really includes anyone who wants to be part of the new support movement from Mozilla.

Deb: What are the various services SUMO provides to help Firefox users?

David: There are three components of SUMO, each serving very specific purposes. I’d like to talk about the services they provide both from a user’s and a contributor’s perspective.

The Knowledge Base is the heart of the website and is a large collection of support articles largely written by the community. The key focus of the Knowledge Base is troubleshooting — solving people’s problems with Firefox — as well as teaching people how to use the browser. If you’re experiencing a problem with Firefox, it’s likely someone else has had the same problem before, so from an end-user’s point of view, this is the first place to look for help because it includes well-written solutions to known problems. We make it very obvious to the user that they should search the Knowledge Base first by putting a large search box right on the start page.

Looking at it from a contributor’s point of view, the Knowledge Base is a great opportunity for people with basic writing skills to make a difference to the 170+ million users of Firefox. There is always room for improvement in any of the articles, for example, better explaining technical issues such that they are comprehensible for as many people as possible. Since the Knowledge Base is a wiki, anyone can sign up and make improvements. In addition, the content can also be translated into any other language, so if an article is not yet available in your language, it’s easy to just get started and translate it yourself, which immediately helps your fellow local Firefox users.

Naturally, because of the focus of fixing common problems, the Knowledge Base will never include the answers to all support questions a user can have about Firefox. The solution to this is the support forum, which is a way for users to get support for problems they couldn’t find the answer to in the Knowledge Base. Questions asked in there are seen by everyone browsing the forum, which means the chance of someone else reading a question and knowing the answer is high.

From a contributor’s point of view, the support forum is a fun and relaxed way to start helping other people, since you can read the questions and only respond to the ones you know the answers to. There is also no direct interaction with the user, meaning you can spend more time researching the problem before providing an answer.

Last but not least, we also offer a more direct way for users to get help, which we call Live Chat. Here you can have a direct discussion with a real person who will guide you through the process of solving whatever Firefox problem you may have. Sometimes following written instructions can be hard, and in these cases, Live Chat is the perfect answer because someone is right there to walk you through the process.

When looking at Live Chat in the point of view of a contributor, it is definitely a more challenging way of helping other people, since you can’t really just leave a chat session if you can’t help the user. It’s important to note that while you’re typically helping one user at a time, however, you are not on your own. Other contributors are working alongside you and you can always chat with them, or even invite another helper to join your session with a user. Live Chat is definitely the most social way of contributing to the SUMO project. It also gives you an interesting perspective on who our Firefox users really are, which I think even Firefox developers would benefit from experiencing on a regular basis.

Deb: For the Knowledge Base, what sort of tools are used to ensure the quality and accuracy of the articles?

David: First of all, we have a pretty neat review system in place to ensure that the accuracy of the articles are maintained. Although anyone can sign up on SUMO and start editing articles, a reviewer must read the changes made and approve them before they’re visible to our users. If a contributor proves to be a good writer whose edits are mostly approved without comments, he or she can become a reviewer as well. We currently have at least one reviewer per locale we support on SUMO.

Another important feature is the article feedback system. At the end of each Knowledge Base article, we ask two questions, one of them being “Was this article easy to understand?”. Answering this question is as easy as clicking Yes or No. The feedback we get from this allows us to continuously improve the quality of the articles. We also allow users to provide additional feedback, where they can specifically tell us what parts of the article are incorrect or hard to understand.

Deb: How many languages are the Knowledge Base articles being translated into, and how is that work managed?

David: All articles are treated as individual items and as such they may or may not be translated into a specific language. Because of this, it’s hard to give an accurate answer, because it depends on which article you look at. We have a set of articles that Firefox 3 links to from the help menu, and these are translated into more than 30 languages. There are other articles that are translated to around ten languages today. Finally, there are many articles that are not translated at all. We definitely need more help in translating Knowledge Base articles! If you spot a popular article that is not available in your language, please help us out by translating it yourself. It’s a great way to get involved with the Mozilla community.

For each locale, we have one person that is responsible for overseeing the contents in that language. He or she can also promote other contributors so they can help reviewing article edits. The localization features in SUMO are still a bit rough around the edges, and although we’ve certainly reached a state where the system is fully usable, we are continuously working hard to improve it even more.

Deb: How does the Live Chat system work, and how do users access it?

David: If a user can’t find the answer to their question in the Knowledge Base, there is a link at the end of the search results to ask a direct support question instead. From there, users have the option of either asking the question in the forum, or getting in touch with a Firefox helper directly using Live Chat.

A user who requests help using Live Chat enters his or her question and is then put in a queue. The helpers that are currently logged in with the chat application are then alerted with the user’s question asked upfront. If the helper knows the answer to the question, or wants to try to help the user anyway (often the challenge is part of the fun!), the helper simply accepts the incoming request and a one-on-one live chat session is started with the user.

As I said earlier, a helper can always ask other helpers currently logged in if the user’s question is too difficult or if the helper simply runs out of time and has to pass the user over to someone else. Live Chat helpers often get to know each other more and more so they’re really friends helping each other out.

Deb: The SUMO user support forums seem pretty active, how many support questions do you estimate have been handled through those so far?

David: Yes, the forums are indeed becoming increasingly active. We get around a thousand questions posted in the forum every week. A quick look at the posts from the last 48 hours shows that over 300 questions were asked, and seven of them are currently unanswered. This really shows the excellence of the SUMO community — they are really working hard to make sure our users are taken care of.

Deb: I know that SUMO is largely a volunteer effort — how many volunteer contributors do you estimate have helped out to date?

David: Taking content writers, localizers, and forum and live chat helpers into account, we’re looking at over 60 active contributors per week, which is nothing short of amazing. Based on stats going back a couple of months, the number is also growing every week! I think a large reason for this is because of the many different ways people can contribute to the project.

Deb: There’s a SUMO Screencast contest in progress right now. What’s that all about, and what are the prizes that can be won?

David: Glad you asked! As I mentioned earlier, the heart of SUMO is the Knowledge Base. We are constantly thinking of new ways to improve the content to make it easier for users to understand. As part of this ongoing work, we want to make the content more interactive by including screencasts that show a user how to perform a task rather than trying to describe it strictly through text. A screencast is basically a video clip recording the actions on a computer screen — think of it as an animated screenshot — where you can actually see the mouse cursor moving across the screen, clicking a button, or changing a setting. People who can’t understand the sometimes technical language used in computer software certainly benefit from a screencast compared to an article consisting of just text and screenshots. Even people who can understand the written information often benefit from the hands-on approach of a video.

The Firefox Screencast Contest is all about creating screencasts for the top 100 Knowledge Base articles of SUMO. Participating in the contest is super-easy. In fact, recording a screencast using e.g. Jing is often easier than creating a screenshot, because the result can be automatically uploaded to the web for you to share.

There will be one winner per article, meaning we’ll potentially have 100 winners! In addition, there will be one grand prize winner for the best screencast overall. Check out the Prizes page to see what you can win.

Finally, let’s not forget that if you’re one of the 100 winners, your screencast will be used in a Knowledge Base article read by thousands and thousands of Firefox users. Not only will you provide invaluable help for all those users, you will be credited for it as well.

Deb: Outside of the contest, what other tasks are you looking for volunteers to help with?

David: There are so many things we could use some help with, it’s hard to know where to start. It really depends on what you’re interested in, because usually that’s what you do best. So for example, if you’re a skilled writer, copy-editing Knowledge Base articles is a very good way to start. Just reading an article per day and fixing a few typos is enough to put your name at the end of an article.

If you’re more familiar with Firefox, browsing the support forum for unanswered questions is the perfect way to start your day. Helping someone and getting a thank you is a fun boost that has a stronger effect than your morning coffee (regardless of what mug you’re drinking it from!)

But really, there are so many other things people can do to help. One is to just sign up, log in, and browse around on the site and tell us what you think we could improve. Or reading the contributor documentation and letting us know if we’re missing any info. Or translating an article into Hebrew, discovering that the paragraphs are left aligned even though the language is right-to-left, and then filing a bug about that or even submitting a patch that fixes the problem. :)

There are so many ways to help out and get involved that there’s always going to be something for everyone to work on.

Deb: A lot of experienced Firefox users may want to help out but may think they’re not qualified or don’t have the time. What levels of experience and commitment are required to volunteer with the SUMO project?

David: This is the interesting thing about SUMO: there are no requirements! That you enjoy using Firefox is of course a bonus, mostly because you’ll enjoy hanging out with us more then. But really, volunteering with the SUMO project can be as simple as correcting a typo in a Knowledge Base article, or as challenging as organizing a full-day event around Firefox support.

There’s a way for everyone to help out with the SUMO project. If you’re not sure what you could do, just ask! Finally, if you don’t think you have the time, how about spending just a few minutes a day? You will definitely be able to make a difference.

Deb: If someone wanted to volunteer to help out with SUMO, what should they do? Who should they talk to?

David: Good question. We usually hang out on IRC (irc.mozilla.org, channel #sumo). Another great way to get in touch with us is to drop by the Contributor Forum and ask how you can get involved. Lastly, you can always e-mail me directly (djst at mozilla dot com).

There’s more information available at the Knowledge Base How to contribute article, as well.

Deb: Is there anything else you’d like to add or say to readers or potential volunteers?

David: Thanks for reading! If you’ve read this far you probably have at least five minutes to spare every day. You’re very welcome to spend them with us in the future and make a difference for other Firefox users around the world!


Firefox 3: Fonts and text

June 10th, 2008  |  Published in Browsers, Firefox, Mozilla, Work

[This post is largely written by Stuart Parmenter, with some light editing by me. Posted here because Stuart's away.]

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

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

ligatures-small

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

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.

arabic-ligatures

Partial 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

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

ko.wikipedia

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.

Firefox 3: History

June 9th, 2008  |  Published in Firefox, General, Work

[I use a Mac, so all the images in this post are of the Mac user interface. The UI for other platforms will differ slightly. Click on pictures to view other sizes.]

In Firefox 2 browser history was saved, by default, for nine days. I’m not really sure where that number came from (Why 9? Why not 7 or 10?), but I never found it to be a big deal. All I ever got out of history were links drawn a different color if I had visited them recently, and I don’t recall thinking about, never mind going through the process of, increasing the number of days my history was saved. I rarely looked at it, and never really cared about it much one way or another.

Fx2-history-options

All of this has changed in Firefox 3. Browser history is now incredibly, phenomenally, astonishingly useful.

Smart Location Bar

The primary value of history is now as a key source of data for the Smart Location Bar (affectionately nicknamed the “Awesomebar”) which I talked about in an earlier post, “Awesome bar is awesome“. The Smart Location Bar, in my opinion, is one of the game-changing new features in Firefox 3. Check out my other post for more details, or watch Mike Beltzner demo it (along with a handful of other new Firefox features) in this short screencast.

Firefox 3's AwesomeBar in action - one keyword

In addition to the Smart Location Bar, Firefox 3 History has been upgraded and made much more useful in a number of other ways.

History Sidebar

Fx3-history-sidebar

The History sidebar has been updated to match the new look and feel of Firefox 3, taking full advantage of the favicon storage that is part of the new Places back-end technology. You can still search history via the History sidebar, or sort entries by Date + Site, Date, Site, Most Visited, and Last Visited. The entries are much easier to scan and identify, however, because they now display the site’s favicon (a small identifying graphical icon) where those are available.

Fx3-history-sidebar-favicons

History Menu

Favicons are also used in the History menu, making it easier to identify items of interest in both lists of currently open and recently closed tabs.

Fx3-history-menu-favicons

History Library

Most significant, however, is the inclusion of History in the new Firefox Library. The Library is the renamed and expanded Bookmark Organizer, fully revamped for Firefox 3. You open the History section of the Library by going to the History menu, selecting “Show all History”, then clicking on the “History” entry in the top of the left sidebar.

Fx3-library-history

You can do all kinds of stuff in the History Library. You can search all the available entry data with one or more words, and also save your search as a smart folder.

fx3-library-history-search-multiword

You can view and sort history entries by Name, Tags, Location, Visit Date, Visit Count, Keyword, Description, Added date, or Last Modified date.

Fx3-library-history-sorting

History Tagging

You can even tag history entries right in the Library, effectively bookmarking them and adding them to the full bookmarking system.

Fx3-library-history-tagging

If you’re not sure whether you’ve already used a tag or not, you can expand the UI to show a full list of all the tags you’ve already used in your bookmarks, and just check off the ones you want to use for the item being tagged.

Fx3-library-history-tagging-checklist

Once bookmarked, you can add Keywords and a Description right in the Library interface.

Fx3-library-bookmark-search

Taking advantage of the new and much more efficient Places back-end, the default number of days to save history data has been increased from nine to 90.

Fx3-history-options

I used to clear my browser history as a matter of course, not really caring about that information, and I would create new Firefox profiles all willy-nilly, happy enough to just import my bookmarks and start fresh. With Firefox 3, however, my browser History is suddenly extremely valuable, and incredibly useful in a variety of ways. Clearing history or starting a new profile is now remarkably painful, and not something to be done lightly.

This collection of private, locally-stored, personal, and searchable data has changed how I use the Web, and I can’t imagine ever going back to the old way of doing things. I’ve gone so far as to increase my history storage to a full year. It’s absolutely worth it.

fx3-browser-history-365

For developers…

If you want to learn more about the new Places back-end and how to develop add-ons for it, start by reading the Places documentation at the Mozilla Developer Center.


Firefox 3: Plugins

May 30th, 2008  |  Published in Browsers, Firefox, Mozilla, Work

[I use a Mac, so all the images in this post are of the Mac user interface. The UI for other platforms will differ slightly. Click on pictures to view other sizes.]

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.

Fx2 about-plugins

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.

fx3-plugins-addon-mgr-rt-click

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.

20 top add-ons that are ready for Firefox 3

May 23rd, 2008  |  Published in Firefox, Mozilla, Software, Work, add-ons

Being involved with Firefox development and testing is both an honour and a privilege. The one major drawback to being on the bleeding edge of the Mozillaverse, however, is that none of your add-ons ever work. Sure, I’ve had the absolute joy of using the Smart Location Bar (aka: Awesomebar) for ages, but I’ve also been living without any of my add-ons for months. It’s been hard. Very, very hard.

Naturally, when faced with the choice between using the new Firefox 3 features with no add-ons and reverting to Firefox 2 and getting all my add-ons back, I stuck with Firefox 3. I’m not kidding when I say that Firefox 3 is better than Firefox 2 in pretty much every possible way. It’s awesome and there’s no way I’m going back. Now, however, I don’t have to choose one over the other — with the recent delivery of Firefox 3 Release Candidate 1, I get to have my cake and eat it too.

Release Candidate 1, you see, coincides with the addons.mozilla.org (AMO) site adding support for the final add-ons MaxVersion update. This means that all Firefox add-ons can now finally be updated such that they will work with the final release of Firefox 3. Lots of add-on developers have been waiting for this, so a huge number of add-ons are now getting updated. I spent yesterday going through the list and playing with some of my favourites, and it’s like Christmas has come seven months early.

I know a lot of folks are waiting for add-ons to get updated before diving in to help test the Firefox 3 release candidate, but now’s your chance. Dozens of add-ons are being updated to work with Firefox 3 every day, and there are hundreds already set to go. Here’s a list of 20 I’ve installed and checked out (arranged conveniently in alphabetical order):

Adblock Plus – This one does pretty much what it says on the box: Adblock blocks ads, and does so with grace and aplomb. This is one of the universals that pretty much every Firefox user I know has installed, and is one of the hardest to live without. Also updated for Firefox 3 is the Adblock Filterset.G Updater add-on companion for Adblock.

adblockplus

Download Statusbar – While the Firefox 3 download manager has been revamped, some folks have slightly more hardcore download requirements, which is where Download Statusbar comes in. Freshly updated for Firefox 3, this is one of the more popular Firefox add-ons out there.

downloadstatusbar

Faviconize Tab – This is the one add-on I really have a hard time living without, and I’m unbelievably happy it’s finally updated for Firefox 3. I danced a dance of joy when I was finally able to stop overriding my add-ons compatibility check (which is generally a terrible idea) and could actually install Faviconize Tab for real. Such a simple thing, but such an incredibly useful thing. I love this add-on.

faviconizetab

Firefox Companion for Ebay – I’m still a little afraid of Ebay (impulse shopping habits + credit card + 24hr access to a world of awesome things to buy = fear), but I do use the Companion to watch some of the more interesting auctions I run across.

ebay2

Flashblock – One of the more infuriating things about trying to read on the Web are the flippy flashy animated doodads that hover around the margins making it impossible to focus. This is pretty much what Flashblock is created to fix, blocking the animated fiddlybits until you click a button on each to display it. This is a vital sanity saver for me, and I’m really glad it’s updated now.

flashblock

FlashGot – If you do a lot of downloading, FlashGot is a must-have Firefox add-on. This being updated for Firefox 3 is going to save me a ton of time and mouseclicks.

flashgot

Forecastfox – Being Canadian and currently on the edge of summer, I’m a little obsessed with the weather these days. When it’s not raining, or cold, or too windy to stand up, or dark, it’s actually gorgeous out, and keeping close track of when that sun is going to shine is a vital part of day-to-day life in May. Forecastfox being ready for Firefox 3 means I don’t have to obsessive-compulsively reload the Environment Canada website any more.

forecastfox

GooglePreview – This is actually a “new to me” add-on that I discovered yesterday, but it’s really great. Again, it’s simple and unobtrusive, just quietly enhancing your Web experience without getting in your way. What it does is add a small preview thumbnail to your Google search results. It’s just neat.

googlepreview

Live HTTP Headers – This one’s for the Web Developers in the audience, as it lets you view the running stream of HTTP headers of the pages you browse. Very useful, and ready for Firefox 3.

livehttpheaders2

Mouse Gestures – This is another “new to me” add-on that I was playing with yesterday that may change how I use the Web. I never really thought much about mouse gestures until I started using them, and it turns out they’re actually pretty awesome. I’ll definitely be messing around with this one for a while to see if the novelty wears off, or whether it’ll be a long-term sort of add-on for me.

mousegestures

NoScript – NoScript is a hugely popular security-related add-on that gives Firefox users very fine-grained control over what JavaScript, Java, and executable content is allowed to run in the browser.

noscript

ScribeFire – Formerly known as “Performancing”, ScribeFire is a very cool and full-featured blog editor that integrates with Firefox. Now that it’s ready for Firefox 3 I’m going to start using it again — it makes sense to have a blog editor integrated with a browser, in my opinion, because blogging is so absolutely tied to the Web. ScribeFire has come a long way since its original launch, so if you haven’t checked it out lately, you should take it for a spin.

scribefire

Shareaholic – If you’re like me and spend a whole lot of time looking at things on the Web, you end up finding piles of things that you want to share with other folks. Shareaholic is a fantastic add-on for this, integrating with digg, del.icio.us, facebook, foxiewire, friendfeed, google bookmarks, google reader, magnolia, reddit, stumbleupon, tumbler, twitter, and more. Jay Meattle, the developer who also happened to win the Extend Firefox 2 contest with this add-on, has recently updated it to work with Firefox 3. And there has been much rejoicing.

shareaholic

Speed Dial – The Speed Dial feature was originally debuted by the Opera web browser, but several add-ons mimicking the functionality very quickly came available for Firefox. I like Speed Dial in particular because it’s very straightforward, super easy to customize, and is now completely up to date for Firefox 3.

speeddial

StumbleUpon – I didn’t actually start using this add-on until my Dad told me about it one day, and now I’m a bit of an addict. Be wary, however — StumbleUpon is a bit dangerous in that it can eat days of your life if you’re not careful. I’m just glad the toolbar can be toggled on and off, else I’d never get anything done. Fun stuff, extraordinarily popular, very slick.

stumbleupon

ThumbStrips – ThumbStrips creates a browseable graphical timeline of your surfing history that is displayed along the bottom of the browser. Originally I figured it would be like another, fancier version of tabs but it’s not that at all — it makes flipping back and forth through your recent browser history really easy, which can be great in situations when you’re checking out Google search results and so forth. Neat stuff.

thumbstrips

TwitterFox – Being slightly unnerved by social networking in general (FaceBook, LinkedIn, etc.) I generally don’t spend much time on such sites, but I’ve made an exception for Twitter. Twitter is simple and fun. It’s also useful, believe it or not, and (if you keep your “Following” list pared down sensibly) it can be super interesting and informative. TwitterFox is a neat little add-on that integrates Twitter right into Firefox that works well and generally does what you expect it to do.

twitterfox

Video DownloadHelper – If you’re interested in saving Web videos to your local machine — for example, to watch while on a plane or otherwise offline — Video DownloadHelper is a great add-on to use. Sites it works with include YouTube, MySpace, Google videos, DailyMotion, iFilm, and others.

videodownloadhelper

Web Developer Toolbar – Chris Pederick’s Web Developer Toolbar is one of the absolute must-have Firefox add-ons if you’re a Web Developer. It’s been around for years and puts a world of useful utilities at your fingertips, saving time, effort, and frustration.

webdevtoolbar

Wizz RSS Reader – If you’re a bit of a Webfeed junkie and LiveBookmarks aren’t enough, you’ll probably want to check out the Wizz RSS news reader add-on. By way of the sidebar, Wizz lets you subscribe to Webfeeds and quickly flip through new posts or updates to those sites. Wizz is, in my opinion, a great middle ground between LiveBookmarks and a full-featured desktop Webfeed client like Vienna.

wizzrss

So, there you have it — 20 top notch add-ons that are ready to go for Firefox 3. If you’re curious about Firefox 3 and would like to check out the Release Candidate and play with some of these, Friday afternoon seems like a perfectly reasonable time to do it.

Alex Polvi is doing a weekly update about the “State of the Add-ons” that need help getting updated for Firefox 3. If you’re an add-on developer (or would like to be one!) and would like to help, head over to Polvi’s blog and he’ll point you in the right direction.


Firefox 3: Password management

May 15th, 2008  |  Published in Firefox, Mozilla, Work

[I use a Mac, so all the images in this post are of the Mac user interface. The UI for other platforms will differ slightly. Click on pictures to view other sizes.]

While Firefox 3 includes lots of new features and big shiny changes, it also includes a pile of more subtle, but no less important, changes and improvements. One area that has been revisited (rather than totally redesigned) is Firefox’s password management facility.

In Firefox 2, password management is a bit of a struggle. When you enter a password on a page you are asked whether you want Firefox to remember that password or not. The problem with this particular dialog is twofold: first, it appears before the login is complete so you have no way of knowing whether you have actually entered the correct password; second, it is modal, blocking any other browser actions, so there is no way to verify that the password works without first dismissing the dialog box. It’s a good feature, it’s just sort of poorly designed.

Fx2-modal-dialog

The actual Firefox 2 password manager is also a bit rough around the edges. You can only view the full list of all sites for which there are stored passwords, sorted alphabetically by URL or login name. There is no way to filter or search the list, so to find an old stored password, you have to either remember the URL and scroll down to the item in the list or scan through the full list manually. I have hundreds of passwords, so as you can imagine it’s all a bit of a pain.

Fx2-password-manager

Firefox 3 fixes all of this, and the new password management features are significantly improved and much, much more thoughtfully designed.

The dialog box asking whether you would like Firefox to save a password has been replaced entirely. Now, instead of popping up a modal dialog 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 allows you to verify that the password is correct before asking Firefox 3 to store that password.

password-remembering-infobar

The information bar is non-modal as well, so you can continue using the Web as normal without being forced to dismiss it first. In fact, the information bar will continue to hang around so long as you’re on that login’s site or manually dismiss it. When you leave the site, the information bar will automatically disappear. Not to worry, however, because if you return to the site and login again, the information bar will reappear.

Additionally, the password manager has filtering and searching capabilities, making it significantly easier to find and deal with passwords for certain sites. For example, here I’m filtering the list so it displays only those sites that include “mozilla.org” as part of the domain:

saved-passwords-filtered

Other password-related features are more or less the same in Firefox 3, including creating and using a master password (which you should all do, really), displaying stored passwords, and so forth. The changes are relatively subtle, but if you’re like me and have hundreds of stored passwords these small changes can make a huge, huge difference over all.

Other posts I’ve written about Firefox 3

Firefox 3: Site Identification button

May 6th, 2008  |  Published in Browsers, Firefox, Mozilla, Work

[I use a Mac, so all the images in this post are of the Mac user interface. The UI for other platforms will differ slightly. Click on pictures to view other sizes. French translation of this article now available!]

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.

fx2-paypal-locbar

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:

fx2-emergentchaos-locbar

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.

site-identification-button2

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.

gray-blue-green-icons

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

gray-icon

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.

fx3-gray-dialog

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:

fx3-emergentchaos-locbar

Blue – Basic identity information

blue-icon

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.

fx3-blue-dialog

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.

tdct-pageinfo-dialog-cropped

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

green-icon

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.

fx3-green-dialog

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

fx2-paypal-locbar

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

fx2-paypal-pageinfo

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

yellow-icon

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.

fx3-selfsigned-warning

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:

fx3-selfsigned-adding-exception-step1

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

fx3-selfsigned-adding-exception-step2

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

red-icon

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.


Firefox 3: Color profile support (oh the pretty, pretty colors)

April 29th, 2008  |  Published in Browsers, Firefox, Mozilla, Photography, Work

[Click on pictures to view different sizes.]

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:

Firefox2-Photoshop-Split

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.

ColorProfileExample6a

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:

ColorProfileExample1

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.

GW-side-by-side

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.

ColorProfileExample2

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

Firefox 3 Bookmarks (My god, it’s full of stars…)

April 22nd, 2008  |  Published in Firefox, Mozilla, Work

[Note: I use a Mac, so all screenshots and descriptions are of the Mac UI. Things are likely different for other platforms. Also, you can click on all the pictures below to view other sizes.]

I’ve never been a huge fan of traditional bookmarks — I tend to bookmark lots of things and my bookmarking system always degraded to the point of uselessness pretty quickly. Bookmarks became a bit of a junk drawer for me — I’d throw things in there and they’d end up forgotten, or lost, or just never pulled out and looked at again. I never had the patience to create a nice clean folder hierarchy and file things neatly away. I am clearly not a student of the “everything has a place, and everything in its place” school of thought.

Firefox 3 introduces a few new features to bookmarks that I think make them much, much easier to use, more useful in general, and much more useful in particular for catastrophically disorganized folk like me. The three main features being introduced are: Bookmark Stars, Bookmark Tags, and Smart Bookmark Folders.

Bookmark Stars

Bookmark Stars are a quick and easy way to bookmark a page with a single click. At the right end of the Location bar there is now a star icon that is hollow if a page is not bookmarked, and solid if it is.

To bookmark a page using the star, you simply click it once. Like so:

1-empty-star

Click.

2-starred

That’s it. Firefox 3 introduces one-click bookmarking — the quickest and easiest way to add a Location to your personal bookmark list. You don’t have to do anything else beyond this, but you can if you want to.

If you click the star again, it opens the Bookmark dialog, where you can edit the bookmark title, add tags to the bookmark, file the bookmark in a folder, or delete the bookmark. Naturally, you can still open the Bookmark dialog with cmd-D (or ctrl-D if you’re not using a Mac).

3-open-bookmark-dialog

The Bookmark dialog has other surprises, too. The drop arrows beside the Folder and Tags fields expand the dialog so you can add new folders, browse through your existing folder tree, or select pre-existing tags with a checklist.

ReplacementFolderView

6-extended-tag-list

Of course, if you want to delete the bookmark, you can do that here as well, using the “Remove Bookmark” button.

7-delete-bookmark

Bookmark Tags

Tags are a way to add flexible “extra” information to a bookmark. Where Folders let you organize bookmarks in a way, they’re limited in that you can only put each bookmark in a single folder. Not so with tags — you can add as many tags to a bookmark as you want. For example, I could put my “French Onion Soup” recipe into a “Recipes” folder (or even a “Soup” subfolder under “Recipes”), but I couldn’t put that bookmark into both the “Vegetable” and “Soup” subfolders at the same time. On the other hand, I can tag that single bookmark with “recipes”, “soup”, “french”, “onion”, “vegetable”, and anything else I want.

So how is this flexible information useful? The two most obvious ways are through the Bookmark Organizer and the “AwesomeBar” (that I discuss in an earlier post).

The Firefox 3 Bookmark Organizer (now called the “Library”) can be accessed through the “Bookmarks” menu, and looks like this:

9-bookmark-organizer

As in Firefox 2 you can browse around your bookmark folders here, if you have any:

10-sort-by-tag

What’s new is the ability to list bookmarks by tag. By expanding my “Tags” folder and clicking on “soup”, for example, I can get a list of all the bookmarks I have that have the “soup” tag. If a bookmark has a “soup” tag and also has a “recipes” tag, it will also show up in the “recipes” tag list:

12-view-tagged

Tags allow you to very quickly file a single bookmark in a bunch of different places, rather than having to create an exhaustive hierarchy of folders and file each bookmark carefully within that organizational structure. I find that this saves a ton of time and effort in the long-run, and makes it much easier for me to find my bookmarks later.

As I mentioned, tags are one of the things searched when you type words in the Location bar, like so:

awesomebar-tag-search

If you want to read more about the new Location bar features (affectionately dubbed the “AwesomeBar”), check out my other post all about it.

Smart Bookmark Folders

Finally, there are Smart Bookmark Folders. These are basically “saved searches” that automatically update when you add new items matching that search to your bookmarks. So, if I create a “Soup recipes” Smart Bookmark Folder, any time I add a bookmark that has “soup” and “recipes” in the title or tag, it will automatically be added to my “Soup recipes” folder.

Creating a Smart Bookmark Folder is easy. First, do a search in the Bookmark Organizer, then click the “Save” button at the right hand side below the search bar:

16-create-smart-folder

That will prompt you to name your Smart Bookmark Folder, which I’m calling “Soup recipes”:

17-name-smart-folder

This adds a Smart Bookmark Folder called “Soup recipes” to my list of folders, with a nice purple folder icon indicating that it’s not just a regular folder. Now I can find all the results for a “soup recipes” search just by clicking on that folder, and new items will be included as they are added over time:

18-view-contents-of-smart-folder

These new Bookmark features — Stars, Tags, and Smart Folders — in combination with the “AwesomeBar” have completely changed how I use and think about Bookmarks. Where once Bookmarks were my junk drawer, they’re now flexible and powerful enough to make a significant difference in how I use the Web every day.