Bug 824825 - Add toolbar button and popup notification icons for tabs with camera / microphone access. r=dolske

browser/themes/gnomestripe/browser.css

@@ -649,7 +649,6 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   -moz-image-region: rect(0px 24px 24px 0px);
 }
 
-#webrtc-status-button /* temporary placeholder (bug 824825) */,
 #history-button {
   -moz-image-region: rect(0px 48px 24px 24px);
 }
@@ -731,6 +730,10 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   opacity: .3;
 }
 
+#webrtc-status-button {
+  -moz-image-region: rect(0px 192px 24px 168px);
+}
+
 /* 16px primary toolbar buttons */
 toolbar[iconsize="small"] .toolbarbutton-1:not([type="menu-button"]) {
   -moz-box-orient: vertical;
@@ -882,6 +885,10 @@ toolbar[iconsize="small"] #feed-button {
   -moz-image-region: rect(0px 112px 16px 96px);
 }
 
+toolbar[iconsize="small"] #webrtc-status-button {
+  -moz-image-region: rect(0px 128px 16px 112px);
+}
+
 /* Fullscreen window controls */
 #window-controls {
   -moz-box-align: start;
@@ -1291,11 +1298,14 @@ toolbar[iconsize="small"] #feed-button {
   }
 }
 
-#webRTC-sharingDevices-notification-icon,
 #webRTC-shareDevices-notification-icon {
   list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png);
 }
 
+#webRTC-sharingDevices-notification-icon {
+  list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png);
+}
+
 #treecolAutoCompleteImage {
   max-width : 36px;
 }

browser/themes/gnomestripe/jar.mn

@@ -46,6 +46,7 @@ browser.jar:
   skin/classic/browser/urlbar-arrow.png
   skin/classic/browser/webRTC-shareDevice-16.png
   skin/classic/browser/webRTC-shareDevice-64.png
+  skin/classic/browser/webRTC-sharingDevice-16.png
   skin/classic/browser/downloads/buttons.png          (downloads/buttons.png)
   skin/classic/browser/downloads/download-glow.png    (downloads/download-glow.png)
   skin/classic/browser/downloads/download-glow-small.png (downloads/download-glow-small.png)

browser/themes/pinstripe/browser.css

@@ -860,7 +860,6 @@ toolbar[mode="icons"] #forward-button:-moz-lwtheme {
 
 /* history sidebar button */
 
-#webrtc-status-button /* temporary placeholder (bug 824825) */,
 #history-button {
   -moz-image-region: rect(0, 160px, 20px, 140px);
 }
@@ -1099,6 +1098,18 @@ toolbar[mode="icons"] #zoom-in-button {
   }
 }
 
+/* webRTC indicator button */
+
+#webrtc-status-button {
+  -moz-image-region: rect(0, 480px, 20px, 460px);
+}
+
+@media (min-resolution: 2dppx) {
+  #webrtc-status-button {
+    -moz-image-region: rect(0, 960px, 40px, 920px);
+  }
+}
+
 
 /* ----- FULLSCREEN WINDOW CONTROLS ----- */
 
@@ -3075,17 +3086,24 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   }
 }
 
-#webRTC-sharingDevices-notification-icon,
 #webRTC-shareDevices-notification-icon {
   list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png);
 }
 @media (min-resolution: 2dppx) {
-  #webRTC-sharingDevices-notification-icon,
   #webRTC-shareDevices-notification-icon {
     list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
   }
 }
 
+#webRTC-sharingDevices-notification-icon {
+  list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png);
+}
+@media (min-resolution: 2dppx) {
+  #webRTC-sharingDevices-notification-icon {
+    list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
+  }
+}
+
 .popup-notification-icon {
   width: 64px;
   height: 64px;

browser/themes/pinstripe/jar.mn

@@ -72,6 +72,8 @@ browser.jar:
   skin/classic/browser/webRTC-shareDevice-16@2x.png
   skin/classic/browser/webRTC-shareDevice-64.png
   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/downloads/buttons.png                (downloads/buttons.png)
   skin/classic/browser/downloads/buttons@2x.png             (downloads/buttons@2x.png)
   skin/classic/browser/downloads/download-glow.png          (downloads/download-glow.png)

browser/themes/winstripe/browser.css

@@ -944,20 +944,14 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
 }
 
-/* stop button */
-
 #stop-button {
   -moz-image-region: rect(0, 54px, 18px, 36px);
 }
 
-/* reload button */
-
 #reload-button {
   -moz-image-region: rect(0, 72px, 18px, 54px);
 }
 
-/* home button */
-
 #home-button.bookmark-item {
   list-style-image: url("chrome://browser/skin/Toolbar.png");
 }
@@ -968,7 +962,78 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   -moz-image-region: rect(0, 90px, 18px, 72px);
 }
 
