Bookmark toolbar tweaks - adamhotep/Firefox-Tweaks GitHub Wiki

The bookmarks toolbar is one row with limited width. Why waste space with extra padding or redundant icons? When Firefox Quantum obsoleted its old add-on mechanism in 2017, it broke support for the excellent Roomy Bookmarks Toolbar, which addressed those problems quite well. With that add-on, you could change bookmark icons and hide their text. I have reimplemented and expanded that functionality here. There's no user interface, but the concepts are simple enough, keying on spaces in bookmark/folder names.

(If you were linked directly here, see the Home page for directions on how to find your userChrome.css file. Remember you have to restart Firefox after editing that file to propagate the changes. See also How to edit userChrome.css live).

Icon/emoji-only toolbar bookmarks

/* Name STARTS WITH a space: Crop to emoji width (hover text has full name) */
#PlacesToolbarItems > .bookmark-item[label^=" "] > label {
  width:1em; padding:0!important; margin:0!important;
  display:block!important; white-space:nowrap!important;
  overflow:hidden!important; text-overflow:""!important;
}

/* Name ENDS WITH a space: No folder/favicon (just the name/emoji) */
#PlacesToolbarItems > .bookmark-item[label$=" "] {
  list-style-image:none!important;
}
#PlacesToolbarItems > .bookmark-item[label$=" "] > image {
  display:none;
}
#PlacesToolbarItems > .bookmark-item[label$=" "] > label {
  margin-right:-0.03ch!important;
}

/* Name ENDS WITH two spaces: make the name/emoji BIGGER */
#PlacesToolbarItems > .bookmark-item[label$="  "] > label {
  font-size:16px; margin-right:-0.06ch!important;
}

This trick does end up with some extra spacing that is visible. I originally used the Zero-Width Space character (U+200B, ZWSP), but that made it hard to maintain. Instead, this uses negative right margins of -0.03ch for one space and -0.06ch for two. That's imperfect but it does look pretty close to my ZWSP version. This will be far simpler once Firefox supports white-space-trim:discard-inner.

I was able to find applicable emojis for almost all of my bookmarks and folders, only needing custom icons (see Β§Custom Icons below) for a handful that just did not match. I use the Emoji add-on for easy access.

(See examples in the Β§What this does table below the next section.)

Custom icons

/* Name STARTS WITH two spaces: Custom image icon, hidden name: no emoji/text */
#PlacesToolbarItems > .bookmark-item[label^="  "] {
  padding-right:0!important;
}
#PlacesToolbarItems > .bookmark-item[label^="  "] > label {
  width:0!important;
}

/* Example custom image definition (create a `chrome/icons` directory and put a 16px transparent `git.png` in it) */
#PlacesToolbarItems > .bookmark-item[label="  git"] {
  list-style-image:url("icons/git.png")!important;
}

Custom icons for items in your bookmark toolbar's subfolders

