Bug 1866120 - do not use color-background-success for the Report Broken Site confirmation screen if @media(prefers-contrast); r=Gijs,desktop-theme-reviewers,Itiel

Differential Revision: https://phabricator.services.mozilla.com/D195536

browser/components/reportbrokensite/test/browser/browser.toml

@@ -20,3 +20,5 @@ support-files = [
 ["browser_back_buttons.js"]
 
 ["browser_tab_switch_handling.js"]
+
+["browser_prefers_contrast.js"]

browser/components/reportbrokensite/test/browser/browser_prefers_contrast.js

@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/* Test that the background color of the "report sent"
+ * view is not green in non-default contrast modes.
+ */
+
+"use strict";
+
+add_common_setup();
+
+const HIGH_CONTRAST_MODE_OFF = [
+  [PREFS.USE_ACCESSIBILITY_THEME, 0],
+  [PREFS.PREFERS_CONTRAST_ENABLED, true],
+];
+
+const HIGH_CONTRAST_MODE_ON = [
+  [PREFS.USE_ACCESSIBILITY_THEME, 1],
+  [PREFS.PREFERS_CONTRAST_ENABLED, true],
+];
+
+add_task(async function testReportSentViewBGColor() {
+  ensureReportBrokenSitePreffedOn();
+  ensureReasonDisabled();
+
+  await BrowserTestUtils.withNewTab(
+    REPORTABLE_PAGE_URL,
+    async function (browser) {
+      const { defaultView } = browser.ownerGlobal.document;
+
+      const menu = AppMenu();
+
+      await SpecialPowers.pushPrefEnv({ set: HIGH_CONTRAST_MODE_OFF });
+      const rbs = await menu.openReportBrokenSite();
+      const { mainView, sentView } = rbs;
+      mainView.style.backgroundColor = "var(--color-background-success)";
+      const expectedReportSentBGColor =
+        defaultView.getComputedStyle(mainView).backgroundColor;
+      mainView.style.backgroundColor = "";
+      const expectedPrefersReducedBGColor =
+        defaultView.getComputedStyle(mainView).backgroundColor;
+
+      await rbs.clickSend();
+      is(
+        defaultView.getComputedStyle(sentView).backgroundColor,
+        expectedReportSentBGColor,
+        "Using green bgcolor when not prefers-contrast"
+      );
+      await rbs.clickOkay();
+
+      await SpecialPowers.pushPrefEnv({ set: HIGH_CONTRAST_MODE_ON });
+      await menu.openReportBrokenSite();
+      await rbs.clickSend();
+      is(
+        defaultView.getComputedStyle(sentView).backgroundColor,
+        expectedPrefersReducedBGColor,
+        "Using default bgcolor when prefers-contrast"
+      );
+      await rbs.clickOkay();
+    }
+  );
+});

browser/components/reportbrokensite/test/browser/head.js

@@ -21,6 +21,8 @@ const PREFS = {
   SEND_MORE_INFO: "ui.new-webcompat-reporter.send-more-info-link",
   NEW_REPORT_ENDPOINT: "ui.new-webcompat-reporter.new-report-endpoint",
   REPORT_SITE_ISSUE_ENABLED: "extensions.webcompat-reporter.enabled",
+  PREFERS_CONTRAST_ENABLED: "layout.css.prefers-contrast.enabled",
+  USE_ACCESSIBILITY_THEME: "ui.useAccessibilityTheme",
 };
 
 function add_common_setup() {

browser/themes/shared/customizableui/panelUI-shared.css

@@ -2083,7 +2083,9 @@ panelview:not([mainview]) #PanelUI-whatsNew-title {
   }
 
   &.sent-view {
-    background-color: var(--color-background-success);
+    @media not (prefers-contrast) {
+      background-color: var(--color-background-success);
+    }
 
     > .panel-header {
       --arrowpanel-header-additional-element-width: 16px;