Bug 1551542 - Implement Protections Panel header. r=johannh
authorNihanth Subramanya <nhnt11@gmail.com>
Wed, 15 May 2019 13:15:32 +0000
changeset 532746 24a2db112eb829634b49dd178fe43a04770fffae
parent 532745 2f0be794dff5eba3d9cdcc633ad2994497562d41
child 532747 33b8297c53bcc11843f0992e0e310c8bf9379c57
push id11272
push userapavel@mozilla.com
push dateThu, 16 May 2019 15:28:22 +0000
treeherdermozilla-beta@2265bfc5920d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1551542
milestone68.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 1551542 - Implement Protections Panel header. r=johannh Differential Revision: https://phabricator.services.mozilla.com/D31070
browser/base/content/browser-siteIdentity.js
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-siteIdentity.js
+++ b/browser/base/content/browser-siteIdentity.js
@@ -462,16 +462,42 @@ var gIdentityHandler = {
       return this._IDNService.convertToDisplayIDN(this._uri.host, {});
     } catch (e) {
       // If something goes wrong (e.g. host is an IP address) just fail back
       // to the full domain.
       return this._uri.host;
     }
   },
 
+  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
    * when a site enters the fullscreen mode.
    */
   get pointerlockFsWarningClassName() {
     // Note that the fullscreen warning does not handle _isSecureInternalUI.
     if (this._uriHasHost && this._isEV) {
@@ -736,39 +762,19 @@ var gIdentityHandler = {
       updateAttribute(element, "ciphers", ciphers);
       updateAttribute(element, "mixedcontent", mixedcontent);
       updateAttribute(element, "isbroken", this._isBroken);
     }
 
     // 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;
     }
 
     // Fill in organization information if we have a valid EV certificate.
     if (this._isEV) {
       let iData = this.getIdentityData();
--- a/browser/base/content/browser-siteProtections.js
+++ b/browser/base/content/browser-siteProtections.js
@@ -12,28 +12,45 @@ 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 _protectionsPopupMainViewHeaderLabel() {
+    delete this._protectionsPopupMainViewHeaderLabel;
+    return this._protectionsPopupMainViewHeaderLabel =
+      document.getElementById("protections-popup-mainView-panel-header-span");
+  },
 
   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, 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}`;
+  },
 };
--- a/browser/components/controlcenter/content/protectionsPanel.inc.xul
+++ b/browser/components/controlcenter/content/protectionsPanel.inc.xul
@@ -10,16 +10,20 @@
        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>
-          <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>
   </panelmultiview>
 </panel>
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -8,16 +8,20 @@
 :-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) {
   display: none;
 }
 
 #identity-popup {
   --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 {
   -moz-window-shadow: none;
 }
 
 /* Show the right elements for the right connection states. */
 #identity-popup[connection=not-secure] [when-connection~=not-secure],
@@ -54,33 +58,40 @@
 #identity-popup-securityView-body:-moz-any([mixedcontent],[ciphers]) > description[when-connection=not-secure],
 /* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */
 #identity-popup-securityView-body[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] {
   display: none;
 }
 
 /* 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. */
   fill: currentColor;
   fill-opacity: .6;
 }
 
 #identity-popup-mainView {
   min-width: var(--identity-popup-width);
   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);
 }
 
 .identity-popup-security-content,
 #identity-popup-permissions-content,
 #identity-popup-content-blocking-content {
   background-repeat: no-repeat;
@@ -162,16 +173,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,
 #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,
@@ -179,24 +191,35 @@
 #identity-popup-security-descriptions > description,
 #identity-popup-securityView-body > description,
 #identity-popup-permissions-content > description,
 #identity-popup-content-blocking-content > description {
   font-size: 110%;
   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;
   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);
 }