more PiP fixes

browser/base/content/pictureInPicture.css

@@ -0,0 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+browser[remote="true"] {
+  -moz-binding: url("chrome://global/content/bindings/remote-browser.xml#remote-browser");
+}

browser/base/content/pictureInPicture.js

@@ -13,6 +13,9 @@ var Player = {
   sourceTab: null,
 
   init() {
+    if (this.browser) {
+      return;
+    }
     let args = window.arguments[0];
     this.source = args.browser;
     if (!this.source || !this.source.isConnected) {
@@ -38,9 +41,16 @@ var Player = {
     browser.relatedBrowser = this.source;
     document.getElementById("player-container").appendChild(browser);
     let mm = browser.messageManager;
-    mm.addMessageListener("PictureInPicture:Ready", () => {
+    let initialized = false;
+    let ready = () => {
+      if (initialized) {
+        return;
+      }
+      initialized = true;
+      mm.removeMessageListener("PictureInPicture:Ready", ready);
       mm.sendAsyncMessage("PictureInPicture:Init", {id: args.id});
-    });
+    };
+    mm.addMessageListener("PictureInPicture:Ready", ready);
     mm.addMessageListener("PictureInPicture:Close", this.close);
     mm.addMessageListener("PictureInPicture:State", message => {
       document.getElementById("play").label = message.data.paused ?
@@ -79,8 +89,20 @@ var Player = {
   },
 };
 
-window.addEventListener("load", () => Player.init(), {once: true});
-window.addEventListener("unload", () => Player.destroy(), {once: true});
+// Only consume the listener for the player document's own load, rather than
+// a load from the embedded browser.
+window.addEventListener("load", function onLoad(event) {
+  if (event.target == document) {
+    window.removeEventListener("load", onLoad);
+    Player.init();
+  }
+});
+window.addEventListener("unload", function onUnload(event) {
+  if (event.target == document) {
+    window.removeEventListener("unload", onUnload);
+    Player.destroy();
+  }
+});
 window.addEventListener("keydown", event => {
   if (event.key == "Escape") {
     window.close();

browser/base/content/pictureInPicture.xul

@@ -3,6 +3,7 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/content/pictureInPicture.css" type="text/css"?>
 <!DOCTYPE window SYSTEM "chrome://browser/locale/browser.dtd">
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         id="picture-in-picture" windowtype="Browser:PictureInPicture"

browser/base/content/pictureInPictureContent.js

@@ -11,6 +11,7 @@ var output = null;
 var still = null;
 var observer = null;
 var sourceWindow = null;
+var initialized = false;
 var events = ["play", "pause", "volumechange", "ended", "seeked", "resize"];
 
 function update() {
@@ -63,6 +64,12 @@ function closePlayer() {
 }
 
 addMessageListener("PictureInPicture:Init", message => {
+  // takeSource consumes the handoff. A duplicate initialization must not
+  // consume it again or close an already playing window.
+  if (initialized) {
+    return;
+  }
+  initialized = true;
   try {
     source = PictureInPicture.takeSource(message.data.id);
     sourceWindow = source.ownerGlobal;

browser/base/jar.mn

@@ -4,6 +4,7 @@
 browser.jar:
         content/browser/pictureInPicture.xul          (content/pictureInPicture.xul)
         content/browser/pictureInPicture.js           (content/pictureInPicture.js)
+        content/browser/pictureInPicture.css          (content/pictureInPicture.css)
         content/browser/pictureInPictureContent.js    (content/pictureInPictureContent.js)
 %  content browser %content/browser/ contentaccessible=yes
 #ifdef XP_MACOSX