Bug 1367565 - Make notification icons use context-fill. r=dao
authorJohann Hofmann <jhofmann@mozilla.com>
Thu, 01 Jun 2017 15:41:40 +0200
changeset 412555 344e2822903512e668d2790b709affbace6420fc
parent 412554 74b1f6dafa0a29f4d185b3b205eef813c8936a58
child 412556 2ad1181dadf36b84087e190bc53cb9adf57621d4
push id1490
push usermtabara@mozilla.com
push dateMon, 31 Jul 2017 14:08:16 +0000
treeherdermozilla-release@70e32e6bf15e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1367565
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1367565 - Make notification icons use context-fill. r=dao This applies the color rules for other icons in the identity block to the notification icons via context-fill. MozReview-Commit-ID: Cap7T41ogLn
browser/themes/shared/autocomplete.inc.css
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/identity-block/identity-block.inc.css
browser/themes/shared/jar.inc.mn
browser/themes/shared/notification-icons.inc.css
browser/themes/shared/notification-icons.svg
browser/themes/shared/tabs.inc.css
browser/themes/shared/webRTC-indicator.css
--- a/browser/themes/shared/autocomplete.inc.css
+++ b/browser/themes/shared/autocomplete.inc.css
@@ -26,20 +26,22 @@
   padding: 0;
 }
 
 
 /* Login form autocompletion */
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
   display: initial;
   list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
+  -moz-context-properties: fill;
+  fill: GrayText;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
+  fill: HighlightText;
 }
 
 
 /* Insecure field warning */
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
   background-color: var(--arrowpanel-dimmed);
   border-bottom: 1px solid var(--panel-separator-color);
   padding-bottom: 4px;
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -240,16 +240,18 @@ toolbar:-moz-lwtheme-darktext {
   color: inherit !important;
   border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
   box-shadow: none !important;
 }
 
 #identity-icon:-moz-lwtheme-brighttext,
 #tracking-protection-icon:-moz-lwtheme-brighttext,
 #connection-icon:-moz-lwtheme-brighttext,
+.notification-anchor-icon:-moz-lwtheme-brighttext,
+#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme-brighttext,
 #extension-icon:-moz-lwtheme-brighttext {
   fill: rgba(255,255,255,.7);
 }
 
 %ifndef MOZ_PHOTON_THEME
 #urlbar {
   border-inline-start: none !important;
   opacity: 1 !important;
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -378,16 +378,18 @@ description#identity-popup-content-verif
 }
 
 .identity-popup-permission-icon {
   width: 16px;
   height: 16px;
 }
 
 .identity-popup-permission-icon.in-use {
+  -moz-context-properties: fill;
+  fill: rgb(224, 41, 29);
   animation: 1.5s ease in-use-blink infinite;
 }
 
 @keyframes in-use-blink {
   50% { opacity: 0; }
 }
 
 .identity-popup-permission-label,
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -54,33 +54,39 @@
   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
   padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5.01px);
 }
 %endif
 
 #identity-icon,
 #tracking-protection-icon,
 #connection-icon,
+.notification-anchor-icon,
+#blocked-permissions-container > .blocked-permission-icon,
 #extension-icon {
   width: 16px;
   height: 16px;
+  margin-inline-start: 2px;
   -moz-context-properties: fill;
   fill: GrayText;
 }
 
 #identity-icon:-moz-lwtheme,
 #tracking-protection-icon:-moz-lwtheme,
 #connection-icon:-moz-lwtheme,
+.notification-anchor-icon:-moz-lwtheme,
+#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme,
 #extension-icon:-moz-lwtheme {
   fill: rgba(0,0,0,.6);
 }
 
 /* MAIN IDENTITY ICON */
 
 #identity-icon {
+  margin-inline-start: 0;
   list-style-image: url(chrome://browser/skin/identity-icon.svg);
 }
 
 #identity-box:hover > #identity-icon:not(.no-hover),
 #identity-box[open=true] > #identity-icon {
   list-style-image: url(chrome://browser/skin/identity-icon-hover.svg);
 }
 
@@ -111,16 +117,18 @@
 
 /* SHARING ICON */
 
 #sharing-icon {
   width: 16px;
   height: 16px;
   margin-inline-start: -16px;
   position: relative;
+  -moz-context-properties: fill;
+  fill: rgb(224, 41, 29);
   display: none;
 }
 
 #identity-box[sharing="camera"] > #sharing-icon {
   list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
 }
 
 #identity-box[sharing="microphone"] > #sharing-icon {
@@ -150,17 +158,16 @@
     opacity: 1;
   }
 }
 
 /* TRACKING PROTECTION ICON */
 
 #tracking-protection-icon {
   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
