Close the floating chat window when detaching a call to a tab (when our add-on is installed).

addon/bootstrap.js

@@ -57,6 +57,49 @@ let webrtcbrowser = {
     }
   },
 
+  _detachToTabListener: function webrtcbrowser__detachToTabListener(aEvent) {
+    let currentBrowser = this.selectedChat.iframe;
+    let gBrowser = this.ownerDocument.getElementById("content");
+
+    // browser.swapDocShells expects a browser, not an iframe, so simulate
+    // the missing methods.
+    currentBrowser.getTabBrowser = function() { return null; };
+    currentBrowser.detachFormFill = function() {};
+    currentBrowser.attachFormFill = function() {};
+
+    let tab = gBrowser.loadOneTab("about:blank", null, null, null, false);
+    gBrowser.swapNewTabWithBrowser(tab, currentBrowser);
+    this.selectedChat.close();
+    aEvent.preventDefault(); // This lets the emitter of the event know it's been handled.
+    gBrowser.setTabTitle(tab);
+  },
+
+  listenToDetachToTabEvents: function webrtcbrowser_listenToDetachToTabEvents() {
+    var windows = Services.ww.getWindowEnumerator();
+    while (windows.hasMoreElements()) {
+      var window = windows.getNext().QueryInterface(Components.interfaces.nsIDOMWindow);
+      if (window.location.href == "chrome://browser/content/browser.xul") {
+        window.document.getElementById("pinnedchats")
+              .addEventListener("detachToTab",
+                                webrtcbrowser._detachToTabListener,
+                                false, true);
+      }
+    }
+  },
+
+  unlistenToDetachToTabEvents: function webrtcbrowser_unlistenToDetachToTabEvents() {
+    var windows = Services.ww.getWindowEnumerator();
+    while (windows.hasMoreElements()) {
+      var window = windows.getNext().QueryInterface(Components.interfaces.nsIDOMWindow);
+      if (window.location.href == "chrome://browser/content/browser.xul") {
+        window.document.getElementById("pinnedchats")
+              .removeEventListener("detachToTab",
+                                   webrtcbrowser._detachToTabListener,
+                                   false, true);
+      }
+    }
+  },
+
   setWidths: function webrtcbrowser_setWidths() {
     try {
       var windows = Services.ww.getWindowEnumerator();
@@ -122,10 +165,12 @@ let webrtcbrowser = {
     Services.obs.addObserver(this, "social:profile-changed", false);
     this.setWidths();
     this.setStyle();
+    this.listenToDetachToTabEvents();
   },
 
   uninit: function webrtcbrowser_uninit() {
     this.unloadStyle();
+    this.unlistenToDetachToTabEvents();
     Services.obs.removeObserver(this, "social:profile-changed");
   },
 

addon/install.rdf

@@ -3,7 +3,7 @@
   <Description about="urn:mozilla:install-manifest">
     <em:id>webrtc-demo@mozillalabs.com</em:id>
     <em:name>WebRTC Demo Improvements</em:name>
-    <em:version>0.8</em:version>
+    <em:version>0.9</em:version>
     <em:description>Adds default variables for webrtc and some extra features</em:description>
     <em:bootstrap>true</em:bootstrap>
     <em:updateURL>https://webrtc-demo.vcap.mozillalabs.com/update.rdf</em:updateURL>

static/sidebar.js

@@ -198,46 +198,63 @@ function setupFileSharing(win, dc, target) {
   }
 }
 
+function finishDetachTab(aWindow) {
+  var doc = aWindow.document;
+  var localVideo = doc.getElementById("localVideo");
+  var video = doc.getElementById("remoteVideo");
+  video.setAttribute("style", "position: fixed; top: 0; left: 0; z-index: 1; background: black;");
+
+  var resizeVideo = function() {
+    var height = aWindow.innerHeight;
+    var width = aWindow.innerWidth;
+
+    video.setAttribute("width", width);
+    video.setAttribute("height", height);
+
+    localVideo.setAttribute("width", "108");
+    localVideo.setAttribute("height", "81");
+    localVideo.setAttribute("style", "position: fixed; z-index: 2;");
+    localVideo.style.top = (height - 81) + "px";
+    localVideo.style.left = (width - 108) + "px";
+  };
+  resizeVideo();
+  aWindow.addEventListener("resize", resizeVideo);
+
+  var button = doc.getElementById("fullTab");
+  button.onclick = function() {
+    doc.getElementById("video").mozRequestFullScreen();
+  };
+  button.textContent = "Full screen";
+}
+
 function setupExpandHandler(win) {
   win.document.getElementById("fullTab").onclick = function() {
-    var tab = win.open(win.location);
-    tab.addEventListener("DOMContentLoaded", function() {
-      tab.document.title = win.document.title;
+    var doc = win.document;
+    var event = doc.createEvent("UIEvents");
+    event.initUIEvent("detachToTab", true, true, win, 0);
+    win.dispatchEvent(event);
 
-      var video = win.document.getElementById("remoteVideo");
-      var newVideo = tab.document.getElementById("remoteVideo");
-      newVideo.mozSrcObject = video.mozSrcObject;
-      newVideo.play();
-      newVideo.setAttribute("style", "position: fixed; top: 0; left: 0; z-index: 1; background: black;");
+    if (!event.defaultPrevented) {
+      // The add-on isn't installed, fallback to opening a new tab and
+      // keeping the floating window around.
+      var tab = win.open(win.location);
+      tab.addEventListener("DOMContentLoaded", function() {
+        tab.document.title = win.document.title;
 
-      var localVideo = win.document.getElementById("localVideo");
-      var newLocalVideo = tab.document.getElementById("localVideo");
-      newLocalVideo.mozSrcObject = localVideo.mozSrcObject;
-      newLocalVideo.play();
+        var video = doc.getElementById("remoteVideo");
+        var newVideo = tab.document.getElementById("remoteVideo");
+        newVideo.mozSrcObject = video.mozSrcObject;
+        newVideo.play();
 
-      var resizeVideo = function() {
-        var height = tab.innerHeight;
-        var width = tab.innerWidth;
-        var doc = tab.document;
-
-        newVideo.setAttribute("width", width);
-        newVideo.setAttribute("height", height);
-
-        newLocalVideo.setAttribute("width", "108");
-        newLocalVideo.setAttribute("height", "81");
-        newLocalVideo.setAttribute("style", "position: fixed; z-index: 2;");
-        newLocalVideo.style.top = (height - 81) + "px";
-        newLocalVideo.style.left = (width - 108) + "px";
-      };
-      resizeVideo();
-      tab.addEventListener("resize", resizeVideo);
-
-      var button = tab.document.getElementById("fullTab");
-      button.onclick = function() {
-        tab.document.getElementById("video").mozRequestFullScreen();
-      };
-      button.textContent = "Full screen";
-    });
+        var localVideo = doc.getElementById("localVideo");
+        var newLocalVideo = tab.document.getElementById("localVideo");
+        newLocalVideo.mozSrcObject = localVideo.mozSrcObject;
+        newLocalVideo.play();
+        finishDetachTab(tab);
+      });
+    }
+    else
+      finishDetachTab(doc.defaultView);
   };
 }
 

static/update.rdf

@@ -10,7 +10,7 @@
     </em:updates>
   </RDF:Description>
   <RDF:Description about="urn:mozilla:extension:webrtc-demo@mozillalabs.com:0.7">
-    <em:version>0.8</em:version>
+    <em:version>0.9</em:version>
     <em:targetApplication>
       <RDF:Description>
         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
@@ -18,7 +18,7 @@
         <em:maxVersion>21.0a1</em:maxVersion>
         <em:updateLink>https://webrtc-demo.vcap.mozillalabs.com/webrtc.xpi</em:updateLink>
         <em:updateInfoURL>https://webrtc-demo.vcap.mozillalabs.com/update.txt</em:updateInfoURL>
-        <em:updateHash>sha256:012683881177e3d640228e1cd48064db9a6a0853a89507255307854599810d83</em:updateHash>
+        <em:updateHash>sha256:97dabc30764643790b1c523f5a3cb0594433b1b5f4503d2e566ba20235f0ee02</em:updateHash>
       </RDF:Description>
     </em:targetApplication>
   </RDF:Description>