Bookmark toolbar tweaks

Roomy bookmarks

These two styles allow for more items on your bookmark toolbar, effectively implementing the functionality of the Roomy Bookmarks Toolbar add-on that does not work with webextensions as required by Firefox 57+ (Firefox Quantum).

These tweaks do not affect bookmarks that aren't in the top level (so if you have a folder on your bookmarks toolbar, none of its contents will be affected).

/* Hide bookmark names that start with a space (hover text has full name). */
#PlacesToolbarItems .bookmark-item[label^=" "]:not([label$=" "]) { width:16px; }

/* Hide bookmark icons whose names end with a space. */
#PlacesToolbarItems .bookmark-item[label$=" "] > image { display:none; }

The first style states that within your toolbar, bookmark items whose labels start with a space (but do not end with a space, in order to prevent conflicting with the second style), the width should be exactly 16 pixels wide. You'll still get the full name when you hover your cursor over the bookmark.

The second style states that within your toolbar, bookmark items whose labels end with a space shouldn't display their icon at all. This is particularly useful for bookmark folders, or just bookmarks you want to describe more briefly, say with an emoji (refer to the Firefox Emoji List for the list of supported colored emojis, though note there are plenty more without color).

Advanced tip: zero-width characters

Since the trailing space character is technically visible (it adds space after the bookmark), my personal userChrome.css uses the ZERO WIDTH SPACE character (U+200b), also called "ZWSP", in place of the trailing space. This still works very well, but it would be difficult to recognize, enter, or even transcribe. If you just want to cut and paste it, there is a ZWSP character between the angle brackets in this code block: <​>.

Advanced tip: Bigger Emojis

This is best utilized with zero-width characters. I require two trailing ZWSP characters for this since it's a super-set of the "hide bookmark icon" tweak above (both CSS lines will trigger assuming you're using the zero-width character version):

/* make the text BIGGER with a second trailing ZWSP (may look invisible here) */
#PlacesToolbarItems .bookmark-item[label$="​​"] { font-size:16px; }

Custom favicons

Another lost functionality in Firefox Quantum is the ability to have an add-on change the icon of a bookmark or bookmark folder. The above styles allow removing the text or using an emoji in place of the icon, but they can't specify custom icons. Here's how to do that:

/* custom bookmark icon - visible name */
#PlacesToolbarItems .bookmark-item[label="Firefox tweaks"] {
  background-image:url("firefox.png") !important; background:no-repeat 4px;
}
#PlacesToolbarItems .bookmark-item[label="Firefox tweaks"] > image {
  visibility:hidden;
}

/* bookmark icon definitions - hidden name */
#PlacesToolbarItems .bookmark-item[label="firefox "] {
  background-image:url("firefox.png") !important;
  width:2em; background:no-repeat center; color:transparent !important;
}

Just put the full bookmark/folder name in that label attribute matcher and the corresponding 16x16 pixel image (in this case "firefox.png") in the same chrome directory that your userChrome.css file lives. (You can also create a subdirectory, e.g. url("icons/firefox.png") for …/chrome/icons/firefox.png.)