Fennec Native UI 101

Margaret Leibovic
April 25, 2012

High-Level UI Overview

Basic app UI is made up of Android Java/XML
We communicate with Gecko through JS/XUL

browser.xul just holds a <deck> of <browser>s for displaying the web content

We use JSON-based messages to pass data between the Java/JS pieces

Java Bits

GeckoApp is the main app activity
We create sub-activities for views that take over the screen

e.g. AwesomeBar, TabsTray

We keep track of the tabs in Tabs
There are Java classes that correspond to different pieces of the UI

e.g. BrowserToolbar, FormAssistPopup, DoorHangerPopup

JS Bits (browser.js)

BrowserApp

Creates/manages tabs and browsers
Tab objects handle navigation/progress/DOM events

NativeWindow provides JS APIs for native UI pieces

e.g. doorhanger, menu, contextmenus

There are lots of other helper objects/functions

e.g. XPInstallObserver, PopupBlockerObserver, PermissionsHelper, PluginHelper, ...

Message Passing

Java to JS

Create a GeckoEvent in Java:

GeckoAppShell.sendEventToGecko(
  GeckoEvent.createBroadcastEvent("MessageToJS", "data"));

Add an observer in JS:

Services.obs.addObserver(observer, "MessageToJS", false);

Your listener just needs to implement nsIObserver

JS to Java

Create a JSON message in JS:

let message = {
  gecko: {
    type: "MessageToJava",
    ...
  }
};
sendMessageToJava(message);

Register a listener in Java:

GeckoAppShell.registerGeckoEventListener("MessageToJava", listener);

Your listener just needs to implement GeckoEventListener:

public interface GeckoEventListener {
    public void handleMessage(String event, JSONObject message);
}

Want to learn more?

Build instructions and more can be found on our wiki page
Look for bugs in the Fennec Native component in Bugzilla
Hang out in #mobile on IRC!