Bug 1630918 - Use prefers-reduced-motion media query for the tracking protection shield icon animation. r=johannh

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

browser/base/content/browser-siteProtections.js

@@ -1136,7 +1136,6 @@ var SocialTracking = {
  * Utility object to handle manipulations of the protections indicators in the UI
  */
 var gProtectionsHandler = {
-  PREF_ANIMATIONS_ENABLED: "toolkit.cosmeticAnimations.enabled",
   PREF_REPORT_BREAKAGE_URL: "browser.contentblocking.reportBreakage.url",
   PREF_CB_CATEGORY: "browser.contentblocking.category",
 
@@ -1365,13 +1364,6 @@ var gProtectionsHandler = {
       this.iconBox.removeAttribute("animate")
     );
 
-    this.updateAnimationsEnabled = () => {
-      this.iconBox.toggleAttribute(
-        "animationsenabled",
-        Services.prefs.getBoolPref(this.PREF_ANIMATIONS_ENABLED, false)
-      );
-    };
-
     XPCOMUtils.defineLazyPreferenceGetter(
       this,
       "_protectionsPopupToastTimeout",
@@ -1421,13 +1413,6 @@ var gProtectionsHandler = {
       }
     }
 
-    this.updateAnimationsEnabled();
-
-    Services.prefs.addObserver(
-      this.PREF_ANIMATIONS_ENABLED,
-      this.updateAnimationsEnabled
-    );
-
     let baseURL = Services.urlFormatter.formatURLPref("app.support.baseURL");
     document.getElementById(
       "protections-popup-sendReportView-learn-more"
@@ -1444,11 +1429,6 @@ var gProtectionsHandler = {
       }
     }
 
-    Services.prefs.removeObserver(
-      this.PREF_ANIMATIONS_ENABLED,
-      this.updateAnimationsEnabled
-    );
-
     Services.obs.removeObserver(this, "browser:purge-session-history");
   },
 

browser/base/content/browser.xhtml

@@ -876,7 +876,7 @@
                    onmouseover="gProtectionsHandler.onTrackingProtectionIconHoveredOrFocused();"
                    onfocus="gProtectionsHandler.onTrackingProtectionIconHoveredOrFocused();"
                    tooltip="tracking-protection-icon-tooltip">
-                <box id="tracking-protection-icon-box" animationsenabled="true">
+                <box id="tracking-protection-icon-box">
                   <image id="tracking-protection-icon"/>
                   <box id="tracking-protection-icon-animatable-box" flex="1">
                     <image id="tracking-protection-icon-animatable-image" flex="1"/>

browser/base/content/test/protectionsUI/browser_protectionsUI_animation.js

@@ -8,7 +8,7 @@ const TRACKING_PAGE =
 const BENIGN_PAGE =
   "http://tracking.example.org/browser/browser/base/content/test/protectionsUI/benignPage.html";
 const TP_PREF = "privacy.trackingprotection.enabled";
-const ANIMATIONS_PREF = "toolkit.cosmeticAnimations.enabled";
+const PREFER_REDUCED_MOTION_PREF = "ui.prefersReducedMotion";
 const DTSCBN_PREF = "dom.testing.sync-content-blocking-notifications";
 
 // Test that the shield icon animation can be controlled by the cosmetic
@@ -25,7 +25,7 @@ add_task(async function testShieldAnimation() {
   );
   let noAnimationIcon = document.getElementById("tracking-protection-icon");
 
-  Services.prefs.setBoolPref(ANIMATIONS_PREF, true);
+  Services.prefs.setIntPref(PREFER_REDUCED_MOTION_PREF, 0);
   await Promise.all([
     promiseTabLoadEvent(tab, TRACKING_PAGE),
     waitForContentBlockingEvent(2, tab.linkedBrowser.ownerGlobal),
@@ -46,7 +46,7 @@ add_task(async function testShieldAnimation() {
     "the default icon is visible"
   );
 
-  Services.prefs.setBoolPref(ANIMATIONS_PREF, false);
+  Services.prefs.setIntPref(PREFER_REDUCED_MOTION_PREF, 1);
   await Promise.all([
     promiseTabLoadEvent(tab, TRACKING_PAGE),
     waitForContentBlockingEvent(2, tab.linkedBrowser.ownerGlobal),
@@ -65,7 +65,7 @@ add_task(async function testShieldAnimation() {
   );
 
   gBrowser.removeCurrentTab();
-  Services.prefs.clearUserPref(ANIMATIONS_PREF);
+  Services.prefs.clearUserPref(PREFER_REDUCED_MOTION_PREF);
   Services.prefs.clearUserPref(TP_PREF);
   Services.prefs.clearUserPref(DTSCBN_PREF);
   UrlClassifierTestUtils.cleanupTestTrackers();

browser/base/content/test/protectionsUI/browser_protectionsUI_animation_2.js

@@ -26,6 +26,12 @@ registerCleanupFunction(function() {
   Services.prefs.clearUserPref(DTSCBN_PREF);
 });
 
+add_task(async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["ui.prefersReducedMotion", 0]],
+  });
+});
+
 async function testTrackingProtectionAnimation(tabbrowser) {
   Services.prefs.setBoolPref(DTSCBN_PREF, true);
 

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

@@ -223,14 +223,13 @@
   width: 16px;
   height: 16px;
 }
-#tracking-protection-icon-box:not([hasException])[active][animationsenabled] > #tracking-protection-icon,
-#tracking-protection-icon-box:not([animationsenabled])[active] > #tracking-protection-icon,
-#tracking-protection-icon-box:not([animationsenabled]):not([active]) > #tracking-protection-icon-animatable-box,
+
+#tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon,
 #tracking-protection-icon-box:not([active]) > #tracking-protection-icon-animatable-box {
   display: none;
 }
 
-#tracking-protection-icon-box > #tracking-protection-icon-animatable-box {
+#tracking-protection-icon-animatable-box {
   display: block;
   position: absolute;
   overflow: hidden;
@@ -238,7 +237,7 @@
   height: 16px;
 }
 
-#tracking-protection-icon-box:not([hasException])[active] #tracking-protection-icon-animatable-image {
+#tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image {
   /* Overrides the default 'display: -moz-box' to prevent icon shifting issue
      with scaled text, see Bug 1591049 */
   display: block;
@@ -259,23 +258,25 @@
   z-index: 1;
 }
 
-:root[lwt-toolbar-field-brighttext] #tracking-protection-icon-box:not([hasException])[active] #tracking-protection-icon-animatable-image {
+:root[lwt-toolbar-field-brighttext] #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image {
   background-image: url(chrome://browser/skin/tracking-protection-animation-brighttext.svg);
 }
 
-#tracking-protection-icon-box[active] #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
+#tracking-protection-icon-box[active] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
   transform: scaleX(-1) translateX(-256px);
 }
 
-#tracking-protection-icon-box[animationsenabled][active][animate] #tracking-protection-icon-animatable-image {
-  animation-name: tp-icon-animation;
-  animation-timing-function: steps(16);
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-}
+@media (prefers-reduced-motion: no-preference) {
+  #tracking-protection-icon-box[active][animate] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image {
+    animation-name: tp-icon-animation;
+    animation-timing-function: steps(16);
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+  }
 
-#tracking-protection-icon-box[animationsenabled][active][animate] #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
-  animation-name: tp-icon-animation-rtl;
+  #tracking-protection-icon-box[active][animate] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
+    animation-name: tp-icon-animation-rtl;
+  }
 }
 
 #tracking-protection-icon-tooltip {