Mehrzeilige Tableiste für aktuelle Firefox-Versionen

BrokenHeart

Zitat von J87

Hat sich da was geändert?

Ja. Die Min/Max/Close-Buttons (titlebar-buttonbox-container) werden jetzt von Firefox selbst in der Navbar angezeigt, wenn bestimmte Bedingungen erfüllt sind. Dies ist wohl im Zuge der "vertikalen Tableiste" so umgesetzt worden. Da aber die Bedingungen bei der Mehrzeiligen-Tableiste nicht greifen, wird auch nichts dargestellt.

Deswegen ist das Skript 'MoveMinMaxCloseButton.uc.js' obsolet geworden und ich hatte es aus dem ersten Beitrag auch entfernt.

Alternativ kann jetzt über folgenden Code in der 'userChrome.css' die alte Funktionalität wiederhergestellt werden:

CSS

#navigator-toolbox > #nav-bar > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
	display:contents   !important;
}

J87

Zitat von BrokenHeart
Alternativ kann jetzt über folgenden Code in der 'userChrome.css' die alte Funktionalität wiederhergestellt werden:
CSS
#navigator-toolbox > #nav-bar > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
	display:contents   !important;
}

hat geklappt

Dankeschön

Stefan62

Hallo,

gibt es schon ein skript für 133.0 Mehrzeilig und Tabs unten ? Probiere schon wieder stundenlang rum, entweder sind die Tabs unten oder sie sind mehrzeilig oben. Beides zusammen hab ich noch nicht gefunden.

2002Andreas

Zitat von Stefan62

gibt es schon ein skript für 133.0 Mehrzeilig und Tabs unten ?

In Beitrag Nr.1 ist doch das aktuelle Skript

Stefan62

Zitat von 2002Andreas

Zitat von Stefan62

gibt es schon ein skript für 133.0 Mehrzeilig und Tabs unten ?

In Beitrag Nr.1 ist doch das aktuelle Skript

Stimmt, hatte ich auch versucht. Kopieren und eingefügen bringt ja nichts, und zum konfigurieren bin ich zu dämlich. Dachte eher an eine fertige CSS

2002Andreas

Zitat von Stefan62

zum konfigurieren bin ich zu dämlich

Steht doch oben alles ganz genau beschrieben:

Zitat von Stefan62

Kopieren und eingefügen bringt ja nichts

Wohin kopieren bzw. wo einfügen?

Herzmann

Zitat von Stefan62

gibt es schon ein skript für 133.0 Mehrzeilig und Tabs unten ? Probiere schon wieder stundenlang rum, entweder sind die Tabs unten oder sie sind mehrzeilig oben. Beides zusammen hab ich noch nicht gefunden.

Kannst auch alternativ mal dieses hier probieren: RE: MultiRowTabsLiteforFx – Fehlersuche und Kompaktierung
Das sollte auch performanter sein.

Stefan62

Zitat von 2002Andreas

Zitat von Stefan62

zum konfigurieren bin ich zu dämlich

Steht doch oben alles ganz genau beschrieben:

Zitat von Stefan62

Kopieren und eingefügen bringt ja nichts

Wohin kopieren bzw. wo einfügen?

Habs aus Beitrag1 in die userChrome.css eingefügt, Tabs sind immer noch oben und mehrzeilig sind sie auch nicht.

Herzmann

Zitat von Stefan62

Habs aus Beitrag1 in die userChrome.css eingefügt, Tabs sind immer noch oben und mehrzeilig sind sie auch nicht.

Der Beitrag 1 ist deshalb so lang, weil er auch in Gänze gelesen und befolgt werden muss.

2002Andreas

Zitat von Stefan62

Habs aus Beitrag1 in die userChrome.css eingefügt

da gehört der auch nicht hin, es handelt sich dabei um ein Skript.

Du hast die Vorbereitung zur Nutzung von Skripten im Firefox gemacht?

Lies das bitte mal dazu:

Vorbereitung zur Nutzung von Skripten

Stefan62

Zitat von 2002Andreas

Zitat von Stefan62

Habs aus Beitrag1 in die userChrome.css eingefügt

da gehört der auch nicht hin, es handelt sich dabei um ein Skript.
Du hast die Vorbereitung zur Nutzung von Skripten im Firefox gemacht?
Lies das bitte mal dazu:
Vorbereitung zur Nutzung von Skripten

Ok, danke. Die Anleitungen beziehen sich Windows oder Linux, komme damit auf meinem Mac nicht klar. Früher hatte ich einfach nur den Inhalt einer fertigen CSS in meine kopiert und fertig. Geht wohl nicht mehr.

2002Andreas

Zitat von Stefan62

Die Anleitungen beziehen sich Windows oder Linux, komme damit auf meinem Mac nicht klar.

dann gedulde dich bitte, evtl. kann dir ein Mac Nutzer genaueres dazu sagen.

2002Andreas

Zitat von Stefan62

