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. Bringing to Android

  2. Lucas Rocha lucasr.org | thelayout.cc

  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 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”: ... } }
  11. 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")) { ... } }
  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 http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/BrowserApp.java#2125 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 http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/home/HomePager.java
  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 http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/home/BrowserToolbar.java
  18. 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
  19. 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"/>
  20. Submenus Re-opens menu with new items http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/GeckoApp.java#371

  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 http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/GeckoApp.java#371
  23. Horizontal Tabs TwoWayView: an AdapterView with orientation http://bit.ly/moz-twowayview

  24. 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
  25. Get involved! http://bit.ly/moz-getinvolved

  26. That's all! Questions?