Browser

Since Gaia is built to run on top of Gecko, it was possible to engineer a Browser app/System Browser for regular web page navigation based on that Gecko instance. This can be manipulated by the mozBrowser API.

System Browser (Browser Chrome)

When a Firefox OS user bookmarks a web page so that it appears on the homescreen, the web page will be subsequently opened in the System Browser instead of the Browser app. It includes a toolbar at the bottom containing general back/forward/refresh functions. In Gaia this is called the Browser Chrome or wrapper. You can see this in action on the right hand side of the below image.

If you want your web page to still feature back/forward/refresh functions, you can declare the following in the app's manifest enable Browser Chrome.

declare { chrome: { navigation: true } }

The code flow

When opening a new web page in Firefox OS, the call flow is

Gecko > WrapperFactory > Window Manager > AppWindow > BrowserFrame

Wrappers inheriting from system/js/wrapper_factory will receive the mozbrowseropenwindow event for a bookmarked web page.

In the handleEvent section, the handler will check the event to decide whether the web page should be opened as an app or in browser chrome.

Finally, launchWrapper is called to launch the corresponding window.

Universal Search & Navigation

With the new search and navigation bar, users can get to their favorites, type in a URL, or discover a new app, from anywhere in Firefox OS. The search bar lives at the top of the screen, and users can just tap or swipe to open it.

Think of it as a combination of the Awesome Bar from the browser and the adaptive app search from the homescreen. Because Firefox OS uses web apps, when you find what you want, even if it’s a new app, it opens right away. You don’t need to install anything, because everything is instant and web-like.

Browser App

The Browser app is a certified webapp that provides a general web browser experience. The main function is located in apps/browser/js/browser.js:

var Browser = {
  init: function browser_init() {
    this.getAllElements();
      ...
    BrowserDB.init((function() {
      ...
    }
  }
};

window.addEventListener('load', function browserOnLoad(evt) {
  window.removeEventListener('load', browserOnLoad);
  Browser.init();
});

The Browser will call its init() function while the DOM is loaded.

getAllElements: function browser_getAllElements() {
  var elementIDs = [
    'toolbar—start', ... 'danger—dialog'];

  // Loop and add element with camel style name to Modal Dialog attribute.
  elementIDs.forEach(function createElementRef(name) {
    this[this.toCamelCase(name)] = document.getElementById(name);
  }, this);
},

The getAllElements function is used to get all camelCase element handlers, after which the apps/browser/js/browser_db.js is called, to prepare for adding the default search engine and bookmarks.

Bookmarks

From Firefox OS 2.0 apps/bookmark is used to handle bookmark save/remove activities.

The most interesting part, apps/bookmark/webapp.manifest, looks like so:

"activities": {
  "save—bookmark": {
    "filters": {
      "type": "url",
      "url": { "required":true, "pattern":"https?:.{1,16384}" }
    },
    "disposition": "inline",
    "href": "/save.html",
    "returnValue": true
  },
  "remove—bookmark": {
    "filters": {
      "type": "url",
      "url": { "required":true, "pattern":"https?:.{1,16384}" }
    },
    "disposition": "inline",
    "href": "/remove.html",
    "returnValue": true
  }
},

As seen above, the activity is handled by save.html and remove.html. Both operations are delegated to apps/bookmark/js/activity_handler.js:

var ActivityHandler = {
  'save—bookmark': function ah_save(activity) {
  },

  'remove—bookmark': function ah_remove(activity) {
  }
};

navigator.mozSetMessageHandler('activity', function onActivity(activity) {
  var name = activity.source.name;
  switch (name) {
    case 'save—bookmark':
    case 'remove—bookmark':
      if (activity.source.data.type === 'url') {
        ActivityHandler[name](activity);
      }
    ...
  }
}

When the message handler listener navigator.mozSetMessageHandler('activity') receives the save-bookmark or remove-bookmark activities, the ActivityHandler function is triggered to handle correspondent operations.