Skip to content

Instantly share code, notes, and snippets.

@sboettcher

sboettcher/FF57+RoomyBookmarksToolbar.md

Last active February 26, 2024 07:10
Show Gist options
  • Star 24 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save sboettcher/604ac90fb5b53f82486f6b1854efdc4e to your computer and use it in GitHub Desktop.
Save sboettcher/604ac90fb5b53f82486f6b1854efdc4e to your computer and use it in GitHub Desktop.
Download ZIP
Firefox Quantum Roomy Bookmarks Toolbar
Raw
FF57+RoomyBookmarksToolbar.md

Firefox Config

Before adding the userChrome.css, you must enable loading it in the Firefox config (Firefox 69+):

  • In Firefox, browse to about:config (accept the warning prompt)
  • search for toolkit.legacyUserProfileCustomizations.stylesheets
  • double click the entry so it says true

Profile Folder

Here is how to find your Firefox profile folder:

  • Windows Default: %APPDATA%\Mozilla\Firefox\Profiles\xxxxxxxx.default\
  • Ubuntu Default (apt): ~/.mozilla/firefox/xxxxxxxx.default/
  • Ubuntu Default (snap): ~/snap/firefox/common/.mozilla/firefox/xxxxxxxx.default/

Find via Firefox: Menu > Help > More Troubleshooting Information > Application Basics > Profile Directory

userChrome

In your profile folder, create/edit the file chrome/userChrome.css, then add the following contents:

/* 
 * Recreates the basic functionality of the popular Roomy Bookmarks Toolbar add-on in Firefox 57+.
 * Uncomment the section with the functionality that you want, leave all other sections commented.
 * This only affects toplevel toolbar bookmarks and folders, bookmarks and subfolders in folders are unaffected.
 * The tooltips on long hover (showing bookmark name and link) are unaffected.
 */


/* Remove some space between bookmark icons. If you like having things a bit more spaced out, you can instead add the padding statements. */
#PlacesToolbarItems > .bookmark-item {
  margin-left: -1px !important;
  margin-right: -1px !important;
  /*
  padding-left: 6px !important;
  padding-right: 6px !important;
  */
}


/* Center bookmark toolbar items */
#PlacesChevron {
  margin: 0px !important;
  padding: 0px !important;
}
#PlacesToolbarItems {
  width: 100%;
  display: flex;
  justify-content: center;
}
#PlacesToolbarItems > .bookmark-item:last-child {
  margin-right: 0px !important;
}

/* Center url input bar text */
#urlbar-input {
	text-align: center !important;
}


/* Hide "Other Bookmarks" folder in the bookmarks toolbar */
#PlacesToolbar #OtherBookmarks { display: none !important; }


/* No text on toolbar bookmarks; No text on bookmark folders. No hover effect. */

#PlacesToolbarItems > .bookmark-item:not([open="true"]) > .toolbarbutton-text {
  display: none !important;
}

#PlacesToolbarItems > .bookmark-item:not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
  margin-inline-end: 0px !important;
}


/* No text on toolbar bookmarks; Text on bookmark folders. No hover effect. */
/*
#PlacesToolbarItems > .bookmark-item:not([container]):not([open="true"]) > .toolbarbutton-text {
  display: none !important;
}

#PlacesToolbarItems > .bookmark-item:not([container]):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
  margin-inline-end: 0px !important;
}
*/


/* No text on toolbar bookmarks; No text on bookmark folders. Show bookmark text on hover. */
/*
#PlacesToolbarItems > .bookmark-item:not(:hover):not([open="true"]) > .toolbarbutton-text {
  display: none !important;
}

#PlacesToolbarItems > .bookmark-item:not(:hover):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
  margin-inline-end: 0px !important;
}
*/


/* No text on toolbar bookmarks; Text on bookmark folders. Show bookmark text on hover. */
/*
#PlacesToolbarItems > .bookmark-item:not(:hover):not([container]):not([open="true"]) > .toolbarbutton-text {
  display: none !important;
}

#PlacesToolbarItems > .bookmark-item:not(:hover):not([container]):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
  margin-inline-end: 0px !important;
}
*/

Notes:

  • Do not forget to uncomment the section of code with the functionality you want. Available are:
    • No text on toolbar bookmarks; Text on bookmark folders. No hover effect.
    • No text on toolbar bookmarks; No text on bookmark folders. Show bookmark text on hover.
    • No text on toolbar bookmarks; Text on bookmark folders. Show bookmark text on hover.
  • Tested on Windows 11 and Ubuntu 22.04, on the latest stable release of Firefox, unless otherwise stated here.
@sboettcher
Copy link
Author 

* Should I follow the procedure mentioned above **before** or **after** installing the Roomy Toolbar extension to FF?

Neither, you do not have to install any extension.

* Where can I find the _userChrome.css file_?  Should I simply create a _.txt_ file with the code mentioned above and then rename it as _.css_?
* Should the .css file go into the FF profile director or into a _chrome_ directory located into the FF profile directory?

If the file or folder do not exist, create them. Then copy the code above and save.

@asheenlevrai
Copy link

Hi :)

I did the following (on macOS 10.14.5):

  • copied the code from post#1 into a blank text file
  • saved the file as userChrome.css
  • created a chrome folder into FF profile folder ( /Users/username/Library/Application Support/Firefox/Profiles/xxx.default)
  • moved userChrome.css into /Users/username/Library/Application Support/Firefox/Profiles/xxx.default/chrome
  • restarted FF (67.0.1)

Now, I notice nothing different.
Is there anything else to do in order to recreate the basic functionality of the popular Roomy Bookmarks Toolbar add-on:
Hide bookmarks bar items label text, show on hover?

Thank you very much in advance for your help.

Best,
-a-

@sboettcher
Copy link
Author

on macOS 10.14.5

I have tested this with new profiles in the exact way you tried it and it works on Windows and Linux (Ubuntu). I have no idea if it works on macOS or why it would not. I can't help you on macOS, sorry.

@asheenlevrai
Copy link

Indeed... I testeed and it works well in FF on windows. Not in macOS (Mojave), though.
:(((

Thank you anyways. Great work!

@asheenlevrai
Copy link

Thanks a lot :)
I tested again and it works after i removed the add-on "compact-toolbar" (https://addons.mozilla.org/en-US/firefox/addon/compact-toolbar/)

Thank you. Great work!

@asheenlevrai
Copy link

Just out of curiosity, why couldn't this be achieved via an add-on?

@sboettcher
Copy link
Author

sboettcher commented Jun 7, 2019 •
edited

I tested again and it works after i removed the add-on "compact-toolbar"

Glad you could work it out, nice!

Just out of curiosity, why couldn't this be achieved via an add-on?

To be honest I have not looked into making this an add-on. Maybe at some point I will, but this was primarily just for my own use and as long as it works like this I think it's OK.
But I'm also a bit surprised this has gotten any attention, maybe I will look into it when I have some free time...

@asheenlevrai
Copy link

But I'm also a bit surprised this has gotten any attention, maybe I will look into it when I have some free time...

Believe me, A LOT of people were using roomy toolbar and got upset when it became incompatible with modern versions of FF. Your workaround is probably a bit late for many of them but I bet many will be very happy to learn about your thing. Making an add-on out of it will make it more accessible to most.
Maybe someone else will use your code to make an add-on (if you allow it).

Have a great day.
-a-

@asheenlevrai
Copy link

asheenlevrai commented Jun 11, 2019 •
edited

This does not work for me can you help please. How you get to work? I added the chrome folder inside my mozilla default profile and copied the file and made userChrome.css file. Nothing is showing up

  • Make sure the .css file you created contains all of the code in post#1
  • Make sure you properly uncomment the section you want to use (remove both /* and */ flanking the part that you want)

Good luck
-a-

@Alexolut
Copy link

It would be good if you add an option that allow hiding text on bookmarks tool bar, but leaving recent highlights item intact.

2019-07-18 11_45_06-Firefox Quantum Roomy Bookmarks Toolbar

Such behavior is observable when I use the following userChrome.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#personal-bookmarks .bookmark-item > .toolbarbutton-text { display:none !important; }

#personal-bookmarks .bookmark-item:hover > .toolbarbutton-text { display:block !important; }

@evangelion69
Copy link

Firefox 69 disables the loading of userChrome.css and userContent.css by default to improve performance.

about:config
toolkit.legacyUserProfileCustomizations.stylesheets must be "true"

@sarahbayley
Copy link

Awesome! Thank you so much for making this this. Bookmarks bar is back the way I like it :)

@ocdmonkey
Copy link

Is there any way to change the icon size? I'd like the icons to be larger.

@HaydenMacKay
Copy link

HaydenMacKay commented Dec 4, 2019 •
edited

Firefox 69 disables the loading of userChrome.css and userContent.css by default to improve performance.

about:config
toolkit.legacyUserProfileCustomizations.stylesheets must be "true"

@evangelion69 Thank-you, this fixed the issue I was having!

@ellapse
Copy link

ellapse commented Feb 17, 2020 •
edited

2020-02-17 (2)
Is there any way to fix "Recent Highlights" list text missing and icon centered?
This also happen on Library->Bookmarks and History.
TIA

@sboettcher
Copy link
Author

@ellapse In case you haven't fixed it yourself by now, I changed the code in the gist to fix this problem. It now only affects bookmarks in the toolbar (No idea why I didn't do it like that in the first place).

@sboettcher
Copy link
Author

sboettcher commented Jul 11, 2020 •
edited

@ocdmonkey A quick and dirty approach would be to just increase the image size, by adding this to your userChrome.css:

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon {
  width: 20px !important;
  height: 20px !important;
}

(default is 16px)
However the icons get a bit pixelated then. I don't know how to get higher-resolution icons and how to actually use them in the toolbar, sorry.

@ellapse
Copy link

ellapse commented Jul 11, 2020

@ellapse In case you haven't fixed it yourself by now, I changed the code in the gist to fix this problem. It now only affects bookmarks in the toolbar (No idea why I didn't do it like that in the first place).

