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

Question

Bonjour, 

J'utilisais la modification du fichier userchrome.css avec succès jusqu'à cette nouvelle version de Firefox.
La barre d'onglets étant devenue quasi invisible, j'ai cherché ce qui bloquait et je crois que c'est la ligne "position: absolute !important;" dans #TabsToolbar.
En l'enlevant, je récupère mon environnement habituel (barre d'onglets visible et bien calibrée) à ceci près qu'elle est repassée entre la barre de menus et la barre d'adresses....
Une idée de manip. pour la replacer sous la barre personnelle (ce qui était le but premier) ?
Note: tout ceci concerne Firefox 89 bridé par correction (False) des 4 premières lignes de la recherche "Proton" dans about:config.

Merci de toute suggestion et bon weekend ;-)
Fred

jee pee · Answer

Bonjour,

Sans la barre de menu, c'est faisable : https://forums.commentcamarche.net/forum/affich-37238875-liste-marques-pages-firefox-89#8

mais si comme fabul tu utilises la barre de menus ???

fredbxlbe2021 · Answer

Merci pour la suggestion mais je préfère encore la barre d'onglets un chouia trop haut et garder le reste de ma mise en page antérieure (menu + taille, surbrillance et police des onglets) .
Je suppose que dans quelques semaines une nouvelle manip. userchrome.css sera dispo pour régler tout ça.
A+.
F.

little boy62 · Answer

Salut.

Oui, on peut remettre la fameuse barre sous la  barre d'adresse.

Personnellement, je préfère, dans l'ordre :
- Avoir la barre d'adresse en haut
- Avoir ensuite la barre personnelle.
- Puis avoir la barre d'onglet.

Comme ceci :
 

Si l'interface te convient :

il faut modifier une préférence dans about:config
-> Ouvre Firefox, tape about:config, et fais une recherche avec : legacy
-> Repère la ligne suivante : toolkit.legacyUserProfileCustomizations.stylesheets
-> Fais la passer en true, via le bouton ou le double-clic

Puis, vérifier si les extensions sont visibles :
-> Ouvre un dossier quelconque
-> Dans le menu, onglet affichage : coche la case Extensions de noms de fichier

Ensuite :
-> Ouvre firefox
-> menu > Aide > Plus d'informations de dépannage
-> Ensuite, repère Dossier de profil > Clique ensuite sur Ouvrir le dossier correspond
-> Une fois le dossier ouvert, créez ensuite un dossier chrome. S'il existe déjà, sauvegarde son contenu, afin que le dossier soit vide.
-> Puis créer un fichier intitulé : userChrome.txt et ouvre-le
-> Met ceci dans ce fichier : https://pastebin.com/28RyCx6E
-> Sauvegarde le fichier et ferme le.
-> Renomme ensuite userChrome.txt en userChrome.css

Note :
Merci pour la suggestion mais je préfère encore la barre d'onglets un chouia trop haut et garder le reste de ma mise en page antérieure (menu + taille, surbrillance et police des onglets) .

Dans ce cas là, adapte le fichier userChrome à ta convenance.

++

little boy62 · Answer

@fabul : re

Essaye ceci, dans ton userChrome
https://pastebin.com/xYnBdfWd

++

fredbxlbe2021 · Answer

Merci  little boy62 pour ta contribution et pour le presque tuto complet ;-)

Ca fonctionne chez moi (menu puis adresse puis barre personnelle puis barre des onglets) sauf que comme fabul, l'ensemble de la barre des onglets est à 50% recouverte par la fenêtre générale (à l’exception de l'onglet utilisé qui lui repasse au dessus de la fenêtre générale)....

Je suis pas arrivé à joindre une copie écran à mon message....(jpg ou png).

F.

Razielbzz · Answer

Bonjour j'ai le même soucis que fredbxlbe2021 barre d'onglets caché a 50% et un séparation entre ma barre personnel et ma barre des onglets ( non nécessaire si possible j'aimerais la réduire).
Fabul sur la capture que tu a transmis je vois que tu a qu'un onglet d'ouvert et quand fredbxlbe2021  et moi on dit que les onglets sont caché à 50% et les onglet ouvert mais en secondaire, l'onglet principal et bien afficher a 100%.
Si quelqu'un a la solution je suis preneur merci 
Franchement pourquoi les programmeurs de mozilla sont toujours entrain de retire des fonction utiles a tous pour ne pas nous laissé le choix, c'était le même bordel a l'époque pour la version 56 (si je me rappel bien le n°).

fabul · Answer

As tu bien celui la ?

Et recopié en dessous

https://forums.commentcamarche.net/forum/affich-37239970-comment-re-mettre-la-barre-d-onglets-sous-la-barre-d-adresse-de-firefox89#7

BRABRA62400 · Answer

Bonjour,

J'ai aussi galéré pour remettre FIREFOX à ma façon. Je ne connais pas le langage CSS.
Ci-dessous ''mon FIREFOX'' après ajout des données dans USERCHROIME.css



Il me reste encore un petit souci.
La barre des Menus (Fichier, Edition, ...) est placée tout en haut de la ligne ... j'aimerai la centrer pour la rendre plus visible.


Exemple avec d'autres couleur




Je partage mes données USERCHROME.CSS.

Barre des marques page sur plusieurs lignes

/* 1-BOOKMARKS TAB multiple rows - barre des marques page sur plusieurs lignes */#PersonalToolbar{  --multirow-bmb-n-rows: 5;           /* Nombre de lignes de la barre des marques page modifiable */  --multirow-bmb-row-margin: 50px;    /* Controle l'espace entre les lignes */  max-height: none !important;  }#PlacesToolbar > hbox{   display: block;  width: 100vw;}#PlacesToolbarItems{  display: flex;  flex-wrap: wrap;  /* --uc-bm-padding is defined in autohide_bookmarks_toolbar.css */  max-height: calc(var(--multirow-bmb-n-rows) * (5px + 1em + (2 * (var(--multirow-bmb-row-margin) + var(--uc-bm-padding,3px))))) !important;  overflow-y:auto;  scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor) ;  scrollbar-width: thin;font-size: 18px !important;           /* Hauteur police modifiable */font-style: italic;                   /* Format de la police modifiable */font-family:calibri ;                 /* Police de caractères modifiable */}


Couleur des dossiers de la barre des marques page

    /* 2-Couleur des dossiers Marques page--- *//*   Colored folders for Bookmarks Menus, Bookmarks Sidebar, Bookmarks Toolbar, Library window, Add/Edit Bookmarks dialog  Substitutes a Firefox 57-style folder icon for the new wireframe folder icon

//* Standard folder -- on Toolbar and Menus */#PlacesToolbarItems toolbarbutton[container="true"]:not([query="true"]) .toolbarbutton-icon,:-moz-any(#PlacesToolbarItems,#PlacesChevronPopup,#BMB_bookmarksPopup,#bookmarksMenu,#OtherBookmarksPopup) menu[container="true"]:not([query="true"]) > .menu-iconic-left > .menu-iconic-icon,/* Standard folder -- in Sidebar, Library, Add/Edit Bookmark dialog */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container), #editBMPanel_folderMenuList > .menulist-label-box > .menulist-icon,#editBMPanel_folderMenuList menupopup menuitem, #editBMPanel_folderMenuList {  fill: #e8bb00 !important;    /* Couleur des dossiers modifiable */  /* Specify icon for Firefox 89 Proton (base 64 conversion from old SVG with gold color) */  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2U4YmIwMCIgZmlsbC1vcGFjaXR5PSJjb250ZXh0LWZpbGwtb3BhY2l0eSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTQuNSAzSDYuOTE0YS41LjUgMCAwIDEtLjM1NC0uMTQ2TDUuMTQ2IDEuNDM5QTEuNDkxIDEuNDkxIDAgMCAwIDQuMDg2IDFIMS41QTEuNSAxLjUgMCAwIDAgMCAyLjV2MTFBMS41IDEuNSAwIDAgMCAxLjUgMTVoMTNhMS41IDEuNSAwIDAgMCAxLjUtMS41di05QTEuNSAxLjUgMCAwIDAgMTQuNSAzem0uNSAxMC41YS41LjUgMCAwIDEtLjUuNWgtMTNhLjUuNSAwIDAgMS0uNS0uNVY2aDE0ek0xIDVWMi41YS41LjUgMCAwIDEgLjUtLjVoMi41ODZhLjUuNSAwIDAgMSAuMzU0LjE0NmwxLjQxNCAxLjQxNUExLjQ5MSAxLjQ5MSAwIDAgMCA2LjkxNCA0SDE0LjVhLjUuNSAwIDAgMSAuNS41VjV6Ii8+CiAgPHBhdGggZD0iTTE1IDEzLjVhLjUuNSAwIDAgMS0uNS41aC0xM2EuNS41IDAgMCAxLS41LS41VjZoMTR6IiBmaWxsLW9wYWNpdHk9Ii4yIi8+CiAgPHBhdGggZD0iTTEgNVYyLjVhLjUuNSAwIDAgMSAuNS0uNWgyLjU4NmEuNS41IDAgMCAxIC4zNTQuMTQ2bDEuNDE0IDEuNDE1QTEuNDkxIDEuNDkxIDAgMCAwIDYuOTE0IDRIMTQuNWEuNS41IDAgMCAxIC41LjVWNXoiIGZpbGwtb3BhY2l0eT0iLjEiLz4KICA8cGF0aCBkPSJNMTUgMTMuNWEuNS41IDAgMCAxLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjVWMTNoMTR6IiBmaWxsLW9wYWNpdHk9Ii4wNSIvPgo8L3N2Zz4=") !important;}/* Smart bookmark folder -- on Toolbar and Menus */#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,:-moz-any(#PlacesToolbarItems,#PlacesChevronPopup,#BMB_bookmarksPopup,#bookmarksMenu,#OtherBookmarksPopup) menu[container="true"][query="true"] > .menu-iconic-left > .menu-iconic-icon,/* Smart bookmark folder -- in Sidebar, Library, Add/Edit Bookmark dialog */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, query) {  /* Specify icon for Firefox 89 Proton to override basic folder */  list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important;  fill: #69c !important; /* similar to blue smart folder color */}/*** Top-level "container" icons (otherwise would be Standard folder color) ***//* Bookmarks Menu -- in Sidebar, Library, Add/Edit Bookmark dialog */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu),:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_menu________),#editBMPanel_bmRootItem > .menu-iconic-left, #editBMPanel_folderMenuList[selectedIndex="1"] > .menulist-label-box > .menulist-icon, #editBMPanel_folderMenuList[selectedGuid="menu________"] {  /* Specify icon for Firefox 89 Proton to override basic folder */  list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;  fill: olive !important;}/* Bookmarks Toolbar -- on Menus */#BMB_bookmarksPopup #BMB_bookmarksToolbar > .menu-iconic-left > .menu-iconic-icon,#bookmarksMenuPopup #bookmarksToolbarFolderMenu  > .menu-iconic-left > .menu-iconic-icon,/* Bookmarks Toolbar -- in Sidebar, Library, Add/Edit Bookmark dialog */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar),:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____),#editBMPanel_toolbarFolderItem > .menu-iconic-left, #editBMPanel_folderMenuList[selectedIndex="0"] > .menulist-label-box > .menulist-icon, #editBMPanel_folderMenuList[selectedGuid="toolbar_____"] {  /* Specify icon for Firefox 89 Proton to override basic folder */  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;  fill: olive !important;}/* Other Bookmarks -- on Menus */#BMB_bookmarksPopup #BMB_unsortedBookmarks > .menu-iconic-left > .menu-iconic-icon,#bookmarksMenuPopup #menu_unsortedBookmarks  > .menu-iconic-left > .menu-iconic-icon,/* Other Bookmarks -- in Sidebar, Library, Add/Edit Bookmark dialog */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____),#editBMPanel_unfiledRootItem > .menu-iconic-left, #editBMPanel_folderMenuList[selectedIndex="2"] > .menulist-label-box > .menulist-icon, #editBMPanel_folderMenuList[selectedGuid="unfiled_____"],#OtherBookmarksPopup + .toolbarbutton-icon {  /* Specify icon for Firefox 89 Proton (base 64 conversion from old SVG with olive color) */  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ib2xpdmUiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuMDUiIGQ9Ik0xMi43LDFIMy4zbC0uMi42TC4xLDksMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5bC0zLTcuNEwxMi43LDFaIi8+CiAgPHBhdGggZD0iTTEyLDJsMyw3LjRWMTNhLjk0NS45NDUsMCwwLDEtMSwxSDJhLjk0NS45NDUsMCwwLDEtMS0xVjkuNEw0LDJoOG0uNy0xSDMuM0wuMSw5LjEsMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5LDEyLjcsMVoiLz4KICA8cGF0aCBmaWxsLW9wYWNpdHk9Ii4wNSIgZD0iTTE0Ljk4OCw5LDEyLDJINEwuODUxLDlINS4wMjNBMi45MzEsMi45MzEsMCwwLDAsOCwxMS42LDIuODg5LDIuODg5LDAsMCwwLDExLjAxMiw5WiIvPgogIDxwYXRoIGQ9Ik0xMCw5QTIsMiwwLDAsMSw2LDlIMHYxSDUuMTg0YTIuOTgzLDIuOTgzLDAsMCwwLDUuNjMzLDBIMTZWOVoiLz4KPC9zdmc+") !important;}/* (Older Firefox) Avoid overriding classic Bookmarks Toolbar and Other Bookmarks icons in menus */#BMB_bookmarksPopup #BMB_bookmarksToolbar.menu-iconic-icon, #bookmarksMenu #bookmarksToolbarFolderMenu.menu-iconic-icon {  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;}#BMB_bookmarksPopup #BMB_unsortedBookmarks.menu-iconic-icon, #bookmarksMenu #menu_unsortedBookmarks.menu-iconic-icon {  /* Specify icon for Firefox 89 Proton (base 64 conversion from old SVG with olive color) */  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ib2xpdmUiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuMDUiIGQ9Ik0xMi43LDFIMy4zbC0uMi42TC4xLDksMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5bC0zLTcuNEwxMi43LDFaIi8+CiAgPHBhdGggZD0iTTEyLDJsMyw3LjRWMTNhLjk0NS45NDUsMCwwLDEtMSwxSDJhLjk0NS45NDUsMCwwLDEtMS0xVjkuNEw0LDJoOG0uNy0xSDMuM0wuMSw5LjEsMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5LDEyLjcsMVoiLz4KICA8cGF0aCBmaWxsLW9wYWNpdHk9Ii4wNSIgZD0iTTE0Ljk4OCw5LDEyLDJINEwuODUxLDlINS4wMjNBMi45MzEsMi45MzEsMCwwLDAsOCwxMS42LDIuODg5LDIuODg5LDAsMCwwLDExLjAxMiw5WiIvPgogIDxwYXRoIGQ9Ik0xMCw5QTIsMiwwLDAsMSw2LDlIMHYxSDUuMTg0YTIuOTgzLDIuOTgzLDAsMCwwLDUuNjMzLDBIMTZWOVoiLz4KPC9zdmc+") !important;}


Barres d'onglet en dessous

  /* 3-Barres d'onglet en dessous */@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){:root{ --uc-titlebar-padding: 0px !important }.titlebar-buttonbox-container{ left:0; right: unset !important; }}:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }#titlebar{-moz-box-ordinal-group: 2;-moz-appearance: none !important;--tabs-navbar-shadow-size: 0px;}.titlebar-placeholder,#TabsToolbar .titlebar-spacer{ display: none; }/* Also hide the toolbox bottom border which isn't at bottom with this setup */#navigator-toolbox::after{ display: none !important; }@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }/* These exist only for compatibility with autohide-tabstoolbar.css */toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }


Couleur des onglets

/* 4-Color TABS - couleur des onglets */tab {    font-size: 15px !important;  /* Hauteur police modifiable */    font-family: Arial !important;} /* Police de caractères modifiable */ /* Use color and shape to make the tabs look more like tabs */.tab-background {    background: #dbdbdb ;    /* Couleur de l'arrière plan modifiable */    border-radius: 0px 20px 0 0 !important;    margin-bottom: 0px !important;    box-shadow: 0 0 2px 2px rgba(0,0,0,0.1) !important;    border: 1px solid rgba(255,0,0,.5) !important;    border-bottom-width: 0px !important;}/* Selected tabs I want a bright background with a dark foreground */.tabbrowser-tab[selected] .tab-background {    background: #ffffff !important;   /* Couleur de l'arrière plan modifiable */}.tabbrowser-tab[selected] .tab-label {    color: red !important;    /* Couleur de l'arrière plan modifiable */    font-weight: normal !important;}/* Draw a solid line underneath to make the selected tab look *connected* to the rest of the browser */#TabsToolbar {    border-bottom: 5px solid #ff0000 !important; /* Couleur de l'arrière plan modifiable */}/* Hover over tabs */.tabbrowser-tab:hover .tab-background:not([selected]) {    background: #afedaf !important;   /* Couleur de l'arrière plan modifiable */}



Barre des menus en haut

/* 5-Barre des menus en haut - use with tabs_on_bottom.css *//* Menubar on top patch - use with tabs_on_bottom.css *//* Only really useful if menubar is ALWAYS visible */:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }:root{   /* height if native titlebar is enabled, assumes empty menubar */  --uc-menubar-height: 20px;}:root[tabsintitlebar]{  /* height when native titlebar is disabled, more roomy so can fit buttons etc. */  --uc-menubar-height: 29px; }#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }#toolbar-menubar{  position: fixed;  display: flex;  top: var(--uc-titlebar-padding,0px);  height: var(--uc-menubar-height);  width: 100%;  overflow: hidden;}#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }#toolbar-menubar > [flex]{ flex-grow: 100; }#toolbar-menubar > spacer[flex]{  order: 99;  flex-grow: 1;  min-width: var(--uc-window-drag-space-width,20px);}#toolbar-menubar .titlebar-button{ padding: 2px 17px !important;  }#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }



NB. j'ai fait des modifications dans ABOUT:CONFIG

Pour désactiver Proton :
---------------------------
browser.proton.contextmenus.enabled = false
browser.proton.doorhangers.enabled = false
browser.proton.enabled = false
browser.proton.modals.enabled = false

Pour réactiver le mode compact (disparu avec Proton) :
--------------------------------------------------------------
browser.compactmode.show = true
browser.uidensity = 1 (0 = Normal, 2 = Touch).

Pour réactiver userChrome.css qui est parfois désactivé par Firefox lors d'une nouvelle version :
-----------------------------------------------------------------------------------------------------------
toolkit.legacyUserProfileCustomizations.stylesheets = true


Philippe

fredbxlbe2021 · Answer

bonsoir à tous,

Je suis pas calé en language css mais j'ai fait une compilation des différentes solutions proposées avec comme base une partie des codes de BRABRA62400 relooké avec des morceaux de codes utilisés avant 89 (pour les dimensions et couleurs onglets, lettrages, etc) et je suis satisfait. Les puristes trouveront peut-être des lignes contradictoires ou redondantes mais ça marche pour moi......donc je partage mon userchrome.css


/* 3-Barres d'onglet en dessous */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{-moz-box-ordinal-group: 2;-moz-appearance: none !important;--tabs-navbar-shadow-size: 0px;}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }

/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

/* 5-Barre des menus en haut - use with tabs_on_bottom.css */

/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

:root{
   /* height if native titlebar is enabled, assumes empty menubar */
  --uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
  /* height when native titlebar is disabled, more roomy so can fit buttons etc. */
  --uc-menubar-height: 29px; 
}

#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
#toolbar-menubar{
  position: fixed;
  display: flex;
  top: var(--uc-titlebar-padding,0px);
  height: var(--uc-menubar-height);
  width: 100%;
  overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
  order: 99;
  flex-grow: 1;
  min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important;  }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* Largeur des onglets */ 
.tabbrowser-tab:not([pinned]) { 
max-width: 150px !important; min-width: 30px !important; }
.tabbrowser-tab:not([fadein]) { 
max-width: 1px !important; min-width: 1px !important; } 

.tab-background[selected="true"] {
background-attachment: none!important;
background-color: red!important;
background-image: none!important;
}
/* Make menus big, pretty and readable */
menubar, menubutton, menulist, menu, menuitem {
font-size: 16px !important
}
#TabsToolbar {
 width: 100vw !important;
 font-size: 18px !important;
}

BRABRA62400 · Answer

Voilà mon fichier USERCHROME.css



https://www.cjoint.com/c/KFkhOs2eh5A

philippr

fredbxlbe2021 · Answer

Cela dit, je voudrais encore peaufiner mon interface (et en connaitre un peu plus en css  :-).....)

1) dans les 2 tailles de fenêtre (voir point suivant), je voudrais affiner ma barre d'adresse; 

2) ma barre de menu est de taille parfaite lorsque ma fenêtre est en taille intermédiaire (même étirée à 100%), mais elle s'affine (trop) lorsque je passe en fenêtre "agrandie";

L'un de vous pourrait m'indiquer si ces paramètres sont traités dans le css ci dessus (message précédent); à défaut, les codes pour les réguler ?

D'avance merci.

F.

pomlj · Answer

le 12 septembre 2021

Bonjour,

À nouveau le souci de cette barre d'onglets à remettre en bas avec FF 92, (j'ai pas fait gaffe et la mise à jour s'est faite..). J'ai passé la matinée à dénicher un " css " qui fonctionne, si quelqu'un en a besoin je peux le mettre sur le forum..

