Fx 133 > Tableiste unten per CSS-Code, nicht per Skript!

    Hier ein Update meiner Tabs-Down-Bemühungen, siehe #262. Einige Zeit war ich nicht sicher, welcher Variante ich den Vorzug geben würde, da beide gravierende Nachteile hatten. Es ist mir dann aber gelungen, die Probleme bei der Methode von Github überzeugend in den Griff zu bekommen. Klarer Gewinner war für mich war also in meiner Zählung die Version 2. Eine nahezu perfekte Lösung, die ich inzwischen auf mehreren Rechnern, die ich betreue, installiert habe.

    Aber dann kam Andreas mit einem noch besseren Code. Das habe ich mit meiner Version 1 gekreuzt und heraus kam die jetzt endlich vollständig perfekte Version 3.

    Da sind ein paar wichtige Maßnahmen für Windows 7 drin, damit die Tableiste nicht durch die 1-4px verrutscht, die Firefox einschiebt, falls man die Menüleiste abschaltet. Und box-shadow: none vermeidet die Schlagschatten bei den Tabs. Und bei einer niedrigen Tableiste kann man die Pfeilbuttons auf eine angenehmere Größe bringen.

    Wie gehabt, sollte man bis Zeile 59 nichts ändern, abgesehen von der Höhe von Menüleiste und Tableiste in den Zeilen 5 und 34. Ab Zeile 61 wird dann das Aussehen der Tabs bestimmt, frei nach dem Vorbild hier von #219 auf Seite 11. Die Farben der Buttons entsprechen dabei dem, was Firefox sowieso vorgibt, aber ich wollte ja eventuellen zukünftigen Änderungen des Layouts durch Firefox vorbeugen. Ab Zeile 115 bis 137 geht es dann um die Hintergrundfarben der einzelnen Leisten. In Version 2 entspricht die Menüleiste dem Classic-Theme von Windows 7, funktioniert aber auch mit Aero/Glass. Wie man es ensprechend für Windows 10 anpassen kann, ist angedeutet. Aber nun werde ich mich erst einmal weiter auf Version 3 konzentrieren, falls es da doch noch irgendwelche Schwachstellen geben sollte.

    RRM

    Hier ein Update meiner Version 3 von #286. Es hat sich herausgestellt, dass auch in diesem Fall eine Anpassung bei den Farben für das Glas/Aero-Theme und ebenso für WIndows 10 (ich teste allerdings nur bei einem Win10PE) nötig war. Und wenn ich die Farben schon selbst setze, dann ist die Zeile "color: var(--toolbar-color) !important;" überflüssig.

    Auch der Block, auf den Andreas hingewiesen hat, ein Relikt aus Version 1, ist überflüssig, denn die Höhe wird ja bereits unmittelbar davor in Zeile 5 gesetzt. Der Wert von 0px funktioniert bei mir übrigens hervorragend, weil Firefox es durch die vom Betriebssystem für das jeweiligen Theme vorgegebene Höhe ersetzt. Irgendwo gibt es also einen Unterschied, warum das bei Andreas anders ist. 25px ist ein hervorragender Kompromiss. Erst irgendwo über 30px zeigt sich bei mir ein Unterschied, dass die Menüleiste tatsächlich höher wird. Und Windows hat es so eingerichtet, dass für "normal" und "maximized" bei einigen Themes unterschiedliche Höhen vorgesehen sind. Ich habe es aufgegeben, das ausgleichen zu wollen. Gerade aus solchen Gründen bevorzuge ich sowieso den Classic-Look.

    Damit haben wir dann den Zustand der Perfektion asymptotisch erreicht? Beinahe. Es gibt noch einen winzig kleinen Nebeneffekt. Es lohnt sich nicht, dafür weiteren Forschungsaufwand zu betreiben und nach weiteren Änderungen des Code zu suchen. Es soll nur erwähnt werden, damit niemand zufällig darüber stolpert und sich dann wundert. Ich benutze WebScrapBook. Das erzeugt ein kleines Fenster, um den Verlauf eines Downloads anzuzeigen. Durch den Code von Github, einschließlich meiner Adaption, wird dort eine zusätzliche Menüleiste, die auch voll funktionsfähig ist, angezeigt. In dem Code von Andreas, einschließlich meiner Adaption, erscheint dort eine leere Leiste. Überflüssig, aber zum Glück völlig harmlos. Nehmen wir es als Kuriosität.

    Und jetzt werde ich herumgehen und bei den Rechnern, die ich betreue, die userchrome.css durch die aktuelle Fassung erstzen. Dank an Andreas für seine Arbeit und schöne Grüße von Radio Flora aus Hannover

    RRM

    Hilfreich für Laien wäre, wenn Kommentare an den betreffenden Stellen in den Code eingefügt werden mit dem Hinweis,

    welche Leiste oder anderer Oberflächenteil farblich verändert wird.

    "Wir fahren diesen Planeten gerade an die Wand"
    Klimaforscher Hans Joachim Schellnhuber

    StandingBill,

    falls sich Laien für meine Code-Version interessieren sollten, dann werde ich selbstverständlich Hilfestellung geben. Als ersten Schritt empfehle ich Anfängern, es genauso zu machen wie ich, ich habe jeden Code, der hier gepostet wurde, probehalber in meine userchrome.css eingegeben und geguckt, was passiert. Dann habe ich Schritt für Schritt Teile des Code weggelassen, um zu sehen, was sich dadurch verändert.

    Mein Code von #289 ist auf diese Methode zugeschnitten. Bis Zeile 54 wird alles genauso gebraucht, wie es ist, um die Tabs nach unten zu bringen. Ab da kann man wahlweise Abschnitte hinzufügen oder weglassen. Bei den Farben kann man z.B. in den Zeilen mit color den Wert hinter dem Doppelpunkt durch red oder green ersetzen, dann wird unmittelbar erkennbar, wofür das jeweils zuständig ist.

    Wenn man lediglich die Tabs nach unten haben möchte, dann ist der Code in #1 von Andreas immer noch das Maß aller Dinge. Wenn man darüber hinaus das Aussehen der Tabs selbst gestalten möchte, dann gibt es jedoch Probleme, weil Firefox ja bereits ein eigenes Layout für die Tabs festgelegt hat. Und das muss man erst einmal neutralisieren, damit der eigene Code überhaupt die gewünschte Wirkung zeigen kann.

    Das ist der Sinn meiner Version von #289. Die Methode, die ich angewendet habe, um das alles herauszufinden, ist für Laien allerdings absolut ungeeignet. In Bezug auf CSS gehöre ich selbst zwar auch noch zu den Laien, aber ich habe reichlich Erfahrung mit anderen Programmiersprachen und kann deshalb zumindest zielgerichtet herumstochern. Dazu habe ich chrome://browser/content/browser.xhtml mittels about:config aufgerufen und abgespeichert. Im zugehörigen Ordner befindet sich eine browser.css und da steht genau drin, wie Firefox seine Oberfläche gestaltet. Mit glücklich gewählten Suchbegriffen finde ich dann die Stellen, wo Firefox unvermittelt die Tabs um ein paar Pixel nach unten verschiebt, mit einem unerwünschten Schatten umgibt oder einen Mindestabstand, der mir zu groß ist, definiert.

    Auf diesem Wege habe ich inzwischen noch festgestellt, dass die Anweisungen border, margin und padding, die ich durchprobiert hatte, nicht ausreichen, um nebenwirkungsfrei den Abstand zwischen den Tabs auf 1px zu verringern. Ich muss statt dessen padding-inline nehmen. Betrifft nur nur den Extremfall, wenn ich ganz viele Tabs geöffnet habe. Damit es keine Beeinträchtigung des Scrollbuttons links gibt, muss in meinem Code #289 die Zeile 57 ersetzt werden durch ->

    padding-inline: 0px !important;

    margin-left: 1px !important;

    Apropos Laien, ich habe gelesen, dass nur Anfänger !important verwenden. Da ich in mehreren Fällen aber die Erfahrung gemacht habe, dass ohne !important keine Wirkung erzielt wurde, setze ich es vorsichtshalber trotzdem überall ein.

    Beim Recherchieren bin ich übrigens auf eine lustige Sache gestoßen. Bei den Seiten, die ich mir Anfang Juni heruntergeladen hatte, ist auch ein Blog von Github. Da hat ein Yochaym bereits am 5. Mai aufgrund der Beta von FF89 darauf hingewiesen, dass Firefox für navigator-toolbox jetzt nicht mehr position: relative setzt und man das nur wieder einzufügen braucht.

    Wenn das allgemein durchgedrungen wäre, hätten wir uns den Umweg mit top: 95px, genauen Wert experimentell ermitteln, sparen können. Ist übrigens nicht nur hier passiert, sondern auch beim Firefox Support Forum und vermutlich noch vielen anderen. Und auch der Code von Github, der auf etlichen Webseiten und auch hier zitiert wurde, hatte die Erkenntnis von Yochaym nicht aufgegriffen. Wir alle hätten bei Github nur etwas weiter schauen müssen, wo die ganze Zeit in mehreren Entwicklungsstufen auch eine tabs_below_navigation_toolbar_fx89.css auf der Basis von Yochaym verfügbar war.

    RRM

    Zitat von Real Radioactiveman

    Apropos Laien, ich habe gelesen, dass nur Anfänger !important verwenden. Da ich in mehreren Fällen aber die Erfahrung gemacht habe, dass ohne !important keine Wirkung erzielt wurde, setze ich es vorsichtshalber trotzdem überall ein.

    Das mit den Laien kann man so nicht pauschal sagen. Die Verwendung von !important ist in der Webentwicklung in der Regel tatsächlich eine ganz schlechte Praxis. Wenn man das vermeiden kann, sollte man das unbedingt vermeiden. Wobei hier auch die Betonung auf der Regel liegt, denn es kann auch legitime Fälle geben, in denen es nicht anders geht. In einem solchen Fall wird man aber nicht zum Laien. Man kann sicher sagen, dass in vielen Fällen, in denen es verwendet wird, nicht getan werden sollte. Bei der Anpassung von Firefox benötigt man das allerdings doch sehr häufig, was einfach damit zusammenhängt, wie die Prioriäten für Browser-Stylesheets und userChrome.css geregelt sind.

    Ein letztes Update, bevor FF90 uns vor neue Herausforderungen stellt. Meinen Code von #289 habe ich nochmal gründlich aufgepeppt. Ein paar Ergänzungen, damit es auch für nicht-Proton und Firefox 88 und früher kompatibel ist, geht mindestens bis FF76, noch weiter zurück wären weitere Anpassungen nötig. Die Farben trotzen jetzt auch dem Dark Mode des Betriebssystems und werden nur noch dann gesetzt, wenn bei Firefox das System-Theme ausgewählt ist. Wer andere Farben braucht, nimmt also einfach ein anderes Theme.

    RRM

    Hallo,

    erstmal oute ich mich als Nicht-Profi. Ich bekomme das sonst mit den userchrome.css dateien hin die Tabs wieder nach unten zu holen. Aber egal was ich ausprobiere von den hier angezeigten, meine neueste FF Version übernimmt es einfach nicht. Gibt es für die Version 89.0.2 (32-Bit) womöglich einen anderen Code?
    Optisch bin ich sonst wieder bei der vorherigen Version.

    Danke im Voraus für Eure Antworten.

  • 2002Andreas 13. Juli 2021 um 17:32

    Hat den Titel des Themas von „Fx 89 - Tableiste unten“ zu „Fx 90 - Tableiste unten“ geändert.

    Danke für die schnelle Antwort. Ich habe heute erst aktualisiert und es wird mir angezeigt, mein Firefox sei die aktuellste Version. Das ist ja merkwürdig.

    Aber aus Beitrag 1 der Code funktioniert leider nicht :(

    Einmal editiert, zuletzt von Nic (13. Juli 2021 um 18:10) aus folgendem Grund: Ein Beitrag von Nic mit diesem Beitrag zusammengefügt.

    Ich schreibe aktuell von meinem Rechner aus. Aber an meinem Laptop versuche ich zuerst die Tabs runter zu bekommen, bevor ich auf dem PC aktualisiere. Hier habe ich noch das 88er