[Résolu] FF70 - Barre perso et barre d'onglets collées

[Dylav]

Bonjour à tou[te]s,

Parmi la foultitude d'options de customisation de FF, j'ai choisi d'en rester à positionner la barre d'onglets tout en bas du bandeau haut, en-dessous de la barre personnelle (cf. l'ancienne extension Classic Theme Restorer), en activant la ligne 334 de UserChrome.css

Code : Tout sélectionner

@import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; /**/

Or, avec la version FF 70, les deux barres se retrouvent collées. Aucune gravité, certes, mais ce n'est pas esthétique...



Auriez-vous une suggestion pour pallier cet inconvénient ?

[Anonyme1]

Bonjour,
Code pour le fichier "userChrome.css" (sans les guillemets) que tu peux tester (avec un petit u ➔userChrome.css) à mettre dans un dossier "chrome" (sans les guillemets), dans le Profil

Code : Tout sélectionner

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

/* supprimer le liseret au dessus de l'onglet */
.tab-line {
display: none; }

A+

[Dylav]

Bonjour GlopGlop,

Je te remercie pour ta réponse, mais je suis surpris de sa complexité. Je pensais naïvement qu'il suffisait d'insérer à l'endroit adéquat (que je ne parviens justement pas à déterminer), un attribut

Code : Tout sélectionner

margin-top: 2px !important;

Compte tenu de mes carences en CSS, je crois que je vais en abandonner l'idée.
Merci quand même...

[Anonyme1]

Bonjour,

Compte tenu de mes carences en CSS, je crois que je vais en abandonner l'idée.

je suppose que tu est sous Windows
La première chose à faire est de vérifier si "Masquer les extensions des fichiers dont le type est connu" dans les "Options des dossiers" de Windows.
Explication:
Tu vas ouvrir la fenêtre "Exécuter" avec les touches clavier " Windows + R ", et tu écrit " explorer.exe " (sans les guillemets), et clique sur " OK ".
Dans la fenêtre de l’Explorateur (image ci-dessous): clique sur: 1° → Affichage, 2° → Options, 3° → Modifier les options des dossiers ...


Ensuite, dans la fenêtre "Options des dossiers" (image ci-dessous), clique sur l’onglet, 1° → "Affichage", et recherche la ligne, 2° → "Masquer les extensions des fichiers dont le type est connu" que tu décoche, et tu clique sur "Appliquer" et "OK"


Ouvre Firefox, et suis les Explications.
Pour le code fonctionne avec le fichier "userChrome.css" dans le dossier "profil" de Firefox, modifier dans "about:config" la ligne "toolkit.legacyUserProfileCustomizations.stylesheets" et la mettre sur "true" Explication ➔ viewtopic.php?f=13&t=141630

Ensuite:
On vas ouvrir le dossier de profil de Firefox:
Explication:
L'on commence par afficher la page "informations de dépannage".
1°) Pour afficher la page "Informations de dépannage" (aux choix) plusieurs façons de faire (a, b, ou c).
- a) - dans la barre d'adresse tape ou copier/coller about:support et touche Entrer du clavier.
- b) - bouton (icône en haut à droite) ☰ → ? Aide → information de dépannage.
- c) - barre de menu → ? → information de dépannage.

2°) Sur la page "information de dépannage" sur la ligne "Dossier de profil ", clic sur "Ouvrir le dossier correspondant" (le dossier de profil va s'ouvrir, laisser ouvert le dossier.)

3°) Dans le dossier de profil, créer un nouveau dossier que l'on nomme "chrome" (sans les guillemets).

4°) Ouvrir le bloc note de Windows, ou encore mieux Notepad ++ (si tu la d'installer sur ton PC).
ci-dessous ↓: clic sur "TOUT SÉLECTIONNER", puis un clic droit et "Copier", et tu colle cela dans le bloc note (ou Notepad ++).

Code : Tout sélectionner

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

/* supprimer le liseret au dessus de l'onglet */
.tab-line {
display: none; }

5°) tu enregistre le bloc note (ou Notepad ++) sur le bureau avec comme nom de fichier "userChrome.css" (sans les guillemets),
ATTENTION au u minuscule, et au C majuscule dans userChrome.css, une fois enregistrer, tu met le fichier userChrome.css dans le dossier chrome, que tu à créer dans le profil.
Ferme tous et ouvrir Firefox.
A+

[Dylav]

Merci pour ces explications détaillées.
- Je suis sous Windows 7 Pro SP1 x64
- Je ne masque jamais les extensions de fichiers
- toolkit.legacyUserProfileCustomizations.stylesheets est bien positionné à true

1., 2., 3., 4., 5. Mon dossier de profil C:\Users\DRJMLAPS\AppData\Roaming\Mozilla\Firefox\Profiles\u0d4cj5r.default-1462885001091 contient déjà un sous-dossier chrome, qui contient déjà un fichier userChrome.css tout ce qu'il y a de plus officiel (si j'ose dire), dont je parlais dans mon message de 11h40, dont tu trouveras ci-joint une copie, et que je n'aimerais pas remplacer par autre chose... sauf éventuellement à titre expérimental ?

-édit- Le fichier userChrome.css est accompagné d'un répertoire css contenant tous les imports y cités.

[Dylav]

Finalement, je me sens un peu honteux de vous avoir sollicités. J'utilise la personnalisation Aris-t2 / CustomCSSforFx / classic du site GitHub, et c'est là que j'aurais dû me rendre.

Il se trouve que j'étais en version 2.3.7 (datant probablement du début de l'année), et qu'est sortie il y a 2 jours la version 2.8.0 qui tient manifestement compte de l'arrivée de FF 70. Version que je viens de mettre en place, et qui résout mon problème.



Merci encore d'avoir tenté de me secourir...