This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

FFox v92 - Menu Spacing - Bug? (No, not the usual question)

  • 20 replies
  • 2 have this problem
  • 1 view
  • Last reply by RemySecor

more options

FFox 92 update today. Menu spacing went to double. No shock there. Found the CSS code below for UserChrome.css and set it up.

EX.

menupopup > menuitem, menupopup > menu {
  padding-block: 4px !important;
}
:root {
  --arrowpanel-menuitem-padding: 4px 8px !important;
}

Here's the issue: I want it tighter than 4px. So, I set it down to 2px... eventually dropping it to all 0px settings.

EX:

menupopup > menuitem, menupopup > menu {
  padding-block: 0px !important;
}
:root {
  --arrowpanel-menuitem-padding: 0px 0px !important;
}

But, it doesn't get any smaller than the above 4/8px set up. Bug? Perhaps there's another CSS setting to be tweaked for V 92? I do not have any other CSS for these items elsewhere in my UserChrome file.

FFox 92 update today. Menu spacing went to double. No shock there. Found the CSS code below for UserChrome.css and set it up. EX. <pre><nowiki>menupopup > menuitem, menupopup > menu { padding-block: 4px !important; } :root { --arrowpanel-menuitem-padding: 4px 8px !important; } </nowiki></pre><br >Here's the issue: I want it tighter than 4px. So, I set it down to 2px... eventually dropping it to all 0px settings. EX: <pre><nowiki>menupopup > menuitem, menupopup > menu { padding-block: 0px !important; } :root { --arrowpanel-menuitem-padding: 0px 0px !important; }</nowiki></pre><br> But, it doesn't get any smaller than the above 4/8px set up. Bug? Perhaps there's another CSS setting to be tweaked for V 92? I do not have any other CSS for these items elsewhere in my UserChrome file.
Attached screenshots

Modified by cor-el

All Replies (20)

more options

Adding: To be clear, 4/8px DID tighten it up. It just won't go lower (tighter) than that.

more options

Which menu drop-down list does the screenshot show ?

You should leave the second value at 8px as that is the padding-inline (left/right) and only adjust the first padding-block (top/bottom) value.

:root {--arrowpanel-menuitem-padding: 0px 8px !important;}
menupopup > menuitem, menupopup > menu {padding-block: 0px !important;}

Modified by cor-el

more options

It shows a drop-down menu off the bookmarks toolbar i.e. a folder of bookmarks.

The CSS setting above has no effect on the spacing of the ones on the menu bar, but I believe I may have set other settings to run in "compact mode".

Also note that in V91, this was not an issue. My bookmark menus looked fine. The V92 update today is what caused the wide spacing.

more options

Adding: I just ran a test with ONLY the CSS code above in my userChrome.css file to see if it made a difference. It did not. Same results... Less that 4px gives me the same result as 4px, which is too much vertical spacing for me.

However, I may be running with other settings via about:config that set me into a compact mode.

more options

Does other CSS code in your userChrome.css still work ?

more options

Yes, everything else functions as expected. Even this code works... it just won't drop below the level of 4px menu spacing. That is, 4px is tighter than the default that v92 gave me, but it won't get tighter than that.

more options

For the bookmarks toolbar drop-downs, new styling applies in Firefox 92, and that includes a minimum height. To to override that:

menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  padding-block: 2px !important;
  min-height: unset !important; /* v92.0 - for padding below 4px */
}
more options

Thanks, @ jscher2000. That let me get text items much closer.

Is there also a CSS tidbit that controls spacing before/after a separator on a bookmarks menu (perhaps all drop-down menus)?

more options

I use this CSS code for menu separators. This might be more then you want, so you can adjust the margin-top and margin-bottom values to your liking.

menuseparator {
  margin-top:-2px !important;
  margin-bottom:0px !important;
  margin-start:3px !important;
  margin-end:3px !important;
}

more options

Excellent. Thanks again.

I'll ask two more CSS questions... but if there's a resource where I can look these up and figure them out without becoming a Mozilla, I'll take that instead or in addition.

