Comment (re)mettre la barre d'onglets sous la barre d'adresse de Firefox ? [Résolu/Fermé]

Signaler
Messages postés
27
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
5 janvier 2020
-
Messages postés
148
Date d'inscription
lundi 11 août 2008
Statut
Membre
Dernière intervention
25 décembre 2019
-
Bonjour,

Résolu, solution ci-dessous.
J'avais essayé beaucoup des astuces glanées sur la toile, aucune ne fonctionnait car elle concernent d'anciennes versions de FF, même le bout de code /* mettre la barre des onglets en bas */ que j'avais ajouté dans le fichier userChrome.css du dossier chrome du dossier de profil que j'ai conservé de la version 56, n'est plus pris en compte.
Mais voilà, en cherchant bien au bon endroit non sans mal, la solution est ici :

https://support.mozilla.org/fr/questions/1248277 (code ci-dessous).

Si le dossier chrome n'existe pas dans ton dossier de profil il faudra le créer, puis créer dans ce dossier un fichier userChrome.css dans lequel il faudra copier le code ci-dessous. Si le fichier userChrome.css existe déjà, attention de ne pas recopier la première ligne @namespace url qui doit déjà y être. Je viens de tester en supprimant petit à petit des fonctions : tout le code n'est pas nécessaire, de plus il y a des parties qui justement ne fonctionnaient pas seules comme
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

qui semble donc venir de la préhistoire.
Alors je mets dans la 1ère boite la seule partie du code qui produit l'effet voulu (du moins sous windows 7 / FF v.66), et dans la 2e boite le code complet renseigné sur la page support.mozilla.org

1 - Code suffisant pour passer la barre d'onglet sous la barre d'adresse :
/*
 * Ne retirez pas la ligne @namespace line -- elle est requise pour un fonctionnement correct
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/* *************** */
/* TABS: on bottom */
/* *************** */
#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"])
#navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}


2 - code complet renseigné sur la page https://support.mozilla.org/fr/questions/1248277
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* ***************** */
/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 33px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 33px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
 background-color: var(--toolbar-bgcolor) !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
 position: fixed !important;
 right: 0 !important;
 top: calc(6px + var(--tab-min-height)) !important;
 display: block !important;
 visibility: visible !important;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}

Bidouillage : J'ai laissé aussi la fonction #TabsToolbar avec margin-bottom: 3px !important; à la place de 1px, qui rend visible un peu plus la couleur des onglets contextuels du module https://addons.mozilla.org/fr/firefox/addon/multi-account-containers/


Configuration: Windows 7 / Firefox 66.0

4 réponses

Un grand merci Mizushima, enfin je retrouve mes onglets à leur place légitime.
Mais bon sang qu' elle peut être la logique des développeurs de firefox pour aller les mettre au dessus de la barre URL, alors qu'il me semble qu'une majorité d'utilisateurs souhaitent les avoir dessous?
Qu'ils veuillent faire notre bonheur, soit, mais pas malgré nous. Qu'ils nous laissent au moins le choix et ajoutent une extension en conséquence.

ps: Chemin complet à suivre pour modifier ou créer le fichier userChrome.css
C:\Users\Moi\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxxx.default-12345678901234/chrome
1
Merci

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez Comment Ça Marche

CCM 92840 internautes nous ont dit merci ce mois-ci

Messages postés
13038
Date d'inscription
dimanche 14 juin 2015
Statut
Contributeur
Dernière intervention
20 mai 2020
4 867
Bonjour,

La solution trouvée est sur ce post

1- Copier/coller le contenu du fichier bloc note dans le fichier ''Chrome'' de Firefox sur ce lien

2- Voici les lignes à copier/coller dans le fichier ''Chrome'' de Firefox

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

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}

#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 33px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: 33px !important; /* needs to be the same as above under :root */
--tab-min-width: 80px !important;
}

#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
background-color: var(--toolbar-bgcolor) !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}

