Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Personnalisation de firefox57

Bigcake

Bonjour,

Suite à mise à la poubelle de nombreuses fonctionnalités permettant la modification de l'interface de manière "user-friendly",
Et dans l'espoir qu'ils ne mettent pas à la poubelle la prise en charge de ce fichier dans les versions futurs... je me suis penché sur le fonctionnement de leur fichier userChrome.css qui permet de refaire une personnalisation de l'interface d'une manière beaucoup plus poussé mais aussi beaucoup plus compliqué.

Je vous partage donc mes découvertes dans ce post:
- Pour refaire passer la barre des onglets au dessous de la barre d'url et la barre des raccourcis
- Pour retrouver des onglets Australis (arrondis + courbés)
- Cacher le bouton "Suivant" quand y n'y a pas de page suivante
- [En cours] Fusion du bouton "Précédent" avec la barre d'adresse

Mon conseil quand vous modifiez ce fichier : faites pas à pas, fonctionnalité par fonctionnalité en fermant/relançant firefox entr chaque changement

Hésitez pas demander d'autres si d'autres trucs sont possible, j'ai trouvé beaucoup de fonctionnalités, que j'utilise pas forcément ou que j'ai omis (genre transparence de barres qui peut être utile dans certains cas)
Hésitez pas non plus à partager vos éventuelles découvertes, je les rajouterais dans ce 1er post

La première chose à faire est de créer le dossier 'chrome' qui n'existe peut être pas dans votre profil firefox
si vous ne connaissez pas votre dossier de profil, il est retrouvable à l'url "about:profiles"

Ensuite tout se passe dans le fichier 'userChrome.css' qu'il faudra créer s'il n'existe pas dans le dossier chrome ci-dessus.

- Pour refaire passer la barre des onglets au dessous de la barre d'url et la barre des raccourcis, il faut réorganiser la "priorité" des barres.

#PersonalToolbar {
    -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar {
    -moz-box-ordinal-group: 3 !important;
}

- Pour retrouver des onglets Australis (arrondis + courbés)
J'ai réglé la transparence à 40% pour l'onglet et le hover à 20%, c'est ce qui me plait, si vous avez envie d'une transparence différente faite moi signe 😉

/* --------------------- Reset globale -------------------------- */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
    border: none !important;
}
.tabbrowser-tab > .tab-stack > .tab-background {
    background-image: none !important;
    -moz-box-orient: horizontal !important;
    background-color: transparent !important;
    margin-top: 0px !important;
    border: none !important;
}
.tab-background[selected="true"] {
    border: none !important;
}
.tab-line {
    display: none !important;
}
.tab-bottom-line {
    display: none !important;
}
/* --------------------- barre d'onglets  -------------------------- */                                                                          
.tabs-newtab-button {
    -moz-margin-end: -15px !important;
}

.tab-background[selected="true"]::before {
    border: none !important;
    content: "" !important;
    width: 30px !important;
    min-height: 30px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='33px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='33' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .4);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
    display: -moz-box !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    margin-left: -15px !important;
}

.tab-background[selected="true"]::after {
    border: none !important;
    content: "" !important;
    width: 30px !important;
    min-height: 30px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='33px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='33' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .4);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
    display: -moz-box !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    margin-right: -15px !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
    border: none !important;
    content: "" !important;
    width: 30px !important;
    min-height: 30px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='33px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='33' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .2);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
    display: -moz-box !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    margin-right: -15px !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
    border: none !important;
    content: "" !important;
    width: 30px !important;
    min-height: 30px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='33px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='33' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .2);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
    display: -moz-box !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    margin-left: -15px !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
    background-image:
    linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0) ),
    linear-gradient( transparent 2px,
                     rgba(255,255,255,.2) 2px,
                     rgba(255,255,255,.2) ),
    none !important;
    margin-top: 0px !important;
}

.tab-background[selected="true"] > spacer {
    background-image:
    linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0) ),
    linear-gradient( transparent 2px,
                     rgba(255,255,255,.4) 2px,
                     rgba(255,255,255,.4) ),
    none !important;
    margin-top: 0px !important;
}

- Cacher le bouton "Suivant" quand y n'y a pas de page suivante:

#forward-button[disabled="true"] {
display: none;
}

Coeur Noir

Oh des onglets arrondis !

…pas mal mais ça n'a pas non plus le même look qu'avant ? Ces onglets sont transparents, et n'ont pas la même forme… c'est toi qui a re-créé ça ou t'es parti de quelque chose d'existant ?

Bigcake

Le look n'est pas totalement identique, mais ça ressemble assez pour me convenir, donc j'ai pas cherché plus loin, j'ai trouvé les courbes dans le css de quelqu'un d'autre, mais son css part en cacahouètes avec les autres modifs que je fait du coup, je l'ai adapté à mon besoin.

Pour les onglets non sélectionnés totalement transparent, c'est ce que j'ai actuellement sur FFesr52 j'ai même pas tilté ce point.
Faudrait que je regarde ce que ça fait sur un profil vierge pour le proposer ^^!