Multirow-Tableiste mit userChrome.css funktioniert nicht mehr richtig in FF107

gefunden008

Guten Morgen,

es gab mal wieder ein größeres Update was leider meine userChrome.css durcheinander geworfen hat. Meine eingestellten Tabzeilen wie auch favi.icons erweitern sich nicht mehr automatisch wenn die jeweilige Zeile voll ist, sondern die hinterlegten Zeilen zeigt es einfach komplett an, siehe Bild.

Vielleicht kann mir von euch jemand wieder weiterhelfen?

CSS

/* Tableiste mehrreihig oben */
@-moz-document url(chrome://browser/content/browser.xhtml) {

[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
padding-top: 10px !important;
}

#titlebar,#tabbrowser-tabs {
appearance: none !important;
}

[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
display: block;
}

/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 12 Zeilen, weitere per Scrollbar */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 12); /* aktuell sind es 12 Tabreihen */
overflow-x: hidden;
overflow-y: auto;
}

#tabbrowser-arrowscrollbox {
  margin-top: -17px !important;
  margin-bottom: -10px !important;
}

:root {
    --tab-min-height: 30px !important; 
}

:root #tabbrowser-tabs {
    --tab-min-height: 30px !important; 
}
    
    /* Feste Breite der einzelnen Tabs wenn gewünscht, sonst entfernen bzw. verbreitern */
tabs tab[fadein]:not([pinned]) {
min-width: 173px !important;/* Minimale Tabbreite 76px */
max-width: 173px !important;/* Maximale Tabbreite 225px */
}

/* Tab schließen Icon nur im aktiven Tab */

.tab-close-button {
display:none!important;
}

.tabbrowser-tab[selected="true"] .tab-close-button {
display: block !important; 
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), 
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { 
    display: none; 
}
tabs tab {
    border-left: solid 1px hsla(0,0%,50%,.5);
    border-right: solid 1px hsla(0,0%,50%,.5);
}
tabs tab:after,tabs tab:before { display: none;}

/* #TabsToolbar:not(:-moz-lwtheme){ 
    color: black !important;
} */
#TabsToolbar > .titlebar-buttonbox-container {
    display: none !important;
}    
}




/* Buttons/Zwischenräume Ausblenden */

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), [class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { display: none; }



/*  Mehrzeilige Lesezeichen-Symbolleiste, aktuell 12 Zeilen  */ 
#PersonalToolbar,
#PlacesToolbarItems {
max-height: calc(20px * 12) !important;
min-height: 20px !important;
}
#PlacesToolbar > hbox {
display: block;
}
#PersonalToolbar toolbarbutton {
max-height: 20px !important;
min-height: 20px !important;
margin: 0 1px !important;
}
#PlacesToolbarItems {
display: flex;
flex-wrap: wrap;
overflow-x: visible;
overflow-y: auto;
}
#PlacesToolbarItems > scrollbar {
-moz-window-dragging: no-drag;
}
#PlacesToolbar #PlacesChevron {
display: none;
}

Alles anzeigen

BrokenHeart

Morgen,

das Problem wurde ja schon in etlichen Threads thematisiert und die Lösung ist recht einfach:

Bei dir In Zeile 26 folgende Zeile einfügen contain: none !important; /* <- neu (FF107) */

also

CSS

box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 12); /* aktuell sind es 12 Tabreihen */
overflow-x: hidden;
overflow-y: auto;
contain: none !important; /* <- neu (FF107) */
}

gefunden008

Hallo,

Danke für deine rasche Antwort. Leider hat es noch nicht vollends funktioniert.

Bei der Mehrzeiligen Tab-Symbolleiste besteht das Problem weiterhin. Bei der Mehrzeiligen Lesezeichen-Symbolleiste hat es jedoch funktioniert.

Hast du vielleicht noch eine Idee?

CSS

/* Tableiste mehrreihig oben */
@-moz-document url(chrome://browser/content/browser.xhtml) {

[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
padding-top: 10px !important;
}

#titlebar,#tabbrowser-tabs {
appearance: none !important;
}

[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
display: block;
}

/* Mehrzeilige Tab-Symbolleiste, aktuell sind es 12 Zeilen  */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 12);
overflow-x: hidden;
overflow-y: auto;
contain: none !important; /* <- neu (FF107) */
}

#tabbrowser-arrowscrollbox {
  margin-top: -17px !important;
  margin-bottom: -10px !important;
}

:root {
    --tab-min-height: 30px !important; 
}

:root #tabbrowser-tabs {
    --tab-min-height: 30px !important; 
}
    
    /* Feste Breite der einzelnen Tabs wenn gewünscht, sonst entfernen bzw. verbreitern */
tabs tab[fadein]:not([pinned]) {
min-width: 173px !important;/* Minimale Tabbreite 76px */
max-width: 173px !important;/* Maximale Tabbreite 225px */
}

/* Tab schließen Icon nur im aktiven Tab */

.tab-close-button {
display:none!important;
}

.tabbrowser-tab[selected="true"] .tab-close-button {
display: block !important; 
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), 
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { 
    display: none; 
}
tabs tab {
    border-left: solid 1px hsla(0,0%,50%,.5);
    border-right: solid 1px hsla(0,0%,50%,.5);
}
tabs tab:after,tabs tab:before { display: none;}

/* #TabsToolbar:not(:-moz-lwtheme){ 
    color: black !important;
} */
#TabsToolbar > .titlebar-buttonbox-container {
    display: none !important;
}    
}

