Bringing to Android 

Lucas Rocha lucasr.org | thelayout.cc 

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

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. 

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 

Up we go. Where we are now. 10 Releases 18M Active installs 4.4 Average rating 

Riding the trains. Train-based release model 

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 

Two worlds, one app. Making Gecko and Android play together Javascript C++ XUL XPCOM Java C++ Android Framework 

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”: ... } } 

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")) { ... } } 

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 

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 

UI structure Main activity Tabs tray, Start Page, Search, Toolbar, and App Menu Heavily customized layout Handles all configChanges SurfaceView for web content 

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(); } } 

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 

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 

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 

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 

Submenus Re-opens menu with new items http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/GeckoApp.java#371 

Submenus Defined in .xml files, as usual mobile/android/base/resources/menu-v11/browser_app_menu.xml#44 ... 

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 

Horizontal Tabs TwoWayView: an AdapterView with orientation http://bit.ly/moz-twowayview 

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 

Get involved! http://bit.ly/moz-getinvolved 

That's all! Questions?