2037167 - Problems with menus and Windows (High) Contrast themes

Status: RESOLVED FIXED

(Firefox :: Theme, defect, P2)

Description

[3be]

Attachment: Hover over menus - Aquatic theme.mp4

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:150.0) Gecko/20100101 Firefox/150.0

Steps to reproduce:

Install Firefox, without any changes and imports, add History and Bookmarks buttons to the toolbar, make visible Menu Bar.

Choose any Windows Contrast theme.

Open different menus (App/History/...) and hover the mouse cursor over them.

Actual results:

1. Many menus have hovered items almost indistinguishable from the non-hovered items: App, History, Bookmarks, All tabs menu... That is because Firefox has incorrectly switched foreground and background colors for hovered items in these menus.

The main (top) and popup context menus have the correct hovered menu items.

2. The top and popup menus always have the black panel background with dark contrast themes and the white background with light contrast themes, even with the themes that don't have a pure black/white ButtonFace color, e.g. Dusk or Desert.

Other menus like App and History have the correct background.

3. None menu has a proper border. The App/History/... menus have a gray outline, while top and popup menus don't have any line at all.

Expected results:

1. The hovered items in App/History/... menus should be same as the items in the top and popup menus, i.e. as they are in any other standard Windows application including File Explorer. Just switch foreground and background colors for them (Highlight and HighlightText).

2. Top and popup menus should have ButtonFace color for background, just as other menus.

3. Add a distinguishable border to all menus, preferably using the ButtonBorder color (or ButtonText, which seems that is always the same). Or, it could be the CanvasText color, as it could be seen in e.g. File Explorer for a new type of menus.

Comment 1

[3be]

Attachment: Hover over menus - Desert theme.mp4

The panel background of most menus is white in this video, although it is actually #FFFAEF, most probably because of saving to .mp4.

Comment 2

[3be]

Attachment: Hover over menus - Dusk theme.mp4

Comment 3

[3be]

Attachment: Hover over menus - Night sky theme.mp4

Comment 4

[3be]

Attachment: Hover over menus - High Contrast Black theme.mp4

This video was made on Win11 with the custom created contrast theme using the colors from Win10 theme.

Comment 5

[3be]

Attachment: Hover over menus - High Contrast White theme.mp4

Again, this video was made on Win11 with the custom created contrast theme using the colors from Win10 theme.

This is the worst case, the hovered menu items are completely indistinguishable.

Comment 6

[3be]

Attachment: Hover over menus - Dusk theme - File Exolorer.mp4

Here is how menus look in File Explorer.

Comment 7

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Toolbars and Customization' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 8

[:Gijs (he/him)]

I'm kind of surprised - has this been like this for a long time? It feels like something we should have picked up on before now.

Comment 9

[Emilio Cobos Álvarez [:emilio]]

I think bug 2036938 is fixing exactly this?

Comment 10

[3be]

Attachment: Hover over menus - Firefox 136.mp4

Please notice there is not one but three bugs.

Here is a video of v136:

1. The same hovering problem with the App/History/... menus. The top/popup menus have the correct hovered items.
2. The same problem with the background color of top/popup menu panel.
3. The App/History/... menus have a white border with dark themes, but gray border with light themes. The top/popup menus have gray border with all themes. This is different than v150, but still didn't use system colors for border.

Comment 11

[3be]

Attachment: Hover over menus - Firefox 61.mp4

Here is a video of v61:

1. The App/History menus have a different background color of hovered items, it is not system color. The All tabs menu has the correct background color for hovered items using Highlight system color, just as the top and popup menus.
2. The top and popup menus have the correct ButtonFace color for the background of menu panel.
3. The App/History menus have a gray border. The All tabs menu, as well as the top and popup menus have a distinguishable border using ButtonBorder system color.

The v62 is mostly the same as v61, except the All tabs menu that has the same problems as the App/History menus.

Comment 12

[3be]

Attachment: Menus - Firefox 150 with my userChrome.mp4

Here is a video showing how menus should look alike, using the next userChrome.css:
`
@media (forced-colors) {
/* Bookmark toolbar menu */
.toolbar-menupopup {
& :is(menu, menuitem) {
&:not([disabled])[_moz-menuactive] {
color: -moz-menuhovertext !important;
background-color: -moz-menuhover !important;
}
}
}

/* Download toolbar menu */
#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover, #downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover, #downloadsListBox > richlistitem[verdict]:hover, #downloadsListBox > richlistitem.openWhenFinished:hover, .downloadsPanelFooterButton:hover {
color: -moz-menuhovertext !important;
background-color: -moz-menuhover !important;
}

/* App, History, All tabs menus */
:is(panelview .toolbarbutton-1, toolbarbutton.subviewbutton, .widget-overflow-list .toolbarbutton-1, .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton) {
&:not([disabled]):hover {
color: -moz-menuhovertext !important;
background-color: -moz-menuhover !important;
& #fxa-menu-header-title {
color: -moz-menuhovertext !important;
}
}
}

panel[type="arrow"] {
--panel-border-color: var(--arrowpanel-color) !important;
}

/* Popups */
menupopup {
--panel-background: var(--arrowpanel-background) !important;
--panel-color: var(--arrowpanel-color) !important;
--panel-border-color: var(--arrowpanel-color) !important;
--panel-border-radius: var(--arrowpanel-border-radius) !important;
appearance: none !important;
}

/* Url menu */
[breakout-extend] > .urlbar-background {
border-color: var(--arrowpanel-color) !important;
}
}
`

