- Firefox-Version
- 115.8esr
- Betriebssystem
- macOs 10.13.6
Ich bastle seit einiger Zeit immer mal wieder an einem kleinen Oneliner CSS Code rum, und es würde mich interessieren was Ihr generell davon haltet - und, noch wichtiger, ob das Ding bei euch halbwegs funktioniert. 
Die Idee dahinter ist, dass die Tableiste sich bis zu einer bestimmten Breite, bzw. einer bestimmten Anzahl an Tabs, verbreitert, den Raum aber wieder frei gibt sobald genügend Tabs geschlossen sind.
Die Navbar passt sich entsprechend in der Breite an, und füllt jeweils den kompletten verbleibenden Raum; im Gegensatz dazu kenne ich nur Oneliner welche eine feste Breite für die beiden Bestandteile - Navbar und TabLeiste - benutzen.
Kann natürlich gut sein ich habe was verpasst.
Fall jemand Lust hat, wäre es prima wenn ihr den Code mal kurz in ein Testprofil werfen könntet; ich bin hier momentan auf Mac und 115esr festgenagelt, da kann ich nur begrenzt testen.
Speziell die Window Control Buttons kann ich am Mac eh nicht testen; würde mich interessieren wie das so passt oder auch nicht, auch in Vollbild und mit/ohne Titelleiste aktiv.
Ein weiterer Aspekt - bei maximaler Tableistenbreite darf sich deren Breite nicht dann ändern, wenn der Overflow ansetzt, und unabhängig davon ob der Neuer Tab Button oder der Alltabs Button vorhanden sind.
Momentan klappt das nur sauber, wenn der Neuer Tab Button da ist und rechts der Tabs sitzt; das ist nur eine unnötig verwirrende Kleinigkeit, hat aber gedauert bis ich zumindest die Ansätze korrekt hatte. 
Hier dann der Code; Kommentare sehr willkommen. 
Es ist ein Testcode, also nicht besonders sauber; Testfarben lassen sich ganz oben abschalten:
/***** Responsive Oneliner Test A *****/
/* uncomment to turn test colors OFF */
/*
:root {
--ug-bg_color: none;
}
*/
/* Tabs bar max width */
#TabsToolbar {
--ug-max_width: 60vw;
}
:root:not([customizing]) #navigator-toolbox {
display: flex !important;
position: relative !important;
flex-direction: row !important;
flex-wrap: wrap !important;
--tabs-navbar-shadow-size: 0px !important;
--toolbarbutton-outer-padding: 0px !important;
}
#PersonalToolbar {
width: 100vw !important;
}
:root:not([customizing]) #nav-bar {
flex-grow: 1 !important;
flex-basis: 0px !important;
--toolbar-start-end-padding: 2px !important;
}
#urlbar-container {
flex-shrink: 1 !important;
min-width: 200px !important;
/*max-width: 520px !important;*/
}
/* Only for url container max-width set */
/*
#nav-bar-customization-target {
justify-content: center !important;
}
*/
/* Url popup width */
#urlbar[breakout][breakout-extend] {
width: 400px !important;
/*right: 0 !important;
left: auto !important;*/
}
/* Only for url container max-width set */
/*
#nav-bar-customization-target {
justify-content: center !important;
}
*/
/* url container left */
/*
#urlbar-container {
order: -1 !important;
}
*/
#TabsToolbar {
background-color: var(--toolbar-bgcolor) !important;
--toolbarbutton-inner-padding: 8px !important;
--ug-button_width:
calc(2 * var(--toolbarbutton-inner-padding) + 16px + 2 * var(--toolbarbutton-outer-padding));
--ug_contain: initial;
padding-inline: 12px 2px !important;
}
:root[uidensity="compact"] #TabsToolbar {
--toolbarbutton-inner-padding: 6px !important;
}
@media screen and (max-width: 1300px) {
#TabsToolbar {
--ug-max_width: 40vw;
}
}
/** fix tab width jump when tab content changes **/
:root:not([customizing]) .tabbrowser-tab:not([pinned]) {
width: 205px;
}
/** control tab overflow, currently needs new tab button in tabs bar on the right **/
.scrollbox-clip[orient="horizontal"] {
contain: var(--ug_contain, initial) !important;
}
#tabbrowser-tabs:not([overflow], [hasadjacentnewtabbutton]) {
max-width: var(--ug-max_width) !important;
}
#tabbrowser-tabs[hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}
/** fix tab bar width jump when hitting overflow **/
#tabbrowser-tabs[overflow] {
max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}
#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 3 * var(--ug-button_width)) !important;
}
@supports -moz-bool-pref("browser.tabs.tabmanager.enabled") {
#tabbrowser-tabs[overflow] {
max-width: calc(var(--ug-max_width) - 0 * var(--ug-button_width)) !important;
}
#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 2 * var(--ug-button_width)) !important;
}
}
#tabs-newtab-button {
padding-left: 2px !important;
}
.titlebar-spacer {
display: none !important;
}
/** window control buttons right / position for Mac **/
@media (-moz-platform: macos) {
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
position: absolute !important;
background-color: var(--ug-bg_color, hsla(50, 80%, 82%, 1)) !important;
top: 0 !important;
right: 0 !important;
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) !important;
z-index: 3 !important;
padding-inline: 2px 16px !important;
}
#TabsToolbar .titlebar-buttonbox {
margin-inline: 0 !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: calc(72px + 0px) !important;
}
}
/** window control buttons right / position for Windows ?? **/
@media (-moz-platform: windows) {
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
position: absolute !important;
background-color: var(--ug-bg_color, hsla(50, 80%, 82%, 1)) !important;
top: 0 !important;
right: 0 !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: calc(138px + 0px) !important;
}
}
/* window control buttons off Test */
/*
.titlebar-buttonbox-container {
display: none !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: 12px !important;
}
*/
/* test colors */
#PersonalToolbar {
background-color: var(--ug-bg_color, hsla(200, 45%, 87%, 1)) !important;
}
#nav-bar {
background-color: var(--ug-bg_color, hsla(120, 50%, 85%, 1)) !important;
}
#TabsToolbar {
background-color: var(--ug-bg_color, hsla(50, 80%, 82%, 1)) !important;
}
.tabbrowser-tab .tab-background {
background-color: hsla(0, 0%, 90%, 1) !important;
background-image: none !important;
outline: 1px solid hsla(0, 0%, 70%, 1) !important;
outline-offset: -0px !important;
box-shadow: none !important;
}
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover) .tab-background {
background-color: hsla(0, 0%, 80%, 1) !important;
outline-offset: -1px !important;
}
/**** Extra stuff ****/
/* test border between tabs / navbar OFF */
#TabsToolbar {
/*border-image: linear-gradient(to right, darkblue, darkorchid) 1 / 0 4px 0 0 !important;*/
/*box-shadow: 10px 0px 12px 0 rgba(255, 0, 0, 1),
inset -10px 0px 12px 0 rgba(255, 0, 255, 1) !important;*/
/*z-index: 3 !important;*/
}
/*
#nav-bar {
border-image: linear-gradient(to right,
transparent 0px, cyan 6px, orange 6px 8px,
red 8px, transparent 14px) 14 / 0 0 0 14px / 0 7px !important
}
*/
/* testing outline for equal button distance, size */
/*
toolbarbutton > image, .toolbarbutton-badge-stack {
outline: 1px solid hsla(0, 80%, 70%, 1) !important;
outline-offset: -1px !important;
}
*/
/* Tabs Ellipsis */
.tab-label-container {
mask-image: none !important;
}
.tab-label {
overflow: hidden !important;
text-overflow: ellipsis !important;
/*text-overflow: " ..." !important;*/
white-space: nowrap !important;
max-width: 100% !important;
}
/* disable alltabs button completely / must have browser.tabs.tabmanager.enabled = true */
/*
#alltabs-button {
display: none !important;
}
*/
