Bug 1555226 - Part 3: Allow the protections panel to be opened as a mini panel. r=nhnt11

This patch implements the capability for opening the protections panel
as a mini panel. The mini panel is a protections panel which only displays
the header section.

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

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

browser/base/content/browser-siteProtections.js

@@ -17,6 +17,11 @@ var gProtectionsHandler = {
     delete this._protectionsIconBox;
     return this._protectionsIconBox = document.getElementById("tracking-protection-icon-animatable-box");
   },
+  get _protectionsPopupMainView() {
+    delete this._protectionsPopupMainView;
+    return this._protectionsPopupMainView =
+      document.getElementById("protections-popup-mainView");
+  },
   get _protectionsPopupMainViewHeaderLabel() {
     delete this._protectionsPopupMainViewHeaderLabel;
     return this._protectionsPopupMainViewHeaderLabel =
@@ -47,6 +52,13 @@ var gProtectionsHandler = {
     return this._protectionPopupTrackersCounterDescription =
       document.getElementById("protections-popup-trackers-blocked-counter-description");
   },
+  get _protectionsPopupToastTimeout() {
+    delete this._protectionsPopupToastTimeout;
+    XPCOMUtils.defineLazyPreferenceGetter(this, "_protectionsPopupToastTimeout",
+                                          "browser.protections_panel.toast.timeout",
+                                          5000);
+    return this._protectionsPopupToastTimeout;
+  },
 
   handleProtectionsButtonEvent(event) {
     event.stopPropagation();
@@ -56,18 +68,7 @@ var gProtectionsHandler = {
       return; // Left click, space or enter only
     }
 
-    // Make sure that the display:none style we set in xul is removed now that
-    // the popup is actually needed
-    this._protectionsPopup.hidden = false;
-
-    // Refresh strings.
-    this.refreshProtectionsPopup();
-
-    // Now open the popup, anchored off the primary chrome element
-    PanelMultiView.openPopup(this._protectionsPopup, gIdentityHandler._identityIcon, {
-      position: "bottomcenter topleft",
-      triggerEvent: event,
-    }).catch(Cu.reportError);
+    this.showProtectionsPopup({event});
   },
 
   onPopupShown(event) {
@@ -163,4 +164,53 @@ var gProtectionsHandler = {
       //   "protections.trackers_counter", [cnt]);
       `Trackers blocked this week: ${trackerCount.toLocaleString()}`;
   },
+
+  /**
+   * Showing the protections popup.
+   *
+   * @param {Object} options
+   *                 The object could have two properties.
+   *                 event:
+   *                   The event triggers the protections popup to be opened.
+   *                 toast:
+   *                   A boolean to indicate if we need to open the protections
+   *                   popup as a mini panel. A mini panel only has a header
+   *                   section and will be hidden after a certain amount of
+   *                   time.
+   */
+  showProtectionsPopup(options = {}) {
+    const {event, toast} = options;
+
+    // We need to clear the toast timer if it exists before showing the
+    // protections popup.
+    if (this._toastPanelTimer) {
+      clearTimeout(this._toastPanelTimer);
+      delete this._toastPanelTimer;
+    }
+
+    // Make sure that the display:none style we set in xul is removed now that
+    // the popup is actually needed
+    this._protectionsPopup.hidden = false;
+
+    this._protectionsPopup.toggleAttribute("toast", !!toast);
+    if (!toast) {
+      // Refresh strings if we want to open it as a standard protections popup.
+      this.refreshProtectionsPopup();
+    }
+
+    if (toast) {
+      this._protectionsPopup.addEventListener("popupshown", () => {
+        this._toastPanelTimer = setTimeout(() => {
+          PanelMultiView.hidePopup(this._protectionsPopup);
+          delete this._toastPanelTimer;
+        }, this._protectionsPopupToastTimeout);
+      }, {once: true});
+    }
+
+    // Now open the popup, anchored off the primary chrome element
+    PanelMultiView.openPopup(this._protectionsPopup, gIdentityHandler._identityIcon, {
+      position: "bottomcenter topleft",
+      triggerEvent: event,
+    }).catch(Cu.reportError);
+  },
 };

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

@@ -15,11 +15,13 @@
                   mainViewId="protections-popup-mainView">
     <panelview id="protections-popup-mainView"
                descriptionheightworkaround="true">
-      <vbox id="protections-popup-mainView-panel-header">
-        <label>
+      <hbox id="protections-popup-mainView-panel-header">
+        <label id="protections-popup-main-header-label">
           <html:span id="protections-popup-mainView-panel-header-span"/>
         </label>
-      </vbox>
+        <description id="protections-popup-toast-panel-tp-on-desc">Enhanced Tracking Protection is ON for this site</description>
+        <description id="protections-popup-toast-panel-tp-off-desc">Enhanced Tracking Protection is OFF for this site</description>
+      </hbox>
 
       <hbox id="protections-popup-tp-switch-section" class="identity-popup-section">
         <vbox id="protections-popup-tp-switch-label-box" flex="1">

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

@@ -87,6 +87,15 @@
   max-width: var(--protections-popup-width);
 }
 
+#protections-popup[toast] #protections-popup-mainView > :not(#protections-popup-mainView-panel-header),
+#protections-popup[toast] #protections-popup-main-header-label {
+  display: none;
+}
+
+#protections-popup[toast] #protections-popup-mainView-panel-header {
+  min-height: 30px;
+}
+
 .identity-popup-section {
   border-top: 1px solid var(--panel-separator-color);
 }
@@ -179,6 +188,7 @@
 .identity-popup-content-blocking-list-item > label,
 #identity-popup-mainView-panel-header > label,
 #protections-popup-mainView-panel-header > label,
+#protections-popup-mainView-panel-header > description,
 #identity-popup-trackersView > .panel-header,
 #identity-popup-securityView > .panel-header,
 #identity-popup-breakageReportView > .panel-header,
@@ -221,7 +231,9 @@
 }
 
 #identity-popup-mainView-panel-header-span,
-#protections-popup-mainView-panel-header-span {
+#protections-popup-mainView-panel-header-span,
+#protections-popup-toast-panel-tp-on-desc,
+#protections-popup-toast-panel-tp-off-desc {
   display: inline-block;
   font-weight: 600;
   text-align: center;
@@ -795,8 +807,14 @@ description#identity-popup-content-verifier,
   opacity: 0.8;
 }
 
+#protections-popup-mainView-panel-header > description {
+  display: none;
+}
+
 #protections-popup:not([hasException]) #protections-popup-tp-switch-on-header,
-#protections-popup[hasException] #protections-popup-tp-switch-off-header {
+#protections-popup[hasException] #protections-popup-tp-switch-off-header,
+#protections-popup:not([hasException])[toast] #protections-popup-toast-panel-tp-on-desc,
+#protections-popup[hasException][toast] #protections-popup-toast-panel-tp-off-desc {
   display: unset;
 }