einer fertigen CSS in meine kopiert und fertig

Teste bitte mal:

CSS

/* Tableiste mehrreihig unten */

@-moz-document url(chrome://browser/content/browser.xhtml) {
    
:root {
   --tab-min-height: 35px !important; 
  }

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
   min-width: 165px !important;
   max-width: 165px !important;
  }

#TabsToolbar {
  order: 100 !important;
  }

#titlebar {
  order: 2 !important; 
}

/* Abstand nach oben - unten, und Höhe der Tableiste */
#titlebar {
   margin-top: -1px !important;
   margin-bottom: 3px !important;
}

#toolbar-menubar {
   position: fixed;
   display: inline-flex;
}

[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar {
   top: 1px;
}

[sizemode="maximized"] #toolbar-menubar {
   top: 3px;
}

#main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) {
   border-top: solid 39px transparent !important;
}

#main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) {
   border-top: solid 34px transparent !important;
}

[tabsintitlebar="true"] #navigator-toolbox {
   -moz-window-dragging: drag;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
[tabsintitlebar="true"] .titlebar-buttonbox-container {
   display: block;
   position: fixed;
   right: 0;
}

[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container {
   top: 1px;
}

[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container {
   top: 8px;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls {
   top: 0;
}

#navigator-toolbox[inFullscreen="true"] #nav-bar {
   padding-right: 109px !important;
}

/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 3 Zeilen, weitere per Scrollbar */
scrollbox[part][orient="horizontal"] > slot,
scrollbox[part][orient="horizontal"]{
contain: none !important; 
overflow-x: hidden;
overflow-y: auto;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 3); /* Anzahl der angezeigten Tabreihen = 3 Zeilen */
}

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

tabs tab,.tab-background {
   height: var(--tab-min-height);
   overflow: hidden;
}

tab > .tab-stack {
   width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
   -moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
   display: none; 
}
}

Alles anzeigen

Stefan62

Zitat von 2002Andreas

Zitat von Stefan62

einer fertigen CSS in meine kopiert und fertig

Teste bitte mal:

CSS

/* Tableiste mehrreihig unten */

@-moz-document url(chrome://browser/content/browser.xhtml) {
    
:root {
   --tab-min-height: 35px !important; 
  }

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
   min-width: 165px !important;
   max-width: 165px !important;
  }

#TabsToolbar {
  order: 100 !important;
  }

#titlebar {
  order: 2 !important; 
}

/* Abstand nach oben - unten, und Höhe der Tableiste */
#titlebar {
   margin-top: -1px !important;
   margin-bottom: 3px !important;
}

#toolbar-menubar {
   position: fixed;
   display: inline-flex;
}

[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar {
   top: 1px;
}

[sizemode="maximized"] #toolbar-menubar {
   top: 3px;
}

#main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) {
   border-top: solid 39px transparent !important;
}

#main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) {
   border-top: solid 34px transparent !important;
}

[tabsintitlebar="true"] #navigator-toolbox {
   -moz-window-dragging: drag;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
[tabsintitlebar="true"] .titlebar-buttonbox-container {
   display: block;
   position: fixed;
   right: 0;
}

[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container {
   top: 1px;
}

[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container {
   top: 8px;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls {
   top: 0;
}

#navigator-toolbox[inFullscreen="true"] #nav-bar {
   padding-right: 109px !important;
}

/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 3 Zeilen, weitere per Scrollbar */
scrollbox[part][orient="horizontal"] > slot,
scrollbox[part][orient="horizontal"]{
contain: none !important; 
overflow-x: hidden;
overflow-y: auto;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 3); /* Anzahl der angezeigten Tabreihen = 3 Zeilen */
}

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

tabs tab,.tab-background {
   height: var(--tab-min-height);
   overflow: hidden;
}

tab > .tab-stack {
   width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
   -moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
   display: none; 
}
}

Alles anzeigen

Zitat von Stefan62

Zitat von 2002Andreas

Zitat von Stefan62

einer fertigen CSS in meine kopiert und fertig

Teste bitte mal:

CSS

/* Tableiste mehrreihig unten */

@-moz-document url(chrome://browser/content/browser.xhtml) {
    
:root {
   --tab-min-height: 35px !important; 
  }

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
   min-width: 165px !important;
   max-width: 165px !important;
  }

#TabsToolbar {
  order: 100 !important;
  }

#titlebar {
  order: 2 !important; 
}

/* Abstand nach oben - unten, und Höhe der Tableiste */
#titlebar {
   margin-top: -1px !important;
   margin-bottom: 3px !important;
}

#toolbar-menubar {
   position: fixed;
   display: inline-flex;
}

[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar {
   top: 1px;
}

[sizemode="maximized"] #toolbar-menubar {
   top: 3px;
}

#main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) {
   border-top: solid 39px transparent !important;
}

#main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) {
   border-top: solid 34px transparent !important;
}

[tabsintitlebar="true"] #navigator-toolbox {
   -moz-window-dragging: drag;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
