Bug 1037408 - implement the global indicator window, initial patch by Gijs, r=dolske.

browser/base/content/webrtcIndicator.js

@@ -0,0 +1,123 @@
+/* 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/. */
+
+const Cu = Components.utils;
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/webrtcUI.jsm");
+
+const BUNDLE_URL = "chrome://browser/locale/webrtcIndicator.properties";
+let gStringBundle;
+
+function init(event) {
+  gStringBundle = Services.strings.createBundle(BUNDLE_URL);
+
+  let brand = Services.strings.createBundle("chrome://branding/locale/brand.properties");
+  let brandShortName = brand.GetStringFromName("brandShortName");
+  document.title =
+    gStringBundle.formatStringFromName("webrtcIndicator.windowtitle",
+                                       [brandShortName], 1);
+
+  for (let id of ["audioVideoButton", "screenSharePopup"]) {
+    let popup = document.getElementById(id);
+    popup.addEventListener("popupshowing", onPopupMenuShowing);
+    popup.addEventListener("popuphiding", onPopupMenuHiding);
+    popup.addEventListener("command", onPopupMenuCommand);
+  }
+
+  document.getElementById("firefoxButton")
+          .addEventListener("click", onFirefoxButtonClick);
+
+  updateIndicatorState();
+}
+
+function updateIndicatorState() {
+  updateWindowAttr("sharingvideo", webrtcUI.showCameraIndicator);
+  updateWindowAttr("sharingaudio", webrtcUI.showMicrophoneIndicator);
+  updateWindowAttr("sharingscreen", webrtcUI.showScreenSharingIndicator);
+
+  // Camera and microphone button tooltip.
+  let shareTypes = [];
+  if (webrtcUI.showCameraIndicator)
+    shareTypes.push("Camera");
+  if (webrtcUI.showMicrophoneIndicator)
+    shareTypes.push("Microphone");
+
+  let audioVideoButton = document.getElementById("audioVideoButton");
+  if (shareTypes.length) {
+    let stringId = "webrtcIndicator.sharing" + shareTypes.join("And") + ".tooltip";
+    audioVideoButton.setAttribute("tooltiptext",
+                                   gStringBundle.GetStringFromName(stringId));
+  }
+  else {
+    audioVideoButton.removeAttribute("tooltiptext");
+  }
+
+  // Screen sharing button tooltip.
+  let screenShareButton = document.getElementById("screenShareButton");
+  if (webrtcUI.showScreenSharingIndicator) {
+    let stringId = "webrtcIndicator.sharing" +
+                   webrtcUI.showScreenSharingIndicator + ".tooltip";
+    screenShareButton.setAttribute("tooltiptext",
+                                    gStringBundle.GetStringFromName(stringId));
+  }
+  else {
+    screenShareButton.removeAttribute("tooltiptext");
+  }
+
+  // Resize and center the window.
+  window.sizeToContent();
+  window.moveTo((screen.availWidth - document.documentElement.clientWidth) / 2, 0);
+}
+
+function updateWindowAttr(attr, value) {
+  let docEl = document.documentElement;
+  if (value)
+    docEl.setAttribute(attr, "true");
+  else
+    docEl.removeAttribute(attr);
+}
+
+function onPopupMenuShowing(event) {
+  let popup = event.target;
+  let type = popup.getAttribute("type");
+
+  let activeStreams;
+  if (type == "Devices")
+    activeStreams = webrtcUI.getActiveStreams(true, true, false);
+  else
+    activeStreams = webrtcUI.getActiveStreams(false, false, true);
+
+  if (activeStreams.length == 1) {
+    webrtcUI.showSharingDoorhanger(activeStreams[0], type);
+    return false;
+  }
+
+  for (let stream of activeStreams) {
+    let item = document.createElement("menuitem");
+    item.setAttribute("label", stream.browser.contentTitle || stream.uri);
+    item.setAttribute("tooltiptext", stream.uri);
+    item.stream = stream;
+    popup.appendChild(item);
+  }
+
+  return true;
+}
+
+function onPopupMenuHiding(event) {
+  let popup = event.target;
+  while (popup.firstChild)
+    popup.firstChild.remove();
+}
+
+function onPopupMenuCommand(event) {
+  let item = event.target;
+  webrtcUI.showSharingDoorhanger(item.stream,
+                                 item.parentNode.getAttribute("type"));
+}
+
+function onFirefoxButtonClick(event) {
+  event.target.blur();
+  let activeStreams = webrtcUI.getActiveStreams(true, true, true);
+  activeStreams[0].browser.ownerDocument.defaultView.focus();
+}

browser/base/content/webrtcIndicator.xul

