Bug 1567896 - Part 1: Implement social tracking protection info in control panel; r=johannh

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

browser/base/content/browser-siteProtections.js

@@ -894,6 +894,111 @@ var ThirdPartyCookies = {
   },
 };
 
+var SocialTracking = {
+  PREF_ENABLED: "privacy.trackingprotection.socialtracking.annotate.enabled",
+
+  strings: {
+    get subViewBlocked() {
+      delete this.subViewBlocked;
+      return (this.subViewBlocked = gNavigatorBundle.getString(
+        "contentBlocking.fingerprintersView.blocked.label"
+      ));
+    },
+  },
+
+  init() {
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      "enabled",
+      this.PREF_ENABLED,
+      false
+    );
+  },
+
+  isBlocking(state) {
+    return (
+      (state &
+        Ci.nsIWebProgressListener.STATE_BLOCKED_SOCIALTRACKING_CONTENT) !=
+      0
+    );
+  },
+
+  isAllowing(state) {
+    return (
+      this.enabled &&
+      (state & Ci.nsIWebProgressListener.STATE_LOADED_SOCIALTRACKING_CONTENT) !=
+        0
+    );
+  },
+
+  isDetected(state) {
+    return this.isBlocking(state) || this.isAllowing(state);
+  },
+
+  get categoryItem() {
+    delete this.categoryItem;
+    return (this.categoryItem = document.getElementById(
+      "protections-popup-category-socialblock"
+    ));
+  },
+
+  get categoryLabel() {
+    delete this.categoryLabel;
+    return (this.categoryLabel = document.getElementById(
+      "protections-popup-socialblock-state-label"
+    ));
+  },
+
+  get subViewList() {
+    delete this.subViewList;
+    return (this.subViewList = document.getElementById(
+      "protections-popup-socialblockView-list"
+    ));
+  },
+
+  async updateSubView() {
+    let contentBlockingLog = await gBrowser.selectedBrowser.getContentBlockingLog();
+    contentBlockingLog = JSON.parse(contentBlockingLog);
+
+    let fragment = document.createDocumentFragment();
+    for (let [origin, actions] of Object.entries(contentBlockingLog)) {
+      let listItem = this._createListItem(origin, actions);
+      if (listItem) {
+        fragment.appendChild(listItem);
+      }
+    }
+
+    this.subViewList.textContent = "";
+    this.subViewList.append(fragment);
+  },
+
+  _createListItem(origin, actions) {
+    let isAllowed = actions.some(([state]) => this.isAllowing(state));
+    let isDetected =
+      isAllowed || actions.some(([state]) => this.isBlocking(state));
+
+    if (!isDetected) {
+      return null;
+    }
+
+    let uri = Services.io.newURI(origin);
+
+    let listItem = document.createXULElement("hbox");
+    listItem.className = "protections-popup-list-item";
+    // Repeat the host in the tooltip in case it's too long
+    // and overflows in our panel.
+    listItem.tooltipText = uri.host;
+
+    let label = document.createXULElement("label");
+    label.value = uri.host;
+    label.className = "protections-popup-list-host-label";
+    label.setAttribute("crop", "end");
+    listItem.append(label);
+
+    return listItem;
+  },
+};
+
 /**
  * Utility object to handle manipulations of the protections indicators in the UI
  */
