Marque-pages manquants sur la barre personnelle multilignes/Problème chevrons "menu de dépassement" de la barre d'outils

[Moon blue]

Bonsoir à tous,

Je me permets de solliciter votre aide sur deux points précis [MacBook Pro, Retina, 13 pouces, début 2015, Monterey - Firefox 133.0.]:

1. Marque-pages manquants sur la barre personnelle multilignes

Je n’y connais rien, mais en compilant des morceaux trouvés çà et là sur le net, je suis finalement parvenue à bricoler - via le fichier userChrome.css - un code dont le résultat me convient.

Il y a simplement un petit quelque chose qui coince (en réalité, depuis déjà plusieurs versions précédentes de Firefox) - mais je ne sais pas où ni pourquoi... Ma barre personnelle devrait s’étendre sur un peu plus de deux lignes (sauf erreur, mon code est conçu pour accueillir trois lignes…?); or, la deuxième ligne est incomplète - il manque deux ou trois favicons pour la compléter - et la troisième n’apparaît pas (voir Capture d'écran_1: https://forum.macbidouille.com/index.ph ... t&id=65379); et ce, alors même que tous les marque-pages correspondants sont eux bien présents et répertoriés dans la barre personnelle du panneau latéral - par lequel je dois donc passer pour y accéder.

J’ai beaucoup cherché - ici et ailleurs -, beaucoup testé - sans succès… C’est la raison pour laquelle je me permets de créer un nouveau sujet, en espérant que certains d’entre vous pourront m’éclairer de leurs lumières…

Il me semble que c'est peu ou prou mon problème qui est décrit ici: https://github.com/aris-t2/customcssforfx/issues/99 - mais sans solution… à moins que je n’aie pas su la voir!

Je vous soumets mon code: cherchez l'erreur!

Code : Tout sélectionner

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


/* NOTE ********************************************************************************/
/* Variables are set inside '.\config\' folders CSS files, if complete package is used! */

/* import old button/bookmark size code *************************************************/
@import "./../buttons/buttons_on_bookmarks_toolbar_old_size_and_appearance.css";

:root {
--bookmark_items_height: 22px; /* <- bookmark items - line height */
--bookmark_items_lines: 3; /* <- maximum amount of lines */
}

#PersonalToolbar {
min-height: var(--bookmark_items_height) !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important;
}

#personal-bookmarks,
#PlacesToolbar > hbox {
display: block;
}

#PlacesToolbarItems {
display: flex;
flex-wrap: wrap;
overflow-x: visible;
overflow-y: auto;
}

#PlacesToolbarItems > .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
overflow-x: hidden !important;
overflow-y: visible !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important
}

#personal-bookmarks #PlacesToolbar {
display: block;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) );
}

#personal-bookmarks #PlacesToolbar > .bookmark-item{
visibility: visible !important;
}

#personal-bookmarks #PlacesToolbar .chevron{
visibility: collapse;
}
#personal-bookmarks #PlacesToolbar > hbox > hbox{
overflow-x: hidden;
overflow-y: hidden;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
display: none;
}

#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 2px !important;
margin-bottom: 2px !important;
vertical-align: middle;
}

/*
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
padding-top: 2px !important;
padding-bottom: 2px !important;
}

#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
-moz-appearance: toolbarbutton;
}

#navigator-toolbox #PersonalToolbar {
max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) ) !important;
}

/* Recrée le fonctionnement de l'extension Roomy Bookmarks Toolbar:
Masque le nom des marque-pages de la barre personnelle pour n’afficher que les favicons; mais il suffit de se positionner sur le marque-page pour faire apparaître le nom */

.bookmark-item > .toolbarbutton-text {
margin-top: -0.5px !important;
}
.bookmark-item:not([open="true"]) > .toolbarbutton-text {
display: none !important;
}
/* PlacesToolbarItems */
.bookmark-item:not(:hover):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
margin-inline-end: 0px !important;
}

/* Réduit l’espace entre les icônes */

.bookmark-item{margin: -1px !important;}

/* Onglets sous la barre d'adresse et barre personnelle au-dessus des onglets pour Firefox 133 [<https://www.codehaven.co.uk/firefox/firefox-133-tabs-on-top-update-nov-24/] */

