Bug 1551542 - Implement Protections Panel header. r=johannh

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

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

browser/base/content/browser-siteIdentity.js

@@ -467,6 +467,32 @@ var gIdentityHandler = {
     }
   },
 
+  getHostForDisplay() {
+    let host = "";
+
+    try {
+      host = this.getEffectiveHost();
+    } catch (e) {
+      // Some URIs might have no hosts.
+    }
+
+    let readerStrippedURI = ReaderMode.getOriginalUrlObjectForDisplay(this._uri.displaySpec);
+    if (readerStrippedURI) {
+      host = readerStrippedURI.host;
+    }
+
+    if (this._pageExtensionPolicy) {
+      host = this._pageExtensionPolicy.name;
+    }
+
+    // Fallback for special protocols.
+    if (!host) {
+      host = this._uri.specIgnoringRef;
+    }
+
+    return host;
+  },
+
   /**
    * Return the CSS class name to set on the "fullscreen-warning" element to
    * display information about connection security in the notification shown
@@ -741,29 +767,9 @@ var gIdentityHandler = {
     // Initialize the optional strings to empty values
     let supplemental = "";
     let verifier = "";
-    let host = "";
+    let host = this.getHostForDisplay();
     let owner = "";
 
-    try {
-      host = this.getEffectiveHost();
-    } catch (e) {
-      // Some URIs might have no hosts.
-    }
-
-    let readerStrippedURI = ReaderMode.getOriginalUrlObjectForDisplay(this._uri.displaySpec);
-    if (readerStrippedURI) {
-      host = readerStrippedURI.host;
-    }
-
-    if (this._pageExtensionPolicy) {
-      host = this._pageExtensionPolicy.name;
-    }
-
-    // Fallback for special protocols.
-    if (!host) {
-      host = this._uri.specIgnoringRef;
-    }
-
     // Fill in the CA name if we have a valid TLS certificate.
     if (this._isSecure || this._isCertUserOverridden) {
       verifier = this._identityIconLabels.tooltipText;

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 _protectionsPopupMainViewHeaderLabel() {
+    delete this._protectionsPopupMainViewHeaderLabel;
+    return this._protectionsPopupMainViewHeaderLabel =
+      document.getElementById("protections-popup-mainView-panel-header-span");
+  },
 
   handleProtectionsButtonEvent(event) {
     event.stopPropagation();
@@ -30,10 +35,22 @@ var gProtectionsHandler = {
     // 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, this._protectionsIconBox, {
       position: "bottomcenter topleft",
       triggerEvent: event,
     }).catch(Cu.reportError);
   },
+
+  refreshProtectionsPopup() {
+    let host = gIdentityHandler.getHostForDisplay();
+
+    // Push the appropriate strings out to the UI.
+    this._protectionsPopupMainViewHeaderLabel.textContent =
+      // gNavigatorBundle.getFormattedString("protections.header", [host]);
+      `Tracking Protections for ${host}`;
+  },
 };

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

@@ -15,9 +15,13 @@
                descriptionheightworkaround="true">
       <vbox id="protections-popup-mainView-panel-header">
         <label>
-          <html:span id="protections-popup-mainView-panel-header-span">
-            <html:h1>Watch this space! :)</html:h1>
-          </html:span>
+          <html:span id="protections-popup-mainView-panel-header-span"/>
+        </label>
+      </vbox>
+
+      <vbox id="protections-popup-placeholder" class="identity-popup-section">
+        <label>
+          <html:h2>Watch this space! :)</html:h2>
         </label>
       </vbox>
     </panelview>

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

@@ -13,6 +13,10 @@
   --identity-popup-width: 33rem;
 }
 
+#protections-popup {
+  --protections-popup-width: 33rem;
+}
+
 /* This is used by screenshots tests to hide intermittently different
  * identity popup shadows (see bug 1425253). */
 #identity-popup.no-shadow {
@@ -59,11 +63,13 @@
 
 /* Make sure hidden elements don't accidentally become visible from one of the
    above selectors (see Bug 1194258) */
-#identity-popup [hidden] {
+#identity-popup [hidden],
+#protections-popup [hidden] {
   display: none !important;
 }
 
-#identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
+#identity-popup > .panel-arrowcontainer > .panel-arrowcontent,
+#protections-popup > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
   /* Set default fill for icons in the identity popup.
      Individual icons can override this. */
@@ -76,6 +82,11 @@
   max-width: var(--identity-popup-width);
 }
 
+#protections-popup-mainView {
+  min-width: var(--protections-popup-width);
+  max-width: var(--protections-popup-width);
+}
+
 .identity-popup-section {
   border-top: 1px solid var(--panel-separator-color);
 }
@@ -167,6 +178,7 @@
 .identity-popup-cookiesView-list-header,
 .identity-popup-content-blocking-list-item > label,
 #identity-popup-mainView-panel-header > label,
+#protections-popup-mainView-panel-header > label,
 #identity-popup-trackersView > .panel-header,
 #identity-popup-securityView > .panel-header,
 #identity-popup-breakageReportView > .panel-header,
@@ -184,14 +196,25 @@
   margin: 0;
 }
 
-#identity-popup-mainView-panel-header {
+#identity-popup-mainView-panel-header,
+#protections-popup-mainView-panel-header {
   padding: 4px 1em;
   min-height: 40px;
   -moz-box-pack: center;
   -moz-box-align: center;
 }
 
-#identity-popup-mainView-panel-header-span {
+#protections-popup > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow {
+  fill: rgb(100, 70, 228);
+}
+
+#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 {
   display: inline-block;
   font-weight: 600;
   text-align: center;