Bug 2061552 - Add preference to hide the neterror illustrations. r=desktop-theme-reviewers,kcochrane

The pref defaults to true. When it is false, net-error-card omits the
illustration container, and the card shrinks to its widest text line,
so the text stays visually centered instead of sitting left of center.

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

Author: jporter-dev

browser/app/profile/firefox.js

@@ -1447,6 +1447,9 @@ pref("mousewheel.with_meta.action", 1);
 pref("browser.xul.error_pages.expert_bad_cert", false);
 pref("browser.xul.error_pages.show_safe_browsing_details_on_load", false);
 
+// Deployments that do not want the artwork on error pages can turn this off
+pref("browser.netError.illustration.enabled", true);
+
 // Enable the one-click search call-to-action on the online dnsNotFound error
 // page. On in Nightly, off elsewhere until a Nimbus rollout (bug 2055718).
 #ifdef NIGHTLY_BUILD

browser/base/content/test/about/browser_aboutNetError_feltprivacy_illustrations.js

@@ -113,3 +113,61 @@ add_task(async function test_securityError_illustration() {
 
   BrowserTestUtils.removeTab(tab);
 });
+
+add_task(async function test_illustrationPrefOff_securityError() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.netError.illustration.enabled", false]],
+  });
+
+  const tab = await openErrorPage("https://expired.example.com/");
+  const browser = tab.linkedBrowser;
+
+  await SpecialPowers.spawn(browser, [], async () => {
+    const netErrorCard = content.document.querySelector("net-error-card");
+    await netErrorCard.wrappedJSObject.getUpdateComplete();
+    Assert.ok(
+      !netErrorCard.shadowRoot.querySelector(".img-container"),
+      "no illustration container when the pref is off"
+    );
+    Assert.ok(
+      netErrorCard.shadowRoot.querySelector(".container"),
+      "error content still renders without the illustration"
+    );
+  });
+
+  BrowserTestUtils.removeTab(tab);
+  await SpecialPowers.popPrefEnv();
+});
+
+add_task(async function test_illustrationPrefOff_noConnection() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.netError.illustration.enabled", false]],
+  });
+
+  let browser, tab;
+  await BrowserTestUtils.openNewForegroundTab(
+    gBrowser,
+    () => {
+      gBrowser.selectedTab = BrowserTestUtils.addTab(
+        gBrowser,
+        SERVER_ERROR_PAGE
+      );
+      browser = gBrowser.selectedBrowser;
+      tab = gBrowser.selectedTab;
+    },
+    false
+  );
+  await BrowserTestUtils.waitForErrorPage(browser);
+
+  await SpecialPowers.spawn(browser, [], async () => {
+    const netErrorCard = content.document.querySelector("net-error-card");
+    await netErrorCard.wrappedJSObject.getUpdateComplete();
+    Assert.ok(
+      !netErrorCard.shadowRoot.querySelector(".img-container"),
+      "no illustration container when the pref is off"
+    );
+  });
+
+  BrowserTestUtils.removeTab(tab);
+  await SpecialPowers.popPrefEnv();
+});

toolkit/content/net-error-card.mjs

@@ -45,6 +45,10 @@ const SEARCH_CTA_ENABLED = RPMGetBoolPref(
   "browser.netError.searchCTA.enabled",
   false
 );
+const ILLUSTRATION_ENABLED = RPMGetBoolPref(
+  "browser.netError.illustration.enabled",
+  true
+);
 // The only value of the parent's action vocabulary this page has to recognize,
 // meaning no CTA. It is duplicated rather than imported because the vocabulary
 // lives in URLKeywordAnalyzer, which is chrome-only, and this module runs in the
@@ -1421,9 +1425,11 @@ export class NetErrorCard extends MozLitElement {
         aria-labelledby="error-title"
         aria-describedby="error-intro whatCanYouDo"
       >
-        <div class="img-container">
-          <img src=${src} class=${ifDefined(className)} alt=${alt} />
-        </div>
+        ${ILLUSTRATION_ENABLED
+          ? html`<div class="img-container">
+              <img src=${src} class=${ifDefined(className)} alt=${alt} />
+            </div>`
+          : null}
         <div class="container">${this.containerContentTemplate(title)}</div>
       </article>`;
   }

toolkit/modules/RemotePageAccessManager.sys.mjs

@@ -56,6 +56,7 @@ export let RemotePageAccessManager = {
         // CTA itself only ever renders on about:neterror. A denied read throws,
         // which would leave every cert error page blank.
         "browser.netError.searchCTA.enabled",
+        "browser.netError.illustration.enabled",
       ],
       RPMGetIntPref: [
         "security.dialog_enable_delay",
@@ -141,6 +142,7 @@ export let RemotePageAccessManager = {
         "browser.ipProtection.userEnabled",
         "network.sslkeylog_warning",
         "browser.netError.searchCTA.enabled",
+        "browser.netError.illustration.enabled",
       ],
       RPMGetHostForDisplay: ["*"],
       RPMGetInnermostAsciiHost: ["*"],

toolkit/themes/shared/aboutNetError.css

@@ -271,6 +271,16 @@ button:disabled {
       width: 100%;
     }
 
+    /* Without the illustration, shrink the text to its widest line and center
+       it, so short messages do not sit left of center in the full-width card. */
+    @media not -moz-pref("browser.netError.illustration.enabled") {
+      justify-content: center;
+
+      > .container {
+        width: fit-content;
+      }
+    }
+
     /* Stack the illustration above the text, both left aligned. */
     @media (max-width: 640px) {
       flex-direction: column;