fredbxlbe2021 · Answer

un puriste y trouvera certainement des incohérences mais ça fonctionne:

/* 3-Barres d'onglet en dessous */


@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{-moz-box-ordinal-group: 2;-moz-appearance: none !important;--tabs-navbar-shadow-size: 0px;}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }

/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }


/* Only really useful if menubar is ALWAYS visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

:root{
   /* height if native titlebar is enabled, assumes empty menubar */
  --uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
  /* height when native titlebar is disabled, more roomy so can fit buttons etc. */
  --uc-menubar-height: 29px; 
}

#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
#toolbar-menubar{
  position: fixed;
  display: flex;
  top: var(--uc-titlebar-padding,0px);
  height: var(--uc-menubar-height);
  width: 100%;
  overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
  order: 99;
  flex-grow: 1;
  min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important;  }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* Largeur des onglets */ 
.tabbrowser-tab:not([pinned]) { 
max-width: 150px !important; min-width: 30px !important; }
.tabbrowser-tab:not([fadein]) { 
max-width: 1px !important; min-width: 1px !important; } 

.tab-background[selected="true"] {
background-attachment: none!important;
background-color: red!important;
background-image: none!important;
}

/* Make menus big, pretty and readable */
menubar, menubutton, menulist, menu, menuitem {
font-size: 18px !important
}
#TabsToolbar {
 width: 100vw !important;
 font-size: 18px !important;
}

/*** Tighten up drop-down/context/popup menu spacing ***/

menupopup > menuitem, menupopup > menu {
  padding-block: 0px !important;
}
:root {
  --arrowpanel-menuitem-padding: 0px 0px !important;

}

pomlj · Answer

Bonsoir fredbxlbe2021,

alors je mets le 'miens' qui fonctionne très bien, j'ai juste modifié tab-min-hight dans * root vers le début je l'ai passé de 40 à 30px.

----------------------------------------------------
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: bottom - Firefox 65 and later - updated for 89+ */
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx89.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */

/* ROOT - VARS */
/* you can adjust the CSS variables until it looks correct */

|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;

  --tab-min-height: 30px !important;/* origine fichier 40 */
  --tab-min-width:  60px !important;

  --tab-adjust:  0px; /* adjust tab bar - only for 68-73 */
  --tab-caption: 5px; /* caption buttons on tab bar */
}

/* TAB BAR - below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important;}
#TabsToolbar {-moz-box-ordinal-group:1000 !important;}

#TabsToolbar {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - PADDING */

|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important; /*89+*/
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  background-color: var(--toolbar-bgcolor) !important;
}

/* TabsToolbar with menubar and titlebar hidden - rules for Firefox 65-73 */

|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~
 #TabsToolbar{
  bottom: var(--tab-adjust); /*ADJUST*/
}

/* TABS: height */
#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;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
  background-color: var(--toolbar-bgcolor) !important;
  color:            var(--toolbar-color) !important;
}

/* indicators *//*

|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  position: absolute !important;
  display: block !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}

/
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* Indicators - HIDE *//*

|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
/

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

/* 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 window-controls and caption buttons on Tab Bar */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}

------------------------------------
nb: je testerai demain ta version ( fred..2021 )..

 Bonne soirée à tous toutes suite à cette nouvelle version de FF 92... **

pomlj · Answer

Bonjour,

je teste demain la version de Fabul,,

et bravo au forum pour cette ré-activation après trois mois de calme.. 

A+

pistouri · Answer

Salut Pomlj,

Forum CCM (onglets sous la barre d'adresse de Firefox)
Après le calme la tempête ou vice versa :-)
Une autre de prévue FF93  ?

Si besoin fait un copier/coller des lignes de ce fichier userchorme ==► Onglets sous barre adresse Firefox 92 



Dans le fichier userchrome de Fabul il a mis a la fin, car au début il a :

/*** Tighten up drop-down/context/popup menu spacing ***/menupopup > menuitem, menupopup > menu {  padding-block: 2px !important;}:root {  --arrowpanel-menuitem-padding: 2px 2px !important;}

Ce code est pour réduire l'espacement des Marque-pages.

Bon courage.

A+

pomlj · Answer

merci Pistouri,

je pense qu'il va me falloir une bonne semaine pour analyser voire +..

j'avais pas encore remarqué un espacement dans les marque page..

encore merci pour ce code..

A+..

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

17 réponses

Discussions similaires