Firefox Multirow Bookmarks Toolbar - howinfo/howinfo GitHub Wiki

Description

Below URL bar can be shown Bookmarks Toolbar, but it is only one row of bookmarks. This is how to show all rows.

What webbrowser to use?

Works in Firefox based browsers, like maybe:

• Firefox
• Waterfox https://www.waterfox.net , privacy focused webbrowser, that I used for testing this, works
• LibreWolf https://librewolf.net https://appimage.github.io/LibreWolf/ , privacy focused webbrowser
• Mypal for 32bit ReactOS, WinXP, Win7 etc https://releases.wekan.team/mypal/

Why use Firefox based brosers?

This Multirow feature.

And Firefox AddOns:

• Firefox Multi-Account Containers: Login to many different accounts, like many Gmail accounts, or Outlook.com Accounts. Currently I have about 100 containers, and there is feature of search for container name.
• DownThemAll!: Downloading many files from webpage, by file type
• BitWarden: Password manager, where password server can be self-hosted, or from BitWarden EU or USA. Also, Ubuntu Touch has native BitWarden app. Also available for Chromium based browsers.
• Video DownloadHelper: Downloading video from websites. Works also with websites that require login. This AddOn works only in Firefox, not WaterFox.
• uBlock Origin: Removing ads. Also for Chromium based browsers.
• Accessibility Insights for Web. Checking for accessibility.
• Meteor DevTools Evolved. Showing Meteor Web Framework browserside minimingo javascript based database content, etc. Also for Chromium based browsers.
• Tree Style Tab: Sometimes using this, to show browser tabs at left.

Where this info is from?

• https://github.com/MrOtherGuy/firefox-csshacks
• https://raw.githubusercontent.com/MrOtherGuy/firefox-csshacks/master/chrome/multi-row_bookmarks.css

Install

1. At your webbrowser, go to URL about:support
2. Click Application Basics / Profile Directory / Open Directory. It opens directory like abcde.default-default
3. In File Manager, create directory chrome
4. Copy Paste below code to that directory chrome to textfile userChrome.css
5. Close webbrowser
6. Open webbrowser
7. Enjoy Multirow Bookmarks Toolbar !

chrome/userChrome.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_bookmarks.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes bookmarks toolbar span multiple rows */

#PersonalToolbar{
  --multirow-bmb-n-rows: 3; /* Control how many rows are shown before scrolling */
  --multirow-bmb-row-margin: 2px; /* Control how much spacing is between rows */
  max-height: none !important;
}

#PlacesToolbar > hbox:not(#PlacesToolbarDropIndicatorHolder){ 
  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) * (4px + 1em + (2 * (var(--multirow-bmb-row-margin) + var(--uc-bm-padding,var(--bookmark-block-padding)))))) !important;
  overflow-y:auto;
  scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

/* Hide the all-bookmarks button */
#PlacesChevron{ display: none }

/* Add some spacing between rows */
#PlacesToolbarItems > .bookmark-item{
  margin: var(--multirow-bmb-row-margin) 3px !important;
  visibility: visible !important; /* Just in case they would be hidden for some reason */
}