[tabsintitlebar="true"] .titlebar-buttonbox-container {
   display: block;
   position: fixed;
   right: 0;
}

[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container {
   top: 1px;
}

[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container {
   top: 8px;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls {
   top: 0;
}

#navigator-toolbox[inFullscreen="true"] #nav-bar {
   padding-right: 109px !important;
}

/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 3 Zeilen, weitere per Scrollbar */
scrollbox[part][orient="horizontal"] > slot,
scrollbox[part][orient="horizontal"]{
contain: none !important; 
overflow-x: hidden;
overflow-y: auto;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 3); /* Anzahl der angezeigten Tabreihen = 3 Zeilen */
}

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

tabs tab,.tab-background {
   height: var(--tab-min-height);
   overflow: hidden;
}

tab > .tab-stack {
   width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
   -moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
   display: none; 
}
}

Alles anzeigen

Du bist ein Genie. Vielen, vielen Dank. Nun ist alles wie es sein soll.

2002Andreas

Zitat von Stefan62

Vielen, vielen Dank. Nun ist alles wie es sein soll.

Freut mich wenn du zufrieden bist, war gern geschehen

AdE

Vielen Dank für das super Skript. Es läuft bei mir auf Anhieb unter Ubuntu. Könnt Ihr mir bitte noch mit einigen optischen Änderungen helfen?

1. Ich möchte gern die Schriftart in den Tabs optisch an die Standardschriftart von Firefox anpasse. Statt Arial habe ich den Wert Standard (DejaVu Serif) genommen, der in den Einstellungen vom FF steht, das funktioniert aber nicht. Auch die Systemschriftarf von Ubuntu habe ich schon ausprobiert, das klappt auch nicht. Vermutlich ist es der falsche Name. Welche Schriftart müsste ich dort eintragen?

2. Ich hätte gerne einen fließenden Übergang zwischen den Tabs, das würde ich gern über die Änderung der Farbe des Rahmens lösen, indem ich diese an die Tabfarbe anpasse. Welche Werte/Zeilen müsste ich dafür korrigieren?

BrokenHeart

Zitat von AdE

Vielen Dank für das super Skript.

Gerne...

Zitat von AdE

Ich möchte gern die Schriftart in den Tabs optisch an die Standardschriftart von Firefox anpasse.

Du musst den exakten Namen der auf dem System verfügbaren Schriftart angeben. Ich nutze Ubuntu nicht, aber auch dort wird es sicher eine Übersicht über die verfügbaren Schriftarten geben.

Zitat von AdE

... das würde ich gern über die Änderung der Farbe des Rahmens lösen, indem ich diese an die Tabfarbe anpasse. Welche Werte/Zeilen müsste ich dafür korrigieren?

Die Variable in den 'User-Settings' heißt var strTabBorderColor. Dort kannst du den gewünschten RGB-Wert angeben.

AdE

Zitat von BrokenHeart

Zitat von AdE

Ich möchte gern die Schriftart in den Tabs optisch an die Standardschriftart von Firefox anpasse.

Du musst den exakten Namen der auf dem System verfügbaren Schriftart angeben. Ich nutze Ubuntu nicht, aber auch dort wird es sicher eine Übersicht über die verfügbaren Schriftarten geben.

Es lag am Namen. Der nannte sich in den Systemangaben Ubuntu Regular, allerdings funktioniert es nur wenn man als Schriftart nur Ubuntu eingibt und das Regular weglässt.

Zitat von BrokenHeart

Zitat von AdE

... das würde ich gern über die Änderung der Farbe des Rahmens lösen, indem ich diese an die Tabfarbe anpasse. Welche Werte/Zeilen müsste ich dafür korrigieren?

Die Variable in den 'User-Settings' heißt var strTabBorderColor. Dort kannst du den gewünschten RGB-Wert angeben.

Dein Standardwert ist 128,128,128 für schwarz, wenn ich den z.B. auf 255,250,250 stelle, müsste der Rahmen ja weiß werden und bei hellem Hintergrund nahezu verschwinden, es ändert sich aber nix, er bliebt schwarz.

Als Umgehungsvariante habe ich versucht, var nTabMargin von 1 auf 0 zu setzten. Dann rücken die Tabzeilen näher zusammen und der schwarze Rahmen ist oben und unten weg, aber rechts und links der Tabs noch vorhanden.

2002Andreas

Zitat von AdE

es ändert sich aber nix, er bliebt schwarz.

Das kann ich auch für jede andere Farbe bestätigen

BrokenHeart

Zitat von AdE

Dein Standardwert ist 128,128,128 für schwarz

Eigentlich ist das ein ziemlich langweiliges grau , schwarz wäre ja 0,0,0. Hast du auch daran gedacht, die Breite des Rahmens anzugeben: var nTabBorderWidth? Standardmäßig steht die auf 0 , also 'kein Rahmen'. Hier funktioniert es auf jeden Fall: