Giving Firefox the tiniest URL bar bookmark 'star' button possible

April 5, 2023

Recently over on the Fediverse I mentioned I'd broken Ctrl-D to add new bookmarks in my Firefox:

TIL that I accidentally broke bookmarking on my primary Firefox. This is actually convenient because the only time I bookmark something on it is when I absentmindedly used Ctrl-D to try to close the window/tab. (My terminals close with Ctrl-D, my Firefox windows with Ctrl-W, I have a bunch of both, yes life is fun.)

One of the irritating ongoing changes in Firefox over the past N years is Firefox's slow but steady encroachment on the space in the URL bar. One of those things is the 'star' button for bookmarking the current page (or unbookmarking it), which Mozilla added at one point and doesn't let you remove, even if you don't use bookmarking and want the space so you can actually see more of the page's URL. So after grousing about it, I wound up removing the star button in my custom Firefox build, through the means of commenting out the entire snippet of browser 'HTML' that defines it. It turns out that this breaks Ctrl-D, apparently because the normal pop-up bookmark dialog wants to manipulate the state of the star. With no star element at all to manipulate, Firefox starts raising internal Javascript errors.

I made a series of attempts to deal with this. First I patched in Javascript 'try { ... }' sections around the obvious bits that were raising errors. This made Ctrl-D work too well; it would flash up the normal dialog very briefly but not wait for input (ie, for me to cancel the bookmark). Next I tried having the star button and its box be present but be either 'display: none' or zero width. That didn't work either, with the same symptoms that Ctrl-D worked too well. At this point I almost gave up but my stubbornness led me to the next obvious step of a having the tiniest possible star button. It turned out that this worked, and the tiniest star button (well, button box) is 1px in size (I believe these are CSS pixels, so scaled by your HiDPI scaling factor if this is applicable).

After some refinement, the CSS that I wound up with is, in userChrome.css format (cf):

#star-button-box {
  width: 0;
  max-width: 0;
  min-width: 0;
  border-width: 0;
  padding: 0px 0px 0px 1px !important;
  margin: 0;

(I've verified that this works in userChrome.css, although in my own build I did it in browser/base/content/browser.css, and I innocently used 'padding: 1px;' so that version gave me a 2px bookmark star. The difference between 2px and 1px isn't much, so I may keep it as 2px so I have a bit more of a reminder that there is something there. Some of these 0 settings may be overkill.)

One of my overall lessons from this is that I should try to do more personal Firefox UI changes with CSS instead of with my historical approach of brute force, ie commenting out sections of the UI's definitions. And probably I should do more of these as userChrome.css changes instead of source code changes. Just because I have a hammer doesn't mean I need to use it for everything.

Comments on this page:

By Mike at 2023-04-18 06:35:05:

This can also be really nice for decluttering context menus - hide all options you never care about in these. For me it's down to just 2-5 for nearly all of such menus.

(can find #context-* element-ids for menus in the usual F12 -> F1 -> Chrome/Remote debugging, as their elements are all there, even when menu is not displayed)

By guest at 2023-12-08 18:37:24:

Alternative CSS rule:

#star-button-box:not([open="true"]) {
   visibility: collapse;

This will only show the star icon when the panel is active.

Written on 05 April 2023.
« How to get a bigger font for Firefox's preview of link targets (sort of)
ZFS On Linux (still) needs better ways to control the ZFS ARC »

Page tools: View Source, View Normal, Add Comment.
Login: Password:
Atom Syndication: Recent Comments.

Last modified: Wed Apr 5 22:53:23 2023
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.