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

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;}

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.

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.

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

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.

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 */
}

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)?

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;
}

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.

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.

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 :-)

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.

• https://searchfox.org/mozilla-release/source/browser/themes/shared/customizableui/panelUI.inc.css#line-1425
• border-top: 1px solid var(--panel-separator-color);

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;).

• https://searchfox.org/mozilla-release/source/browser/themes/shared/places/tree-icons.css

.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;
}

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.

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?

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.

• [/questions/1349930] New FF update alters bookmark folder
• [/questions/1350206] New Firefox Update Bookmarks Toolbar (Show more bookmarks)

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

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?

@ 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;
}

cor-el:

THANK YOU. Works perfectly.