Bug 1220481 - New responsive designs for error pages. r=Gijs

MozReview-Commit-ID: 8AJWdyLxezg --HG-- extra : rebase_source : 02797e3fd135136e3dd142da72f2b2ea23ff2603
2016-04-21 09:50:16 -07:00 · 2016-04-21 09:50:16 -07:00 · 072741d04f
--- a/browser/base/content/aboutNetError.xhtml
+++ b/browser/base/content/aboutNetError.xhtml
@ -115,11 +115,6 @@
      }

      function showAdvancedButton(allowOverride) {
-        // Display weak crypto advanced UI
-        document.getElementById("buttonContainer").style.display = "flex";
-        document.getElementById("advancedButton").style.display = "block";
-        document.getElementById("errorTryAgain").style.display = "none";
-
        // Get the hostname and add it to the panel
        var panelId = gIsCertError ? "badCertAdvancedPanel" : "weakCryptoAdvancedPanel";
        var panel = document.getElementById(panelId);
@ -222,21 +217,15 @@

        // 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_" + err).innerHTML;
+        var errDesc  = document.getElementById("ed_" + err).innerHTML;
        if (!errTitle || !errDesc)
        {
-          errTitle = document.getElementById("et_generic");
-          errDesc  = document.getElementById("ed_generic");
+          errTitle = document.getElementById("et_generic").innerHTML;
+          errDesc  = document.getElementById("ed_generic").innerHTML;
        }

-        var title = document.getElementById("errorTitleText");
-        if (title)
-        {
-          title.parentNode.replaceChild(errTitle, title);
-          // change id to the replaced child's id so styling works
-          errTitle.id = "errorTitleText";
-        }
+        document.querySelector(".title-text").innerHTML = errTitle;

        var sd = document.getElementById("errorShortDescText");
        if (sd) {
@ -255,22 +244,18 @@
        var ld = document.getElementById("errorLongDesc");
        if (ld)
        {
-          ld.parentNode.replaceChild(errDesc, ld);
-          // change id to the replaced child's id so styling works
-          errDesc.id = "errorLongDesc";
+          ld.innerHTML = errDesc;
        }

        if (err == "sslv3Used") {
-          document.getElementById("errorTitle").setAttribute("sslv3", "true");
-          document.getElementById("errorTryAgain").style.display = "none";
          document.getElementById("learnMoreContainer").style.display = "block";
          var learnMoreLink = document.getElementById("learnMoreLink");
          learnMoreLink.href = "https://support.mozilla.org/kb/how-resolve-sslv3-error-messages-firefox";
-          document.getElementById("buttonContainer").style.display = "flex";
+          document.body.className = "certerror";
        }

        if (err == "weakCryptoUsed") {
-          document.getElementById("errorTitle").setAttribute("weakCrypto", "true");
+          document.body.className = "certerror";
        }

        // remove undisplayed errors to avoid bug 39098
@ -297,13 +282,13 @@
        if (err == "remoteXUL") {
          // Remove the "Try again" button for remote XUL errors given that
          // it is useless.
-          document.getElementById("errorTryAgain").style.display = "none";
+          document.getElementById("netErrorButtonContainer").style.display = "none";
        }

        if (err == "cspBlocked") {
          // Remove the "Try again" button for CSP violations, since it's
          // almost certainly useless. (Bug 553180)
-          document.getElementById("errorTryAgain").style.display = "none";
+          document.getElementById("netErrorButtonContainer").style.display = "none";
        }

        window.addEventListener("AboutNetErrorOptions", function(evt) {
@ -540,11 +525,11 @@
    </div>

    <!-- PAGE CONTAINER (for styling purposes only) -->
-    <div id="errorPageContainer">
+    <div id="errorPageContainer" class="container">

      <!-- Error Title -->
-      <div id="errorTitle">
-        <h1 id="errorTitleText" />
+      <div class="title">
+        <h1 class="title-text"/>
      </div>

      <!-- LONG CONTENT (the section most likely to require scrolling) -->
@ -563,14 +548,17 @@
          <p><a href="https://support.mozilla.org/kb/what-does-your-connection-is-not-secure-mean" id="learnMoreLink" target="new">&errorReporting.learnMore;</a></p>
        </div>

-        <div id="buttonContainer">
-          <button id="returnButton" autocomplete="off" autofocus="true">&returnToPreviousPage.label;</button>
-          <div id="buttonSpacer"></div>
+        <div id="certErrorButtonContainer" class="button-container">
+          <button id="returnButton" class="primary" autocomplete="off" autofocus="true">&returnToPreviousPage.label;</button>
+          <div class="button-spacer"></div>
          <button id="advancedButton" autocomplete="off" autofocus="true">&advanced.label;</button>
        </div>
      </div>

-      <button id="errorTryAgain" autocomplete="off" onclick="retryThis(this);">&retry.label;</button>
+      <div id="netErrorButtonContainer" class="button-container">
+        <button id="errorTryAgain" class="primary" autocomplete="off" onclick="retryThis(this);">&retry.label;</button>
+      </div>
+
      <script>
        // Only do autofocus if we're the toplevel frame; otherwise we
        // don't want to call attention to ourselves!  The key part is
@ -579,11 +567,10 @@
        // button.
        if (window.top == window) {
            var button = document.getElementById("errorTryAgain");
-            var nextSibling = button.nextSibling;
            var parent = button.parentNode;
-            parent.removeChild(button);
+            button.remove();
            button.setAttribute("autofocus", "true");
-            parent.insertBefore(button, nextSibling);
+            parent.appendChild(button);
        }
      </script>

@ -596,7 +583,7 @@
        </p>
      </div>

-      <div id="weakCryptoAdvancedPanel">
+      <div id="weakCryptoAdvancedPanel" class="advanced-panel">
        <div id="weakCryptoAdvancedDescription">
          <p>&weakCryptoAdvanced.longDesc;</p>
        </div>
@ -606,7 +593,7 @@
        </div>
      </div>

-      <div id="badCertAdvancedPanel">
+      <div id="badCertAdvancedPanel" class="advanced-panel">
        <p id="badCertTechnicalInfo"/>
        <button id="exceptionDialogButton">&securityOverride.exceptionButtonLabel;</button>
      </div>
--- a/browser/base/content/blockedSite.xhtml
+++ b/browser/base/content/blockedSite.xhtml
@ -17,7 +17,7 @@

 <html xmlns="http://www.w3.org/1999/xhtml" class="blacklist">
  <head>
-    <link rel="stylesheet" href="chrome://global/skin/netError.css" type="text/css" media="all" />
+    <link rel="stylesheet" href="chrome://browser/skin/blockedSite.css" type="text/css" media="all" />
    <link rel="icon" type="image/png" id="favicon" href="chrome://global/skin/icons/blacklist_favicon.png"/>

    <script type="application/javascript"><![CDATA[
@ -165,49 +165,21 @@
        document.dispatchEvent(event);
      }
    ]]></script>
-    <style type="text/css">
-      /* Style warning button to look like a small text link in the
-         bottom right. This is preferable to just using a text link
-         since there is already a mechanism in browser.js for trapping
-         oncommand events from unprivileged chrome pages (BrowserOnCommand).*/
-      #ignoreWarningButton {
-        -moz-appearance: none;
-        background: transparent;
-        border: none;
-        color: white;  /* Hard coded because netError.css forces this page's background to dark red */
-        text-decoration: underline;
-        margin: 0;
-        padding: 0;
-        position: relative;
-        top: 23px;
-        left: 20px;
-        font-size: smaller;
-      }
-      
-      #ignoreWarningButton:-moz-dir(rtl) {
-        left: auto;
-        right: 20px;
-      }
-      
-      #ignoreWarning {
-        text-align: end;
-      }
-    </style>
  </head>

  <body dir="&locale.dir;">
