[Résolu] Onglets sur plusieurs lignes ? [FF66]

Vos requêtes concernant Mozilla Firefox, le navigateur Gecko alternatif, ne trouvèrent point de réponses lorsque vous cherchâtes ? Toute l'équipe Geckozone est prête à vous aider.

Modérateurs : Mori, myahoo, jpj, nico@nc

DePassAge
Lézard vert
Messages : 166
Enregistré le : 25 oct. 2006, 19:31

[Résolu] Onglets sur plusieurs lignes ? [FF66]

Message par DePassAge » 30 mars 2019, 00:51

Bonjour tout le monde,

Comme pour beaucoup d'utilisateurs, depuis la mise à jour 66 de Firefox, il y a plusieurs personnalisations liées au fichier UserChrome qui ne fonctionnent plus...

J'avais 2 modifications indispensables pour moi, à savoir :
- Avoir la barre des onglets en dessous de la barre personnelle (la barre d'adresse tout en haut).
- Que cette barre d'onglets soit sur plusieurs lignes (3 visibles max).

Après un long moment de recherche sur internet, j'ai pu régler le 1er point.
Mais je ne parviens pas à trouver la solution correcte pour le second point (l'affichage sur plusieurs lignes) sans que tout se "casse"...

Voici mon UserChrome en détail :
@NamEspace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul");

/* 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;}

#PlacesToolbarItems .openintabs-menuitem,
#placesContext>menuitem[id="placesContext_openContainer:tabs"],
#placesContext>menuitem[id="placesContext_openContainer:tabs"]:not([hidden])+menuitem+#placesContext_openSeparator {visibility:collapse!important}

#placesContext_sortBy\:name, #placesContext_open\:newwindow, #context-bookmarkpage, #context-bookmarklink, #context-sendlinktodevice, #context-sendpagetodevice, #context-sep-sendlinktodevice, #context-sep-sendpagetodevice, #context-openlinkinusercontext-menu, #context-openlink, #context-sendimage, #context-setDesktopBackground {
display: none !important
}
Quelqu'un a-t-il la solution pour rendre cela possible ?
J'ai malheureusement perdu patience avec ça :(

Grand merci d'avance !
Modifié en dernier par DePassAge le 31 mars 2019, 23:10, modifié 1 fois.

Avatar du membre
Bob49
Animal mythique
Messages : 20752
Enregistré le : 10 mars 2006, 17:25

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par Bob49 » 30 mars 2019, 11:09

Salut

Déjà évoqué à plusieurs reprises depuis au moins deux versions... Vois ce fil récent et résolu (et suis le lien donné par Freddy) : viewtopic.php?f=5&t=141011
Sauvegardez le profil de votre Firefox , avant d'y faire des modifications(install, etc..) ;-)
"Le bonheur est souvent la seule chose qu'on puisse donner sans l'avoir, et c'est en le donnant qu'on l'acquiert." Voltaire
Image

GlopGlop
Varan
Messages : 1320
Enregistré le : 05 juil. 2006, 15:54

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par GlopGlop » 30 mars 2019, 13:43

Bonjour,
En complément du message de Bob49.
Possibilité d'afficher la barre personnelle au survol de la souris: viewtopic.php?f=5&t=141099
A+ :wink:
Vous venez chercher de l'aide, alors aider les autres, penser à marquer votre message en [Résolu]
Comment ?, Explication pour mettre votre sujet en [Résolu]: clic sur ce lien: Mettre en [Résolu]

DePassAge
Lézard vert
Messages : 166
Enregistré le : 25 oct. 2006, 19:31

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par DePassAge » 30 mars 2019, 14:04

Bonjour,

Oui, j'avais vu ce topic. Mais là ça concerne la barre personnelle (autrement dit, la barre qui affiche les favoris/marques-pages).
Moi je cherche la solution pour la barre des onglets.

Merci

GlopGlop
Varan
Messages : 1320
Enregistré le : 05 juil. 2006, 15:54

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par GlopGlop » 30 mars 2019, 15:42

Bonjour,
Pour avoir les onglets sur plusieurs lignes:
Après une recherche sur le net, trouver ce code CSS:

Code : Tout sélectionner

/* Onglets sur plusieurs lignes */
#tabbrowser-tabs .arrowscrollbox-scrollbox {
 overflow: visible;
 display: block;
}
#tabbrowser-tabs .scrollbox-innerbox {
 display: flex;
 flex-wrap: wrap;
 min-height: var(--tab-min-height);
 max-height: calc((5 * var(--tab-min-height)) + 1px) !important; /* up to 5 rows */
}
.tabbrowser-tab, .tab-background {
 height: var(--tab-min-height);
}
.tab-stack {
 width: 100%;
}
Il faut en plus changer la valeur browser.tabs.tabMinWidth dans about:config pour modifier la largeur des onglets.
Exemple: browser.tabs.tabMinWidth mettre la valeur a 160 me parait un bon compromis pour ajuster les onglets a la largeur de mon écran.
Quand l'on change la valeur, la visualisation ce fait en direct, pas besoin de redémarrer Firefox, ouvrir des onglets jusqu'au bout de la fenêtre et tester différente valeurs pour ajuster les onglets a la fenêtre.
Image
Lien direct de l'image: https://nsa40.casimages.com/img/2019/03 ... 695796.jpg
A+ :wink:
Vous venez chercher de l'aide, alors aider les autres, penser à marquer votre message en [Résolu]
Comment ?, Explication pour mettre votre sujet en [Résolu]: clic sur ce lien: Mettre en [Résolu]

