Introduction
============
Vous avez migrez vers [Firefox 57](https://linuxfr.org/redaction/news/firefox-57) et vous ne retrouvez plus vos petits dans la nouvelle interface [Photon](https://design.firefox.com/photon/welcome.html). Deux solutions s'offrent à vous:
1. Vous trollez un peu partout en espérant en vain que ça fera pousser une [WebExtension](https://developer.mozilla.org/fr/Add-ons/WebExtensions/What_are_WebExtensions) ;
2. Vous prenez les choses en main avec ce wiki ;
userChrome.css
==============
Oui Firefox utilise cet outil compliqué et polémiquecontroversé qu'est le [[CSS]] pour construire son interface. 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](https://developer.mozilla.org/fr/docs/Outils/Bo%C3%AEte_%C3%A0_outils_du_navigateur) pour l'interface du navigateur.
>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 !)
```css
/* 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
------------
```css
/*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
----------
```css
/*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".
```css
/*
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.
```css
/*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.
```css
/*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/