It might be obvious to say this, but Firefox Mobile add-ons are much different beasts than their desktop counterparts. All the goodness of the Mozilla Platform is there and available to use, but the UI is completely different. Less hooks are available simply because there is less space, but the design and UI flow provide different challenges. For authors porting existing add-ons, I want to challenge you to really think whether you should do it. Ask yourself, does it make sense in this context? Does it fit into the browsing habits of users of smaller devices, which is different than desktop usage? For example, users on the go want more information suggested to them as opposed to hunting for it which can be cumbersome. Without being discouraging, my goal is to give inspiration for new ideas. Some of the best add-ons will be ones built from the ground up that take advantage of device capabilities such as GPS and voice.

1. Mobile Firefox Add-ons
Small Screen, Big Ideas
Brian King
LinuxTag, 12.6.2010, Berlin

2. Picture by djwudi on Flickr

3. Platforms
* Maemo / Nokia N900
* Android
Questions about other platforms? See:
https://wiki.mozilla.org/Mobile/Platforms

4. Firefox Mobile 1.1
Form assistant improvements, including autocomplete
Auto update add-ons
Portrait support on N900
Context Menu with Open Link in New Tab and Save Image
Manage site preferences (clearing passwords and others)
Improved Site Menu
Save page to PDF

5. Firefox Mobile 2.0
Multitouch
Firefox Sync
Sharing
Session Restore
Electrolysis
Out-of-process Plugins
Video optimization
UI Transitons/Animations

6. FOCU
S

7. Picture by Nukeador

8. The Good Parts
It's just the same stack you find in Firefox
XUL
CSS
JS
XPCOM
Nice guidelines help you make you add-on blend-in
sometimes it's easier to *not* be able to make choices

9. Mobile Add-ons
Same process as building desktop Firefox add-ons
overlays & manifests
JavaScript & XUL
Different application structure
UI is very different
Very sensitive to slow code
Desktop != Mobile
More constraints but also new possibilities
Performance, screen size, keyboard, user's attention
Orientation, GPS, camera, permanence, ...

10. No Phone Needed!
... to get started. However, *required* for QA.
Desktop builds of Fennec are available:
Major releases
Nightlies
Build your own
A Maemo virtual image for developing and running Maemo
applications

11. Step Back
If you are porting an existing add-on, ask yourself:
Does your add-on make sense in the mobile context?
Performance, performance, performance
How much does the UI need to change?
Dream up new ideas!

12. Picture by Madhava Enros on Flickr

13. NOT
MUCH
SPAC

14. UI Tips
Firefox Mobile has several ways to help make a touch-friendly
UI:
Make simple lists using <richlistbox>
Use the existing CSS classes
Use .show-on-select behaviors to expand/collapse items in
lists
Use the right button CSS classes
Don't make overly complicated preferences
Choose good defaults so users don't have to think

15. Performance
It's easy to slow things down.
Use async operations whenever possible
File I/O and XHR fetches will be slow
Initialization code can hurt startup time
Post-pageload code can hurt UX

17. Services and Sync
Firefox Sync (formerly Weave deployed as an add-on).
Will eventually be "built-in".
Look for more add-ons built around services.
https://services.mozilla.com/

18. DEMO
TIME!

19. Jetpack on Mobile
The original Jetpack prototype had a rough port to Fennec.
The new SDK will be built in to Firefox and many of the APIs
should work out-of-the-box. Designed to be application
agnostic.
Follow the bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=534900
More on Jetpack:
https://jetpack.mozillalabs.com/

20. Resources
Firefox Mobile: http://www.mozilla.com/mobile/
UI Guidelines: https://wiki.mozilla.
org/Mobile/Fennec/Extensions/UserInterface
Wiki: http://wiki.mozilla.org/Mobile
Mozilla Developer Center for Mobile: https://developer.
mozilla.org/En/Mobile
Mobile listing on Mozilla Add-ons: https://addons.mozilla.
org/en-US/mobile/
Contact the Mozilla Mobile team
#mobile on Mozilla IRC
mozilla.dev.platforms.mobile on news.mozilla.org

21. Thanks!
Get in touch
@brianking
www.briks.si/kontakt