YouTube Enabler for mobile Firefox

It's great to be able to watch your favorite videos and other Flash content on a mobile phone, but it can affect the overall performance and interactivity of the browser, as well as network and battery consumption. We're working on an add-on that will give you complete control by letting you enable plugins, like Flash, for only the sites you choose. In the meantime, we've built an add-on that enables video on YouTube, a site that serves content well-optimized for mobile, and is, well, pretty popular. Here's how you get it installed - enjoy!

Step 1: Swipe over to the right sidebar and select Browser Tools (the gear button).

Step 2: Switch to the Add-ons Manager (the puzzle piece), and pan down to the Get Add-ons section

Step 3: Tap on the recommended add-on "YouTube Enabler", press "Add to Firefox" button, and restart Firefox when prompted. (If you don't see it there, just type "YouTube" into the Search Catalog field).

Step 4: Go to YouTube.com and play Flash videos!

But wait, there's more!

You can make your YouTube experience even better by adding a YouTube search button to Firefox.

Step 1: Go to youtube.com, tap on Firefox's site button, and tap the "Add Search" button.

Step 2: From now on, search for your favorite videos on YouTube directly from Firefox! Enter what you're looking for and tap the YouTube Video Search button.

bookmarks(desktop + mobile)

Thanks to some hard work from the Weave and Mobile teams, it's getting to be much easier to make sense of and navigate through the bookmarks that you sync between Firefox on your computer and your mobile device. Many of us usually just use the awesomebar to get at all of our synced bookmarks, but this is very useful for those times when a browse strategy is better than a search one.

You'll need a nightly build of Maemo Firefox and the most recent beta of Weave Sync to see much of this, for the moment, but now, when you open your bookmarks on your mobile, you'll see this:

Your mobile bookmarks are still at the top level of the bookmarks list, so they're close at hand, but your bookmarks from Firefox on your desktop system are in a folder at the top. When you pop it open, you get the following:

Which is the top level of your bookmarks hierarchy on the desktop. All your bookmarks, in whatever folders you've set up, are all in there!

There's more, though. When you go over to Firefox on your desktop machine, your mobile bookmarks will show up in a new top-level bucket, as seen here:

Which means that you can do more complex bookmark management, if you need to, where you have a larger screen and better keyboard.

One interesting side-effect of this better organization that I've found — I use my bookmarks toolbar on desktop Firefox mostly just for bookmarklets. With Weave Sync and this organization, they're pretty easy to find while mobile, and they work there too:

Adblock Plus + Firefox on maemo

Wladimir Palant and Mark Finkle have both blogged the great news already: development builds of Adblock Plus are now compatible with Firefox on Maemo (Fennec), thanks to Wladimir and Fabrice Desré. You can get the latest here and start browsing ad-free while mobile!

In case you want to see, I took some screenshots of the interesting bits of installing and setting up Adblock Plus in Firefox on an N900. Here they are (they've all been scaled down by flickr - you can click and get the large size if you want the full resolutions ones):

When you tap on the most recent .xpi file, Firefox confirms that you want to install.

You get a couple of transient alerts over the course of installation, but this is the one the browser shows when it's done. You can tap on this to go immediately to the add-ons manager, or go later, at your convenience.

In the add-ons manager, you tap to restart the browser.

On restart, Adblock Plus is installed, and in your list.

And tapping "Options" lets you do the configuration in place.

New York Times without ads! Very cool.

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.

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.