Bug 876041 - Granting access to microphone shows video icon next to address bar, r=dolske, ui-r=Boriss.

browser/base/content/browser.xul

@@ -691,6 +691,8 @@
                 <image id="mixed-content-blocked-notification-icon" class="notification-anchor-icon" role="button"/>
                 <image id="webRTC-shareDevices-notification-icon" class="notification-anchor-icon" role="button"/>
                 <image id="webRTC-sharingDevices-notification-icon" class="notification-anchor-icon" role="button"/>
+                <image id="webRTC-shareMicrophone-notification-icon" class="notification-anchor-icon" role="button"/>
+                <image id="webRTC-sharingMicrophone-notification-icon" class="notification-anchor-icon" role="button"/>
                 <image id="pointerLock-notification-icon" class="notification-anchor-icon" role="button"/>
                 <image id="servicesInstall-notification-icon" class="notification-anchor-icon" role="button"/>
               </box>

browser/base/content/test/general/browser_get_user_media.js

@@ -213,7 +213,11 @@ let gTests = [
     });
 
     yield promisePopupNotification("webRTC-shareDevices", true);
+    is(PopupNotifications.getNotification("webRTC-shareDevices").anchorID,
+       "webRTC-shareDevices-notification-icon", "anchored to device icon");
     checkDeviceSelectors(true, true);
