Bug 1279533 - Use SVG sharing icons on Linux and Windows. r=florian
authorSteve Jarvis <sajarvis@bu.edu>
Fri, 25 Nov 2016 09:06:06 -0700
changeset 324651 7636e8dc84d63a73436a9f7c5142a2db9c9e06da
parent 324650 4d13fd025112b2e9da6433815bc2fc2abe0f883c
child 324652 d03852230a32f2eaba331655823c3c814bdac179
push id24
push usermaklebus@msu.edu
push dateTue, 20 Dec 2016 03:11:33 +0000
reviewersflorian
bugs1279533
milestone53.0a1
Bug 1279533 - Use SVG sharing icons on Linux and Windows. r=florian
browser/themes/linux/jar.mn
browser/themes/linux/webRTC-indicator.css
browser/themes/shared/jar.inc.mn
browser/themes/shared/notification-icons.svg
browser/themes/shared/webRTC-indicator.css
browser/themes/shared/webrtc/camera-white-16.png
browser/themes/shared/webrtc/camera-white-16@2x.png
browser/themes/shared/webrtc/microphone-white-16.png
browser/themes/shared/webrtc/microphone-white-16@2x.png
browser/themes/shared/webrtc/screen-white-16.png
browser/themes/shared/webrtc/screen-white-16@2x.png
browser/themes/windows/jar.mn
browser/themes/windows/webRTC-indicator.css
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -35,17 +35,17 @@ browser.jar:
   skin/classic/browser/Security-broken.png
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/slowStartup-16.png
   skin/classic/browser/Toolbar.png
   skin/classic/browser/Toolbar@2x.png
   skin/classic/browser/Toolbar-inverted.png
   skin/classic/browser/Toolbar-inverted@2x.png
   skin/classic/browser/Toolbar-small.png
-  skin/classic/browser/webRTC-indicator.css
+  skin/classic/browser/webRTC-indicator.css  (../shared/webRTC-indicator.css)
 * skin/classic/browser/controlcenter/panel.css        (controlcenter/panel.css)
   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)
   skin/classic/browser/customizableui/customizeMode-separatorVertical.png  (customizableui/customizeMode-separatorVertical.png)
 * skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsViewOverlay.css   (downloads/allDownloadsViewOverlay.css)
   skin/classic/browser/downloads/download-glow-menuPanel.png (downloads/download-glow-menuPanel.png)
deleted file mode 100644
--- a/browser/themes/linux/webRTC-indicator.css
+++ /dev/null
@@ -1,116 +0,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/. */
-
-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;
-}
-
-:-moz-any(#audioVideoButton, #screenShareButton,
-          #firefoxButton):-moz-focusring > .button-box {
-  border: none;
-}
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -126,19 +126,16 @@
   skin/classic/browser/session-restore.svg                     (../shared/incontent-icons/session-restore.svg)
   skin/classic/browser/tab-crashed.svg                         (../shared/incontent-icons/tab-crashed.svg)
   skin/classic/browser/favicon-search-16.svg                   (../shared/favicon-search-16.svg)
   skin/classic/browser/icon-search-64.svg                      (../shared/incontent-icons/icon-search-64.svg)
   skin/classic/browser/welcome-back.svg                        (../shared/incontent-icons/welcome-back.svg)
   skin/classic/browser/reader-tour.png                         (../shared/reader/reader-tour.png)
   skin/classic/browser/reader-tour@2x.png                      (../shared/reader/reader-tour@2x.png)
   skin/classic/browser/readerMode.svg                          (../shared/reader/readerMode.svg)
-  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/panic-panel/header.png                  (../shared/panic-panel/header.png)
   skin/classic/browser/panic-panel/header@2x.png               (../shared/panic-panel/header@2x.png)
   skin/classic/browser/panic-panel/header-small.png            (../shared/panic-panel/header-small.png)
   skin/classic/browser/panic-panel/header-small@2x.png         (../shared/panic-panel/header-small@2x.png)
   skin/classic/browser/panic-panel/icons.png                   (../shared/panic-panel/icons.png)
   skin/classic/browser/panic-panel/icons@2x.png                (../shared/panic-panel/icons@2x.png)
   skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css)
   skin/classic/browser/privatebrowsing/check.svg               (../shared/privatebrowsing/check.svg)