I have used @media (forced-colors), so it doesn't affect the non-contrast themes.

Can someone tell me why it doesn't work when I use @media (forced-colors: active) instead? The web pages with the "active" value in that media query are displayed correctly, but not when used in userChrome.css.

Comment 13

[Morgan Reschenberg [:morgan]]

setting ni? per UX meeting

Comment 14

[Natalie Stroud [:nstroud]]

[note: screen recording shows testing in 155.0a1 (2026-08-11)]

Screen recording link

Hi 3be, thank you for sharing this! Above is a screen recording showing results I get, both with the Nova pref on and off. I'm unable to replicate this - are you still getting this issue?

Thank you in advance!

Comment 15

[3be]

(In reply to Natalie Stroud [:nstroud] from comment #14)

are you still getting this issue?

I am still getting the same issues with 153.0.3. They are somewhat different with the nightly 155.0a1:
1a. App, History, All tabs menus have the proper background and foreground colors for the menu items as I suggested. However, the background of the menu items is different than the background of the menu panel, which is the same as the background of the main (top) menu and the context menus.

1b. Bookmarks menu has the same foreground/background colors as the main (top) menu and the context menus.

2. The main and context menus are still the same as before with the black background color with all dark themes.

3a. App, History, Bookmarks, All tabs menu panels have a better border color than before (although, I would prefer ButtonBorder for it instead of CanvasText color).

3b. The main and context menu panels don't have any border.

By the way, I noticed quite a wide space around the whole window next to its border, added in Nightly, that has the same color as the border itself, which is especially weird and ugly with Windows contrast themes when the program window is active. Maybe I should report it as a new issue? I just hope it will be optional when released officially.

Comment 16

[3be]

Attachment: Firefox 153 & 155a1 with wider border - Dusk theme.png

This is a screenshot with 153 and 155a1, the latter having an increased border around the whole window when it is active.

Comment 17

[3be]

Attachment: Firefox 155a1 with five different menus - Test theme.png

I realized that my previous post about 155a1 is quite a mess with some wrong observations and I will try to clarify it. As I mentioned, there are three issues related to the Firefox menus and Windows contrast themes.

1. Issue with hovered menu items

I was wrong stating that App, History and All tabs menus have the proper foreground colors for the hovered menu items. Actually, they have only the background color correct (Selected text, yellow on the screenshot), but their foreground color is the background color of Button text (ButtonFace, red on the screenshot). That includes also Search menu and probably all other menus having [type="arrow"].

The main (top) menu and the context menus have both the foreground and background colors of the hovered menu items correct (green on yellow on the screenshot).

2. Issue with colors of menu panels and non-hovered menu items

a) It seems that all menu panels have the Menu background color set by --panel-background-color: Menu, which is black with all four native Windows themes.

b) The non-hovered menu items have the inconsistent colors in different menus. The main menu, Bookmarks, Search and context menus have Menu background color for the menu items (black). App, History, All tabs and other "arrow" menus have ButtonFace color (red on the screenshot).

The foreground colors of menu items are quite inconsistent and I observed three different ones. The main menu, Bookmarks and context menus have MenuText foreground color (white on the screenshot). The Search menu has CanvasText color (cyan on the screenshot). App, History, All tabs and other "arrow" menus have ButtonText color (pink on the screenshot).

3. Issue with borders of menu panels

The main menu and the context menu panels don't have border. Other menus have border with MenuText color (white on the screenshot).

In my opinion, using Menu and MenuText colors with contrast themes should be avoided because they cannot be customized by the average users through the Settings dialog box, but only within the registry or by editing the theme files. Which could be a problem for majority of users since they can create their own themes only by editing the existing four native ones using the Settings dialog.

Also, as far as I know, the native Windows applications like File Explorer have menus with ButtonFace and some menus with Canvas background, but none of them have Menu background color.

Comment 18

[oarnesto]

Attachment: Bug 2037167 - Fix menu styles in Windows HCM r=#reusable-components-reviewers-rotation

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c5ef0d499129
https://hg.mozilla.org/integration/autoland/rev/5c04fc824367
Fix menu styles in Windows HCM r=desktop-theme-reviewers,tgiles,fchasen,emilio

Comment 20

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/5c04fc824367

Comment 21

[Dianna Smith [:diannaS]]

:oarnesto did you want to nominate this for the 158 release notes?

Comment 22

[oarnesto]

:diannaS Sure, what do I need to do on my end?

Comment 23

[Dianna Smith [:diannaS]]

Just change the relnote flag to ? and fill out the comment. I will take care of the rest. (https://wiki.mozilla.org/Release_Management/Release_Notes_Nomination#How_to_nominate_a_bug_for_release_notes_addition?)

Comment 24

[oarnesto]

Release Note Request
[Why is this notable]: Windows users using custom HCM themes were previously unable to customize menu background and menu text colors easily through the OS Settings dialog. Mapping Menu and MenuText to the appropriate value (Window and WindowText) allows this now, as well as brings visual consistency to menus in the chrome.
[Suggested wording]: Menus such as the List all tabs menu, the Settings menu, and Unified Search menu are now visually consistent in Windows HCM. The user is now able to customize menu background color and text color when creating a custom theme in Windows Settings by setting Background and Text, respectively.