Bug 1566183 - Add a keyboard shortcut to enter Picture-in-Picture for first video of focused window. r=NeilDeakin,JSON_voorhees,flod

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

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

browser/base/content/browser-sets.inc

@@ -44,6 +44,7 @@
     <command id="View:PageInfo" oncommand="BrowserPageInfo();"/>
     <command id="View:FullScreen" oncommand="BrowserFullScreen();"/>
     <command id="View:ReaderView" oncommand="ReaderParent.toggleReaderMode(event);"/>
+    <command id="View:PictureInPicture" oncommand="PictureInPicture.onCommand(event);"/>
     <command id="cmd_find" oncommand="gLazyFindCommand('onFindCommand')"/>
     <command id="cmd_findAgain" oncommand="gLazyFindCommand('onFindAgainCommand', false)"/>
     <command id="cmd_findPrevious" oncommand="gLazyFindCommand('onFindAgainCommand', true)"/>
@@ -210,6 +211,12 @@
 #else
     <key id="key_toggleReaderMode" keycode="&toggleReaderMode.win.keycode;" command="View:ReaderView" disabled="true"/>
 #endif
+
+#ifdef XP_WIN
+    <key id="key_togglePictureInPicture" key="&togglePictureInPicture.key;" command="View:PictureInPicture" modifiers="accel,shift"/>
+    <key id="key_togglePictureInPicture" key="&togglePictureInPicture.key2;" command="View:PictureInPicture" modifiers="accel,shift"/>
+#endif
+
     <key key="&reloadCmd.commandkey;" command="Browser:Reload" modifiers="accel" id="key_reload"/>
     <key key="&reloadCmd.commandkey;" command="Browser:ReloadSkipCache" modifiers="accel,shift" id="key_reload_skip_cache"/>
     <key id="key_viewSource" key="&pageSourceCmd.commandkey;" command="View:PageSource" modifiers="accel"/>

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

@@ -93,6 +93,9 @@ convenience of Safari and Chrome users on macOS. See bug 1398988. -->
 <!ENTITY toggleReaderMode.key "R">
 <!ENTITY toggleReaderMode.win.keycode "VK_F9">
 
+<!ENTITY togglePictureInPicture.key2 "}">
+<!ENTITY togglePictureInPicture.key "]"> <!-- } is above this key on many keyboards -->
+
 <!ENTITY fullScreenMinimize.tooltip "Minimize">
 <!ENTITY fullScreenRestore.tooltip "Restore">
 <!ENTITY fullScreenClose.tooltip "Close">

toolkit/actors/PictureInPictureChild.jsm

@@ -834,6 +834,10 @@ class PictureInPictureChild extends ActorChild {
         this.pause();
         break;
       }
+      case "PictureInPicture:KeyToggle": {
+        this.keyToggle();
+        break;
+      }
     }
   }
 
@@ -958,4 +962,23 @@ class PictureInPictureChild extends ActorChild {
       video.pause();
     }
   }
+
+  /**
+   * The keyboard was used to attempt to open Picture-in-Picture. In this case,
+   * find the focused window, and open Picture-in-Picture for the first
+   * available video. We suspect this heuristic will handle most cases, though
+   * we might refine this later on.
+   */
+  keyToggle() {
+    let focusedWindow = Services.focus.focusedWindow;
+    if (focusedWindow) {
+      let doc = focusedWindow.document;
+      if (doc) {
+        let video = doc.querySelector("video");
+        if (video) {
+          this.togglePictureInPicture(video);
+        }
+      }
+    }
+  }
 }

toolkit/components/pictureinpicture/PictureInPicture.jsm

@@ -74,6 +74,16 @@ var PictureInPicture = {
     }
   },
 
+  /**
+   * Called when the browser UI handles the View:PictureInPicture command via
+   * the keyboard.
+   */
+  onCommand(event) {
+    let win = event.target.ownerGlobal;
+    let browser = win.gBrowser.selectedBrowser;
+    browser.messageManager.sendAsyncMessage("PictureInPicture:KeyToggle");
+  },
+
   async focusTabAndClosePip() {
     let gBrowser = this.browser.ownerGlobal.gBrowser;
     let tab = gBrowser.getTabForBrowser(this.browser);

toolkit/modules/ActorManagerParent.jsm

@@ -298,6 +298,7 @@ let LEGACY_ACTORS = {
         "PictureInPicture:SetupPlayer",
         "PictureInPicture:Play",
         "PictureInPicture:Pause",
+        "PictureInPicture:KeyToggle",
       ],
     },
   },