+    is(PopupNotifications.panel.firstChild.getAttribute("popupid"),
+       "webRTC-shareDevices", "panel using devices icon");
 
     yield promiseMessage("ok", () => {
       PopupNotifications.panel.firstChild.button.click();
@@ -237,7 +241,11 @@ let gTests = [
     });
 
     yield promisePopupNotification("webRTC-shareDevices", true);
+    is(PopupNotifications.getNotification("webRTC-shareDevices").anchorID,
+       "webRTC-shareMicrophone-notification-icon", "anchored to mic icon");
     checkDeviceSelectors(true);
+    is(PopupNotifications.panel.firstChild.getAttribute("popupid"),
+       "webRTC-shareMicrophone", "panel using microphone icon");
 
     yield promiseMessage("ok", () => {
       PopupNotifications.panel.firstChild.button.click();
@@ -260,7 +268,11 @@ let gTests = [
     });
 
     yield promisePopupNotification("webRTC-shareDevices", true);
+    is(PopupNotifications.getNotification("webRTC-shareDevices").anchorID,
+       "webRTC-shareDevices-notification-icon", "anchored to device icon");
     checkDeviceSelectors(false, true);
+    is(PopupNotifications.panel.firstChild.getAttribute("popupid"),
+       "webRTC-shareDevices", "panel using devices icon");
 
     yield promiseMessage("ok", () => {
       PopupNotifications.panel.firstChild.button.click();
@@ -668,8 +680,16 @@ let gTests = [
       expectNotification("recording-device-events");
       yield checkSharingUI();
 
-      // Stop sharing.
       PopupNotifications.getNotification("webRTC-sharingDevices").reshow();
+      let expectedIcon = "webRTC-sharingDevices";
+      if (aRequestAudio && !aRequestVideo)
+        expectedIcon = "webRTC-sharingMicrophone";
+      is(PopupNotifications.getNotification("webRTC-sharingDevices").anchorID,
+         expectedIcon + "-notification-icon", "anchored to correct icon");
+      is(PopupNotifications.panel.firstChild.getAttribute("popupid"), expectedIcon,
+         "panel using correct icon");
+
+      // Stop sharing.
       activateSecondaryAction(kActionDeny);
 
       yield promiseNotification("recording-device-events");

browser/modules/webrtcUI.jsm

@@ -172,11 +172,17 @@ function prompt(aContentWindow, aCallID, aAudioRequested, aVideoRequested, aDevi
       if (aTopic == "swapping")
         return true;
 
+      let chromeDoc = this.browser.ownerDocument;
+
+      if (aTopic == "shown") {
+        let PopupNotifications = chromeDoc.defaultView.PopupNotifications;
+        let popupId = requestType == "Microphone" ? "Microphone" : "Devices";
+        PopupNotifications.panel.firstChild.setAttribute("popupid", "webRTC-share" + popupId);
+      }
+
       if (aTopic != "showing")
         return false;
 
-      let chromeDoc = this.browser.ownerDocument;
-
       function listDevices(menupopup, devices) {
         while (menupopup.lastChild)
           menupopup.removeChild(menupopup.lastChild);
@@ -245,9 +251,10 @@ function prompt(aContentWindow, aCallID, aAudioRequested, aVideoRequested, aDevi
     }
   };
 
+  let anchorId = requestType == "Microphone" ? "webRTC-shareMicrophone-notification-icon"
+                                             : "webRTC-shareDevices-notification-icon";
   chromeWin.PopupNotifications.show(browser, "webRTC-shareDevices", message,
-                                    "webRTC-shareDevices-notification-icon", mainAction,
-                                    secondaryActions, options);
+                                    anchorId, mainAction, secondaryActions, options);
 }
 
 function updateIndicators() {
@@ -313,11 +320,19 @@ function showBrowserSpecificIndicator(aBrowser) {
   let options = {
     hideNotNow: true,
     dismissed: true,
-    eventCallback: function(aTopic) aTopic == "swapping"
+    eventCallback: function(aTopic) {
+      if (aTopic == "shown") {
+        let PopupNotifications = this.browser.ownerDocument.defaultView.PopupNotifications;
+        let popupId = captureState == "Microphone" ? "Microphone" : "Devices";
+        PopupNotifications.panel.firstChild.setAttribute("popupid", "webRTC-sharing" + popupId);
+      }
+      return aTopic == "swapping";
+    }
   };
+  let anchorId = captureState == "Microphone" ? "webRTC-sharingMicrophone-notification-icon"
+                                              : "webRTC-sharingDevices-notification-icon";
   chromeWin.PopupNotifications.show(aBrowser, "webRTC-sharingDevices", message,
-                                    "webRTC-sharingDevices-notification-icon", mainAction,
-                                    secondaryActions, options);
+                                    anchorId, mainAction, secondaryActions, options);
 }
 
 function removeBrowserSpecificIndicator(aSubject, aTopic, aData) {

browser/themes/linux/browser.css

@@ -1093,6 +1093,11 @@ toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
   list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png);
 }
 
+.popup-notification-icon[popupid="webRTC-sharingMicrophone"],
+.popup-notification-icon[popupid="webRTC-shareMicrophone"] {
+  list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64.png);
+}
+
 .popup-notification-icon[popupid="pointerLock"] {
   list-style-image: url(chrome://browser/skin/pointerLock-64.png);
 }
@@ -1225,6 +1230,16 @@ toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
   list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png);
 }
 
+.webRTC-shareMicrophone-notification-icon,
+#webRTC-shareMicrophone-notification-icon {
+  list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png);
+}
+
+.webRTC-sharingMicrophone-notification-icon,
+#webRTC-sharingMicrophone-notification-icon {
+  list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png);
+}
+
 .web-notifications-notification-icon,
 #web-notifications-notification-icon {
   list-style-image: url(chrome://browser/skin/notification-16.png);

browser/themes/linux/jar.mn

@@ -68,6 +68,9 @@ browser.jar:
   skin/classic/browser/webRTC-shareDevice-16.png
   skin/classic/browser/webRTC-shareDevice-64.png
   skin/classic/browser/webRTC-sharingDevice-16.png
+  skin/classic/browser/webRTC-shareMicrophone-16.png
+  skin/classic/browser/webRTC-shareMicrophone-64.png
+  skin/classic/browser/webRTC-sharingMicrophone-16.png
   skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
   skin/classic/browser/customizableui/customizeMode-gridTexture.png  (customizableui/customizeMode-gridTexture.png)
   skin/classic/browser/customizableui/customizeMode-separatorHorizontal.png  (customizableui/customizeMode-separatorHorizontal.png)

browser/themes/osx/browser.css

@@ -3470,6 +3470,28 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   }
 }
 
