Bug 1485670 - Improve error page styles in iframes. r=ewright
authorJohann Hofmann <jhofmann@mozilla.com>
Wed, 06 Mar 2019 15:58:18 +0000
changeset 520504 4c91f111269f3dc1873a32de2936ed119ef3c9a0
parent 520503 9c7c28753aa3b7c5fd03d72eed6f6fef5c9e1859
child 520505 34f94fc00f2191bfd709eb87d8cc367a80b5f0f1
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersewright
bugs1485670
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1485670 - Improve error page styles in iframes. r=ewright Differential Revision: https://phabricator.services.mozilla.com/D21907
browser/actors/NetErrorChild.jsm
browser/base/content/aboutNetError-new.xhtml
browser/base/content/aboutNetError.js
browser/themes/shared/aboutNetError-new.css
browser/themes/shared/aboutNetError.css
browser/themes/shared/error-pages.css
--- a/browser/actors/NetErrorChild.jsm
+++ b/browser/actors/NetErrorChild.jsm
@@ -354,19 +354,33 @@ class NetErrorChild extends ActorChild {
         debugInfo.scrollIntoView({block: "start", behavior: "smooth"});
       });
     }
   }
 
   onCertErrorDetails(msg, docShell) {
     let doc = docShell.document;
 
+    // This function centers the error container after its content updates.
+    // It is currently duplicated in aboutNetError.js to avoid having to do
+    // async communication to the page that would result in flicker.
+    // TODO(johannh): Get rid of this duplication.
     function updateContainerPosition() {
       let textContainer = doc.getElementById("text-container");
-      textContainer.style.marginTop = `calc(50vh - ${textContainer.clientHeight / 2}px)`;
+      // Using the vh CSS property our margin adapts nicely to window size changes.
+      // Unfortunately, this doesn't work correctly in iframes, which is why we need
+      // to manually compute the height there.
+      if (doc.ownerGlobal.parent == doc.ownerGlobal) {
+        textContainer.style.marginTop = `calc(50vh - ${textContainer.clientHeight / 2}px)`;
+      } else {
+        let offset = (doc.documentElement.clientHeight / 2) - (textContainer.clientHeight / 2);
+        if (offset > 0) {
+          textContainer.style.marginTop = `${offset}px`;
+        }
+      }
     }
 
     let div = doc.getElementById("certificateErrorText");
     div.textContent = msg.data.info;
     this._setTechDetails(msg, doc);
     let learnMoreLink = doc.getElementById("learnMoreLink");
     let baseURL = Services.urlFormatter.formatURLPref("app.support.baseURL");
     let errWhatToDo = doc.getElementById("es_nssBadCert_" + msg.data.codeString);
--- a/browser/base/content/aboutNetError-new.xhtml
+++ b/browser/base/content/aboutNetError-new.xhtml
@@ -217,17 +217,17 @@
               <button id="exceptionDialogButton" data-telemetry-id="exception_button">&securityOverride.exceptionButton1Label;</button>
             </div>
           </div>
         </div>
 
         <div id="certificateErrorReporting">
             <p class="toggle-container-with-text">
                 <input type="checkbox" id="automaticallyReportInFuture" role="checkbox" data-telemetry-id="auto_report_cb"/>
-                <label for="automaticallyReportInFuture" id="automaticallyReportInFuture">&errorReporting.automatic2;</label>
+                <label for="automaticallyReportInFuture">&errorReporting.automatic2;</label>
             </p>
         </div>
 
         <div id="certificateErrorDebugInformation">
           <button id="copyToClipboard" data-telemetry-id="clipboard_button_top">&certerror.copyToClipboard.label;</button>
           <div id="certificateErrorText"/>
           <button id="copyToClipboard" data-telemetry-id="clipboard_button_bot">&certerror.copyToClipboard.label;</button>
         </div>
--- a/browser/base/content/aboutNetError.js
+++ b/browser/base/content/aboutNetError.js
@@ -299,19 +299,33 @@ function initPage() {
 
     var container = document.getElementById("errorLongDesc");
     for (var span of container.querySelectorAll("span.hostname")) {
       span.textContent = document.location.hostname;
     }
   }
 }
 
+// This function centers the error container after its content updates.
+// It is currently duplicated in NetErrorChild.jsm to avoid having to do
+// async communication to the page that would result in flicker.
+// TODO(johannh): Get rid of this duplication.
 function updateContainerPosition() {
   let textContainer = document.getElementById("text-container");
-  textContainer.style.marginTop = `calc(50vh - ${textContainer.clientHeight / 2}px)`;
+  // Using the vh CSS property our margin adapts nicely to window size changes.
+  // Unfortunately, this doesn't work correctly in iframes, which is why we need
+  // to manually compute the height there.
+  if (window.parent == window) {
+    textContainer.style.marginTop = `calc(50vh - ${textContainer.clientHeight / 2}px)`;
+  } else {
+    let offset = (document.documentElement.clientHeight / 2) - (textContainer.clientHeight / 2);
+    if (offset > 0) {
+      textContainer.style.marginTop = `${offset}px`;
+    }
+  }
 }
 
 function initPageCaptivePortal() {
   document.body.className = "captiveportal";
   document.getElementById("openPortalLoginPageButton")
           .addEventListener("click", () => {
     let event = new CustomEvent("AboutNetErrorOpenCaptivePortal", {bubbles: true});
     document.dispatchEvent(event);
--- a/browser/themes/shared/aboutNetError-new.css
+++ b/browser/themes/shared/aboutNetError-new.css
@@ -147,16 +147,19 @@ body:not(:-moz-any(.clockSkewError,.badS
 
 .mitm-name,
 #hostname {
   font-weight: bold;
 }
 
 #automaticallyReportInFuture {
   cursor: pointer;
+  /* Prevent the checkbox from looking super
+   * squeezed on small viewports */
+  flex-shrink: 0;
 }
 
 #errorCode:not([href]) {
   color: var(--in-content-page-color);
   cursor: text;
   text-decoration: none;
 }
 
@@ -203,43 +206,16 @@ body:not(:-moz-any(.clockSkewError,.badS
   display: flex;
   justify-content: end;
 }
 
 .exceptionDialogButtonContainer[hidden] {
   display: none;
 }
 
-.illustrated #errorPageContainer {
-  min-height: 300px;
-  display: flex;
-  flex-direction: column;
-  background-position: left center;
-}
-
-.illustrated[dir="rtl"] #errorPageContainer {
-  background-position: right center;
-}
-
-.illustrated .title {
-  background: none;
-  padding-inline-start: 0;
-  margin-inline-start: 0;
-}
-
-.illustrated #text-container {
-  margin: auto;
-  padding-inline-start: 38%;
-}
-
-.illustrated #errorPageContainer {
-  background-repeat: no-repeat;
-  background-size: 38%;
-}
-
 .connectionFailure #errorPageContainer,
 .netInterrupt #errorPageContainer,
 .netTimeout #errorPageContainer,
 .netReset #errorPageContainer,
 .netOffline #errorPageContainer {
   background-image: url("chrome://browser/content/illustrations/error-connection-failure.svg");
 }
 