@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+
+# 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/.
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/webRTC-indicator.css" type="text/css"?>
+
+<!DOCTYPE window>
+
+<window xmlns:html="http://www.w3.org/1999/xhtml"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        id="webrtcIndicator"
+        html:role="alert"
+        windowtype="Browser:WebRTCGlobalIndicator"
+        onload="init(event);"
+#ifdef XP_MACOSX
+        inwindowmenu="false"
+#endif
+        sizemode="normal"
+        hidechrome="true"
+        orient="horizontal"
+        >
+  <script type="application/javascript" src="chrome://browser/content/webrtcIndicator.js"/>
+
+  <button id="firefoxButton"/>
+  <button id="audioVideoButton" type="menu">
+    <menupopup id="audioVideoPopup" type="Devices"/>
+  </button>
+  <separator id="shareSeparator"/>
+  <button id="screenShareButton" type="menu">
+    <menupopup id="screenSharePopup" type="Screen"/>
+  </button>
+</window>

browser/base/jar.mn

@@ -135,6 +135,8 @@ browser.jar:
 *       content/browser/softwareUpdateOverlay.xul  (content/softwareUpdateOverlay.xul)
 #endif
 *       content/browser/viewSourceOverlay.xul         (content/viewSourceOverlay.xul)
+*       content/browser/webrtcIndicator.xul           (content/webrtcIndicator.xul)
+        content/browser/webrtcIndicator.js            (content/webrtcIndicator.js)
 #ifdef XP_WIN
         content/browser/win6BrowserOverlay.xul        (content/win6BrowserOverlay.xul)
 #endif

browser/locales/en-US/chrome/browser/webrtcIndicator.properties

@@ -0,0 +1,16 @@
+# 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/.
+
+# LOCALIZATION NOTE : FILE This file contains the webrtc global indicator strings
+
+# LOCALIZATION NOTE (webrtcIndicator.windowtitle): %S is the brand name (e.g. Firefox).
+# This string is used so that the window has a title in tools that enumerate/look for window
+# titles. It is not normally visible anywhere.
+webrtcIndicator.windowtitle = %S - Sharing Indicator
+
+webrtcIndicator.sharingCameraAndMicrophone.tooltip = Your camera and microphone are being shared. Click to control sharing.
+webrtcIndicator.sharingCamera.tooltip              = Your camera is being shared. Click to control sharing.
+webrtcIndicator.sharingMicrophone.tooltip          = Your microphone is being shared. Click to control sharing.
+webrtcIndicator.sharingScreen.tooltip = Your screen is being shared. Click to control sharing.
+webrtcIndicator.sharingWindow.tooltip = A window is being shared. Click to control sharing.

browser/locales/jar.mn

@@ -85,6 +85,7 @@
     locale/browser/taskbar.properties              (%chrome/browser/taskbar.properties)
     locale/browser/translation.dtd                 (%chrome/browser/translation.dtd)
     locale/browser/translation.properties          (%chrome/browser/translation.properties)
+    locale/browser/webrtcIndicator.properties      (%chrome/browser/webrtcIndicator.properties)
     locale/browser/downloads/downloads.dtd         (%chrome/browser/downloads/downloads.dtd)
     locale/browser/downloads/downloads.properties  (%chrome/browser/downloads/downloads.properties)
     locale/browser/places/places.dtd               (%chrome/browser/places/places.dtd)

browser/modules/webrtcUI.jsm

@@ -13,6 +13,8 @@ const Ci = Components.interfaces;
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
+const INDICATOR_CHROME_URI = "chrome://browser/content/webrtcIndicator.xul";
+
 XPCOMUtils.defineLazyModuleGetter(this, "PluralForm",
                                   "resource://gre/modules/PluralForm.jsm");
 
@@ -67,6 +69,20 @@ this.webrtcUI = {
     return activeStreams;
   },
 
+  showSharingDoorhanger: function(aActiveStream, aType) {
+    let browserWindow = aActiveStream.browser.ownerDocument.defaultView;
+    if (aActiveStream.tab) {
+      browserWindow.gBrowser.selectedTab = aActiveStream.tab;
+    } else {
+      aActiveStream.browser.focus();
+    }
+    browserWindow.focus();
+    let PopupNotifications = browserWindow.PopupNotifications;
+    let notif = PopupNotifications.getNotification("webRTC-sharing" + aType,
+                                                   aActiveStream.browser);
+    notif.reshow();
+  },
+
   updateMainActionLabel: function(aMenuList) {
     let type = aMenuList.selectedItem.getAttribute("devicetype");
     let document = aMenuList.ownerDocument;
@@ -402,6 +418,8 @@ function prompt(aContentWindow, aCallID, aAudio, aVideo, aDevices, aSecure) {
                                     anchorId, mainAction, secondaryActions, options);
 }
 
