Vor einiger Zeit habe ich die Lesezeichenleiste in Firefox verdoppelt. Da ich viele Lesezeichen habe die regelmäßig genutzt werden, schien mir dies sinnvoll, um diese möglichst ohne zusätzliches Klicken erreichen zu können. Als Basis dafür wurde CustomCSSforFx genutzt. Dies funktionierte über Jahre hinweg problemlos. Mit dem Update auf Firefox 74 kam es jedoch offensichtlich zu tiefergehenden Änderungen. Danach wurden die Lesezeichen umgebrochen, sodass sich jedes in einer einzelnen Zeile befindet. Dies kann man auf dem obigen Bild sehen.
Da ich inzwischen mehr Linux als Windows nutze und gerade das Notebook diese Anpassung auch aufgrund der Bildschirmgröße bislang nicht erhalten hat, nutze ich die Gelegenheit um das zu dokumentieren.
Profilordner finden und öffnen
Als Grundlage für jegliche CSS-Anpassungen dient euer Firefox-Profilordner. Man findet ihn je nach Betriebssystem unter folgendem Pfad:
Linux
/home/ username /.mozilla/firefox/profile_folder/
Windows
C:\Users\ USERNAME \AppData\Roaming\Mozilla\Firefox\Profiles\profile_folder\
Der Platzhalter profile_folder entspricht einer von Firefox zufällig generierten Id. Im Standardprofil endet dieser auf .default. Alternativ kann man in Firefox auch einfach about:profiles eingeben. Rechts neben Wurzelordner kann man auf Ordner öffnen klicken. Dies ist vor allem bei mehreren Profilen sinnvoll.
Oberfläche via userChrome.css anpassen
Ist der Ordner geöffnet, sucht man nach einem Unterordner namens chrome. Standardmäßig ist dieser nicht vorhanden und muss erstellt werden. Darin kann man über mehrere CSS-Dateien das Aussehen verändern. Für die Anpassung der Lesezeichen-Symbolleiste genügt es, eine Datei userChrome.css anzulegen
/* Makes bookmarks toolbar span multiple rows */
#PersonalToolbar{
--multirow-bmb-n-rows: 2; /* Control how many rows are shown before scrolling */
--multirow-bmb-row-margin: 4px; /* Control how much spacing is between rows */
max-height: none !important;
}
/* Padding between bookmark items */
toolbarbutton.bookmark-item:not(.subviewbutton) {
padding: 1px !important;
}
#PlacesToolbar > hbox{
display: block;
width: 100vw;
}
#PlacesToolbarItems{
display: flex;
flex-wrap: wrap;
/* --uc-bm-padding is defined in autohide_bookmarks_toolbar.css */
max-height: calc(var(--multirow-bmb-n-rows) * (5px + 1em + (2 * (var(--multirow-bmb-row-margin) + var(--uc-bm-padding,2px))))) !important;
overflow-y:auto;
scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor) ;
scrollbar-width: thin;
}
/* Add some spacing between rows */
#PlacesToolbarItems > .bookmark-item{
margin: var(--multirow-bmb-row-margin) 3px !important;
}
Damit die Änderungen wirksam werden, ist ein Neustart des Browsers notwendig.
Eigene Anpassungen: Firefox mit den Entwicklertools analysieren
Wem das Erweitern der Lesezeichen-Leiste genügt, der kann das obige CSS kopieren. Es ist allerdings einer Erwähung wert, dass die gesamte Firefox-Oberfläche aus HTML und CSS besteht. Somit kann der Browser via CSS komplett an die eigenen Vorstellungen angepasst werden. Gerade in Zeiten von Corona ist das möglicherweise eine interessante Beschäftigung für Modder.
Nun stellt sich aber die Frage, wie man an die Elemente, Klassen und IDs kommt. Hierzu gibt es einen Debugger, in dem ihr den DOM von Firefox-Oberflächen analysieren könnt. Drückt die Tastenkombination [STRG] + [ALT] + [SHIFT] + [i]. Das sich öffnende Fenster über eine eingehende Verbindung mit OK bestätigen. Über den Inspektor (links oben) lässt sich jedes UI-Element markieren. Die Konsole zeigt euch das dazugehörige DOM-Element:
Wie in der „normalen“ Entwicklerkonsole könnt ihr natürlich auch CSS-Modifikationen in den Regeln rechts direkt live ausprobieren. Die Konsole verhält sich identisch. Der Unterschied besteht darin, dass ihr den DOM der Firefox-Controls erhaltet – und nicht der besuchten Webseite.