+.webRTC-shareMicrophone-notification-icon,
+#webRTC-shareMicrophone-notification-icon {
+  list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png);
+}
+@media (min-resolution: 2dppx) {
+  .webRTC-shareMicrophone-notification-icon,
+  #webRTC-shareMicrophone-notification-icon {
+    list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
+  }
+}
+
+.webRTC-sharingMicrophone-notification-icon,
+#webRTC-sharingMicrophone-notification-icon {
+  list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png);
+}
+@media (min-resolution: 2dppx) {
+  .webRTC-sharingMicrophone-notification-icon,
+  #webRTC-sharingMicrophone-notification-icon {
+    list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
+  }
+}
+
 .web-notifications-notification-icon,
 #web-notifications-notification-icon {
   list-style-image: url(chrome://browser/skin/notification-16.png);
@@ -3623,6 +3645,17 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   }
 }
 
+.popup-notification-icon[popupid="webRTC-sharingMicrophone"],
+.popup-notification-icon[popupid="webRTC-shareMicrophone"] {
+  list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64.png);
+}
+@media (min-resolution: 2dppx) {
+  .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
+  .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
+    list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
+  }
+}
+
 /* Popup Buttons */
 #identity-popup-more-info-button {
   @hudButton@

browser/themes/osx/jar.mn

@@ -113,6 +113,12 @@ browser.jar:
   skin/classic/browser/webRTC-shareDevice-64@2x.png
   skin/classic/browser/webRTC-sharingDevice-16.png
   skin/classic/browser/webRTC-sharingDevice-16@2x.png
+  skin/classic/browser/webRTC-shareMicrophone-16.png
+  skin/classic/browser/webRTC-shareMicrophone-16@2x.png
+  skin/classic/browser/webRTC-shareMicrophone-64.png
+  skin/classic/browser/webRTC-shareMicrophone-64@2x.png
+  skin/classic/browser/webRTC-sharingMicrophone-16.png
+  skin/classic/browser/webRTC-sharingMicrophone-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/windows/browser.css

@@ -1982,6 +1982,11 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png);
 }
 
+.popup-notification-icon[popupid="webRTC-sharingMicrophone"],
+.popup-notification-icon[popupid="webRTC-shareMicrophone"] {
+  list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64.png);
+}
+
 .popup-notification-icon[popupid="pointerLock"] {
   list-style-image: url(chrome://browser/skin/pointerLock-64.png);
 }
@@ -2113,6 +2118,16 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png);
 }
 
+.webRTC-shareMicrophone-notification-icon,
+#webRTC-shareMicrophone-notification-icon {
+  list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png);
+}
+
+.webRTC-sharingMicrophone-notification-icon,
+#webRTC-sharingMicrophone-notification-icon {
+  list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png);
+}
+
 .web-notifications-notification-icon,
 #web-notifications-notification-icon {
   list-style-image: url(chrome://browser/skin/notification-16.png);

browser/themes/windows/jar.mn

@@ -86,6 +86,9 @@ browser.jar:
         skin/classic/browser/webRTC-shareDevice-16.png
         skin/classic/browser/webRTC-shareDevice-64.png
         skin/classic/browser/webRTC-sharingDevice-16.png
+        skin/classic/browser/webRTC-shareMicrophone-16.png
+        skin/classic/browser/webRTC-shareMicrophone-64.png
+        skin/classic/browser/webRTC-sharingMicrophone-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-titleBar-toggle.png  (customizableui/customize-titleBar-toggle.png)
@@ -404,6 +407,9 @@ browser.jar:
         skin/classic/aero/browser/webRTC-shareDevice-16.png
         skin/classic/aero/browser/webRTC-shareDevice-64.png
         skin/classic/aero/browser/webRTC-sharingDevice-16.png
+        skin/classic/aero/browser/webRTC-shareMicrophone-16.png
+        skin/classic/aero/browser/webRTC-shareMicrophone-64.png
+        skin/classic/aero/browser/webRTC-sharingMicrophone-16.png
         skin/classic/aero/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
         skin/classic/aero/browser/customizableui/customize-titleBar-toggle.png  (customizableui/customize-titleBar-toggle.png)
         skin/classic/aero/browser/customizableui/customizeFavicon.ico  (../shared/customizableui/customizeFavicon.ico)