--- a/browser/themes/shared/notification-icons.svg
+++ b/browser/themes/shared/notification-icons.svg
@@ -33,16 +33,23 @@
     }
 
     #camera-sharing,
     #microphone-sharing,
     #screen-sharing {
       fill: rgb(224, 41, 29);
       fill-opacity: 1;
     }
+
+    #camera-indicator,
+    #microphone-indicator,
+    #screen-indicator {
+      fill: white;
+      fill-opacity: 1;
+    }
   </style>
 
   <defs>
     <path id="camera-icon" d="m 2,23 a 3,3 0 0 0 3,3 l 14,0 a 3,3 0 0 0 3,-3 l 0,-4 6,5.5 c 0.5,0.5 1,0.7 2,0.5 l 0,-18 c -1,-0.2 -1.5,0 -2,0.5 l -6,5.5 0,-4 a 3,3 0 0 0 -3,-3 l -14,0 a 3,3 0 0 0 -3,3 z" />
     <path id="desktop-notification-icon" d="m 2,20 a 4,4 0 0 0 4,4 l 13,0 7,7 0,-7 a 4,4 0 0 0 4,-4 l 0,-12 a 4,4 0 0 0 -4,-4 l -20,0 a 4,4 0 0 0 -4,4 z m 5,-2 a 1,1 0 1 1 0,-2 l 10,0 a 1,1 0 1 1 0,2 z m 0,-4 a 1,1 0 1 1 0,-2 l 14,0 a 1,1 0 1 1 0,2 z m 0,-4 a 1,1 0 1 1 0,-2 l 18,0 a 1,1 0 1 1 0,2 z" />
     <path id="geo-linux-icon" d="m 2,15.9 a 14,14 0 1 1 0,0.2 z m 4,2.1 a 10,10 0 0 0 8,8 l 0,-4 4,0 0,4 a 10,10 0 0 0 8,-8 l -4,0 0,-4 4,0 a 10,10 0 0 0 -8,-8 l 0,4 -4,0 0,-4 a 10,10 0 0 0 -8,8 l 4,0 0,4 z" />
     <path id="geo-linux-detailed-icon" d="m 2,15.9 a 14,14 0 1 1 0,0.2 z m 3,2.1 a 11,11 0 0 0 9,9 l 1,-5 2,0 1,5 a 11,11 0 0 0 9,-9 l -5,-1 0,-2 5,-1 a 11,11 0 0 0 -9,-9 l -1,5 -2,0 -1,-5 a 11,11 0 0 0 -9,9 l 5,1 0,2 z" />
     <path id="geo-osx-icon" d="m 0,16 16,0 0,16 12,-28 z" />
@@ -59,16 +66,17 @@
 
     <clipPath id="clip">
       <path d="m 0,0 0,31 31,-31 z m 6,32 26,0 0,-26 z"/>
     </clipPath>
   </defs>
 
   <use id="camera" xlink:href="#camera-icon" />
   <use id="camera-sharing" xlink:href="#camera-icon"/>
+  <use id="camera-indicator" xlink:href="#camera-icon" />
   <use id="camera-blocked" class="blocked" xlink:href="#camera-icon" />
   <use id="desktop-notification" xlink:href="#desktop-notification-icon" />
   <use id="desktop-notification-blocked" class="blocked" xlink:href="#desktop-notification-icon" />
   <use id="geo-osx" xlink:href="#geo-osx-icon" />
   <use id="geo-osx-blocked" class="blocked" xlink:href="#geo-osx-icon" />
   <use id="geo-linux" xlink:href="#geo-linux-icon" />
   <use id="geo-linux-blocked" class="blocked" xlink:href="#geo-linux-icon" />
   <use id="geo-linux-detailed" xlink:href="#geo-linux-detailed-icon" />
@@ -77,19 +85,21 @@
   <use id="geo-windows-detailed" xlink:href="#geo-windows-detailed-icon" />
   <use id="indexedDB" xlink:href="#indexedDB-icon" />
   <use id="indexedDB-blocked" class="blocked" xlink:href="#indexedDB-icon" />
   <use id="login" xlink:href="#login-icon" />
   <use id="login-highlighted" class="highlighted" xlink:href="#login-icon" />
   <use id="login-detailed" xlink:href="#login-detailed-icon" />
   <use id="microphone" xlink:href="#microphone-icon" />
   <use id="microphone-sharing" xlink:href="#microphone-icon"/>
