Mobile/AddonsTrainingWeek/SpeakerNotesA

From MozillaWiki
Jump to: navigation, search

Building an Add-on for Firefox (mobile)

  • Download the latest release or nightly version of Firefox for mobile (Fennec).
  • Launch the browser and make sure the browser is functioning correctly.
  • Setup some preferences that will make it easier to debug problems. Go to about:config.
    • MDC page
    • javascript.options.showInConsole = true
    • browser.dom.window.dump.enabled = true
    • extensions.logging.enabled = true
  • Start editing the boilerplate of your add-on.
    • Download the blank template or use the tool of your choice.
    • Unpack or create add-on in a development folder.
    • Use the editor of your choice.
    • MDC page
    • Or you can use a finished version of the demo.
  • Make a test link from the profile folder to your add-on development folder.
  • Launch the browser and verify that your add-on installed.
    • If the add-on did not install, check the error console for potential problems.
  • Now start adding more functionality to your add-on and keep testing in the browser.
  • When ready, ZIP the contents of your add-on development folder into a XPI and post to AMO.

Porting an Add-on from Desktop to Mobile

  • UI is very different. Read about the mobile UI guidelines.
    • You will not be able to assume the desktop XUL overlays will "just work".
    • Dialogs and Preferences are handled very differently.
    • Screen size becomes very important and a limiting factor. Work on your layout.
    • Maintaining "touch-friendly" widgets is critical.
    • Simplify everything.
  • JS front-end API's are very different.
    • XPCOM and features of the Mozilla platform are the same.
    • JS API's found in the UI code are different.
    • Out-of-process web content makes common tasks and patterns very different. Learn about ways to work with multiple processes.
  • Guidelines
    • Larger add-ons should not be ported "all at once". Break the add-on into smaller pieces and port each piece individually.
    • Porting non-UI code should be straight forward, but scan XPCOM components and JSM's for potential UI problems.
    • Out-of-process web content has a bit of a learning curve, but once you become comfortable with processing messages, you start moving faster and become more productive.
    • Read the best practices document for more pointers.