-    <div id="errorPageContainer">
-    
+    <div id="errorPageContainer" class="container">
+
      <!-- Error Title -->
-      <div id="errorTitle">
-        <h1 id="errorTitleText_phishing">&safeb.blocked.phishingPage.title2;</h1>
-        <h1 id="errorTitleText_malware">&safeb.blocked.malwarePage.title;</h1>
-        <h1 id="errorTitleText_unwanted">&safeb.blocked.unwantedPage.title;</h1>
-        <h1 id="errorTitleText_forbidden">&safeb.blocked.forbiddenPage.title2;</h1>
+      <div id="errorTitle" class="title">
+        <h1 class="title-text" id="errorTitleText_phishing">&safeb.blocked.phishingPage.title2;</h1>
+        <h1 class="title-text" id="errorTitleText_malware">&safeb.blocked.malwarePage.title;</h1>
+        <h1 class="title-text" id="errorTitleText_unwanted">&safeb.blocked.unwantedPage.title;</h1>
+        <h1 class="title-text" id="errorTitleText_forbidden">&safeb.blocked.forbiddenPage.title2;</h1>
      </div>
-      
+
      <div id="errorLongContent">
-      
+
        <!-- Short Description -->
        <div id="errorShortDesc">
          <p id="errorShortDescText_phishing">&safeb.blocked.phishingPage.shortDesc2;</p>
