Archiv

Firefox 66 – Mehrreihige Tableiste – Update



Ich hatte ja hier schon mal beschrieben, wie sich eine Mehrreihige Tableiste erstellen kann. Seit der Firefox Version 66.0.1 wird mit dem CSS Code der Scrollbalken bei mehreren Leisten nicht mehr angezeigt. Wer diese Anzeige wieder haben möchte, der muss den alten CSS Code nur gegen den neuen austauschen.

Firefox 66 – Mehrreihige Tableiste – Update

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 neuen CSS – Code dann machen muss.

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

Dann im Ordner chrome die userChrome.css Datei öffnen, und den alten CSS Code für die Mehrreihige Tableiste löschen.

In diese Datei tragen wir nun dafür folgenden neuen 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: 120px;/* Mindeste Tabbreite */
--tab_max_width_mlt: 120px;/* Maximale Tabbreite */
--tab-max-height_mlt: var(--tab-max-height,25px);
}
/*Tableistenabstände*/

#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
margin-bottom:-16px !important;
margin-top:-15px !important;
margin-left:3px !important;
}

.tabbrowser-tab .tab-content {
border:1px solid grey!important;
}

.tabbrowser-tab[pinned] .tab-icon-image{
margin-left:-5px!important;
}

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

/* Tab schließen Button dauerhaft auf allen Tabs anzeigen, ansonsten auskommentieren*/

.tab-close-button.close-icon{
display: -moz-box !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[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-max-height_mlt);
}

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

.tab-stack {
width: 98% !important;
}

#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-max-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;
}

#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc(var(--tab-max-height_mlt) * var(--tabs-lines));
}

.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;
}

#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;
}

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

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

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

Und so sieht der Code dann in der userChrome.css Datei aus:



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.

Firefox 66 – Mehrreihige Tableiste – Update

VICTSING Mini Maus kabellos Wireless Mouse, 2.4G Funkmaus, 2400 DPI 6 Tasten Optische Mäuse mit USB Nano Empfänger Für PC Laptop iMac Macbook Microsoft Pro, Office Home,Schwarz
2.868 Bewertungen
VICTSING Mini Maus kabellos Wireless Mouse, 2.4G Funkmaus, 2400 DPI 6 Tasten Optische Mäuse mit USB Nano Empfänger Für PC Laptop iMac Macbook Microsoft Pro, Office Home,Schwarz
  • Das Aussehen des Patents : Diese Maus durch die EU aussehen Zertifizierung, die Welt nur in VicTsing verkauft, der Rest von den Verkäufern sind gefälscht.
  • 2.4Gwireless Datenübertragung & 5 DPI Schalter und angepasste Funktion : 2,4 GHz Wireless - eine Erfahrung sicherer und präziser als das traditionelle FMRadioSystem mit einer erhöhten Arbeitsabstand bis 15 m. Es braucht nichtlaufwerk,Plug & Play. 5 DPI-Schalter (800, 1200, 1600, 2000, 2400) ändern Sie die Geschwindigkeit der Maus frei.

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

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 das aktuelle Standard Favicon von YouTube wird wieder angezeigt.

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

userChrome.css aufräumen

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

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

(Diese Datei wird für optische Änderungen an Webseiten, bzw. allen Firefox Seiten die mit about beginnen benötigt)



Das könnte auch interessant sein...


Tags

