Closed Bug 1623944 Opened 7 months ago Closed 7 months ago

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

Categories

(Firefox :: Address Bar, defect, P2)

75 Branch
defect
Points:
2

Tracking

()

RESOLVED FIXED
Firefox 76
Iteration:
76.2 - Mar 23 - Apr 5
Tracking Status
firefox74 --- disabled
firefox75 --- wontfix
firefox76 --- fixed

People

(Reporter: brindusat, Assigned: adw)

References

(Blocks 2 open bugs)

Details

Attachments

(3 files)

[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

Summary: "Okay, got it" button from search tips is not easily visible → "Okay, got it" button from Search tips and search Interventions is not easily visible
Flags: needinfo?(mverdi)
Keywords: blocked-ux

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

Priority: -- → P3
Summary: "Okay, got it" button from Search tips and search Interventions is not easily visible → "Okay, got it" button from Search tips and search Interventions is not easily visible in dark theme
See Also: → 1624300

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

Blocks: 1624300
Priority: P3 → P2
See Also: 1624300
No longer blocks: 1624300
See Also: → 1624300

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

Assignee: nobody → adw
Status: NEW → ASSIGNED
Iteration: --- → 76.2 - Mar 23 - Apr 5
Points: --- → 2

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.

Keywords: blocked-ux
Pushed by dgottwald@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/f7e627a138d7
Improve tip button color in dark themes and fix hover and active states. r=dao
Flags: needinfo?(mverdi)
Status: ASSIGNED → RESOLVED
Closed: 7 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 76

(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?

Flags: needinfo?(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.

Flags: needinfo?(adw)

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.

Flags: needinfo?(adw)
Attached image 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.

Flags: needinfo?(adw)
Blocks: 1618892
You need to log in before you can comment on or make changes to this bug.