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

Question

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

Maxou24 · Accepted Answer

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

Maxou24 · Answer

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.

pistouri · Answer

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+

pistouri · Answer

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.

Comment (re)mettre la barre d'onglets sous la barre d'adresse de Firefox ?

4 réponses

Discussions similaires