@@ -285,8 +261,33 @@ body:not(:-moz-any(.clockSkewError,.badS
 
 #wrongSystemTimePanel {
   display: none;
 }
 
 #wrongSystemTimeWithoutReferencePanel {
   display: none;
 }
+
+@media only screen and (max-width: 959px) {
+  #certificateErrorText {
+    /* The encoded certificate chain looks better when we're not
+     * wrapping words on big screens, but at some point we need
+     * to wrap to avoid overflowing */
+    word-wrap: anywhere;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  #badCertTechnicalInfo {
+    margin: 10px 10px 5px;
+  }
+
+  #viewCertificate {
+    margin: 0 10px;
+  }
+
+  #errorCode[href] {
+    /* Break the error code to avoid long codes overflowing the screen */
+    white-space: normal;
+    word-wrap: anywhere;
+  }
+}
--- a/browser/themes/shared/aboutNetError.css
+++ b/browser/themes/shared/aboutNetError.css
@@ -172,43 +172,16 @@ span#hostname {
   justify-content: end;
   padding: 10px;
 }
 
 .exceptionDialogButtonContainer[hidden] {
   display: none;
 }
 
-.illustrated #errorPageContainer {
-  min-height: 300px;
-  display: flex;
-  flex-direction: column;
-  background-position: left center;
-}
-
-.illustrated[dir="rtl"] #errorPageContainer {
-  background-position: right center;
-}
-
-.illustrated .title {
-  background: none;
-  padding-inline-start: 0;
-  margin-inline-start: 0;
-}
-
-.illustrated #text-container {
-  margin: auto;
-  padding-inline-start: 38%;
-}
-
-.illustrated #errorPageContainer {
-  background-repeat: no-repeat;
-  background-size: 38%;
-}
-
 .connectionFailure #errorPageContainer,
 .netInterrupt #errorPageContainer,
 .netTimeout #errorPageContainer,
 .netReset #errorPageContainer,
 .netOffline #errorPageContainer {
   background-image: url("chrome://browser/content/illustrations/error-connection-failure.svg");
 }
 
--- a/browser/themes/shared/error-pages.css
+++ b/browser/themes/shared/error-pages.css
@@ -20,44 +20,103 @@ body {
   flex-flow: row wrap;
   justify-content: end;
 }
 
 .button-spacer {
   flex: 1;
 }
 
+.illustrated #errorPageContainer {
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  background-position: left center;
+}
+
+.illustrated[dir="rtl"] #errorPageContainer {
+  background-position: right center;
+}
+
+.illustrated .title {
+  background: none;
+  padding-inline-start: 0;
+  margin-inline-start: 0;
+}
+
+.illustrated #text-container {
+  margin: auto;
+  padding-inline-start: 38%;
+}
+
+.illustrated #errorPageContainer {
+  background-repeat: no-repeat;
+  background-size: 38%;
+}
+
 @media only screen and (max-width: 959px) {
+  body {
+    padding: 0 75px;
+  }
+
   .title {
     background-image: none !important;
     padding-inline-start: 0;
     margin-inline-start: 0;
   }
 
   .title-text {
     padding-top: 0;
   }
 }
 
 @media only screen and (max-width: 640px) {
-  body {
-    padding: 0 75px;
-  }
-
   .title-text {
     padding-bottom: 0;
     border-bottom: none;
   }
 }
 
 @media only screen and (max-width: 480px) {
+  body {
+    padding: 0 38px;
+  }
+
+  .container {
+    min-width: 0;
+  }
+
   .button-container button {
     width: 100%;
     margin: 0.66em 0 0;
   }
+
+  .title-text {
+    font-size: 26px;
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  body {
+    padding: 0 12px;
+  }
+
+  /* At some point the screen gets so small that the cute
+   * critter image takes up too much valuable screen real
+   * estate to keep it showing. */
+  #errorPageContainer {
+    background-image: none !important;
+  }
+
+  /* When the critter is hidden, also use the full screen
+   * size for the error text */
+  .illustrated #text-container {
+    margin: unset;
+    padding-inline-start: 0;
+  }
 }
 
 /* For small window height, shift the stripes up by 10px.
  * We could just change the background size, but that changes
  * the angle of the stripes so just shifting up is easier. */
 @media only screen and (max-height: 480px) {
   body {
     background-position: 10px -10px;