Bug 1568320 - Add a context menu to the Picture-in-Picture toggle to allow for easy hiding. r=NeilDeakin,JSON_voorhees

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

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

browser/base/content/browser.js

@@ -48,6 +48,7 @@ XPCOMUtils.defineLazyModuleGetters(this, {
   PanelMultiView: "resource:///modules/PanelMultiView.jsm",
   PanelView: "resource:///modules/PanelMultiView.jsm",
   PermitUnloader: "resource://gre/actors/BrowserElementParent.jsm",
+  PictureInPicture: "resource://gre/modules/PictureInPicture.jsm",
   PlacesUtils: "resource://gre/modules/PlacesUtils.jsm",
   PlacesUIUtils: "resource:///modules/PlacesUIUtils.jsm",
   PlacesTransactions: "resource://gre/modules/PlacesTransactions.jsm",

browser/base/content/browser.xhtml

@@ -506,6 +506,12 @@
 #include browser-context.inc
     </menupopup>
 
+    <menupopup id="pictureInPictureToggleContextMenu">
+      <menuitem label="&pictureInPictureHideToggle.label;"
+                accesskey="&pictureInPictureHideToggle.accesskey;"
+                oncommand="PictureInPicture.hideToggle();" />
+    </menupopup>
+
 #include ../../components/places/content/placesContextMenu.inc.xul
 
     <panel id="ctrlTab-panel" hidden="true" norestorefocus="true" level="top">

browser/components/BrowserGlue.jsm

@@ -653,6 +653,7 @@ const listeners = {
     "PictureInPicture:Close": ["PictureInPicture"],
     "PictureInPicture:Playing": ["PictureInPicture"],
     "PictureInPicture:Paused": ["PictureInPicture"],
+    "PictureInPicture:OpenToggleContextMenu": ["PictureInPicture"],
     "Reader:FaviconRequest": ["ReaderParent"],
     "Reader:UpdateReaderButton": ["ReaderParent"],
     // PLEASE KEEP THIS LIST IN SYNC WITH THE MOBILE LISTENERS IN BrowserCLH.js

browser/locales/en-US/chrome/browser/browser.dtd

@@ -94,6 +94,9 @@ convenience of Safari and Chrome users on macOS. See bug 1398988. -->
 <!ENTITY fullScreenExit.label "Exit Full Screen Mode">
 <!ENTITY fullScreenExit.accesskey "F">
 
+<!ENTITY pictureInPictureHideToggle.label "Hide Picture-in-Picture Toggle">
+<!ENTITY pictureInPictureHideToggle.accesskey "H">
+
 <!-- LOCALIZATION NOTE (fxa.menu) Used to define the different labels
      for the Firefox Account toolbar menu screen. The `Signed in as` text is
      followed by the user's email. -->

toolkit/actors/PictureInPictureChild.jsm

@@ -138,13 +138,18 @@ class PictureInPictureToggleChild extends ActorChild {
         if (
           this.toggleEnabled &&
           event.target instanceof this.content.HTMLVideoElement &&
-          !event.target.controls &&
           event.target.ownerDocument == this.content.document
         ) {
           this.registerVideo(event.target);
         }
         break;
       }
+      case "contextmenu": {
+        if (this.toggleEnabled) {
+          this.checkContextMenu(event);
+        }
+        break;
+      }
       case "mousedown":
       case "pointerup":
       case "mouseup":
@@ -640,6 +645,39 @@ class PictureInPictureToggleChild extends ActorChild {
     );
   }
 
+  /**
+   * Checks a contextmenu event to see if the mouse is currently over the
+   * Picture-in-Picture toggle. If so, sends a message to the parent process
+   * to open up the Picture-in-Picture toggle context menu.
+   *
+   * @param {MouseEvent} event A contextmenu event.
+   */
+  checkContextMenu(event) {
+    let state = this.docState;
+
+    let video = state.weakOverVideo && state.weakOverVideo.get();
+    if (!video) {
+      return;
+    }
+
+    let shadowRoot = video.openOrClosedShadowRoot;
+    if (!shadowRoot) {
+      return;
+    }
+
+    let toggle = shadowRoot.getElementById("pictureInPictureToggleButton");
+    if (this.isMouseOverToggle(toggle, event)) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+
+      this.mm.sendAsyncMessage("PictureInPicture:OpenToggleContextMenu", {
+        screenX: event.screenX,
+        screenY: event.screenY,
+        mozInputSource: event.mozInputSource,
+      });
+    }
+  }
+
   /**
    * This is a test-only function that returns true if a video is being tracked
    * for mouseover events after having intersected the viewport.

toolkit/components/pictureinpicture/PictureInPicture.jsm

@@ -11,6 +11,8 @@ const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
 const PLAYER_URI = "chrome://global/content/pictureinpicture/player.xhtml";
 const PLAYER_FEATURES = `chrome,titlebar=no,alwaysontop,lockaspectratio,resizable`;
 const WINDOW_TYPE = "Toolkit:PictureInPicture";
+const TOGGLE_ENABLED_PREF =
+  "media.videocontrols.picture-in-picture.video-toggle.enabled";
 
 /**
  * If closing the Picture-in-Picture player window occurred for a reason that
@@ -64,6 +66,11 @@ var PictureInPicture = {
         }
         break;
       }
+      case "PictureInPicture:OpenToggleContextMenu": {
+        let win = browser.ownerGlobal;
+        this.openToggleContextMenu(win, aMessage.data);
+        break;
+      }
     }
   },
 
@@ -297,4 +304,37 @@ var PictureInPicture = {
       );
     });
   },
+
+  openToggleContextMenu(window, data) {
+    let document = window.document;
+    let popup = document.getElementById("pictureInPictureToggleContextMenu");
+
+    // We synthesize a new MouseEvent to propagate the inputSource to the
+    // subsequently triggered popupshowing event.
+    let newEvent = document.createEvent("MouseEvent");
+    newEvent.initNSMouseEvent(
+      "contextmenu",
+      true,
+      true,
+      null,
+      0,
+      data.screenX,
+      data.screenY,
+      0,
+      0,
+      false,
+      false,
+      false,
+      false,
+      0,
+      null,
+      0,
+      data.mozInputSource
+    );
+    popup.openPopupAtScreen(newEvent.screenX, newEvent.screenY, true, newEvent);
+  },
+
+  hideToggle() {
+    Services.prefs.setBoolPref(TOGGLE_ENABLED_PREF, false);
+  },
 };

toolkit/modules/ActorManagerParent.jsm

@@ -309,6 +309,7 @@ let LEGACY_ACTORS = {
       module: "resource://gre/actors/PictureInPictureChild.jsm",
       events: {
         canplay: { capture: true, mozSystemGroup: true },
+        contextmenu: { capture: true },
       },
     },
   },