34 Comments

  1. Hallo Andreas,
    bisher konnte ich den Code erfolgreich einsetzen.
    Danke für Deine Mühe und Geduld!
    Habe ich irgendwo überlesen, dass es nur bei der 32 Bit-Version geht?
    Habe auf 64 Bit umgestellt, da geht’s nicht.
    Danke und viele Grüße
    Uschi

    1. Hallo Uschi..

      eben getestet, der Code funktioniert einwandfrei in der aktuellen Version 67.0.4, egal ob 32 oder 64 Bit.
      Es muss also einen anderen Grund bei dir dafür geben. Darum bitte alles in Ruhe überpüfen.

      Ansonsten danke, auch dir liebe Grüße.
      Andreas

  2. Das Ganze hier ist ein Fake und funktioniert hinten und vorne nicht!!!

    Mit der hier beschriebenen userChrome.css erscheint kein Srollbalken wenn die URLliste
    eine Bildschirmseite überschreitet (bei mir ist maxRichResults = 50)?!?

    Mit der folgenden userChrome.css hat das bei mir immer funktioniert bis einschl. Firefox Version 65! Ab Version 66 leider nicht mehr?!?:

    #PopupAutoCompleteRichResult .autocomplete-richlistbox > scrollbox{ overflow-y:auto !important; }
    #PopupAutoCompleteRichResult .autocomplete-richlistbox{ max-height:425px; }

    1. Nirgendwo steht, dass mit dem Code ein Scrollbalken in der Urlleiste erscheinen soll!
      Der CSS Code funktioniert einwandfrei für die Tableiste.

      Und wenn etwas im Fx 65 funktioniert hat, dann bedeutet das nicht, dass es auch im Fx 66 zu funktionieren hat!
      Dein Code für Popup AutoComplete funktioniert so auch nicht mehr, der ist nicht mehr aktuell.

      Und auf Grund deiner Aussage, das alles hier wäre ein Fake, werde ich dir auch keine Hilfe/Lösung zu deinem Problem geben.

      1. Lieber Andreas,

        jetzt, wo du es sagst, ist es mir auch aufgegangen. Deine hier diskutierte userChrom.css hat natürlich nichts mit meinem Firefox-Problem zu tun und daher entschuldige ich mich in aller Form für die ersten beiden Sätze in meinem vorherigen (obigen) Kommentar und nehme sie zurück!!!

        Aber du sagst, dass der Code in meiner userChrome.css nicht mehr aktuell ist, aber von Version 57 bis einschl. Version 65 war der Code aktuell und hat immer funktioniert!!!
        Bis zur Firefox-Version 56 gab es dieses (mein) Problem überhaupt nicht! Die Bildlaufleiste wurde immer automatisch eingefügt wenn die URLliste eine Bildschirmseite überschritt (es war keine userChrome.css erforderlich)! Aber bei Firefox ist es offensichtlich so, dass man nie weiß, welche Überraschungen eine neue Version beinhaltet! Ich umgehe das Problem zur Zeit in dem ich Version 64 anwende!

      2. Hallo @Günter Fuchs..

        ich nehme deine Entschuldigung an…alles ist gut…Schwamm drüber 😉

        Ich werde morgen unter windowspower einen neuen Beitrag veröffentlichen, wo es dann den neuen Code für die Scrollleiste im PopupAutoComplete der Urlbar gibt.
        Der funktioniert dann aber erst ab der Version 66 vom Firefox.

        Aus Sicherheitsgründen solltest du niemals eine alte Version vom Firefox nutzen, auch nicht von anderen Browsern oder Programmen!

        MfG.
        Andreas

  3. Hallo Andreas,

    absolut toll! Habe es zufällig gefunden als ich mal wieder einen Ersatz für Tab-Mix-Plus gesucht habe. Habe allerdings immer ein Add-On gesucht. Verwende deswegen immern noch die 56. Und parallel die neueste Version zum Testen. Auch die gelben Ordner sind schön. Wie man nur auf das grau gekomen ist…

    Jetzt fehlt mir nur noch aus Tab-Mix-Plus die Funktion mit Doppelklick Tab neu laden. Kann das auch in die UserChrome.css reinprogrammiert werden?

    Grüße
    Andreas

    1. Hallo Andreas..

      leider ist diese bzw. so eine Funktion nicht per CSS Datei zu realisieren.
      Ob das in Zukunft, evtl. durch eine Webextensions, wieder machbar sein wird kann ich dir leider nicht sagen.
      Ansonsten freut es mich, wenn du meine CSS Codes für dich nutzen kannst.😊

      MfG.
      Andreas

      1. Hallo!

        Soweit ich gelesen habe kann man ja das Kontext Menu welches erscheint wenn man die rechte Maustaste auf einem TAB drückt per userChrome.css anpassen !
        Ist es hier möglich als ersten Punkt wie in Google Chrome ‚Neuer Tab‘ einzufügen, damit dann rechts vom aktuellen Tab ein neuer geöffnet wird ?

        vielen Dank

      2. Hallo @Marc.

        Da es sich dabei um eine Funktionsänderung handelt, lässt sich das nicht mit einem CSS Code erstellen.

        Du kannst doch aber neben dem letzten Tab auf das + klicken, dann öffnet sich ein neuer Tab direkt daneben.

        MfG.
        Andreas

      3. Hallo Andreas !

        Das mit dem + ist schon richtig, ich finde es aber sehr praktisch wenn man auf jeden beliebigen Tab klicken kann und dann gleich rechts davon einen neuen Tab aufmachen kann!

        Mal weitersuchen , villeicht finde ich noch was..

        vielen Dank
        Marc

      4. Hallo!

        Ich habe es so realisiert, funktionert einwandfrei :

        Folgendes Add-On installieren (ich hoffe das darf man posten) :
        https://addons.mozilla.org/de/firefox/addon/new-tab-context/

        Danach folgendes in userChrome.css eintragen, damit New Tab am Anfang des context Menus steht :
        /* New Tab Context – move the menu item to the top */
        #tabContextMenu menuitem[label=“New Tab“] { -moz-box-ordinal-group: 0 !important; }
        /* New Tab Context – hide the icon */
        #tabContextMenu menuitem[label=“New Tab“] .menu-iconic-icon { display: none !important; }

        mfg
        DeCi

      5. Hallo @DeCi…

        ganz herzlichen Dank für den Hinweis und den CSS Code dazu, könnte anderen Usern evtl. auch mal helfen bzw. nützlich sein👍

        Dir noch eine schöne Woche.

        MfG.
        Andreas

      6. Hallo!

        Nur als Hinweis : Dieser CSS Code ist nicht von mir, sondern steht in den Infos vom new-tab-context Add-On!
        Der Dank dafür gebührt dem Entwickler Luke Baker!

        Ich habe es nur gepostet weil man das leicht übersieht!

        Gruss
        DeCi

      7. Hallo Andreas,

        Danke für deine Antwort. Nach dem Mist mit den Add-Ons am Wochenende wollte ich jetzt auf Version 66 umsteigen. Dabei ist mir aufgefallen, das wenn ich einen Tab im mehrzeiligen Bereich verschieben will dieser immer in der ersten Zeile landet. Kannst Du das ändern?

        Danke und Grüße
        Andreas

      8. Hallo @Andreas..

        siehe auch meine Antwort dazu an @@DeCi.

        Das ist leider ein kleines Manko dabei, welches sich auch nicht mit einem CSS Code beheben lässt.
        Zumindest mir ist leider keine Möglichkeit dazu bekannt.

        MfG.
        Andreas

    2. Hallo, wieder ich 🙂

      Was mir jetzt noch aufgefallen ist : Das verschieben der Tabs an eine bestimmte andere Position funktioniert (bei mir jedenfalls) nicht mehr so richtig 🙁

      Es ist als wäre der Focus beim verschieben nicht mehr an der richtigen Position und man kann den Tab mit der Maus nur begrenzt und ungenau an eine andere Stelle setzen .

      Hat villiecht noch jemand das gleiche Problem ?

      vielen Dank
      DeCi

      1. Hallo @DeCi..

        das ist leider ein kleines Problem welches sich auch nicht per CSS Code lösen lässt.

        MfG.
        Andreas

      2. Hallo Andreas und DeCi,

        habe heute bei Experimentieren folgende (bekannte) Tastenkombination entdeckt:

        Tab nach links verschieben Strg + Umschalttaste + Bild ↑
        Tab nach rechts verschieben Strg + Umschalttaste + Bild ↓

        damit kann man Tabs, welche jetzt immer in der ersten Zeile landen an den gewünschten Ort verschieben.

        Grüße
        Andreas (nicht der Progammierer)

      3. Hallo Andreas (nicht der Progammierer)..

        vielen Dank für den Hinweis, funktioniert einwandfrei👍

        Dir ein schönes Wochenende.
        MfG.
        Andreas

  4. Hallo @Andreas!

    Vielen Dankl fpr die schnelle Antwort! Scrollbalken funkioniert jetzt, ich hab das Design der Tabs ein bisschen angepasst das es mehr so wie Tabmix Plus aussieht!

    Hier die hinzugefügten Zeilen :

    /* abgerundete Tabs DeCi */

    #TabsToolbar .tabbrowser-tab .tab-content {
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
    border-bottom-left-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
    }

    #TabsToolbar /* leicht transparente tabs DeCi */
    {
    opacity: .8 !important;
    }

    /* Hintergrundfarbe + Textfarbe inaktive Tabs DeCi*/
    .tabbrowser-tab {
    background: #ccd4ed!important;
    color: black !important;
    }

    jetzt bin ich zufrieden 🙂

    nochmals vielen Dank
    DeCi

    1. Hallo @DeCi…

      danke für die Rückmeldung. Freut mich wenn du zufrieden bist und ich dir helfen konnte😊

      Dann weiterhin viel Spaß mit dem Firefox.

      MfG.
      Andreas

    2. Der Mouseover Effekt fehlte noch :

      .tab-background:not([selected=“true“]):hover,.tabbrowser-tab:not([selected]):hover{
      background: #eaeefb!important; /*Inaktiver Tab hover – Hintergrund hellgrau*/
      }

  5. Hallo Andreas,
    Vielen Dank wieder mal für deine Hilfe. Es sieht schon gut aus, nur noch ein paar minimale Korrekturen.
    Ich habe deshalb noch 2 Fragen:
    1. wegen des Zusatzcodes: mit welchen Wert stelle ich den Abstand zwischen Textcontainer (bzw. Text) und Close-Button ein?
    2. wo stelle ich den Abstand zw. Close-Button und Tab-Ende ein (ist jetzt etwa 6 mm, 2 mm dürfte ideal sein)?

    Apropos… ich habe gesehen, dass im Code für „tab-close-button.close-icon“ vorher ein „margin-right“ enthalten war. Durch die Änderung ist jetzt kein „margin-right:-10px“ mehr enthalten, sondern ein „margin-left:5px“. Ist das so beabsichtigt?

    Danke und Gruß

    1. Hallo Benno..

      die Abstände änderst du unter den Einträgen:
      .tab-label-container
      auf z.B. 4.3em
      und
      .tab-close-button.close-icon
      auf z.B. margin-left:8px

      Einfach ausprobieren was bei dir am besten passt.

      Ansonsten ist es richtig, jetzt margin-left statt margin-right zu benutzen.
      MfG.
      Andreas

      1. Salut Andreas,

        perfekter gehts nicht mehr!!!
        Vielen herzlichen DANK.

        Ich wünsche dir noch einen schönen Tag.
        Falls ich wieder mal ein FireFox-Problemchen habe, kann ich mich wieder an dich wenden?
        Und noch eine Frage: darf ich deine Website weiter empfehlen? Oder lieber nicht, wegen des eventuellen Ansturms?

      2. Hallo Benno..

        es freut mich wenn ich dir damit helfen konnte, war gern geschehen.😊
        Du kannst die Seite windowspower gerne weiter empfehlen, würde uns sogar freuen.
        Und solltest du weitere Fragen haben, dann werde ich es zumindest versuchen dir zu helfen.

        Ich wünsche dir dann ein Frohes Osterfest, und wieder viel Spaß mit dem Firefox.

        MfG.
        Andreas

  6. Hallo Andreas,

    ich habe jetzt deinen CSS-Code für die mehrzeilige Darstellung der Tabs übenommen (den vorherigen Code vom Kollegen habe ich deaktiviert).
    Das Ergebnis sieht so super aus und…. die Scrollbar funktioniert :-). WOW, großartig!
    Frage noch: kannst du den Abstand zwischen Lesezeichen-Text und dem Close Button (das Kreuz) etwas größer (oder einstellbar?) machen. Das X steht jetzt ziemlich eng an den Text. Etwas mehr Abstand würde den Close-Button besser hervorheben, meine ich.
    Und kann man das Kreuz auch farblich ändern? Wenn ja, wo im Code?

    Und…. DANKE wieder einmal für deine tolle Arbeit.

    1. Hallo Benno…
      mit diesem Zusatz Code verschiebst du erstmal das Favicon weiter nach links:

      .tabbrowser-tab .tab-icon-image{
      margin-left:-6px!important;
      }
      Den Wert kannst du wie immer anpassen.
      Dann hast du oben in Zeile 27 für das Schließen Kreuz einen Eintrag, den du gegen diesen einfach austauschen musst:

      .tab-close-button.close-icon{
      color:red!important;
      margin-right:-14px!important;
      }
      Damit wird das Kreuz rot, und rutscht weiter nach rechts.
      Auch hier wieder Wert und Farbe bitte anpassen.

      Wenn nötig, dann kannst du damit den Tabtext auch noch etwas nach links verschieben:

      .tab-text {
      margin-left:-1px!important;
      }

      Ich hoffe das hilft dir etwas weiter.
      MfG.
      Andreas

      1. Guten Morgen Andreas,
        vielen Dank für deine Lösungsvorschläge.
        Code 1 (Favicon weiter nach links) und Code 2 (Kreuzfarbe ändern und weiter nach rechts verschieben) habe ich angewandt. Hat prima geklappt und bin „very happy“ damit :-).
        Code 3 (Tabtext weiter nach links verschieben) ist nicht ganz das, was ich meinte. Es wird zwar der Text etwas weiter nach links verschoben, aber der Abstand zwischen Textende und „Schließen“-Kreuz bleibt gleich. Schön wäre es, wenn das Kreuz nicht ganz so eng an den letzten Buchstaben des Textes stünde. Ich weiss aber nicht, ob das so ohne weiteres geht?

        Ich habe mal etwas herumgebastelt mit deinem Code und folgende Variante versucht:
        .tab-text {
        margin-right:4px!important;
        }

        Hat leider nicht funktioniert, bin eben kein Programmierer :-(. Ist wahrscheinlich völliger Quatsch, was ich da versucht habe!!

        Vielleicht fällt dir noch was ein, du bist der Experte :-).

        Schöne Grüße,

      2. Hallo Benno..

        das Problem ist die oben festgelegte Breite der Tabs:
        –tab_min_width_mlt: 120px;/* Mindeste Tabbreite */
        –tab_max_width_mlt: 120px;/* Maximale Tabbreite */

        Wenn du dort ca. 200px nimmst, würde es schon besser passen.

        Oder aber du nimmst diesen Zusatzcode:

        .tab-label-container {
        min-width:4.6em!important;
        max-width:4.6em!important;
        }
        Damit wird der Container innerhalb vom Tab mit dem vorhandenen Tabtext schmaler, und natürlich auch weniger sichtbarem Text.

        Und dann musst du noch diesen Wert ändern:
        .tab-close-button.close-icon{
        margin-right:-10px!important;
        }
        zu:

        .tab-close-button.close-icon{
        margin-left:5px!important;
        }

        Und dann mit allen Werten testen und evtl. noch etwas anpassen.

        MfG.
        Andreas

Schreibe einen Kommentar

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

Back to top button