-  margin-inline-start: 2px;
   margin-inline-end: 0;
 }
 
 #tracking-protection-icon[state="loaded-tracking-content"] {
   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
 }
 
 #tracking-protection-icon[animate] {
@@ -179,17 +186,16 @@
 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
   visibility: collapse;
 }
 
 /* CONNECTION ICON, EXTENSION ICON */
 
 #connection-icon,
 #extension-icon {
-  margin-inline-start: 2px;
   visibility: collapse;
 }
 
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
   list-style-image: url(chrome://browser/skin/connection-secure.svg);
   visibility: visible;
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -61,17 +61,17 @@
   skin/classic/browser/connection-mixed-active-loaded.svg      (../shared/identity-block/connection-mixed-active-loaded.svg)
   skin/classic/browser/identity-icon.svg                       (../shared/identity-block/identity-icon.svg)
   skin/classic/browser/identity-icon-hover.svg                 (../shared/identity-block/identity-icon-hover.svg)
   skin/classic/browser/identity-icon-notice.svg                (../shared/identity-block/identity-icon-notice.svg)
   skin/classic/browser/identity-icon-notice-hover.svg          (../shared/identity-block/identity-icon-notice-hover.svg)
   skin/classic/browser/info.svg                                (../shared/info.svg)
 * skin/classic/browser/menuPanel.svg                           (../shared/menuPanel.svg)
 * skin/classic/browser/menuPanel-small.svg                     (../shared/menuPanel-small.svg)
-* skin/classic/browser/notification-icons.svg                  (../shared/notification-icons.svg)
+  skin/classic/browser/notification-icons.svg                  (../shared/notification-icons.svg)
   skin/classic/browser/tracking-protection-16.svg              (../shared/identity-block/tracking-protection-16.svg)
   skin/classic/browser/newtab/close.png                        (../shared/newtab/close.png)
   skin/classic/browser/newtab/controls.svg                     (../shared/newtab/controls.svg)
   skin/classic/browser/panel-icon-arrow-left.svg               (../shared/panel-icon-arrow-left.svg)
   skin/classic/browser/panel-icon-arrow-right.svg              (../shared/panel-icon-arrow-right.svg)
   skin/classic/browser/panel-icon-cancel.svg                   (../shared/panel-icon-cancel.svg)
 #ifndef XP_MACOSX
   skin/classic/browser/panel-icon-folder.svg                   (../shared/panel-icon-folder.svg)
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -1,41 +1,34 @@
 %if 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/. */
 %endif
 
+.popup-notification-icon,
+.identity-popup-permission-icon {
+  -moz-context-properties: fill;
+  fill: GrayText;
+}
+
 #notification-popup-box {
   padding: 5px 0px;
   margin: -5px 0px;
   margin-inline-end: -5px;
   padding-inline-end: 5px;
 }
 
-.notification-anchor-icon,
-#blocked-permissions-container > .blocked-permission-icon {
-  width: 16px;
-  height: 16px;
-  margin-inline-start: 2px;
-}
-
 /* This class can be used alone or in combination with the class defining the
    type of icon displayed. This rule must be defined before the others in order
    for its list-style-image to be overridden. */
 .notification-anchor-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
 }
 
-.notification-anchor-icon:not(.plugin-blocked):-moz-lwtheme,
-#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme {
-  filter: url(chrome://global/skin/filters.svg#fill);
-  fill: currentColor;
-}
-
 /* INDIVIDUAL NOTIFICATIONS */
 
 .focus-tab-by-prompt-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#focus-tab-by-prompt);
 }
 
 .popup-notification-icon[popupid="persistent-storage"],
 .persistent-storage-icon {
@@ -247,16 +240,17 @@ html|*#webRTC-previewVideo {
 /* PLUGINS */
 
 .plugin-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
 }
 
 .plugin-icon.plugin-blocked {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
+  fill: #d92215 !important;
 }
 
 #notification-popup-box[hidden] {
   /* Override display:none to make the pluginBlockedNotification animation work
      when showing the notification repeatedly. */
   display: -moz-box;
   visibility: collapse;
 }
--- a/browser/themes/shared/notification-icons.svg
+++ b/browser/themes/shared/notification-icons.svg
@@ -1,55 +1,26 @@
-<?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/. -->
-<svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
-     class="fieldtext"
+<svg fill="context-fill" xmlns="http://www.w3.org/2000/svg"
      width="32" height="32" viewBox="0 0 32 32">