Color of the separators? I'd like to make them more visible.

Can the bookmark folder icon be either replaced with a different graphic if it is a graphic... or have the fill changed if it's just a filled shape? I did that back a few versions (pre-89), but that code no longer affects them.

more options

Regarding the folder icon, it follows the new wire frame style so changing the fill color only affects the frame. You would need to substitute an alternate image (either a data URL or an image file). For example: https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder

Note: My CSS messes up the Library window with lots of yellow folders in blank column spaces. Haven't had time to clean that up.

more options

Wow, that's a lot of code to do what a few lines used to cover! I'll give it a shot and look over the bug... see if I care :-)

more options

menuspeparators have a border-top and you can change the color here specified via a CSS var by your own color and possibly increase the width.

more options

See this file about how to style special SVG folders in the sidebar and in the Library (you can specify a fill-color: fill: blue !important;).


.bookmark-item[container][query] {
 fill:blue !important;
 fill-opacity: 1 !important;
}

.bookmark-item[container]:not([query]),
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, open) {
 fill:blue !important;
 list-style-image: url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' fill='blue' fill-opacity='1' xmlns='http://www.w3.org/2000/svg'><path d='M14.5 3H6.914a.5.5 0 0 1-.354-.146L5.146 1.439A1.491 1.491 0 0 0 4.086 1H1.5A1.5 1.5 0 0 0 0 2.5v11A1.5 1.5 0 0 0 1.5 15h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 3zm.5 10.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V6h14zM1 5V2.5a.5.5 0 0 1 .5-.5h2.586a.5.5 0 0 1 .354.146l1.414 1.415A1.491 1.491 0 0 0 6.914 4H14.5a.5.5 0 0 1 .5.5V5z'/><path d='M15 13.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V6h14z' fill-opacity='.2'/><path d='M1 5V2.5a.5.5 0 0 1 .5-.5h2.586a.5.5 0 0 1 .354.146l1.414 1.415A1.491 1.491 0 0 0 6.914 4H14.5a.5.5 0 0 1 .5.5V5z' fill-opacity='.1'/><path d='M15 13.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V13h14z' fill-opacity='.05'/></svg>") !important;
}

treechildren::-moz-tree-image(container, queryFolder_menu________) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
}

treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' fill='blue' fill-opacity='context-fill-opacity' xmlns='http://www.w3.org/2000/svg'><path fill-opacity='.15' d='M15,14H1c-0.6,0-1-0.4-1-1V3c0-0.5,0.4-1,1-1h14c0.6,0,1,0.5,1,1v10C16,13.6,15.6,14,15,14z'/><path d='M8.4,4.2l1,2.1l2.3,0.3c0.3,0,0.5,0.4,0.2,0.7l-1.7,1.7l0.4,2.4c0.1,0.3-0.3,0.6-0.6,0.4L8,10.8L6,12 c-0.3,0.1-0.6-0.1-0.6-0.4l0.4-2.4L4.1,7.4C3.9,7.2,4,6.8,4.3,6.7l2.3-0.3l1-2.1C7.8,3.9,8.2,3.9,8.4,4.2z'/><path d='M15,2H1C0.5,2,0,2.5,0,3v10c0,0.5,0.5,1,1,1h14c0.5,0,1-0.5,1-1V3C16,2.5,15.5,2,15,2z M15,12.5 c0,0.3-0.2,0.5-0.5,0.5h-13C1.2,13,1,12.8,1,12.5v-9C1,3.2,1.2,3,1.5,3h13C14.8,3,15,3.2,15,3.5V12.5z'/></svg>") !important;
}

treechildren::-moz-tree-image(query) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important;
}

treechildren::-moz-tree-image(title, query, tagContainer),
treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/places/tag.svg") !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
}

/* calendar icon for folders grouping items by date */
treechildren::-moz-tree-image(title, query, dayContainer) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/history.svg") !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/history.svg") !important;
}

