Save 37% off PRO during our Black Friday Sale! »

Bringing Firefox to Android

Bringing Firefox to Android

Last year, Firefox for Android was rebuilt from scratch to use Android’s UI framework instead of Mozilla’s XUL, improving its overall performance and user experience through a series of fast-paced development cycles. In this talk, you’ll learn how the Mozillians implemented the new Firefox for Android and which technical challenges he faced to get Mozilla’s web platform running efficiently on Android.


Lucas Rocha

October 25, 2013


  1. Bringing to Android

  2. Lucas Rocha |

  3. Our mission is to promote openness, innovation, and opportunity on

    the Web.
  4. Origins First released in March 2011 Built on the same

    technologies than desktop Firefox Gecko rendering for UI and Web content. Multi-process. libxul on the critical path Startup time, memory footprint, responsiveness issues.
  5. Native Since June 2012, Firefox 14 Started in October 2011

    Sharp focus on performance Move libxul out of critical path Full UI rewrite using the Android toolkit
  6. Up we go. Where we are now. 10 Releases 18M

    Active installs 4.4 Average rating
  7. Riding the trains. Train-based release model

  8. We iterate. New features + Polishing + Web platform Lightweight

    themes New tabs UI Tablet UI Search suggestions Guest mode WebRTC Quick share Add-on APIs Contacts API Reader Mode Tiled Rendering Private browsing Progressive rendering Dynamic toolbar
  9. Two worlds, one app. Making Gecko and Android play together

    Javascript C++ XUL XPCOM Java C++ Android Framework
  10. Messages JNI bridge for Gecko/Android communication GeckoEvent e =

    GeckoEvent.createBroadcastEvent("Reader:Add"); GeckoAppShell.sendEventToGecko(e); Services.obs.addObserver(this, "Reader:Add", false); ... observe: function(aSubject, aTopic, aData) { switch(aSubject) { case “Reader:Add”: ... } }
  11. Messages JNI bridge for Gecko/Android communication sendMessageToJava({ type: "Share:Image",

    url: src }); registerEventListener(“Share:Image”, this); ... @Override public void handleMessage(String event, JSONObject message) { if (event.equals("Share:Image")) { ... } }
  12. Threads Keep UI, Gecko, and Rendering separate Main thread Android

    native UI Render thread Render pages on screen Background thread Off-main thread tasks Gecko thread Gecko engine and GFX
  13. Startup Never block on Gecko ITC Native UI Compositor Gecko

    Main UI Start Page Places XUL UI Layout GFX Render page UI thread Gecko thread Render thread
  14. UI structure Main activity Tabs tray, Start Page, Search, Toolbar,

    and App Menu Heavily customized layout Handles all configChanges SurfaceView for web content
  15. Views Managed programmatically android:configChanges="keyboard|keyboardHidden| mcc|mnc|orientation|screenSize" @Override public void onConfigurationChanged(Configuration

    newConfig) { super.onConfigurationChanged(newConfig); if (mOrientation != newConfig.orientation) { mOrientation = newConfig.orientation; refreshChrome(); } }
  16. Start Page Focus on performance We don't want to wait

    for Gecko to load Content Providers for bookmarks and history SyncAdapters use our Content Providers
  17. ActionBar Not exactly an ActionBar We need full control of

    the toolbar view state Slide off-screen as you scroll web content Synchronized animations with Start Page
  18. App Menu All custom Based on Activity hooks: onCreatePanelView, onCreatePanelMenu,

    etc. API handles devices with HW menu button for you Read:
  19. On our own Handling showAsAction Custom menu item views, menu

    inflater, and so forth. <item android:id="@+id/reload" android:icon="@drawable/ic_reload" android:title="@string/reload" android:showAsAction="always"/>
  20. Submenus Re-opens menu with new items

  21. Submenus Defined in .xml files, as usual mobile/android/base/resources/menu-v11/browser_app_menu.xml#44 <item android:id="@+id/tools"

    android:title="@string/tools" android:icon="@drawable/ic_menu_tools"> <menu> <item android:id="@+id/save_as_pdf" android:icon="@drawable/ic_menu_save_as_pdf" android:title="@string/save_as_pdf" /> ... </menu> </item>
  22. Quick Share In-menu ShareActionProvider Custom ActionProvider with custom copy of

    ActionChooserModel Plans to expand the model for different media types and contexts
  23. Horizontal Tabs TwoWayView: an AdapterView with orientation

  24. For developers Some goodies for you to try ;-) GeckoView Droid Inspector TwoWayView Smoothie
  25. Get involved!

  26. That's all! Questions?