Bug 1345716 - Make default notification anchor icon be part of notification-icons.svg. r=johannh a=gchang
authorDão Gottwald <dao@mozilla.com>
Mon, 13 Mar 2017 16:14:50 +0100
changeset 379177 60a2d0da9096a1132f267d68c47a1facd2ae19a8
parent 379176 208797caef2fda1028fdd12169273a7eb3e34f15
child 379178 6d07776e1a239872087b28b6710d78597309946b
push id1419
push userjlund@mozilla.com
push dateMon, 10 Apr 2017 20:44:07 +0000
treeherdermozilla-release@5e6801b73ef6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh, gchang
bugs1345716
milestone53.0
Bug 1345716 - Make default notification anchor icon be part of notification-icons.svg. r=johannh a=gchang MozReview-Commit-ID: FzYBHvYQlDN
browser/themes/shared/notification-icons.inc.css
browser/themes/shared/notification-icons.svg
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -17,31 +17,17 @@
   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 {
-%ifdef MOZ_WIDGET_GTK
-  list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16);
-%else
-  list-style-image: url(chrome://global/skin/icons/information-16.png);
-%endif
-}
-
-@media (min-resolution: 1.1dppx) {
-  .notification-anchor-icon {
-%ifdef MOZ_WIDGET_GTK
-    list-style-image: url(moz-icon://stock/gtk-dialog-info?size=dialog);
-%else
-    list-style-image: url(chrome://global/skin/icons/information-32.png);
-%endif
-  }
+  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;
 }
 
--- a/browser/themes/shared/notification-icons.svg
+++ b/browser/themes/shared/notification-icons.svg
@@ -3,27 +3,26 @@
    - 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"
      width="32" height="32" viewBox="0 0 32 32">
 #include icon-colors.inc.svg
   <style>
-    use:not(:target) {
-      display: none;
-    }
+    :root > use:not(:target),
+    :root > g:not(:target),
     #strikeout {
       display: none;
     }
     .blocked:target ~ #strikeout {
       display: block;
     }
     .blocked {
-      clip-path: url(#clip);
+      clip-path: url(#blocked-clipPath);
     }
 
     #login-highlighted {
       fill: HighlightText;
       fill-opacity: 1;
     }
 
     #plugin-blocked,
@@ -59,21 +58,31 @@
     <path id="login-icon" d="m 2,26 0,4 6,0 0,-2 2,0 0,-2 1,0 0,-1 2,0 0,-3 2,0 2.5,-2.5 1.5,1.5 3,-3 a 8,8 0 1 0 -8,-8 l -3,3 2,2 z m 20,-18.1 a 2,2 0 1 1 0,0.2 z" />
     <path id="login-detailed-icon" d="m 1,27 0,3.5 a 0.5,0.5 0 0 0 0.5,0.5 l 5,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1.5 1.5,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1.5 1,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1 1,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-2 2,0 2.5,-2.5 q 0.5,-0.5 1,0 l 1,1 c 0.5,0.5 1,0.5 1.5,-0.5 l 1,-2 a 9,9 0 1 0 -8,-8 l -2,1 c -1,0.5 -1,1 -0.5,1.5 l 1.5,1.5 q 0.5,0.5 0,1 z m 21,-19.1 a 2,2 0 1 1 0,0.2 z" />
     <path id="microphone-icon" d="m 8,14 0,4 a 8,8 0 0 0 6,7.7 l 0,2.3 -2,0 a 2,2 0 0 0 -2,2 l 12,0 a 2,2 0 0 0 -2,-2 l -2,0 0,-2.3 a 8,8 0 0 0 6,-7.7 l 0,-4 -2,0 0,4 a 6,6 0 0 1 -12,0 l 0,-4 z m 4,4 a 4,4 0 0 0 8,0 l 0,-12 a 4,4 0 0 0 -8,0 z" />
     <path id="microphone-detailed-icon" d="m 8,18 a 8,8 0 0 0 6,7.7 l 0,2.3 -1,0 a 3,2 0 0 0 -3,2 l 12,0 a 3,2 0 0 0 -3,-2 l -1,0 0,-2.3 a 8,8 0 0 0 6,-7.7 l 0,-4 a 1,1 0 0 0 -2,0 l 0,4 a 6,6 0 0 1 -12,0 l 0,-4 a 1,1 0 0 0 -2,0 z m 4,0 a 4,4 0 0 0 8,0 l 0,-12 a 4,4 0 0 0 -8,0 z" />
     <path id="plugin-icon" d="m 2,26 a 2,2 0 0 0 2,2 l 24,0 a 2,2 0 0 0 2,-2 l 0,-16 a 2,2 0 0 0 -2,-2 l -24,0 a 2,2 0 0 0 -2,2 z m 2,-20 10,0 0,-2 a 2,2 0 0 0 -2,-2 l -6,0 a 2,2 0 0 0 -2,2 z m 14,0 10,0 0,-2 a 2,2 0 0 0 -2,-2 l -6,0 a 2,2 0 0 0 -2,2 z" />
     <path id="popup-icon" d="m 2,24 a 4,4 0 0 0 4,4 l 8,0 a 10,10 0 0 1 -2,-4 l -4,0 a 2,2 0 0 1 -2,-2 l 0,-12 18,0 0,2 a 10,10 0 0 1 4,2 l 0,-8 a 4,4 0 0 0 -4,-4 l -18,0 a 4,4 0 0 0 -4,4 z m 12,-2.1 a 8,8 0 1 1 0,0.2 m 10.7,-4.3 a 5,5 0 0 0 -6.9,6.9 z m -5.4,8.4 a 5,5 0 0 0 6.9,-6.9 z" />
     <path id="screen-icon" d="m 2,18 a 2,2 0 0 0 2,2 l 2,0 0,-6 a 4,4 0 0 1 4,-4 l 14,0 0,-6 a 2,2 0 0 0 -2,-2 l -18,0 a 2,2 0 0 0 -2,2 z m 6,10 a 2,2 0 0 0 2,2 l 18,0 a 2,2 0 0 0 2,-2 l 0,-14 a 2,2 0 0 0 -2,-2 l -18,0 a 2,2 0 0 0 -2,2 z" />
 
-    <clipPath id="clip">
+    <clipPath id="blocked-clipPath">
       <path d="m 0,0 0,31 31,-31 z m 6,32 26,0 0,-26 z"/>
     </clipPath>
+
+    <mask id="i-mask" style="fill-opacity: 1;">
+      <rect fill="white" width="32" height="32"/>
+      <circle fill="black" cx="16" cy="9" r="2.5"/>
+      <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="geo-osx" xlink:href="#geo-osx-icon" />
   <use id="geo-osx-blocked" class="blocked" xlink:href="#geo-osx-icon" />