treechildren::-moz-tree-image(title, query, hostContainer),
treechildren::-moz-tree-image(title, query, folder) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' fill='blue' fill-opacity='1' xmlns='http://www.w3.org/2000/svg'><path d='M14.5 3H6.914a.5.5 0 0 1-.354-.146L5.146 1.439A1.491 1.491 0 0 0 4.086 1H1.5A1.5 1.5 0 0 0 0 2.5v11A1.5 1.5 0 0 0 1.5 15h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 3zm.5 10.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V6h14zM1 5V2.5a.5.5 0 0 1 .5-.5h2.586a.5.5 0 0 1 .354.146l1.414 1.415A1.491 1.491 0 0 0 6.914 4H14.5a.5.5 0 0 1 .5.5V5z'/><path d='M15 13.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V6h14z' fill-opacity='.2'/><path d='M1 5V2.5a.5.5 0 0 1 .5-.5h2.586a.5.5 0 0 1 .354.146l1.414 1.415A1.491 1.491 0 0 0 6.914 4H14.5a.5.5 0 0 1 .5.5V5z' fill-opacity='.1'/><path d='M15 13.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V13h14z' fill-opacity='.05'/></svg>") !important;
}

more options

Thanks again.

I'll look over the details. I installed your previous CSS and it's doing the job... plus or minus that Library folder display issue. But, that's not really in the way enough that I care.

Everything is nice and right now and visible.

more options

C'mon. Tweaking the double spacing of the menus can't be the solution. Mozilla should either switch it bach to be user friendly GUI or offer an option to set it to single or double line.

Mozilla really f*cked this one up. Ugly, unefficient, user-unfriendly. How design-blind can one be?

more options

In the current Firefox 92 release you can only reduce the menu spacing via userChrome.css. In the next Firefox 93 release (current Beta/DE) they have added support to reduce the menu spacing via "Density: Compact" on the Customize page.

Note that "Compact" is no longer present by default as a Density choice in Customize.

more options

Corel:

Just upgraded from 90 to 95.0.2 and discovered this new "feature", the double-spaced menu.

Saw your post but need some help.

My userChrome.css file doesn't have the ":root {--arrowpanel " or the menupopup entry. Does it matter where I place the code in the file?

Here's the first part of my userChrome

:root {
  --colored_menubar_background_image: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_color_toolbars: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_color_navbar: linear-gradient(#f9f9fa,#f9f9fa);
  --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa);
  --tabs_toolbar_border-tnot_normal_mode_size: 1px;
  --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color);
  --classic_squared_tabs_tab_text_color: black;
  --classic_squared_tabs_new_tab_icon_color: black;
  --classic_squared_tabs_tab_text_shadow: transparent;
  --tab-min-height_tnot: 32px;
}

:root[uidensity=compact]  {
  --tab-min-height_tnot: 28px;
}

:root[uidensity=touch] {
  --tab-min-height_tnot: 40px;
}

Where should I place your code?

Modified by cor-el

more options

@ RemySecor

You can place that code under the first :root section or just add the full code including the :root {} block.

menupopup :is(menu,menuitem) {
  margin-block:0px 0px !important; /*top bottom*/
  padding-block:0px 0px !important; /*top bottom*/
  min-height:21px !important; /*required to be able to go lower than 4px; adjust 21px-24px or none*/
}
:root {
  --arrowpanel-menuitem-margin: 0px 8px !important;
  --arrowpanel-menuitem-padding: 0px 8px !important;
}
:root {
  --colored_menubar_background_image: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_color_toolbars: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_color_navbar: linear-gradient(#f9f9fa,#f9f9fa);
  --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa);

  --tabs_toolbar_border-tnot_normal_mode_size: 1px;
  --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color);
  --classic_squared_tabs_tab_text_color: black;
  --classic_squared_tabs_new_tab_icon_color: black;
  --classic_squared_tabs_tab_text_shadow: transparent;
  --tab-min-height_tnot: 32px;
}

more options

cor-el:

THANK YOU. Works perfectly.