Thème Tango pour Firefox

Vous avez la possibilité d'habiller Firefox avec un thème basé sur les icônes Tango, intéressant si vous utilisez les dites icônes sur votre bureau Linux. Le thème a cependant un petit « défaut » : la flèche de retour en arrière se retrouve affublé du texte « back ». L'auteur précise qu'il s'agit d'assurer une compatibilité dans la taille des images, mais je ne vois pas laquelle. Bref, voilà comment supprimer ce texte.

  • Si vous avez déjà installé le thème, allez le chercher dans .mozilla/firefox/profil/extensions/theme/. Faîtes une copie de l'archive firefox_tango_theme-0.6-fx.jar qui se trouve dans le répertoire chrome/.
  • Si vous n'avez pas encore installé le thème, télécharger l'archive .jar (clic droit puis enregistrer la cible du lien sous...).

Capture d'écran

Aperçu du thème original.

Capture d'écran

Aperçu du thème une fois corrigé.

Que se soit avec une copie du thème déjà installé où avec la version téléchargée, placez-vous dans un répertoire de travail quelconque et décompressez l'archive .jar (dans Nautilus, un simple clic droit puis extraire ici).

Dans le répertoire browser/, repérez l'image toolbar.png : vous y verrez le fameux bouton de retour en arrière accompagné du texte « back ». Pour bien faire, ouvrez le fichier avec un éditeur d'image (Gimp par exemple) et effacer ce texte proprement (attention à ne pas effacer les icônes elles-mêmes). Enregistrez les modifications et fermez le fichier.

Toujours dans le répertoire browser/, ouvrez avec un éditeur de texte quelconque le fichier browser.css : c'est là que nous allons modifier le comportement du thème. Repérez dans le fichier les règles CSS qui correspondent au bouton de retour en arrière. Vous devriez avoir quelque chose du genre :

/* back button */
#back-button, #forward-button[[chromedir="rtl"]] {
  -moz-image-region: rect(0px 416px 24px 360px);
}
#back-button[[buttonover="true"]], #forward-button[[buttonover="true"]][[chromedir="rtl"]] {
  -moz-image-region: rect(24px 416px 48px 360px);
}
#back-button[[disabled="true"]], #forward-button[[disabled="true"]][[chromedir="rtl"]] {
  -moz-image-region: rect(48px 416px 72px 360px) !important;
}
1. Règles css originales pour le bouton « retour » dans le fichier browser.css.

La règle -moz-image-region permet de n'afficher qu'une portion d'image, en l'occurrence la portion de l'image toolbar.png qui porte le bouton de retour. La série de 4 nombres en pixels délimite cette portion grâce à la syntaxe suivante :

-moz-image-region: rect(<haut> <droite> <bas> <gauche>);

Ainsi, il ne nous reste plus qu'à réécrire cette règle pour les trois états du bouton (« activé », « désactivé » et « hover ») :

/* back button */
#back-button, #forward-button[[chromedir="rtl"]] {
  -moz-image-region: rect(0px 384px 24px 360px);
}
#back-button[[buttonover="true"]], #forward-button[[buttonover="true"]][[chromedir="rtl"]] {
  -moz-image-region: rect(24px 384px 48px 360px);
}
#back-button[[disabled="true"]], #forward-button[[disabled="true"]][[chromedir="rtl"]] {
  -moz-image-region: rect(48px 384px 72px 360px) !important;
}
2. Nouvelles règles css pour le bouton « retour » dans le fichier browser.css

Enregistrez les modifications, refermez tous les fichiers et reconstruisez l'archive firefox_tango_theme-0.6-fx.jar (sous Nautilus, sélectionnez l'ensemble des fichiers et répertoires décompressés, faîtes un clic droit puis Créer une archive... ; dans la boîte dialogue qui suit, choisissez l'extension .jar).

Il suffit maintenant de replacer l'archive du thème dans son emplacement s'il était déjà installé, où de l'installer en faisant glisser l'archive sur la fenêtre « extensions » du navigateur web. Lancez Firefox pour vérifier le résultat.