2012701 - [HCM] Context menu HCM adjustments

Status: NEW

(Toolkit :: Themes, defect, P3)

Description

[Natalie Stroud [:nstroud]]

Attachment: Tab context menu open showing default HCM style

STR:

Please note: it is important to turn HCM on first and then open Firefox. Otherwise, you may be unable to replicate the issue. Ensure the Mozilla VPN app is open before completing these steps.

1. Turn on Night Sky in Windows HCM
2. Open Firefox Nightly
3. Open one tab (or multiple) to begin turning on splitview
4. Open tab context menu

Expected:

The menu buttons should follow the styles established in the High Contrast Mode Figma

Default: ButtonFace background color, ButtonText text color

Hover: ButtonText background color, ButtonFace text color

Active: SelectedItem background color, SelectedItemText text color

Focus: ButtonFace background color, ButtonText text color, CanvasText focus outline color

Actual:

Hover, active, and focus states for menu options all have the same styling (SelectedItem fill with SelectedItemText text)

Comment 1

[Sarah Clements [:sclements] | PTO until Sept 8th]

This is the default tab context menu, not a new implementation for split view so I'm moving this to the tabbrowser component.

I'm going to cc Jules on here as well, but likely there will be changes that can be addressed as part of tokenizing the chrome and/or Nova (Jules, please correct me if I'm wrong about this).

Comment 2

[Jules Simplicio [:jules]]

I'm pretty sure we can't exactly control the context menu because is part of the OS?

Comment 3

[Dão Gottwald [:dao]]

This is a standard context menu and the colors come from menu.css: https://searchfox.org/firefox-main/rev/036b98bf5ed3e11e8ca16a178a9357675ae15e1b/toolkit/themes/shared/menu.css#231-232

The menu buttons should follow the styles established in the High Contrast Mode Figma

Default: ButtonFace background color, ButtonText text color

Hover: ButtonText background color, ButtonFace text color

Active: SelectedItem background color, SelectedItemText text color

Focus: ButtonFace background color, ButtonText text color, CanvasText focus outline color

Regular menu items generally don't differentiate between hover and active, and don't have focused states. Could you please clarify how the hover/active color is different than what you expect?

Comment 4

[Jules Simplicio [:jules]]

Ah thank you!

Comment 5

[Natalie Stroud [:nstroud]]

Hey dao, thank you for your patience! 2011528 is blocking this bug and I've reached out to design systems about a color token that needs fixed. Once this is complete I'll add a comment in here about which tokens to use for the corresponding states

Comment 6

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:jules, could you have a look please?

For more information, please visit BugBot documentation.