Thank you so much!

@prediscover
Copy link

Hey! This works great on ff82b

Do you know how to increase the padding between favicons? They seem a little too squished together.

@sboettcher
Copy link
Author

sboettcher commented Sep 23, 2020 •
edited

@prediscover It's really just CSS, you could try the same approach as my comment above about changing the icon size, but instead of changing the width/height properties, change the padding-left/padding-right properties, and adjust the px value to your liking.

Edit: Actually, looking at the original code, I think it's better to change the padding on the bookmark-item class directly, e.g. like this:

#PlacesToolbarItems > .bookmark-item {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

(default is 4px in every direction)

Edit2: Default boxmodel of a bookmark-item:
boxmodel-bookmark-item

@Glubzor
Copy link

Glubzor commented Jan 3, 2021

one can avoid displaying the folders icons on the toolbar by adding this line :

#PlacesToolbarItems > .bookmark-item:not([scheme]) > .toolbarbutton-icon {display: none !important;}

this give me the look and behaviour I am accustomed to.

@mattpogue
Copy link

This is absolutely fantastic! Thank you so much for the time and effort to create this. I only wish I had found it sooner 👍

@mattpogue
Copy link

One other note - after a rebuild to Windows 11, Firefox 90.0.2, everything looked great after setup except 1 thing: on bookmark folders with 3 sub-folders, I was getting the up/down arrows and it was not displaying correctly. I found that in my setup, removing the initial margin settings at the beginning resolved the issue and didn't mess up anything else that I've found so far.

So just an FYI - if you're experiencing display issues with bookmark sub-folders, remove the -1px margin statements from the beginning of the block. This does not appear to have a negative impact that I could find.

Also, adding the padding-left/padding-right 6px is a perfect addition :)

Thanks again!

@cyberfunk
Copy link

Does anyone know how to expand bookmarks to the edges of the toolbar on both the right and left? As it is FireFox wastes space and pushes extra bookmarks to an overflow menu leaving a big gap on the right where at least two more bookmarks could fit. FireFox also leaves gaps on both sides if bookmarks are centered using flexible space. Please see images. I would like to expand my bookmarks to use the full width of the toolbar with no gaps. Is this possible with userChrome.css? The green x's show where I would like to expand the bookmarks but cannot because Firefox make those areas off limits by design.

Screen Shot 2021-07-30 at 10 05 26 PM
Screen Shot 2021-07-30 at 9 59 10 PM

@sboettcher
Copy link
Author

@mattpogue Thank you for your comment! I had noticed that happening too, it must have been introduced with one of the more recent FF versions, since it definitely didn't happen earlier. I think I initially included the margin statements to remove the space between icons, but can see that some may also like having more space between them. It still works without the up/down arrow issue when just removing the left/right margins. I've changed the css suggestion accordingly, thanks!

@sboettcher
Copy link
Author

@cyberfunk In the first example, I'm not sure because I don't see that amount of space. There is only ever at most one bookmark worth of space between the overflow icon and the last bookmark for me.
I suppose what you could try is reducing the margin space for the overflow icon (also try values <0 for just margin-left):

#PlacesChevron {
  margin: 0px !important;
  padding: 0px !important;
}

In the second case, the space is obviously caused by the flexible space. I think you might have more luck using the userChrome.css to center it manually, and I think it's actually a nice addition that I might use myself 👍 . Remove the flexible spaces and add the relevant css like in the example in the gist.

@cyberfunk
Copy link

cyberfunk commented Jul 31, 2021 •
edited

@sboettcher Thank you so much! I centered the bar using your excellent code. I also increased the icon size to 20px and utilized the full width of the bar by spacing them out with this code:

#PlacesToolbarItems .bookmark-item {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-right: 2.8px !important;
  padding-left: 2.8px !important;
}

Screen Shot 2021-07-31 at 6 52 53 AM

@Vyxxxx
Copy link

Vyxxxx commented Jul 25, 2022

The centering doesn't work for me at all. But the others do.

@sboettcher
Copy link
Author

@Vyxxxx the centering stopped working for me completely a couple of days ago, but I fixed it for my browser (113.0.1). Maybe you can try again...

@Paramirage
Copy link

Paramirage commented Jun 17, 2023 •
edited

@sboettcher Thanks for the update

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment