October 16, 2009

Fennec and Add-ons

One of the most interesting parts of adapting the design of Firefox for a mobile device has been in trying to pare down and simplify the Add-ons Manager. The powerful version on the desktop has too many sections and options to really work well on a small screen or for users with phone-oriented expectations of how to deal with installation. To do this, we merged the lists of different add-on types (extensions and themes), stacked sections like "Get Add-ons" and "Your Add-ons" into one finger-friendly flickable list, and even removed some information and options.

Having stripped it down to essentials, though, we found that we wanted to add some new abilities as well. As we tried to find places in Fennec's much-smaller-than-desktop-Firefox's UI-space for some existing Firefox capabilities, the Add-ons Manager started presenting itself as a sensible home. The two major ones, which I'll show below, are 1. managing search providers, and 2. add-ons' options.

Search Providers

In the Add-ons Manager, add-ons of all types are in one list, but their types are indicated by a label at the right of each row. After the extensions, at the bottom of this screen, you can see the first of the default search providers, Google.


Panning down reveals all of them, the default ones as well as some I've added (Facebook and Bugzilla@Mozilla):


If you want to disable or remove a search provider from the list on the "awesomescreen", you just tap on the row to reveal its buttons:


Oh, incidentally, the way you add a site's offered search provider in the first place is via the site button (we're still working on the final look of this panel):


A place for add-ons options

On the desktop, add-ons use a variety of mechanisms for presenting their options or preferences. Some use in-content pages while others provide a button that opens up a window of prefs; sometimes, a combination is used. Given that we've tried to avoid use of dialogs and windows as much as possible in Fennec, we thought it would be helpful to provide add-ons authors with an easy-to-use alternative that follows a usable mobile design-pattern: pannable lists. From the user's perspective, it looks like this:

A user opens the Add-ons Manager:


and taps on the add-on of interest (here, GraffiTwit, by Fabrice Desré, which is already using the options system):


When the user taps on the "Options" button, the set of options for that add-on emerge as part of the current pannable list:


Mark Finkle has written an overview of how to make use of this system on his blog, and there are further code snippets here.

Mobile add-ons tips

While I'm at it, Mark Finkle has been creating a great compendium of resources for add-on authors interested in mobile. You can find it here:


And I've contributed a probably-too-long write-up about designing for mobile in general and about adapting your add-on for Fennec in particular:


I hope it's helpful! Please get in touch if you have questions or suggestions.

Posted by madhava at 02:55 PM

October 07, 2009

Fennec Maemo beta 4


This happened last night, but good news is worth savouring. The fourth beta release of Fennec for Maemo is out, ready for downloading and trying out. Mark Finkle has a blog post about what's new in this release, but, in short, there's been a lot of progress made on polish and the general user-experience of the browser. I'll be posting again about some particulars in the next day or so.

In the meantime, try it for yourself! If you're looking at this on a N900 or N810, you can install directly from here. If you're not on a Maemo device, you can also download desktop builds for Windows, Mac, and Linux.

We're still grinding down a number of rough edges, of course. You can get a sense of what I'm paying attention to here, if you're interested: http://bit.ly/fennec-polish.

Posted by madhava at 07:11 PM