@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
  #nav-bar > .titlebar-buttonbox-container{
    order: -1 !important;
    > .titlebar-buttonbox{
      flex-direction: row-reverse;
    }
  }
}
@media not (-moz-bool-pref: "sidebar.verticalTabs"){
  .global-notificationbox,
  #tab-notification-deck,
  #TabsToolbar{
    order: 1;
  }
  #TabsToolbar > :is(.titlebar-spacer,.titlebar-buttonbox-container){
    display: none;
  }
  :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
    display: flex !important;
  }
  :root:is([tabsintitlebar],[customtitlebar]) #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{
    > .titlebar-buttonbox-container{
      display: flex !important;
    }
    :root[sizemode="normal"] & {
      > .titlebar-spacer{
        display: flex !important;
      }
    }
    :root[sizemode="maximized"] & {
      > .titlebar-spacer[type="post-tabs"]{
        display: flex !important;
      }
      @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
        (-moz-gtk-csd-reversed-placement),
        (-moz-platform: macos){
        > .titlebar-spacer[type="post-tabs"]{
          display: none !important;
        }
        > .titlebar-spacer[type="pre-tabs"]{
          display: flex !important;
        }
      }
    }
  }
}

/* Adjust the height of the Tabs Toolbar */
#TabsToolbar {
    height: 36px !important; /* Neater toolbar height */
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 10px 0 -5px 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
}

/* Adjust tab height to match the toolbar */
#TabsToolbar .tabbrowser-tab {
    height: 36px !important; /* Matches toolbar for a balanced look */
    padding: 0 2px !important; /* Adds slight spacing between tabs */
}

/* Center align tab content */
#TabsToolbar .tab-label {
    line-height: 34px !important; /* Align text with tab height */
    margin: 0 !important;
}

/* Smaller close button for a cleaner appearance */
#TabsToolbar .tab-close-button {
    height: 14px !important; /* Smaller close button */
    width: 14px !important; /* Proportional width */
    margin: 0 2px !important; /* Adjust spacing around the button */
    padding: 0 !important;
}

/* Prevent overflow and ensure neat alignment */
.tabbrowser-tab .tab-stack {
    margin: 0 !important;
    padding: 0 !important;
}

/* Adjust tab icon size */
#TabsToolbar .tab-icon-image {
    height: 16px !important; /* Matches the smaller close button */
    width: 16px !important;
}

/* Taille des favicons de la barre personnelle */

#bookmarks-ptf toolbarbutton.bookmark-item .toolbarbutton-icon,
#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-icon {
display: block !important;
width: 16px !important;
height: 16px !important;
padding: 0px !important;
margin: 0px !important; } 

/* Onglets en vert*/

.tab-background {
background-attachment: none!important;
background-color: #32CD32!important;
background-image: none!important;
color: black!important;
}

/* Onglet actif jaune */

.tab-content[selected] {
background-attachment: none!important;
background-color: #FFD700!important;
background-image: none!important;
}

/* Coins arrondis des onglets */

#TabsToolbar .tabs-newtab-button,
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content {
border-top-left-radius: 12px !important;
border-top-right-radius: 12px !important; } 

/* Couleur (blanche) de la croix des onglets */

.tab-close-button {color: white !important}

/* Couleur (verte) des dossiers des marque-pages */

.bookmark-item[container], treechildren::-moz-tree-image(container) { 
fill: #008000 !important; }

2. Problème chevrons "menu de dépassement" de la barre d'outils

J’aurais d’autre part une petite question concernant la barre d'outils: je souhaiterais que les chevrons du "menu de dépassement" n'apparaissent que lorsque ce menu contient des éléments. Or, là, il ne contient que "Personnaliser la barre d'outils", qui est par ailleurs accessible par un simple clic droit sur un espace vide de ladite barre d'outils - et n'a donc aucune utilité... (voir Capture d'écran_2: https://forum.macbidouille.com/index.ph ... t&id=65380).

D'avance, mille mercis

[Moon blue]

Personne?

[Freddy]

bonjour,

Désolé, pas toujours accès à un poste bureau.

Bon d'après ce qu'on peut trouver pour résoudre le problème, y aurai ça
Donc en secouant le tout pour créer une multiligne, avec ces règles ça a l'air de fonctionner (en tout cas chez moi), il faut créer un tout premier m-p qui ne te servira pas
Je sais pas si y a vraiment besoin de tout le reste de ton code (multiligne) pour ton utilisation, le peut que j'ai testé j'en n'ai pas vu l'utilité

Code : Tout sélectionner

/*======= barre personnelle multiligne ======*/

:root {
    --hauteur_barre_perso: 68px;
}


#PlacesToolbar > hbox {
    display: block !important;
}

 #PlacesToolbarItems {
    display: flex;
    flex-wrap: wrap;
    overflow-x: visible !important;
    overflow-y:auto!important;
    contain: content !important;
}

