Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I shrink the really large fonts in Firefox 89 UI?

  • 6 replies
  • 1 has this problem
  • Last reply by cor-el

more options

I finally turned off the menu bar some time back and started using the Bookmarks Menu Button (the little star with an underline). With v89, the dropdown menu from this is huge. The fonts are a lot bigger than in v88, and for some reason, there are now two "Manage bookmarks" items, one at the top and one at the bottom. Is there any way, either official or through userChrome.css, to choose a small font? I already have a userChrome.css that I used to remove items from the old Bookmarks menu on the menu bar, but those don't apply to the BM Button.

Chosen solution

It sounds as though you have the new Proton UI experience. I can't see a huge difference between the menu font and the Bookmarks Menu font, but they do look a bit different:

You could try something like this to tighten things up:

/**** Bookmarks Toolbar menu button drop-down  ****/
    
/* Adjust font size and vertical spacing */
menuitem[id^="BMB"], menu.bookmark-item, menuitem.bookmark-item  {
  font-size: 12px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

Read this answer in context 👍 1

All Replies (6)

more options

Chosen Solution

It sounds as though you have the new Proton UI experience. I can't see a huge difference between the menu font and the Bookmarks Menu font, but they do look a bit different:

You could try something like this to tighten things up:

/**** Bookmarks Toolbar menu button drop-down  ****/
    
/* Adjust font size and vertical spacing */
menuitem[id^="BMB"], menu.bookmark-item, menuitem.bookmark-item  {
  font-size: 12px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

Helpful?

more options

You may be able to achieve a reduction by adjusting the following setting in about:config: layout.css.devPixelsPerPx

Helpful?

more options

jscher2000, thanks! That did the trick.

Helpful?

more options

Again, thanks. And this is not quite the same but is related issue: any idea how I get rid of the duplicate separator and the extra "Manage bookmarks" items? See attached image.

Maybe a better question would be: how do I find the names of all these elements so I can probably do this myself in the future?

Helpful?

more options

You can use the Browser Toolbox to inspect the code and get the selectors (id or class name) like we do. There is a setting to prevent a pop-up menu from closing. See:

Note that this toolbox is a separate standalone application that uses its own profile (chrome_debugger_profile).

Helpful?

more options

This is about these two selectors.

#BMB_bookmarksShowAllTop
#BMB_bookmarksShowAll

I hide the one at the bottom and move the one at the top up for easy access.


/* MOVE "Show All Bookmarks" to top of Bookmarks drop-down list */
#BMB_bookmarksShowAllTop {-moz-box-ordinal-group:0!important}
#BMB_bookmarksShowAll {display:none!important}

Note that the duplicate separator might be one that is an actual separator that you see in the Bookmarks Manager (Library) or sidebar.

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.