Bug 1629953 - Use prefers-reduced-motion media query for the stop/reload button animation. r=jaws
authorDão Gottwald <dao@mozilla.com>
Wed, 15 Apr 2020 08:48:08 +0000
changeset 587624 dc605bd20b0b3e2cbab07f028aa4fb96c7186003
parent 587623 e2ba76aefa65e70fc7642b74aab557a03d0e00bd
child 587625 969971d6829ee653b1b203ed521bc28385354e24
push id13072
push userffxbld-merge
push dateMon, 04 May 2020 14:22:08 +0000
treeherdermozilla-beta@8a4f45b9a244 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1629953
milestone77.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1629953 - Use prefers-reduced-motion media query for the stop/reload button animation. r=jaws Differential Revision: https://phabricator.services.mozilla.com/D70899
browser/app/profile/firefox.js
browser/base/content/browser.js
browser/base/content/test/about/browser_aboutStopReload.js
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -195,18 +195,16 @@ pref("keyword.enabled", true);
 pref("browser.fixup.domainwhitelist.localhost", true);
 
 #ifdef UNIX_BUT_NOT_MAC
   pref("general.autoScroll", false);
 #else
   pref("general.autoScroll", true);
 #endif
 
-pref("browser.stopReloadAnimation.enabled", true);
-
 // UI density of the browser chrome. This mostly affects toolbarbutton
 // and urlbar spacing. The possible values are 0=normal, 1=compact, 2=touch.
 pref("browser.uidensity", 0);
 // Whether Firefox will automatically override the uidensity to "touch"
 // while the user is in a touch environment (such as Windows tablet mode).
 pref("browser.touchmode.auto", true);
 
 // At startup, check if we're the default browser and prompt user if not.
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -2247,20 +2247,16 @@ var gBrowserInit = {
     });
 
     scheduleIdleTask(() => {
       // Initialize the all tabs menu
       gTabsPanel.init();
     });
 
     scheduleIdleTask(() => {
-      CombinedStopReload.startAnimationPrefMonitoring();
-    });
-
-    scheduleIdleTask(() => {
       // setup simple gestures support
       gGestureSupport.init(true);
 
       // setup history swipe animation
       gHistorySwipeAnimation.init();
     });
 
     scheduleIdleTask(() => {
@@ -5624,30 +5620,29 @@ var CombinedStopReload = {
       }
     }
 
     this.reload = reload;
     this.stop = stop;
     this.stopReloadContainer = this.reload.parentNode;
     this.timeWhenSwitchedToStop = 0;
 
-    if (this._shouldStartPrefMonitoring) {
-      this.startAnimationPrefMonitoring();
-    }
+    this.stopReloadContainer.addEventListener("animationend", this);
+    this.stopReloadContainer.addEventListener("animationcancel", this);
+
     return true;
   },
 
   uninit() {
     this._destroyed = true;
 
     if (!this._initialized) {
       return;
     }
 
-    Services.prefs.removeObserver("toolkit.cosmeticAnimations.enabled", this);
     this._cancelTransition();
     this.stop.removeEventListener("click", this);
     this.stopReloadContainer.removeEventListener("animationend", this);
     this.stopReloadContainer.removeEventListener("animationcancel", this);
     this.stopReloadContainer = null;
     this.reload = null;
     this.stop = null;
   },
@@ -5669,41 +5664,16 @@ var CombinedStopReload = {
             event.animationName == "stop-to-reload-rtl")
         ) {
           this.stopReloadContainer.removeAttribute("animate");
         }
       }
     }
   },
 
-  observe(subject, topic, data) {
-    if (topic == "nsPref:changed") {
-      this.animate = Services.prefs.getBoolPref(
-        "toolkit.cosmeticAnimations.enabled"
-      );
-    }
-  },
-
-  startAnimationPrefMonitoring() {
-    // CombinedStopReload may have been uninitialized before the idleCallback is executed.
-    if (this._destroyed) {
-      return;
-    }
-    if (!this.ensureInitialized()) {
-      this._shouldStartPrefMonitoring = true;
-      return;
-    }
-    this.animate =
-      Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled") &&
-      Services.prefs.getBoolPref("browser.stopReloadAnimation.enabled");
-    Services.prefs.addObserver("toolkit.cosmeticAnimations.enabled", this);
-    this.stopReloadContainer.addEventListener("animationend", this);
-    this.stopReloadContainer.addEventListener("animationcancel", this);
-  },
-
   onTabSwitch() {
     // Reset the time in the event of a tabswitch since the stored time
     // would have been associated with the previous tab, so the animation will
     // still run if the page has been loading until long after the tab switch.
     this.timeWhenSwitchedToStop = window.performance.now();
   },
 
   switchToStop(aRequest, aWebProgress) {
@@ -5722,17 +5692,17 @@ var CombinedStopReload = {
     }
 
     let shouldAnimate =
       aRequest instanceof Ci.nsIRequest &&
       aWebProgress.isTopLevel &&
       aWebProgress.isLoadingDocument &&
       !gBrowser.tabAnimationsInProgress &&
       this.stopReloadContainer.closest("#nav-bar-customization-target") &&
-      this.animate;
+      window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
 
     this._cancelTransition();
     if (shouldAnimate) {
       BrowserUtils.setToolbarButtonHeightProperty(this.stopReloadContainer);
       this.stopReloadContainer.setAttribute("animate", "true");
     } else {
       this.stopReloadContainer.removeAttribute("animate");
     }
@@ -5746,17 +5716,17 @@ var CombinedStopReload = {
 
     let shouldAnimate =
       aRequest instanceof Ci.nsIRequest &&
       aWebProgress.isTopLevel &&
       !aWebProgress.isLoadingDocument &&
       !gBrowser.tabAnimationsInProgress &&
       this._loadTimeExceedsMinimumForAnimation() &&
       this.stopReloadContainer.closest("#nav-bar-customization-target") &&
-      this.animate;
+      window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
 
     if (shouldAnimate) {
       BrowserUtils.setToolbarButtonHeightProperty(this.stopReloadContainer);
       this.stopReloadContainer.setAttribute("animate", "true");
     } else {
       this.stopReloadContainer.removeAttribute("animate");
     }
 
--- a/browser/base/content/test/about/browser_aboutStopReload.js
+++ b/browser/base/content/test/about/browser_aboutStopReload.js
@@ -10,16 +10,22 @@ async function getAnimatePromise(elt) {
 
 function stopReloadMutationCallback() {
   Assert.ok(
     false,
     "stop-reload's animate attribute should not have been mutated"
   );
 }
 
+add_task(async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["ui.prefersReducedMotion", 0]],
+  });
+});
+
 add_task(async function checkDontShowStopOnNewTab() {
   let stopReloadContainer = document.getElementById("stop-reload-button");
   let stopReloadContainerObserver = new MutationObserver(
     stopReloadMutationCallback
   );
 
   await waitForNoAnimation(stopReloadContainer);
   stopReloadContainerObserver.observe(stopReloadContainer, {