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
   

   View Slide

2. Lucas Rocha
   lucasr.org | thelayout.cc
   

   View Slide

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

   View Slide

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.
   

   View Slide

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
   

   View Slide

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

   View Slide

7. Riding the trains.
   Train-based release model
   

   View Slide

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
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    android:icon="@drawable/ic_reload"
    android:title="@string/reload"
    android:showAsAction="always"/>
    

    View Slide

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

    View Slide

21. Submenus
    Defined in .xml files, as usual
    mobile/android/base/resources/menu-v11/browser_app_menu.xml#44
    android:title="@string/tools"
    android:icon="@drawable/ic_menu_tools">
    
    android:icon="@drawable/ic_menu_save_as_pdf"
    android:title="@string/save_as_pdf" />
    ...
    
    
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

26. That's all!
    Questions?
    

    View Slide