Geckozone

Bonjour,
J'utilise la version 142.0.1 et je souhaitai modifier les icônes des raccourcis placés dans ma barre personnelle.
Après avoir consulter de nombreux sites, la doc mozilla et également demandé à l'IA (chatgpt) j'ai réaliser le code ci-dessous en personnalisant le fichier "userChrome.css" et en chargeant des images PNG à la place des icônes par défaut du site. (ou plutôt l'absence d’icône du site).

Cela fonctionne, mais j'aimerai savoir :
- s'il y a un moyen plus moderne de réaliser cela
- si cette façon de faire vous semble pérenne, notamment lors des futures mises à jour
- autres suggestions, sécurité, etc...

Un grand merci à vous.

Dans le fichier "userChrome.css"

Le code cible le nom donné au raccourci, ici "MON_SITE",
puis cache l’icône par défaut,
affiche une image PNG à la place
et finit par cacher le nom du raccourci.

Attention, cela ne fonctionne pas, si le raccourci n'a pas de nom [label]. Il suffit donc de lui donné un nom bidon, le cibler et le code s'occupe d'affiche une image et cacher le texte du nom bidon.

Code : Tout sélectionner

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@-moz-document url("chrome://browser/content/browser.xhtml") {

  /* ========= BARRE PERSONNELLE — par NOM (label="MON_SITE") ========= */
/* ========== MON_SITE ========== */
  /* 1) Masquer l’icône d’origine */
  #PersonalToolbar toolbarbutton.bookmark-item[label="MON_SITE"] .toolbarbutton-icon,
  #PersonalToolbar toolbarbutton.bookmark-item[label="MON_SITE"] image.toolbarbutton-icon,
  #PersonalToolbar toolbarbutton.bookmark-item[label="MON_SITE"] img.toolbarbutton-icon {
    display: none !important;
  }

  /* 2) Icône perso en fond + bouton "icône seule" (texte caché) */
  #PersonalToolbar toolbarbutton.bookmark-item[label="MON_SITE"] {
    -moz-appearance: none !important;
    background-image: url("icons/MON_SITE.PNG") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;      /* centré puisque pas de texte */
    background-size: 16px 16px !important;

    /* icône seule : enlever le padding texte et fixer la taille cliquable */
    padding: 0 !important;
    margin: 4px 0px !important;
    width: 26px !important;                      /* zone clic ~22px */
    min-width: 26px !important;
    height: 26px !important;
  }

  /* 3) Cacher le texte du favori (icône seule) */
  #PersonalToolbar toolbarbutton.bookmark-item[label="MON_SITE"] .toolbarbutton-text {
    display: none !important;
  }
}

Geckozone

Barre personnelle - personaliser les icones

Barre personnelle - personaliser les icones