/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
position: fixed !important;
right: 0 !important;
top: calc(6px + var(--tab-min-height)) !important;
display: block !important;
visibility: visible !important;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}
/* TABS on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
-moz-box-ordinal-group: 10;
}
#TabsToolbar {
-moz-box-ordinal-group: 1000 !important;
}

#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
}

#tabbrowser-tabs {
width: 100vw !important;
}

#TabsToolbar #window-controls {
display: none !important;
}



Bonne journée.
Je reprends le sujet, donc ta solution, Mizushima, fonctionne à merveille excepté qu'il faut placer le curseur à côté du dernier onglet pour voir apparaître le plus qui permet de créer un nouvel onglet. J'ai bien essayé de décortiqué le css pour comprendre où était le "loup" mais n'étant pas développeur patenté je n'ai pas trouvé. Ca ne me gêne pas outre-mesure, mais bon ce serait quand même mieux et plus logique que le signe + soit là en permanence.
Merci par avance pour tes lumières.
Messages postés
27
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
5 janvier 2020
22
La version 71 de FF au moment où j'écris, ne prend plus en compte le fichier userChrome.css (ou cause un autre problème) car les onglets sont remonté au-dessus de la barre d'adresse (plus d'autre détails sur un module), j'ai dû réinstaller une 69 et réinjecter une sauvegarde de mon profil car depuis peu une ancienne version ne peut plus ouvrir un profil ayant été ouvert sous une version plus récente, autrement dit perte de compatibilité au fil du temps.
FF fait tout pour compliquer les choses ou quoi ?
 
Messages postés
11
Date d'inscription
mardi 15 juillet 2008
Statut
Membre
Dernière intervention
13 janvier 2020
>
Messages postés
27
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
5 janvier 2020

Bonjour...
Oui, effectivement, on pourrait se le demander...
Car à presque toutes les MAJ la présentation change !
J'ai envoyé plusieurs messages au staff pour leur faire part de mon mécontentement...

Ceci étant, petite rectification... Avec la v71.0, le fichier "userchrome.css" est toujours pris en compte...
Si ce n'était pas le cas, il suffit de modifier l'état suivant :
_ Ouvrir "about:config" dans la barre d'adresse...
Copier/coller dans le champs de recherche la clé suivante :
toolkit.legacyUserProfileCustomizations.stylesheets
Effectuer un double-clic dessus pour passer la valeur à true.

Mais, en ce qui me concerne, je rencontre toujours un problème...
_ J'aimerai retrouver la présentation logique suivante :
1) Barre de Titre de FF... #main-window (tabsintitlebar)
2) Barre de Menus......... #toolbar-menubar
3) Barre de Navigation.. #nav-bar
4) Barre Personnelle..... #personalToolBar
5) Barre d'Onglet........... #tabsToolbar
---
_ Hors depuis la dernière MAJ v71.0, j'ai la disposition suivante (qui ne me convient pas):
1) Barre de Titre de FF
2) ... ... ... Bande vide
3) Barre de navigation
4) Barre Personnelle
5) Barre de Menus
6) Barre d'Onglets
---
J'ai tenté un tas de code en javascript dans le fichier "userchrome.css", mais rien n'y fait !
Lorsque j'arrive à remonter la "Barre de Menus" en position (2), toutes les autres changent !
Cela entraine automatiquement la "Barre d'onglets" qui reste collée en dessous de la "Barre de Menus" ! Zarbi !
J'ai, entre autres, essayé les "moz-box-ordinal-group..." ... mais nada...
Pour moi, je pense que quelque chose a été changé dans un autre fichier, mais pour l'instant je sèche...
Mais ce qui est encore plus surprenant, est le fait que j'ai fait cette MAJ v71.0 sur 3 stations...
Hors, seules les 2 stations sous W7 ont perdues la config d'origine. Celle sous W8 n'a pas changé !
Les fichiers "userchrome.css" sont restés tous identiques sur les 3 stations ! Étrange non ?!?

Si quelqu'un a 1 ID... je suis preneur... Merci...

PS.: Le code de "pistouri" ne fonctionne pas correctement chez moi...
Messages postés
13038
Date d'inscription
dimanche 14 juin 2015
Statut
Contributeur
Dernière intervention
20 mai 2020
4 867
Bonjour,
  • Mettre les onglets au-dessus de la barre d'adresse à partir de Firefox 71 avec le fichier userChrome.css.


Ouvrir le dossier Chrome dans le profils de Firefox.
Copier coller ces lignes:

/******* à partir de Fx71 *******/

