Bug 1175327 - Move existing Tracking Protection functionality from shield doorhanger to Control Center;r=ttaubert

--HG-- extra : commitid : 7qOU4Qysqqt
2024-10-08 19:04:45 +00:00 · 2015-06-30 14:02:39 -07:00 · 2015-06-30 14:02:39 -07:00 · 9669f268c9
commit 9669f268c9
parent 026caca95b
13 changed files with 319 additions and 128 deletions
--- a/browser/base/content/browser-trackingprotection.js
+++ b/browser/base/content/browser-trackingprotection.js
@ -0,0 +1,96 @@
+# 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/.
+
+let TrackingProtection = {
+  PREF_ENABLED: "privacy.trackingprotection.enabled",
+
+  init() {
+    let $ = selector => document.querySelector(selector);
+    this.container = $("#tracking-protection-container");
+    this.content = $("#tracking-protection-content");
+
+    this.updateEnabled();
+    Services.prefs.addObserver(this.PREF_ENABLED, this, false);
+
+    this.enabledHistogram.add(this.enabled);
+  },
+
+  uninit() {
+    Services.prefs.removeObserver(this.PREF_ENABLED, this);
+  },
+
+  observe() {
+    this.updateEnabled();
+  },
+
+  updateEnabled() {
+    this.enabled = Services.prefs.getBoolPref(this.PREF_ENABLED);
+    this.container.hidden = !this.enabled;
+  },
+
+  get enabledHistogram() {
+    return Services.telemetry.getHistogramById("TRACKING_PROTECTION_ENABLED");
+  },
+
+  get eventsHistogram() {
+    return Services.telemetry.getHistogramById("TRACKING_PROTECTION_EVENTS");
+  },
+
+  onSecurityChange(state) {
+    if (!this.enabled) {
+      return;
+    }
+
+    let {
+      STATE_BLOCKED_TRACKING_CONTENT, STATE_LOADED_TRACKING_CONTENT
+    } = Ci.nsIWebProgressListener;
+
+    if (state & STATE_BLOCKED_TRACKING_CONTENT) {
+      this.content.setAttribute("block-active", true);
+      this.content.removeAttribute("block-disabled");
+    } else if (state & STATE_LOADED_TRACKING_CONTENT) {
+      this.content.setAttribute("block-disabled", true);
+      this.content.removeAttribute("block-active");
+    } else {
+      this.content.removeAttribute("block-disabled");
+      this.content.removeAttribute("block-active");
+    }
+
+    // Telemetry for state change.
+    this.eventsHistogram.add(0);
+  },
+
+  disableForCurrentPage() {
+    // Convert document URI into the format used by
+    // nsChannelClassifier::ShouldEnableTrackingProtection.
+    // Any scheme turned into https is correct.
+    let normalizedUrl = Services.io.newURI(
+      "https://" + gBrowser.selectedBrowser.currentURI.hostPort,
+      null, null);
+
+    // Add the current host in the 'trackingprotection' consumer of
+    // the permission manager using a normalized URI. This effectively
+    // places this host on the tracking protection allowlist.
+    Services.perms.add(normalizedUrl,
+      "trackingprotection", Services.perms.ALLOW_ACTION);
+
+    // Telemetry for disable protection.
+    this.eventsHistogram.add(1);
+
+    BrowserReload();
+  },
+
+  enableForCurrentPage() {
+    // Remove the current host from the 'trackingprotection' consumer
+    // of the permission manager. This effectively removes this host
+    // from the tracking protection allowlist.
+    Services.perms.remove(gBrowser.selectedBrowser.currentURI.host,
+      "trackingprotection");
+
+    // Telemetry for enable protection.
+    this.eventsHistogram.add(2);
+
+    BrowserReload();
+  },
+};
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@ -280,6 +280,7 @@ let gInitialPages = [
 #include browser-social.js
 #include browser-tabview.js
 #include browser-thumbnails.js
+#include browser-trackingprotection.js

 #ifdef MOZ_DATA_REPORTING
 #include browser-data-submission-info-bar.js
@ -964,6 +965,7 @@ var gBrowserInit = {
    BrowserOnClick.init();
    DevEdition.init();
    AboutPrivateBrowsingListener.init();
+    TrackingProtection.init();

    let mm = window.getGroupMessageManager("browsers");
    mm.loadFrameScript("chrome://browser/content/tab-content.js", true);
@ -1446,12 +1448,6 @@ var gBrowserInit = {
        }
      }, 5000);

