Backed out changeset 27335463acd1 (bug 1471713) for browser-chrome failures at browser/components/uitour/test/browser_trackingProtection.js

browser/base/content/browser-trackingprotection.js

@@ -7,7 +7,6 @@ var TrackingProtection = {
   MAX_INTROS: 20,
   PREF_ENABLED_GLOBALLY: "privacy.trackingprotection.enabled",
   PREF_ENABLED_IN_PRIVATE_WINDOWS: "privacy.trackingprotection.pbmode.enabled",
-  PREF_ANIMATIONS_ENABLED: "toolkit.cosmeticAnimations.enabled",
   enabledGlobally: false,
   enabledInPrivateWindows: false,
   container: null,
@@ -34,10 +33,6 @@ var TrackingProtection = {
     this.container = $("#tracking-protection-container");
     this.content = $("#tracking-protection-content");
     this.icon = $("#tracking-protection-icon");
-    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 =
@@ -49,15 +44,6 @@ 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();
     Services.prefs.addObserver(this.PREF_ENABLED_GLOBALLY, this);
     Services.prefs.addObserver(this.PREF_ENABLED_IN_PRIVATE_WINDOWS, this);
@@ -74,7 +60,6 @@ var TrackingProtection = {
   uninit() {
     Services.prefs.removeObserver(this.PREF_ENABLED_GLOBALLY, this);
     Services.prefs.removeObserver(this.PREF_ENABLED_IN_PRIVATE_WINDOWS, this);
-    Services.prefs.removeObserver(this.PREF_ANIMATIONS_ENABLED, this.updateAnimationsEnabled);
   },
 
   observe() {
@@ -153,29 +138,20 @@ var TrackingProtection = {
     Services.telemetry.getHistogramById("TRACKING_PROTECTION_SHIELD").add(value);
   },
 
-  cancelAnimation() {
-    let iconAnimation = this.animatedIcon.getAnimations()[0];
-    if (iconAnimation && iconAnimation.currentTime) {
-      iconAnimation.cancel();
-    }
-    this.iconBox.removeAttribute("animate");
-  },
-
-  onSecurityChange(state, webProgress, isSimulated) {
+  onSecurityChange(state, isSimulated) {
     let baseURI = this._baseURIForChannelClassifier;
 
     // Don't deal with about:, file: etc.
     if (!baseURI) {
-      this.cancelAnimation();
-      this.iconBox.removeAttribute("state");
       return;
     }
 
-    // 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();
+    // 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");
     }
 
     let isBlocking = state & Ci.nsIWebProgressListener.STATE_BLOCKED_TRACKING_CONTENT;
@@ -197,14 +173,8 @@ var TrackingProtection = {
     }
 
     if (isBlocking && this.enabled) {
-      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.icon.setAttribute("tooltiptext", this.activeTooltipText);
+      this.icon.setAttribute("state", "blocked-tracking-content");
       this.content.setAttribute("state", "blocked-tracking-content");
 
       // Open the tracking protection introduction panel, if applicable.
@@ -219,28 +189,22 @@ 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.iconBox.setAttribute("tooltiptext", this.disabledTooltipText);
-        this.iconBox.setAttribute("state", "loaded-tracking-content");
+        this.icon.setAttribute("tooltiptext", this.disabledTooltipText);
+        this.icon.setAttribute("state", "loaded-tracking-content");
         this.shieldHistogramAdd(1);
       } else {
-        this.iconBox.removeAttribute("tooltiptext");
-        this.iconBox.removeAttribute("state");
+        this.icon.removeAttribute("tooltiptext");
+        this.icon.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.icon.removeAttribute("tooltiptext");
+      this.icon.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, aWebProgress, aIsSimulated);
+    TrackingProtection.onSecurityChange(this._state, aIsSimulated);
   },
 
   // simulate all change notifications after switching tabs

browser/base/content/browser.xul

@@ -798,12 +798,7 @@
                        consumeanchor="identity-box"
                        onclick="PageProxyClickHandler(event);"/>
                 <image id="sharing-icon" mousethrough="always"/>
-                <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.iconBox.hasAttribute("state"), "iconBox: no state");
-  ok(!TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: no animate");
+  ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
+  ok(TrackingProtection.icon.hasAttribute("animate"), "icon: animate");
 
   info("Load a test page containing tracking elements");
   let trackingTab = await BrowserTestUtils.openNewForegroundTab(tabbrowser, TRACKING_PAGE);
 
-  ok(TrackingProtection.iconBox.hasAttribute("state"), "iconBox: state");
-  ok(TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: animate");
+  ok(TrackingProtection.icon.hasAttribute("state"), "icon: state");
+  ok(TrackingProtection.icon.hasAttribute("animate"), "icon: animate");
 
   info("Switch from tracking -> benign tab");
   let securityChanged = waitForSecurityChange();
   tabbrowser.selectedTab = benignTab;
   await securityChanged;
 
-  ok(!TrackingProtection.iconBox.hasAttribute("state"), "iconBox: no state");
-  ok(!TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: no animate");
+  ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
+  ok(!TrackingProtection.icon.hasAttribute("animate"), "icon: no animate");
 
   info("Switch from benign -> tracking tab");
   securityChanged = waitForSecurityChange();
   tabbrowser.selectedTab = trackingTab;
   await securityChanged;
 
-  ok(TrackingProtection.iconBox.hasAttribute("state"), "iconBox: state");
-  ok(!TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: no animate");
+  ok(TrackingProtection.icon.hasAttribute("state"), "icon: state");
+  ok(!TrackingProtection.icon.hasAttribute("animate"), "icon: no animate");
 
   info("Reload tracking tab");
   securityChanged = waitForSecurityChange(2);
   tabbrowser.reload();
   await securityChanged;
 
-  ok(TrackingProtection.iconBox.hasAttribute("state"), "iconBox: state");
-  ok(TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: animate");
+  ok(TrackingProtection.icon.hasAttribute("state"), "icon: state");
+  ok(TrackingProtection.icon.hasAttribute("animate"), "icon: 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.iconBox.getAttribute("state"), "blocked-tracking-content",
-     'iconBox: state="blocked-tracking-content"');
+  is(TrackingProtection.icon.getAttribute("state"), "blocked-tracking-content",
+     'icon: state="blocked-tracking-content"');
 
-  ok(!hidden("#tracking-protection-icon-box"), "icon box is visible");
+  ok(!hidden("#tracking-protection-icon"), "icon 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.iconBox.getAttribute("state"), "loaded-tracking-content",
-     'iconBox: state="loaded-tracking-content"');
+  is(TrackingProtection.icon.getAttribute("state"), "loaded-tracking-content",
+     'icon: state="loaded-tracking-content"');
 
-  ok(!hidden("#tracking-protection-icon-box"), "icon box is visible");
+  ok(!hidden("#tracking-protection-icon"), "icon 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.iconBox.getAttribute("state"), "blocked-tracking-content",
-        'iconBox: state="blocked-tracking-content"');
-    is(TrackingProtection.iconBox.getAttribute("tooltiptext"),
+    is(TrackingProtection.icon.getAttribute("state"), "blocked-tracking-content",
+        'icon: state="blocked-tracking-content"');
+    is(TrackingProtection.icon.getAttribute("tooltiptext"),
        gNavigatorBundle.getString("trackingProtection.icon.activeTooltip"), "correct tooltip");
   });
 });

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

@@ -5,7 +5,6 @@ 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

@@ -1,40 +0,0 @@
-/* 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,6 +6,8 @@
 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,6 +6,8 @@
 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,6 +21,8 @@ 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();
@@ -31,9 +33,6 @@ 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);
@@ -52,11 +51,10 @@ 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.iconBox.hasAttribute("state"), "icon box: no state");
-  ok(!TrackingProtection.iconBox.hasAttribute("tooltiptext"), "icon box: no tooltip");
+  ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
+  ok(!TrackingProtection.icon.hasAttribute("tooltiptext"), "icon: no tooltip");
 
-  let doc = tabbrowser.ownerGlobal.document;
-  ok(BrowserTestUtils.is_hidden(doc.getElementById("tracking-protection-icon-box")), "icon box is hidden");
+  ok(hidden("#tracking-protection-icon"), "icon 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");
@@ -72,11 +70,10 @@ 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.iconBox.hasAttribute("state"), "icon box: no state");
-  ok(!TrackingProtection.iconBox.hasAttribute("tooltiptext"), "icon box: no tooltip");
+  ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
+  ok(!TrackingProtection.icon.hasAttribute("tooltiptext"), "icon: no tooltip");
 
-  let doc = tabbrowser.ownerGlobal.document;
-  ok(BrowserTestUtils.is_hidden(doc.getElementById("tracking-protection-icon-box")), "icon box is hidden");
+  ok(hidden("#tracking-protection-icon"), "icon is hidden");
   is(!hidden("#tracking-action-block"), TrackingProtection.enabled,
      "blockButton is visible if TP is on");
   ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
@@ -95,13 +92,12 @@ 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.iconBox.getAttribute("state"), "blocked-tracking-content",
-      'icon box: state="blocked-tracking-content"');
-  is(TrackingProtection.iconBox.getAttribute("tooltiptext"),
+  is(TrackingProtection.icon.getAttribute("state"), "blocked-tracking-content",
+      'icon: state="blocked-tracking-content"');
+  is(TrackingProtection.icon.getAttribute("tooltiptext"),
      gNavigatorBundle.getString("trackingProtection.icon.activeTooltip"), "correct tooltip");
 
-  let doc = tabbrowser.ownerGlobal.document;
-  ok(BrowserTestUtils.is_visible(doc.getElementById("tracking-protection-icon-box")), "icon box is visible");
+  ok(!hidden("#tracking-protection-icon"), "icon is visible");
   ok(hidden("#tracking-action-block"), "blockButton is hidden");
   ok(!hidden("#tracking-protection-preferences-button"), "preferences button is visible");
 
@@ -127,14 +123,13 @@ function testTrackingPageUnblocked() {
   is(TrackingProtection.content.getAttribute("state"), "loaded-tracking-content",
       'content: state="loaded-tracking-content"');
   if (TrackingProtection.enabled) {
-    is(TrackingProtection.iconBox.getAttribute("state"), "loaded-tracking-content",
-        'icon box: state="loaded-tracking-content"');
-    is(TrackingProtection.iconBox.getAttribute("tooltiptext"),
+    is(TrackingProtection.icon.getAttribute("state"), "loaded-tracking-content",
+        'icon: state="loaded-tracking-content"');
+    is(TrackingProtection.icon.getAttribute("tooltiptext"),
        gNavigatorBundle.getString("trackingProtection.icon.disabledTooltip"), "correct tooltip");
   }
 
-  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-protection-icon"), TrackingProtection.enabled, "icon 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,5 +1,3 @@
-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/themes/shared/identity-block/identity-block.inc.css

@@ -147,122 +147,33 @@
 
 /* TRACKING PROTECTION ICON */
 
-#tracking-protection-icon-box {
-  visibility: collapse;
-  overflow: hidden;
-  width: 20px;
-  margin-inline-end: -20px;
-}
-
-#tracking-protection-icon-box[state] {
-  margin-inline-end: 0px;
-  visibility: visible;
-}
-
-#tracking-protection-icon-box[animationsenabled][animate] {
-  transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
-}
-
-#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 {
+#tracking-protection-icon {
   list-style-image: url(chrome://browser/skin/tracking-protection.svg);
+  margin-inline-end: 0;
 }
 
-#tracking-protection-icon-box[state="loaded-tracking-content"] > #tracking-protection-icon {
+#tracking-protection-icon[state="loaded-tracking-content"] {
   list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg);
 }
 
+#tracking-protection-icon[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;
+}
+
 #urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
-#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon-box {
+#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
   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,7 +85,6 @@
 
   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)