Wie kann ich in Firefox 57+ mehrere Zeilen mit Tabs haben (Add-on „Tab Mix Plus“ funktioniert nicht mehr)? ⇐ CSS

[Anonymous]

Wie kann ich in Firefox 57+ mehrere Zeilen mit Tabs haben, nachdem das Add-on Tab Mix Plus nicht mehr funktioniert (alle älteren Erweiterungen werden mit Firefox 57 gelöscht). Vielleicht sollte ich einfach warten?
Dies ist möglicherweise die einzige Funktionalität, die ich beim letzten Test in Opera oder Chrome nicht finden konnte (und Chrome hat einige Datenschutzprobleme). Es scheint also, dass ich ein paar Optionen habe, nicht nur eine.

• Wie in diesem Thread vorgeschlagen, kann ich ein Downgrade auf FF 52 ESR durchführen (mit möglichen Problemen...) oder einen Nightly Build verwenden...
• Eine andere mögliche Option ist die Verwendung eines [FF Current Profile Ordner]/chrome/userChrome.css Datei (ein Ordner muss möglicherweise erstellt werden), in den ich Code einfügen kann. Folgendes habe ich unter FF 57 mit mehr als 500 Tabs getestet:

(EDIT 1: Einige CSS-Regeln hinzugefügt, um einige Leerzeichen/Schaltflächen auszublenden, ähnlich der Antwort von R4zen, da meine eine weitere Regel enthalten und vielleicht vollständiger sind... aber das Ergebnis könnte für die meisten Leute das gleiche sein! Ich habe diesen Code testen lassen, als ich die Frage gepostet habe, habe mich aber entschieden um weniger Code zu posten, um besser zu verstehen, was passiert. Jetzt veröffentliche ich meinen vollständigen Code, damit andere davon profitieren können.)

Code: Select all

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .arrowscrollbox-overflow-start-indicator,
#tabbrowser-tabs .arrowscrollbox-overflow-end-indicator,
#tabbrowser-tabs #alltabs-button {
display: none;
}
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
display: block;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
/*
display: block;
*/
overflow-y: auto !important;
min-height: var(--tab-min-height); /* default */
max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab {
flex-grow: 1;
flex-wrap:wrap;
min-width: 150px;
vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
height: var(--tab-min-height);
}
#tabbrowser-tabs .tabbrowser-tab .tab-stack {
width: 100%;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] {
min-width: 0px;
max-width: 40px;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
visibility: hidden !important;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-text {
display: none !important;
}
/* Active tab's style - visuallyselected="true" === ACTIVE TAB */
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] {
font-weight: bold;
}
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] .tab-background {
background-color: lime !important; /* green, lime, LawnGreen-7CFC00, LimeGreen-32CD32, SpringGreen-00FF7F */
}

• Wobei 5 in max-height: calc(5*var(--tab-min-height)) !important; 5 Zeilen sind, dynamisch berechnete Höhe.

Der obige Code zeigt Tabulatoren, aber ihr Verhalten ist ziemlich schlecht:

• Das Schlimmste - Wenn Sie mit Strg+Tab zwischen den Tabs scrollen (in der letzten Reihenfolge) und sich der Tab, zu dem gewechselt wurde, in einer anderen Zeile befindet (mehr als 5 Zeilen entfernt), scrollt die Zeile mit dem Tab nicht zum aktiven Tab. Der Schieberegler muss verwendet werden, um manuell durch die Zeilen zu scrollen und die ausgewählte Zeile visuell zu finden...
  (Zur Verdeutlichung: Ich habe 5 sichtbare Zeilen von insgesamt 15 Zeilen festgelegt)
• Tabs können nicht gezogen werden, da FF Core sie falsch berechnet und die Tabulatortaste an eine zufällige Position verschiebt

• Um a zu verwenden Fork des Legacy-Codes, jemand hat WaterFox (oder einen anderen Fork) erwähnt.

Gibt es derzeit noch andere (bessere) Lösungen?
Ich bin mir ziemlich sicher, dass wir in Zukunft mehr Optionen haben werden, sodass die richtige Antwort heute nach einer Woche oder einem Monat(n) möglicherweise nicht mehr die beste ist...
BEARBEITEN April 2019 (Firefox 66.x): Nach dem Update auf Firefox 66 hatte ich zu viele Zeilen, die den gesamten Bildschirm abdeckten (das sind mehr als 1000 Registerkarten). Ich musste den ursprünglichen Code oben bearbeiten und ein paar zusätzliche Regeln hinzufügen:

Code: Select all

#tabbrowser-tabs .arrowscrollbox-scrollbox {
max-height: calc(5*var(--tab-min-height)) !important;
overflow: auto;
margin-bottom: calc(1.25 * var(--tab-min-height)) !important;
}

Möglicherweise müssen Sie sie anpassen, falls Sie eine andere Zeilennummer haben (ich habe 5 Zeilen mit Tabulatoren). Viel Glück!