Issue #2837 - Implement prefers-reduced-motion media query.

Resolves #2837

dom/base/nsGkAtomList.h

@@ -2243,6 +2243,7 @@ GK_ATOM(scrollbar_end_forward, "scrollbar-end-forward")
 GK_ATOM(scrollbar_thumb_proportional, "scrollbar-thumb-proportional")
 GK_ATOM(overlay_scrollbars, "overlay-scrollbars")
 GK_ATOM(prefers_color_scheme, "prefers-color-scheme")
+GK_ATOM(prefers_reduced_motion, "prefers-reduced-motion")
 GK_ATOM(windows_accent_color_applies, "windows-accent-color-applies")
 GK_ATOM(windows_accent_color_is_dark, "windows-accent-color-is-dark")
 GK_ATOM(windows_default_theme, "windows-default-theme")

layout/style/nsCSSKeywordList.h

@@ -419,6 +419,7 @@ CSS_KEY(no-drag, no_drag)
 CSS_KEY(no-drop, no_drop)
 CSS_KEY(no-historical-ligatures, no_historical_ligatures)
 CSS_KEY(no-open-quote, no_open_quote)
+CSS_KEY(no-preference, no_preference)
 CSS_KEY(no-repeat, no_repeat)
 CSS_KEY(none, none)
 CSS_KEY(normal, normal)
@@ -470,6 +471,7 @@ CSS_KEY(px, px)
 CSS_KEY(rad, rad)
 CSS_KEY(read-only, read_only)
 CSS_KEY(read-write, read_write)
+CSS_KEY(reduce, reduce)
 CSS_KEY(relative, relative)
 CSS_KEY(repeat, repeat)
 CSS_KEY(repeat-x, repeat_x)

layout/style/nsMediaFeatures.cpp

@@ -47,9 +47,15 @@ static const nsCSSProps::KTableEntry kDisplayModeKeywords[] = {
 };
 
 static const nsCSSProps::KTableEntry kPrefersColorSchemeKeywords[] = {
-  { eCSSKeyword_light,			 NS_STYLE_PREFERS_COLOR_SCHEME_LIGHT },
-  { eCSSKeyword_dark,			 NS_STYLE_PREFERS_COLOR_SCHEME_DARK },
-  { eCSSKeyword_UNKNOWN,		 -1 },
+  { eCSSKeyword_light,                   NS_STYLE_PREFERS_COLOR_SCHEME_LIGHT },
+  { eCSSKeyword_dark,                    NS_STYLE_PREFERS_COLOR_SCHEME_DARK },
+  { eCSSKeyword_UNKNOWN,                 -1 },
+};
+
+static const nsCSSProps::KTableEntry kPrefersMotionKeywords[] = {
+  { eCSSKeyword_no_preference,           NS_STYLE_PREFERS_FULL_MOTION },
+  { eCSSKeyword_reduce,                  NS_STYLE_PREFERS_REDUCED_MOTION },
+  { eCSSKeyword_UNKNOWN,                 -1 },
 };
 
 #ifdef XP_WIN
@@ -497,6 +503,22 @@ GetPrefersColorScheme(nsPresContext* aPresContext, const nsMediaFeature* aFeatur
   return NS_OK;
 }
 
+static nsresult
+GetPrefersMotion(nsPresContext* aPresContext, const nsMediaFeature* aFeature,
+          nsCSSValue& aResult)
+{
+  switch(Preferences::GetInt("ui.prefersReducedMotion", 0)) {
+    case 1:
+      aResult.SetIntValue(NS_STYLE_PREFERS_REDUCED_MOTION, 
+                          eCSSUnit_Enumerated);
+      break;
+    default:
+      aResult.Reset();
+  }
+  return NS_OK;
+}
+
+
 static nsresult
 GetDarkTheme(nsPresContext* aPresContext, const nsMediaFeature* aFeature,
              nsCSSValue& aResult)
@@ -630,6 +652,14 @@ nsMediaFeatures::features[] = {
     { kPrefersColorSchemeKeywords },
     GetPrefersColorScheme
   },
+  {
+    &nsGkAtoms::prefers_reduced_motion,
+    nsMediaFeature::eMinMaxNotAllowed,
+    nsMediaFeature::eEnumerated,
+    nsMediaFeature::eNoRequirements,
+    { kPrefersMotionKeywords },
+    GetPrefersMotion
+  },
   {
     &nsGkAtoms::resolution,
     nsMediaFeature::eMinMaxAllowed,

layout/style/nsStyleConsts.h

@@ -1265,8 +1265,12 @@ enum class StyleDisplay : uint8_t {
 #define NS_STYLE_DISPLAY_MODE_FULLSCREEN        3
 
 // prefers-color-scheme
-#define NS_STYLE_PREFERS_COLOR_SCHEME_LIGHT	0
-#define NS_STYLE_PREFERS_COLOR_SCHEME_DARK	1
+#define NS_STYLE_PREFERS_COLOR_SCHEME_LIGHT     0
+#define NS_STYLE_PREFERS_COLOR_SCHEME_DARK      1
+
+// prefers-reduced-motion
+#define NS_STYLE_PREFERS_FULL_MOTION            0
+#define NS_STYLE_PREFERS_REDUCED_MOTION         1
 
 } // namespace mozilla
 

modules/libpref/init/all.js

@@ -256,7 +256,6 @@ pref("browser.sessionhistory.max_total_viewers", -1);
 // See https://github.com/MoonchildProductions/UXP/issues/719
 pref("browser.newtabpage.add_to_session_history", false);
 
-
 // Determines whether the browser's current theme should be light or dark.
 // 0 = feature disabled
 // 1 = default: light theme
@@ -264,6 +263,11 @@ pref("browser.newtabpage.add_to_session_history", false);
 pref("ui.color_scheme", 1);
 
 pref("ui.use_native_colors", true);
+
+// Whether websites should use reduced animation styles.
+// Used for CSS @media query.
+pref("ui.prefersReducedMotion", 0);
+
 #ifdef MOZ_WIDGET_GTK
 // Determines whether the menubar is shown in the global menubar or not.
 pref("ui.use_global_menubar", false);