-/* tabview button */
+#downloads-button {
+  -moz-image-region: rect(0, 108px, 18px, 90px);
+}
+
+#history-button {
+  -moz-image-region: rect(0, 126px, 18px, 108px);
+}
+
+#bookmarks-button,
+#bookmarks-menu-button {
+  -moz-image-region: rect(0, 144px, 18px, 126px);
+}
+#bookmarks-menu-button.bookmark-item {
+  list-style-image: url("chrome://browser/skin/Toolbar.png");
+}
+#bookmarks-menu-button.bookmark-item:-moz-lwtheme-brighttext {
+  list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
+}
+
+#print-button {
+  -moz-image-region: rect(0, 162px, 18px, 144px);
+}
+
+#new-tab-button {
+  -moz-image-region: rect(0, 180px, 18px, 162px);
+}
+
+#new-window-button {
+  -moz-image-region: rect(0, 198px, 18px, 180px);
+}
+
+#cut-button {
+  -moz-image-region: rect(0, 216px, 18px, 198px);
+}
+
+#copy-button {
+  -moz-image-region: rect(0, 234px, 18px, 216px);
+}
+
+#paste-button {
+  -moz-image-region: rect(0, 252px, 18px, 234px);
+}
+
+#fullscreen-button {
+  -moz-image-region: rect(0, 270px, 18px, 252px);
+}
+
+#zoom-out-button {
+  -moz-image-region: rect(0, 288px, 18px, 270px);
+}
+
+#zoom-in-button {
+  -moz-image-region: rect(0, 306px, 18px, 288px);
+}
+
+#sync-button {
+  -moz-image-region: rect(0, 324px, 18px, 306px);
+}
+#sync-button[status="active"] {
+  list-style-image: url("chrome://browser/skin/sync-throbber.png");
+  -moz-image-region: rect(0, 18px, 18px, 0);
+}
+
+#feed-button {
+  -moz-image-region: rect(0, 342px, 18px, 324px);
+}
+
+#webrtc-status-button {
+  -moz-image-region: rect(0, 360px, 18px, 342px);
+}
+
+/* tabview button & menu item */
 
 #tabview-button,
 #menu_tabview {
@@ -1023,103 +1088,6 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   -moz-image-region: rect(1px, 71px, 17px, 55px);
 }
 
-/* download manager button */
-
-#downloads-button {
-  -moz-image-region: rect(0, 108px, 18px, 90px);
-}
-
-/* history sidebar button */
-
-#webrtc-status-button /* temporary placeholder (bug 824825) */,
-#history-button {
-  -moz-image-region: rect(0, 126px, 18px, 108px);
-}
-
-/* bookmark sidebar & menu buttons */
-
-#bookmarks-button,
-#bookmarks-menu-button {
-  -moz-image-region: rect(0, 144px, 18px, 126px);
-}
-
-#bookmarks-menu-button.bookmark-item {
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
-}
-
-#bookmarks-menu-button.bookmark-item:-moz-lwtheme-brighttext {
-  list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
-}
-
-/* print button */
-
-#print-button {
-  -moz-image-region: rect(0, 162px, 18px, 144px);
-}
-
-/* toolbar new tab button */
-
-#new-tab-button {
-  -moz-image-region: rect(0, 180px, 18px, 162px);
-}
-
-/* new window button */
-
-#new-window-button {
-  -moz-image-region: rect(0, 198px, 18px, 180px);
-}
-
-/* cut button */
-
-#cut-button {
-  -moz-image-region: rect(0, 216px, 18px, 198px);
-}
-
-/* copy button */
-
-#copy-button {
-  -moz-image-region: rect(0, 234px, 18px, 216px);
-}
-
-/* paste button */
-
-#paste-button {
-  -moz-image-region: rect(0, 252px, 18px, 234px);
-}
-
-/* fullscreen button */
-
-#fullscreen-button {
-  -moz-image-region: rect(0, 270px, 18px, 252px);
-}
-
-/* zoom controls */
-
-#zoom-out-button {
-  -moz-image-region: rect(0, 288px, 18px, 270px);
-}
-
-#zoom-in-button {
-  -moz-image-region: rect(0, 306px, 18px, 288px);
-}
-
-/* sync button */
-
-#sync-button {
-  -moz-image-region: rect(0, 324px, 18px, 306px);
-}
-
-#sync-button[status="active"] {
-  list-style-image: url("chrome://browser/skin/sync-throbber.png");
-  -moz-image-region: rect(0, 18px, 18px, 0);
-}
-
-/* feed button */
-
-#feed-button {
-  -moz-image-region: rect(0, 342px, 18px, 324px);
-}
-
 /* ::::: fullscreen window controls ::::: */
 
 #window-controls {
@@ -2419,11 +2387,14 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   }
 }
 
-#webRTC-sharingDevices-notification-icon,
 #webRTC-shareDevices-notification-icon {
   list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png);
 }
 
+#webRTC-sharingDevices-notification-icon {
+  list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png);
+}
+
 #identity-popup-container {
   min-width: 280px;
 }

browser/themes/winstripe/jar.mn

@@ -63,6 +63,7 @@ browser.jar:
         skin/classic/browser/webapps-64.png
         skin/classic/browser/webRTC-shareDevice-16.png
         skin/classic/browser/webRTC-shareDevice-64.png
+        skin/classic/browser/webRTC-sharingDevice-16.png
         skin/classic/browser/downloads/buttons.png                   (downloads/buttons.png)
         skin/classic/browser/downloads/download-glow.png             (downloads/download-glow.png)
         skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png)
@@ -287,6 +288,7 @@ browser.jar:
         skin/classic/aero/browser/webapps-64.png
         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/downloads/buttons.png              (downloads/buttons-aero.png)
         skin/classic/aero/browser/downloads/download-glow.png        (downloads/download-glow.png)
         skin/classic/aero/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png)