Firefox 71: Layout via userChrome.css nachbessern

Wer gestern seinen Webbrowser geöffnet und u.a. meine Layoutanpassungen laufen hat, wird vermutlich einen grauen Block vorgefunden haben. Das lässt sich leicht lösen.

Firefox 71 – TabsToolBar anpassen

Wir brauchen einen Texteditor. Mit diesem öffnet Ihr die folgende Datei: ~/.mozilla/{profilname}/chrome/userChrome.css und ändert den #TabsToolbar Block in:

#TabsToolbar { /* tab bar */
    -moz-box-ordinal-group: 3 !important;
    padding-top: 0px !important;
    top: 92px;
    position: absolute;
    display: block;
}

Abspeichern. Browser neustarten. Geht wieder!

 

 

Der schnellste Firefox…

Um es mit den Worten des unsterblichen Rick zu sagen: „Schnellster FireFox aller Zeiten .. EINEN SCHEISS!!!“

Das Rick Sanchez Multiversum

Wenn da nicht die tolle Sicherheitslücke mit Remote-Exploit im 56er gewesen wäre, hätte ich nicht geupdated. Der Quantum Firefox ist nicht das, was mir versprochen wurde. Nicht das ich das je geglaubt hätte, was die Werbung sagt, aber irgendwer muß es getan haben, weil die Marketingkampange hat scheinbar funktioniert. Unreflektiert und unausprobiert haben die Echo-Blasen die Meldung von Mozilla aufgenommen und verbreitet. Hat überhaupt mal jemand einen Vorher/Nachher Versuch mit Statistiken gemacht ?  Hat sogar wer, aber nur mit konstruierten HTML5 Testsuits und nicht mit realen Webseiten. Das ist kein Test, das war „Wir machen was“ Fahnenschwenken.

Das Nachtschrecken Layout

Mein alter Firefox hat Seiten wie diese WordPress-Oberfläche sogar schneller geladen, als der neue! Und dann der KRAMPF mit dem dämlichen Layout, da hätte ich gerne darauf verzichtet. Wer sich das auch nicht geben will, für den habe ich da was :

/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
 -moz-box-ordinal-group: 1 !important;
 box-shadow: none !important;
}
#PersonalToolbar { /* bookmarks toolbar */
 -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
 -moz-box-ordinal-group: 3 !important;
 padding-top: 0 !important;
}
/* Clean up spacing */
.titlebar-placeholder {
 display: none !important;
}
toolbarbutton.bookmark-item {
 padding-top: 2px !important;
 padding-bottom: 2px !important;
}

/* If you display either:
 (1) The title bar, or
 (2) On Windows, the menu bar
 You might not want the following extra space above the main toolbar. 
 In that case, delete the following rule:
*/
#navigator-toolbox {
 padding-top: 20px !important;
}

/* Background for Light and Dark themes */
#main-window[lwthemetextcolor="bright"] #TabsToolbar, 
#main-window[lwthemetextcolor="dark"] #TabsToolbar {
 background-color: var(--chrome-secondary-background-color) !important;
 background-image: none !important;
}
#main-window[lwthemetextcolor="dark"] .scrollbutton-up,
#main-window[lwthemetextcolor="dark"] .scrollbutton-down,
#main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
#main-window[lwthemetextcolor="dark"] #new-tab-button,
#main-window[lwthemetextcolor="dark"] #alltabs-button {
 fill: var(--lwt-text-color) !important;
}
/* Left and right borders on Win 7 & 8, but not on 10 and later: */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
 /* Vertical toolbar border */
 #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
 border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
 border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
 background-clip: padding-box;
 }
}

/* Override vertical shifts when moving a tab (9 Jan 2018) */
#TabsToolbar[movingtab] {
 padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
 padding-bottom: 0 !important;
 margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] + #nav-bar {
 margin-top: 0 !important;
}

/* tab top border roundness */
#TabsToolbar .tabs-newtab-button,
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content {
 border-top-left-radius: 8px !important;
 border-top-right-radius: 8px !important;
 background-color: #f4f4f4;
 border-top: 1px solid #d8d8d8;
 border-left: 1px solid #d8d8d8;
 border-right: 1px solid #d8d8d8;
 border-image: none !important;
 }

