Una caratteristica interessante di Firefox (e Thunderbird) è la possibilità di modificare l'aspetto di tutta (o quasi) l'interfaccia mediante CSS.

Questo può venire particolarmente in aiuto quando (come nel mio caso), dopo aver applicato un tema al proprio DE e i layer di compatibilità GTK/QT poi parti del browser non si riescono in alcun modo a far vedere con colori leggibili...

Il file da usare per modificare gli aspetti dell'interfaccia si chiama "userChrome.css", e va inserito nella cartella "chrome" del proprio profilo firefox/thunderbird.

Il problema è sapere come si chiamano i selettori CSS da usare per modificare le parti di interfaccia che ci servono. Su web si trovano diversi articoli e guide, ma nessuna è completa (anche perchè il browser è in costante cambiamento, molte guide sono pre Firefox 4 e l'interfaccia è cambiata molto nel frattempo).

Per questo ci viene in aiuto l'estensione DOM Inspector:

https://addons.mozilla.org/en-US/firefox/addon/6622

Installando questa estensione e aprendo la sua interfaccia (Tools > Dom Inspector) potremo analizzare anche l'interfaccia!

Basta andare in File > Inspect a Chrome Document e scegliere la prima finestra dalla lista.

Quella è già la GUI, per facilitare l'individuazione dell'elemento da modificare si può usare il pulsante "target", che permette di mettere il focus su un elemento nell'inspector cliccandoci sopra. Molti elementi non sono accessibili bene in questa modalità, ma con un pò di pazienza e guardando il tree degli oggetti è possibile arrivare a tutto.

Per quanto riguarda la mia configurazione specifica, per sistemare il problema del menu e del box suggerimenti, questo è il mio userChrome.css:

/* * Do not remove the @namespace line — it’s required for correct functioning */
/* set default namespace to XUL */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
.menubar-text,
menubar > menu[_moz-menuactive="true"] {
  color: MenuText !important;
}
 
.autocomplete-richlistbox .autocomplete-richlistitem {
  color: WindowText !important;
  background-color: WindowFrame;
}
.autocomplete-richlistbox .autocomplete-richlistitem[selected] {
  color:HighlightText !important;
  background-color: Highlight !important;
}

Per altre info (e un esempio con tanti selettori già pronti):

http://eriwen.com/firefox/use-the-dom-inspector/