/*===================== barre MENU en haut =======================*/
/*!!!!! barre de titre désactivée !!!!!*/
/*** fenêtre maxi ***/
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
position: fixed !important;
top: 8px !important;
}

/*** fenêtre redimentionnable ***/
#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
position: fixed !important;
top: 0 !important;
}


/*!!!!! barre de titre active !!!!!*/
#main-window:not([tabsintitlebar]) #toolbar-menubar {
position: fixed !important;
top: 0px !important;
}

/* ajuster position verticale barre d'outils */
#main-window:not([tabsintitlebar]) > #navigator-toolbox {
margin-top: 20px !important;
}

/*================== FIN barre menu en haut ====================*/





/*==================== barre ONGLET dessous ===================*/
#titlebar { -moz-box-ordinal-group: 3 !important;
}
/*** réduire l'espace avec barre perso ***/

/* règle en fenêtre maxi utile seulement pour windows */
#main-window[tabsintitlebar][sizemode="maximized"] > #navigator-toolbox > #titlebar {
-moz-appearance: -moz-window-titlebar !important;
}


:root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
--space-above-tabbar: -10px !important;
}



/*** ajuster position verticale barre d'outils ***/
#main-window[tabsintitlebar][sizemode="maximized"] > #navigator-toolbox {
margin-top: 30px !important;
}

#main-window[tabsintitlebar][sizemode="normal"] > #navigator-toolbox {
margin-top: 20px;
}


/*** déplacer décalage de la barre d'onglets pour l'espace des boutons fenêtre ***/
/*sans thème (fenêtre redimentionnable)*/
#main-window[tabsintitlebar][sizemode="normal"]> #navigator-toolbox:not(:-moz-lwtheme) > #titlebar .titlebar-buttonbox-container{
display: none
}
/*avec thème*/
#main-window[tabsintitlebar][sizemode="normal"]> #navigator-toolbox:-moz-lwtheme > #titlebar .titlebar-buttonbox-container{
position: fixed !important;
top: 0; right: 0; margin-top: -15px;
}

/* (fenêtre maxi) */
#main-window[tabsintitlebar][sizemode="maximized"] > #navigator-toolbox > #titlebar .titlebar-buttonbox-container{
position: fixed !important; top: 0; right: 0; margin-top: -5px;
}


/*** ajuster position horizontale barre d'onglets ***/
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[inactive="true"] + #TabsToolbar {
margin-right: -40px;
}

#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[inactive="true"] + #TabsToolbar {
margin-left: -40px; margin-right: -40px;
}

/*======================= FIN barre onglet dessous ==========================*/



  • En images



Vous pouvez prendre le fichier bloc-note pour ensuite faire un copier/coller de l'intégralité des lignes texte sur ce lien

A+



Messages postés
1062
Date d'inscription
lundi 22 décembre 2008
Statut
Membre
Dernière intervention
19 mai 2020
386
Bonjour.
Merci pour ce fichier Chrome, mais peux t'on également placer la barre de menue en haut de l’écran dans le même fichier ?
Messages postés
148
Date d'inscription
lundi 11 août 2008
Statut
Membre
Dernière intervention
25 décembre 2019
34
Merci Pistouri,
J'ai mis mon fichier userchrome.css à jour avec ta modif, j'ai retrouvé mes onglets en bas.
J'appréhende la prochaine version de FF.
Mais bon sang pourquoi les développeurs ne laissent-ils pas le choix aux utilisateurs de mettre les onglets là où c'est le plus pratique pour eux?
J'ai l'impression qu'ils prennent un malin plaisir à contrarier le monde.
En tous cas, grand merci à toi.

PS: j'ai voulu essayer la solution de Janot-95 qui semblait simple, mais la clef en question était déjà à "true". Ca ne fonctionnait donc pas chez moi.