Bug 1463755 - Update the design of certificate error pages r=johannh
authortrisha <tgupta@mozilla.com>
Mon, 18 Jun 2018 23:04:56 +0530
changeset 424801 2835f9a11445
parent 424800 b42a4a801685
child 424802 f79b493702d6
push id65852
push usercsabou@mozilla.com
push dateTue, 03 Jul 2018 10:24:25 +0000
treeherderautoland@2835f9a11445 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1463755
milestone63.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 1463755 - Update the design of certificate error pages r=johannh MozReview-Commit-ID: JAUprQQlDmi
browser/base/content/aboutNetError-new.xhtml
browser/base/content/aboutNetError.js
browser/themes/shared/aboutNetError-new.css
browser/themes/shared/error-pages.css
browser/themes/shared/incontent-icons/cert-error-new.svg
browser/themes/shared/incontent-icons/cert-error.svg
browser/themes/shared/jar.inc.mn
toolkit/themes/shared/in-content/info-pages.inc.css
--- a/browser/base/content/aboutNetError-new.xhtml
+++ b/browser/base/content/aboutNetError-new.xhtml
@@ -16,17 +16,17 @@
 <!-- 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/. -->
 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Security-Policy" content="default-src chrome:" />
     <title>&loadError.label;</title>
-    <link rel="stylesheet" href="chrome://browser/skin/aboutNetError.css" type="text/css" media="all" />
+    <link rel="stylesheet" href="chrome://browser/skin/aboutNetError-new.css" type="text/css" media="all" />
     <!-- If the location of the favicon is changed here, the FAVICON_ERRORPAGE_URL symbol in
          toolkit/components/places/src/nsFaviconService.h should be updated. -->
     <link rel="icon" type="image/png" id="favicon" href="chrome://global/skin/icons/warning-16.png"/>
   </head>
 
   <body dir="&locale.dir;">
     <!-- ERROR ITEM CONTAINER (removed during loading to avoid bug 39098) -->
     <div id="errorContainer">
--- a/browser/base/content/aboutNetError.js
+++ b/browser/base/content/aboutNetError.js
@@ -173,20 +173,22 @@ function initPage() {
       // eslint-disable-next-line no-unsanitized/property
       sd.innerHTML = errDesc.innerHTML;
     } else {
       sd.textContent = getDescription();
     }
   }
   if (showCaptivePortalUI) {
     initPageCaptivePortal();
+    updateContainerPosition();
     return;
   }
   if (gIsCertError) {
     initPageCertError();
+    updateContainerPosition();
     return;
   }
   addAutofocus("errorTryAgain");
 
   document.body.classList.add("neterror");
 
   var ld = document.getElementById("errorLongDesc");
   if (ld) {
@@ -288,16 +290,22 @@ function initPage() {
     // again won't help.
     document.getElementById("errorTryAgain").style.display = "none";
 
     var container = document.getElementById("errorLongDesc");
     for (var span of container.querySelectorAll("span.hostname")) {
       span.textContent = document.location.hostname;
     }
   }
+  updateContainerPosition();
+}
+
+function updateContainerPosition() {
+  let textContainer = document.getElementById("text-container");
+  textContainer.style.marginTop = `calc(50vh - ${textContainer.clientHeight / 2}px)`;
 }
 
 function initPageCaptivePortal() {
   document.body.className = "captiveportal";
   document.getElementById("openPortalLoginPageButton")
           .addEventListener("click", () => {
     let event = new CustomEvent("AboutNetErrorOpenCaptivePortal", {bubbles: true});
     document.dispatchEvent(event);
copy from browser/themes/shared/aboutNetError.css
copy to browser/themes/shared/aboutNetError-new.css
--- a/browser/themes/shared/aboutNetError.css
+++ b/browser/themes/shared/aboutNetError-new.css
@@ -3,22 +3,29 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://browser/skin/error-pages.css");
 
 :root {
   --exception-button-container-background: #F5F5F7;
 }
 
+body.certerror {
+  border-style: solid;
+  border-color: #ffe900;
+  border-width: 16px;
+  width: 100%;
+}
+
 body.captiveportal .title {
   background-image: url("wifi.svg");
 }
 
 body.certerror .title {
-  background-image: url("cert-error.svg");
+  background-image: url("cert-error-new.svg");
 }
 
 body.blocked .title {
   background-image: url("chrome://global/skin/icons/blocked.svg");
 }
 
 #errorContainer {
   display: none;
@@ -75,17 +82,16 @@ body:not(.neterror) #advancedButton {
   display: block;
 }
 
 #certificateErrorReporting {
   display: none;
 }
 
 #advancedPanelContainer {
-  position: absolute;
   width: 100%;
   left: 0;
 }
 
 .advanced-panel {
   /* Hidden until the link is clicked */
   display: none;
   background-color: white;
@@ -132,17 +138,16 @@ span#hostname {
 #certificateErrorReporting {
   display: none;
 }
 
 #certificateErrorDebugInformation {
   display: none;
   background-color: var(--in-content-box-background-hover) !important;
   border-top: 1px solid var(--in-content-border-color);
