[Affected versions]:

• Firefox Beta 89.0b1 - Build ID: 20210419195043
• Firefox Nightly 90.0a1 - Build ID: 20210420095122

[Affected Platforms]:

• Windows 10 x64

[Prerequisites]:

• Have a new Firefox profile.
• Have the "High Contrast" system mode activated.

[Steps to reproduce]:

1. Open the browser with the profile from the prerequisites.
2. Click the "Not now" button from the first slide.
3. Click the "Not now" button from the second slide.
4. Observe the elements from the "Themes" Onboarding slide.

[Expected result]:

• All the elements are correctly displayed and respect the "High Contrast" mode.

[Actual result]:

• The theme icons are not visible.

[Additional Notes]:

• This issue is not reproducible with the "Themes" modal from the existing/updating users Onboarding.
• Attached a screenshot of the issue.

The old behavior uses a background image url while the proton behavior uses a background (image) gradient. Looks like only url() are preserved for high contrast.

Added svg versions of the theme swatches to replace gradient versions.

Backed out changeset 69811ad1a854 (bug 1706366) for Browser-chrome failures in browser/components/customizableui/test/browser_1007336_lwthemes_in_customize_mode.js. CLOSED TREE

Log:
https://treeherder.mozilla.org/logviewer?job_id=338253393&repo=autoland&lineNumber=5170

Push with failures:
https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&revision=69811ad1a8541d5eed13dbe44cd50c94778facc4

Backout:
https://hg.mozilla.org/integration/autoland/rev/3505125fe5715617ff323358156f229f42253fc3

https://hg.mozilla.org/mozilla-central/rev/68a3d2c973a4

Comment on attachment 9219042 [details]
Bug 1706366 - Update builtin theme icons to reuse on about:welcome, customize and upgrade dialog r=emcminn a=pascalc

Beta/Release Uplift Approval Request

• User impact if declined: MR1/Proton about:welcome and upgrade dialog show empty circles in high contrast mode
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: 1. turn on high contrast mode

2. open about:welcome
3. move to theme screen and see icons

• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Primarily updating css to use updated builtin theme icons
• String changes made/needed: nonee

Comment on attachment 9219042 [details]
Bug 1706366 - Update builtin theme icons to reuse on about:welcome, customize and upgrade dialog r=emcminn a=pascalc

Low risk proton uplift, approved for 89 beta 8, thanks.

https://hg.mozilla.org/releases/mozilla-beta/rev/9108df804a8b

Backed out from beta for causing bc failures on browser_1007336_lwthemes_in_customize_mode.js

Push with failures: https://treeherder.mozilla.org/jobs?repo=mozilla-beta&group_state=expanded&resultStatus=testfailed%2Cbusted%2Cexception%2Cusercancel&revision=f0b1759e46ef165705f6180c1ec8de097ee133b9&test_paths=browser%2Fcomponents%2Fcustomizableui%2Ftest

Failure log: https://treeherder.mozilla.org/logviewer?job_id=338638651&repo=mozilla-beta

Backout link: https://hg.mozilla.org/releases/mozilla-beta/rev/c86a0651209309f2f6ea06c3d792b7fc5fddda45

I have verified that this issue is no longer reproducible with the latest Firefox Nightly (90.0a1 Build ID - 20210504092024) installed on Windows 10 x64. Now I can confirm that the theme icons from the "Themes" slide of the Onboarding page are visible in Windows "High Contrast" mode.

Test failure on mozilla-beta but not on mozilla-central was because bug 1702116 landed on m-c and wontfix for beta, so I updated the patch for mozilla-beta copying over 1 line fix.

https://hg.mozilla.org/releases/mozilla-beta/rev/375daa7c32d4

Confirming here that we (UX and PM) want this uplifted for MR1 to Beta.

I have verified that this issue is no longer reproducible with the latest Firefox Beta (89.0b9 Build ID - 20210506185706) installed on Windows 10 x64. Now I can confirm that the theme icons from the "Themes" slide of the Onboarding page are visible in Windows "High Contrast" mode.