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.

Transcript

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?