DePassAge
Lézard vert
Messages : 166
Enregistré le : 25 oct. 2006, 19:31

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par DePassAge » 30 mars 2019, 15:51

Ca ne fonctionne pas correctement 😖

Les onglets s'affichent bien sur plusieurs lignes, mais sans tenir compte de la barre personnelle.
Autrement dit, la première ligne d'onglets s'affiche par dessous la barre personnelle.
C'est assez étrange...

GlopGlop
Varan
Messages : 1320
Enregistré le : 05 juil. 2006, 15:54

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par GlopGlop » 30 mars 2019, 16:48

Bonjour,
DePassAge a écrit :
30 mars 2019, 15:51
Ca ne fonctionne pas correctement 😖
Les onglets s'affichent bien sur plusieurs lignes, mais sans tenir compte de la barre personnelle.
Autrement dit, la première ligne d'onglets s'affiche par dessous la barre personnelle.
C'est assez étrange...
Exact.
Pas trouver grand-chose.
pour le moment la seule chose de trouver est de mettre les onglets en bas de la fenêtre.

Code : Tout sélectionner

/* Move the tab toolbar below the content. */
#TabsToolbar {
   position: fixed;
   bottom: -0em;
   width: 100%;
}
/* Move the content deck bottom up by the tab height. */
#content-deck {
	/* margin-bottom: var(--tab-min-height) !important; */
    margin-bottom: 33px !important;
}
Plus le temps de rechercher pour aujourd’hui 8-)
Edit:
viens de trouver le code ci-dessous: un peu de lecture viewtopic.php?f=5&t=135747

Code : Tout sélectionner

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


@import "./tabs_below_navigation_toolbar.css";

/* move titlebar and its content (menubar, tabs toolbar) below navigation/bookmarks toolbar */
#titlebar {
  -moz-box-ordinal-group: 100 !important;
}

/* space above tabs toolbar */
#main-window[tabsintitlebar][sizemode="maximized"] * #titlebar {
  margin-top: -8px !important;
}

/* space for menubar above navigation toolbar (Firefox titlebar) */
#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}

/* add 'drag' feature to space above navigation toolbar */
#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
  -moz-window-dragging: drag !important;
}

/* move menubar to the top and extend its with to full window width */
#toolbar-menubar {
  position: fixed !important;
  width: 100vw !important;
  -moz-window-dragging: drag !important;
}

/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  position: fixed !important;
  right: 0 !important;
  visibility: visible !important;
  display: block !important;
}

/* menubar postion after moving to the top */
#toolbar-menubar {
  top: 0px !important;
}

/* Linux/macOS */
/* space above navigation toolbar (OS titlebar) */
/* set to '0', if no menubar is used */
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 28px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
  top: 0px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  top: -14px !important;
}

