Système

Any application that can be written in JavaScript, will eventually be written in JavaScript. -- Atwood's Law

Comment est chargée l'application système

Quand Gecko essaye de démarrer l'application Système, il référence le manifest.webapp de Système et charge le fichier index.html référencé par le paramètre launch_path (launch_path vaut toujours /index.html pour les applications Gaia.) index.html contient les liens vers tous les styles et JavaScript du système dans sa globalité. Pour gérer un système mobile complet, l'application Système doit charger un grand nombre de ressources.

Le processus de démarrage est lancé à partir de bootstrap.js, avec le code suivant :

window.addEventListener('load', function startup() {
// define safelyLaunchFTU
function safelyLaunchFTU() {
  ...
}

if (Applications.ready) {
  safelyLaunchFTU();
} else {
  ...
}

window.addEventListener('ftudone', function doneWithFTU() {
  window.removeEventListener('ftudone', doneWithFTU);

  var lock = window.navigator.mozSettings.createLock();
  lock.set({
    'gaia.system.checkForUpdates': true
  });
}

  ...

// With all important event handlers in place, we can now notify
// Gecko that we're ready for certain system services to send us
// messages (e.g. the radio).
var evt = new CustomEvent('mozContentEvent',
{ bubbles: true, cancelable: false,
  detail: { type: 'system-message-listener-ready' } });
  window.dispatchEvent(evt);
}

Le code fonctionne comme ceci :

1. Système est une véritable application web exécutée dans un moteur de navigateur, toutes les ressources dont elle dépend doivent être chargées — y compris les styles et les images. Nous lançons donc tout au déclenchement de l'événement window.onload.
2. Tout d'abord, nous préparons le lancement de l'expérience de première utilisation FTU (First Time Use) et de l'écran d'accueil avec la fonction safelyLaunchFTU(). Comme son nom l'indique, FTU n'est affichée que si l'utilisateur démarre Firefox OS pour la première fois.
3. Quand l'utilisateur appuie sur TERMINÉ dans le FTU, l'événement personnalisé ftudone est activé puis bootstrap.js se met en écoute sur cet événement dans l'attente de le traiter.
4. Ensuite, nous utilisons Settings API (navigator.mozSettings) pour définir le réglage gaia.system.checkForUpdates sur vrai, ce qui indique que le système va rechercher les mises à jour.
5. Enfin, nous lançons l'événement personnalisé window.dispatchEvent,  via CustomEvent. C'est un modèle très important utilisé par Gaia pour les notifications systèmes et la communication avec Gecko. Dans le cas présent, l'application Gaia Système notifie à Gecko qu'elle est prête à se mettre en écoute et à gérer les événements.

Modularisation instanciable

Le système lui-même évolue constamment vers plus de modularité et de flexibilité. Depuis la version 1.4, une initiative est en cours pour faire évoluer le module système vers un objet instanciable.

Une fois tout le code au-dessus exécuté, les références vers chaque composant système dans bootstrap.js seront de la forme suivante :

window.telephonySettings = new TelephonySettings();
window.telephonySettings.start();

Le squelette du code source de TelephonySettings() serait :

(function(exports) {
  'use strict';
  function TelephonySettings() {
    this.init_param = false;
  }

  TelephonySettings.prototype = {
    // Initialzes all settings.
    start: function() {
      ...
    },

    // Clean all settings.
    stop: function() {
      ...
    },

    1st_method: function ts_1st_method() {
      ...
    },

    2nd_method: function ts_2nd_method() {
      ...
    }
  };

  exports.TelephonySettings = TelephonySettings;

}(window));

Ce modèle contribue à la modularisation des composants systèmes et rend ces derniers davantage testables.

Animations de démarrage et d'extinction

Cette section explique comment l'application Système contrôle les animations de démarrage et d'extinction. init_logo_handler.js et sleep_menu.js gèrent ces animations de démarrage et d'arrêt du système.

Animations de démarrage

L'action de l'animation de démarrage n'est en fait pas contenue dans la procédure principale de démarrage, mais il s'agit au contraire d'un hook installé par EventListeners.

Le code de l'animation de démarrage dans init_logo_handler.js se déroule ainsi :

Pour dessiner le logo ou l'animation une fois Gecko prêt à afficher quelque chose à l'écran, nous lançons le gestionnaire système approprié après le chargement du DOM, puis le logo est caché après le lancement d'un événement ftudone ou ftuskip. La méthode _appendCarrierPowerOn, contenue dans init_logo_handler.js, montre comment Gaia se prépare à lancer l'animation ou le logo de démarrage en attendant l'événement DOMContentLoaded. Le logoLoader est défini dans logo_loader.js.

var self = this;
document.addEventListener('DOMContentLoaded', function() {
  self.carrierLogo.appendChild(self.logoLoader.element);
  self._setReady();
});

Une fois le logo préparé, le système appelle la méthode _setReady() qui met en place un écouteur en attente de l'événement spécial mozChromeEvent avec le type system-first-paint pour indiquer que le système est prêt à dessiner sur l'écran.

var elem = this.logoLoader.element;
  ...
window.addEventListener('mozChromeEvent', function startVideo(e) {
  if (e.detail.type == 'system-first-paint') {
    window.removeEventListener('mozChromeEvent', startVideo);
    if (elem && elem.ended === false) {
      elem.play();
    }
  }
});

À ce stade, l'élément graphique est animé. Après déclenchement d'un événement ftuopen ou ftuskip, init_logo_handler.js invoque la méthode par défaut handleEvent() qui appelle à son tour la méthode animate() pour faire disparaître l'animation avec comme transition un effet de fondu.

init: function ilh_init(logoLoader) {
  window.addEventListener('ftuopen', this);
  window.addEventListener('ftuskip', this);
    ...
},

handleEvent: function ilh_handleEvent() {
  this.animate();
},

Animations d'extinction

Une fois le système prêt, un appui long sur le bouton marche/arrêt déclenche un événement holdsleep, tel que défini dans hardware_button.js. Ce script gère tous les événements "bouton physique pressé", dont marche/arrêt (veille), accueil, volume haut/bas et ainsi de suite.

HardwareButtonsSleepState.prototype.enter = function() {
  this.timer = setTimeout(function() {
    / * When the user holds Sleep button more than HOLD_INTERVAL. */
    this.hardwareButtons.publish('holdsleep');
    this.hardwareButtons.setState('base');
  }.bind(this), this.hardwareButtons.HOLD_INTERVAL);
};

L'animation d'extinction est traitée par sleep_menu.js ; ce script se met en écoute de l'événement holdsleep et affiche le dialogue du menu lorsqu'il est déclenché.

init: function sm_init() {
    ...
  window.addEventListener('holdsleep', this.show.bind(this));
    ...
}

Si l'utilisateur choisit d'éteindre l'appareil via les options de menu redémarrer ou éteindre, la fonction startPowerOff() est déclenchée, puis celle-ci appelle à son tour la fonction LogoLoader() qui a la charge de gérer l'affichage de l'animation d'arrêt.

handleEvent: function sm_handleEvent(evt) {
  switch (evt.type) {
    case 'click':
      ...
    this.handler(action);
    break;
    ...
  }
}

handler: function sm_handler(action) {
  switch (action) {
    ...
    case 'restart':
      this.startPowerOff(true);
      break;

    case 'power':
      this.startPowerOff(false);
      break;
    ...
  }
}

Fonctions systèmes

L'application Système gère de nombreuses fonctions et responsabilités, le fait que certaines d'entre-elles soient de son ressort pourrait vous surprendre. L'application Système s'occupe de la gestion de la barre d'état et de la zone de notifications, du verrouillage SIM, du gestionnaire de mises à jour, du lanceur de l'écran d'accueil, de la gestion des fenêtres des applis web, et d'autres choses encore. Cette section aborde quelques-unes des fonctions desservies les plus importantes.

Barre d'état et zone de notifications

La barre d'état et le menu déroulant de Système (Gaia l'appelle la zone de notification ; Android emploie le terme de barre de notification) sont gérés par statusbar.js et utility_tray.js. À l'intérieur du fichier index.html de l'application, les éléments de la barre d'état sont définis dans <div id="statusbar" data-z-index-level="statusbar"> tandis que ceux de la zone de notification résident dans la structure suivante :

<div id="utility-tray" data-z-index-level="utility-tray">
  <div id="notifications-container">
    ...
  </div>
</div>

Il existe certains panneaux spéciaux dans la zone de notification, tels que le gestionnaire de mises à jour, le gestionnaire des appels d'urgence, la notification de surveillance du stockage, les contrôles et notification de lecture de médias, l'état des transferts Bluetooth et l'outil pour changer de méthode de saisie clavier (IME). Les gestionnaires et styles correspondants sont situés dans les répertoires js/ et style/.

Lanceurs d'applications spéciaux

L'application Système dispose de trois lanceurs spéciaux qui appellent des applications web séparées lorsque c'est nécessaire :

• Le lanceur de l'écran d'accueil : Lance l'application Écran d'accueil (Homescreen), qui affiche l'écran d'accueil lorsque l'utilisateur appuie sur le bouton Accueil, ou si une application web plante ou est quittée d'une autre manière.
• Le lanceur de l'écran de verrouillage : Lance l'application Écran de verrouillage (Lockscreen), qui affiche l'écran de verrouillage à chaque fois qu'un utilisateur active l'écran.
• Le lanceur FTU : Lance l'application d'expérience FTU. Ceci n'arrive qu'une fois car les utilisateurs verront l'expérience FTU uniquement la première fois qu'ils démarreront un nouvel appareil FirefoxOS (ou qu'ils réinitialiseront leur appareil à son réglage d'usine). De plus, l'application web FTU ne permet pas à l'utilisateur de sortir de l'application en se servant du bouton Accueil.

Écran de verrouillage

Le principal point d'entrée de l'application Lockscreen est system/js/lockscreen.js. Sur cet écran, l'utilisateur peut procéder au déverrouillage, déclencher l'appareil photo sécurisé et contrôler le lecteur de musiques.

Appels d'urgence

Le code du téléphone d'urgence est contenu dans le répertoire gaia/apps/system/emergency-call/. Il s'agit d'une version simplifiée de l'application Téléphone (Dialer) qui permet à l'utilisateur d'y accéder depuis le Dialogue de déverrouillage PIN de la carte SIM pour composer des appels d'urgence vers des services comme la police.

Interface utilisateur du système

L'application Système assure la gestion de quasiment toute l'interface utilisateur du système, celle-ci étant constituée essentiellement de dialogues comme ceux de l'avertissement de volume, du déverrouillage PIN SIM, de la diffusion cellulaire et d'éléments d'interface utilisateur affectant le comportement des fenêtres, comme le bouton d'accueil logiciel.

Niveau z-index

Avec le fichier index.html de l'application Système, l'attribut data-z-index-level est intégré à de nombreux composants, par exemple :

<div id="sleep-menu" data-z-index-level="sleep-menu">
  ...
</div>

Les z-index-levels correspondants sont définis dans system/style/zindex.css, par exemple :

#screen > [data-z-index-level="sleep-menu"] {
  z-index: 65536;
}

