Firefox Style Framework

Der Trend hin zu touchscreenoptimierten Oberflächen ist für Desktopnutzer oft ein enormer Rückschritt, da sehr viel Platz dadurch verloren geht sowie Menüs und GUIs unübersichtlich werden. Gab es bis Version 90 noch einen Kompakt-Modus des Browsers ist dieser ab Version 91 endgültig aus den Auswahlmenüs verschwunden. Firefox bietet aber weiterhin über den about:config Dialog und das CustomCSSforFx Framework unzählige Konfigurationsmöglichkeiten, u.a. 2 Kompatktmodi. Eimal den Proton Real Compact Mode und den Proton Compact Mode. Der Proton Compact Mode bietet im Gegensatz zum Proton Real Compact Mode weiterhin alle Konfigurationsmöglichkeiten des CustomCSSforFX Frameworks.

 

About:Config Werte ändern

Für beide o.g. Modi müssen mit Hilfe des Firefox about:config Konfigurationsdialogs einige Werte geändert werden :

toolkit.legacyUserProfileCustomizations.stylesheetstrue
browser.proton.appmenu.enabledtrue
browser.proton.enabldtrue
browser.proton.tabs.enabledtrue
browser.uidensity1

 

CustomCSSforFX Framework einrichten

Das CustomCSSforFX Framework für Firefox 91+ befindet sich im “classic” Ordner des auf Github herunterladbaren Archivs, wird in den Firefox Benutzerprofilorder kopiert und in chrome umbenannt, sodass der Inhalt des Ordners “classic” sich dann im Ordner “chrome” befindet.

Alternativ kann ein vorkonfiguriertes Framework ( Proton Compact Mode ) genutzt werden.

 

CustomCSSforFX Framework konfigurieren

Über die sehr gut dokumentierte userChrome.css werden sämtliche vorkonfigurierten CSS Dateien geladen. Das Design des Proton Compact Mode ergibt sich aus der Änderung folgender Zeilen der userChrome.css :

enable borderless B/W navigation buttons :D 125 D 150 ( /* @import “./css/buttons/icons_colorized.css”; /**/ )
diable hamburger button :D 234 D 235 / E 231 => Button invisible – empty buttun space incorrect
restore proton tab button style :D 301 ( /* @import “./css/tabs/classic_squared_tabs.css”; /**/ )
move Tabs down below bookmark line :E 325 ( @import “./css/tabs/tabs_below_navigation_toolbar.css”; /**/ )
show tab close icon only when hover :D 387 / E 389 ( @import “./css/tabs/tab_close_show_on_hover_only.css”; /**/ )

* ( D/E <line> = (D)isable / (E)nable <linenumber> )

TabToolBar verkleinern

Um die Tableiste ebenfalls ein wenig kompakter zu gestalten müssen einige Änderungen in der Datei “./css/tabs/tabs_below_navigation_toolbar.css” vorgenommen werden:

  • Änderung => “–tab-min-height_tnot: 32px;” zu “–tab-min-height_tnot: 25px;”
  • Hinzufügen des Wertes in #TabsToolbar:not(:-moz-lwtheme) => “height: 29px;”
  • Hinzufügen des Wertes in #tabbrowser-tabs => “margin-top: -4px; “

Bekannte Fehler

  • Der sogenannte Hamburger Button ist nur unsichtbar jedoch noch vorhanden. Menu ist daher verschoben

Ausstehende Optimierungen

  • Weiteren Tabstyle wie in FF ESR hinzufügen
  • Tab Buttonhöhe reduzieren

CC_BY_NC_SASpeefak

Kategorie(n): Anleitungen, GUI

Schreibe einen Kommentar

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

 

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.