Kleiner Testcode für flexiblen Oneliner

Horstmann

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:

CSS

                     /*****  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;
}
*/

Alles anzeigen

Mira_Belle

Wie bekomme ich die Tableiste & die "Navbar" auf eine Leiste?

In meinem Testprofil sind beide Leisten jeweils getrennt.

Horstmann

Zitat von Mira_Belle

Wie bekomme ich die Tableiste & die "Navbar" auf eine Leiste?
In meinem Testprofil sind beide Leisten jeweils getrennt.

Oje, erster Test schonmal daneben gegangen - Oneliner kein Oneliner ....

Kein anderer CSS Code, keine Scripts, nur im Testprofil?
Und hättest Du evtl. einen Screenshot?

Danke für die Antwort.

Dharkness

Zitat von Horstmann

Hier dann der Code; Kommentare sehr willkommen.
Es ist ein Testcode, also nicht besonders sauber; Testfarben lassen sich ganz oben abschalten:

Funktioniert hier im hellen Theme soweit ohne Probleme, leider zu viel Nacharbeit für das dunkle Theme.

Horstmann

Zitat von Dharkness

Funktioniert hier im hellen Theme soweit ohne Probleme, leider zu viel Nacharbeit für das dunkle Theme.

Hmm, das mit den Testfarben ist wohl nicht so ganz ausgegoren....
Der Code sieht eigentlich keine Farbänderungen vor, ist nur für besseren Überblick beim Testen.

Vielen Dank für den Test!

Dharkness

Zitat von Horstmann

Vielen Dank für den Test!

Apropos Test, mir ist gerade aufgefallen das unter Windows, wenn die Titelleiste nicht angezeigt wird, die die Button zum Minimieren, Maximieren, Verkleinern und Schließen nicht angezeigt werden.

Horstmann

Zitat von Dharkness

Apropos Test, mir ist gerade aufgefallen das unter Windows, wenn die Titelleiste nicht angezeigt wird, die die Button zum Minimieren, Maximieren, Verkleinern und Schleißen nicht angezeigt werden.

Und damit? (Testfarben auch geändert, oben hoffentlich abschaltbar):

CSS

                     /*****  Responsive Oneliner Test B  *****/ 


/* 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;
    outline: 2px solid var(--ug-bg_color, orange) !important;
    outline-offset: -2px !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;
    outline: 2px solid var(--ug-bg_color, orange) !important;
    outline-offset: -2px !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 3 !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 {
    outline: 2px solid var(--ug-bg_color, grey) !important;
    outline-offset: -2px !important;
}


#nav-bar {
    outline: 2px solid var(--ug-bg_color, powderblue) !important;
    outline-offset: -2px !important;
}
#TabsToolbar {
    outline: 2px solid var(--ug-bg_color, orange) !important;
    outline-offset: -2px !important;
}

Alles anzeigen

Dharkness

Zitat von Horstmann

Und damit?

Die Button fehlen noch immer.

Horstmann

Zitat von Dharkness

Zitat von Horstmann

Und damit?

Die Button fehlen noch immer.

Danke nochmal für's Testen.

Dann muss dafür wohl ein Windows User ran, falls sich jemand interessiert; kann ich wie gesagt leider nicht regeln am Mac...
Das Prinzip zum Verschieben dieser Buttons ist eigentlich einfach, aber auch etwas abhängig vom OS.

Anregungen gäb's zB hier oder hier.

Mira_Belle

Horstmann Sorry, habe das ganze dann sein lassen.

Aber grundsätzlich war es mein Fehler.

Habe den Code als JavaScript interpretiert, grrr.

Aber auch als ich meinen Fehler bemerkte und in meinem Testprofil ohne andern CSS ausprobierte
funktionierte er nicht. Schade, hätte Dir gerne geholfen.

Horstmann

Zitat von Mira_Belle

Aber auch als ich meinen Fehler bemerkte und in meinem Testprofil ohne andern CSS ausprobierte
funktionierte er nicht.

Schade, aber Danke für's probieren!

Kleiner Testcode für flexiblen Oneliner

Ähnliche Themen

Tabform