#PersonalToolbar {
    max-height:  var(--hauteur_barre_perso) !important;
}

/*!!! il faut créer un PREMIER M-P qui ne servira pas !!!*/
#PlacesToolbar #PlacesToolbarItems .bookmark-item:first-child {
    display: none;
}

/*======= FIN barre personnelle multiligne ======*/

et pour ton affinage d'affichage des m-p, perso je pense que ça suffirait ceci

Code : Tout sélectionner

/* Recrée le fonctionnement de l'extension Roomy Bookmarks Toolbar:
Masque le nom des marque-pages de la barre personnelle pour n’afficher que les favicons;
mais il suffit de se positionner sur le marque-page pour faire apparaître le nom */

.bookmark-item:not([container="true"]) .toolbarbutton-text {
display: none !important;
}

/* Réduit l’espace entre les icônes */

.bookmark-item{margin: -1px !important;}

La suite de ton fichier peut apparemment rester comme ça; j'ai pas pris le temps d'y regarder mais ça à l'air d'aller.

Pour ta deuxième question, je ne peut pas reproduire le problème, j'ai pas ce bouton "personnaliser..." et tes captures ne sont pas accessibles

[Moon blue]

1. Marque-pages manquants sur la barre personnelle multilignes

Oooooooooooh, Freddyyyyyyyyyy, merciiiiiiiiii - enfin, cela fonctionne - grâce à toi!
Si j'ai bien compris, je dois ensuite définitivement laisser le dossier vide en tête de la barre personnelle (j'ai testé: si je le supprime, le premier marque-page de ma barre personnelle disparaît...)

2. Problème chevrons "menu de dépassement" de la barre d'outils

Voici ma capture d'écran - accessible, cette fois
https://zupimages.net/viewer.php?id=24/50/zijv.png

3. Accès aléatoire fichier "userChrome.css" via le menu hamburger de Firefox

Puis-je me permettre de te poser une dernière petite question?
Lorsque je veux accéder au fichier userChrome.css via le menu hamburger de Firefox (Outils supplémentaires/Boîte à outils du navigateur) - pour tester en direct, par exemple, une modification sur mon code -, je dois systématiquement m'y reprendre à plusieurs reprises - et souvent, même, quitter Firefox et le rouvrir - car deux fois sur trois le curseur ne s'active pas dans la barre de recherche "Filtrer les feuilles de style"... À tout hasard, une idée et, mieux, une solution?


Encore mille mercis, je suis vraiment déjà trop contente que le problème de la barre personnelle multilignes soit résolu!

[Freddy]

1

Si j'ai bien compris, je dois ensuite définitivement laisser le dossier vide en tête de la barre personnelle

oui, enfin un dossier ou un simple m-p; il ne te servira pas

2 chez moi tout est ok, en fenêtre maximisée, tant qu'il n'y a pas surnombre alors pas de chevron.
En fenêtre redimensionnable, en réduisant progressivement la largeur, le chevron n’apparaît bien seulement dès qu'il y a dépassement du nombre de boutons.
Je ne sais pas si ça peut être un bug propre à mac

Quoiqu'il en soit, pour les points 2 et 3, je pense que la chose à faire pour en savoir plus, si pas déjà fait, c'est d'appliquer les gestes de premier secours
=> un essai en ouvrant fx en mode dépannage, il me semble pas que ça vienne de ton fichier css, mais peut-être une extension qui pose problème: https://support.mozilla.org/fr/kb/diagn ... -depannage

=> si ça suffit pas, essai avec un profil tout neuf, un peu plus ch... embêtant quand il faut rapatrier ses données, mais bon:
https://support.mozilla.org/fr/kb/recup ... de-firefox