-#include icon-colors.inc.svg
   <style>
     :root > use:not(:target),
     :root > g:not(:target),
     #strikeout {
       display: none;
     }
     .blocked:target ~ #strikeout {
       display: block;
     }
     .blocked {
       clip-path: url(#blocked-clipPath);
     }
 
-    #login-highlighted {
-      fill: HighlightText;
-      fill-opacity: 1;
-    }
-
-    #plugin-blocked,
-    #plugin-blocked:target ~ #strikeout {
-      fill: #d92215;
-      fill-opacity: 1;
-    }
-
-    #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;
-    }
-
     #update-icon {
       stroke: #fff;
       stroke-width: 3px;
       stroke-linecap: round;
     }
   </style>
 
   <defs>
@@ -82,46 +53,45 @@
       <rect fill="black" x="14" y="14" width="4" height="10" rx="2" ry="2"/>
     </mask>
   </defs>
 
   <g id="default-info">
     <circle cx="16" cy="16" r="14" mask="url(#i-mask)"/>
   </g>
 
-  <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="focus-tab-by-prompt" xlink:href="#focus-tab-by-prompt-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" />
-  <use id="geo-windows" xlink:href="#geo-windows-icon" />
-  <use id="geo-windows-blocked" class="blocked" xlink:href="#geo-windows-icon" />
-  <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="persistent-storage" xlink:href="#persistent-storage-icon" />
-  <use id="persistent-storage-blocked" class="blocked" xlink:href="#persistent-storage-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" />
-  <use id="update" xlink:href="#update-icon" />
+  <use id="camera" href="#camera-icon" />
+  <use id="camera-sharing" href="#camera-icon"/>
+  <use id="camera-indicator" href="#camera-icon" />
+  <use id="camera-blocked" class="blocked" href="#camera-icon" />
+  <use id="desktop-notification" href="#desktop-notification-icon" />
+  <use id="desktop-notification-blocked" class="blocked" href="#desktop-notification-icon" />
+  <use id="focus-tab-by-prompt" href="#focus-tab-by-prompt-icon" />
+  <use id="geo-osx" href="#geo-osx-icon" />
+  <use id="geo-osx-blocked" class="blocked" href="#geo-osx-icon" />
+  <use id="geo-linux" href="#geo-linux-icon" />
+  <use id="geo-linux-blocked" class="blocked" href="#geo-linux-icon" />
+  <use id="geo-linux-detailed" href="#geo-linux-detailed-icon" />
+  <use id="geo-windows" href="#geo-windows-icon" />
+  <use id="geo-windows-blocked" class="blocked" href="#geo-windows-icon" />
+  <use id="geo-windows-detailed" href="#geo-windows-detailed-icon" />
+  <use id="indexedDB" href="#indexedDB-icon" />
+  <use id="indexedDB-blocked" class="blocked" href="#indexedDB-icon" />
+  <use id="login" href="#login-icon" />
+  <use id="login-detailed" href="#login-detailed-icon" />
+  <use id="microphone" href="#microphone-icon" />
+  <use id="microphone-sharing" href="#microphone-icon"/>
+  <use id="microphone-indicator" href="#microphone-icon"/>
+  <use id="microphone-blocked" class="blocked" href="#microphone-icon" />
+  <use id="microphone-detailed" href="#microphone-detailed-icon" />
+  <use id="persistent-storage" href="#persistent-storage-icon" />
+  <use id="persistent-storage-blocked" class="blocked" href="#persistent-storage-icon" />
+  <use id="plugin" href="#plugin-icon" />
+  <use id="plugin-blocked" class="blocked" href="#plugin-icon" />
+  <use id="popup" href="#popup-icon" />
+  <use id="screen" href="#screen-icon" />
+  <use id="screen-sharing" href="#screen-icon"/>
+  <use id="screen-indicator" href="#screen-icon"/>
+  <use id="screen-blocked" class="blocked" href="#screen-icon" />
+  <use id="update" href="#update-icon" />
 
   <path id="strikeout" d="m 2,28 2,2 26,-26 -2,-2 z"/>
 </svg>
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -107,16 +107,18 @@
 .tab-icon-image[sharing]:not([selected]) {
   animation-delay: -1.5s;
 }
 
 .tab-sharing-icon-overlay {
   /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
   margin-inline-start: -22px;
   position: relative;
+  -moz-context-properties: fill;
+  fill: rgb(224, 41, 29);
 }
 
 .tab-sharing-icon-overlay[sharing="camera"] {
   list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
 }
 
 .tab-sharing-icon-overlay[sharing="microphone"] {
   list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
--- a/browser/themes/shared/webRTC-indicator.css
+++ b/browser/themes/shared/webRTC-indicator.css
@@ -10,16 +10,22 @@ window {
 #screenShareButton,
 #firefoxButton {
   height: 29px;
   margin: 0;
   -moz-appearance: none;
   border-style: none;
 }
 
+#audioVideoButton,
+#screenShareButton {
+  -moz-context-properties: fill;
+  fill: white;
+}
+
 #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;
 }