Bug 1476218 - Part 1 - Update Tracking Protection section in the identity popup for Content Blocking. r=nhnt11

This commit switches the identity popup to use "Content Blocking" as a top-level section
instead of Tracking Protection, which is now demoted to a category of Content Blocking.

To keep this change halfway reviewable, I avoided renaming variables, classNames, ids, etc.
that use the term trackingProtection if they were otherwise unaffected by this patch. There
will be other patches that can do this in the future

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

browser/base/content/browser-contentblocking.js

@@ -2,21 +2,156 @@
  * 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/. */
 
+var FastBlock = {
+  PREF_ENABLED: "browser.fastblock.enabled",
+
+  get categoryItem() {
+    delete this.categoryItem;
+    return this.categoryItem = document.getElementById("identity-popup-content-blocking-category-fastblock");
+  },
+
+  init() {
+    XPCOMUtils.defineLazyPreferenceGetter(this, "enabled", this.PREF_ENABLED, false);
+  },
+};
+
 var TrackingProtection = {
-  // If the user ignores the doorhanger, we stop showing it after some time.
-  MAX_INTROS: 20,
   PREF_ENABLED_GLOBALLY: "privacy.trackingprotection.enabled",
   PREF_ENABLED_IN_PRIVATE_WINDOWS: "privacy.trackingprotection.pbmode.enabled",
-  PREF_APP_MENU_TOGGLE: "privacy.trackingprotection.appMenuToggle.enabled",
-  PREF_ANIMATIONS_ENABLED: "toolkit.cosmeticAnimations.enabled",
   enabledGlobally: false,
   enabledInPrivateWindows: false,
-  container: null,
+
+  get categoryItem() {
+    delete this.categoryItem;
+    return this.categoryItem =
+      document.getElementById("identity-popup-content-blocking-category-tracking-protection");
+  },
+
+  get appMenuButton() {
+    delete this.appMenuButton;
+    return this.appMenuButton = document.getElementById("appMenu-tp-toggle");
+  },
+
+  strings: {
+    get enableTooltip() {
+      delete this.enableTooltip;
+      return this.enableTooltip =
+        gNavigatorBundle.getString("trackingProtection.toggle.enable.tooltip");
+    },
+
+    get disableTooltip() {
+      delete this.disableTooltip;
+      return this.disableTooltip =
+        gNavigatorBundle.getString("trackingProtection.toggle.disable.tooltip");
+    },
+
+    get disableTooltipPB() {
+      delete this.disableTooltipPB;
+      return this.disableTooltipPB =
+        gNavigatorBundle.getString("trackingProtection.toggle.disable.pbmode.tooltip");
+    },
+
+    get enableTooltipPB() {
+      delete this.enableTooltipPB;
+      return this.enableTooltipPB =
+        gNavigatorBundle.getString("trackingProtection.toggle.enable.pbmode.tooltip");
+    },
+  },
+
+  init() {
+    this.updateEnabled();
+
+    this.enabledHistogramAdd(this.enabledGlobally);
+    this.disabledPBMHistogramAdd(!this.enabledInPrivateWindows);
+
+    Services.prefs.addObserver(this.PREF_ENABLED_GLOBALLY, this);
+    Services.prefs.addObserver(this.PREF_ENABLED_IN_PRIVATE_WINDOWS, this);
+  },
+
+  uninit() {
+    Services.prefs.removeObserver(this.PREF_ENABLED_GLOBALLY, this);
+    Services.prefs.removeObserver(this.PREF_ENABLED_IN_PRIVATE_WINDOWS, this);
+  },
+
+  observe() {
+    this.updateEnabled();
+  },
+
+  get enabled() {
+    return this.enabledGlobally ||
+           (this.enabledInPrivateWindows &&
+            PrivateBrowsingUtils.isWindowPrivate(window));
+  },
+
+  enabledHistogramAdd(value) {
+    if (PrivateBrowsingUtils.isWindowPrivate(window)) {
+      return;
+    }
+    Services.telemetry.getHistogramById("TRACKING_PROTECTION_ENABLED").add(value);
+  },
+
+  disabledPBMHistogramAdd(value) {
+    if (PrivateBrowsingUtils.isWindowPrivate(window)) {
+      return;
+    }
+    Services.telemetry.getHistogramById("TRACKING_PROTECTION_PBM_DISABLED").add(value);
+  },
+
+  onGlobalToggleCommand() {
+    if (PrivateBrowsingUtils.isWindowPrivate(window)) {
+      Services.prefs.setBoolPref(this.PREF_ENABLED_IN_PRIVATE_WINDOWS, !this.enabledInPrivateWindows);
+    } else {
+      Services.prefs.setBoolPref(this.PREF_ENABLED_GLOBALLY, !this.enabledGlobally);
+    }
+  },
+
+  updateEnabled() {
+    this.enabledGlobally =
+      Services.prefs.getBoolPref(this.PREF_ENABLED_GLOBALLY);
+    this.enabledInPrivateWindows =
+      Services.prefs.getBoolPref(this.PREF_ENABLED_IN_PRIVATE_WINDOWS);
+
+    if (!ContentBlocking.contentBlockingUIEnabled) {
+      ContentBlocking.updateEnabled();
+    }
+
+    if (PrivateBrowsingUtils.isWindowPrivate(window)) {
+      this.appMenuButton.setAttribute("tooltiptext", this.enabledInPrivateWindows ?
+        this.strings.disableTooltipPB : this.strings.enableTooltipPB);
+      this.appMenuButton.setAttribute("enabled", this.enabledInPrivateWindows);
+      this.appMenuButton.setAttribute("aria-pressed", this.enabledInPrivateWindows);
+    } else {
+      this.appMenuButton.setAttribute("tooltiptext", this.enabledGlobally ?
+        this.strings.disableTooltip : this.strings.enableTooltip);
+      this.appMenuButton.setAttribute("enabled", this.enabledGlobally);
+      this.appMenuButton.setAttribute("aria-pressed", this.enabledGlobally);
+    }
+  },
+};
+
+
+var ContentBlocking = {
+  // If the user ignores the doorhanger, we stop showing it after some time.
+  MAX_INTROS: 20,
+  PREF_ENABLED: "browser.contentblocking.enabled",
+  PREF_UI_ENABLED: "browser.contentblocking.ui.enabled",
+  PREF_APP_MENU_TOGGLE: "privacy.trackingprotection.appMenuToggle.enabled",
+  PREF_ANIMATIONS_ENABLED: "toolkit.cosmeticAnimations.enabled",
   content: null,
   icon: null,
   activeTooltipText: null,
   disabledTooltipText: null,
 
+  // A list of blockers that will be displayed in the categories list
+  // when blockable content is detected. A blocker must be an object
+  // with at least the following two properties:
+  //  - enabled: Whether the blocker is currently turned on.
+  //  - categoryItem: The DOM item that represents the entry in the category list.
+  //
+  // It may also contain an init() and uninit() function, which will be called
+  // on ContentBlocking.init() and ContentBlocking.uninit().
+  blockers: [FastBlock, TrackingProtection],
+
   get _baseURIForChannelClassifier() {
     // Convert document URI into the format used by
     // nsChannelClassifier::ShouldEnableTrackingProtection.
@@ -32,8 +167,7 @@ var TrackingProtection = {
 
   init() {
     let $ = selector => document.querySelector(selector);
-    this.container = $("#tracking-protection-container");
+    this.content = $("#identity-popup-content-blocking-content");
-    this.content = $("#tracking-protection-content");
     this.icon = $("#tracking-protection-icon");
     this.appMenuContainer = $("#appMenu-tp-container");
     this.appMenuSeparator = $("#appMenu-tp-separator");
@@ -41,27 +175,25 @@ var TrackingProtection = {
     this.animatedIcon = $("#tracking-protection-icon-animatable-image");
     this.animatedIcon.addEventListener("animationend", () => this.iconBox.removeAttribute("animate"));
 
-    this.appMenuButton = $("#appMenu-tp-toggle");
-
-    this.enableTooltip =
-      gNavigatorBundle.getString("trackingProtection.toggle.enable.tooltip");
-    this.disableTooltip =
-      gNavigatorBundle.getString("trackingProtection.toggle.disable.tooltip");
-    this.enableTooltipPB =
-      gNavigatorBundle.getString("trackingProtection.toggle.enable.pbmode.tooltip");
-    this.disableTooltipPB =
-      gNavigatorBundle.getString("trackingProtection.toggle.disable.pbmode.tooltip");
-
     this.updateAnimationsEnabled = () => {
       this.iconBox.toggleAttribute("animationsenabled",
         Services.prefs.getBoolPref(this.PREF_ANIMATIONS_ENABLED, false));
     };
 
+    for (let blocker of this.blockers) {
+      if (blocker.init) {
+        blocker.init();
+      }
+    }
+
     this.updateAnimationsEnabled();
 
     Services.prefs.addObserver(this.PREF_ANIMATIONS_ENABLED, this.updateAnimationsEnabled);
 
-    this.updateEnabled();
+    XPCOMUtils.defineLazyPreferenceGetter(this, "contentBlockingEnabled", this.PREF_ENABLED, false,
+      this.updateEnabled.bind(this));
+    XPCOMUtils.defineLazyPreferenceGetter(this, "contentBlockingUIEnabled", this.PREF_UI_ENABLED, false,
+      this.updateUIEnabled.bind(this));
 
     this.updateAppMenuToggle = () => {
       if (Services.prefs.getBoolPref(this.PREF_APP_MENU_TOGGLE, false)) {
@@ -73,44 +205,40 @@ var TrackingProtection = {
       }
     };
 
-    Services.prefs.addObserver(this.PREF_ENABLED_GLOBALLY, this);
-    Services.prefs.addObserver(this.PREF_ENABLED_IN_PRIVATE_WINDOWS, this);
     Services.prefs.addObserver(this.PREF_APP_MENU_TOGGLE, this.updateAppMenuToggle);
 
     this.updateAppMenuToggle();
+    this.updateEnabled();
+    this.updateUIEnabled();
 
     this.activeTooltipText =
       gNavigatorBundle.getString("trackingProtection.icon.activeTooltip");
     this.disabledTooltipText =
       gNavigatorBundle.getString("trackingProtection.icon.disabledTooltip");
-
-    this.enabledHistogramAdd(this.enabledGlobally);
-    this.disabledPBMHistogramAdd(!this.enabledInPrivateWindows);
   },
 
   uninit() {
-    Services.prefs.removeObserver(this.PREF_ENABLED_GLOBALLY, this);
+    for (let blocker of this.blockers) {
-    Services.prefs.removeObserver(this.PREF_ENABLED_IN_PRIVATE_WINDOWS, this);
+      if (blocker.uninit) {
+        blocker.uninit();
+      }
+    }
+
     Services.prefs.removeObserver(this.PREF_APP_MENU_TOGGLE, this.updateAppMenuToggle);
     Services.prefs.removeObserver(this.PREF_ANIMATIONS_ENABLED, this.updateAnimationsEnabled);
   },
 
-  observe() {
-    this.updateEnabled();
-  },
-
   get enabled() {
-    return this.enabledGlobally ||
+    return this.contentBlockingUIEnabled ? this.contentBlockingEnabled : TrackingProtection.enabled;
-           (this.enabledInPrivateWindows &&
-            PrivateBrowsingUtils.isWindowPrivate(window));
   },
 
-  onGlobalToggleCommand() {
+  updateEnabled() {
-    if (PrivateBrowsingUtils.isWindowPrivate(window)) {
+    this.content.toggleAttribute("enabled", this.enabled);
-      Services.prefs.setBoolPref(this.PREF_ENABLED_IN_PRIVATE_WINDOWS, !this.enabledInPrivateWindows);
+  },
-    } else {
+
-      Services.prefs.setBoolPref(this.PREF_ENABLED_GLOBALLY, !this.enabledGlobally);
+  updateUIEnabled() {
-    }
+    this.content.toggleAttribute("contentBlockingUI", this.contentBlockingUIEnabled);
+    this.updateEnabled();
   },
 
   hideIdentityPopupAndReload() {
@@ -122,41 +250,6 @@ var TrackingProtection = {
     openPreferences("privacy-trackingprotection", { origin });
   },
 
-  updateEnabled() {
-    this.enabledGlobally =
-      Services.prefs.getBoolPref(this.PREF_ENABLED_GLOBALLY);
-    this.enabledInPrivateWindows =
-      Services.prefs.getBoolPref(this.PREF_ENABLED_IN_PRIVATE_WINDOWS);
-
-    this.content.setAttribute("enabled", this.enabled);
-
-    if (PrivateBrowsingUtils.isWindowPrivate(window)) {
-      this.appMenuButton.setAttribute("enabled", this.enabledInPrivateWindows);
-      this.appMenuButton.setAttribute("aria-pressed", this.enabledInPrivateWindows);
-      this.appMenuButton.setAttribute("tooltiptext", this.enabledInPrivateWindows ?
-        this.disableTooltipPB : this.enableTooltipPB);
-    } else {
-      this.appMenuButton.setAttribute("enabled", this.enabledGlobally);
-      this.appMenuButton.setAttribute("aria-pressed", this.enabledGlobally);
-      this.appMenuButton.setAttribute("tooltiptext", this.enabledGlobally ?
-        this.disableTooltip : this.enableTooltip);
-    }
-  },
-
-  enabledHistogramAdd(value) {
-    if (PrivateBrowsingUtils.isWindowPrivate(window)) {
-      return;
-    }
-    Services.telemetry.getHistogramById("TRACKING_PROTECTION_ENABLED").add(value);
-  },
-
-  disabledPBMHistogramAdd(value) {
-    if (PrivateBrowsingUtils.isWindowPrivate(window)) {
-      return;
-    }
-    Services.telemetry.getHistogramById("TRACKING_PROTECTION_PBM_DISABLED").add(value);
-  },
-
   eventsHistogramAdd(value) {
     if (PrivateBrowsingUtils.isWindowPrivate(window)) {
       return;
@@ -185,7 +278,8 @@ var TrackingProtection = {
     // Don't deal with about:, file: etc.
     if (!baseURI) {
       this.cancelAnimation();
-      this.iconBox.removeAttribute("state");
+      this.iconBox.removeAttribute("active");
+      this.iconBox.removeAttribute("hasException");
       return;
     }
 
@@ -198,6 +292,18 @@ var TrackingProtection = {
 
     let isBlocking = state & Ci.nsIWebProgressListener.STATE_BLOCKED_TRACKING_CONTENT;
     let isAllowing = state & Ci.nsIWebProgressListener.STATE_LOADED_TRACKING_CONTENT;
+    let detected = isBlocking || isAllowing;
+
+    // We consider the shield state as "active" when any kind of blocking-related
+    // activity occurs on the page (blocking or allowing). Since we have several
+    // content blockers, we need to go through them individually to figure out which
+    // ones are actually turned on or off.
+    // This state will be overriden later if there's an exception set for this site.
+    let active = this.enabled && detected;
+
+    for (let blocker of this.blockers) {
+      blocker.categoryItem.classList.toggle("blocked", this.enabled && blocker.enabled);
+    }
 
     // Check whether the user has added an exception for this site.
     let hasException = false;
@@ -208,62 +314,36 @@ var TrackingProtection = {
         "trackingprotection") == Services.perms.ALLOW_ACTION;
     }
 
-    if (hasException) {
+    this.content.toggleAttribute("detected", detected);
-      this.iconBox.setAttribute("hasException", "true");
+    this.content.toggleAttribute("hasException", hasException);
-      this.content.setAttribute("hasException", "true");
-    } else {
-      this.iconBox.removeAttribute("hasException");
-      this.content.removeAttribute("hasException");
-    }
 
-    if (isBlocking && this.enabled) {
+    this.iconBox.toggleAttribute("active", active);
-      if (isSimulated) {
+    this.iconBox.toggleAttribute("hasException", this.enabled && hasException);
-        this.cancelAnimation();
-      } else if (webProgress.isTopLevel) {
-        this.iconBox.setAttribute("animate", "true");
-      }
 
-      this.iconBox.setAttribute("tooltiptext", this.activeTooltipText);
+    if (isSimulated) {
-      this.iconBox.setAttribute("state", "blocked-tracking-content");
+      this.cancelAnimation();
-      this.content.setAttribute("state", "blocked-tracking-content");
+    } else if (active && webProgress.isTopLevel) {
+      this.iconBox.setAttribute("animate", "true");
 
       // Open the tracking protection introduction panel, if applicable.
-      if (this.enabledGlobally) {
+      if (TrackingProtection.enabledGlobally) {
         let introCount = Services.prefs.getIntPref("privacy.trackingprotection.introCount");
-        if (introCount < TrackingProtection.MAX_INTROS) {
+        if (introCount < this.MAX_INTROS) {
           Services.prefs.setIntPref("privacy.trackingprotection.introCount", ++introCount);
           Services.prefs.savePrefFile(null);
           this.showIntroPanel();
         }
       }
+    }
 
+    if (hasException) {
+      this.iconBox.setAttribute("tooltiptext", this.disabledTooltipText);
+      this.shieldHistogramAdd(1);
+    } else if (active) {
+      this.iconBox.setAttribute("tooltiptext", this.activeTooltipText);
       this.shieldHistogramAdd(2);
-    } else if (isAllowing) {
-      if (isSimulated) {
-        this.cancelAnimation();
-      } else if (webProgress.isTopLevel) {
-        this.iconBox.setAttribute("animate", "true");
-      }
-
-      // Only show the shield when TP is enabled for now.
-      if (this.enabled) {
-        this.iconBox.setAttribute("tooltiptext", this.disabledTooltipText);
-        this.iconBox.setAttribute("state", "loaded-tracking-content");
-        this.shieldHistogramAdd(1);
-      } else {
-        this.iconBox.removeAttribute("tooltiptext");
-        this.iconBox.removeAttribute("state");
-        this.shieldHistogramAdd(0);
-      }
-
-      // Warn in the control center even with TP disabled.
-      this.content.setAttribute("state", "loaded-tracking-content");
     } else {
       this.iconBox.removeAttribute("tooltiptext");
-      this.iconBox.removeAttribute("state");
-      this.content.removeAttribute("state");
-
-      // We didn't show the shield
       this.shieldHistogramAdd(0);
     }
 
@@ -311,7 +391,7 @@ var TrackingProtection = {
   dontShowIntroPanelAgain() {
     // This function may be called in private windows, but it does not change
     // any preference unless Tracking Protection is enabled globally.
-    if (this.enabledGlobally) {
+    if (TrackingProtection.enabledGlobally) {
       Services.prefs.setIntPref("privacy.trackingprotection.introCount",
                                 this.MAX_INTROS);
       Services.prefs.savePrefFile(null);

browser/base/content/browser.js

@@ -1313,7 +1313,7 @@ var gBrowserInit = {
     LanguageDetectionListener.init();
     BrowserOnClick.init();
     FeedHandler.init();
-    TrackingProtection.init();
+    ContentBlocking.init();
     CaptivePortalWatcher.init();
     ZoomUI.init(window);
 
@@ -1877,7 +1877,7 @@ var gBrowserInit = {
 
     FeedHandler.uninit();
 
-    TrackingProtection.uninit();
+    ContentBlocking.uninit();
 
     CaptivePortalWatcher.uninit();
 
@@ -4874,7 +4874,7 @@ var XULBrowserWindow = {
       uri = Services.uriFixup.createExposableURI(uri);
     } catch (e) {}
     gIdentityHandler.updateIdentity(this._state, uri);
-    TrackingProtection.onSecurityChange(this._state, aWebProgress, aIsSimulated);
+    ContentBlocking.onSecurityChange(this._state, aWebProgress, aIsSimulated);
   },
 
   // simulate all change notifications after switching tabs

browser/base/content/global-scripts.inc

@@ -15,6 +15,7 @@ for (let script of [
 
   "chrome://browser/content/browser-captivePortal.js",
   "chrome://browser/content/browser-compacttheme.js",
+  "chrome://browser/content/browser-contentblocking.js",
   "chrome://browser/content/browser-feeds.js",
   "chrome://browser/content/browser-media.js",
   "chrome://browser/content/browser-pageActions.js",
@@ -23,7 +24,6 @@ for (let script of [
   "chrome://browser/content/browser-sidebar.js",
   "chrome://browser/content/browser-siteIdentity.js",
   "chrome://browser/content/browser-tabsintitlebar.js",
-  "chrome://browser/content/browser-trackingprotection.js",
 
   "chrome://global/content/globalOverlay.js",
   "chrome://browser/content/utilityOverlay.js",

browser/base/jar.mn

@@ -36,6 +36,7 @@ browser.jar:
         content/browser/browser-customization.js      (content/browser-customization.js)
         content/browser/browser-data-submission-info-bar.js (content/browser-data-submission-info-bar.js)
         content/browser/browser-compacttheme.js       (content/browser-compacttheme.js)
+        content/browser/browser-contentblocking.js    (content/browser-contentblocking.js)
 #ifndef MOZILLA_OFFICIAL
         content/browser/browser-development-helpers.js (content/browser-development-helpers.js)
 #endif
@@ -53,7 +54,6 @@ browser.jar:
         content/browser/browser-sync.js               (content/browser-sync.js)
         content/browser/browser-tabsintitlebar.js       (content/browser-tabsintitlebar.js)
         content/browser/browser-thumbnails.js         (content/browser-thumbnails.js)
-        content/browser/browser-trackingprotection.js (content/browser-trackingprotection.js)
         content/browser/browser-webrender.js          (content/browser-webrender.js)
         content/browser/tab-content.js                (content/tab-content.js)
         content/browser/content.js                    (content/content.js)

browser/components/about/AboutPrivateBrowsingHandler.jsm

@@ -37,7 +37,7 @@ var AboutPrivateBrowsingHandler = {
       }
       case "DontShowIntroPanelAgain": {
         let win = aMessage.target.browser.ownerGlobal;
-        win.TrackingProtection.dontShowIntroPanelAgain();
+        win.ContentBlocking.dontShowIntroPanelAgain();
         break;
       }
     }

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

@@ -51,53 +51,59 @@
       <hbox id="tracking-protection-container"
             class="identity-popup-section"
             when-connection="not-secure secure secure-ev secure-cert-user-overridden extension">
-        <vbox id="tracking-protection-content" flex="1">
+        <vbox id="identity-popup-content-blocking-content" flex="1">
           <hbox>
-            <label id="tracking-protection-label-on"
+            <label id="tracking-protection-label"
                    class="identity-popup-headline"
-                   flex="1">&trackingProtection.on;</label>
+                   flex="1">&trackingProtection.title;</label>
-            <label id="tracking-protection-label-off"
+            <label id="content-blocking-label"
                    class="identity-popup-headline"
-                   flex="1">&trackingProtection.off;</label>
+                   flex="1">&contentBlocking.title;</label>
             <toolbarbutton id="tracking-protection-preferences-button"
                            class="identity-popup-preferences-button subviewbutton"
                            tooltiptext="&trackingProtection.tooltip;"
-                           oncommand="TrackingProtection.openPreferences('identityPopup-TP-preferencesButton');" />
+                           oncommand="ContentBlocking.openPreferences('identityPopup-TP-preferencesButton');" />
           </hbox>
 
-          <description id="tracking-blocked"
+          <description id="identity-popup-content-blocking-detected"
-                       crop="end">&trackingProtection.detectedBlocked4;</description>
+                       crop="end">&contentBlocking.detected;</description>
-          <description id="tracking-loaded"
+          <description id="identity-popup-content-blocking-not-detected"
-                       crop="end">&trackingProtection.detectedNotBlocked5;</description>
+                       crop="end">&contentBlocking.notDetected;</description>
-          <description id="tracking-not-detected"
+
-                       crop="end">&trackingProtection.notDetected5;</description>
+          <vbox id="identity-popup-content-blocking-category-list">
-          <description id="tracking-loaded-exception"
+            <hbox id="identity-popup-content-blocking-category-fastblock"
-                       crop="end">&trackingProtection.detectedException;</description>
+                  class="identity-popup-content-blocking-category" align="center" role="group">
-          <description id="tracking-not-detected-exception"
+              <image class="identity-popup-content-blocking-category-icon fastblock-icon"/>
-                       crop="end">&trackingProtection.notDetectedException;</description>
+              <label flex="1" class="identity-popup-content-blocking-category-label">&contentBlocking.fastBlock.label;</label>
-          <description id="tracking-reload-required"
+              <label flex="1" class="identity-popup-content-blocking-category-state-label">&contentBlocking.fastBlock.blocked.label;</label>
-                       crop="end">&trackingProtection.reloadRequired2;</description>
+              <label flex="1" class="identity-popup-content-blocking-category-add-blocking text-link"
+                     onclick="ContentBlocking.openPreferences('identityPopup-CB-fastblock');">&contentBlocking.fastBlock.add.label;</label>
+            </hbox>
+            <hbox id="identity-popup-content-blocking-category-tracking-protection"
+                  class="identity-popup-content-blocking-category" align="center" role="group">
+              <image class="identity-popup-content-blocking-category-icon tracking-protection-icon"/>
+              <label flex="1" class="identity-popup-content-blocking-category-label">&contentBlocking.trackingProtection.label;</label>
+              <label flex="1" class="identity-popup-content-blocking-category-state-label">&contentBlocking.trackingProtection.blocked.label;</label>
+              <label flex="1" class="identity-popup-content-blocking-category-add-blocking text-link"
+                     onclick="ContentBlocking.openPreferences('identityPopup-CB-tracking-protection');">&contentBlocking.trackingProtection.add.label;</label>
+            </hbox>
+          </vbox>
 
-          <button id="tracking-action-reload"
-                  class="tracking-protection-button"
-                  label="&trackingProtection.reload2.label;"
-                  accesskey="&trackingProtection.reload2.accesskey;"
-                  oncommand="TrackingProtection.hideIdentityPopupAndReload();" />
           <button id="tracking-action-unblock"
                   class="tracking-protection-button"
-                  label="&trackingProtection.unblock3.label;"
+                  label="&trackingProtection.unblock4.label;"
-                  accesskey="&trackingProtection.unblock3.accesskey;"
+                  accesskey="&trackingProtection.unblock4.accesskey;"
-                  oncommand="TrackingProtection.disableForCurrentPage();" />
+                  oncommand="ContentBlocking.disableForCurrentPage();" />
           <button id="tracking-action-unblock-private"
                   class="tracking-protection-button"
-                  label="&trackingProtection.unblockPrivate3.label;"
+                  label="&trackingProtection.unblockPrivate4.label;"
-                  accesskey="&trackingProtection.unblockPrivate3.accesskey;"
+                  accesskey="&trackingProtection.unblockPrivate4.accesskey;"
-                  oncommand="TrackingProtection.disableForCurrentPage();" />
+                  oncommand="ContentBlocking.disableForCurrentPage();" />
           <button id="tracking-action-block"
                   class="tracking-protection-button"
-                  label="&trackingProtection.block4.label;"
+                  label="&trackingProtection.block5.label;"
-                  accesskey="&trackingProtection.block4.accesskey;"
+                  accesskey="&trackingProtection.block5.accesskey;"
-                  oncommand="TrackingProtection.enableForCurrentPage();" />
+                  oncommand="ContentBlocking.enableForCurrentPage();" />
         </vbox>
       </hbox>
 

browser/components/customizableui/content/panelUI.inc.xul

@@ -213,7 +213,7 @@
           <toolbarbutton id="appMenu-tp-label"
                          tooltiptext="&trackingProtection.tooltip;"
                          class="subviewbutton subviewbutton-iconic"
-                         oncommand="TrackingProtection.openPreferences('appMenu-trackingprotection'); PanelUI.hide();"
+                         oncommand="ContentBlocking.openPreferences('appMenu-trackingprotection'); PanelUI.hide();"
                          label="&trackingProtection.title;"/>
           <toolbarseparator orient="vertical"/>
           <toolbarbutton id="appMenu-tp-toggle"

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

@@ -918,29 +918,51 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 <!ENTITY getUserMedia.audioCapture.label "Audio from the tab will be shared.">
 <!ENTITY getUserMedia.allWindowsShared.message "All visible windows on your screen will be shared.">
 
-<!ENTITY trackingProtection.on "Tracking Protection: ON">
+<!ENTITY contentBlocking.title "Content Blocking">
-<!ENTITY trackingProtection.off "Tracking Protection: OFF">
+<!ENTITY contentBlocking.detected "Blockable content detected on this site.">
+<!ENTITY contentBlocking.notDetected "No blockable content detected on this page">
+
+<!ENTITY contentBlocking.fastBlock.label "Slow-Loading Trackers">
+<!-- LOCALIZATION NOTE (contentBlocking.fastBlock.blocked.label):
+     This label signals that this type of content blocking is turned
+     ON and is successfully blocking malicious/slow content, so this is
+     a positive thing. It forms the end of the (imaginary) sentence
+     "Slow-Loading Trackers [are] Blocked"-->
+<!ENTITY contentBlocking.fastBlock.blocked.label "Blocked">
+<!-- LOCALIZATION NOTE (contentBlocking.fastBlock.add.label):
+     This is displayed as a link to preferences, where the user can add
+     this specific type of content blocking. When this text is shown
+     the type of content blocking is currently not enabled. -->
+<!ENTITY contentBlocking.fastBlock.add.label "Add Blocking…">
+
+<!ENTITY contentBlocking.trackingProtection.label "Trackers">
+<!-- LOCALIZATION NOTE (contentBlocking.trackingProtection.blocked.label):
+     This label signals that this type of content blocking is turned
+     ON and is successfully blocking malicious/slow content, so this is
+     a positive thing. It forms the end of the (imaginary) sentence
+     "Trackers [are] Blocked"-->
+<!ENTITY contentBlocking.trackingProtection.blocked.label "Blocked">
+<!-- LOCALIZATION NOTE (contentBlocking.trackingProtection.add.label):
+     This is displayed as a link to preferences, where the user can add
+     this specific type of content blocking. When this text is shown
+     the type of content blocking is currently not enabled. -->
+<!ENTITY contentBlocking.trackingProtection.add.label "Add Blocking…">
+
 <!ENTITY trackingProtection.title "Tracking Protection">
 <!ENTITY trackingProtection.tooltip "Open Tracking Protection Preferences">
-<!ENTITY trackingProtection.detectedBlocked4 "&brandShortName; is blocking parts of this page that may track your browsing.">
-<!ENTITY trackingProtection.detectedNotBlocked5 "&brandShortName; has detected elements that may track your browsing.">
-<!ENTITY trackingProtection.detectedException "&brandShortName; has detected elements that may track your browsing. You have disabled protection for this site.">
-<!ENTITY trackingProtection.notDetected5 "No tracking elements detected on this page.">
-<!ENTITY trackingProtection.notDetectedException "No tracking elements detected on this page. You have disabled protection for this site.">
 
-<!ENTITY trackingProtection.reloadRequired2 "You have enabled Tracking Protection. Reload this page to block all trackers.">
 <!-- LOCALIZATION NOTE (trackingProtection.unblock3.label, trackingProtection.unblock3.accesskey):
      The associated button with this label and accesskey is only shown when opening the control
      center while looking at a site with trackers in NON-private browsing mode. -->
-<!ENTITY trackingProtection.unblock3.label "Disable For This Site">
+<!ENTITY trackingProtection.unblock4.label "Disable Blocking For This Site">
-<!ENTITY trackingProtection.unblock3.accesskey "D">
+<!ENTITY trackingProtection.unblock4.accesskey "D">
 <!-- LOCALIZATION NOTE (trackingProtection.unblockPrivate3.label, trackingProtection.unblockPrivate3.accesskey):
      The associated button with this label and accesskey is only shown when opening the control
      center while looking at a site with trackers in PRIVATE browsing mode. -->
-<!ENTITY trackingProtection.unblockPrivate3.label "Disable For This Session">
+<!ENTITY trackingProtection.unblockPrivate4.label "Disable Blocking Temporarily">
-<!ENTITY trackingProtection.unblockPrivate3.accesskey "D">
+<!ENTITY trackingProtection.unblockPrivate4.accesskey "D">
-<!ENTITY trackingProtection.block4.label "Enable For This Site">
+<!ENTITY trackingProtection.block5.label "Enable Blocking For This Site">
-<!ENTITY trackingProtection.block4.accesskey "E">
+<!ENTITY trackingProtection.block5.accesskey "E">
 <!ENTITY trackingProtection.reload2.label "Reload Page">
 <!ENTITY trackingProtection.reload2.accesskey "R">
 

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

@@ -525,6 +525,10 @@ identity.extension.label=Extension (%S)
 identity.extension.tooltip=Loaded by extension: %S
 identity.showDetails.tooltip=Show connection details
 
+contentBlocking.title=Content Blocking
+contentBlocking.toggle.enable.tooltip=Enable Content Blocking
+contentBlocking.toggle.disable.tooltip=Disable Content Blocking
+
 trackingProtection.intro.title=How Tracking Protection works
 # LOCALIZATION NOTE (trackingProtection.intro.description2):
 # %S is brandShortName. This string should match the one from Step 1 of the tour

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

@@ -70,8 +70,8 @@
 }
 
 #identity-popup-mainView {
-  min-width: 30em;
+  min-width: 33em;
-  max-width: 30em;
+  max-width: 33em;
 }
 
 .identity-popup-section:not(:first-child) {
@@ -80,7 +80,7 @@
 
 .identity-popup-security-content,
 #identity-popup-permissions-content,
-#tracking-protection-content {
+#identity-popup-content-blocking-content {
   background-repeat: no-repeat;
   background-position: 1em 1em;
   background-size: 24px auto;
@@ -95,7 +95,7 @@
 
 .identity-popup-security-content:-moz-locale-dir(rtl),
 #identity-popup-permissions-content:-moz-locale-dir(rtl),
-#tracking-protection-content:-moz-locale-dir(rtl) {
+#identity-popup-content-blocking-content:-moz-locale-dir(rtl) {
   background-position: calc(100% - 1em) 1em;
 }
 
@@ -147,19 +147,22 @@
 
 /* CONTENT */
 
+.identity-popup-content-blocking-category-label,
+.identity-popup-content-blocking-category-state-label,
+.identity-popup-content-blocking-category-add-blocking,
 .identity-popup-permission-label,
 .identity-popup-permission-state-label,
 .identity-popup-security-content > description,
 #identity-popup-security-descriptions > description,
 #identity-popup-securityView-body > description,
 #identity-popup-permissions-content > description,
-#tracking-protection-content > description {
+#identity-popup-content-blocking-content > description {
   font-size: 110%;
   margin: 0;
 }
 
 #identity-popup-permissions-content > description,
-#tracking-protection-content > description {
+#identity-popup-content-blocking-content > description {
   color: var(--panel-disabled-color);
 }
 
@@ -300,59 +303,77 @@ description#identity-popup-content-verifier,
   margin-inline-end: 0;
 }
 
-/* TRACKING PROTECTION */
+/* CONTENT BLOCKING / TRACKING PROTECTION */
 
-#tracking-protection-content {
+#identity-popup-content-blocking-content {
   background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
 }
 
-#tracking-protection-content[enabled="false"],
+/* We can currently show either the old tracking protection-only UI, which has "Tracking Protection"
-#tracking-protection-content[hasException],
+ * as a label, or the new content blocking UI which has a different label and also a list of
-#tracking-protection-content[state="loaded-tracking-content"] {
+ * categories of blockers. This rule hides elements depending on which UI we want to show */
-  background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg");
+#identity-popup-content-blocking-content[contentBlockingUI] #tracking-protection-label,
-}
+#identity-popup-content-blocking-content:not([contentBlockingUI]) #content-blocking-label,
-
+#identity-popup-content-blocking-content:not([contentBlockingUI]) > #identity-popup-content-blocking-category-list {
-/* Show the "on" label by default, except when TP is disabled or there's a local exception. */
-#tracking-protection-label-off,
-#tracking-protection-content[enabled="false"] #tracking-protection-label-on,
-#tracking-protection-content[hasException] #tracking-protection-label-on,
-#tracking-protection-content[state="loaded-tracking-content"] #tracking-protection-label-on {
   display: none;
 }
 
-#tracking-protection-label-on,
+/* Content Blocking categories */
-#tracking-protection-content[enabled="false"] #tracking-protection-label-off,
+
-#tracking-protection-content[hasException] #tracking-protection-label-off,
+#identity-popup-content-blocking-category-list {
-#tracking-protection-content[state="loaded-tracking-content"] #tracking-protection-label-off {
+  margin-top: 10px;
-  display: -moz-box;
 }
 
-#tracking-protection-content > description {
+/* Don't show the categories when no trackers were detected. */
+#identity-popup-content-blocking-content:not([detected]) > #identity-popup-content-blocking-category-list {
   display: none;
 }
 
+/* Show the "detected"/"not detected" message depending on the content state. */
+#identity-popup-content-blocking-content:not([detected]) > #identity-popup-content-blocking-detected,
+#identity-popup-content-blocking-content[detected] > #identity-popup-content-blocking-not-detected {
+  display: none;
+}
+
+#identity-popup-content-blocking-content[enabled][hasException] .identity-popup-content-blocking-category-state-label,
+.identity-popup-content-blocking-category:not(.blocked) .identity-popup-content-blocking-category-state-label {
+  display: none;
+}
+
+.identity-popup-content-blocking-category.blocked .identity-popup-content-blocking-category-add-blocking {
+  display: none;
+}
+
+.fastblock-icon {
+  list-style-image: url(chrome://browser/skin/controlcenter/slowtrackers.svg);
+}
+
+#identity-popup-content-blocking-category-fastblock.blocked > .fastblock-icon {
+  list-style-image: url(chrome://browser/skin/controlcenter/slowtrackers-disabled.svg);
+}
+
+.tracking-protection-icon {
+  list-style-image: url(chrome://browser/skin/controlcenter/trackers.svg);
+}
+
+#identity-popup-content-blocking-category-tracking-protection.blocked > .tracking-protection-icon {
+  list-style-image: url(chrome://browser/skin/controlcenter/trackers-disabled.svg);
+}
+
+/* Content Blocking action button */
+
 .tracking-protection-button {
   margin: 1em 0 0;
   display: none;
 }
 
-/* Show the right tracking descriptions and buttons for the corresponding state. */
+/* Show the right action buttons depending on content state */
-
+/* Offer to temporarily add an exception in private mode. */
-/* Default state / Tracking not detected */
+#main-window:not([privatebrowsingmode]) #identity-popup-content-blocking-content[enabled][detected]:not([hasException]) > #tracking-action-unblock,
-#tracking-protection-content:not([state]):-moz-any([enabled="false"], :not([hasException])) > #tracking-not-detected,
+/* Offer to permanently add an exception in normal mode. */
-#tracking-protection-content:not([state])[enabled="true"][hasException] > #tracking-not-detected-exception,
+#main-window[privatebrowsingmode] #identity-popup-content-blocking-content[enabled][detected]:not([hasException]) > #tracking-action-unblock-private,
-/* Blocking tracking, offer buttons to unblock (depending on PBM). */
+/* If there's an exception just offer to remove the exception again. */
-#tracking-protection-content:not([hasException])[state="blocked-tracking-content"] > #tracking-blocked,
+#identity-popup-content-blocking-content[enabled][hasException] > #tracking-action-block {
-#main-window:not([privatebrowsingmode]) #tracking-protection-content:not([hasException])[state="blocked-tracking-content"] > #tracking-action-unblock,
-#main-window[privatebrowsingmode] #tracking-protection-content[state="blocked-tracking-content"] > #tracking-action-unblock-private,
-/* Enabled and no exception but trackers loaded, probably needs a reload */
-#tracking-protection-content[enabled="true"]:not([hasException])[state="loaded-tracking-content"] > #tracking-reload-required,
-#tracking-protection-content[enabled="true"]:not([hasException])[state="loaded-tracking-content"] > #tracking-action-reload,
-/* Tracking Loaded */
-#tracking-protection-content[state="loaded-tracking-content"][enabled="false"] > #tracking-loaded,
-#tracking-protection-content[enabled="true"][hasException] > #tracking-loaded-exception,
-/* Has an exception, offer to block the site again. */
-#tracking-protection-content[enabled="true"][hasException] > #tracking-action-block {
   display: -moz-box;
 }
 
@@ -377,6 +398,7 @@ description#identity-popup-content-verifier,
   min-height: 24px;
 }
 
+#identity-popup-content-blocking-category-list,
 #identity-popup-permission-list {
   /* Offset the padding set on #identity-popup-permissions-content so that it
      shows up just below the section. The permission icons are 16px wide and
@@ -384,6 +406,7 @@ description#identity-popup-content-verifier,
   margin-inline-start: calc(-1em - 16px);
 }
 
+.identity-popup-content-blocking-category,
 .identity-popup-permission-item {
   min-height: 24px;
 }
@@ -392,6 +415,7 @@ description#identity-popup-content-verifier,
   margin-top: 5px;
 }
 
+.identity-popup-content-blocking-category-icon,
 .identity-popup-permission-icon {
   width: 16px;
   height: 16px;
@@ -407,6 +431,8 @@ description#identity-popup-content-verifier,
   50% { opacity: 0; }
 }
 
+.identity-popup-content-blocking-category-label,
+.identity-popup-content-blocking-category-state-label,
 .identity-popup-permission-label,
 .identity-popup-permission-state-label {
   /* We need to align the action buttons and permission icons with the text.
@@ -417,13 +443,20 @@ description#identity-popup-content-verifier,
   margin-top: -0.1em;
 }
 
+.identity-popup-content-blocking-category-label,
 .identity-popup-permission-label {
   margin-inline-start: 1em;
 }
 
+.identity-popup-content-blocking-category-state-label,
+.identity-popup-content-blocking-category-add-blocking,
 .identity-popup-permission-state-label {
   margin-inline-end: 5px;
   text-align: end;
+}
+
+.identity-popup-content-blocking-category-state-label,
+.identity-popup-permission-state-label {
   color: var(--panel-disabled-color);
 }
 

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

@@ -0,0 +1,7 @@
+<!-- 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" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path fill="context-fill" d="M14,6c-1,0-1.746,1-2.246,1.992-.047-.193-.115-.38-.176-.57L8,11H9v1.5a.5.5,0,0,0,.5.5h2a.5.5,0,0,0,.5-.5V10h2a2,2,0,0,0,0-4Z"/>
+  <path fill="context-fill" d="M14.707,1.293a1,1,0,0,0-1.414,0L9.944,4.641A5.359,5.359,0,0,0,6,3C2,3,0,6.686,0,10H1v2.5a.5.5,0,0,0,.5.5h.086l-.293.293a1,1,0,1,0,1.414,1.414l12-12A1,1,0,0,0,14.707,1.293Z"/>
+</svg>

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

@@ -0,0 +1,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" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path fill="context-fill" d="M9.306,9.694c.071.416.132.8.15,1.1a4.938,4.938,0,0,1-.058,1,18.45,18.45,0,0,0,3.478.193c.016-.167.033-.343.052-.537.2-2.032.885-2.574,1.028-3.707a5.874,5.874,0,0,0-.223-2.475Z"/>
+  <path fill="context-fill" d="M9.236,12.767c-.069.365-.136.737-.177,1.13a1.675,1.675,0,0,0,1.579,2.079c1.235.16,1.779-.976,1.944-1.635a8.594,8.594,0,0,0,.2-1.35c-.2.005-.4.009-.606.009A18.258,18.258,0,0,1,9.236,12.767Z"/>
+  <path fill="context-fill" d="M14.707,1.293a1,1,0,0,0-1.414,0L6.547,8.039c0-.083-.008-.167,0-.249a25.267,25.267,0,0,0,.432-3.949C6.724,1.833,5.853-.177,4.414,0,2.8.2,1.766,2.521,2.045,4.742c.143,1.133.828,1.675,1.028,3.707.019.194.036.37.052.536A20.41,20.41,0,0,0,5.67,8.916L4.614,9.972c-.256.012-.514.028-.76.028-.221,0-.432,0-.636-.01A9.6,9.6,0,0,0,3.387,11.2L1.293,13.293a1,1,0,1,0,1.414,1.414l12-12A1,1,0,0,0,14.707,1.293Z"/>
+</svg>

browser/themes/shared/controlcenter/tracking-protection-disabled.svg

@@ -1,8 +0,0 @@
-<!-- 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" width="32" height="32" viewBox="0 0 32 32" fill="context-fill" fill-opacity="context-fill-opacity">
-  <path d="M24.852 14.291c-.391 4.287-1.125 6.49-3.021 9.065A9.562 9.562 0 0 1 16 26.989a9.679 9.679 0 0 1-4.958-2.617l-1.415 1.415a11.419 11.419 0 0 0 6.261 3.207l.112.012.112-.012a11.4 11.4 0 0 0 7.33-4.452c2.12-2.879 2.977-5.42 3.4-10.07.121-1.339.151-4.013.155-6.057l-2.013 2.014c-.016 1.471-.053 2.996-.132 3.862z"/>
-  <path d="M16 24.336v-4.922l-2.921 2.921a6.513 6.513 0 0 0 2.919 2z"/>
-  <path d="M28.707 3.293a1 1 0 0 0-1.414 0l-1.576 1.576a2.59 2.59 0 0 0-.944-.377L16 2.985 7.227 4.491A2.69 2.69 0 0 0 5 7.153c-.006 2.031.007 5.681.155 7.319.349 3.823 1.007 6.221 2.4 8.554l-4.262 4.267a1 1 0 1 0 1.414 1.414l24-24a1 1 0 0 0 0-1.414zM10 8.78c.021 2.264.073 3.979.148 4.8a20.908 20.908 0 0 0 1.124 5.73l-2.244 2.248a17.451 17.451 0 0 1-1.88-7.267C7 12.676 7 8.765 7 7.159a.7.7 0 0 1 .563-.7L16 5.015l8.169 1.4L16 14.586V7.75z"/>
-</svg>

browser/themes/shared/identity-block/identity-block.inc.css

@@ -154,7 +154,8 @@
   margin-inline-end: -20px;
 }
 
-#tracking-protection-icon-box[state] {
+#tracking-protection-icon-box[active],
+#tracking-protection-icon-box[hasException] {
   margin-inline-end: 0px;
   visibility: visible;
 }
@@ -163,7 +164,7 @@
   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
 }
 
-#tracking-protection-icon-box:not([hasException])[state="blocked-tracking-content"][animationsenabled] > #tracking-protection-icon,
+#tracking-protection-icon-box:not([hasException])[active][animationsenabled] > #tracking-protection-icon,
 #tracking-protection-icon-box:not([animationsenabled]) > #tracking-protection-icon-animatable-box {
   display: none;
 }
@@ -177,7 +178,7 @@
   height: 20px;
 }
 
-#tracking-protection-icon-box:not([hasException])[state="blocked-tracking-content"] #tracking-protection-icon-animatable-image {
+#tracking-protection-icon-box:not([hasException])[active] #tracking-protection-icon-animatable-image {
   background-image: url(chrome://browser/skin/tracking-protection-animation.svg);
   transform: translateX(-1232px);
   width: 1248px;
@@ -187,29 +188,26 @@
   -moz-context-properties: fill, fill-opacity;
 }
 
-#tracking-protection-icon-box[state="blocked-tracking-content"] #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
+#tracking-protection-icon-box[active] #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
   transform: scaleX(-1) translateX(-1232px);
 }
 
-#tracking-protection-icon-box[state="blocked-tracking-content"][animate] #tracking-protection-icon-animatable-image {
+#tracking-protection-icon-box[active][animate] #tracking-protection-icon-animatable-image {
   animation-name: tp-icon-animation;
   animation-timing-function: steps(77);
   animation-duration: 3s;
   animation-fill-mode: forwards;
 }
 
-#tracking-protection-icon-box[state="blocked-tracking-content"][animate] #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
+#tracking-protection-icon-box[active][animate] #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
   animation-name: tp-icon-animation-rtl;
 }
 
-#tracking-protection-icon-box[state="blocked-tracking-content"] > #tracking-protection-icon {
+#tracking-protection-icon-box[active] > #tracking-protection-icon {
   list-style-image: url(chrome://browser/skin/tracking-protection.svg);
 }
 
-/* Override the blocked tracking content rule for cases when the user has added an exception
+#tracking-protection-icon-box[hasException] > #tracking-protection-icon {
- * on a different tab to signify that protection is disabled now */
-#tracking-protection-icon-box[hasException][state="blocked-tracking-content"] > #tracking-protection-icon,
-#tracking-protection-icon-box[state="loaded-tracking-content"] > #tracking-protection-icon {
   list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg);
 }
 

browser/themes/shared/jar.inc.mn

@@ -28,9 +28,10 @@
   skin/classic/browser/controlcenter/extension.svg             (../shared/controlcenter/extension.svg)
   skin/classic/browser/controlcenter/permissions.svg           (../shared/controlcenter/permissions.svg)
   skin/classic/browser/controlcenter/slowtrackers.svg          (../shared/controlcenter/slowtrackers.svg)
+  skin/classic/browser/controlcenter/slowtrackers-disabled.svg (../shared/controlcenter/slowtrackers-disabled.svg)
   skin/classic/browser/controlcenter/trackers.svg              (../shared/controlcenter/trackers.svg)
+  skin/classic/browser/controlcenter/trackers-disabled.svg     (../shared/controlcenter/trackers-disabled.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/controlcenter/warning-gray.svg          (../shared/controlcenter/warning-gray.svg)
   skin/classic/browser/controlcenter/warning-yellow.svg        (../shared/controlcenter/warning-yellow.svg)
   skin/classic/browser/customizableui/empty-overflow-panel.png     (../shared/customizableui/empty-overflow-panel.png)