搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

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

  • 17 回覆
  • 2 有這個問題
  • 64 次檢視
  • 最近回覆由 cor-el

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.

附加的畫面擷圖

所有回覆 (17)

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

有幫助嗎?

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.

有幫助嗎?

問個問題

如果您還沒有帳號,您必須先 登入您的帳號 來回覆文章。請 開始一個新問題