#TabsToolbar .tabbrowser-tab .tab-stack {
 margin-left: 1px !important;
 margin-right: 1px !important;
}

#TabsToolbar .tabbrowser-tab::after,
#TabsToolbar .tabbrowser-tab::before {
 border-left: none !important;
}

/* tab-background tab-loading-burst tab-content */
/* tab-stack ist der gesamte tab */

.tab-line {
 display: none;
}
/* remove colored line above each tab */

#TabsToolbar .tabbrowser-tab .tab-line {
 visibility: hidden;
}

Speichert das mal als  :  „.mozilla/firefox/{EURE-PROFILEID}.default/chrome/userChrome.css“ ab.

Damit sieht es „halbwegs“ wieder so aus. Den ganzen Rest müßt Ihr über den „Anpassen“ Komposer selbst zurecht schieben, ist einfacher als es sich anhört.

Ein Beispiel für die Anpassungen vom Firefoxlayout. Man sieht den Editor von WordPress mit den Firefox Layoutanpassungen.

Ein Beispiel für die Anpassungen vom Firefoxlayout.

Wie man sehen kann, lagen mir die runden Tabs am Herzen 🙂 Und vor allem mußte die dämliche Trennlinie zwischen den Tabs weichen! Die ging ja gar nicht, das war Layout auf dem letzten Jahrzehnt!

Ich weiß nicht wieso, aber der kantige Look scheint ja mal wieder im Trend zu liegen. GNOME macht es ja auch nicht besser mit dem neuen Einstellungsfenster. Warum darf der Benutzer das eigentlich nicht selbst entscheiden was ihm gefällt ?!?!

Wenn Ihr Fragen habt, ich habe nur eine, hat zufällig jemand die Sache mit dem Aktiven Tab so gelöst, daß die Tab-Hintergrundfarbe heller/dunkler wird, statt der dämlichen .. ich könnte mich schon wieder hochfahren.. Linie über dem Tab?

Ein Lob hätte ich dann doch, aufgrund des CSS kann man die Sachen tatsächlich selbst anpassen und muß keine kryptische Lala-Sprache lernen.

..und der Schatten folgt dem Licht..

KÖNNT IHR BEI MOZILLA GEFÄLLIGST MAL EURE DOKUS AUF STAND HALTEN !!!!!!!!!!!!!! Um den Editor zu finden, mit dem man das Layout sehen und ändern kann, habe ich ne halbe Stunde mit Dokus auf Deutsch und Englisch mit Stand von FF 30 verbracht, weil die keiner aktualisiert hat, als das Verfahren, wie man das aufruft und einschaltet, geändert wurde! Scheisse, daß kostet alles Zeit ihr Penner!

Für alle, die sich die Zeit ersparen wollen:

SHIFT+CTRL+I
RECHTS oben in der Ecke auf das ZAHNRAD klicken
runterscrollen und unten RECHTS die letzten zwei Punkte aktivieren „Externes Debugging aktivieren“ und „Debuggin-Werkzeuge für Browser-Chrome und Add-ons aktivieren“
SHIFT+ALT+CTRL+I  oder Extras -> Webentwickler-Tools -> Browser-Werkzeuge

Die Meinung

Das ich kein Freund von der FireFox Geschichte bin, habt Ihr schon gemerkt. War wohl auch kaum zu überlesen. Die Umstellung war für alle die keine Plugins und Browsererweiterungen benutzen, bestimmt ganz einfach und „toll“.  Wer aber SecurityPlugins zur Analyse von SSL Verbindungen und z.b. deren Sicherheitsgrad einsetzt, der braucht jetzt ganz neue Tools, denn der neue tolle Firefox kann das nicht mehr leisten. Die Plugins der Quantumära haben keinen Zugriff mehr auf Verbindungsdaten und damit auf z.b. SSL-Chiper und Keylängen bei SSL-Verbindungen. Zum Glück ist das wichtigste Tool wieder verfügbar : NoScript! Und mittlerweile auch benutzbar. Ich glaube, ich spende dem Autor mal wieder was. Verdient hat er sich das ja.

P.S.: Vielleicht sollte ich den Kommentar doch nochmal im Rick-Style schreiben 😀

Kleines Update: Es hat keine 24h bis zum ersten CRASH von Firefox Quantum gedauert. WTF!

Das drei Tage Update gibt es hier.