-  position: absolute;
   width: 100%;
   padding: 1em 17.5%;
   box-sizing: border-box;
 }
 
 #certificateErrorText {
   font-family: monospace;
   white-space: pre-wrap;
--- a/browser/themes/shared/error-pages.css
+++ b/browser/themes/shared/error-pages.css
@@ -2,19 +2,17 @@
  * 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;
+  padding: 0;
   /* info-pages.css sets a minimum width of 13em to the content
    * container. If we don't set a min-width here, the content
    * gets clipped in iframes with small width. We don't accomodate
    * any padding to prioritize real estate in the small viewport. */
   min-width: 13em;
 }
 
 .button-container {
@@ -23,38 +21,30 @@ body {
   justify-content: end;
 }
 
 .button-spacer {
   flex: 1;
 }
 
 @media only screen and (max-width: 959px) {
-  body {
-    padding: 75px 48px;
-  }
-
   .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 {
-    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;
+    padding: 0 75px;
   }
 
   .title-text {
     padding-bottom: 0;
     border-bottom: none;
   }
 }
 
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/incontent-icons/cert-error-new.svg
@@ -0,0 +1,7 @@
+<svg height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="m54 87h-38.718c-4.1514504-.0042773-8.00579913-2.1539983-10.19089334-5.6838598-2.1850942-3.5298615-2.39050529-7.9383886-.54310666-11.6561402l29.718-59.46c2.0323569-4.06636891 6.1880314-6.63518463 10.734-6.63518463s8.7016431 2.56881572 10.734 6.63518463l19.0437959 38.0875919c-8.4035561 1.5187368-14.7777959 8.8711807-14.7777959 17.7124081v1.0104467c-3.547421 1.6851959-6 5.3009594-6 9.4895533z" fill="#ffe900" fill-rule="nonzero"/>
+    <path d="m39 27c0-3.3137085 2.6862915-6 6-6s6 2.6862915 6 6v24c0 3.3137085-2.6862915 6-6 6s-6-2.6862915-6-6zm6 49.5c-4.1421356 0-7.5-3.3578644-7.5-7.5s3.3578644-7.5 7.5-7.5 7.5 3.3578644 7.5 7.5-3.3578644 7.5-7.5 7.5z" fill="#3e2800"/>
+    <path d="m89.2954301 61.9390003c.4560585 1.2683141.7045699 2.6356354.7045699 4.0609997v6h1.5c2.4620372-.0002189 4.4671728 1.9781816 4.5 4.44v15c.0160526 1.203836-.4509571 2.3639032-1.296617 3.2208385-.8456598.8569353-1.99944 1.3392685-3.203383 1.3391615h-27c-2.4852814 0-4.5-2.0147186-4.5-4.5v-15c0-2.4852814 2.0147186-4.5 4.5-4.5h1.5v-6c0-6.627417 5.372583-12 12-12 2.9975478 0 5.7383932 1.0990736 7.8415359 2.9162204l-4.2654615 4.2654616c-.998662-.7424058-2.236069-1.181682-3.5760744-1.181682-3.3137085 0-6 2.6862915-6 6v6h12v-4.7655696z" fill="#b1b1b3" fill-rule="nonzero"/>
+  </g>
+</svg>
\ No newline at end of file
--- a/browser/themes/shared/incontent-icons/cert-error.svg
+++ b/browser/themes/shared/incontent-icons/cert-error.svg
@@ -34,9 +34,9 @@
     </mask>
   </defs>
 
   <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" fill="#999" />
   <use xlink:href="#shape-lock-base" mask="url(#mask-base-cutout)" fill="#999" />
 
   <line x1="2.5" y1="41.5" x2="41" y2="5" stroke="#d92d21" stroke-width="5.5" />
 
-</svg>
+</svg>
\ No newline at end of file
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -3,16 +3,17 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 # This is not a complete / proper jar manifest. It is included by the
 # actual theme-specific manifests, so that shared resources need only
 # be specified once. As a result, the source file paths are relative
 # to the location of the actual manifest.
 
   skin/classic/browser/aboutNetError.css                       (../shared/aboutNetError.css)
+  skin/classic/browser/aboutNetError-new.css                   (../shared/aboutNetError-new.css)
   skin/classic/browser/blockedSite.css                         (../shared/blockedSite.css)
   skin/classic/browser/error-pages.css                         (../shared/error-pages.css)
   skin/classic/browser/aboutRestartRequired.css                (../shared/aboutRestartRequired.css)
 * skin/classic/browser/aboutSessionRestore.css                 (../shared/aboutSessionRestore.css)
   skin/classic/browser/aboutLibrary.css                        (../shared/aboutLibrary.css)
   skin/classic/browser/aboutTabCrashed.css                     (../shared/aboutTabCrashed.css)
   skin/classic/browser/aboutWelcomeBack.css                    (../shared/aboutWelcomeBack.css)
   skin/classic/browser/addons/addon-install-blocked.svg        (../shared/addons/addon-install-blocked.svg)
@@ -211,16 +212,17 @@
 
   skin/classic/browser/translating-16.png                      (../shared/translation/translating-16.png)
   skin/classic/browser/translating-16@2x.png                   (../shared/translation/translating-16@2x.png)
   skin/classic/browser/translation-16.png                      (../shared/translation/translation-16.png)
   skin/classic/browser/translation-16@2x.png                   (../shared/translation/translation-16@2x.png)
   skin/classic/browser/update-badge.svg                        (../shared/update-badge.svg)
   skin/classic/browser/warning.svg                             (../shared/warning.svg)
   skin/classic/browser/cert-error.svg                          (../shared/incontent-icons/cert-error.svg)
+  skin/classic/browser/cert-error-new.svg                      (../shared/incontent-icons/cert-error-new.svg)
   skin/classic/browser/wifi.svg                                (../shared/incontent-icons/wifi.svg)
   skin/classic/browser/tab-crashed.svg                         (../shared/incontent-icons/tab-crashed.svg)
   skin/classic/browser/favicon-search-16.svg                   (../shared/favicon-search-16.svg)
   skin/classic/browser/icon-search-64.svg                      (../shared/incontent-icons/icon-search-64.svg)
   skin/classic/browser/welcome-back.svg                        (../shared/incontent-icons/welcome-back.svg)
   skin/classic/browser/readerMode.svg                          (../shared/reader/readerMode.svg)
   skin/classic/browser/panic-panel/header.png                  (../shared/panic-panel/header.png)
   skin/classic/browser/panic-panel/header@2x.png               (../shared/panic-panel/header@2x.png)
--- a/toolkit/themes/shared/in-content/info-pages.inc.css
+++ b/toolkit/themes/shared/in-content/info-pages.inc.css
@@ -12,17 +12,16 @@
 /* Body and container */
 body {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   min-height: 100vh;
   padding: 40px 48px;
   align-items: center;
-  justify-content: center;
 }
 
 body.wide-container {
   display: block;
 }
 
 .container {
   min-width: var(--in-content-container-min-width);