/* Buttons/Zwischenräume Ausblenden */

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), [class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { display: none; }

/*  Mehrzeilige Lesezeichen-Symbolleiste, aktuell sind es 12 Zeilen  */ 
#PersonalToolbar,
#PlacesToolbarItems {
max-height: calc(20px * 12) !important;
min-height: 20px !important;
}
#PlacesToolbar > hbox {
display: block;
}
#PersonalToolbar toolbarbutton {
max-height: 20px !important;
min-height: 20px !important;
margin: 0 1px !important;
}
#PlacesToolbarItems {
display: flex;
flex-wrap: wrap;
overflow-x: visible;
overflow-y: auto;
contain: none !important; /* <- neu (FF107) */
}
#PlacesToolbarItems > scrollbar {
-moz-window-dragging: no-drag;
}
#PlacesToolbar #PlacesChevron {
display: none;
}
}

Alles anzeigen

2002Andreas

Zitat von gefunden008

. Leider hat es noch nicht vollends funktioniert.

Das liegt an Zeile 23.

Der Wert ist zu hoch.

So sieht das hier bei 3 aus:

2002Andreas

Zitat von gefunden008

Hast du vielleicht noch eine Idee?

Teste bitte:

CSS

/* Tableiste mehrreihig oben */
@-moz-document url(chrome://browser/content/browser.xhtml) {

[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
padding-top: 10px !important;
}

#titlebar,#tabbrowser-tabs {
appearance: none !important;
}

[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
display: block;
}

/* Mehrzeilige Tab-Symbolleiste, aktuell sind es 12 Zeilen  */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { 
display: block; 
contain: none !important; /* <- neu (FF107) */
}

scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 12);
overflow-x: hidden;
overflow-y: auto;
}

#tabbrowser-arrowscrollbox {
  margin-top: -17px !important;
  margin-bottom: -10px !important;
}

:root {
    --tab-min-height: 30px !important; 
}

:root #tabbrowser-tabs {
    --tab-min-height: 30px !important; 
}
    
    /* Feste Breite der einzelnen Tabs wenn gewünscht, sonst entfernen bzw. verbreitern */
tabs tab[fadein]:not([pinned]) {
min-width: 173px !important;/* Minimale Tabbreite 76px */
max-width: 173px !important;/* Maximale Tabbreite 225px */
}

/* Tab schließen Icon nur im aktiven Tab */

.tab-close-button {
display:none!important;
}

.tabbrowser-tab[selected="true"] .tab-close-button {
display: block !important; 
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), 
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { 
    display: none; 
}
tabs tab {
    border-left: solid 1px hsla(0,0%,50%,.5);
    border-right: solid 1px hsla(0,0%,50%,.5);
}
tabs tab:after,tabs tab:before { display: none;}

/* #TabsToolbar:not(:-moz-lwtheme){ 
    color: black !important;
} */
#TabsToolbar > .titlebar-buttonbox-container {
    display: none !important;
}    
}

/* Buttons/Zwischenräume Ausblenden */

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), [class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { display: none; }

/*  Mehrzeilige Lesezeichen-Symbolleiste, aktuell sind es 12 Zeilen  */ 
#PersonalToolbar,
#PlacesToolbarItems {
max-height: calc(20px * 12) !important;
min-height: 20px !important;
}
#PlacesToolbar > hbox {
display: block;
}
#PersonalToolbar toolbarbutton {
max-height: 20px !important;
min-height: 20px !important;
margin: 0 1px !important;
}
#PlacesToolbarItems {
display: flex;
flex-wrap: wrap;
overflow-x: visible;
overflow-y: auto;
contain: none !important; /* <- neu (FF107) */
}
#PlacesToolbarItems > scrollbar {
-moz-window-dragging: no-drag;
}
#PlacesToolbar #PlacesChevron {
display: none;
}
}

Alles anzeigen

gefunden008

Hallo Andreas,

das hat jetzt perfekt funktioniert. Alles wie vorher

Vielen Dank an euch 2

2002Andreas

Zitat von gefunden008

Vielen Dank an euch 2

Was mich davon betrifft, gern geschehen

BrokenHeart

Nur noch mal zur Info:

Die für FF107 neu hinzugefügte 'contain'-Eigenschaft bezieht sich sowohl bei der mehrz. Lesezeichenleiste als auch bei der mehrz. Tableiste auf die umgebende Box bzw die 'arrowscrollbox' und sorgt dafür, dass alle Inhalts-Elemente (Tabs/Lesezeichen-Items) in der umgebenden Box sichtbar dargestellt werden. Dafür wird die Box von der Größe her angepasst, was aber in unserem Fall (Mehrzeiligkeit!) nicht erwünscht ist. Deswegen muss diese Eigenschaft für die 'arrowscrollbox'. abgeschaltet werden (ich hatte es im ersten Posting an der falschen Position eingehängt... ).

Zum Nachlesen:

contain - CSS&colon; Cascading Style Sheets | MDN

The contain CSS property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree.…

developer.mozilla.org

Multirow-Tableiste mit userChrome.css funktioniert nicht mehr richtig in FF107

Sören Hentzschel 17. November 2022 um 08:28

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Verbesserung userChrome.css (Saubere Programmierung)

Sidebar Popup-Menü anpassen

Weisser Streifen oberhalb der Menüleiste

Tabs Hintergrundfarbe

Addons-Manager anpassen