/* Windows */
@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
	/* set to '0', if no menubar is used */
	#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
	  margin-top: 18px !important;
	}
	/* set to '0', if no menubar is used */
	#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
	  margin-top: 34px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
	  top: 8px !important;
	}
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 0px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 8px !important;
	}
}

/* hide line above navigation toolbar appearing in some cases */
#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
}

/* force buttons on menubar being very small to not break the toolbar */
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarbutton .toolbarbutton-icon {
  padding: 0px 0px !important;
  height: 16px !important;
  width: 16px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton,
#toolbar-menubar > toolbarpaletteitem toolbarbutton,
#toolbar-menubar > toolbarbutton {
  position: relative !important;
  padding: 0px 0px !important;
  margin: 0px 0px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarbutton .toolbarbutton-icon {
  padding: unset !important;
  height: unset !important;
  width: unset !important;
}

/* make sure button icon colors set correctly */
#main-window:not(:-moz-lwtheme) #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon,
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon {
  fill: var(--classic_squared_tabs_new_tab_icon_color) !important;
  color: var(--classic_squared_tabs_new_tab_icon_color) !important;
}

/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"] * #TabsToolbar {
 -moz-padding-start: 0px !important;
}
/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button,
#main-window #TabsToolbar #window-controls {
  display: none !important;
}

/* hide non-required items */
#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
  display: none !important;
}

/* Windows 7 extra tweaks */
@media (-moz-os-version: windows-win7) {
  @media all and (-moz-windows-compositor) {
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) * .titlebar-buttonbox-container {
	  display: none !important;
	}
  }
  @media not all and (-moz-windows-compositor) {
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: -8px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 0px !important;
	}
  }
}

/* Windows 10 extra tweaks */
@media (-moz-os-version: windows-win10) {
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not([disabled="true"]),
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-menuactive="true"]:not([disabled="true"]) {
	background-color: Highlight !important;
	color: HighlightText !important;
  }
}

/* disable Mozillas tab jumping nonsense when moving tabs */
#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;
}
A+ :wink:
Modifié en dernier par GlopGlop le 30 mars 2019, 17:31, modifié 1 fois.
Vous venez chercher de l'aide, alors aider les autres, penser à marquer votre message en [Résolu]
Comment ?, Explication pour mettre votre sujet en [Résolu]: clic sur ce lien: Mettre en [Résolu]

DePassAge
Lézard vert
Messages : 166
Enregistré le : 25 oct. 2006, 19:31

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par DePassAge » 30 mars 2019, 17:29

Pas de soucis, merci pour ton aide jusque là :)

La solution ne semble pas évidente à trouver, alors que pourtant certaines personnes semblent l'avoir !
Je continue de mon côté à chercher.

8-)

Mapenzi
Tyrannosaurus Rex
Messages : 2146
Enregistré le : 18 mars 2015, 20:17

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par Mapenzi » 30 mars 2019, 19:42

8-) Bonjour,
DePassAge a écrit :
30 mars 2019, 17:29
La solution ne semble pas évidente à trouver, alors que pourtant certaines personnes semblent l'avoir !
Jette un coup d'œil ici https://github.com/MrOtherGuy/firefox-c ... w_tabs.css

DePassAge
Lézard vert
Messages : 166
Enregistré le : 25 oct. 2006, 19:31

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par DePassAge » 31 mars 2019, 01:10

J'avais vu ça également, mais aucune idée de la manière dont il faut mettre cela "en place".
Fichier css ?

Mapenzi
Tyrannosaurus Rex
Messages : 2146
Enregistré le : 18 mars 2015, 20:17

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par Mapenzi » 31 mars 2019, 11:30

DePassAge a écrit :
31 mars 2019, 01:10
J'avais vu ça également, mais aucune idée de la manière dont il faut mettre cela "en place".
Fichier css ?
A utiliser dans le fichier userChrome.css que tu as mentionné toi-même dans ton premier message ;)

J'ai testé le code pour toi :

Image

GlopGlop
Varan
Messages : 1320
Enregistré le : 05 juil. 2006, 15:54

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par GlopGlop » 31 mars 2019, 15:45

