Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Lucas Rocha

Other Decks in Programming


  1. 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.
  2. 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
  3. Up we go. Where we are now. 10 Releases 18M

    Active installs 4.4 Average rating
  4. 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
  5. Two worlds, one app. Making Gecko and Android play together

    Javascript C++ XUL XPCOM Java C++ Android Framework
  6. Messages JNI bridge for Gecko/Android communication http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/GeckoAppShell.java#363 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”: ... } }
  7. Messages JNI bridge for Gecko/Android communication http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js#160 sendMessageToJava({ type: "Share:Image",

    url: src }); registerEventListener(“Share:Image”, this); ... @Override public void handleMessage(String event, JSONObject message) { if (event.equals("Share:Image")) { ... } }
  8. 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
  9. 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
  10. UI structure Main activity Tabs tray, Start Page, Search, Toolbar,

    and App Menu Heavily customized layout Handles all configChanges SurfaceView for web content
  11. 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 http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/home/HomePager.java
  12. 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 http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/home/BrowserToolbar.java
  13. App Menu All custom Based on Activity hooks: onCreatePanelView, onCreatePanelMenu,

    etc. API handles devices with HW menu button for you Read: http://bit.ly/moz-custom-menu http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/GeckoApp.java#371
  14. On our own Handling showAsAction Custom menu item views, menu

    inflater, and so forth. http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/menu/GeckoMenu#67 <item android:id="@+id/reload" android:icon="@drawable/ic_reload" android:title="@string/reload" android:showAsAction="always"/>
  15. 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>
  16. Quick Share In-menu ShareActionProvider Custom ActionProvider with custom copy of

    ActionChooserModel Plans to expand the model for different media types and contexts http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/GeckoApp.java#371
  17. For developers Some goodies for you to try ;-) GeckoView

    http://bit.ly/moz-geckoview Droid Inspector http://bit.ly/moz-droidinspector TwoWayView http://bit.ly/moz-twowayview Smoothie http://bit.ly/moz-smoothie