{"id":6633,"date":"2020-03-22T22:38:18","date_gmt":"2020-03-22T20:38:18","guid":{"rendered":"https:\/\/u-labs.de\/portal\/?p=6633"},"modified":"2020-03-22T22:38:19","modified_gmt":"2020-03-22T20:38:19","slug":"mehrzeilige-lesezeichen-symbolleiste-in-firefox-74-und-neuer","status":"publish","type":"post","link":"https:\/\/u-labs.de\/portal\/mehrzeilige-lesezeichen-symbolleiste-in-firefox-74-und-neuer\/","title":{"rendered":"Mehrzeilige Lesezeichen-Symbolleiste in Firefox 74 und neuer"},"content":{"rendered":"

Vor einiger Zeit habe ich die Lesezeichenleiste in Firefox verdoppelt. Da ich viele Lesezeichen habe die regelm\u00e4\u00dfig genutzt werden, schien mir dies sinnvoll, um diese m\u00f6glichst ohne zus\u00e4tzliches Klicken erreichen zu k\u00f6nnen. Als Basis daf\u00fcr wurde CustomCSSforFx<\/a><\/strong> genutzt. Dies funktionierte \u00fcber Jahre hinweg problemlos. Mit dem Update auf Firefox 74 kam es jedoch offensichtlich zu tiefergehenden \u00c4nderungen. Danach wurden die Lesezeichen umgebrochen, sodass sich jedes in einer einzelnen Zeile befindet. Dies kann man auf dem obigen Bild sehen.<\/p>\n

Da ich inzwischen mehr Linux als Windows nutze und gerade das Notebook diese Anpassung auch aufgrund der Bildschirmgr\u00f6\u00dfe bislang nicht erhalten hat, nutze ich die Gelegenheit um das zu dokumentieren. <\/p>\n

Profilordner finden und \u00f6ffnen<\/h2>\n

Als Grundlage f\u00fcr jegliche CSS-Anpassungen dient euer Firefox-Profilordner. Man findet ihn je nach Betriebssystem unter folgendem Pfad:<\/p>\n

Linux<\/strong>\r\n \/home\/ username \/.mozilla\/firefox\/profile_folder\/<\/code> <\/p>\n

Windows<\/strong>\r\n C:\\Users\\ USERNAME \\AppData\\Roaming\\Mozilla\\Firefox\\Profiles\\profile_folder\\<\/code> <\/p>\n

Der Platzhalter profile_folder<\/strong> entspricht einer von Firefox zuf\u00e4llig generierten Id. Im Standardprofil endet dieser auf .default<\/strong>. Alternativ kann man in Firefox auch einfach about:profiles<\/strong> eingeben. Rechts neben Wurzelordner<\/strong> kann man auf Ordner \u00f6ffnen<\/strong> klicken. Dies ist vor allem bei mehreren Profilen sinnvoll.<\/p>\n

\"\"<\/figure>\n

Oberfl\u00e4che via userChrome.css anpassen<\/h2>\n

Ist der Ordner ge\u00f6ffnet, sucht man nach einem Unterordner namens chrome<\/strong>. Standardm\u00e4\u00dfig ist dieser nicht vorhanden und muss erstellt werden. Darin kann man \u00fcber mehrere CSS-Dateien das Aussehen ver\u00e4ndern. F\u00fcr die Anpassung der Lesezeichen-Symbolleiste gen\u00fcgt es, eine Datei userChrome.css<\/strong> anzulegen<\/p>\n

\n
\n\/* Makes bookmarks toolbar span multiple rows *\/\n\n#PersonalToolbar{\n  --multirow-bmb-n-rows: 2; \/* Control how many rows are shown before scrolling *\/\n  --multirow-bmb-row-margin: 4px; \/* Control how much spacing is between rows *\/\n  max-height: none !important;\n}\n\n\/* Padding between bookmark items *\/\ntoolbarbutton.bookmark-item:not(.subviewbutton) {\n  padding: 1px !important;\n}\n\n#PlacesToolbar > hbox{ \n  display: block;\n  width: 100vw;\n}\n\n#PlacesToolbarItems{\n  display: flex;\n  flex-wrap: wrap;\n  \/* --uc-bm-padding is defined in autohide_bookmarks_toolbar.css *\/\n  max-height: calc(var(--multirow-bmb-n-rows) * (5px + 1em + (2 * (var(--multirow-bmb-row-margin) + var(--uc-bm-padding,2px))))) !important;\n  overflow-y:auto;\n  scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor) ;\n  scrollbar-width: thin;\n}\n\n\/* Add some spacing between rows *\/\n#PlacesToolbarItems > .bookmark-item{ \n  margin: var(--multirow-bmb-row-margin) 3px !important;  \n}\n<\/pre>\n<\/div>\n
Damit die \u00c4nderungen wirksam werden, ist ein Neustart des Browsers notwendig.<\/p>\n
Eigene Anpassungen: Firefox mit den Entwicklertools analysieren<\/h2>\n
Wem das Erweitern der Lesezeichen-Leiste gen\u00fcgt, der kann das obige CSS kopieren. Es ist allerdings einer Erw\u00e4hung wert, dass die gesamte Firefox-Oberfl\u00e4che 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\u00f6glicherweise eine interessante Besch\u00e4ftigung f\u00fcr Modder.<\/p>\n
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\u00e4chen analysieren k\u00f6nnt. Dr\u00fcckt die Tastenkombination [STRG] + [ALT] + [SHIFT] + [i]<\/strong>. Das sich \u00f6ffnende Fenster \u00fcber eine eingehende Verbindung mit OK<\/strong> best\u00e4tigen. \u00dcber den Inspektor (links oben) l\u00e4sst sich jedes UI-Element markieren. Die Konsole zeigt euch das dazugeh\u00f6rige DOM-Element:<\/p>\n
\"\"<\/figure>\n
Wie in der „normalen“ Entwicklerkonsole k\u00f6nnt ihr nat\u00fcrlich auch CSS-Modifikationen in den Regeln rechts direkt live ausprobieren. Die Konsole verh\u00e4lt sich identisch. Der Unterschied besteht darin, dass ihr den DOM der Firefox-Controls erhaltet – und nicht der besuchten Webseite.<\/p>\n","protected":false},"excerpt":{"rendered":"
Vor einiger Zeit habe ich die Lesezeichenleiste in Firefox verdoppelt. Da ich viele Lesezeichen habe die regelm\u00e4\u00dfig genutzt werden, schien mir dies sinnvoll, um diese m\u00f6glichst ohne zus\u00e4tzliches Klicken erreichen zu k\u00f6nnen. Als Basis daf\u00fcr wurde CustomCSSforFx genutzt. Dies funktionierte \u00fcber Jahre hinweg problemlos. Mit dem Update auf Firefox 74 kam es jedoch offensichtlich zu …<\/p>\n","protected":false},"author":5,"featured_media":6638,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,78],"tags":[187,381],"class_list":["post-6633","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-software","tag-firefox","tag-mozilla-firefox"],"_links":{"self":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/6633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/comments?post=6633"}],"version-history":[{"count":6,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/6633\/revisions"}],"predecessor-version":[{"id":6642,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/6633\/revisions\/6642"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media\/6638"}],"wp:attachment":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media?parent=6633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/categories?post=6633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/tags?post=6633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}