+var gIndicatorWindow = null;
+
 function updateIndicators() {
   let contentWindowSupportsArray = MediaManagerService.activeMediaCaptureWindows;
   let count = contentWindowSupportsArray.Count();
@@ -432,6 +450,19 @@ function updateIndicators() {
 
     showBrowserSpecificIndicator(getBrowserForWindow(contentWindow));
   }
+
+  if (webrtcUI.showGlobalIndicator) {
+    if (!gIndicatorWindow) {
+      const features = "chrome,dialog=yes,titlebar=no,popup=yes";
+      gIndicatorWindow = Services.ww.openWindow(null, INDICATOR_CHROME_URI, "_blank",
+                                                features, []);
+    } else {
+      gIndicatorWindow.updateIndicatorState();
+    }
+  } else if (gIndicatorWindow) {
+    gIndicatorWindow.close();
+    gIndicatorWindow = null;
+  }
 }
 
 function showBrowserSpecificIndicator(aBrowser) {

browser/themes/linux/jar.mn

@@ -77,6 +77,10 @@ browser.jar:
   skin/classic/browser/webRTC-shareScreen-16.png      (../shared/webrtc/webRTC-shareScreen-16.png)
   skin/classic/browser/webRTC-shareScreen-64.png      (../shared/webrtc/webRTC-shareScreen-64.png)
   skin/classic/browser/webRTC-sharingScreen-16.png    (../shared/webrtc/webRTC-sharingScreen-16.png)
+* skin/classic/browser/webRTC-indicator.css           (../shared/webrtc/indicator.css)
+  skin/classic/browser/webRTC-camera-white-16.png     (../shared/webrtc/camera-white-16.png)
+  skin/classic/browser/webRTC-microphone-white-16.png (../shared/webrtc/microphone-white-16.png)
+  skin/classic/browser/webRTC-screen-white-16.png     (../shared/webrtc/screen-white-16.png)
   skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
   skin/classic/browser/customizableui/customize-illustration.png  (../shared/customizableui/customize-illustration.png)
   skin/classic/browser/customizableui/customize-illustration-rtl.png  (../shared/customizableui/customize-illustration-rtl.png)

browser/themes/osx/jar.mn

@@ -131,6 +131,13 @@ browser.jar:
   skin/classic/browser/webRTC-shareScreen-64@2x.png   (../shared/webrtc/webRTC-shareScreen-64@2x.png)
   skin/classic/browser/webRTC-sharingScreen-16.png    (../shared/webrtc/webRTC-sharingScreen-16.png)
   skin/classic/browser/webRTC-sharingScreen-16@2x.png (../shared/webrtc/webRTC-sharingScreen-16@2x.png)
+* skin/classic/browser/webRTC-indicator.css           (../shared/webrtc/indicator.css)
+  skin/classic/browser/webRTC-camera-white-16.png     (../shared/webrtc/camera-white-16.png)
+  skin/classic/browser/webRTC-camera-white-16@2x.png  (../shared/webrtc/camera-white-16@2x.png)
+  skin/classic/browser/webRTC-microphone-white-16.png (../shared/webrtc/microphone-white-16.png)
+  skin/classic/browser/webRTC-microphone-white-16@2x.png (../shared/webrtc/microphone-white-16@2x.png)
+  skin/classic/browser/webRTC-screen-white-16.png     (../shared/webrtc/screen-white-16.png)
+  skin/classic/browser/webRTC-screen-white-16@2x.png  (../shared/webrtc/screen-white-16@2x.png)
   skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
   skin/classic/browser/customizableui/customize-titleBar-toggle.png  (customizableui/customize-titleBar-toggle.png)
   skin/classic/browser/customizableui/customize-titleBar-toggle@2x.png  (customizableui/customize-titleBar-toggle@2x.png)

browser/themes/shared/webrtc/indicator.css

@@ -0,0 +1,129 @@
+/* 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/. */
+
+window {
+  border: 1px solid #ff9500;
+}
+
+#audioVideoButton,
+#screenShareButton,
+#firefoxButton {
+  height: 29px;
+  margin: 0;
+  -moz-appearance: none;
+  border-style: none;
+}
+
+#firefoxButton {
+  background-image: url("chrome://branding/content/icon48.png");
+  background-repeat: no-repeat;
+  background-size: 22px;
+  background-position: center center;
+  min-width: 29px;
+  background-color: white;
+}
+
+#firefoxButton:hover {
+  background-color: #f2f2f2;
+}
+
+#screenShareButton {
+  background-image: url("webRTC-screen-white-16.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  min-width: 27px;
+  display: none;
+}
+
+window[sharingscreen] > #screenShareButton {
+  display: -moz-box;
+}
+
+#audioVideoButton {
+  display: none;
+  background-repeat: no-repeat;
+}
+
+/* When screen sharing, need to pull in the separator: */
+window[sharingscreen] > #audioVideoButton {
+  margin-right: -1px;
+}
+
+/* Single icon button: */
+window[sharingvideo] > #audioVideoButton,
+window[sharingaudio] > #audioVideoButton {
+  display: -moz-box;
+  background-position: center center;
+  background-size: 16px;
+  min-width: 26px;
+}
+
+window[sharingvideo] > #audioVideoButton {
+  background-image: url("webRTC-camera-white-16.png");
+}
+
+window[sharingaudio] > #audioVideoButton {
+  background-image: url("webRTC-microphone-white-16.png");
+}
+
+/* Multi-icon button: */
+window[sharingaudio][sharingvideo] > #audioVideoButton {
+  background-image: url("webRTC-camera-white-16.png"),
+                    url("webRTC-microphone-white-16.png");
+  background-position: 6px center, 26px center;
+  background-size: 16px, 16px;
+  min-width: 46px;
+}
+
+/* Hover styles */
+#audioVideoButton,
+#screenShareButton {
+  background-color: #ffaa33;
+}
+
+#audioVideoButton:hover,
+#screenShareButton:hover {
+  background-color: #ff9500;
+}
+
+/* Don't show the dropmarker for the type="menu" case */
+#audioVideoButton > .box-inherit > .button-menu-dropmarker,
+#screenShareButton > .box-inherit > .button-menu-dropmarker {
+  display: none;
+}
+
+/* Separator in case of screen sharing + video/audio sharing */
+#shareSeparator {
+  width: 1px;
+  margin: 4px -1px 4px 0;
+  background-color: #FFCA80;
+  /* Separator needs to show above either button when they're hovered: */
+  position: relative;
+  z-index: 1;
+  display: none;
+}
+
+window[sharingscreen][sharingvideo] > #shareSeparator,
+window[sharingscreen][sharingaudio] > #shareSeparator {
+  display: -moz-box;
+}
+
+%ifdef XP_MACOSX
+@media (min-resolution: 2dppx) {
+  window[sharingvideo] > #audioVideoButton {
+    background-image: url("webRTC-camera-white-16@2x.png");
+  }
+
+  window[sharingaudio] > #audioVideoButton {
+    background-image: url("webRTC-microphone-white-16@2x.png");
+  }
+
+  /* Multi-icon button: */
+  window[sharingaudio][sharingvideo] > #audioVideoButton {
+    background-image: url("webRTC-camera-white-16@2x.png"),
+                      url("webRTC-microphone-white-16@2x.png");
+  }
+}
+%endif

