Bug 1736701 - fix display of error reporting checkbox on x-frame-options:deny pages, r=pbz,desktop-theme-reviewers

#overrideWeakCryptoPanel was removed in bug 1321778, so the CSS is dead and I removed it.
Otherwise I'm dragging the 2 advanced panel bits into using .hidden instead of
inline CSS, and using the single 'advanced-panel' class to handle more of their styling,
with the box background/border moving to an ID selector to keep it specific to the
bad cert bits.

Differential Revision: https://phabricator.services.mozilla.com/D129027

browser/base/content/certerror/aboutNetError.js

@@ -109,18 +109,9 @@ function retryThis(buttonEl) {
   buttonEl.disabled = true;
 }
 
-function toggleDisplay(node) {
-  const toggle = {
-    "": "block",
-    none: "block",
-    block: "none",
-  };
-  return (node.style.display = toggle[node.style.display]);
-}
-
 function showBlockingErrorReporting() {
   // Display blocking error reporting UI for XFO error and CSP error.
-  document.getElementById("blockingErrorReporting").style.display = "block";
+  document.getElementById("blockingErrorReporting").hidden = false;
 }
 
 function showPrefChangeContainer() {
@@ -154,12 +145,10 @@ function toggleCertErrorDebugInfoVisibility(shouldShow) {
   if (shouldShow === undefined) {
     shouldShow = debugInfo.hidden;
   }
+  debugInfo.hidden = !shouldShow;
   if (shouldShow) {
-    debugInfo.hidden = false;
     copyButton.scrollIntoView({ block: "start", behavior: "smooth" });
     copyButton.focus();
-  } else {
-    debugInfo.hidden = true;
   }
 }
 
@@ -176,7 +165,7 @@ function setupAdvancedButton() {
     .addEventListener("click", togglePanelVisibility);
 
   function togglePanelVisibility() {
-    toggleDisplay(panel);
+    panel.hidden = !panel.hidden;
     if (gIsCertError) {
       // Toggling the advanced panel must ensure that the debugging
       // information panel is hidden as well, since it's opened by the
@@ -196,11 +185,7 @@ function setupAdvancedButton() {
   }
 
   if (getCSSClass() == "expertBadCert") {
-    toggleDisplay(document.getElementById("badCertAdvancedPanel"));
-    // Toggling the advanced panel must ensure that the debugging
-    // information panel is hidden as well, since it's opened by the
-    // error code link in the advanced panel.
-    toggleCertErrorDebugInfoVisibility(false);
+    panel.hidden = false;
   }
 
   disallowCertOverridesIfNeeded();

browser/base/content/certerror/aboutNetError.xhtml

@@ -179,7 +179,7 @@
       </div>
 
       <div id="advancedPanelContainer">
-        <div id="badCertAdvancedPanel" class="advanced-panel">
+        <div id="badCertAdvancedPanel" class="advanced-panel" hidden="">
           <p id="badCertTechnicalInfo"/>
           <a id="viewCertificate" href="javascript:void(0)">&viewCertificate.label;</a>
           <div id="advancedPanelButtonContainer" class="button-container">
@@ -191,14 +191,14 @@
           </div>
         </div>
 
-        <div id="blockingErrorReporting">
+        <div id="blockingErrorReporting" class="advanced-panel" hidden="">
             <p class="toggle-container-with-text">
                 <input type="checkbox" id="automaticallyReportBlockingInFuture" role="checkbox"/>
                 <label for="automaticallyReportBlockingInFuture" >&errorReporting.automatic2;</label>
             </p>
         </div>
 
-        <div id="certificateErrorDebugInformation" hidden="">
+        <div id="certificateErrorDebugInformation" class="advanced-panel" hidden="">
           <button id="copyToClipboardTop" data-telemetry-id="clipboard_button_top">&certerror.copyToClipboard.label;</button>
           <div id="certificateErrorText"/>
           <button id="copyToClipboardBottom" data-telemetry-id="clipboard_button_bot">&certerror.copyToClipboard.label;</button>

browser/themes/shared/aboutNetError.css

@@ -76,6 +76,10 @@ button:disabled {
   display: none;
 }
 
+#openInNewWindowContainer > p {
+  margin-bottom: 0;
+}
+
 #certErrorAndCaptivePortalButtonContainer {
   display: none;
 }
@@ -126,8 +130,10 @@ body:not(.neterror) #advancedButton {
 }
 
 #blockingErrorReporting {
-  display: none;
   padding-bottom: 10px;
+  /* Pull a bit closer to the top than the other .advanced-panel containers
+   * as this is just a checkbox. */
+  margin-top: 1.2em;
 }
 
 #advancedPanelContainer {
@@ -136,26 +142,17 @@ body:not(.neterror) #advancedButton {
   left: 0;
 }
 
-.advanced-panel {
-  /* Hidden until the link is clicked */
-  display: none;
+#badCertAdvancedPanel {
   background-color: var(--in-content-box-background);
   border: 1px solid var(--in-content-box-border-color);
+}
+
+.advanced-panel {
   margin: 48px auto;
   min-width: var(--in-content-container-min-width);
   max-width: var(--in-content-container-max-width);
 }
 
-#overrideWeakCryptoPanel {
-  display: none;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-content: space-between;
-  align-items: flex-start;
-  margin-top: 1em;
-}
-
 .mitm-name,
 #hostname {
   font-weight: bold;
@@ -179,7 +176,7 @@ body:not(.neterror) #advancedButton {
   background-color: var(--in-content-box-info-background) !important;
   border-top: 1px solid var(--in-content-border-color);
   width: 100%;
-  padding: 1em 17.5%;
+  padding: 1em 3%;
   box-sizing: border-box;
 }