Modifier les icônes des dossiers de raccourcis sous Firefox 82

Bonjour !

Je me suis mis à trier mes raccourcis récemment. J'en ai plus de 800, et ils attendaient tous bien sagement dans un dossier nommé "vrac" depuis des années. Je me suis donc attelé à la lente tâche de les organiser un peu, mais je suis vite arrivé à court de place dans ma barre des raccourcis pour créer des dossiers.

Je me suis alors demandé si on ne pouvait pas cacher le nom du dossier pour n'afficher qu'une icône, ce qui prend moins de place.

Voici donc la marche à suivre pour remplacer les icônes banales des dossiers en jolies images personnalisées !

icon bookmark firefox

Il est à noter qu'il existait des modules qui faisaient exactement ça il y a quelques années, mais qui ne sont malheureusement pas compatibles avec les webextensions. Il va donc falloir faire ça à la main.

Je suis tombé sur un article décrivant la même méthode au moment d'écrire ce billet, donc je le cite ici.

Sans plus attendre, commençons.

Au secours, j'ai perdu mon userChrome.css !

La première étape pour changer les icônes des dossiers dans les raccourcis est de se créer un fichier userChrome.css situé dans un dossier chrome, qui doit être placé dans le dossier de votre profil Firefox.

Pour ce faire, rien de plus simple :

screenshot firefox aide dépannage

Explications diverses

C'est facile, on va écrire en css que pour un dossier avec un certain nom, on remplace l'image par une autre image. La barre de raccourcis est en fait une liste, et les images sont en fait les puces. Or les puces, ça se remplace.

Voilà. C'est tout.

Le coooode !

/* PATATE */
.bookmark-item[label="patate"]{
list-style: url("./icons/patate.png") !important;
}

La première ligne est un commentaire CSS, et n'est pas requise pour faire fonctionner le tout (c'est juste un aide mémoire un poil plus lisible que le "label=patate" ligne 2).

Ensuite, on sélectionne l'item nommé "patate" dans la liste .bookmark-item, et on édite le list-style pour que l'image de la puce soit piochée dans le dossier icons (qu'on prend soin de créer dans le dossier chrome). Cette image est très justement nommée "patate".

$ ls -R chrome                                  
chrome:
icons userChrome.css

chrome/icons:
patate.png

Il nous suffit de redémarrer Firefox pour voir que ce stratagème a très bien fonctionné :

screenshot patate dossier icone

Libre à vous de rajouter d'autres images dans le dossier icons, et d'éditer d'autres icônes de dossiers dans votre superbe fichier userChrome.css !

Attention à bien choisir des noms de dossiers uniques, parce que tous les éléments avec le même nom auront l'icône.

screenshot plein de dossiers avec les mêmes icônes

D'ailleurs je me permets de vous glisser le lien vers userchrome.org en guise de conclusion à ce billet, vu que ce site contient pas mal d'informations intéressantes.

À bientôt pour un prochain article :)