Bug 1105704 - Fix UI issues with SSL error reporting. r=dao, a=lmandel
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 27 Jan 2015 23:39:05 -0800
changeset 250097 4b6bec5f7ff7
parent 250096 2aa1ca037446
child 250098 963bd7dabda0
push id4502
push userryanvm@gmail.com
push date2015-02-27 21:16 +0000
treeherdermozilla-beta@9fb3cc1f7ff6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, lmandel
bugs1105704
milestone37.0
Bug 1105704 - Fix UI issues with SSL error reporting. r=dao, a=lmandel
browser/base/content/aboutNetError.xhtml
browser/themes/shared/aboutNetError.css
toolkit/themes/shared/in-content/common.inc.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...
+            var 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;
@@ -69,53 +70,59 @@ ul {
  * not-allowed. Override the disabled cursor behaviour since we will never show
  * the button disabled as the initial state. */
 button:disabled {
   cursor: pointer;
 }
 
 div#certificateErrorReporting {
   display: none;
-  float:right;
+  float: right;
   /* Align with the "Try Again" button */
-  margin-top:24px;
-  margin-right:24px;
-}
-
-div#certificateErrorReporting a,
-div#certificateErrorReportingPanel a {
-  color: #0095DD;
+  margin-top: 24px;
+  -moz-margin-end: 24px;
 }
 
 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: 0;
 }
 
 span#hostname {
   font-weight: bold;
 }
 
 #automaticallyReportInFuture {
   cursor: pointer;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -379,17 +379,16 @@ xul|textbox[disabled="true"] {
   opacity: 0.5;
 }
 
 /* Links */
 
 html|a,
 xul|*.text-link,
 xul|*.inline-link {
-  font-size: 1.25rem;
   line-height: 22px;
   color: #0095dd;
   text-decoration: none;
 }
 
 html|a:hover,
 xul|*.text-link:hover,
 xul|*.inline-link:hover {