Salut! Je m'appelle Lloyd Hilaiel, et je travaille à Mozilla Labs avec Marcio Galli.
Dans cette vidéo nous vous donnons un aperçu du projet Chromeless.
Chromeless est une expérience qui vise à rendre plus facile la mise en œuvre
de nouvelles idées concernant les interfaces utilisateur sur le web.
Le but est de faire participer davantage de personnes au débat
sur l'apparence que devrait avoir un navigateur web.
Et sur comment il devrait marcher.
Techniquement, Chromeless n'est pas une grande innovation.
Nous avons simplement repris XULrunner, l'application sur laquelle
Firefox et Thunderbird sont basés
et ajouté une fine couche d'abstraction.
Cette couche permet de construire rapidement un navigateur web
en utilisant des technologies web, comme html, javascript ou css.
Dans Chromeless, un unique document html
définit l'interface utilisateur du navigateur à proprement parler.
Pour faciliter la communication, nous avons appelé
ce document html le "code navigateur".
De la même manière qu'un navigateur web courant peut contenir d'autres sites et iframes
ce navigateur peut aussi le faire.
mais il a des privilèges étendus pour modifier et surveiller
le contenu autour de cet iframe.
Cette idée de récupérer des concepts web existants
et de les enrichir légèrement
est le principe de base de Chromeless.
Bien! Faisons un point sur ce que vous pouvez faire.
Ce que vous voyez à présent est un navigateur web
simple mais fonctionnel.
Ici vous pouvez voir un document hmtl basique qui affiche un champ de texte
où vous pouvez entrez une url et un iframe
où ira le contenu du l'url en question.
Avec Chromeless, c'est véritablement tout le code dont vous avez besoin pour
créer un navigateur.
Allons un peu plus loin.
Et si vous vouliez permettre à l'utilisateur d'utiliser un mode plein écran?
Afficher en plein écran est clairement quelque chose
qu'un site web normal ne peut pas faire.
Nous avons donc besoin d'une nouvelle API.
Dans Chromeless, on accède à de nouvelles API en
utilisant la fonction globale require.
Dans ce cas, nous importons la bibliothèque misc.
Ce nom "misc" est un simple raccourci
mais il offre une fonction "plein écran" que nous pouvons utiliser
pour commuter le mode du navigateur.
Cette fonction sera appelée par un bouton
cliquable.
Avec 4 lignes de code supplémentaires, notre navigateur a maintenant
un mode plein écran.
Essayons quelque chose de plus élaboré
en combinant quelques nouvelles idées.
Premièrement, comme nous l'avons déjà mentionné, le code navigateur
a des privilèges particuliers pour la surveillance du contenu des iframes.
Un exemple de ceci est l’événement expérimental dom load
appelé quand un nouveau contenu est chargé dans un iframe.
L'autre outil que nous allons utiliser est la bibliothèque dom shot
qui permet de récupérer une capture graphique d'un nœud donné du dom.
Cette fonction renvoie une url de données qui
contient des données d'image ping.
Marcio a combiné ces fonctionnalités et un peu de
jquery pour construire ce navigateur de démonstration.
Il vous permet de voir des aperçu de vos onglets ouverts sous forme de vignette
avec une déformation œil de poisson.
Nous espérons vous avoir donné un bon aperçu de
Chromeless.
Pour en savoir plus, nous vous recommandons
de récupérer le code sur github et de suivre le tutoriel inclus.
Même si certaines des API que je viens de vous montrer ont changées
les principes de base de Chromeless sont sûrement les mêmes.
Si vous avez des idées pour Chromeless, ou si vous voulez
participer, vous pouvez nous rejoindre aux endroits habituels
sur IRC ou notre liste mail.
Merci de votre attention.