This is a little cumbersome because the variable loses the relative path to your chrome/icons directory (and I do not recommend hard-coding the absolute file:/// path or using remote images). The best solution is to use data: URI scheme (RFC 2397) to define the image inline. For example:

#PlacesToolbarItems .bookmark-item[label="perforce"] {
  --menuitem-icon:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCA\
  MAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEjUExURUdwTEBAQFJTXw0eoUB\
  AQEVFST8/Pz8/QBYaMxYw8T09PTM0Ozs9Tm187j4+PjU2Pw0huQsj2REcbg4kzyUmMniBwJad1HuJ\
  9Tc3ODQ0NSoqLiUlKhgaLywsLz8/P0BAQBQkmiYnMBcptz5R5hMjmA4chBAZYwshxhsmdYiV8w4Za\
  YGJu2V17R4gLCQlLCYnKg4k0I+Y1x4fKiUve2199hIedRglhaSt956k0QwagBsng0NSxbrB9D5Nwp\
  Gb6jEzQik5tAkZlCEnVik1jA4kww0hsxIaWEtd4Qwm7RUbSBMnwnqJ9S9G83OC8IuX9Flr8FJl721\
  992d491Zp9mx890FV9Ete9XuK+GN09l5v9hw183GB9nWF9zdN9IaU+I+c+QkcrxWxAZEAAABRdFJO\
  UwACCvASBhdD1v5QXCjDLTf1/uD3nx4Y7HlwgafGkDwh0opmz93s5P23+eslxLmyk9Ilv3v1xsndN\
  vXCodDD5aS7+4ZH9O637/7dlfH+wqnk+xyOF+YAAAAJcEhZcwAAAEgAAABIAEbJaz4AAADySURBVB\
  jTJczVdsMwFETRK9syN8bYYeaUmZlZkjnQ/v9X1G3Py6y1HwbA84rTaZHDCHlb+QB6933/5eNZFw4\
  PdjcNEfAboVFEw9HNaZzwlQJwK8HrZBAGd90vmvY3pBxIJo/GNAvDhA3qf8A+x8vEsszZQq40fiFI\
  o0j5PrJjpVbOP1aDxaT/OLySW3NnTdNzINnTQzqUL85mfFVtAtdlirNkt73Lc+rs7+iAO/e2wigJy\
  JwQuqcCFozrHp9nBszka2VAnNDU2q7rHseKvF7XAABzYqEhSSfE2i6pRg6AMCcIYqdlV1VdgP8Qwq\
  LWLkki/gEspyYYqhWS5gAAAABJRU5ErkJggg==") !important;
}

What this does

Name* (also the tooltip) Leading spaces Trailing spaces Output Text/emoji size
πŸ” Food 0 0 πŸ“β€ŠπŸ” Food normal
πŸ” Food 0 1 πŸ” Food normal
πŸ” FoodΒ  0 2 πŸ” Food LARGE
Β πŸ” Food 1 0 πŸ“β€ŠπŸ” normal
Β πŸ” FoodΒ  1 1 πŸ” normal
Β πŸ” FoodΒ Β  1 2 πŸ” LARGE
Β Β πŸ” Food 2 0 πŸ“ none
Β Β πŸ” FoodΒ  2 1 (custom image, must define) none

This applies equally to bookmarks directly on the toolbar. The example is the same, though the πŸ“ icon changes to the link target's favicon or else 🌐.

*: Do not copy the examples in this table as they will not match. Due to Markdown limitations, they use the non-breaking space character (U+00A0, NBSP) instead of spaces.

Hide from sync

Firefox sync is wonderful, allowing you to keep your various computers' Firefox profiles consistent with each other, including the bookmarks. What if you have bookmarks that are not relevant on all computers? You can hide those. This works because userChrome.css is NOT synced; you'll have to do that manually. When you do, change which items are "off" as needed. Any line that starts with "off" is disabled (it no longer matches the CSS selector and therefore does not run). Since this is a hiding feature, it works in reverse: the "off" line means you want to show bookmarks and folders whose names match. Lines that are not "off" mean you hide the matches.

To do this, we utilize an invisible character, a zero-width space (ZWSP, Unicode value U+200B), which you can copy from between these quotes: "​". This is the easiest character to use in this fashion. I also use the zero-width non-joiner (ZWNJ, U+200C), which Github Markdown doesn't let me insert here, but be warned, it can be harder to track as sometimes it merges with the adjacent characters; rather than editing the name, select the whole thing and re-enter it manually, pasting in the character anew. There are other candidates (zero-width joiner, ZWJ, is U+200D, and Soft Hyphen, SHY, is U+00AD), but I haven't explored them as I don't have that many scenarios.

/* Name CONTAINS either ZWSP or ZWNJ: Do not display. */
off #PlacesToolbarItems > .bookmark-item[label*="\200b"] { display:none; }
#PlacesToolbarItems > .bookmark-item[label*="\200c"] { display:none; }