Mes impressions sur le web, les standards et autres…


Personnaliser Firefox

Depuis la sortie de Firefox 1.0, il me démangeait de réaliser quelques ajustements sur son interface. En effet, je n’utilise pas du tout le système des livemarks, donc la petite icône orange apparaissant parfois dans la barre de statut ne m’est d’aucune utilité. Je n’utilise également jamais le bouton de fermeture de l’onglet actif (la croix blanche avec le carré rouge en haut à droite dans la barre d’onglets).

En fouinant dans le dossier d’installation de Firefox, j’ai compris un peu mieux le fonctionnement de l’ensemble et notamment les URIs de type chrome://browser/skin/... Elles font référence à des ressources présentes dans des fichiers ayant l’extension .jar. Et après avoir fouiné dans le fichier classic.jar, j’ai trouvé ce que je cherchais dans le fichier skin/classic/browser/browser.css présent dans classic.jar.

Pour que les icônes des livemarks et de fermeture d’onglet n’apparaissent plus, il faut donc ajouter dans le fichier userChrome.css de votre profil :

#livemark-button[livemarks] { display: none !important; }
tabbrowser#content .tabs-closebutton { display: none !important; }

Tiens, j’ai découvert autre chose au passage. Un double click dans la barre des onglets (mais pas sur un onglet) ouvre un nouvel onglet. J’adore…

P.S : Bonne année à tous ;-)

Edit : Mise à jour du billet, les précédentes règles CSS données plus haut masquaient également le bouton de fermeture de Sage et celui de la barre de recherche ^^

DOM Core : Nœuds et position

Il y a quelques mois de cela, je travaillais sur mon script show-quote.js, et j’étais confronté à un problème insoluble : Il me fallait déterminer, à chaque fois que l’évènement mouseout était déclenché, si la cible de destination du curseur (Event.relatedTarget) se trouvait dans le bloc de citation, et si ce n’était pas le cas, masquer le bloc affichant le lien source de la citation (attribut cite de l’élément BLOCKQUOTE).

MSIE dispose de la méthode Element.contains() (non-standard) pour cela :

// Renvoie true si otherElt est un descendant de myElt, false sinon.
var result = myElt.contains(otherElt);

Je n’avais toutefois pas trouvé d’équivalent standard à l’époque et je m’étais rabattu sur une solution un peu barbare dans le cadre de mon script :

var result = ( citation.parentNode.parentNode == evt.relatedTarget );

Ignoble, n’est-ce pas ? J’ai enfin trouvé une méthode standard pour gérer cela : Node.compareDocumentPosition(). Elle a été ajoutée dans le DOM niveau 3. Cette méthode est utilisable sur tous types de nœud contrairement à la méthode Element.contains() et renvoit un bitmask du positionnement entre les deux nœuds. On peut ainsi savoir si l’un est descendant ou ancêtre de l’autre, lequel suit l’autre dans l’ordre logique du document, …

J’ai donc modifié mon script pour utiliser cette méthode (c’est beaucoup plus propre à mon goût) et créé une page d’ exemple d’utilisation de Node.compareDocumentPosition(). Enfin, pour ceux qui n’auraient pas de scrupules à simuler Element.contains() sur Mozilla (et donc utiliser du code propriétaire, même si derrière, c'est standard), voilà le morceau de code :

Element.prototype.contains = function(otherElt) {
    return (this.compareDocumentPosition(otherElt) & this.DOCUMENT_POSITION_CONTAINED_BY) ? true : false;
};

Ce bout de code rendra disponible une méthode Element.contains() sur tous les nœuds de type élément et au fonctionnement similaire à celle de l’API de Microsoft.