Bug 1566985 - Part 3: Fixing the height of the TP switch section when TP is disabled. r=nhnt11

This patch fixes the problem that TP switch section has an incorrect
height when the TP is disabled for the site.

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

--HG--
extra : moz-landing-system : lando

browser/base/content/browser-siteProtections.js

@@ -959,6 +959,12 @@ var gProtectionsHandler = {
       "protections-popup-tp-switch-breakage-link"
     ));
   },
+  get _protectionsPopupTPSwitchSection() {
+    delete this._protectionsPopupTPSwitchSection;
+    return (this._protectionsPopupTPSwitchSection = document.getElementById(
+      "protections-popup-tp-switch-section"
+    ));
+  },
   get _protectionsPopupTPSwitch() {
     delete this._protectionsPopupTPSwitch;
     return (this._protectionsPopupTPSwitch = document.getElementById(
@@ -1434,6 +1440,17 @@ var gProtectionsHandler = {
     // Toggle the breakage link according to the current enable state.
     this.toggleBreakageLink();
 
+    // Display a short TP switch section depending on the enable state. We need
+    // to use a separate attribute here since the 'hasException' attribute will
+    // be toggled as well as the TP switch, we cannot rely on that to decide the
+    // height of TP switch section, or it will change when toggling the switch,
+    // which is not desirable for us. So, we need to use a different attribute
+    // here.
+    this._protectionsPopupTPSwitchSection.toggleAttribute(
+      "short",
+      !currentlyEnabled
+    );
+
     // Set the counter of the 'Trackers blocked This Week'.
     // We need to get the statistics of trackers. So far, we haven't implemented
     // this yet. So we use a fake number here. Should be resolved in

browser/themes/shared/controlcenter/panel.inc.css

@@ -796,6 +796,13 @@ description#identity-popup-content-verifier,
   position: relative;
 }
 
+/* This is needed in order to show a correct height if the 'Site not working?'
+   link is not displaying. */
+#protections-popup-tp-switch-section[short] > .protections-popup-tp-switch-label-box,
+#protections-popup-tp-switch-section[short] > .protections-popup-tp-switch-box {
+  min-height: 30px;
+}
+
 .protections-popup-tp-switch-on-header,
 .protections-popup-tp-switch-off-header {
   font-weight: 600;