Bonjour,
Tester sur un Firefox portable 66.0.1. Windows 8.1
Barre de menu (possibilité de ne pas l'afficher, touche du clavier Alt, la barre de menus s'affiche temporairement en haut, ensuite clique "dans la barre de menus" sur "Affichage" / "Barres d'outils" / et décoche "Barre de menus")
Barre d'adresse (qui se retrouve en haut si la barre de menu est décochée)
Barre personnelle (afficher sur 1 lignes et sur plusieurs lignes au survol de la souris)
Barre d'onglets (sur plusieurs lignes)

Code : Tout sélectionner

/*===== Barre personnelle multilignes =====*/

#PlacesToolbarItems {
   display: block !important;
  overflow: visible !important;
}


/* Barre personnelle cachée */
#PersonalToolbar {
max-height: 5px !important; 
transition-duration: 1s !important; 
}

#PersonalToolbar:hover{ 
  max-height:200px !important; 
  transition-duration: 1s !important; 
}


/* Onglets sur plusieurs lignes */
#tabbrowser-tabs .arrowscrollbox-scrollbox {
 overflow: visible;
 display: block;
}
#tabbrowser-tabs .scrollbox-innerbox {
 display: flex;
 flex-wrap: wrap;
 min-height: var(--tab-min-height);
 max-height: calc((5 * var(--tab-min-height)) + 1px) !important; /* up to 5 rows */
}
.tabbrowser-tab, .tab-background {
 height: var(--tab-min-height);
}
.tab-stack {
 width: 100%;
}


/******* à partir de Fx65 *******/

/*===================== 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;
}

/*==================== 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 ==========================*/
A+ :wink:
Vous venez chercher de l'aide, alors aider les autres, penser à marquer votre message en [Résolu]
Comment ?, Explication pour mettre votre sujet en [Résolu]: clic sur ce lien: Mettre en [Résolu]

DePassAge
Lézard vert
Messages : 166
Enregistré le : 25 oct. 2006, 19:31

Re: [FF 66] Onglets sur plusieurs lignes ?

Message par DePassAge » 31 mars 2019, 23:09

Tout d'abord, un GRAND merci à vous, car vous m'avez permis de trouver la solution !

Assez amusant, car pour parvenir au résultat souhaité et qui fonctionne correctement chez moi, j'ai dû faire un mélange de vos 2 réponses, afin que la barre d'onglets soit bien fixe et en dessous de la barre personnelle, et pour que les onglets s'affichent bien sur 3 lignes (si plus, ça devient scrolable sans bug).

Donc voici le contenu de mon UserChrome :

Code : Tout sélectionner

/*======================= Barre onglets sur plusieurs lignes (3 ici) ==========================*/

:root{
    --multirow-n-rows: 3;
    --multirow-tab-min-width: 100px;
    --multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}

#tabbrowser-tabs{
  min-height: unset !important;
  padding-inline-start: 0px !important
}

/* Test for Firefox > 66 */
@supports (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: calc(var(--tab-min-height) * var(--multirow-n-rows));
    scrollbar-color: var(--toolbar-bgcolor) var(--lwt-accent-color);
    scrollbar-width: thin;
  }
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}

/* Test for Firefox < 66 */
@supports not (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox{
    min-height: unset !important;
  }
  #tabbrowser-tabs .scrollbox-innerbox{
    display: flex;
    flex-wrap: wrap;
  }
  #tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}

.tabbrowser-tab{ height: var(--tab-min-height); }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
  position: static !important;
  margin-inline-start: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]){
  min-width: var(--multirow-tab-min-width) !important;
  flex-grow: var(--multirow-tab-dynamic-width);
  /*
  Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
  Don't set to none or you'll see errors in console when closing tabs
  */
  /*max-width: 100vw !important;*/
}

.tabbrowser-tab > stack{ width: 100%; height: 100% }

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-tabs spacer,
.tabbrowser-tab::after{ display: none !important }

/*==================== 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 ==========================*/
\ :D /

Merci, vraiment !

