Bug 1555231 - Part 4: Implement the number of blocked tracker in the footer section. r=nhnt11

This patch replaces the fake tracker numbers with the real data from the
TrackingDBService. We will pre-fetch the counter while hovering on the
shield icon in order to avoid a flicker on updating the counter. And we
make the tracker counter be hidden by default, then display it when
there is at least one record. We also add a css transition for
avoiding the flicker.

In addition, we rename some member variable in gProtectionsHandler.

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

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

browser/base/content/browser-siteProtections.js

@@ -1085,21 +1085,27 @@ var gProtectionsHandler = {
       "protections-popup-tp-switch"
     ));
   },
-  get _protectionPopupSettingsButton() {
-    delete this._protectionPopupSettingsButton;
-    return (this._protectionPopupSettingsButton = document.getElementById(
+  get _protectionsPopupSettingsButton() {
+    delete this._protectionsPopupSettingsButton;
+    return (this._protectionsPopupSettingsButton = document.getElementById(
       "protections-popup-settings-button"
     ));
   },
-  get _protectionPopupFooter() {
-    delete this._protectionPopupFooter;
-    return (this._protectionPopupFooter = document.getElementById(
+  get _protectionsPopupFooter() {
+    delete this._protectionsPopupFooter;
+    return (this._protectionsPopupFooter = document.getElementById(
       "protections-popup-footer"
     ));
   },
-  get _protectionPopupTrackersCounterDescription() {
-    delete this._protectionPopupTrackersCounterDescription;
-    return (this._protectionPopupTrackersCounterDescription = document.getElementById(
+  get _protectionsPopupTrackersCounterBox() {
+    delete this._protectionsPopupTrackersCounterBox;
+    return (this._protectionsPopupTrackersCounterBox = document.getElementById(
+      "protections-popup-trackers-blocked-counter-box"
+    ));
+  },
+  get _protectionsPopupTrackersCounterDescription() {
+    delete this._protectionsPopupTrackersCounterDescription;
+    return (this._protectionsPopupTrackersCounterDescription = document.getElementById(
       "protections-popup-trackers-blocked-counter-description"
     ));
   },
@@ -1342,6 +1348,12 @@ var gProtectionsHandler = {
     if (event.target == this._protectionsPopup) {
       window.removeEventListener("focus", this, true);
       gIdentityHandler._trackingProtectionIconContainer.removeAttribute("open");
+
+      // Hide the tracker counter when the popup get hidden.
+      this._protectionsPopupTrackersCounterBox.toggleAttribute(
+        "showing",
+        false
+      );
     }
   },
 
@@ -1364,6 +1376,10 @@ var gProtectionsHandler = {
     }
     this._updatingFooter = true;
 
+    // Get the tracker count and set it to the counter in the footer.
+    const trackerCount = await TrackingDBService.sumAllEvents();
+    this.setTrackersBlockedCounter(trackerCount);
+
     // Try to get the earliest recorded date in case that there was no record
     // during the initiation but new records come after that.
     await this.maybeUpdateEarliestRecordedDateTooltip();
@@ -1570,12 +1586,6 @@ var gProtectionsHandler = {
 
     // Update the tooltip of the blocked tracker counter.
     this.maybeUpdateEarliestRecordedDateTooltip();
-
-    // 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
-    // Bug 1555231.
-    this.setTrackersBlockedCounter(244051);
   },
 
   disableForCurrentPage() {
@@ -1635,10 +1645,19 @@ var gProtectionsHandler = {
   },
 
   setTrackersBlockedCounter(trackerCount) {
-    this._protectionPopupTrackersCounterDescription.textContent =
-      // gNavigatorBundle.getFormattedString(
-      //   "protections.trackers_counter", [cnt]);
-      `${trackerCount.toLocaleString()} Blocked`;
+    let forms = gNavigatorBundle.getString(
+      "protections.footer.blockedTrackerCounter.description"
+    );
+    this._protectionsPopupTrackersCounterDescription.textContent = PluralForm.get(
+      trackerCount,
+      forms
+    ).replace("#1", trackerCount);
+
+    // Show the counter if the number of tracker is not zero.
+    this._protectionsPopupTrackersCounterBox.toggleAttribute(
+      "showing",
+      trackerCount != 0
+    );
   },
 
   /**

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

@@ -920,6 +920,14 @@ description#identity-popup-content-verifier,
 
 #protections-popup-trackers-blocked-counter-box {
   margin-inline-end: calc(4px + 1em);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 200ms linear;
+}
+
+#protections-popup-trackers-blocked-counter-box[showing] {
+  visibility: visible;
+  opacity: 1;
 }
 
 #protections-popup-trackers-blocked-counter-description {