-      // Telemetry for tracking protection.
-      let tpEnabled = gPrefService
-                      .getBoolPref("privacy.trackingprotection.enabled");
-      Services.telemetry.getHistogramById("TRACKING_PROTECTION_ENABLED")
-        .add(tpEnabled);
-
      PanicButtonNotifier.init();
    });
    this.delayedStartupFinished = true;
@ -1534,6 +1530,8 @@ var gBrowserInit = {

    DevEdition.uninit();

+    TrackingProtection.uninit();
+
    gMenuButtonUpdateBadge.uninit();

    ReadingListUI.uninit();
@ -4383,6 +4381,7 @@ var XULBrowserWindow = {
      uri = Services.uriFixup.createExposableURI(uri);
    } catch (e) {}
    gIdentityHandler.checkIdentity(this._state, uri);
+    TrackingProtection.onSecurityChange(this._state);
  },

  // simulate all change notifications after switching tabs
@ -6781,7 +6780,7 @@ var gIdentityHandler = {
         nsIWebProgressListener.STATE_BLOCKED_TRACKING_CONTENT     |
         nsIWebProgressListener.STATE_LOADED_TRACKING_CONTENT)) {
      this.showBadContentDoorhanger(state);
-    } else if (gPrefService.getBoolPref("privacy.trackingprotection.enabled")) {
+    } else if (TrackingProtection.enabled) {
      // We didn't show the shield
      Services.telemetry.getHistogramById("TRACKING_PROTECTION_SHIELD")
        .add(0);
--- a/browser/base/content/test/general/browser_trackingUI_1.js
+++ b/browser/base/content/test/general/browser_trackingUI_1.js
@ -2,118 +2,100 @@
 * 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/. */

-// Test that the Tracking Protection Doorhanger appears
-// and has the correct state when tracking content is blocked (Bug 1043801)
+// Test that the Tracking Protection section is visible in the Control Center
+// and has the correct state for the cases when:
+//   * A page with no tracking elements is loaded.
+//   * A page with tracking elements is loaded and they are blocked.
+//   * A page with tracking elements is loaded and they are not blocked.
+// See also Bugs 1175327 and 1043801.

-var PREF = "privacy.trackingprotection.enabled";
-var BENIGN_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/benignPage.html";
-var TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/trackingPage.html";
+let PREF = "privacy.trackingprotection.enabled";
+let BENIGN_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/benignPage.html";
+let TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/trackingPage.html";
+let TrackingProtection = null;

-function testBenignPage(gTestBrowser)
-{
-  // Make sure the doorhanger does NOT appear
-  var notification = PopupNotifications.getNotification("bad-content", gTestBrowser);
-  is(notification, null, "Tracking Content Doorhanger did NOT appear when protection was ON and tracking was NOT present");
+registerCleanupFunction(function() {
+  TrackingProtection = null;
+  Services.prefs.clearUserPref(PREF);
+  gBrowser.removeCurrentTab();
+});
+
+function hidden(sel) {
+  let win = gBrowser.ownerGlobal;
+  let el = win.document.querySelector(sel);
+  let display = win.getComputedStyle(el).getPropertyValue("display", null);
+  return display === "none";
 }

-function* testTrackingPage(gTestBrowser)
-{
-  // Make sure the doorhanger appears
-  var notification = PopupNotifications.getNotification("bad-content", gTestBrowser);
-  isnot(notification, null, "Tracking Content Doorhanger did appear when protection was ON and tracking was present");
-  notification.reshow();
-  var notificationElement = PopupNotifications.panel.firstChild;
+function testBenignPage() {
+  ok (!TrackingProtection.content.hasAttribute("block-disabled"), "blocking not disabled");
+  ok (!TrackingProtection.content.hasAttribute("block-active"), "blocking is not active");

-  // Wait for the method to be attached after showing the popup
-  yield promiseWaitForCondition(() => {
-    return notificationElement.disableTrackingContentProtection;
-  });
-
-  // Make sure the state of the doorhanger includes blocking tracking elements
-  ok(notificationElement.isTrackingContentBlocked,
-     "Tracking Content is being blocked");
-
-  // Make sure the notification has no trackingblockdisabled attribute
-  ok(!notificationElement.hasAttribute("trackingblockdisabled"),
-    "Doorhanger must have no trackingblockdisabled attribute");
+  // Make sure that the no tracking elements message appears
+  ok (!hidden("#tracking-not-detected"), "labelNoTracking is visible");
+  ok (hidden("#tracking-loaded"), "labelTrackingLoaded is hidden");
+  ok (hidden("#tracking-blocked"), "labelTrackingBlocked is hidden");
 }

-function* testTrackingPageWhitelisted(gTestBrowser)
-{
-  // Make sure the doorhanger appears
-  var notification = PopupNotifications.getNotification("bad-content", gTestBrowser);
-  isnot(notification, null, "Tracking Content Doorhanger did appear when protection was ON and tracking was present but white-listed");
-  notification.reshow();
-  var notificationElement = PopupNotifications.panel.firstChild;
+function testTrackingPage() {
+  ok (!TrackingProtection.content.hasAttribute("block-disabled"), "blocking not disabled");
+  ok (TrackingProtection.content.hasAttribute("block-active"), "blocking is active");

-  // Wait for the method to be attached after showing the popup
-  yield promiseWaitForCondition(() => {
-    return notificationElement.disableTrackingContentProtection;
-  });
-
-  var notificationElement = PopupNotifications.panel.firstChild;
-
-  // Make sure the state of the doorhanger does NOT include blocking tracking elements
-  ok(!notificationElement.isTrackingContentBlocked,
-    "Tracking Content is NOT being blocked");
-
-  // Make sure the notification has the trackingblockdisabled attribute set to true
-  is(notificationElement.getAttribute("trackingblockdisabled"), "true",
-    "Doorhanger must have [trackingblockdisabled='true'] attribute");
+  // Make sure that the blocked tracking elements message appears
+  ok (hidden("#tracking-not-detected"), "labelNoTracking is hidden");
+  ok (hidden("#tracking-loaded"), "labelTrackingLoaded is hidden");
+  ok (!hidden("#tracking-blocked"), "labelTrackingBlocked is visible");
 }

-function testTrackingPageOFF(gTestBrowser)
-{
-  // Make sure the doorhanger does NOT appear
-  var notification = PopupNotifications.getNotification("bad-content", gTestBrowser);
-  is(notification, null, "Tracking Content Doorhanger did NOT appear when protection was OFF and tracking was present");
-}
+function testTrackingPageWhitelisted() {
+  ok (TrackingProtection.content.hasAttribute("block-disabled"), "blocking is disabled");
+  ok (!TrackingProtection.content.hasAttribute("block-active"), "blocking is not active");

-function testBenignPageOFF(gTestBrowser)
-{
-  // Make sure the doorhanger does NOT appear
-  var notification = PopupNotifications.getNotification("bad-content", gTestBrowser);
-  is(notification, null, "Tracking Content Doorhanger did NOT appear when protection was OFF and tracking was NOT present");
+  // Make sure that the blocked tracking elements message appears
+  ok (hidden("#tracking-not-detected"), "labelNoTracking is hidden");
+  ok (!hidden("#tracking-loaded"), "labelTrackingLoaded is visible");
+  ok (hidden("#tracking-blocked"), "labelTrackingBlocked is hidden");
 }

 add_task(function* () {
-  registerCleanupFunction(function() {
-    Services.prefs.clearUserPref(PREF);
-    gBrowser.removeCurrentTab();
-  });
-
  yield updateTrackingProtectionDatabase();

  let tab = gBrowser.selectedTab = gBrowser.addTab();

-  // Enable Tracking Protection
+  TrackingProtection = gBrowser.ownerGlobal.TrackingProtection;
+  ok (TrackingProtection, "Functionality is attached to the browser window");
+  is (TrackingProtection.enabled, Services.prefs.getBoolPref(PREF),
+    "The initial enabled value is based on the default pref value");
+
+  info("Enable Tracking Protection");
  Services.prefs.setBoolPref(PREF, true);
+  ok (TrackingProtection.enabled, "Functionality is enabled after setting the pref");

-  // Point tab to a test page NOT containing tracking elements
+  info("Point tab to a test page NOT containing tracking elements");
  yield promiseTabLoadEvent(tab, BENIGN_PAGE);
-  testBenignPage(gBrowser.getBrowserForTab(tab));
+  testBenignPage();

-  // Point tab to a test page containing tracking elements
+  info("Point tab to a test page containing tracking elements");
  yield promiseTabLoadEvent(tab, TRACKING_PAGE);

-  // Tracking content must be blocked
-  yield testTrackingPage(gBrowser.getBrowserForTab(tab));
+  info("Tracking content must be blocked");
+  testTrackingPage();

-  // Disable Tracking Content Protection for the page (which reloads the page)
-  PopupNotifications.panel.firstChild.disableTrackingContentProtection();
+  info("Disable Tracking Content Protection for the page (which reloads the page)");
+  TrackingProtection.disableForCurrentPage();

-  // Wait for tab to reload following tracking-protection page white-listing
+  info("Wait for tab to reload following tracking-protection page white-listing");
  yield promiseTabLoadEvent(tab);

-  // Tracking content must be white-listed (NOT blocked)
-  yield testTrackingPageWhitelisted(gBrowser.getBrowserForTab(tab));
+  info("Tracking content must be white-listed (NOT blocked)");
+  testTrackingPageWhitelisted();

-  // Re-enable Tracking Content Protection for the page (which reloads the page)
-  PopupNotifications.panel.firstChild.enableTrackingContentProtection();
+  info("Re-enable Tracking Content Protection for the page (which reloads the page)");
+  TrackingProtection.enableForCurrentPage();

-  // Wait for tab to reload following tracking-protection page white-listing
+  info("Wait for tab to reload following tracking-protection page white-listing");
  yield promiseTabLoadEvent(tab);

-  // Tracking content must be blocked
-  yield testTrackingPage(gBrowser.getBrowserForTab(tab));
+  info("Tracking content must be blocked");
+  testTrackingPage();
 });
--- a/browser/base/content/test/general/browser_trackingUI_2.js
+++ b/browser/base/content/test/general/browser_trackingUI_2.js
@ -2,45 +2,48 @@
 * 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/. */

-// Test that the Tracking Protection Doorhanger does not ever appear
-// when the feature is off (Bug 1043801)
+// Test that the Tracking Protection section is never visible in the
+// Control Center when the feature is off.
+// See also Bugs 1175327 and 1043801.

-var PREF = "privacy.trackingprotection.enabled";
-var BENIGN_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/benignPage.html";
-var TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/trackingPage.html";
+let PREF = "privacy.trackingprotection.enabled";
+let BENIGN_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/benignPage.html";
+let TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/trackingPage.html";
+let TrackingProtection = null;

-function testTrackingPageOFF(gTestBrowser)
-{
-  // Make sure the doorhanger does NOT appear
-  var notification = PopupNotifications.getNotification("bad-content", gTestBrowser);
-  is(notification, null, "Tracking Content Doorhanger did NOT appear when protection was OFF and tracking was present");
+registerCleanupFunction(function() {
+  TrackingProtection = null;
+  Services.prefs.clearUserPref(PREF);
+  gBrowser.removeCurrentTab();
+});
+
+function testTrackingPageOFF() {
+  ok (TrackingProtection.container.hidden, "The container is hidden");
 }

-function testBenignPageOFF(gTestBrowser)
-{
-  // Make sure the doorhanger does NOT appear
-  var notification = PopupNotifications.getNotification("bad-content", gTestBrowser);
-  is(notification, null, "Tracking Content Doorhanger did NOT appear when protection was OFF and tracking was NOT present");
+function testBenignPageOFF() {
+  ok (TrackingProtection.container.hidden, "The container is hidden");
 }

 add_task(function* () {
-  registerCleanupFunction(function() {
-    Services.prefs.clearUserPref(PREF);
-    gBrowser.removeCurrentTab();
-  });
-
  yield updateTrackingProtectionDatabase();

  let tab = gBrowser.selectedTab = gBrowser.addTab();

-  // Disable Tracking Protection
+  TrackingProtection = gBrowser.ownerGlobal.TrackingProtection;
+  ok (TrackingProtection, "Functionality is attached to the browser window");
+  is (TrackingProtection.enabled, Services.prefs.getBoolPref(PREF),
+    "The initial enabled value is based on the default pref value");
+
+  info ("Disable Tracking Protection");
  Services.prefs.setBoolPref(PREF, false);
+  ok (!TrackingProtection.enabled, "Functionality is disabled after setting the pref");

-  // Point tab to a test page containing tracking elements
+  info ("Point tab to a test page containing tracking elements");
  yield promiseTabLoadEvent(tab, TRACKING_PAGE);
-  testTrackingPageOFF(gBrowser.getBrowserForTab(tab));
+  testTrackingPageOFF();

-  // Point tab to a test page NOT containing tracking elements
+  info ("Point tab to a test page NOT containing tracking elements");
  yield promiseTabLoadEvent(tab, BENIGN_PAGE);
-  testBenignPageOFF(gBrowser.getBrowserForTab(tab));
+  testBenignPageOFF();
 });
--- a/browser/base/content/urlbarBindings.xml
+++ b/browser/base/content/urlbarBindings.xml
@ -2377,10 +2377,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
            Services.urlFormatter.formatURLPref("app.support.baseURL")
              + "tracking-protection";
        }
-        if (Services.prefs.getBoolPref("privacy.trackingprotection.enabled")) {
-          let histogram = Services.telemetry.getHistogramById("TRACKING_PROTECTION_EVENTS");
-          histogram.add(0);
-        }
      ]]></constructor>
      <method name="disableMixedContentProtection">
        <body><![CDATA[
@ -2415,10 +2411,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
          // places this host on the tracking protection allowlist.
          Services.perms.add(normalizedUrl,
            "trackingprotection", Services.perms.ALLOW_ACTION);
-          // Telemetry for disable protection
-          let histogram = Services.telemetry.getHistogramById(
-              "TRACKING_PROTECTION_EVENTS");
-          histogram.add(1);
          BrowserReload();
        ]]></body>
      </method>
@ -2429,10 +2421,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
          // from the tracking protection allowlist.
          Services.perms.remove(gBrowser.selectedBrowser.currentURI.host,
            "trackingprotection");
-          // Telemetry for enable protection
-          let histogram = Services.telemetry.getHistogramById(
-              "TRACKING_PROTECTION_EVENTS");
-          histogram.add(2);
          BrowserReload();
        ]]></body>
      </method>
--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/browser/components/controlcenter/content/panel.inc.xul
@ -36,6 +36,42 @@
                oncommand="gIdentityHandler.showSubView('security', this)"/>
      </hbox>

+      <!-- Tracking Protection Section -->
+      <hbox id="tracking-protection-container" class="identity-popup-section">
+        <vbox id="tracking-protection-content" flex="1">
+          <description class="identity-popup-text identity-popup-headline"
+                       crop="end"
+                       value="&trackingProtection.title;" />
+
+          <label id="tracking-blocked"
+                 class="identity-popup-text"
+                 crop="end">&trackingProtection.detectedBlocked;</label>
+          <label id="tracking-loaded"
+                 class="identity-popup-text"
+                 crop="end">&trackingProtection.detectedNotBlocked;</label>
+          <label id="tracking-not-detected"
+                 class="identity-popup-text"
+                 crop="end">&trackingProtection.notDetected;</label>
+
+          <button id="tracking-actions"
+            type="menu" label="&trackingContentBlocked.options;"
+            sizetopopup="none">
+            <menupopup>
+              <menuitem
+                id="tracking-action-unblock"
+                label="&trackingProtection.unblock.label;"
+                accesskey="&trackingProtection.unblock.accesskey;"
+                oncommand="TrackingProtection.disableForCurrentPage();"/>
+              <menuitem
+                id="tracking-action-block"
+                label="&trackingProtection.block.label;"
+                accesskey="&trackingProtection.block.accesskey;"
+                oncommand="TrackingProtection.enableForCurrentPage();"/>
+            </menupopup>
+          </button>
+        </vbox>
+      </hbox>
+
      <!-- Permissions Section -->
      <hbox id="identity-popup-permissions" class="identity-popup-section">
        <vbox id="identity-popup-permissions-content" flex="1">
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@ -768,6 +768,15 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 <!ENTITY mixedContentBlocked2.block.accesskey "E">
 <!ENTITY mixedContentBlocked2.disabled.message "Protection is disabled">

+<!ENTITY trackingProtection.title "Tracking Protection">
+<!ENTITY trackingProtection.detectedBlocked "Attempts to track your online behavior have been blocked.">
+<!ENTITY trackingProtection.detectedNotBlocked "Tracking elements detected. You have disabled protection on this site.">
+<!ENTITY trackingProtection.notDetected "No tracking elements detected on this website.">
+<!ENTITY trackingProtection.unblock.label "Disable protection for this site">
+<!ENTITY trackingProtection.unblock.accesskey "D">
+<!ENTITY trackingProtection.block.label "Enable protection for this site">
+<!ENTITY trackingProtection.block.accesskey "E">
+
 <!ENTITY trackingContentBlocked.message "Tracking">
 <!ENTITY trackingContentBlocked.moreinfo "Parts of the page that track your online activity have been blocked.">
 <!ENTITY trackingContentBlocked.learnMore "Learn More">
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@ -150,6 +150,8 @@ browser.jar:
  skin/classic/browser/controlcenter/conn-secure-dv.svg  (../shared/controlcenter/conn-secure-dv.svg)
  skin/classic/browser/controlcenter/conn-secure-ev.svg  (../shared/controlcenter/conn-secure-ev.svg)
  skin/classic/browser/controlcenter/permissions.svg  (../shared/controlcenter/permissions.svg)
+  skin/classic/browser/controlcenter/tracking-protection.svg                 (../shared/controlcenter/tracking-protection.svg)
+  skin/classic/browser/controlcenter/tracking-protection-disabled.svg        (../shared/controlcenter/tracking-protection-disabled.svg)
  skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
  skin/classic/browser/customizableui/customize-illustration.png  (../shared/customizableui/customize-illustration.png)
  skin/classic/browser/customizableui/customize-illustration-rtl.png  (../shared/customizableui/customize-illustration-rtl.png)
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@ -194,6 +194,8 @@ browser.jar:
  skin/classic/browser/controlcenter/conn-secure-dv.svg  (../shared/controlcenter/conn-secure-dv.svg)
  skin/classic/browser/controlcenter/conn-secure-ev.svg  (../shared/controlcenter/conn-secure-ev.svg)
  skin/classic/browser/controlcenter/permissions.svg  (../shared/controlcenter/permissions.svg)
+  skin/classic/browser/controlcenter/tracking-protection.svg                 (../shared/controlcenter/tracking-protection.svg)
+  skin/classic/browser/controlcenter/tracking-protection-disabled.svg        (../shared/controlcenter/tracking-protection-disabled.svg)
  skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
  skin/classic/browser/customizableui/customize-titleBar-toggle.png  (customizableui/customize-titleBar-toggle.png)
  skin/classic/browser/customizableui/customize-titleBar-toggle@2x.png  (customizableui/customize-titleBar-toggle@2x.png)
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@ -55,7 +55,8 @@

 #identity-popup-securityView,
 #identity-popup-security-content,
-#identity-popup-permissions-content {
+#identity-popup-permissions-content,
+#tracking-protection-content {
  padding: 0.75em 0 1em;
  -moz-padding-start: calc(2em + 24px);
  -moz-padding-end: 1em;
@ -66,7 +67,8 @@

 #identity-popup-securityView:-moz-locale-dir(rtl),
 #identity-popup-security-content:-moz-locale-dir(rtl),
-#identity-popup-permissions-content:-moz-locale-dir(rtl) {
+#identity-popup-permissions-content:-moz-locale-dir(rtl),
+#tracking-protection-content:-moz-locale-dir(rtl) {
  background-position: calc(100% - 1em) 1em;
 }

@ -199,6 +201,30 @@
  margin-top: 1em;
 }

