tor-browser

commit ee38a798b31b620a1414e4f1d89d11f6db2d1b8d
parent 5bcf4a222fdfa87ace08a91cf264c1a4b658dc81
Author: Jack Brown <jbrown@mozilla.com>
Date:   Wed,  7 Jan 2026 05:20:52 +0000

Bug 1992168 - Visuals not matching Figma design for network error page - r=niklas,desktop-theme-reviewers,dao

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

Diffstat:
M
toolkit/content/net-error-card.mjs
 | 
72
+++++++++++++++++++++++++++++++++++-------------------------------------
M
toolkit/themes/shared/aboutNetError.css
 | 
18
++++++++++++++++++

2 files changed, 53 insertions(+), 37 deletions(-)
diff --git a/toolkit/content/net-error-card.mjs b/toolkit/content/net-error-card.mjs
@@ -265,7 +265,7 @@ export class NetErrorCard extends MozLitElement {
         ></p>`;
       case "SEC_ERROR_EXPIRED_ISSUER_CERTIFICATE":
         return html`<p
-          data-l10n-id="fp-certerror-expired-intro"
+          data-l10n-id="fp-certerror-expired-into"
           data-l10n-args='{"hostname": "${this.hostname}"}'
         ></p>`;
       case "SSL_ERROR_NO_CYPHER_OVERLAP":
@@ -519,29 +519,36 @@ export class NetErrorCard extends MozLitElement {
       viewCert,
       viewDateTime,
     } = params;
-    return html`<p>
+    return html`<div>
         ${whyDangerousL10nId
-          ? html`<strong
-                data-l10n-id="fp-certerror-why-site-dangerous"
-              ></strong>
-              <span
+          ? html`<h3 data-l10n-id="fp-certerror-why-site-dangerous"></h3>
+              <p
                 id="fp-why-site-dangerous"
                 data-l10n-id=${whyDangerousL10nId}
                 data-l10n-args=${JSON.stringify(whyDangerousL10nArgs)}
-              ></span>`
+              ></p>`
           : null}
-      </p>
+      </div>
       ${whatCanYouDoL10nId
-        ? html`<p>
-            <strong data-l10n-id="fp-certerror-what-can-you-do"></strong>
-            <span
+        ? html`<div>
+            <h3 data-l10n-id="fp-certerror-what-can-you-do"></h3>
+            <p
               id="whatCanYouDo"
               data-l10n-id=${whatCanYouDoL10nId}
               data-l10n-args=${JSON.stringify(whatCanYouDoL10nArgs)}
-            ></span>
-          </p>`
+            ></p>
+          </div>`
         : null}
       ${importantNote ? html`<p data-l10n-id=${importantNote}></p>` : null}
+      ${viewCert
+        ? html`<p>
+            <a
+              id="viewCertificate"
+              data-l10n-id="fp-certerror-view-certificate-link"
+              href="javascript:void(0)"
+            ></a>
+          </p>`
+        : null}
       ${learnMoreL10nId
         ? html`<p>
             <a
@@ -555,15 +562,6 @@ export class NetErrorCard extends MozLitElement {
             ></a>
           </p>`
         : null}
-      ${viewCert
-        ? html`<p>
-            <a
-              id="viewCertificate"
-              data-l10n-id="fp-certerror-view-certificate-link"
-              href="javascript:void(0)"
-            ></a>
-          </p>`
-        : null}
       ${gIsCertError
         ? html`<p>
             <a
@@ -680,32 +678,32 @@ export class NetErrorCard extends MozLitElement {
 
     const content = html`
       ${whyDangerousL10nId
-        ? html`<p>
-            <strong data-l10n-id="fp-certerror-why-site-dangerous"></strong>
-            <span
+        ? html`<div>
+            <h3 data-l10n-id="fp-certerror-why-site-dangerous"></h3>
+            <p
               data-l10n-id=${whyDangerousL10nId}
               data-l10n-args=${JSON.stringify(whyDangerousL10nArgs)}
-            ></span>
-          </p>`
+            ></p>
+          </div>`
         : null}
       ${whatCanYouDoL10nId
-        ? html`<p>
-            <strong data-l10n-id="fp-certerror-what-can-you-do"></strong>
-            <span
+        ? html`<div>
+            <h3 data-l10n-id="fp-certerror-what-can-you-do"></h3>
+            <p
               id="whatCanYouDo"
               data-l10n-id=${whatCanYouDoL10nId}
               data-l10n-args=${JSON.stringify(whatCanYouDoL10nArgs)}
-            ></span>
-          </p>`
+            ></p>
+          </div>`
         : null}
       ${whyDidThisHappenL10nId
-        ? html`<p>
-            <strong data-l10n-id="fp-certerror-what-can-you-do"></strong>
-            <span
+        ? html`<div>
+            <h3 data-l10n-id="fp-certerror-what-can-you-do"></h3>
+            <p
               data-l10n-id=${whyDidThisHappenL10nId}
               data-l10n-args=${JSON.stringify(whyDidThisHappenL10nArgs)}
-            ></span>
-          </p>`
+            ></p>
+          </div>`
         : null}
       ${learnMoreL10nId
         ? html`<p>
diff --git a/toolkit/themes/shared/aboutNetError.css b/toolkit/themes/shared/aboutNetError.css
@@ -104,6 +104,19 @@ button:disabled {
   max-width: var(--in-content-container-max-width);
 }
 
+.custom-net-error-card h3,
+.advanced-container h3 {
+  margin-block-end: var(--space-small);
+
+  & + p {
+    margin-block-start: var(--space-small);
+  }
+}
+
+.custom-net-error-card h1 + p:last-of-type {
+  margin-block-end: var(--space-xxlarge);
+}
+
 #errorCode {
   white-space: nowrap;
 }
@@ -154,6 +167,10 @@ button:disabled {
   margin-top: 10px;
 }
 
+#prefChangeContainer {
+  margin-block-end: var(--space-large);
+}
+
 /* Felt Privacy v1 LARGER SCREEN! */
 /* stylelint-disable-next-line media-query-no-invalid */
 @media -moz-pref("security.certerrors.felt-privacy-v1") {
@@ -165,6 +182,7 @@ button:disabled {
     width: min(100%, 720px);
     min-width: min-content;
     margin-top: 150px;
+    padding-block-end: var(--space-xxlarge);
   }
 
   .felt-privacy-container {