@ -222,11 +194,12 @@
          <p id="errorLongDescText_malware">&safeb.blocked.malwarePage.longDesc;</p>
          <p id="errorLongDescText_unwanted">&safeb.blocked.unwantedPage.longDesc;</p>
        </div>
-        
+
        <!-- Action buttons -->
-        <div id="buttons">
+        <div id="buttons" class="button-container">
          <!-- Commands handled in browser.js -->
-          <button id="getMeOutButton">&safeb.palm.accept.label;</button>
+          <button id="getMeOutButton" class="primary">&safeb.palm.accept.label;</button>
+          <div class="button-spacer"></div>
          <button id="reportButton">&safeb.palm.reportPage.label;</button>
          <button id="whyForbiddenButton">&safeb.palm.whyForbidden.label;</button>
        </div>
--- a/browser/themes/shared/aboutNetError.css
+++ b/browser/themes/shared/aboutNetError.css
@ -2,82 +2,28 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-@import url("chrome://global/skin/in-content/common.css");
+@import url("chrome://browser/skin/error-pages.css");

 body {
-  display: flex;
-  box-sizing: border-box;
-  min-height: 100vh;
-  padding: 0 48px;
-  align-items: center;
-  justify-content: center;
+  background-image: linear-gradient(-45deg, #eeeeee,     #eeeeee 33%,
+                                            #fbfbfb 33%, #fbfbfb 66%,
+                                            #eeeeee 66%, #eeeeee);
 }

-ul, ol {
-  margin: 0;
-  padding: 0;
-  -moz-margin-start: 1em;
+body.certerror {
+  background-image: linear-gradient(-45deg, #f0d000,     #f0d000 33%,
+                                            #fedc00 33%, #fedc00 66%,
+                                            #f0d000 66%, #f0d000);
 }

-ul > li, ol > li {
-  margin-bottom: .5em;
-}
-
-ul {
-  list-style: disc;
-}
-
-#errorPageContainer {
-  position: relative;
-  min-width: 320px;
-  max-width: 512px;
-}
-
-#errorTitle {
-  background: url("chrome://global/skin/icons/info.svg") left 0 no-repeat;
-  background-size: 3em;
-  -moz-margin-start: -5em;
-  -moz-padding-start: 5em;
-}
-
-body.certerror #errorTitle {
-  background-image: url("chrome://browser/skin/cert-error.svg");
-}
-
-#errorTitleText {
-  border-bottom: 1px solid #C1C1C1;
-  padding-bottom: 0.4em;
-}
-
-#errorTitleText:-moz-dir(rtl) {
-  background-position: right 0;
-}
-
-#errorTitle[sslv3=true],
-#errorTitle[weakCrypto=true] {
+body.certerror .title {
  background-image: url("cert-error.svg");
 }

