Wiki Firefox et userChrome.css

Sommaire

• Introduction
• userChrome.css
• Browser Toolbox
• Exemples
  • Les onglets
  • Les bordures
  • Les barres
  • Cacher la barre d'onglets quand il y en a un seul
  • Police
  • Survol
• Conclusion
• Voir aussi

Introduction

Vous avez migrez vers Firefox 57 et vous ne retrouvez plus vos petits dans la nouvelle interface Photon. Deux solutions s'offrent à vous:

1. Vous trollez un peu partout en espérant en vain que ça fera pousser une WebExtension ;
2. Vous prenez les choses en main avec ce wiki ;

userChrome.css

Oui Firefox utilise cet outil compliqué et controversé qu'est le CSS pour donner un style à son interface construite en XUL. Et en plus ils ont eu le culot de laisser d'imposer la possibilité aux utilisateurs d'ajouter leur propre fichier CSS. L'objet du délit: ~/.mozilla/firefox/le_profil/chrome/userChrome.css. Les victimes consentantes que nous sommes créeront le dossier et le fichier s'ils n'existent pas encore, puis y déposeront les règles CSS avec les sélecteurs qui vont bien.

On prendra soin de rajouter !important à la fin de chaque déclaration pour donner la priorité à nos règles. Enfin il faut redémarrer le navigateur pour prendre en compte les changements apportés au fichier.

Browser Toolbox

Vous connaissez sans doute les Outils de développement de Firefox pour inspecter, entre autres, le contenu HTML et CSS de vos pages web. Et bien il existe la même boite à outils pour l'interface du navigateur, à la différence près que ce sera du XML, XUL oblige.

La boite à outils du navigateur n'est pas activée par défaut. Pour l'activer, il est nécessaire de cocher les options: "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant". Ces options se trouvent dans les options des outils de développement, dans la section "Paramètres avancés"

Ainsi vous avez tout le loisir de décortiquer l'interface et de trouver quels sélecteurs utiliser, de faire des essais, ou encore d'étudier un fichier tel que browser.css qui concentre une bonne partie du style existant.

Exemples

Les onglets

Les nouveaux onglets sont moches. C'est un scandale ! (… et avant aussi c'était un scandale !)

/* arrondir les onglets */

.tab-background {
  border-radius: 6px 6px 0px 0px !important;
  border-image: none !important;
  border-width: 0px;
}
.tab-line { display: none !important;}

/*suppression du séparateur entre les onglets*/

.tabbrowser-tab::after, .tabbrowser-tab::before { border-left:0px !important;}

/*suppression de la croix sur les onglets non survolés*/

#tabbrowser-tabs .tabbrowser-tab:not(:hover) .tab-close-button { display:none!important;}

/*couleur du texte des onglets inactifs*/

.tabbrowser-tab:not([visuallyselected="true"]), .tabbrowser-tab:-moz-lwtheme { color: red !important;}

/*couleur du fond de l'onglet actif*/

:root { 
    --tabs-border: transparent !important;
    --toolbar-bgcolor: orange !important;
    --toolbar-bgimage: none !important;
    }

On peut bien sûr arrondir davantage en augmentant border-radius

Les bordures

/*suppression des bordures*/

#urlbar, .searchbar-textbox { border:0px !important;}
#TabsToolbar:not([collapsed="true"]) + #nav-bar { border:0px !important;}
#navigator-toolbox::after { border:0px !important;}

Les barres

/*Couleur de la barre de navigation*/

#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
    background-color: yellow !important;
    background-image: none !important;
}

/*couleur de la barre de recherche/adresse*/

#urlbar { background-color: green !important; }

/*taille des barres*/

#nav-bar { min-height: 67px !important;}
#urlbar { min-height: 21px !important;}

/* déplacer la barre d'onglets sous la barre de navigation*/

#TabsToolbar{ 
  -moz-box-ordinal-group: 3 !important;
  margin-top: -1px !important;
}

Cacher la barre d'onglets quand il y en a un seul

