Clochix

A l'automne 2007, Apple a proposé de nouvelles propriétés CSS permettant d'effectuer des transformations (translations, rotations, redimensionnement) sur des éléments, et en a implémenté une partie dans Webkit. Certaines de ces nouvelles propriétés sont en train d'atterrir dans Firefox 3.1.

Jusqu'à présent, JavaScript ne savait faire qu'une seule chose à la fois, et un traitement long pouvait temporairement bloquer le navigateur. Les développeurs de Firefox ont commencé à intégrer une nouvelle spécification du group de travail sur HTML5, Web Worker, qui permet d'exécuter des traitements JavaScript en tâche de fond, parallèlement au traitement principal et donc sans incidence sur la réactivité du navigateur.

J'ai découvert récemment Pixel Perfect, une extension pour firebug qui permet d'afficher une image au dessus d'une page web, par exemple pour comparer la page avec sa maquette. J'ai trouvé l'idée excellente, mais comme la route est toujours plus intéressante que l'arrivée, comme c'est toujours meilleur quand c'est fait à la maison^[1], j'ai essayé d'écrire un équivalent sous forme de bookmarklet javascript^[2].

Vous trouverez le résultat ici : https://labo.clochix.net/wiki/labs/.... Si vous l'utilisez, je vous conseille de compacter le script avant de le déposer sur un serveur. Ca ne fonctionnera que sous Firefox et n'a été testé qu'avec la version GNU/Linux d'icelui.

Ce script vous demande l'url d'une image, les coordonnées où l'afficher et l'opacité. Ces informations sont enregistrées dans la session Firefox pour que vous n'ayez pas à les ressaisir à chaque fois. Vous pouvez ensuite, au moyen de raccourcis clavier, déplacer l'image, la masquer, modifier sa taille et son opacité, etc. Simple mais pratique.

Si vous avez des idées d'améliorations, n'hésitez pas...

PS: au passage, ce script marque l'ouverture d'une forge de test basée sur Redmine, j'y reviendrai très bientôt

Le DOM est une méthode pour représenter un document sous forme d'objets arborescents. Cette méthode est par exemple utilisée pour manipuler des documents XML ou des pages web en HTML. Plusieurs spécifications ont défini le modèle, des méthodes pour y accéder, le modifier, etc. L'une d'elles permet de gérer des évènements survenant sur les objets. Malheureusement, j'ai toujours trouvé cette spécification étonnamment incomplète. Elle présente à mon sens 2 lacunes:

• elle ne permet pas de connaître les guetteurs associés à un événement
• elle ne définit pas, ou mal, ce qui doit arriver à ces guetteurs lors de manipulations du document.

La méthode de gestion retenue est en effet de permettre d'attacher à chaque objet des guetteurs qui seront appelés quand surviendra un événement. Malheureusement, la spécification ne dit pas ce qui doit arriver à ces gestionnaires quand l'objet est déplacé, par exemple dans un autre document, ou dupliqué. Chaque implémentation de la spécification a donc dû décider de l'attitude à adopter dans ces cas. Dans le cas de Firefox, les guetteurs sont perdus en cas de déplacement du nœud dans un autre document (par exemple lorsqu'on essaie d'insérer dans une fenêtre popup des éléments générés dans la fenêtre mère), ou lorsqu'on le copie (la spécification indique effectivement quand un objet Node est recopié en utilisant la méthode cloneNode, les guetteurs EventListener attachés à l'objet Node source ne le sont pas sur l'objet Node copié, cf la définition des guetteurs.

Petit exemple: imaginons que l'on ait besoin de créer dynamiquement un formulaire permettant à l'utilisateur de saisir un nombre quelconque de réponses, chaque réponse étant l'objet d'une validation. Cela pourrait se coder ainsi:

<!-- Création du formulaire -->
<form id="my_form">
<input type="button" id="button_add" value="ajouter" />
</form>
<script type="text/javascript">
function init(){
  // on crée une ligne permettant la saisie
  var _div = document.createElement("div");
  var _input = document.createElement("input");
  _input.setAttribute("type", "text");
  // on attache un guetteur qui affiche la saisie quand le curseur quitte la zone
  _input.addEventListener('blur', function(){alert("la valeur saisie est : " + this.value);}, false);
  _div.appendChild(_input);
  // on insère la première ligne
  document.getElementById("my_form").appendChild(_div);
  // chaque pression sur le bouton insérera une nouvelle ligne
  document.getElementById("button_add").addEventListener('click', function(){document.getElementById("my_form").appendChild(_div)}, false);
}
</script>

Ce code ne fonctionnera pas. En cliquant sur le bouton "Ajouter", on insère bien une copie de la première ligne, mais le guetteur censé valider la saisie n'a pas été recopié par le cloneNode.

Cet exemple est bien sûr trivial, il suffirait, après le clonage, d'ajouter un nouveau guetteur sur le champs de saisie. Mais cela suppose de connaître tous les guetteurs qui ont été associés, potentiellement par d'autres portions de code, au fragment cloné. En l'absence d'interface pour connaître ces guetteurs. le problème est difficile à résoudre. C'est pour le contourner que je me suis enfin intéressé à XBL, dont je vous parlerai dans les prochains jours (ce billet ne servait qu'à liquider ce problème auquel je me suis heurté vainement pendant pas mal de temps en codant Couac )

(toute ceci ne concerne que Firefox. Il parait que les récentes versions du malware au 'e' bleuté dupliquent les guetteurs lors d'un cloneNode. Je n'ai pas été vérifier)