Bug 1105704 - Fix UI issues with SSL error reporting. r=dao
☠☠ backed out by e86e11592da1 ☠ ☠
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 27 Jan 2015 18:51:10 +0100
changeset 254806 d56201330a5b8481e58612a65fd0c413faa64995
parent 254805 b502cae6cf9b9c3d44a35f026c56eae126e83ac8
child 254807 e86e11592da17869dde5f0ea72add4e96a5d70a4
push id721
push userjlund@mozilla.com
push dateTue, 21 Apr 2015 23:03:33 +0000
treeherdermozilla-release@d27c9211ebb3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1105704
milestone38.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 1105704 - Fix UI issues with SSL error reporting. r=dao
browser/base/content/aboutNetError.xhtml
browser/themes/shared/aboutNetError.css
--- a/browser/base/content/aboutNetError.xhtml
+++ b/browser/base/content/aboutNetError.xhtml
@@ -212,19 +212,25 @@
 
         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";
         }
 
         window.addEventListener("AboutNetErrorOptions", function(evt) {
-        // Pinning errors are of type nssFailure2 (don't ask me why)
+        // Pinning errors are of type nssFailure2
           if (getErrorCode() == "nssFailure2" && !errTitle.hasAttribute("sslv3")) {
-          // TODO: and the pref is set...
+            let learnMoreLink = document.getElementById("learnMoreLink");
+            // nssFailure2 also gets us other non-overrideable errors. Choose
+            // a "learn more" link based on description:
+            if (getDescription().contains("mozilla_pkix_error_key_pinning_failure")) {
+              learnMoreLink.href = "https://support.mozilla.org/kb/certificate-pinning-reports";
+            }
+
             var options = JSON.parse(evt.detail);
             if (options && options.enabled) {
               var checkbox = document.getElementById('automaticallyReportInFuture');
               showCertificateErrorReporting();
               if (options.automatic) {
                 // set the checkbox
                 checkbox.checked = true;
               }
@@ -471,18 +477,17 @@
       </div>
 
       <div id="certificateErrorReportingPanel">
         <p>&errorReporting.longDesc;</p>
         <p>
           <input type="checkbox" id="automaticallyReportInFuture" />
           <label for="automaticallyReportInFuture" id="automaticallyReportInFuture">&errorReporting.automatic;</label>
         </p>
-        <!-- TODO add link to relevant page on sumo -->
-        <a href="https://support.mozilla.org/kb/certificate-pinning-reports" target="new">&errorReporting.learnMore;</a>
+        <a href="https://support.mozilla.org/kb/tls-error-reports" id="learnMoreLink" target="new">&errorReporting.learnMore;</a>
         <span id="reportingState">
           <button id="reportCertificateError">&errorReporting.report;</button>
           <button id="reportCertificateErrorRetry">&errorReporting.tryAgain;</button>
           <span id="reportSendingMessage">&errorReporting.sending;</span>
           <span id="reportSentMessage">&errorReporting.sent;</span>
         </span>
       </div>
 
--- a/browser/themes/shared/aboutNetError.css
+++ b/browser/themes/shared/aboutNetError.css
@@ -23,16 +23,17 @@ ul > li, ol > li {
   margin-bottom: .5em;
 }
 
 ul {
   list-style: disc;
 }
 
 #errorPageContainer {
+  position: relative;
   min-width: 320px;
   max-width: 512px;
 }
 
 #errorTitleText {
   background: url("aboutNetError_info.svg") left 0 no-repeat;
   background-size: 1.2em;
   -moz-margin-start: -2em;
@@ -75,47 +76,53 @@ button:disabled {
 div#certificateErrorReporting {
   display: none;
   float:right;
   /* Align with the "Try Again" button */
   margin-top:24px;
   margin-right:24px;
 }
 
-div#certificateErrorReporting a,
-div#certificateErrorReportingPanel a {
-  color: #0095DD;
-}
-
 div#certificateErrorReporting a {
   text-decoration: none;
 }
 
 div#certificateErrorReporting a:hover {
   text-decoration: underline;
 }
 
 span.downArrow {
-  font-size: 0.9em;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0.6em;
+  -moz-margin-start: 0.5em;
+  transform: scaleY(0.7);
 }
 
 div#certificateErrorReportingPanel {
   /* Hidden until the link is clicked */
   display: none;
   background-color: white;
   border: 1px lightgray solid;
   /* Don't use top padding because the default p style has top padding, and it
    * makes the overall div look uneven */
   padding: 0 12px 12px 12px;
   box-shadow: 0 0 4px #ddd;
-  position: relative;
+  font-size: 0.9em;
+  position: absolute;
   width: 75%;
+  margin-top: 10px;
+}
+
+div#certificateErrorReportingPanel:-moz-dir(ltr) {
   left: 34%;
-  font-size: 0.9em;
-  top: 8px;
+}
+
+div#certificateErrorReportingPanel:-moz-dir(rtl) {
+  right: 34%;
 }
 
 span#hostname {
   font-weight: bold;
 }
 
 #automaticallyReportInFuture {
   cursor: pointer;