+/* TRACKING PROTECTION */
+
+#tracking-protection-content {
+  background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
+}
+
+#tracking-protection-content[block-disabled]  {
+  background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg");
+}
+
+#tracking-actions {
+  margin: 1em 0 0;
+}
+
+#tracking-protection-content[block-active] > #tracking-not-detected,
+#tracking-protection-content[block-disabled] > #tracking-not-detected,
+#tracking-protection-content:not([block-active]) > #tracking-blocked,
+#tracking-protection-content:not([block-active]) #tracking-action-unblock,
+#tracking-protection-content:not([block-disabled]) > #tracking-loaded,
+#tracking-protection-content:not([block-disabled]) #tracking-action-block,
+#tracking-protection-content:not([block-active]):not([block-disabled]) > #tracking-actions {
+  display: none;
+}
+
 /* PERMISSIONS */

 #identity-popup-permissions-content {
--- a/browser/themes/shared/controlcenter/tracking-protection-disabled.svg
+++ b/browser/themes/shared/controlcenter/tracking-protection-disabled.svg
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16">
+  <defs>
+    <path id="shape-shield-outer" d="M8,1L2.8,1.9C2.4,1.9,2,2.4,2,2.8C2,4,2,6.1,2.1,7.1c0.3,2.7,0.8,4,1.9,5.6C5.6,14.7,8,15,8,15s2.4-0.3,4-2.4 c1.2-1.5,1.7-2.9,1.9-5.6C14,6.1,14,4,14,2.8c0-0.5-0.4-0.9-0.8-1L8,1L8,1z"/>
+    <path id="shape-shield-inner" d="M8,2l5,0.8c0,2,0,3.5-0.1,4.1c-0.3,2.7-0.8,3.8-1.7,5.1c-1.1,1.5-2.7,1.9-3.2,2c-0.4-0.1-2.1-0.5-3.2-2 c-1-1.3-1.5-2.4-1.7-5.1C3,6.3,3,4.8,3,2.8L8,2"/>
+    <path id="shape-shield-detail" d="M8,13c-0.5-0.1-1.6-0.5-2.4-1.5c-0.9-1.2-1.3-2.1-1.5-4.6C4,6.3,4,5.2,4,3.7L8,3 V13z"/>
+    <mask id="mask-shield-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-shield-outer" fill="#fff" />
+      <use xlink:href="#shape-shield-inner" fill="#000" />
+      <use xlink:href="#shape-shield-detail" fill="#fff" />
+      <line x1="3" y1="15" x2="15" y2="3" stroke="#000" stroke-width="2" />
+    </mask>
+  </defs>
+  <use xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)" fill="#808080" />
+  <line x1="3" y1="14" x2="15" y2="2" stroke="#d92d21" stroke-width="2" />
+</svg>
--- a/browser/themes/shared/controlcenter/tracking-protection.svg
+++ b/browser/themes/shared/controlcenter/tracking-protection.svg
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16">
+  <defs>
+    <path id="shape-shield-outer" d="M8,1L2.8,1.9C2.4,1.9,2,2.4,2,2.8C2,4,2,6.1,2.1,7.1c0.3,2.7,0.8,4,1.9,5.6C5.6,14.7,8,15,8,15s2.4-0.3,4-2.4 c1.2-1.5,1.7-2.9,1.9-5.6C14,6.1,14,4,14,2.8c0-0.5-0.4-0.9-0.8-1L8,1L8,1z"/>
+    <path id="shape-shield-inner" d="M8,2l5,0.8c0,2,0,3.5-0.1,4.1c-0.3,2.7-0.8,3.8-1.7,5.1c-1.1,1.5-2.7,1.9-3.2,2c-0.4-0.1-2.1-0.5-3.2-2 c-1-1.3-1.5-2.4-1.7-5.1C3,6.3,3,4.8,3,2.8L8,2"/>
+    <path id="shape-shield-detail" d="M8,13c-0.5-0.1-1.6-0.5-2.4-1.5c-0.9-1.2-1.3-2.1-1.5-4.6C4,6.3,4,5.2,4,3.7L8,3 V13z"/>
+    <mask id="mask-shield-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-shield-outer" fill="#fff" />
+      <use xlink:href="#shape-shield-inner" fill="#000" />
+      <use xlink:href="#shape-shield-detail" fill="#fff" />
+    </mask>
+  </defs>
+  <use xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)" fill="#808080" />
+</svg>
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@ -197,6 +197,8 @@ browser.jar:
        skin/classic/browser/controlcenter/conn-secure-dv.svg  (../shared/controlcenter/conn-secure-dv.svg)
        skin/classic/browser/controlcenter/conn-secure-ev.svg  (../shared/controlcenter/conn-secure-ev.svg)
        skin/classic/browser/controlcenter/permissions.svg  (../shared/controlcenter/permissions.svg)
+        skin/classic/browser/controlcenter/tracking-protection.svg                 (../shared/controlcenter/tracking-protection.svg)
+        skin/classic/browser/controlcenter/tracking-protection-disabled.svg        (../shared/controlcenter/tracking-protection-disabled.svg)
        skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
        skin/classic/browser/customizableui/customizeFavicon.ico  (../shared/customizableui/customizeFavicon.ico)
        skin/classic/browser/customizableui/customize-illustration.png  (../shared/customizableui/customize-illustration.png)