Bug 1555237 - Implement "No Trackers Detected" section. r=johannh

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

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

browser/base/content/browser-siteProtections.js

@@ -1222,6 +1222,13 @@ var gProtectionsHandler = {
     return SocialTracking.sessionPageLoad;
   },
 
+  get noTrackersDetectedDescription() {
+    delete this.noTrackersDetectedDescription;
+    return (this.noTrackersDetectedDescription = document.getElementById(
+      "protections-popup-no-trackers-found-description"
+    ));
+  },
+
   get blockingSectionDescription() {
     delete this.blockingSectionDescription;
     return (this.blockingSectionDescription = document.getElementById(
@@ -1546,6 +1553,7 @@ var gProtectionsHandler = {
 
     let anyDetected = false;
     let anyBlocking = false;
+    this.noTrackersDetectedDescription.hidden = false;
     this.blockingSectionDescription.hidden = true;
     this.notBlockingSectionDescription.hidden = true;
 
@@ -1568,6 +1576,10 @@ var gProtectionsHandler = {
       anyBlocking = anyBlocking || blocker.activated;
     }
 
+    if (anyDetected) {
+      this.noTrackersDetectedDescription.hidden = true;
+    }
+
     // Check whether the user has added an exception for this site.
     let hasException = ContentBlockingAllowList.includes(
       gBrowser.selectedBrowser

browser/components/controlcenter/content/protectionsPanel.inc.xul

@@ -50,7 +50,8 @@
       </hbox>
 
       <!-- Tracking Protection Section -->
-      <hbox id="tracking-protection-container" class="protections-popup-section">
+      <vbox id="tracking-protection-container" class="protections-popup-section">
+        <description id="protections-popup-no-trackers-found-description">&protections.noTrackersFound.description;</description>
         <tooltip id="protections-popup-not-blocking-why-etp-on-tooltip">&protections.notBlocking.why.etpOn.tooltip;</tooltip>
         <tooltip id="protections-popup-not-blocking-why-etp-off-tooltip">&protections.notBlocking.why.etpOff.tooltip;</tooltip>
         <vbox id="protections-popup-content" flex="1">
@@ -104,7 +105,7 @@
             </toolbarbutton>
           </vbox>
         </vbox>
-      </hbox>
+      </vbox>
 
       <vbox id="protections-popup-footer" class="protections-popup-section">
         <toolbarbutton id="protections-popup-settings-button"

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

@@ -598,6 +598,13 @@ description#identity-popup-content-verifier,
 
 /* Content Blocking categories */
 
+#protections-popup-no-trackers-found-description {
+  margin: 4.85em 7.25em;
+  font-size: 1.1em;
+  text-align: center;
+  color: #737373;
+}
+
 #protections-popup-content {
   padding: 0;
   margin: 0 0 10px 0;
@@ -611,6 +618,7 @@ description#identity-popup-content-verifier,
   font-weight: 600;
 }
 
+:root[lwt-popup-brighttext] #protections-popup-no-trackers-found-description,
 :root[lwt-popup-brighttext] #protections-popup-blocking-section-header,
 :root[lwt-popup-brighttext] #protections-popup-not-blocking-section-header {
   color: #f9f9fa;