browser/themes/windows/jar.mn

@@ -98,6 +98,10 @@ browser.jar:
         skin/classic/browser/webRTC-shareScreen-16.png               (../shared/webrtc/webRTC-shareScreen-16.png)
         skin/classic/browser/webRTC-shareScreen-64.png               (../shared/webrtc/webRTC-shareScreen-64.png)
         skin/classic/browser/webRTC-sharingScreen-16.png             (../shared/webrtc/webRTC-sharingScreen-16.png)
+*       skin/classic/browser/webRTC-indicator.css                    (../shared/webrtc/indicator.css)
+        skin/classic/browser/webRTC-camera-white-16.png              (../shared/webrtc/camera-white-16.png)
+        skin/classic/browser/webRTC-microphone-white-16.png          (../shared/webrtc/microphone-white-16.png)
+        skin/classic/browser/webRTC-screen-white-16.png              (../shared/webrtc/screen-white-16.png)
         skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
         skin/classic/browser/customizableui/customizeFavicon.ico  (../shared/customizableui/customizeFavicon.ico)
         skin/classic/browser/customizableui/customize-illustration.png  (../shared/customizableui/customize-illustration.png)
@@ -510,6 +514,10 @@ browser.jar:
         skin/classic/aero/browser/webRTC-shareScreen-16.png               (../shared/webrtc/webRTC-shareScreen-16.png)
         skin/classic/aero/browser/webRTC-shareScreen-64.png               (../shared/webrtc/webRTC-shareScreen-64.png)
         skin/classic/aero/browser/webRTC-sharingScreen-16.png             (../shared/webrtc/webRTC-sharingScreen-16.png)
+*       skin/classic/aero/browser/webRTC-indicator.css                    (../shared/webrtc/indicator.css)
+        skin/classic/aero/browser/webRTC-camera-white-16.png              (../shared/webrtc/camera-white-16.png)
+        skin/classic/aero/browser/webRTC-microphone-white-16.png          (../shared/webrtc/microphone-white-16.png)
+        skin/classic/aero/browser/webRTC-screen-white-16.png              (../shared/webrtc/screen-white-16.png)
         skin/classic/aero/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
         skin/classic/aero/browser/customizableui/customize-illustration.png  (../shared/customizableui/customize-illustration.png)
         skin/classic/aero/browser/customizableui/customize-illustration-rtl.png  (../shared/customizableui/customize-illustration-rtl.png)