Bug 1544969 - Show the Picture-in-Picture flyout when hovering the toggle. r=jaws,flod

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

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

toolkit/actors/PictureInPictureChild.jsm

@@ -262,6 +262,9 @@ class PictureInPictureToggleChild extends ActorChild {
           bubbles: true,
         });
       video.dispatchEvent(pipEvent);
+      // Since we've initiated Picture-in-Picture, we can go ahead and
+      // hide the toggle now.
+      this.onMouseLeaveVideo(video);
     }
   }
 

toolkit/content/widgets/videocontrols.js

@@ -2276,6 +2276,7 @@ this.VideoControlsImplWidget = class {
 
             <button id="pictureInPictureToggleButton" class="pictureInPictureToggleButton">
               <div id="pictureInPictureToggleIcon" class="pictureInPictureToggleIcon"></div>
+              <span class="pictureInPictureToggleLabel">&pictureInPicture.label;</span>
             </button>
 
             <div id="controlBar" class="controlBar" role="none" hidden="true">
@@ -2596,6 +2597,7 @@ this.NoControlsDesktopImplWidget = class {
           <div class="controlsOverlay stackItem">
             <button id="pictureInPictureToggleButton" class="pictureInPictureToggleButton">
               <div id="pictureInPictureToggleIcon" class="pictureInPictureToggleIcon"></div>
+              <span class="pictureInPictureToggleLabel">&pictureInPicture.label;</span>
             </button>
           </div>
         </div>

toolkit/locales/en-US/chrome/global/videocontrols.dtd

@@ -14,6 +14,10 @@
      accessibility software to clarify what the slider is for. -->
 <!ENTITY volumeScrubber.label "Volume slider">
 
+<!-- LOCALIZATION NOTE (pictureInPicture.label): This string is used as part of
+the Picture-in-Picture video toggle button when the mouse is hovering it. -->
+<!ENTITY pictureInPicture.label "Picture-in-Picture">
+
 <!ENTITY stats.media "Media">
 <!ENTITY stats.size "Size">
 <!ENTITY stats.activity "Activity">

toolkit/themes/shared/media/videocontrols.css

@@ -448,8 +448,8 @@
   padding: var(--pip-toggle-padding);
   right: 0;
   top: 50%;
-  transform: translateY(-50%);
-  transition: opacity 160ms linear;
+  transform: translateY(-50%) translateX(calc(100% - var(--pip-toggle-icon-width-height) - 2 * var(--pip-toggle-padding)));
+  transition: opacity 160ms linear, transform 160ms linear;
   min-width: max-content;
   pointer-events: auto;
   opacity: 0;
@@ -468,12 +468,17 @@
   min-width: max-content;
 }
 
+.pictureInPictureToggleLabel {
+  margin-inline-start: var(--pip-toggle-padding);
+}
+
 .controlsOverlay:hover > .pictureInPictureToggleButton {
   opacity: 0.8;
 }
 
 .controlsOverlay:hover > .pictureInPictureToggleButton:hover {
   opacity: 1;
+  transform: translateY(-50%) translateX(0);
 }
 
 /* Overlay Play button */