1753076 - Search tip button incorrectly styled in HCM

Status: RESOLVED WORKSFORME

(Toolkit :: Themes, defect)

Description

[Morgan Reschenberg [:morgan]]

STR:

1. Enable HCM (windows or macOS will reproduce this)
2. In about:config, set browser.urlbar.searchTips.test.ignoreShowLimits to true
3. Navigate to about:newtab

Expected:
A tip is shown with a dismiss button whose styling matches the OS styling for high/increase contrast buttons

Actual:
A tip is shown with a dismiss button whose styling matches regular ff styling

We should use a primary button here.

Comment 1

[Morgan Reschenberg [:morgan]]

Attachment: macOS increase contrast example

Comment 2

[Morgan Reschenberg [:morgan]]

Attachment: windows 11 HCM example

Comment 3

[Morgan Reschenberg [:morgan]]

Attachment: desired macOS styling (primary)

Comment 4

[Morgan Reschenberg [:morgan]]

Attachment: desired windows styling (primary)

Comment 5

[Anna Yeddi [:ayeddi] ❌ On leave till May 7 ❌]

Attachment: Bug 1753076 - Update HCM presentation, add HCM focus and hover styling to the Search tip button. r=morgan

Comment 6

[Anna Yeddi [:ayeddi] ❌ On leave till May 7 ❌]

The patch needs testing on Windows, it was tested on MacOS 15.1 with OS-powered HCM (System Preferences > Accessibility > Display > Increase contrast)

Comment 7

[Anna Yeddi [:ayeddi] ❌ On leave till May 7 ❌]

Attachment: MacOS in HCM - Search tip with the patch D137918 (nightly dark).png

Comment 8

[Release mgmt bot [:suhaib / :marco/ :calixte]]

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

For more information, please visit auto_nag documentation.

Comment 9

[Anna Yeddi [:ayeddi] ❌ On leave till May 7 ❌]

Attachment: Win-HCM-Got it.png

After the global styling updates, the colors used by the primary button are the following:

• Windows OS with HCM enabled: AccentColor and AccentColorText (as expected)
• macOS with Increased Contrast enabled: primary color of Firefox.
  Focus outlines are appropriate to the color scheme of the HCM.

:morgan, shall we abandon the patch created before global updates and close the ticket?

Comment 10

[Anna Yeddi [:ayeddi] ❌ On leave till May 7 ❌]

Attachment: Mac-HCM-Got it.png

Comment 11

[Morgan Reschenberg [:morgan]]

(In reply to Anna Yeddi [:ayeddi] from comment #9)

Created attachment 9290515 [details]
Win-HCM-Got it.png

After the global styling updates, the colors used by the primary button are the following:

• Windows OS with HCM enabled: AccentColor and AccentColorText (as expected)
• macOS with Increased Contrast enabled: primary color of Firefox.
  Focus outlines are appropriate to the color scheme of the HCM.

:morgan, shall we abandon the patch created before global updates and close the ticket?

I think this behaviour fine for now, but we should revisit (in combination with our design systems team) what our expectations are for primary vs. secondary buttons. What we're doing now (using system colors) is more correct than what we were doing before (using FF colors) but I think we can do better.
It seems like, in some cases, we use ButtonFace and the foreground and ButtonText as the background for primary buttons, which is problematic given primary and secondary buttons often appear side-by-side, and inverting the styling is our current hover-behaviour guidance.
we should decide how to incorperate SelectedItem/SelectedItemText and file a bug to convert our buttons and other form controls in the base form-controls css file.
Let's discuss this in our design systems meeting next week :)

Comment 12

[Morgan Reschenberg [:morgan]]

Resolved to use selected item colors for hover styling, button colors for non-hover styling. This is in order to keep primary and secondary buttons differentiable across states. :ayeddi, could you file a follow-up bug to this about converting our primary and secondary button hover styles to use selected item colors?
I think this bug can be marked works-for-me, since the other styling changes fixed the issue this was initially filed to address.

Comment 13

[Anna Yeddi [:ayeddi] ❌ On leave till May 7 ❌]

(In reply to Morgan Reschenberg [:morgan] from comment #12)

Resolved to use selected item colors for hover styling, button colors for non-hover styling. This is in order to keep primary and secondary buttons differentiable across states. :ayeddi, could you file a follow-up bug to this about converting our primary and secondary button hover styles to use selected item colors?
I think this bug can be marked works-for-me, since the other styling changes fixed the issue this was initially filed to address.

Done (bug 1787930) and done. Thank you!