Navigateur

Comme Gaia est construit pour s'exécuter au-dessus de Gecko, il a été possible de concevoir un Navigateur Système/application Navigateur pour naviguer sur des pages web classiques, basé sur cette instance Gecko. Cela est accessible par l'intermédiaire de l'API mozBrowser.

Navigateur Système (Navigateur Chrome)

Quand un utilisateur Firefox OS marque une page web pour qu'elle apparaisse sur l'écran d'accueil, cette page web s'ouvrira dans le Navigateur Système et non dans l'application Navigateur. Il comporte dans la partie inférieure une barre d'outils contenant les fonctions génériques reculer/avancer/actualiser. Dans Gaia, cela est appelé le Navigateur Chrome ou wrapper. Vous pouvez le voir en action du côté droit de l'image suivante.

Si vous souhaitez que votre page web dispose toujours des fonctions reculer/avancer/actualiser, vous pouvez ajouter la ligne suivante dans le manifeste de l'application pour activer le Navigateur Chrome.

declare { chrome: { navigation: true } }

Le flux de code

Lors de l'ouverture d'une nouvelle page web dans Firefox OS, la séquence des appels est

Gecko > WrapperFactory > Window Manager > AppWindow > BrowserFrame

Les wrappers héritant de system/js/wrapper_factory recevront l'événement mozbrowseropenwindow dans le cas d'une page web en marque-page.

Dans la section handleEvent, le gestionnaire va vérifier l'événement pour déterminer si la page web doit être ouverte en tant qu'application ou dans le navigateur chrome.

Enfin, launchWrapper est appelée pour lancer la fenêtre correspondante.

Navigation et recherche universelle

Avec la nouvelle barre de navigation et de recherche, les utilisateurs peuvent accéder à leurs favoris, saisir une URL, ou découvrir de nouvelles applications depuis n'importe où dans Firefox OS. La barre de recherche se trouve en haut de l'écran et les utilisateurs peuvent juste toucher l'écran ou faire glisser le doigt dessus pour l'ouvrir.

Voyez cela comme une combinaison de l'Awesome Bar du navigateur et de la recherche adaptative d'applications de l'écran d'accueil. Comme Firefox OS utilise des applications web, lorsque vous trouvez ce que vous voulez, même s'il s'agit d'une nouvelle application, il l'ouvre directement. Vous n'avez pas besoin d'installer quoi que ce soit, parce que tout est de type web et instantané.

Application Navigateur

Le Navigateur est une application web certifiée qui procure une expérience de navigation web générale. La fonction principale se trouve dans 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();
});

Le Navigateur appellera sa fonction init() pendant le chargement du DOM.

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

La fonction getAllElements est utilisée pour obtenir tous les gestionnaires d'élément camelCase, après quoi apps/browser/js/browser_db.js est appelée pour se préparer à l'ajout du moteur de recherche par défaut et des marque-pages.

Marque-pages

À partir de Firefox OS 2.0, apps/bookmark est utilisé pour gérer les activités d'enregistrement/suppression de marque-pages.

La partie la plus intéressante, apps/bookmark/webapp.manifest, ressemble à ceci :

"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
  }
},

Comme indiqué plus haut, l'activité est gérée par save.html et remove.html. Les deux opérations sont prises en charge par 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);
      }
    ...
  }
}

Quand le gestionnaire de message en écoute navigator.mozSetMessageHandler('activity') réceptionne les activités save-bookmark ou remove-bookmark, la fonction ActivityHandler est appelée pour gérer les opérations correspondantes.