Bug 1543122 - Add the simple Picture-in-Picture toggle to the <video controls/> binding, still preffed off by default. r=jaws

This also stops the PictureInPictureToggleChild from tracking videos with controls for now.

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

--HG--
extra : moz-landing-system : lando

toolkit/actors/PictureInPictureChild.jsm

@@ -108,6 +108,7 @@ class PictureInPictureToggleChild extends ActorChild {
       case "canplay": {
         if (this.toggleEnabled &&
             event.target instanceof this.content.HTMLVideoElement &&
+            !event.target.controls &&
             event.target.ownerDocument == this.content.document) {
           this.registerVideo(event.target);
         }

toolkit/content/widgets/videocontrols.js

@@ -267,6 +267,10 @@ this.VideoControlsImplWidget = class {
           this.setShowPictureInPictureMessage(true);
         }
 
+        if (!this.pipToggleEnabled || this.isShowingPictureInPictureMessage) {
+          this.pictureInPictureToggleButton.setAttribute("hidden", true);
+        }
+
         let adjustableControls = [
           ...this.prioritizedControls,
           this.controlBar,
@@ -669,6 +673,9 @@ this.VideoControlsImplWidget = class {
                 // Prevent any click event within media controls from dispatching through to video.
                 aEvent.stopPropagation();
                 break;
+              case this.pictureInPictureToggleButton:
+                this.video.togglePictureInPicture();
+                break;
             }
             break;
           case "dblclick":
@@ -1982,6 +1989,8 @@ this.VideoControlsImplWidget = class {
         this.castingButton = this.shadowRoot.getElementById("castingButton");
         this.closedCaptionButton = this.shadowRoot.getElementById("closedCaptionButton");
         this.textTrackList = this.shadowRoot.getElementById("textTrackList");
+        this.pictureInPictureToggleButton =
+          this.shadowRoot.getElementById("pictureInPictureToggleButton");
 
         if (this.positionDurationBox) {
           this.durationSpan = this.positionDurationBox.getElementsByTagName("span")[0];
@@ -2069,6 +2078,8 @@ this.VideoControlsImplWidget = class {
           { el: this.video.textTracks, type: "change" },
 
           { el: this.video, type: "media-videoCasting", touchOnly: true },
+
+          { el: this.pictureInPictureToggleButton, type: "click" },
         ];
 
         for (let { el, type, nonTouchOnly = false, touchOnly = false,
@@ -2260,6 +2271,10 @@ this.VideoControlsImplWidget = class {
               <div id="clickToPlay" class="clickToPlay" hidden="true"></div>
             </div>
 
+            <button id="pictureInPictureToggleButton" class="pictureInPictureToggleButton">
+              <div id="pictureInPictureToggleIcon" class="pictureInPictureToggleIcon"></div>
+            </button>
+
             <div id="controlBar" class="controlBar" role="none" hidden="true">
               <button id="playButton"
                       class="button playButton"

toolkit/themes/shared/media/videocontrols.css

@@ -28,6 +28,10 @@
   --track-size: 5px;
   --thumb-size: 13px;
   --label-font-size: 13px;
+  --pip-toggle-bgcolor: rgb(0, 96, 223);
+  --pip-toggle-text-and-icon-color: rgb(255, 255, 255);
+  --pip-toggle-padding: 5px;
+  --pip-toggle-icon-width-height: 16px;
 }
 .controlsContainer.touch {
   --clickToPlay-size: 64px;
@@ -65,7 +69,8 @@
 }
 
 .controlsContainer [hidden],
-.controlBar[hidden] {
+.controlBar[hidden],
+.pictureInPictureToggleButton[hidden] {
   display: none;
 }
 
@@ -433,6 +438,44 @@
   stroke: #fff;
 }
 
+.pictureInPictureToggleButton {
+  display: flex;
+  -moz-appearance: none;
+  position: absolute;
+  background-color: var(--pip-toggle-bgcolor);
+  color: var(--pip-toggle-text-and-icon-color);
+  border: 0;
+  padding: var(--pip-toggle-padding);
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: opacity 160ms linear;
+  min-width: max-content;
+  pointer-events: auto;
+  opacity: 0;
+}
+
+.pictureInPictureToggleIcon {
+  display: inline-block;
+  background-image: url(chrome://global/skin/media/pictureinpicture.svg);
+  background-position: center left;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill, stroke;
+  fill: var(--pip-toggle-text-and-icon-color);
+  stroke: var(--pip-toggle-text-and-icon-color);
+  width: var(--pip-toggle-icon-width-height);
+  height: var(--pip-toggle-icon-width-height);
+  min-width: max-content;
+}
+
+.controlsOverlay:hover > .pictureInPictureToggleButton {
+  opacity: 0.8;
+}
+
+.controlsOverlay:hover > .pictureInPictureToggleButton:hover {
+  opacity: 1;
+}
+
 /* Overlay Play button */
 .clickToPlay {
   min-width: var(--clickToPlay-size);