...

#screen > [data-z-index-level="app"] > .appWindow {
  z-index: 3;
}

Les paramètres z-index sont organisés en fonction de l'ordre dans lequel les éléments sont affichés à l'écran — les éléments qui doivent apparaître au-dessus dans la hiérarchie visuelle se voient attribués un nombre plus élevé. C'est de cette manière que l'application Système traite à un niveau basique la gestion des fenêtres.

Le bouton d'accueil logiciel

Le bouton d'accueil logiciel est une alternative au bouton d'accueil, automatiquement activé sur les appareils dépourvus de bouton d'accueil matériel, e.g. Nexus 4. Pour contrôler son apparence, Gecko fournit une caractéristique média propriétaire appelée -moz-physical-home-button qui peut être utilisée dans une requête média afin d'appliquer des styles basés sur la présence d'un bouton d'accueil matériel. Le gestionnaire de fenêtres alloue si nécessaire un certain espace d'écran pour le bouton d'accueil logiciel.

Vous verrez ceci dans system/style/window.css (et dans beaucoup d'autres fichiers de styles systèmes) :

@media not all and (-moz-physical-home-button) {
  #screen:not(.software-button-disabled) > #windows > .appWindow {
    bottom: 5rem;
  }
 }

Geste de retour à l'accueil (mouvement du bas vers le haut de l'écran)

