Bug 1471713 - Add an animation for the tracking protection icon. r=sfoster

MozReview-Commit-ID: GBUbaoShxQi

--HG--
extra : rebase_source : 60040607f91cd0477fbf98c49b77b8ee09112a17

browser/base/content/browser-trackingprotection.js

@@ -8,6 +8,7 @@ var TrackingProtection = {
   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,
@@ -36,6 +37,10 @@ var TrackingProtection = {
     this.icon = $("#tracking-protection-icon");
     this.appMenuContainer = $("#appMenu-tp-container");
     this.appMenuSeparator = $("#appMenu-tp-separator");
+    this.iconBox = $("#tracking-protection-icon-box");
+    this.animatedIcon = $("#tracking-protection-icon-animatable-image");
+    this.animatedIcon.addEventListener("animationend", () => this.iconBox.removeAttribute("animate"));
+
     this.broadcaster = $("#trackingProtectionBroadcaster");
 
     this.enableTooltip =
@@ -47,6 +52,15 @@ var TrackingProtection = {
     this.disableTooltipPB =
       gNavigatorBundle.getString("trackingProtection.toggle.disable.pbmode.tooltip");
 
+    this.updateAnimationsEnabled = () => {
+      this.iconBox.toggleAttribute("animationsenabled",
+        Services.prefs.getBoolPref(this.PREF_ANIMATIONS_ENABLED, false));
+    };
+
+    this.updateAnimationsEnabled();
+
+    Services.prefs.addObserver(this.PREF_ANIMATIONS_ENABLED, this.updateAnimationsEnabled);
+
     this.updateEnabled();
 
     this.updateAppMenuToggle = () => {
@@ -78,6 +92,7 @@ var TrackingProtection = {
     Services.prefs.removeObserver(this.PREF_ENABLED_GLOBALLY, this);
     Services.prefs.removeObserver(this.PREF_ENABLED_IN_PRIVATE_WINDOWS, this);
     Services.prefs.removeObserver(this.PREF_APP_MENU_TOGGLE, this.updateAppMenuToggle);
+    Services.prefs.removeObserver(this.PREF_ANIMATIONS_ENABLED, this.updateAnimationsEnabled);
   },
 
   observe() {
@@ -156,21 +171,29 @@ var TrackingProtection = {
     Services.telemetry.getHistogramById("TRACKING_PROTECTION_SHIELD").add(value);
   },
 
-  onSecurityChange(state, isSimulated) {
+  cancelAnimation() {
+    let iconAnimation = this.animatedIcon.getAnimations()[0];
+    if (iconAnimation && iconAnimation.currentTime) {
+      iconAnimation.cancel();
+    }
+    this.iconBox.removeAttribute("animate");
+  },
+
+  onSecurityChange(state, webProgress, isSimulated) {
     let baseURI = this._baseURIForChannelClassifier;
 
     // Don't deal with about:, file: etc.
     if (!baseURI) {
-      this.icon.removeAttribute("state");
+      this.cancelAnimation();
+      this.iconBox.removeAttribute("state");
       return;
     }
 
-    // Only animate the shield if the event was not fired directly from
-    // the tabbrowser (due to a browser change).
-    if (isSimulated) {
-      this.icon.removeAttribute("animate");
-    } else {
-      this.icon.setAttribute("animate", "true");
+    // The user might have navigated before the shield animation
+    // finished. In this case, reset the animation to be able to
+    // play it in full again and avoid choppiness.
+    if (webProgress.isTopLevel) {
+      this.cancelAnimation();
     }
 
     let isBlocking = state & Ci.nsIWebProgressListener.STATE_BLOCKED_TRACKING_CONTENT;
@@ -192,8 +215,14 @@ var TrackingProtection = {
     }
 
     if (isBlocking && this.enabled) {
-      this.icon.setAttribute("tooltiptext", this.activeTooltipText);
-      this.icon.setAttribute("state", "blocked-tracking-content");
+      if (isSimulated) {
+        this.cancelAnimation();
+      } else if (webProgress.isTopLevel) {
+        this.iconBox.setAttribute("animate", "true");
+      }
+
+      this.iconBox.setAttribute("tooltiptext", this.activeTooltipText);
+      this.iconBox.setAttribute("state", "blocked-tracking-content");
       this.content.setAttribute("state", "blocked-tracking-content");
 
       // Open the tracking protection introduction panel, if applicable.
@@ -208,22 +237,28 @@ var TrackingProtection = {
 
       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.icon.setAttribute("tooltiptext", this.disabledTooltipText);
-        this.icon.setAttribute("state", "loaded-tracking-content");
+        this.iconBox.setAttribute("tooltiptext", this.disabledTooltipText);
+        this.iconBox.setAttribute("state", "loaded-tracking-content");
         this.shieldHistogramAdd(1);
       } else {
-        this.icon.removeAttribute("tooltiptext");
-        this.icon.removeAttribute("state");
+        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.icon.removeAttribute("tooltiptext");
-      this.icon.removeAttribute("state");
+      this.iconBox.removeAttribute("tooltiptext");
+      this.iconBox.removeAttribute("state");
       this.content.removeAttribute("state");
 
       // We didn't show the shield

browser/base/content/browser.js

@@ -4898,7 +4898,7 @@ var XULBrowserWindow = {
       uri = Services.uriFixup.createExposableURI(uri);
     } catch (e) {}
     gIdentityHandler.updateIdentity(this._state, uri);
-    TrackingProtection.onSecurityChange(this._state, aIsSimulated);
+    TrackingProtection.onSecurityChange(this._state, aWebProgress, aIsSimulated);
   },
 
   // simulate all change notifications after switching tabs

browser/base/content/browser.xul

@@ -798,7 +798,12 @@
                        consumeanchor="identity-box"
                        onclick="PageProxyClickHandler(event);"/>
                 <image id="sharing-icon" mousethrough="always"/>
-                <image id="tracking-protection-icon"/>
+                <box id="tracking-protection-icon-box" animationsenabled="true">
+                  <image id="tracking-protection-icon"/>
+                  <box id="tracking-protection-icon-animatable-box" flex="1">
+                    <image id="tracking-protection-icon-animatable-image" flex="1"/>
+                  </box>
+                </box>
                 <box id="blocked-permissions-container" align="center">
                   <image data-permission-id="geo" class="blocked-permission-icon geo-icon" role="button"
                          tooltiptext="&urlbar.geolocationBlocked.tooltip;"/>

browser/base/content/test/general/browser_trackingUI_4.js

@@ -44,38 +44,38 @@ async function testTrackingProtectionAnimation() {
   info("Load a test page not containing tracking elements");
   let benignTab = await BrowserTestUtils.openNewForegroundTab(tabbrowser, BENIGN_PAGE);
 
-  ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
-  ok(TrackingProtection.icon.hasAttribute("animate"), "icon: animate");
+  ok(!TrackingProtection.iconBox.hasAttribute("state"), "iconBox: no state");
+  ok(!TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: no animate");
 
   info("Load a test page containing tracking elements");
   let trackingTab = await BrowserTestUtils.openNewForegroundTab(tabbrowser, TRACKING_PAGE);
 
-  ok(TrackingProtection.icon.hasAttribute("state"), "icon: state");
-  ok(TrackingProtection.icon.hasAttribute("animate"), "icon: animate");
+  ok(TrackingProtection.iconBox.hasAttribute("state"), "iconBox: state");
+  ok(TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: animate");
 
   info("Switch from tracking -> benign tab");
   let securityChanged = waitForSecurityChange();
   tabbrowser.selectedTab = benignTab;
   await securityChanged;
 
-  ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
-  ok(!TrackingProtection.icon.hasAttribute("animate"), "icon: no animate");
+  ok(!TrackingProtection.iconBox.hasAttribute("state"), "iconBox: no state");
+  ok(!TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: no animate");
 
   info("Switch from benign -> tracking tab");
   securityChanged = waitForSecurityChange();
   tabbrowser.selectedTab = trackingTab;
   await securityChanged;
 
-  ok(TrackingProtection.icon.hasAttribute("state"), "icon: state");
-  ok(!TrackingProtection.icon.hasAttribute("animate"), "icon: no animate");
+  ok(TrackingProtection.iconBox.hasAttribute("state"), "iconBox: state");
+  ok(!TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: no animate");
 
   info("Reload tracking tab");
   securityChanged = waitForSecurityChange(2);
   tabbrowser.reload();
   await securityChanged;
 
-  ok(TrackingProtection.icon.hasAttribute("state"), "icon: state");
-  ok(TrackingProtection.icon.hasAttribute("animate"), "icon: animate");
+  ok(TrackingProtection.iconBox.hasAttribute("state"), "iconBox: state");
+  ok(TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: animate");
 }
 
 add_task(async function testNormalBrowsing() {

browser/base/content/test/general/browser_trackingUI_5.js

@@ -38,10 +38,10 @@ function testTrackingPage(window) {
   ok(!TrackingProtection.container.hidden, "The container is visible");
   is(TrackingProtection.content.getAttribute("state"), "blocked-tracking-content",
      'content: state="blocked-tracking-content"');
-  is(TrackingProtection.icon.getAttribute("state"), "blocked-tracking-content",
-     'icon: state="blocked-tracking-content"');
+  is(TrackingProtection.iconBox.getAttribute("state"), "blocked-tracking-content",
+     'iconBox: state="blocked-tracking-content"');
 
-  ok(!hidden("#tracking-protection-icon"), "icon is visible");
+  ok(!hidden("#tracking-protection-icon-box"), "icon box is visible");
   ok(hidden("#tracking-action-block"), "blockButton is hidden");
 
   ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
@@ -59,10 +59,10 @@ function testTrackingPageUnblocked() {
   ok(!TrackingProtection.container.hidden, "The container is visible");
   is(TrackingProtection.content.getAttribute("state"), "loaded-tracking-content",
      'content: state="loaded-tracking-content"');
-  is(TrackingProtection.icon.getAttribute("state"), "loaded-tracking-content",
-     'icon: state="loaded-tracking-content"');
+  is(TrackingProtection.iconBox.getAttribute("state"), "loaded-tracking-content",
+     'iconBox: state="loaded-tracking-content"');
 
-  ok(!hidden("#tracking-protection-icon"), "icon is visible");
+  ok(!hidden("#tracking-protection-icon-box"), "icon box is visible");
   ok(!hidden("#tracking-action-block"), "blockButton is visible");
   ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
 

browser/base/content/test/general/browser_trackingUI_6.js

@@ -35,9 +35,9 @@ add_task(async function test_fetch() {
 
     is(TrackingProtection.content.getAttribute("state"), "blocked-tracking-content",
         'content: state="blocked-tracking-content"');
-    is(TrackingProtection.icon.getAttribute("state"), "blocked-tracking-content",
-        'icon: state="blocked-tracking-content"');
-    is(TrackingProtection.icon.getAttribute("tooltiptext"),
+    is(TrackingProtection.iconBox.getAttribute("state"), "blocked-tracking-content",
+        'iconBox: state="blocked-tracking-content"');
+    is(TrackingProtection.iconBox.getAttribute("tooltiptext"),
        gNavigatorBundle.getString("trackingProtection.icon.activeTooltip"), "correct tooltip");
   });
 });

browser/base/content/test/trackingUI/browser.ini

@@ -5,6 +5,7 @@ support-files =
   ../general/benignPage.html
   ../general/trackingPage.html
 
+[browser_trackingUI_animation.js]
 [browser_trackingUI_appMenu.js]
 [browser_trackingUI_appMenu_toggle.js]
 [browser_trackingUI_open_preferences.js]

browser/base/content/test/trackingUI/browser_trackingUI_animation.js

@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/trackingUI/trackingPage.html";
+const BENIGN_PAGE = "http://tracking.example.org/browser/browser/base/content/test/trackingUI/benignPage.html";
+const TP_PREF = "privacy.trackingprotection.enabled";
+const ANIMATIONS_PREF = "toolkit.cosmeticAnimations.enabled";
+
+// Test that the shield icon animation can be controlled by the cosmetic
+// animations pref and that one of the icons is visible in each case.
+add_task(async function testShieldAnimation() {
+  await UrlClassifierTestUtils.addTestTrackers();
+  Services.prefs.setBoolPref(TP_PREF, true);
+
+  let tab = gBrowser.selectedTab = gBrowser.addTab();
+
+  let animationIcon = document.getElementById("tracking-protection-icon-animatable-image");
+  let noAnimationIcon = document.getElementById("tracking-protection-icon");
+
+  Services.prefs.setBoolPref(ANIMATIONS_PREF, true);
+  await promiseTabLoadEvent(tab, TRACKING_PAGE);
+  ok(BrowserTestUtils.is_hidden(noAnimationIcon), "the default icon is hidden when animations are enabled");
+  ok(BrowserTestUtils.is_visible(animationIcon), "the animated icon is shown when animations are enabled");
+
+  await promiseTabLoadEvent(tab, BENIGN_PAGE);
+  ok(BrowserTestUtils.is_hidden(animationIcon), "the animated icon is hidden");
+  ok(BrowserTestUtils.is_hidden(noAnimationIcon), "the default icon is hidden");
+
+  Services.prefs.setBoolPref(ANIMATIONS_PREF, false);
+  await promiseTabLoadEvent(tab, TRACKING_PAGE);
+  ok(BrowserTestUtils.is_visible(noAnimationIcon), "the default icon is shown when animations are disabled");
+  ok(BrowserTestUtils.is_hidden(animationIcon), "the animated icon is hidden when animations are disabled");
+
+  gBrowser.removeCurrentTab();
+  Services.prefs.clearUserPref(ANIMATIONS_PREF);
+  Services.prefs.clearUserPref(TP_PREF);
+  UrlClassifierTestUtils.cleanupTestTrackers();
+});

browser/base/content/test/trackingUI/browser_trackingUI_open_preferences.js

@@ -6,8 +6,6 @@
 const PREF = "privacy.trackingprotection.enabled";
 const TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/trackingUI/trackingPage.html";
 
-var {UrlClassifierTestUtils} = ChromeUtils.import("resource://testing-common/UrlClassifierTestUtils.jsm", {});
-
 async function waitAndAssertPreferencesShown() {
   await BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popuphidden");
   await TestUtils.waitForCondition(() => gBrowser.currentURI.spec == "about:preferences#privacy",

browser/base/content/test/trackingUI/browser_trackingUI_reload_hint.js

@@ -6,8 +6,6 @@
 const PREF = "privacy.trackingprotection.enabled";
 const TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/trackingUI/trackingPage.html";
 
-var {UrlClassifierTestUtils} = ChromeUtils.import("resource://testing-common/UrlClassifierTestUtils.jsm", {});
-
 // TODO: replace this once bug 1428847 is done.
 function hidden(el) {
   let win = el.ownerGlobal;

browser/base/content/test/trackingUI/browser_trackingUI_state.js

@@ -21,8 +21,6 @@ const TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/
 var TrackingProtection = null;
 var tabbrowser = null;
 
-var {UrlClassifierTestUtils} = ChromeUtils.import("resource://testing-common/UrlClassifierTestUtils.jsm", {});
-
 registerCleanupFunction(function() {
   TrackingProtection = tabbrowser = null;
   UrlClassifierTestUtils.cleanupTestTrackers();
@@ -33,6 +31,9 @@ registerCleanupFunction(function() {
   }
 });
 
+// This is a special version of "hidden" that doesn't check for item
+// visibility and just asserts the display and opacity attributes.
+// That way we can test elements even when their panel is hidden...
 function hidden(sel) {
   let win = tabbrowser.ownerGlobal;
   let el = win.document.querySelector(sel);
@@ -51,10 +52,11 @@ function testBenignPage() {
   info("Non-tracking content must not be blocked");
   ok(!TrackingProtection.container.hidden, "The container is visible");
   ok(!TrackingProtection.content.hasAttribute("state"), "content: no state");
-  ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
-  ok(!TrackingProtection.icon.hasAttribute("tooltiptext"), "icon: no tooltip");
+  ok(!TrackingProtection.iconBox.hasAttribute("state"), "icon box: no state");
+  ok(!TrackingProtection.iconBox.hasAttribute("tooltiptext"), "icon box: no tooltip");
 
-  ok(hidden("#tracking-protection-icon"), "icon is hidden");
+  let doc = tabbrowser.ownerGlobal.document;
+  ok(BrowserTestUtils.is_hidden(doc.getElementById("tracking-protection-icon-box")), "icon box is hidden");
   ok(hidden("#tracking-action-block"), "blockButton is hidden");
   ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
   ok(!hidden("#tracking-protection-preferences-button"), "preferences button is visible");
@@ -70,10 +72,11 @@ function testBenignPageWithException() {
   ok(!TrackingProtection.container.hidden, "The container is visible");
   ok(!TrackingProtection.content.hasAttribute("state"), "content: no state");
   ok(TrackingProtection.content.hasAttribute("hasException"), "content has exception attribute");
-  ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
-  ok(!TrackingProtection.icon.hasAttribute("tooltiptext"), "icon: no tooltip");
+  ok(!TrackingProtection.iconBox.hasAttribute("state"), "icon box: no state");
+  ok(!TrackingProtection.iconBox.hasAttribute("tooltiptext"), "icon box: no tooltip");
 
-  ok(hidden("#tracking-protection-icon"), "icon is hidden");
+  let doc = tabbrowser.ownerGlobal.document;
+  ok(BrowserTestUtils.is_hidden(doc.getElementById("tracking-protection-icon-box")), "icon box is hidden");
   is(!hidden("#tracking-action-block"), TrackingProtection.enabled,
      "blockButton is visible if TP is on");
   ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
@@ -92,12 +95,13 @@ function testTrackingPage(window) {
   ok(!TrackingProtection.container.hidden, "The container is visible");
   is(TrackingProtection.content.getAttribute("state"), "blocked-tracking-content",
       'content: state="blocked-tracking-content"');
-  is(TrackingProtection.icon.getAttribute("state"), "blocked-tracking-content",
-      'icon: state="blocked-tracking-content"');
-  is(TrackingProtection.icon.getAttribute("tooltiptext"),
+  is(TrackingProtection.iconBox.getAttribute("state"), "blocked-tracking-content",
+      'icon box: state="blocked-tracking-content"');
+  is(TrackingProtection.iconBox.getAttribute("tooltiptext"),
      gNavigatorBundle.getString("trackingProtection.icon.activeTooltip"), "correct tooltip");
 
-  ok(!hidden("#tracking-protection-icon"), "icon is visible");
+  let doc = tabbrowser.ownerGlobal.document;
+  ok(BrowserTestUtils.is_visible(doc.getElementById("tracking-protection-icon-box")), "icon box is visible");
   ok(hidden("#tracking-action-block"), "blockButton is hidden");
   ok(!hidden("#tracking-protection-preferences-button"), "preferences button is visible");
 
@@ -123,13 +127,14 @@ function testTrackingPageUnblocked() {
   is(TrackingProtection.content.getAttribute("state"), "loaded-tracking-content",
       'content: state="loaded-tracking-content"');
   if (TrackingProtection.enabled) {
-    is(TrackingProtection.icon.getAttribute("state"), "loaded-tracking-content",
-        'icon: state="loaded-tracking-content"');
-    is(TrackingProtection.icon.getAttribute("tooltiptext"),
+    is(TrackingProtection.iconBox.getAttribute("state"), "loaded-tracking-content",
+        'icon box: state="loaded-tracking-content"');
+    is(TrackingProtection.iconBox.getAttribute("tooltiptext"),
        gNavigatorBundle.getString("trackingProtection.icon.disabledTooltip"), "correct tooltip");
   }
 
-  is(!hidden("#tracking-protection-icon"), TrackingProtection.enabled, "icon is visible if TP is on");
+  let doc = tabbrowser.ownerGlobal.document;
+  is(BrowserTestUtils.is_visible(doc.getElementById("tracking-protection-icon-box")), TrackingProtection.enabled, "icon box is visible if TP is on");
   is(!hidden("#tracking-action-block"), TrackingProtection.enabled, "blockButton is visible if TP is on");
   ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
   ok(!hidden("#tracking-protection-preferences-button"), "preferences button is visible");

browser/base/content/test/trackingUI/head.js

@@ -1,3 +1,5 @@
+var {UrlClassifierTestUtils} = ChromeUtils.import("resource://testing-common/UrlClassifierTestUtils.jsm", {});
+
 /**
  * Waits for a load (or custom) event to finish in a given tab. If provided
  * load an uri into the tab.

browser/components/uitour/UITour.jsm

@@ -187,7 +187,12 @@ var UITour = {
       },
     }],
     ["trackingProtection", {
-      query: "#tracking-protection-icon",
+      query: (aDocument) => {
+        if (Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled", false)) {
+          return aDocument.getElementById("tracking-protection-icon-animatable-box");
+        }
+        return aDocument.getElementById("tracking-protection-icon");
+      },
     }],
     ["urlbar",      {
       query: "#urlbar",

browser/components/uitour/test/browser_trackingProtection.js

@@ -5,7 +5,7 @@ const PREF_TP_ENABLED = "privacy.trackingprotection.enabled";
 const BENIGN_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/benignPage.html";
 const TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/trackingPage.html";
 const TOOLTIP_PANEL = document.getElementById("UITourTooltip");
-const TOOLTIP_ANCHOR = document.getElementById("tracking-protection-icon");
+const TOOLTIP_ANCHOR = document.getElementById("tracking-protection-icon-animatable-box");
 
 var {UrlClassifierTestUtils} = ChromeUtils.import("resource://testing-common/UrlClassifierTestUtils.jsm", {});
 

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

@@ -147,33 +147,122 @@
 
 /* TRACKING PROTECTION ICON */
 
-#tracking-protection-icon {
-  list-style-image: url(chrome://browser/skin/tracking-protection.svg);
-  margin-inline-end: 0;
+#tracking-protection-icon-box {
+  visibility: collapse;
+  overflow: hidden;
+  width: 20px;
+  margin-inline-end: -20px;
 }
 
-#tracking-protection-icon[state="loaded-tracking-content"] {
-  list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg);
+#tracking-protection-icon-box[state] {
+  margin-inline-end: 0px;
+  visibility: visible;
 }
 
-#tracking-protection-icon[animate] {
+#tracking-protection-icon-box[animationsenabled][animate] {
   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
 }
 
-#tracking-protection-icon:not([state]) {
-  margin-inline-end: -20px;
-  pointer-events: none;
-  opacity: 0;
-  /* Only animate the shield in, when it disappears hide it immediately. */
-  transition: none;
-  list-style-image: none;
+#tracking-protection-icon-box[state="blocked-tracking-content"][animationsenabled] > #tracking-protection-icon,
+#tracking-protection-icon-box:not([animationsenabled]) > #tracking-protection-icon-animatable-box {
+  display: none;
+}
+
+#tracking-protection-icon-box > #tracking-protection-icon-animatable-box {
+  position: absolute;
+  overflow: hidden;
+  top: calc(50% - 10px); /* half the height of the sprite */
+  margin-inline-start: 4px;
+  width: 16px;
+  height: 20px;
+}
+
+#tracking-protection-icon-box[state="blocked-tracking-content"] #tracking-protection-icon-animatable-image {
+  background-image: url(chrome://browser/skin/tracking-protection-animation.svg);
+  transform: translateX(-1232px);
+  width: 1248px;
+  background-size: auto;
+  height: 16px;
+  min-height: 20px;
+  -moz-context-properties: fill, fill-opacity;
+}
+
+#tracking-protection-icon-box[state="blocked-tracking-content"] #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 {
+  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) {
+  animation-name: tp-icon-animation-rtl;
+}
+
+#tracking-protection-icon-box[state="blocked-tracking-content"] > #tracking-protection-icon {
+  list-style-image: url(chrome://browser/skin/tracking-protection.svg);
+}
+
+#tracking-protection-icon-box[state="loaded-tracking-content"] > #tracking-protection-icon {
+  list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg);
 }
 
 #urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
-#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
+#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon-box {
   visibility: collapse;
 }
 
+@keyframes tp-icon-animation {
+  from {
+    transform: translateX(0);
+    fill-opacity: 0.3;
+  }
+  38% {
+    fill: inherit;
+    fill-opacity: 0.3;
+  }
+  39% {
+    fill: #7f00d6;
+    fill-opacity: 1;
+  }
+  75% {
+    transform: translateX(-1232px);
+    fill: #7f00d6;
+    fill-opacity: 1;
+  }
+  to {
+    fill: inherit;
+    fill-opacity: inherit;
+  }
+}
+
+@keyframes tp-icon-animation-rtl {
+  from {
+    transform: scaleX(-1) translateX(0);
+    fill-opacity: 0.3;
+  }
+  38% {
+    fill: inherit;
+    fill-opacity: 0.3;
+  }
+  39% {
+    fill: #7f00d6;
+    fill-opacity: 1;
+  }
+  75% {
+    transform: scaleX(-1) translateX(-1232px);
+    fill: #7f00d6;
+    fill-opacity: 1;
+  }
+  to {
+    fill: inherit;
+    fill-opacity: inherit;
+  }
+}
+
 /* CONNECTION ICON, EXTENSION ICON */
 
 #connection-icon,

browser/themes/shared/jar.inc.mn

@@ -85,6 +85,7 @@
 
   skin/classic/browser/tracking-protection.svg                 (../shared/identity-block/tracking-protection.svg)
   skin/classic/browser/tracking-protection-disabled.svg        (../shared/identity-block/tracking-protection-disabled.svg)
+  skin/classic/browser/tracking-protection-animation.svg        (../shared/identity-block/tracking-protection-animation.svg)
   skin/classic/browser/panel-icon-arrow-left.svg               (../shared/panel-icon-arrow-left.svg)
   skin/classic/browser/panel-icon-arrow-right.svg              (../shared/panel-icon-arrow-right.svg)
   skin/classic/browser/panel-icon-cancel.svg                   (../shared/panel-icon-cancel.svg)