Bug 1492943 - Part 2 - Update copy for HSTS certificate errors. r=nhnt11

Copy changes as outlined in https://docs.google.com/document/d/18mKAiSSLRTVcjJ1C9rIMQRnQ7eMwqqXPPN0xIyW6DDI/edit?ts=5bbfbfbb#

- New heading
- Slightly updated description
- Replace "More..." with "More Information"
- Remove the "Recommended" label on the return button

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

--HG--
extra : moz-landing-system : lando

browser/base/content/aboutNetError-new.xhtml

@@ -32,6 +32,7 @@
     <div id="errorContainer">
       <div id="errorPageTitlesContainer">
         <span id="ept_nssBadCert">&certerror.pagetitle2;</span>
+        <span id="ept_nssBadCert_sts">&certerror.sts.pagetitle;</span>
         <span id="ept_captivePortal">&captivePortal.title;</span>
         <span id="ept_dnsNotFound">&dnsNotFound.pageTitle;</span>
         <span id="ept_malformedURI">&malformedURI.pageTitle;</span>
@@ -60,6 +61,7 @@
         <h1 id="et_unsafeContentType">&unsafeContentType.title;</h1>
         <h1 id="et_nssFailure2">&nssFailure2.title;</h1>
         <h1 id="et_nssBadCert">&certerror.longpagetitle2;</h1>
+        <h1 id="et_nssBadCert_sts">&certerror.sts.longpagetitle;</h1>
         <h1 id="et_cspBlocked">&cspBlocked.title;</h1>
         <h1 id="et_remoteXUL">&remoteXUL.title;</h1>
         <h1 id="et_corruptedContentErrorv2">&corruptedContentErrorv2.title;</h1>
@@ -91,6 +93,7 @@
         <div id="ed_unsafeContentType">&unsafeContentType.longDesc;</div>
         <div id="ed_nssFailure2">&nssFailure2.longDesc2;</div>
         <div id="ed_nssBadCert">&certerror.introPara2;</div>
+        <div id="ed_nssBadCert_sts">&certerror.sts.introPara;</div>
         <div id="ed_cspBlocked">&cspBlocked.longDesc;</div>
         <div id="ed_remoteXUL">&remoteXUL.longDesc;</div>
         <div id="ed_corruptedContentErrorv2">&corruptedContentErrorv2.longDesc;</div>
@@ -116,6 +119,10 @@
         <div id="es_nssBadCert_SSL_ERROR_BAD_CERT_DOMAIN">&certerror.badCertDomain.whatCanYouDoAboutIt;</div>
         <div id="es_nssBadCert_SEC_ERROR_OCSP_INVALID_SIGNING_CERT">&certerror.badCertDomain.whatCanYouDoAboutIt;</div>
       </div>
+      <!-- Stores an alternative text for when we don't want to add "Recommended" to the
+           return button. This is one of many l10n atrocities in this file and should be
+           removed when we finally switch to Fluent. -->
+      <span id="stsReturnButtonText">&returnToPreviousPage.label;</span>
     </div>
 
     <!-- PAGE CONTAINER (for styling purposes only) -->

browser/base/content/aboutNetError.js

@@ -128,6 +128,10 @@ function disallowCertOverridesIfNeeded() {
   }
   if (cssClass == "badStsCert") {
     document.getElementById("badStsCertExplanation").removeAttribute("hidden");
+
+    let stsReturnButtonText = document.getElementById("stsReturnButtonText").textContent;
+    document.getElementById("returnButton").textContent = stsReturnButtonText;
+    document.getElementById("advancedPanelReturnButton").textContent = stsReturnButtonText;
   }
 }
 
@@ -152,15 +156,25 @@ function initPage() {
     err = "captivePortal";
   }
 
-  let pageTitle = document.getElementById("ept_" + err);
+  let l10nErrId = err;
+  let className = getCSSClass();
+  if (className) {
+    document.body.classList.add(className);
+  }
+
+  if (gIsCertError && className == "badStsCert") {
+    l10nErrId += "_sts";
+  }
+
+  let pageTitle = document.getElementById("ept_" + l10nErrId);
   if (pageTitle) {
     document.title = pageTitle.textContent;
   }
 
   // if it's an unknown error or there's no title or description
   // defined, get the generic message
