Bug 1555230 - Part 1: Add the footer section to Protection Panel. r=nhnt11

This patch implements the footer section of the Protection Panel.

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

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

browser/base/content/browser-siteProtections.js

@@ -32,6 +32,16 @@ var gProtectionsHandler = {
     return this._protectionPopupSettingsButton =
       document.getElementById("protections-popup-settings-button");
   },
+  get _protectionPopupFooter() {
+    delete this._protectionPopupFooter;
+    return this._protectionPopupFooter =
+      document.getElementById("protections-popup-footer");
+  },
+  get _protectionPopupTrackersCounterDescription() {
+    delete this._protectionPopupTrackersCounterDescription;
+    return this._protectionPopupTrackersCounterDescription =
+      document.getElementById("protections-popup-trackers-blocked-counter-description");
+  },
 
   handleProtectionsButtonEvent(event) {
     event.stopPropagation();
@@ -98,6 +108,12 @@ var gProtectionsHandler = {
       !this._protectionsPopup.hasAttribute("hasException");
 
     this._protectionsPopupTPSwitch.toggleAttribute("enabled", 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
+    // Bug 1555231.
+    this.setTrackersBlockedCounter(244051);
   },
 
   async onTPSwitchCommand(event) {
@@ -128,4 +144,11 @@ var gProtectionsHandler = {
     PanelMultiView.hidePopup(this._protectionsPopup);
     delete this._TPSwitchCommanding;
   },
+
+  setTrackersBlockedCounter(trackerCount) {
+    this._protectionPopupTrackersCounterDescription.textContent =
+      // gNavigatorBundle.getFormattedString(
+      //   "protections.trackers_counter", [cnt]);
+      `Trackers blocked this week: ${trackerCount.toLocaleString()}`;
+  },
 };

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

@@ -42,6 +42,15 @@
           <label class="protections-popup-settings-label" flex="1">Protection Settings</label>
         </toolbarbutton>
       </vbox>
+
+      <hbox id="protections-popup-footer">
+        <description id="protections-popup-trackers-blocked-counter-description"
+                     flex="1"/>
+        <label id="protections-popup-show-full-report-link"
+               is="text-link"
+               useoriginprincipal="true"
+               href="about:protections">Show Full Report</label>
+      </hbox>
     </panelview>
   </panelmultiview>
 </panel>

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

@@ -192,7 +192,9 @@
 #identity-popup-securityView-body > description,
 #identity-popup-permissions-content > description,
 #identity-popup-content-blocking-content > description,
-.protections-popup-settings-label {
+.protections-popup-settings-label,
+#protections-popup-footer > description,
+#protections-popup-footer > label {
   font-size: 110%;
   margin: 0;
 }
@@ -878,3 +880,20 @@ description#identity-popup-content-verifier,
   height: 16px;
   list-style-image: url(chrome://browser/skin/settings.svg);
 }
+
+#protections-popup-footer {
+  background-color: var(--arrowpanel-dimmed);
+  border-top: 1px solid var(--panel-separator-color);
+  min-height: 40px;
+  -moz-box-align: center;
+  /* The horizontal padding aligns the content of footer with other sections in
+     the protections panel */
+  padding: 4px calc(1em + 4px);
+}
+
+#protections-popup-trackers-blocked-counter-description {
+  font-weight: 600;
+  /* This padding is added to align the counter text with the beginning of texts
+     in other sections. */
+  padding-inline-start: 6px;
+}