One Group At A Time Autor: Pedason82

Dieses Addon soll dabei helfen zusammen mit einer userChrome.css, eine zweistufe Group/Tap Struktur zu erstellen, wie man sie zb. vom Vivaldi Browser kennt.

INFO: Tabs per Drag&Drop in einer zweizeiligen Tabstruktur zu verschieben funktioniert bei verwenden einer entsprechenden userChrome.css, ist aber leider nicht zu 100% zuverlässig

userChrome.css:

/ ============================================================
* Firefox - zweizeilige Tableiste im Vivaldi-Stil
* mit nativen Tab-Gruppen
* Basis: multi-row_tabs.css (MrOtherGuy, MPL 2.0)
* ============================================================ /

:root {
--uc-max-tab-rows: 2; / Notbremse, darueber wird gescrollt /
}

/ ---------- 1. Basis: Tableiste darf umbrechen ---------- /


min-height: unset !important;
padding-inline-start: 0 !important;
--uc-scrollbutton-display-model: none;
--uc-scrollbox-display-model: contents;
flex-wrap: wrap;
overflow-y: auto;
overflow-x: hidden;
max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 4px)) * var(--uc-max-tab-rows));
scrollbar-width: thin;
}

@-moz-document url(chrome://browser/content/browser.xhtml) {
#scrollbutton-up ~ spacer,
#scrollbutton-up,
#scrollbutton-down { display: var(--uc-scrollbutton-display-model, initial); }

#pinned-tabs-container[orient="horizontal"],
#tabbrowser-arrowscrollbox[orient="horizontal"],
scrollbox[part][orient="horizontal"] > slot,
scrollbox[part="scrollbox"][orient="horizontal"] {
display: var(--uc-scrollbox-display-model, initial) !important;
}


}


.tabbrowser-tab::after { display: none !important; }

:where(#tabbrowser-tabs[orient="horizontal"]) .tabbrowser-tab[fadein]:not([pinned]) {
min-width: 110px !important;
flex-grow: 1 !important;
}

/ ---------- 2. Fensterknoepfe bleiben in Reihe 1 ---------- /
/ Sonst zentriert #TabsToolbar sie ueber alle Zeilen hinweg und sie
* wandern optisch nach unten, waehrend die Trefferflaeche oben bleibt. /



align-self: flex-start !important;
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin, 4px)) !important;
}

/ ---------- 3. Nur die Tabs der Gruppe in Reihe 2 ---------- /
/ display:contents loest die Gruppen-Box auf. Erst dadurch werden Label
* und Tabs eigenstaendige Flex-Elemente und lassen sich getrennt
* platzieren. Nebenwirkung: auf der Gruppe selbst laesst sich nichts
* mehr zeichnen - kein Hintergrund, kein Rahmen, kein box-shadow. /


display: contents !important;
}

/ Label bleibt oben zwischen den anderen Badges /


order: 0;
}

/ Nullhoher Umbruch - DIESE REGEL ERZEUGT REIHE 2.
* Ohne sie bleibt die Leiste einzeilig. /


content: "";
order: 98;
flex: 0 0 100%;
height: 0;
margin: 0;
}

/ Die Tabs darunter /


order: 99;
flex-grow: 1 !important;
}


/ Firefox klappt Gruppen zu, indem es die Tabbreite auf null zieht.
* Ohne diese Regel gewinnt das min-width aus Abschnitt 1 und die Tabs
* eingeklappter Gruppen bleiben in der oberen Zeile sichtbar./


min-width: 0 !important;
}

/ ---------- 4. Gruppen-Badges ---------- /
/ Container fuellt die volle Zeilenhoehe, damit die Gruppenlinie
* unter Label und Tabs auf derselben Hoehe sitzt. /
.tab-group-label-container {
height: auto !important;
align-self: stretch !important;
display: flex !important;
align-items: center !important;
}

/ Das Pill selbst uebernimmt exakt die Geometrie eines Tab-Hintergrunds.
* Falls es minimal versetzt bleibt: den Fallback 4px anpassen. /
.tab-group-label {
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
height: calc(var(--tab-min-height) - 2 * var(--tab-block-margin, 4px)) !important;
margin-block: var(--tab-block-margin, 4px) !important;
padding-inline: 10px !important;
border-radius: var(--tab-border-radius, 8px) !important;
font-weight: 500 !important;
color: inherit !important;
text-shadow: none !important;
outline: none !important;
background: color-mix(in srgb, var(--tab-group-color, currentColor) 14%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--tab-group-color, currentColor) 40%, transparent) !important;
}

/ Eingeklappt: gleiche Optik statt invertierter Vollflaeche /
tab-group[collapsed] .tab-group-label {
background: color-mix(in srgb, var(--tab-group-color, currentColor) 22%, transparent) !important;
color: inherit !important;
}

/ Farbe als Punkt statt als Flaeche /
.tab-group-label::before {
content: "";
width: 8px; height: 8px;
margin-inline-end: 7px;
border-radius: 50%;
background: var(--tab-group-color, currentColor);
flex: none;
}

/ ---------- 5. Gruppenwechsel nicht animieren ---------- /






transition: none !important;
animation: none !important;
}

/ ---------- 6. Uebergang: aeltere der beiden offenen Gruppen ausblenden ---------- /
/ Beim Gruppenwechsel sind kurz zwei Gruppen offen, deren Tabs sich
* Reihe 2 teilen - das erzeugt das Aufflackern.
*
* Versteckt werden die Tabs jeder offenen Gruppe, auf die noch eine
* weitere offene folgt. Bei zwei offenen Gruppen ist damit immer genau
* eine sichtbar - Reihe 2 wird nie leer, ihr Inhalt wird nur getauscht.
*
* Das ::before muss mit ausgeblendet werden, sonst erzeugen beide
* Gruppen einen Umbruch.
*
* Braucht keine Sicherung gegen den Ruhezustand: die Bedingung "es
* folgt noch eine offene Gruppe" kann nur im Uebergang zutreffen.
*
* Ein Ansatz ueber :focus-within funktioniert hier NICHT - das
* Gruppen-Label erhaelt beim Klick keinen Fokus. /



display: none !important;
}

/ ---------- 7. Feinschliff ---------- /
/ Reihe 1 beginnt mit einem .tab-group-label-container, der einen eigenen
* Innenabstand mitbringt. Reihe 2 beginnt mit einem nackten Tab, der seit
* display:contents buendig an der Kante sitzt. Die Differenz ist der
* Ueberstand nach links.
* Echten Wert in der Browser-Toolbox ablesen: padding-inline-start von
* .tab-group-label-container. /


margin-inline-start: 6px;
}

/ ---------- 8. Kein Versatz beim Verschieben von Tabs ---------- /



padding-bottom: 0 !important;
}



padding-bottom: 0 !important;
margin-bottom: 0 !important;
}



margin-top: 0 !important;
}