@@ -1052,6 +1157,7 @@ var gProtectionsHandler = {
   // on gProtectionsHandler.init() and gProtectionsHandler.uninit().
   blockers: [
     TrackingProtection,
+    SocialTracking,
     ThirdPartyCookies,
     Fingerprinting,
     Cryptomining,
@@ -1150,6 +1256,13 @@ var gProtectionsHandler = {
     );
   },
 
+  async showSocialblockerSubview() {
+    await SocialTracking.updateSubView();
+    this._protectionsPopupMultiView.showSubView(
+      "protections-popup-socialblockView"
+    );
+  },
+
   async showCookiesSubview() {
     await ThirdPartyCookies.updateSubView();
     this._protectionsPopupMultiView.showSubView(

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

@@ -54,6 +54,14 @@
               <label flex="1" class="protections-popup-category-label">&contentBlocking.trackingProtection3.label;</label>
               <label flex="1" id="protections-popup-tracking-protection-state-label" class="protections-popup-category-state-label"/>
             </toolbarbutton>
+            <toolbarbutton id="protections-popup-category-socialblock"
+                           onclick="gProtectionsHandler.showSocialblockerSubview();"
+                           class="protections-popup-category" align="center">
+              <image class="protections-popup-category-icon socialblock-icon"/>
+              <label flex="1"
+              class="protections-popup-category-label">&contentBlocking.socialblock.label;</label>
+              <label flex="1" id="protections-popup-socialblock-state-label" class="protections-popup-category-state-label"/>
+            </toolbarbutton>
             <toolbarbutton id="protections-popup-category-cookies"
                            onclick="gProtectionsHandler.showCookiesSubview();"
                            class="protections-popup-category" align="center">
@@ -159,6 +167,24 @@
         </vbox>
     </panelview>
 
+    <!-- Social Block SubView -->
+    <panelview id="protections-popup-socialblockView"
+               role="document"
+               title="&contentBlocking.socialblockView.label;"
+               descriptionheightworkaround="true">
+        <vbox id="protections-popup-socialblockView-heading">
+          <description>&contentBlocking.socialblockView.description;</description>
+        </vbox>
+        <vbox id="protections-popup-socialblockView-list" class="protections-popup-list">
+        </vbox>
+        <vbox class="panel-footer">
+          <button id="protections-popup-socialblockView-settings-button"
+                  label="&contentBlocking.manageSettings.label;"
+                  accesskey="&contentBlocking.manageSettings.accesskey;"
+                  oncommand="gProtectionsHandler.openPreferences();"/>
+        </vbox>
+    </panelview>
+
     <!-- Cookies SubView -->
     <panelview id="protections-popup-cookiesView"
                role="document"

browser/locales/en-US/chrome/browser/browser.dtd

@@ -901,6 +901,10 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 <!ENTITY contentBlocking.trackersView.label "Trackers">
 <!ENTITY contentBlocking.trackersView.strictInfo.label "To block all trackers, set content blocking to “Strict”.">
 
+<!ENTITY contentBlocking.socialblock.label "Social Media Trackers">
+<!ENTITY contentBlocking.socialblockView.label "Social Media Trackers Blocked">
+<!ENTITY contentBlocking.socialblockView.description "Social networks place trackers on other websites to follow what you do, see, and watch online. This allows social media companies to learn more about you beyond what you share on your social media profiles.">
+
 <!ENTITY contentBlocking.cookies.label "Cookies">
 <!ENTITY contentBlocking.cookiesView.label "Cookies and Site Data">
 

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

@@ -457,6 +457,7 @@ description#identity-popup-content-verifier,
 
 /* This subview could get filled with a lot of trackers, set a maximum size
  * and allow it to scroll vertically.*/
+#protections-popup-socialblockView,
 #protections-popup-cookiesView,
 #protections-popup-trackersView {
   max-height: 600px;
@@ -522,6 +523,7 @@ description#identity-popup-content-verifier,
   margin-inline-end: 2px;
 }
 
+.protections-popup-socialblockView-icon,
 .protections-popup-fingerprintersView-icon,
 .protections-popup-cryptominersView-icon,
 .protections-popup-trackersView-icon,
@@ -538,6 +540,14 @@ description#identity-popup-content-verifier,
   list-style-image: url(chrome://browser/skin/controlcenter/trackers.svg);
 }
 
+.protections-popup-socialblockView-icon {
+  list-style-image: url(chrome://browser/skin/controlcenter/socialblock-disabled.svg);
+}
+
+.protections-popup-socialblockView-icon.allowed {
+  list-style-image: url(chrome://browser/skin/controlcenter/socialblock.svg);
+}
+
 .protections-popup-cookiesView-icon {
   list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies-disabled.svg);
 }
@@ -599,6 +609,10 @@ description#identity-popup-content-verifier,
   list-style-image: url(chrome://browser/skin/controlcenter/trackers.svg);
 }
 
+.socialblock-icon {
+  list-style-image: url(chrome://browser/skin/controlcenter/socialblock.svg);
+}
+
 .thirdpartycookies-icon {
   list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg);
 }
@@ -929,3 +943,11 @@ description#identity-popup-content-verifier,
   left: unset;
   right: calc(1em + 20px);
 }
+
+#protections-popup-socialblockView-heading {
+  border-bottom: 1px solid var(--panel-separator-color);
+}
+
+#protections-popup-socialblockView-heading > description {
+  margin: 10px 24px;
+}

browser/themes/shared/controlcenter/socialblock-disabled.svg

@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.51 6.46a1.68 1.68 0 0 0-.16-1.81L7 12a14.73 14.73 0 0 1 1 2.56c.32.5-.65 1.23.59 1.38s1.7-2.1 1.3-3-.89-2.67 0-2.46l.65.15c1.15.35 2.85.49 3.7-.08s.44-1.09.33-1.76a1.73 1.73 0 0 0-.06-2.33zM14.71 1.29a1 1 0 0 0-1.42 0l-.87.88c-.13 0-.25-.09-.39-.12A14.6 14.6 0 0 0 9.71 2c-1.43 0-2.71.19-4.18.25S2.49 2 1 2v6h3a3.65 3.65 0 0 1 .83.66.61.61 0 0 1 .1.23 4.74 4.74 0 0 0 .27.51l-3.9 3.89a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l12-12a1 1 0 0 0-.01-1.42z"/></svg>

browser/themes/shared/jar.inc.mn

@@ -38,6 +38,7 @@
   skin/classic/browser/controlcenter/info.svg                  (../shared/controlcenter/info.svg)
   skin/classic/browser/controlcenter/permissions.svg           (../shared/controlcenter/permissions.svg)
   skin/classic/browser/controlcenter/socialblock.svg           (../shared/controlcenter/socialblock.svg)
+  skin/classic/browser/controlcenter/socialblock-disabled.svg  (../shared/controlcenter/socialblock-disabled.svg)
   skin/classic/browser/controlcenter/tracker-image.svg         (../shared/controlcenter/tracker-image.svg)
   skin/classic/browser/controlcenter/trackers.svg              (../shared/controlcenter/trackers.svg)
   skin/classic/browser/controlcenter/trackers-disabled.svg     (../shared/controlcenter/trackers-disabled.svg)