firefox mobile add-ons - linuxtag 2010

Mobile Firefox Add-ons

Small Screen, Big Ideas

Brian King LinuxTag, 12.6.2010, Berlin

Picture by djwudi on Flickr

Platforms

* Maemo / Nokia N900

* Android

Questions about other platforms? See:

https://wiki.mozilla.org/Mobile/Platforms

Firefox Mobile 1.1

Form assistant improvements, including autocompleteAuto update add-onsPortrait support on N900Context Menu with Open Link in New Tab and Save ImageManage site preferences (clearing passwords and others)Improved Site MenuSave page to PDF

Firefox Mobile 2.0

MultitouchFirefox SyncSharingSession RestoreElectrolysisOut-of-process PluginsVideo optimizationUI Transitons/Animations

FOCUS

Picture by Nukeador

The Good Parts

It's just the same stack you find in FirefoxXULCSS JSXPCOM

Nice guidelines help you make you add-on blend-in

sometimes it's easier to *not* be able to make choices

Mobile Add-ons

Same process as building desktop Firefox add-onsoverlays & manifests JavaScript & XUL

Different application structure

UI is very differentVery sensitive to slow codeDesktop != Mobile

More constraints but also new possibilities

Performance, screen size, keyboard, user's attentionOrientation, GPS, camera, permanence, ...

No Phone Needed!

... to get started. However, *required* for QA.

Desktop builds of Fennec are available:Major releases NightliesBuild your own

A Maemo virtual image for developing and running Maemoapplications

Step Back

If you are porting an existing add-on, ask yourself:

Does your add-on make sense in the mobile context?Performance, performance, performanceHow much does the UI need to change?

Dream up new ideas!

Picture by Madhava Enros on Flickr

NOTMUCHSPAC

E

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 listsUse the right button CSS classesDon't make overly complicated preferencesChoose good defaults so users don't have to think

Performance

It's easy to slow things down.

Use async operations whenever possibleFile I/O and XHR fetches will be slowInitialization code can hurt startup time Post-pageload code can hurt UX

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/

DEMO TIME!

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/

Resources

Firefox Mobile: http://www.mozilla.com/mobile/UI Guidelines: https://wiki.mozilla.org/Mobile/Fennec/Extensions/UserInterfaceWiki: http://wiki.mozilla.org/MobileMozilla Developer Center for Mobile: https://developer.mozilla.org/En/MobileMobile listing on Mozilla Add-ons: https://addons.mozilla.org/en-US/mobile/

Contact the Mozilla Mobile team#mobile on Mozilla IRCmozilla.dev.platforms.mobile on news.mozilla.org

Thanks!

Get in touch

@brianking

www.briks.si/kontakt