1623944 - "Okay, got it" button from Search tips and search Interventions is not easily visible in dark theme

Status: RESOLVED FIXED

(Firefox :: Address Bar, defect, P2)

Description

[Brindusa Tot, Desktop QA]

Attachment: Screen Shot 2020-03-20 at 17.50.56.png

[Environment:]

Windows 10, Mac 10.13, Ubuntu 18.04
Firefox 75.0b9
Firefox Nightly 76 (03.20.2020)

[Preconditions:]

1. Create a new profile.
2. Verify that no updates have been made in the last 24h (open about:support, update folder , open folder and delete update.xml if any is listed)
3. Set profile age to be older by running the following snippet in browser console: (async function() { let { ProfileAge } = ChromeUtils.import("resource://gre/modules/ProfileAge.jsm"); let age = await ProfileAge(); age._times = { firstUse: 1368255600000, created: 1368255600000 }; await age.writeTimes(); })();
4. Set duckduckgo as default Search engine.
5. Go to customize and set dark mode.
6. Restart browser with restore session and a random youtube.com/video loaded

[Steps:]

1. Browser is opened with your custom youtube link restored.
2. Focus address bar and type duckduckgo.com

[Actual Result:]

Search tip is displayed but the button "Okay, got it" is not easily visible

[Expected Result:]

Search tip should be displayed and all the elements should be easily visible and reachable.

[Note:]

Same behavior for Search Interventions

Comment 1

[Harry Twyford]

Verdi says this is not a blocker but that we should fix it. Leaving ni? for now.

Comment 2

[Dão Gottwald [:dao]]

This looks bad enough that even if it won't block the release, we should fix asap.

Comment 3

[Drew Willcoxon :adw]

There's no guidance for dark mode buttons in the Photon design spec. Maybe we should fudge something in the meantime?

Comment 4

[Drew Willcoxon :adw]

Attachment: Bug 1623944 - Improve tip button color in dark themes and fix hover and active states.

This uses rgba(249, 249, 250, 0.24) for the tip button background in dark themes. 0.24 is the largest alpha with two significant digits that passes the WebAIM contrast check for normal text, considering that the button text color is rgb(249, 249, 250). i.e., 0.25 fails. I think it looks OK, but open to tweaks.

This patch also fixes existing problems with the hover and active states for the non-selected tip button. We've been incorrectly using primary button colors for those states even when the button isn't selected and therefore shouldn't be using primary colors. It becomes more obvious in dark mode, at least to my eye. Also the problem only shows up for intervention tips, not search tips. We should use default colors for those states when the button isn't selected and primary colors when it is selected.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f7e627a138d7
Improve tip button color in dark themes and fix hover and active states. r=dao

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/f7e627a138d7

Comment 7

[Adrian Florinescu [:aflorinescu]]

(In reply to Drew Willcoxon :adw from comment #4)

This patch also fixes existing problems with the hover and active states for the non-selected tip button. We've been incorrectly using primary button colors for those states even when the button isn't selected and therefore shouldn't be using primary colors. It becomes more obvious in dark mode, at least to my eye. Also the problem only shows up for intervention tips, not search tips. We should use default colors for those states when the button isn't selected and primary colors when it is selected.

Drew, to my eye, the tips and interventions were both affected in dark mode. With the comment 6 patch, the Interventions look fine now in dark mode, however Tips still display the reported behavior.

I'd change this bug to track only the Interventions and split the Tips to a new bug. Does that seem acceptable, or you prefer using this bug for that?

Comment 8

[Drew Willcoxon :adw]

Could you post a screenshot of what you see? I was actually wrong when I said that this doesn't apply to search tips. The reason I said that is because I was thinking of the onboarding search tip where the tip button is always selected (blue), and it's not the selected color that this bug is about but rather the unselected color (gray). But of course the redirect search tip has an unselected button.

Regardless, the fix applies to both tip types, search tips and interventions tips. I double checked just now, and they look as intended. The unselected gray color of the button is much lighter than in the screenshot in comment 0, and both the unselected and selected states look the same for both search tips and interventions.

Comment 9

[Adrian Florinescu [:aflorinescu]]

Ok, then I missinterpreted the fix. I assumed that Onboarding, Redirect tip and Interventions, should not have a different color schema under dark mode. If the blue button for Onboarding Tip is expected(please confirm), then we can mark this issue as verified.

Comment 10

[Drew Willcoxon :adw]

Attachment: Expected

Here are the expected states for selected and unselected for search tips and interventions. The selected blue color is the same in dark and light modes. The unselected gray colors are different between dark and light modes.