Bug 1476509 - Implement a new clock skew error page r=flod,johannh

MozReview-Commit-ID: 5WmgrxUcSZ6

--HG--
extra : rebase_source : 340fd6b1468e4b0ecd80a7eea2233a8d5499da40

browser/base/content/aboutNetError-new.xhtml

@@ -66,6 +66,7 @@
         <h1 id="et_sslv3Used">&sslv3Used.title;</h1>
         <h1 id="et_inadequateSecurityError">&inadequateSecurityError.title;</h1>
         <h1 id="et_blockedByPolicy">&blockedByPolicy.title;</h1>
+        <h1 id="et_clockSkewError">&clockSkewError.title;</h1>
       </div>
       <div id="errorDescriptionsContainer">
         <div id="ed_generic">&generic.longDesc;</div>
@@ -96,6 +97,7 @@
         <div id="ed_sslv3Used">&sslv3Used.longDesc2;</div>
         <div id="ed_inadequateSecurityError">&inadequateSecurityError.longDesc;</div>
         <div id="ed_blockedByPolicy"></div>
+        <div id="ed_clockSkewError">&clockSkewError.longDesc;</div>
       </div>
       <div id="errorDescriptions2Container">
           <div id="ed2_nssBadCert_SEC_ERROR_EXPIRED_CERTIFICATE">&certerror.expiredCert.secondPara;</div>
@@ -105,12 +107,12 @@
       </div>
       <div id="whatCanYouDoAboutItContainer">
         <div id="es_nssBadCert_SEC_ERROR_UNKNOWN_ISSUER">&certerror.unknownIssuer.whatCanYouDoAboutIt;</div>
-        <div id="es_nssBadCert_SEC_ERROR_EXPIRED_CERTIFICATE">&certerror.expiredCert.whatCanYouDoAboutIt;</div>
-        <div id="es_nssBadCert_SEC_ERROR_EXPIRED_ISSUER_CERTIFICATE">&certerror.expiredCert.whatCanYouDoAboutIt;</div>
-        <div id="es_nssBadCert_SEC_ERROR_OCSP_FUTURE_RESPONSE">&certerror.expiredCert.whatCanYouDoAboutIt;</div>
-        <div id="es_nssBadCert_SEC_ERROR_OCSP_OLD_RESPONSE">&certerror.expiredCert.whatCanYouDoAboutIt;</div>
-        <div id="es_nssBadCert_MOZILLA_PKIX_ERROR_NOT_YET_VALID_CERTIFICATE">&certerror.expiredCert.whatCanYouDoAboutIt;</div>
-        <div id="es_nssBadCert_MOZILLA_PKIX_ERROR_NOT_YET_VALID_ISSUER_CERTIFICATE">&certerror.expiredCert.whatCanYouDoAboutIt;</div>
+        <div id="es_nssBadCert_SEC_ERROR_EXPIRED_CERTIFICATE">&certerror.expiredCert.whatCanYouDoAboutIt2;</div>
+        <div id="es_nssBadCert_SEC_ERROR_EXPIRED_ISSUER_CERTIFICATE">&certerror.expiredCert.whatCanYouDoAboutIt2;</div>
+        <div id="es_nssBadCert_SEC_ERROR_OCSP_FUTURE_RESPONSE">&certerror.expiredCert.whatCanYouDoAboutIt2;</div>
+        <div id="es_nssBadCert_SEC_ERROR_OCSP_OLD_RESPONSE">&certerror.expiredCert.whatCanYouDoAboutIt2;</div>
+        <div id="es_nssBadCert_MOZILLA_PKIX_ERROR_NOT_YET_VALID_CERTIFICATE">&certerror.expiredCert.whatCanYouDoAboutIt2;</div>
+        <div id="es_nssBadCert_MOZILLA_PKIX_ERROR_NOT_YET_VALID_ISSUER_CERTIFICATE">&certerror.expiredCert.whatCanYouDoAboutIt2;</div>
         <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>
@@ -176,7 +178,9 @@
         <div id="certErrorAndCaptivePortalButtonContainer" class="button-container">
           <button id="returnButton" class="primary" autocomplete="off">&returnToPreviousPage1.label;</button>
           <button id="openPortalLoginPageButton" class="primary" autocomplete="off">&openPortalLoginPage.label2;</button>
+          <button id="errorTryAgain" class="primary" autocomplete="off">&retry.label;</button>
           <button id="advancedButton" autocomplete="off">&continue1.label;</button>
+          <button id="moreInformationButton" autocomplete="off">&moreInformation.label;</button>
         </div>
       </div>
 