-  var errTitle = document.getElementById("et_" + err);
-  var errDesc  = document.getElementById("ed_" + err);
+  var errTitle = document.getElementById("et_" + l10nErrId);
+  var errDesc  = document.getElementById("ed_" + l10nErrId);
   if (!errTitle || !errDesc) {
     errTitle = document.getElementById("et_generic");
     errDesc  = document.getElementById("ed_generic");
@@ -208,7 +222,6 @@ function initPage() {
   var errContainer = document.getElementById("errorContainer");
   errContainer.remove();
 
-  var className = getCSSClass();
   if (className && className != "expertBadCert") {
     // Associate a CSS class with the root of the page, if one was passed in,
     // to allow custom styling.
@@ -322,7 +335,7 @@ function initPageCaptivePortal() {
 }
 
 function initPageCertError() {
-  document.body.className = "certerror";
+  document.body.classList.add("certerror");
   for (let host of document.querySelectorAll(".hostname")) {
     host.textContent = document.location.hostname;
   }

browser/base/content/test/static/browser_misused_characters_in_strings.js

@@ -16,6 +16,10 @@ let gWhitelist = [{
     file: "netError.dtd",
     key: "certerror.introPara2",
     type: "single-quote",
+  }, {
+    file: "netError.dtd",
+    key: "certerror.sts.introPara",
+    type: "single-quote",
   }, {
     file: "netError.dtd",
     key: "certerror.expiredCert.whatCanYouDoAboutIt2",

browser/locales/en-US/chrome/overrides/netError.dtd

@@ -150,11 +150,13 @@
 
 <!ENTITY certerror.longpagetitle1 "Your connection is not secure">
 <!ENTITY certerror.longpagetitle2 "Warning: Potential Security Risk Ahead">
+<!ENTITY certerror.sts.longpagetitle  "Did Not Connect: Potential Security Issue">
 <!-- Localization note (certerror.introPara, certerror.introPara2) - The text content of the span tag
 will be replaced at runtime with the name of the server to which the user
 was trying to connect. -->
 <!ENTITY certerror.introPara "The owner of <span class='hostname'/> has configured their website improperly.  To protect your information from being stolen, &brandShortName; has not connected to this website.">
 <!ENTITY certerror.introPara2 "&brandShortName; detected a potential security threat and did not continue to <span class='hostname'/>. If you visit this site, attackers could try to steal information like your passwords, emails, or credit card details.">
+<!ENTITY certerror.sts.introPara "&brandShortName; detected a potential security threat and did not continue to <span class='hostname'/> because this website requires a secure connection.">
 
 <!ENTITY certerror.expiredCert.secondPara "This issue is most likely because your computer clock is set to the wrong time, which would prevent &brandShortName; from connecting securely.">
 
@@ -214,6 +216,7 @@ was trying to connect. -->
 
 <!ENTITY certerror.pagetitle1  "Insecure Connection">
 <!ENTITY certerror.pagetitle2  "Warning: Potential Security Risk Ahead">
+<!ENTITY certerror.sts.pagetitle  "Did Not Connect: Potential Security Issue">
 <!ENTITY certerror.whatShouldIDo.badStsCertExplanation "This site uses HTTP
 Strict Transport Security (HSTS) to specify that &brandShortName; may only connect
 to it securely. As a result, it is not possible to add an exception for this

browser/themes/shared/aboutNetError-new.css

@@ -98,7 +98,7 @@ body:not(.clockSkewError) #advancedPanelErrorTryAgain {
   display: none;
 }
 
-body:not(.clockSkewError) #moreInformationButton {
+body:not(:-moz-any(.clockSkewError,.badStsCert)) #moreInformationButton {
   display: none;
 }
 
@@ -106,7 +106,7 @@ body:not(.clockSkewError) #moreInformationButton {
   margin-inline-start: 0;
 }
 
-body:not(.neterror):not(.clockSkewError) #advancedButton {
+body:not(:-moz-any(.clockSkewError,.badStsCert,.neterror)) #advancedButton {
   display: block;
 }