Bug 1246162 - Position advanced panels absolutely below the main content in about:neterror. r=Gijs draft
authorNihanth Subramanya <nhnt11@gmail.com>
Tue, 26 Apr 2016 14:42:15 -0700
changeset 363132 381309f4f68a32cc6b8d29611560d9b0e924dfba
parent 362998 89e43e5ca199c1f9caf2c079a118b2388aeb10b2
child 519945 2e410519d7171ad880a13d71322385e328cd0d8d
push id17106
push usernhnt11@gmail.com
push dateWed, 04 May 2016 00:52:25 +0000
reviewersGijs
bugs1246162
milestone49.0a1
Bug 1246162 - Position advanced panels absolutely below the main content in about:neterror. 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
@@ -595,31 +595,33 @@
            init for other error types .-->
       <div id="certificateErrorReporting">
         <p>
           <input type="checkbox" id="automaticallyReportInFuture" />
           <label for="automaticallyReportInFuture" id="automaticallyReportInFuture">&errorReporting.automatic2;</label>
         </p>
       </div>
 
-      <div id="weakCryptoAdvancedPanel" class="advanced-panel">
-        <div id="weakCryptoAdvancedDescription">
-          <p>&weakCryptoAdvanced.longDesc;</p>
+      <div id="advancedPanelContainer">
+        <div id="weakCryptoAdvancedPanel" class="advanced-panel">
+          <div id="weakCryptoAdvancedDescription">
+            <p>&weakCryptoAdvanced.longDesc;</p>
+          </div>
+          <div id="advancedLongDesc" />
+          <div id="overrideWeakCryptoPanel">
+            <a id="overrideWeakCrypto" href="#">&weakCryptoAdvanced.override;</a>
+          </div>
         </div>
-        <div id="advancedLongDesc" />
-        <div id="overrideWeakCryptoPanel">
-          <a id="overrideWeakCrypto" href="#">&weakCryptoAdvanced.override;</a>
+
+        <div id="badCertAdvancedPanel" class="advanced-panel">
+          <p id="badCertTechnicalInfo"/>
+          <button id="exceptionDialogButton">&securityOverride.exceptionButtonLabel;</button>
         </div>
       </div>
 
-      <div id="badCertAdvancedPanel" class="advanced-panel">
-        <p id="badCertTechnicalInfo"/>
-        <button id="exceptionDialogButton">&securityOverride.exceptionButtonLabel;</button>
-      </div>
-
     </div>
 
     <div id="certificateErrorDebugInformation">
       <a name="technicalInformation"></a>
       <button id="copyToClipboard">&certerror.copyToClipboard.label;</button>
       <div id="certificateErrorText"/>
       <button id="copyToClipboard">&certerror.copyToClipboard.label;</button>
     </div>
--- a/browser/themes/shared/aboutNetError.css
+++ b/browser/themes/shared/aboutNetError.css
@@ -63,27 +63,35 @@ body.certerror #netErrorButtonContainer 
 body.certerror #advancedButton {
   display: block;
 }
 
 #certificateErrorReporting {
   display: none;
 }
 
+.container {
+  position: relative;
+}
+
+#advancedPanelContainer {
+  position: absolute;
+  padding: 24px 0;
+}
+
 .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;
 }
 
 #overrideWeakCryptoPanel {
   display: none;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-content: space-between;