FirefoxInternet

Mehrreihige Tableiste ab Firefox Version 65



Ich hatte hier ja schon mal beschrieben wie man sich eine mehrreihige Tableiste für den Firefox erstellen kann. Mit der aktuellen Firefox Version 65 hat sich einiges etwas verändert, und somit muss der CSS Code geändert werden. Die Tableiste befindet sich jetzt immer unter der Menüleiste.

Mehrreihige Tableiste

Bis zur Firefox Version 56 war es möglich, solche Änderungen durch diverse Erweiterungen zu erreichen.

Das eine oder andere ist seit der Firefox Version 57 nicht mehr möglich, da Mozilla dafür (zumindest noch) keine Schnittstelle mehr zur Verfügung stellt.

Aus diesem Grund muss man jetzt optischen Änderung am Firefox mit einer userContent.css bzw. einer userChrome.css Datei erstellen.



Dazu bedarf es allerdings erst einer kleineren Vorbereitung, die ich hier schon mal erklärt hatte.

userChrome.css erstellen

Und hier mal eine Erklärung wie man das mit dem CSS Code zum Ändern der Tableiste machen muss.

Dazu gehen wir als erstes in den Profilordner vom Firefox, und öffnen den dort selber angelegten Ordner chrome.

Dann im Ordner chrome die userChrome.css Datei öffnen.

In diese Datei tragen wir nun folgenden CSS Code ein:

/* Tableiste mehrreihig */

#tabbrowser-tabs{
  --tabs-lines: 3; /*Angezeigte Leisten, bei mehr wird eine Scrollbar eingeblendet, oder den Wert erhöhen*/
  --tab_min_width_mlt: 150px;/* Mindeste Tabbreite */
  --tab_max_width_mlt: 150px;/* Maximale Tabbreite */
  --tab-min-height_mlt: var(--tab-min-height,28px);
}

.tab-background[selected="true"],.tabbrowser-tab[selected]{
   background: orange!important; /*Aktiver Tab Hintergrund orange*/
}

.tab-background:not([selected="true"]):hover,.tabbrowser-tab:not([selected]):hover{
   background: green!important; /*Inaktiver Tab hover - Hintergrund grün*/
}

.tab-line[selected="true"],.tab-line:not([selected="true"]) {
   display:none!important;
}

.tab-close-button.close-icon{
   margin-right:-18px!important;
}

.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
   direction: ltr;
   mask-image: linear-gradient(to left, transparent, black 0em)!important;
}

 .tabbrowser-tab{
   border:1px solid grey!important
}
 
.tabbrowser-tab[fadein]:not([pinned]) {
  flex-grow: 1;
  min-width: var(--tab_min_width_mlt) !important;
  max-width: var(--tab_max_width_mlt) !important;
}

.tabbrowser-tab,.tab-background {
  min-height: var(--tab-min-height_mlt);
}

.tabs-newtab-button {
  margin-left:-2px!important;
  vertical-align: bottom !important;
  height: var(--tab-min-height_mlt);
}

.tab-stack {
  width: 95%;
}

#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
  overflow-x: collapse !important;
  overflow-y: auto !important;
  min-height: var(--tab-min-height_mlt);
  max-height: calc( var(--tabs-lines) * var(--tab-min-height_mlt) ) !important;
}

#tabbrowser-tabs .arrowscrollbox-scrollbox {
  overflow-x: collapse;
  overflow: visible; 
  display: block;
}

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#TabsToolbar #alltabs-button,
.tabbrowser-tab:not([fadein]){
  display: none;
}

#main-window[tabsintitlebar] #tabbrowser-tabs {
  -moz-window-dragging: no-drag !important;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
  opacity: 0 !important;
}

#tabbrowser-tabs * {
  overflow-x: none !important;
}

#main-window[customizing] #tabbrowser-tabs .scrollbox-innerbox {
  display: block !important;
}

#tabbrowser-tabs .scrollbox-innerbox {
  -moz-padding-end: 4px !important;
}

#TabsToolbar[currentset^="tabbrowser-tabs,new-tab-button"] #tabbrowser-tabs .scrollbox-innerbox {
  -moz-padding-end: 10px !important;
}

(Dazu am besten den Text kopieren und in die userChrome.css wieder einfügen)

So sieht der Code dann in der userChrome.css Datei aus:

Mehrreihige Tableiste ab Firefox Version 65 0

Hinweis:
Je nach Bildschirmgröße muss die Tabbreite in Zeile 5 und 6 noch angepasst werden, damit sie bis an den rechten Rand passt. In Zeile 4 kann man einstellen, wie viele Tableisten angezeigt werden sollen, bevor ein Scrollbalken erscheint.

Damit man später noch genau weiß was der jeweilige CSS Code bedeutet, sollte man sich über dem CSS Code einen aussagekräftigen Hinweis erstellen.

Dazu schreibt man vor dem Text erst einen Slash und einen Stern /* dann die Beschreibung der Funktion…und als Abschluss schreibt man diesmal erst den Stern und dann das Slashzeichen */

Die Zeichen vorher und nachher bedeuten, dass der Text auskommentiert ist, und somit keinen Einfluss auf den CSS Code bzw. seine Funktion hat.

Mehrreihige Tableiste

Dann die userChrome.css Datei schließen und speichern, und den Firefox neu starten, damit die Änderung wirksam wird.

Und so sieht das dann mit der mehrreihigen Tableiste aus:

Mehrreihige Tableiste ab Firefox Version 65 1

Möchte man eines Tages diese Änderung nicht mehr nutzen, dann reicht es aus, den CSS Code in der userChrome.css wieder zu löschen.

Danach noch einen Neustart vom Browser machen, und die Tableiste wird wieder einreihig angezeigt.

Hier hatte ich mal beschrieben was man alternativ zur userChrome.css Datei am besten machen sollte:

userChrome.css aufräumen

Dieser Tipp kann bzw. sollte auch auf die Datei userContent.css angewandt werden.

Vorteil dadurch, es ist alles viel übersichtlicher und man findet schneller mal etwas wieder.

WD Elements Portable, externe Festplatte - 2 TB - USB 3.0 - WDBU6Y0020BBK-WESN
4.592 Bewertungen
WD Elements Portable, externe Festplatte - 2 TB - USB 3.0 - WDBU6Y0020BBK-WESN
  • USB3.0 / Computing Storage /
  • External hard drives / Externe Geräte &



Das könnte auch interessant sein...


Tags

2 Comments

  1. Hallo!

    Vielen Dank, das Script funktioniert soweit mit Firefox 66, nur ein paar Kleinigkeiten gehen nicht bzw. stören mich!

    Bei mir geht zb. kein Scrollbalken, egal was ich für einen Wert in Zeile 4 eintrage, es werden immer alle Tabzeilen angezeigt!
    Kann man die Anzahl der Tabs pro Zeile irgendwie anpassen? Ich verwende Breite 100 und es würden Rechts noch mind. 2 Tabs reinpassen. Ich weiss das ich die Tabbreite ändern kann, aber dann wird zwar der Abstand rechts kleiner, aber die Tabanzahl pro Zeile ändert sich nicht bzw. wird manchmal sogar auch weniger!

    vielen Dank
    DeCi

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Back to top button