Backed out 2 changesets (bug 1765639) for causing mochitest failures in browser_parsable_css. CLOSED TREE

Backed out changeset da136d71ea6f (bug 1765639)
Backed out changeset c131b35bfd97 (bug 1765639)

toolkit/themes/shared/media/videocontrols.css

@@ -78,6 +78,7 @@
 .controlsContainer [hidden],
 .controlBar[hidden] .progressBar,
 .controlBar[hidden] .bufferBar,
+.pictureInPictureToggleButton[hidden],
 .videocontrols[inDOMFullscreen] > .controlsContainer > .controlsOverlay > #pictureInPictureToggle {
   display: none;
 }
@@ -489,6 +490,45 @@
   fill: currentColor;
 }
 
+.pictureInPictureToggleButton {
+  display: flex;
+  appearance: none;
+  position: absolute;
+  background-color: #0060df;
+  color: inherit;
+  border: 0;
+  padding: var(--pip-toggle-padding);
+  right: 0;
+  top: 50%;
+  translate: var(--pip-toggle-translate-x) -50%;
+  transition: opacity 160ms linear, translate 160ms linear;
+  min-width: max-content;
+  pointer-events: auto;
+  opacity: 0;
+}
+
+.pictureInPictureToggleButton[policy="hidden"] {
+  display: none;
+}
+
+.pictureInPictureToggleButton[policy="top"] {
+  top: 0%;
+  translate: var(--pip-toggle-translate-x);
+}
+
+.pictureInPictureToggleButton[policy="one-quarter"] {
+  top: 25%;
+}
+
+.pictureInPictureToggleButton[policy="three-quarters"] {
+  top: 75%;
+}
+
+.pictureInPictureToggleButton[policy="bottom"] {
+  top: 100%;
+  translate: var(--pip-toggle-translate-x) -100%;
+}
+
 .videocontrols[localedir="rtl"] .statusIcon[type="pictureInPicture"] {
   transform: scaleX(-1);
 }
@@ -497,6 +537,16 @@
   margin-inline-start: var(--pip-toggle-padding);
 }
 
+@supports -moz-bool-pref("media.videocontrols.picture-in-picture.video-toggle.testing") {
+  /**
+   * To make automated tests faster, we drop the transition duration in
+   * testing mode.
+   */
+  .pictureInPictureToggleButton {
+    transition-duration: 10ms;
+  }
+}
+
 /* Overlay Play button */
 .clickToPlay {
   appearance: none;