Bug 1654662 - Disable transitions on Picture-in-Picture toggle variations when the user prefers reduced motion. r=mstriemer
authorMike Conley <mconley@mozilla.com>
Thu, 23 Jul 2020 17:52:11 +0000
changeset 541811 7642b492b329b8d7ad73c59178569d19acc042c4
parent 541810 c5dea073260ab635f66d73c59dd9f2156193fc12
child 541812 5a1183eb910737e2141922797bab757b25332a77
push id122507
push usermconley@mozilla.com
push dateThu, 23 Jul 2020 18:20:04 +0000
treeherderautoland@7642b492b329 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmstriemer
bugs1654662
milestone80.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 1654662 - Disable transitions on Picture-in-Picture toggle variations when the user prefers reduced motion. r=mstriemer Differential Revision: https://phabricator.services.mozilla.com/D84713
toolkit/themes/shared/media/pictureinpicture-mode-1.css
toolkit/themes/shared/media/pictureinpicture-mode-2.css
toolkit/themes/shared/media/videocontrols.css
--- a/toolkit/themes/shared/media/pictureinpicture-mode-1.css
+++ b/toolkit/themes/shared/media/pictureinpicture-mode-1.css
@@ -49,8 +49,15 @@
   transition: opacity 200ms;
 }
 
 .pip-wrapper:is([small-video]) > .pip-expanded,
 .pip-explainer,
 .pip-icon-label > .pip-icon {
   display: none;
 }
+
+@media (prefers-reduced-motion) {
+  .pip-expanded,
+  .pip-wrapper.hovering:not([small-video]) > .pip-small {
+    transition: none;
+  }
+}
--- a/toolkit/themes/shared/media/pictureinpicture-mode-2.css
+++ b/toolkit/themes/shared/media/pictureinpicture-mode-2.css
@@ -123,8 +123,16 @@
 
 .pip-wrapper.hovering > .pip-expanded > .pip-explainer {
   opacity: 1;
 }
 
 .pip-wrapper.hovering > .pip-expanded > .pip-explainer {
   translate: 0 calc(40px - var(--pip-highlight-width));
 }
+
+@media (prefers-reduced-motion) {
+  .pip-expanded,
+  .pip-wrapper:not(:is([small-video],[has-used])) > .pip-small,
+  .pip-explainer {
+    transition: none;
+  }
+}
--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -723,8 +723,14 @@
   box-shadow: 0px 4px 4px rgba(12,12,13,0.25);
   width: max-content;
   border-radius: 8px;
   opacity: 0;
   color: #fff;
   align-items: center;
   scale: 0.33 1;
 }
+
+@media (prefers-reduced-motion) {
+  .pip-wrapper {
+    transition: none;
+  }
+}