-#errorTryAgain {
-  margin-top: 1.2em;
-  min-width: 150px
-}
-
 #errorContainer {
  display: none;
 }

-@media (max-width: 675px) {
-  #errorTitle,
-  #errorTitle[sslv3=true],
-  #errorTitle[weakCrypto=true] {
-    padding-top: 0;
-    background-image: none;
-    -moz-padding-start: 0;
-    -moz-margin-start: 0;
-  }
-}
-
 /* Pressing the retry button will cause the cursor to flicker from a pointer to
 * not-allowed. Override the disabled cursor behaviour since we will never show
 * the button disabled as the initial state. */
@ -89,42 +35,40 @@ button:disabled {
  display: none;
 }

-#buttonContainer {
+#certErrorButtonContainer {
  display: none;
-  flex-flow: row wrap;
 }

-#buttonSpacer {
-  flex: 1;
+body.certerror #certErrorButtonContainer {
+  display: flex;
+}
+
+body.certerror #netErrorButtonContainer {
+  display: none;
+}
+
+#errorTryAgain {
+  margin-top: 1.2em;
+  min-width: 150px;
 }

 #returnButton {
-  background-color: var(--in-content-primary-button-background);
-  border: none;
-  color: var(--in-content-selected-text);
  min-width: 250px;
-  margin-inline-start: 0;
-}
-
-#returnButton:hover {
-  background-color: var(--in-content-primary-button-background-hover) !important;
-}
-
-#returnButton:hover:active {
-  background-color: var(--in-content-primary-button-background-active) !important;
 }

 #advancedButton {
  display: none;
-  min-width: 150px;
+}
+
+body.certerror #advancedButton {
+  display: block;
 }

 #certificateErrorReporting {
  display: none;
 }

-#weakCryptoAdvancedPanel,
-#badCertAdvancedPanel {
+.advanced-panel {
  /* Hidden until the link is clicked */
  display: none;
  background-color: white;
@ -155,13 +99,13 @@ span#hostname {
  cursor: pointer;
 }

-body:not(.certerror) #errorCode {
+#errorCode:not([href]) {
  color: var(--in-content-page-color);
  cursor: text;
  text-decoration: none;
 }

-body.certerror #errorCode {
+#errorCode[href] {
  white-space: nowrap;
 }

