Bug 1555226 - Part 3: Allow the protections panel to be opened as a mini panel. r=nhnt11
authorTim Huang <tihuang@mozilla.com>
Fri, 28 Jun 2019 12:49:09 +0000
changeset 543772 ab2c77c1aa02d55eed7d5425263fd0a60a3a65eb
parent 543771 8e13f45f0d266210e196c040baac7a71fe66f36b
child 543773 ad5b7db6a3c22272f0c87f67c61242929ba4cdb1
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnhnt11
bugs1555226
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
browser/base/content/browser-siteProtections.js
browser/components/controlcenter/content/protectionsPanel.inc.xul
browser/themes/shared/controlcenter/panel.inc.css
--- a/browser/base/content/browser-siteProtections.js
+++ b/browser/base/content/browser-siteProtections.js
@@ -12,16 +12,21 @@ var gProtectionsHandler = {
   get _protectionsPopup() {
     delete this._protectionsPopup;
     return this._protectionsPopup = document.getElementById("protections-popup");
   },
   get _protectionsIconBox() {
     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 =
       document.getElementById("protections-popup-mainView-panel-header-span");
   },
   get _protectionsPopupTPSwitchBreakageLink() {
     delete this._protectionsPopupTPSwitchBreakageLink;
     return this._protectionsPopupTPSwitchBreakageLink =
@@ -42,37 +47,33 @@ var gProtectionsHandler = {
     return this._protectionPopupFooter =
       document.getElementById("protections-popup-footer");
   },
   get _protectionPopupTrackersCounterDescription() {
     delete this._protectionPopupTrackersCounterDescription;
     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();
     if ((event.type == "click" && event.button != 0) ||
         (event.type == "keypress" && event.charCode != KeyEvent.DOM_VK_SPACE &&
          event.keyCode != KeyEvent.DOM_VK_RETURN)) {
       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) {
     if (event.target == this._protectionsPopup) {
       window.addEventListener("focus", this, true);
     }
   },
 
@@ -158,9 +159,58 @@ var gProtectionsHandler = {
   },
 
   setTrackersBlockedCounter(trackerCount) {
     this._protectionPopupTrackersCounterDescription.textContent =
       // gNavigatorBundle.getFormattedString(
       //   "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);
+  },
 };
--- a/browser/components/controlcenter/content/protectionsPanel.inc.xul
+++ b/browser/components/controlcenter/content/protectionsPanel.inc.xul
@@ -10,21 +10,23 @@
        onpopupshown="gProtectionsHandler.onPopupShown(event);"
        onpopuphidden="gProtectionsHandler.onPopupHidden(event);"
        orient="vertical">
 
   <panelmultiview id="protections-popup-multiView"
                   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">
           <label id="protections-popup-tp-switch-on-header"
                  hidden="true">Tracking protection is ON for this site</label>
           <label id="protections-popup-tp-switch-off-header"
                  hidden="true">Tracking protection is OFF for this site</label>
           <label id="protections-popup-tp-switch-breakage-link"
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -82,16 +82,25 @@
   max-width: var(--identity-popup-width);
 }
 
 #protections-popup-mainView {
   min-width: var(--protections-popup-width);
   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);
 }
 
 .identity-popup-security-content,
 #identity-popup-permissions-content,
 #identity-popup-content-blocking-content {
   background-repeat: no-repeat;
@@ -174,16 +183,17 @@
 .identity-popup-content-blocking-empty-label,
 #tracking-protection-preferences-button > .toolbarbutton-text,
 .tracking-protection-button,
 #identity-popup-trackersView-strict-info > label,
 .identity-popup-cookiesView-list-header,
 .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,
 #identity-popup-content-blocking-report-breakage,
 .identity-popup-content-blocking-category-label,
 .identity-popup-content-blocking-category-state-label,
 .identity-popup-permission-label,
 .identity-popup-permission-state-label,
@@ -216,17 +226,19 @@
 }
 
 #protections-popup-mainView-panel-header {
   color: white;
   background: linear-gradient(45deg, rgb(117, 67, 229), rgb(3, 96, 223));
 }
 
 #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;
   overflow-wrap: break-word;
   /* This is needed for the overflow-wrap to work correctly.
    * 33em is the panel width, panel-header has 1em padding on each side. */
   max-width: calc(var(--identity-popup-width) - 2em);
 }
@@ -790,18 +802,24 @@ description#identity-popup-content-verif
 .identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
   fill: var(--arrowpanel-background);
 }
 
 .identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
   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;
 }
 
 #protections-popup-tp-switch-section {
   padding: 4px;
 }
 
 #protections-popup[hasException] #protections-popup-tp-switch-section {