Le geste tactile de retour à l'accueil est une autre alternative au bouton d'accueil matériel ; il peut être activé dans les Paramètres développeurs, et le code qui le contrôle se trouve dans system/js/home_gesture.js. Le geste consiste en un glissement à partir du bas de l'écran, et peut être utilisé pour fermer des applications, par exemple.

Ce geste est automatiquement activé sur les tablettes Firefox OS. Le seuil défini dans gaia/shared/js/screen_layout.js est utilisé pour détecter si l'appareil est une tablette ou non.

Dialogue d'avertissement du volume

Le code qui contrôle le dialogue d'avertissement de volume se situe dans system/js/sound_manager.js. Ce dialogue apparaîtra quand toutes les conditions suivantes seront remplies :

• Les écouteurs sont branchés.
• Un niveau sonore de 85dB est dépassé.
• La lecture est en cours sur le canal audio.

Dialogue de déverrouillage PIN de la carte SIM

Le code qui contrôle le dialogue de déverrouillage PIN de la carte SIM est situé dans system/js/simcard_dialog.js — cette boîte de dialogue s'affiche quand l'option de verrouillage par code est activée, l'écran de verrouillage étant affiché. L'application ouvrante doit également avoir les permissions de téléphonie précisées dans son fichier manifest.webapp (ce qui est le cas de l'application Système).