--- a/browser/themes/shared/blockedSite.css
+++ b/browser/themes/shared/blockedSite.css
@ -0,0 +1,65 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://browser/skin/error-pages.css");
+
+body {
+  background-image: linear-gradient(-45deg, #9b2e2e,     #9b2e2e 33%,
+                                            #a83232 33%, #a83232 66%,
+                                            #9b2e2e 66%, #9b2e2e);
+  background-color: #b14646;
+  color: white;
+}
+
+.title {
+  background-image: url("chrome://global/skin/icons/blocked.svg");
+}
+
+.title-text {
+  color: white;
+}
+
+.button-container button:not(.primary) {
+  background-color: transparent;
+  color: white;
+  border: 1px solid #9b2e2e;
+  margin-inline-end: 0;
+}
+
+.button-container button:not(.primary):hover {
+  background-color: #a83232;
+}
+
+.button-container button:not(.primary):active {
+  background-color: #9b2e2e;
+}
+
+.button-container button {
+  margin-top: 1.2em;
+}
+
+/* Style warning button to look like a small text link in the
+   bottom right. This is preferable to just using a text link
+   since there is already a mechanism in browser.js for trapping
+   oncommand events from unprivileged chrome pages (BrowserOnCommand).*/
+#ignoreWarningButton {
+  -moz-appearance: none;
+  background: transparent;
+  border: none;
+  color: white;
+  text-decoration: underline;
+  margin: 4px 0 0 0;
+  padding: 0;
+  font-size: smaller;
+  min-width: 0;
+}
+
+#ignoreWarningButton:hover {
+  cursor: pointer;
+}
+
+#ignoreWarning {
+  margin-top: 1.2em;
+  text-align: end;
+}
--- a/browser/themes/shared/error-pages.css
+++ b/browser/themes/shared/error-pages.css
@ -0,0 +1,76 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://global/skin/in-content/info-pages.css");
+
+body {
+  background-size: 64px 32px;
+  background-repeat: repeat-x;
+  /* Top padding for when the window height is small.
+     Bottom padding to keep everything centered. */
+  padding: 75px 0;
+}
+
+.button-container {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.button-spacer {
+  flex: 1;
+}
+
+@media only screen and (max-width: 959px) {
+  body {
+    padding: 75px 48px;
+  }
+
+  .title {
+    background-image: none !important;
+    -moz-padding-start: 0;
+    -moz-margin-start: 0;
+  }
+
+  .title-text {
+    padding-top: 0;
+  }
+}
+
+@media only screen and (max-width: 640px) {
+  body {
+    justify-content: unset;
+    /* Now that everything is top-aligned, we don't need the
+     * bottom padding for centering - though it's added back
+     * when the viewport height is < 480px (see below). */
+    padding: 75px 20px 0;
+  }
+
+  .title-text {
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .button-container button {
+    /* Force buttons to display: block here to try and enforce collapsing margins */
+    display: block;
+    width: 100%;
+    margin: 0.66em 0 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;
+    padding-top: 38px;
+    /* We get rid of bottom padding for width < 640px, but
+     * for height < 480px a bit of space between the content
+     * and the viewport edge is nice. */
+    padding-bottom: 38px;
+  }
+}
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@ -8,6 +8,8 @@
 # to the location of the actual manifest.

  skin/classic/browser/aboutNetError.css                       (../shared/aboutNetError.css)
+  skin/classic/browser/blockedSite.css                         (../shared/blockedSite.css)
+  skin/classic/browser/error-pages.css                         (../shared/error-pages.css)
 * skin/classic/browser/aboutProviderDirectory.css              (../shared/aboutProviderDirectory.css)
 * skin/classic/browser/aboutSessionRestore.css                 (../shared/aboutSessionRestore.css)
  skin/classic/browser/aboutSocialError.css                    (../shared/aboutSocialError.css)
--- a/toolkit/themes/shared/incontent-icons/blocked.svg
+++ b/toolkit/themes/shared/incontent-icons/blocked.svg
@ -0,0 +1,13 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 45 45">
+  <defs>
+    <circle id="stop-sign" cx="22.5" cy="22.5" r="20.5"/>
+    <mask id="stop-symbol">
+      <rect width="45" height="45" fill="#fff"/>
+      <line x1="10" y1="23" x2="35" y2="23" stroke="#000" stroke-width="6"/>
+    </mask>
+  </defs>
+  <use xlink:href="#stop-sign" mask="url(#stop-symbol)" fill="#fff"/>
+</svg>
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@ -25,6 +25,7 @@ toolkit.jar:
  skin/classic/global/icons/loading-inverted.png           (../../shared/icons/loading-inverted.png)
  skin/classic/global/icons/loading-inverted@2x.png        (../../shared/icons/loading-inverted@2x.png)
  skin/classic/global/icons/warning.svg                    (../../shared/incontent-icons/warning.svg)
+  skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
  skin/classic/global/alerts/alert-common.css              (../../shared/alert-common.css)
  skin/classic/global/narrate.css                          (../../shared/narrate.css)
  skin/classic/global/narrateControls.css                  (../../shared/narrateControls.css)