Bug 1246162 - Position advanced panels absolutely below the main content in about:neterror. r=Gijs
MozReview-Commit-ID: Vzk0HnPifM
--- 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;