Bug 1486915 - Use the "hidden" attribute instead of a "hide" class in aboutPrivateBrowsing.js r=johannh

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

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

browser/components/privatebrowsing/content/aboutPrivateBrowsing.css

@@ -4,7 +4,3 @@ body[tpEnabled] .showTpDisabled,
 body:not([tpEnabled]) .showTpEnabled {
   display: none !important;
 }
-
-.hide {
-  display: none;
-}

browser/components/privatebrowsing/content/aboutPrivateBrowsing.js

@@ -24,11 +24,11 @@ function updateTPInfo() {
   let tpDescription = document.getElementById("tpDescription");
   let cbDescription = document.getElementById("cbDescription");
 
-  tpTitle.classList.toggle("hide", contentBlockingUIEnabled);
-  tpDescription.classList.toggle("hide", contentBlockingUIEnabled);
+  tpTitle.toggleAttribute("hidden", contentBlockingUIEnabled);
+  tpDescription.toggleAttribute("hidden", contentBlockingUIEnabled);
 
-  cbTitle.classList.toggle("hide", !contentBlockingUIEnabled);
-  cbDescription.classList.toggle("hide", !contentBlockingUIEnabled);
+  cbTitle.toggleAttribute("hidden", !contentBlockingUIEnabled);
+  cbDescription.toggleAttribute("hidden", !contentBlockingUIEnabled);
 
   let globalTrackingEnabled = RPMGetBoolPref(TP_ENABLED_PREF);
   let trackingEnabled = globalTrackingEnabled || RPMGetBoolPref(TP_PB_ENABLED_PREF);
@@ -37,13 +37,13 @@ function updateTPInfo() {
     let contentBlockingEnabled = RPMGetBoolPref(CB_ENABLED_PREF);
     trackingEnabled = trackingEnabled && contentBlockingEnabled;
   } else {
-    title.classList.toggle("hide", trackingEnabled);
-    titleTracking.classList.toggle("hide", !trackingEnabled);
+    title.toggleAttribute("hidden", trackingEnabled);
+    titleTracking.toggleAttribute("hidden", !trackingEnabled);
   }
 
   // if tracking protection is enabled globally we don't even give the user
   // a choice here by hiding the toggle completely.
-  tpButton.classList.toggle("hide", globalTrackingEnabled);
+  tpButton.toggleAttribute("hidden", globalTrackingEnabled);
   tpToggle.checked = trackingEnabled;
 
   tpSubHeader.classList.toggle("tp-off", !trackingEnabled);

browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml

@@ -34,7 +34,7 @@
     <div class="showPrivate container">
       <h1 class="title">
         <span id="title">&privateBrowsing.title;</span>
-        <span id="titleTracking" class="hide">&privateBrowsing.title.tracking;</span>
+        <span id="titleTracking" hidden="hidden">&privateBrowsing.title.tracking;</span>
       </h1>
       <section class="section-main">
         <p>&aboutPrivateBrowsing.info.notsaved.before;<strong>&aboutPrivateBrowsing.info.notsaved.emphasize;</strong>&aboutPrivateBrowsing.info.notsaved.after;</p>