@@ -189,6 +193,7 @@
           <p id="badCertTechnicalInfo"/>
           <div id="advancedPanelButtonContainer" class="button-container">
             <button id="advancedPanelReturnButton" class="primary" autocomplete="off">&returnToPreviousPage1.label;</button>
+            <button id="advancedPanelErrorTryAgain" class="primary" autocomplete="off">&retry.label;</button>
             <div class="exceptionDialogButtonContainer">
               <button id="exceptionDialogButton">&securityOverride.exceptionButtonLabel;</button>
             </div>

browser/base/content/aboutNetError.js

@@ -82,8 +82,10 @@ function setupAdvancedButton() {
   }
 
   // Register click handler for the weakCryptoAdvancedPanel
-  document.getElementById("advancedButton")
-          .addEventListener("click", function togglePanelVisibility() {
+  document.getElementById("advancedButton").addEventListener("click", togglePanelVisibility);
+  document.getElementById("moreInformationButton").addEventListener("click", togglePanelVisibility);
+
+  function togglePanelVisibility() {
     toggleDisplay(panel);
     if (gIsCertError) {
       // Toggling the advanced panel must ensure that the debugging
@@ -98,7 +100,7 @@ function setupAdvancedButton() {
       var event = new CustomEvent("AboutNetErrorUIExpanded", {bubbles: true});
       document.dispatchEvent(event);
     }
-  });
+  }
 
   if (!gIsCertError) {
     return;
@@ -377,6 +379,11 @@ errorTryAgain.addEventListener("click", function() {
   retryThis(this);
 });
 
+let advancedPanelErrorTryAgain = document.getElementById("advancedPanelErrorTryAgain");
+advancedPanelErrorTryAgain.addEventListener("click", function() {
+  retryThis(this);
+});
+
 // Note: It is important to run the script this way, instead of using
 // an onload handler. This is because error pages are loaded as
 // LOAD_BACKGROUND, which means that onload handlers will not be executed.

browser/base/content/aboutNetError.xhtml

@@ -150,6 +150,7 @@
           <button id="returnButton" class="primary" autocomplete="off">&returnToPreviousPage.label;</button>
           <button id="openPortalLoginPageButton" class="primary" autocomplete="off">&openPortalLoginPage.label2;</button>
           <button id="advancedButton" autocomplete="off">&advanced.label;</button>
+          <button id="moreInformationButton" autocomplete="off">&moreInformation.label;</button>
         </div>
       </div>
 
@@ -160,6 +161,9 @@
       <div id="advancedPanelContainer">
         <div id="badCertAdvancedPanel" class="advanced-panel">
           <p id="badCertTechnicalInfo"/>
+          <div id="advancedPanelButtonContainer" class="button-container">
+            <button id="advancedPanelErrorTryAgain" class="primary" autocomplete="off">&retry.label;</button>
+          </div>
           <div class="exceptionDialogButtonContainer">
             <button id="exceptionDialogButton">&securityOverride.exceptionButtonLabel;</button>
           </div>

browser/base/content/browser.js

@@ -3009,6 +3009,7 @@ var BrowserOnClick = {
         break;
 
       case "advancedButton":
+      case "moreInformationButton":
         if (isTopFrame) {
           secHistogram.add(Ci.nsISecurityUITelemetry.WARNING_BAD_CERT_TOP_UNDERSTAND_RISKS);
         }

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

@@ -18,7 +18,7 @@ let gWhitelist = [{
     type: "single-quote"
   }, {
     file: "netError.dtd",
-    key: "certerror.expiredCert.whatCanYouDoAboutIt",
+    key: "certerror.expiredCert.whatCanYouDoAboutIt2",
     type: "single-quote"
   }, {
     file: "netError.dtd",
@@ -36,6 +36,10 @@ let gWhitelist = [{
     file: "netError.dtd",
     key: "certerror.wrongSystemTimeWithoutReference",
     type: "single-quote"
+  }, {
+    file: "netError.dtd",
+    key: "clockSkewError.longDesc",
+    type: "single-quote"
   }, {
     file: "phishing-afterload-warning-message.dtd",
     key: "safeb.palm.advisory.desc2",

browser/base/jar.mn

@@ -18,6 +18,7 @@ browser.jar:
         content/browser/illustrations/error-server-not-found.svg (content/illustrations/error-server-not-found.svg)
         content/browser/illustrations/error-malformed-url.svg (content/illustrations/error-malformed-url.svg)
         content/browser/illustrations/under-construction.svg (content/illustrations/under-construction.svg)
+        content/browser/illustrations/blue-berror.svg (content/illustrations/blue-berror.svg)
         content/browser/aboutNetError.xhtml            (content/aboutNetError.xhtml)
         content/browser/aboutNetError.js               (content/aboutNetError.js)
         content/browser/aboutNetError-new.xhtml        (content/aboutNetError-new.xhtml)

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

@@ -11,6 +11,7 @@
 <!ENTITY returnToPreviousPage1.label "Go Back (Recommended)">
 <!ENTITY advanced.label "Advanced">
 <!ENTITY continue1.label "Continue…">
+<!ENTITY moreInformation.label "More Information">
 
 <!-- Specific error messages -->
 
@@ -164,8 +165,8 @@ was trying to connect. -->
 <p>If you are on a corporate network or using anti-virus software, you can reach out to the support teams for assistance. You can also notify the website’s administrator about the problem.</p>
 ">
 
-<!ENTITY certerror.expiredCert.whatCanYouDoAboutIt "
-<p>Your computer clock is set to <span id='wrongSystemTime_systemDate'/>. Make sure your computer is set to the correct date, time, and time zone in your system settings, and then refresh <span class='hostname'/>.</p>
+<!ENTITY certerror.expiredCert.whatCanYouDoAboutIt2 "
+<p>Your computer clock is set to <span id='wrongSystemTime_systemDate2'/>. Make sure your computer is set to the correct date, time, and time zone in your system settings, and then refresh <span class='hostname'/>.</p>
 <p>If your clock is already set to the right time, the website is likely misconfigured, and there is nothing you can do to resolve the issue. You can notify the website’s administrator about the problem.</p>
 ">
 
@@ -226,5 +227,8 @@ certificate.">
 
 <!ENTITY blockedByPolicy.title "Blocked Page">
 
+<!ENTITY clockSkewError.title "Your computer clock is wrong">
+<!ENTITY clockSkewError.longDesc "Your computer thinks it is <span id='wrongSystemTime_systemDate1'/>, which prevents &brandShortName; from connecting securely. To visit <span class='hostname'></span>, update your computer clock in your system settings to the current date, time, and time zone, and then refresh <span class='hostname'></span>.">
+
 <!ENTITY prefReset.longDesc "It looks like your network security settings might be causing this. Do you want the default settings to be restored?">
 <!ENTITY prefReset.label "Restore default settings">

browser/modules/NetErrorContent.jsm

@@ -383,27 +383,7 @@ var NetErrorContent = {
       case MOZILLA_PKIX_ERROR_NOT_YET_VALID_ISSUER_CERTIFICATE:
 
         learnMoreLink.href = baseURL + "time-errors";
-        if (newErrorPagesEnabled) {
-          let dateOptions = { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric" };
-          let systemDate = new Services.intl.DateTimeFormat(undefined, dateOptions).format(new Date());
-          doc.getElementById("wrongSystemTime_systemDate").textContent = systemDate;
-          let errDesc = doc.getElementById("ed2_nssBadCert_SEC_ERROR_EXPIRED_CERTIFICATE");
-          let sd = doc.getElementById("errorShortDescText2");
-          if (sd) {
-            // eslint-disable-next-line no-unsanitized/property
-            sd.innerHTML = errDesc.innerHTML;
-          }
-          if (es) {
-            // eslint-disable-next-line no-unsanitized/property
-            es.innerHTML = errWhatToDo.innerHTML;
-          }
-          if (est) {
-            // eslint-disable-next-line no-unsanitized/property
-            est.innerHTML = errWhatToDoTitle.innerHTML;
-          }
-          updateContainerPosition();
-        break;
-        }
+        let clockSkew = false;
         // We check against the remote-settings server time first if available, because that allows us
         // to give the user an approximation of what the correct time is.
         let difference = Services.prefs.getIntPref(PREF_SERVICES_SETTINGS_CLOCK_SKEW_SECONDS, 0);
@@ -417,6 +397,7 @@ var NetErrorContent = {
         // and adjusting the date per the interval would make the cert valid, warn the user:
         if (Math.abs(difference) > 60 * 60 * 24 && (now - lastFetched) <= 60 * 60 * 24 * 5 &&
             certRange.notBefore < approximateDate && certRange.notAfter > approximateDate) {
+          clockSkew = true;
           let formatter = new Services.intl.DateTimeFormat(undefined, {
             dateStyle: "short"
           });
@@ -448,6 +429,7 @@ var NetErrorContent = {
           // so we shouldn't exclude the possibility that the cert has become valid
           // since the build date.
           if (buildDate > systemDate && new Date(certRange.notAfter) > buildDate) {
+            clockSkew = true;
             let formatter = new Services.intl.DateTimeFormat(undefined, {
               dateStyle: "short"
             });
@@ -456,11 +438,50 @@ var NetErrorContent = {
               .textContent = doc.location.hostname;
             doc.getElementById("wrongSystemTimeWithoutReference_systemDate")
               .textContent = formatter.format(systemDate);
-
-            doc.getElementById("errorShortDesc").style.display = "none";
-            doc.getElementById("wrongSystemTimeWithoutReferencePanel").style.display = "block";
           }
         }
+        if (!newErrorPagesEnabled) {
+          break;
+        }
+        let dateOptions = { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric" };
+        let systemDate = new Services.intl.DateTimeFormat(undefined, dateOptions).format(new Date());
+        doc.getElementById("wrongSystemTime_systemDate1").textContent = systemDate;
+        if (clockSkew) {
+          doc.body.classList.add("illustrated", "clockSkewError");
+          let clockErrTitle = doc.getElementById("et_clockSkewError");
+          let clockErrDesc = doc.getElementById("ed_clockSkewError");
+          // eslint-disable-next-line no-unsanitized/property
+          doc.querySelector(".title-text").textContent = clockErrTitle.textContent;
+          let desc = doc.getElementById("errorShortDescText");
+          doc.getElementById("errorShortDesc").style.display = "block";
+          doc.getElementById("wrongSystemTimePanel").style.display = "none";
+          doc.getElementById("certificateErrorReporting").style.display = "none";
+          if (desc) {
+            // eslint-disable-next-line no-unsanitized/property
+            desc.innerHTML = clockErrDesc.innerHTML;
+          }
+          let errorPageContainer = doc.getElementById("errorPageContainer");
+          let textContainer = doc.getElementById("text-container");
+          errorPageContainer.style.backgroundPosition = `left top calc(50vh - ${textContainer.clientHeight / 2}px)`;
+        } else {
+            doc.getElementById("wrongSystemTime_systemDate2").textContent = systemDate;
+            let errDesc = doc.getElementById("ed2_nssBadCert_SEC_ERROR_EXPIRED_CERTIFICATE");
+            let sd = doc.getElementById("errorShortDescText2");
+            if (sd) {
+              // eslint-disable-next-line no-unsanitized/property
+              sd.innerHTML = errDesc.innerHTML;
+            }
+            if (es) {
+              // eslint-disable-next-line no-unsanitized/property
+              es.innerHTML = errWhatToDo.innerHTML;
+            }
+            if (est) {
+              // eslint-disable-next-line no-unsanitized/property
+              est.textContent = errWhatToDoTitle.textContent;
+              est.style.fontWeight = "bold";
+            }
+            updateContainerPosition();
+        }
         break;
     }
   },

browser/themes/shared/aboutNetError-new.css

@@ -28,6 +28,11 @@ body.blocked .title {
   background-image: url("chrome://global/skin/icons/blocked.svg");
 }
 
+body.clockSkewError .title {
+  background-image: none;
+  background-repeat: no-repeat;
+}
+
 #errorContainer {
   display: none;
 }
@@ -82,11 +87,23 @@ body:not(.captiveportal) #openPortalLoginPageButton {
   display: none;
 }
 
+body:not(.clockSkewError) #errorTryAgain {
+  display: none;
+}
+
+body:not(.clockSkewError) #advancedPanelErrorTryAgain {
+  display: none;
+}
+
+body:not(.clockSkewError) #moreInformationButton {
+  display: none;
+}
+
 #openPortalLoginPageButton {
   margin-inline-start: 0;
 }
 
-body:not(.neterror) #advancedButton {
+body:not(.neterror):not(.clockSkewError) #advancedButton {
   display: block;
 }
 
@@ -221,6 +238,34 @@ span#hostname {
   background-image: url("chrome://browser/content/illustrations/error-malformed-url.svg");
 }
 
+.clockSkewError #errorPageContainer {
+  background-image: url("chrome://browser/content/illustrations/blue-berror.svg");
+  background-size: 18.5em;
+}
+
+.clockSkewError #returnButton {
+  display: none;
+}
+
+.clockSkewError #advancedButton {
+  display: none;
+}
+
+.clockSkewError #advancedPanelErrorTryAgain,
+.clockSkewError #errorTryAgain,
+.clockSkewError #moreInformationButton {
+  display: block;
+  margin-top: 0.3em;
+}
+
+.clockSkewError #exceptionDialogButton {
+  display: none;
+}
+
+.clockSkewError #advancedPanelReturnButton {
+  display: none;
+}
+
 .malformedURI #errorTryAgain {
   display: none;
 }

browser/themes/shared/aboutNetError.css

@@ -55,6 +55,14 @@ body:not(.neterror) #netErrorButtonContainer {
   display: none;
 }
 
+#advancedPanelErrorTryAgain {
+  display: none;
+}
+
+#moreInformationButton {
+  display: none;
+}
+
 #errorTryAgain {
   margin-top: 1.2em;
 }