+  <use id="microphone-indicator" xlink:href="#microphone-icon"/>
   <use id="microphone-blocked" class="blocked" xlink:href="#microphone-icon" />
   <use id="microphone-detailed" xlink:href="#microphone-detailed-icon" />
   <use id="plugin" xlink:href="#plugin-icon" />
   <use id="plugin-blocked" class="blocked" xlink:href="#plugin-icon" />
   <use id="popup" xlink:href="#popup-icon" />
   <use id="screen" xlink:href="#screen-icon" />
   <use id="screen-sharing" xlink:href="#screen-icon"/>
+  <use id="screen-indicator" xlink:href="#screen-icon"/>
   <use id="screen-blocked" class="blocked" xlink:href="#screen-icon" />
 
   <path id="strikeout" d="m 2,28 2,2 26,-26 -2,-2 z"/>
 </svg>
rename from browser/themes/windows/webRTC-indicator.css
rename to browser/themes/shared/webRTC-indicator.css
--- a/browser/themes/windows/webRTC-indicator.css
+++ b/browser/themes/shared/webRTC-indicator.css
@@ -24,17 +24,17 @@ window {
   background-color: white;
 }
 
 #firefoxButton:hover {
   background-color: #f2f2f2;
 }
 
 #screenShareButton {
-  background-image: url("webRTC-screen-white-16.png");
+  background-image: url("chrome://browser/skin/notification-icons.svg#screen-indicator");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 16px;
   min-width: 27px;
   display: none;
 }
 
 window[sharingscreen] > #screenShareButton {
@@ -56,27 +56,27 @@ 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");
+  background-image: url("chrome://browser/skin/notification-icons.svg#camera-indicator");
 }
 
 window[sharingaudio] > #audioVideoButton {
-  background-image: url("webRTC-microphone-white-16.png");
+  background-image: url("chrome://browser/skin/notification-icons.svg#microphone-indicator");
 }
 
 /* Multi-icon button: */
 window[sharingaudio][sharingvideo] > #audioVideoButton {
-  background-image: url("webRTC-camera-white-16.png"),
-                    url("webRTC-microphone-white-16.png");
+  background-image: url("chrome://browser/skin/notification-icons.svg#camera-indicator"),
+                    url("chrome://browser/skin/notification-icons.svg#microphone-indicator");
   background-position: 6px center, 26px center;
   background-size: 16px, 16px;
   min-width: 46px;
 }
 
 /* Hover styles */
 #audioVideoButton,
 #screenShareButton {
deleted file mode 100644
index e1e360bd8f90c231e20c76eec76e55180cf11002..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index ddbbf50836def0eea44beb0cab980df9b1b0a81d..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 0091529ba6f192b0b0a320701d1e2901bafa2291..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 5bf1f5c62a2cd074341695c56cd238b6fe886112..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 045bfd35a74f585f6042f6bd9a3dfd99a7cf7100..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 1e5fca5d6722805797cda85d46711a4a34fd6b73..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -61,17 +61,17 @@ browser.jar:
   skin/classic/browser/Toolbar-XP.png
   skin/classic/browser/toolbarbutton-dropdown-arrow-XPVista7.png
   skin/classic/browser/toolbarbutton-dropdown-arrow-inverted.png
   skin/classic/browser/urlbar-popup-blocked.png
   skin/classic/browser/urlbar-history-dropmarker.png
   skin/classic/browser/urlbar-history-dropmarker@2x.png
   skin/classic/browser/urlbar-history-dropmarker-XPVista7.png
   skin/classic/browser/urlbar-history-dropmarker-XPVista7@2x.png
-  skin/classic/browser/webRTC-indicator.css
+  skin/classic/browser/webRTC-indicator.css  (../shared/webRTC-indicator.css)
 * skin/classic/browser/controlcenter/panel.css                 (controlcenter/panel.css)
   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)
   skin/classic/browser/customizableui/customizeMode-gridTexture.png  (customizableui/customizeMode-gridTexture.png)
   skin/classic/browser/customizableui/customizeMode-separatorHorizontal.png  (customizableui/customizeMode-separatorHorizontal.png)
   skin/classic/browser/customizableui/customizeMode-separatorVertical.png  (customizableui/customizeMode-separatorVertical.png)
   skin/classic/browser/customizableui/menu-arrow.svg           (customizableui/menu-arrow.svg)