Il faut penser à déplacer le bouton d'ouverture d'un nouvel onglet, dans la barre de navigation par exemple, via l'interface "Personnaliser".

/*
on cache l'onglet quand il est unique (ligne 6).
on cache le bouton d'ouverture d'un nouvel onglet (ligne 5)
on supprime la hauteur minimum de la barre d'onglet (ligne 4)
on récupère la hauteur des onglets par défaut suivant la densité choisie (identique à browser.css) (lignes 1,2,3)
on la réinjecte cette fois, non plus dans la barre des onglets, mais directement dans chaque onglet. (ligne 7)
*/

:root { --tab-min-height: 33px; }
:root[uidensity=compact] { --tab-min-height: 29px;}
:root[uidensity=touch] { --tab-min-height: 41px;}
#tabbrowser-tabs, #tabbrowser-tabs > *:not(tab) { min-height: 0px !important;}
.tabs-newtab-button { visibility: collapse !important;}
tab[first-tab='true'][last-tab='true'] { visibility: collapse !important;}
tab { min-height: var(--tab-min-height) !important;}

Police

On peut changer de police de caractère.

/*dans barre de navigation et la barre d'onglet*/

#navigator-toolbox { font-family: Comic Sans MS !important;}
#navigator-toolbox { font-weight: bolder !important;}

/*ou bien partout, y compris les menus*/

* { font-family: Comic Sans MS !important;}
* { font-weight: bolder !important;}

Survol

On peut changer le comportement de l'interface au survol des boutons. Au lieu d'un changement du fond, on change la couleur de l'icône elle-même. Évidemment cela pose problème avec les icônes des extensions qui ne sont en général pas coloriables.

/*changement des survols*/
/*couleur de survol : #ffffff, c'est à dire blanc plus blanc que blanc*/
/*couleur icône actif : #45A1FF, le même bleu en principe que celui de l'étoile des marque-pages*/

#PersonalToolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover,
.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]),
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack {
  background-color: transparent !important;
}

#PersonalToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active),
.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
toolbarbutton.bookmark-item[open="true"],
toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
  background-color: transparent !important;
}

toolbar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
  background-color: transparent !important;
}

toolbarbutton:not([disabled=true]):not([checked]):not([open]):not(:active):hover { color: #ffffff !important;}
toolbarbutton:not([disabled=true]):-moz-any([checked="true"],[open],[checked],:active) { color: #45A1FF !important;}

/*urlbar*/

.urlbar-icon:not([disabled]):hover,
.urlbar-icon-wrapper:not([disabled]):hover {
  background-color: transparent !important;
  color: #ffffff !important;
}

.urlbar-icon[open],
.urlbar-icon-wrapper[open],
.urlbar-icon:not([disabled]):hover:active,
.urlbar-icon-wrapper:hover:active {
  background-color: transparent !important;
  color: #45A1FF !important;
}

/*identity box*/

#identity-box:hover:not(.no-hover):not([open=true]) {
  background-color: transparent !important;
}

#identity-box:hover:active:not(.no-hover),
#identity-box[open=true] {
  background-color: transparent !important;
}

#identity-box:hover:not(.no-hover):not([open=true]):not([open]):not(:active) > #identity-icon {
  color: #ffffff !important;
}

#identity-box:active > #identity-icon {
  color: #45A1FF !important;
}
#identity-box:hover:active:not(.no-hover),
#identity-box[open=true] {
  color: #45A1FF !important;
}
#identity-box:-moz-focusring:not(:active) {
  outline: none !important;
}

Conclusion

Photon va demeurer plusieurs années donc plutôt que de pleurer et d'attendre des WebExtensions qui n'arriveront probablement jamais, il me parait judicieux de prendre une heure de son temps et d'ajouter quelques lignes de CSS dans un fichier pour avoir quelque chose en phase avec ses besoins et ses goûts, étant entendu qu'aucune interface par défaut ni aucune extension ne pourra jamais les couvrir tous.

Voir aussi

https://www.forum-francophone-linuxmint.fr/viewtopic.php?t=7506
https://www.reddit.com/r/FirefoxCSS/