Bug 1247176 - Fix alignment issues in about:certerror. r=Gijs draft
authorNihanth Subramanya <nhnt11@gmail.com>
Tue, 26 Apr 2016 14:42:15 -0700
changeset 356659 d76cecc9d2e633820931932bfa0fca445d97b38e
parent 356652 597390d44c49cb5c89260feb4f5e1e6ef2eef15c
child 519449 4cb08cb850216b564260a7a580b566f33c9b3136
push id16565
push usernhnt11@gmail.com
push dateTue, 26 Apr 2016 21:45:11 +0000
reviewersGijs
bugs1247176
milestone49.0a1
Bug 1247176 - Fix alignment issues in about:certerror. r=Gijs MozReview-Commit-ID: Vzk0HnPifM
browser/base/content/aboutNetError.xhtml
browser/themes/shared/aboutNetError.css
--- a/browser/base/content/aboutNetError.xhtml
+++ b/browser/base/content/aboutNetError.xhtml
@@ -397,16 +397,17 @@
           // Initialize the error code link embedded in the error message to
           // display debug information about the cert error.
           var errorCode = document.getElementById("errorCode");
           if (errorCode) {
             errorCode.href = "#technicalInformation";
             errorCode.addEventListener("click", () => {
               var div = document.getElementById("certificateErrorDebugInformation");
               if (toggleDisplay(div) == "block") {
+                div.style.top = document.body.scrollHeight + "px";
                 div.scrollIntoView({block: "start", behavior: "smooth"});
               }
             }, false);
           }
         }
 
         // Initialize the cert domain link.
         var link = document.getElementById('cert_domain_link');
--- a/browser/themes/shared/aboutNetError.css
+++ b/browser/themes/shared/aboutNetError.css
@@ -63,27 +63,33 @@ body.certerror #netErrorButtonContainer 
 body.certerror #advancedButton {
   display: block;
 }
 
 #certificateErrorReporting {
   display: none;
 }
 
+.container {
+  position: relative;
+}
+
 .advanced-panel {
   /* 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;
   font-size: 0.9em;
   margin-top: 24px;
+  margin-bottom: 24px;
+  position: absolute;
 }
 
 #overrideWeakCryptoPanel {
   display: none;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-content: space-between;
@@ -119,17 +125,16 @@ span#hostname {
 }
 
 #certificateErrorDebugInformation {
   display: none;
   background-color: var(--in-content-box-background-hover) !important;
   border-top: 1px solid var(--in-content-border-color);
   position: absolute;
   left: 0%;
-  top: 100%;
   width: 65%;
   padding: 1em 17.5%;
 }
 
 #certificateErrorText {
   font-family: monospace;
   white-space: pre-wrap;
   padding: 1em 0;