GlopGlop
Varan
Messages : 1320
Enregistré le : 05 juil. 2006, 15:54

Re: [Résolu] Onglets sur plusieurs lignes ? [FF66]

Message par GlopGlop » 01 avr. 2019, 12:58

Bonjour,
@ DePassAge
Quand j'installe ton code CSS, pour faire un essai.
L'affichage ce fait dans cet ordre:

Barre de navigation:
Barre personnelle: Sur 1 ligne avec déroulement verticale a droite (scrollable).
Barre de menus: Si elle est affichée.
Barre d'onglets: sur 3 lignes (scrollable si plus de 3 lignes).
je trouve cette disposition un peu curieuse pour ceux qui veule afficher la Barre de menu qui se retrouver dans le milieu, mais si cela te convient, pourquoi pas :wink:

Je trouvais que la barre d'onglets affichée sur 3 trois lignes (scrollable, si plus de 3 lignes, que l'on peut changer en nombre de lignes que l'on veut) (que tu propose était intéressante).

J'ai donc adapté mon code pour avoir:

Barre de menus: Qui sera en haut, si elle est affichée.
Barre de navigation: (qui se retrouve en haut, si la barre de menu n'est pas affichée)
Barre personnelle: (afficher sur 1 lignes et sur plusieurs lignes au survol de la souris)(pas de déroulement verticale a droite)
Barre d'onglets: sur 3 lignes (scrollable si plus de 3 lignes).

Code : Tout sélectionner

/*===== Barre personnelle multilignes =====*/

#PlacesToolbarItems {
   display: block !important;
  overflow: visible !important;
}


/* Barre personnelle cachée */
#PersonalToolbar {
max-height: 5px !important; 
transition-duration: 1s !important; 
}

#PersonalToolbar:hover{ 
  max-height:200px !important; 
  transition-duration: 1s !important; 
}
/*======================= Barre onglets sur plusieurs lignes (3 ici) ==========================*/
:root{
    --multirow-n-rows: 3;
    --multirow-tab-min-width: 100px;
    --multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}
/* Test for Firefox > 66 */
@supports (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: calc(var(--tab-min-height) * var(--multirow-n-rows));
    scrollbar-color: var(--toolbar-bgcolor) var(--lwt-accent-color);
    scrollbar-width: thin;
  }
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}
/*===================== 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;
}
/* Test for Firefox < 66 */
@supports not (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox{
    min-height: unset !important;
  }
  #tabbrowser-tabs .scrollbox-innerbox{
    display: flex;
    flex-wrap: wrap;
  }
  #tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}

.tabbrowser-tab{ height: var(--tab-min-height); }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
  position: static !important;
  margin-inline-start: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]){
  min-width: var(--multirow-tab-min-width) !important;
  flex-grow: var(--multirow-tab-dynamic-width);
  /*
  Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
  Don't set to none or you'll see errors in console when closing tabs
  */
  /*max-width: 100vw !important;*/
}

.tabbrowser-tab > stack{ width: 100%; height: 100% }

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-tabs spacer,
.tabbrowser-tab::after{ display: none !important }

/*==================== 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 ==========================*/
A+ :wink:
Vous venez chercher de l'aide, alors aider les autres, penser à marquer votre message en [Résolu]
Comment ?, Explication pour mettre votre sujet en [Résolu]: clic sur ce lien: Mettre en [Résolu]

DePassAge
Lézard vert
Messages : 166
Enregistré le : 25 oct. 2006, 19:31

Re: [Résolu] Onglets sur plusieurs lignes ? [FF66]

Message par DePassAge » 01 avr. 2019, 17:50

C'est vrai que suivant mon code, la barre de menus s'affiche entre la barre personnelle et celle des onglets.
Je n'avais pas remarqué cela car je n'utilise pas cette barre de menus (cachée en permanence chez moi).

Et pour la barre personnelle, je n'ai jamais dépassé la largeur de la barre (donc de l'écran), car j'utilise des classements par dossiers.

Voilà ce que ça donne, et c'est pile poil ce que je cherchais. Comme quoi, d'une installation à l'autre, il peut y avoir certaines différences !

Image

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Bing [Bot] et 20 invités