Bug 1371230 - Split notification-icons.svg into separate files. r=dao

MozReview-Commit-ID: A25uvGFl1rV
2024-10-25 11:15:34 +00:00 · 2017-07-27 10:34:18 -07:00 · 2017-07-27 10:34:18 -07:00 · c250372b99
commit c250372b99
parent f6ea01b2bd
50 changed files with 363 additions and 153 deletions
--- a/browser/themes/shared/autocomplete.inc.css
+++ b/browser/themes/shared/autocomplete.inc.css
@ -30,7 +30,7 @@
 /* Login form autocompletion */
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
  display: initial;
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
+  list-style-image: url(chrome://browser/skin/notification-icons/login.svg);
  -moz-context-properties: fill;
  fill: GrayText;
 }
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@ -126,15 +126,15 @@
 }

 #identity-box[sharing="camera"] > #sharing-icon {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
+  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
 }

 #identity-box[sharing="microphone"] > #sharing-icon {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
+  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
 }

 #identity-box[sharing="screen"] > #sharing-icon {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
+  list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
 }

 #identity-box[sharing] > #sharing-icon {
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@ -59,7 +59,38 @@
  skin/classic/browser/identity-icon-notice.svg                (../shared/identity-block/identity-icon-notice.svg)
  skin/classic/browser/info.svg                                (../shared/info.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/camera-blocked.svg                (../shared/notification-icons/camera-blocked.svg)
+* skin/classic/browser/notification-icons/camera.svg                        (../shared/notification-icons/camera.svg)
+  skin/classic/browser/notification-icons/default-info.svg                  (../shared/notification-icons/default-info.svg)
+* skin/classic/browser/notification-icons/desktop-notification-blocked.svg  (../shared/notification-icons/desktop-notification-blocked.svg)
+* skin/classic/browser/notification-icons/desktop-notification.svg          (../shared/notification-icons/desktop-notification.svg)
+  skin/classic/browser/notification-icons/focus-tab-by-prompt.svg           (../shared/notification-icons/focus-tab-by-prompt.svg)
+* skin/classic/browser/notification-icons/geo-linux-blocked.svg             (../shared/notification-icons/geo-linux-blocked.svg)
+  skin/classic/browser/notification-icons/geo-linux-detailed.svg            (../shared/notification-icons/geo-linux-detailed.svg)
+* skin/classic/browser/notification-icons/geo-linux.svg                     (../shared/notification-icons/geo-linux.svg)
+* skin/classic/browser/notification-icons/geo-osx-blocked.svg               (../shared/notification-icons/geo-osx-blocked.svg)
+* skin/classic/browser/notification-icons/geo-osx.svg                       (../shared/notification-icons/geo-osx.svg)
+* skin/classic/browser/notification-icons/geo-windows-blocked.svg           (../shared/notification-icons/geo-windows-blocked.svg)
+  skin/classic/browser/notification-icons/geo-windows-detailed.svg          (../shared/notification-icons/geo-windows-detailed.svg)
+* skin/classic/browser/notification-icons/geo-windows.svg                   (../shared/notification-icons/geo-windows.svg)
+* skin/classic/browser/notification-icons/indexedDB-blocked.svg             (../shared/notification-icons/indexedDB-blocked.svg)
+* skin/classic/browser/notification-icons/indexedDB.svg                     (../shared/notification-icons/indexedDB.svg)
+  skin/classic/browser/notification-icons/login-detailed.svg                (../shared/notification-icons/login-detailed.svg)
+  skin/classic/browser/notification-icons/login.svg                         (../shared/notification-icons/login.svg)
+* skin/classic/browser/notification-icons/microphone-blocked.svg            (../shared/notification-icons/microphone-blocked.svg)
+  skin/classic/browser/notification-icons/microphone-detailed.svg           (../shared/notification-icons/microphone-detailed.svg)
+* skin/classic/browser/notification-icons/microphone.svg                    (../shared/notification-icons/microphone.svg)
+* skin/classic/browser/notification-icons/persistent-storage-blocked.svg    (../shared/notification-icons/persistent-storage-blocked.svg)
+* skin/classic/browser/notification-icons/persistent-storage.svg            (../shared/notification-icons/persistent-storage.svg)
+  skin/classic/browser/notification-icons/plugin-badge.svg                  (../shared/notification-icons/plugin-badge.svg)
+* skin/classic/browser/notification-icons/plugin-blocked.svg                (../shared/notification-icons/plugin-blocked.svg)
+* skin/classic/browser/notification-icons/plugin.svg                        (../shared/notification-icons/plugin.svg)
+  skin/classic/browser/notification-icons/popup.svg                         (../shared/notification-icons/popup.svg)
+* skin/classic/browser/notification-icons/screen-blocked.svg                (../shared/notification-icons/screen-blocked.svg)
+* skin/classic/browser/notification-icons/screen.svg                        (../shared/notification-icons/screen.svg)
+  skin/classic/browser/notification-icons/update.svg                        (../shared/notification-icons/update.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)
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@ -21,118 +21,118 @@
   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);
+  list-style-image: url(chrome://browser/skin/notification-icons/default-info.svg);
 }

 /* INDIVIDUAL NOTIFICATIONS */

 .focus-tab-by-prompt-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#focus-tab-by-prompt);
+  list-style-image: url(chrome://browser/skin/notification-icons/focus-tab-by-prompt.svg);
 }

 .popup-notification-icon[popupid="persistent-storage"],
 .persistent-storage-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage);
+  list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg);
 }

 .persistent-storage-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage-blocked);
+  list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage-blocked.svg);
 }

 .popup-notification-icon[popupid="web-notifications"],
 .desktop-notification-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
+  list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg);
 }

 .desktop-notification-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
+  list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification-blocked.svg);
 }

 .geo-icon {
 %ifdef XP_MACOSX
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-osx);
+  list-style-image: url(chrome://browser/skin/notification-icons/geo-osx.svg);
 %elif defined(MOZ_WIDGET_GTK)
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux);
+  list-style-image: url(chrome://browser/skin/notification-icons/geo-linux.svg);
 %else
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
+  list-style-image: url(chrome://browser/skin/notification-icons/geo-windows.svg);
 %endif
 }

 .geo-icon.blocked-permission-icon {
 %ifdef XP_MACOSX
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-osx-blocked);
+  list-style-image: url(chrome://browser/skin/notification-icons/geo-osx-blocked.svg);
 %elif defined(MOZ_WIDGET_GTK)
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-blocked);
+  list-style-image: url(chrome://browser/skin/notification-icons/geo-linux-blocked.svg);
 %else
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
+  list-style-image: url(chrome://browser/skin/notification-icons/geo-windows-blocked.svg);
 %endif
 }

 .popup-notification-icon[popupid="geolocation"] {
 %ifdef XP_MACOSX
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-osx);
+  list-style-image: url(chrome://browser/skin/notification-icons/geo-osx.svg);
 %elif defined(MOZ_WIDGET_GTK)
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-detailed);
+  list-style-image: url(chrome://browser/skin/notification-icons/geo-linux-detailed.svg);
 %else
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
+  list-style-image: url(chrome://browser/skin/notification-icons/geo-windows-detailed.svg);
 %endif
 }

 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
 .indexedDB-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
+  list-style-image: url(chrome://browser/skin/notification-icons/indexedDB.svg);
 }

 .indexedDB-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
+  list-style-image: url(chrome://browser/skin/notification-icons/indexedDB-blocked.svg);
 }

 .login-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
+  list-style-image: url(chrome://browser/skin/notification-icons/login.svg);
 }

 .popup-notification-icon[popupid="password"] {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
+  list-style-image: url(chrome://browser/skin/notification-icons/login-detailed.svg);
 }

 .camera-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
+  list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
 }

 .camera-icon.in-use {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
+  list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
 }

 .camera-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
+  list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg);
 }

 .microphone-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
+  list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
 }

 .microphone-icon.in-use {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
+  list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
 }

 .microphone-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
+  list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg);
 }

 .popup-notification-icon.microphone-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
+  list-style-image: url(chrome://browser/skin/notification-icons/microphone-detailed.svg);
 }

 .screen-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
+  list-style-image: url(chrome://browser/skin/notification-icons/screen.svg);
 }

 .screen-icon.in-use {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
+  list-style-image: url(chrome://browser/skin/notification-icons/screen.svg);
 }

 .screen-icon.blocked-permission-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
+  list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg);
 }

 #webRTC-preview:not([hidden]) {
@ -165,7 +165,7 @@ html|*#webRTC-previewVideo {

 /* This icon has a block sign in it, so we don't need a blocked version. */
 .popup-icon {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
+  list-style-image: url("chrome://browser/skin/notification-icons/popup.svg");
 }

 /* EME */
@ -240,12 +240,12 @@ html|*#webRTC-previewVideo {
 /* PLUGINS */

 .plugin-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
+  list-style-image: url(chrome://browser/skin/notification-icons/plugin.svg);
  transition: fill 1.5s;
 }

 #plugin-icon-badge {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-badge);
+  list-style-image: url(chrome://browser/skin/notification-icons/plugin-badge.svg);
  opacity: 0;
  transition: opacity 1.5s;
 }
@ -272,7 +272,7 @@ html|*#webRTC-previewVideo {
 }

 .plugin-blocked > .plugin-icon {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
+  list-style-image: url(chrome://browser/skin/notification-icons/plugin-blocked.svg);
  fill: #d92215 !important;
 }

@ -350,6 +350,6 @@ html|*#webRTC-previewVideo {
 .popup-notification-icon[popupid="update-available"],
 .popup-notification-icon[popupid="update-manual"],
 .popup-notification-icon[popupid="update-restart"] {
-  background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
+  background: #74BF43 url(chrome://browser/skin/notification-icons/update.svg) no-repeat center;
  border-radius: 50%;
 }
--- a/browser/themes/shared/notification-icons.svg
+++ b/browser/themes/shared/notification-icons.svg
@ -1,104 +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/. -->
-<svg fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
-     width="32" height="32" viewBox="0 0 32 32">
-  <style>
-    :root > use:not(:target),
-    :root > g:not(:target),
-    :root > circle:not(:target),
-    #strikeout {
-      display: none;
-    }
-    .blocked:target ~ #strikeout {
-      display: block;
-    }
-    .blocked {
-      clip-path: url(#blocked-clipPath);
-    }
-
-    #badge {
-      fill: #3088d4;
-    }
-
-    #update-icon {
-      stroke: #fff;
-      stroke-width: 3px;
-      stroke-linecap: round;
-    }
-  </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="focus-tab-by-prompt-icon" d="M29.43,25,18.57,3.8A2.92,2.92,0,0,0,16,2a2.92,2.92,0,0,0-2.57,1.8L2.57,25a3.47,3.47,0,0,0,0,3.4A3.15,3.15,0,0,0,5.33,30H26.66a3.15,3.15,0,0,0,2.77-1.6A3.47,3.47,0,0,0,29.43,25ZM16,7.2a2.3,2.3,0,0,1,2.37,2.4L18,18a1.88,1.88,0,0,1-2,2,1.88,1.88,0,0,1-2-2l-.4-8.4A2.3,2.3,0,0,1,16,7.2ZM16,28a3,3,0,0,1,0-6,3,3,0,0,1,0,6Z"/>
-    <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" />
-    <path id="geo-windows-icon" d="m 2,14 0,4 2,0 a 12,12 0 0 0 10,10 l 0,2 4,0 0,-2 a 12,12 0 0 0 10,-10 l 2,0 0,-4 -2,0 a 12,12 0 0 0 -10,-10 l 0,-2 -4,0 0,2 a 12,12 0 0 0 -10,10 z m 4,1.9 a 10,10 0 1 1 0,0.2 z m 4,0 a 6,6 0 1 1 0,0.2 z" />
-    <path id="geo-windows-detailed-icon" d="m 2,14.5 0,3 2,0.5 a 12,12 0 0 0 10,10 l 0.5,2 3,0 0.5,-2 a 12,12 0 0 0 10,-10 l 2,-0.5 0,-3 -2,-0.5 a 12,12 0 0 0 -10,-10 l -0.5,-2 -3,0 -0.5,2 a 12,12 0 0 0 -10,10 z m 4,1.4 a 10,10 0 1 1 0,0.2 z m 3,0 a 7,7 0 1 1 0,0.2 z" />
-    <path id="indexedDB-icon" d="m 2,24 a 4,4 0 0 0 4,4 l 2,0 0,-4 -2,0 0,-16 20,0 0,16 -2,0 0,4 2,0 a 4,4 0 0 0 4,-4 l 0,-16 a 4,4 0 0 0 -4,-4 l -20,0 a 4,4 0 0 0 -4,4 z m 8,-2 6,7 6,-7 -4,0 0,-8 -4,0 0,8 z" />
-    <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="persistent-storage-icon" d="M26 21.1H6c-1.1 0-2 .9-2 2V27c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2v-3.9c0-1.1-.9-2-2-2zM24.1 27c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM25 3H7C5.3 3 4 4.4 4 6.2v13.3c.6-.3 1.3-.5 2-.5h20c.7 0 1.4.2 2 .5V6.2C28 4.4 26.7 3 25 3z"/>
-    <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" />
-    <path id="update-icon" d="M 16,9 L 16,24 M 16,9 L 11,14 M 16,9 L 21,14" />
-
-    <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" 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="plugin-badge" href="#badge" />
-  <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"/>
-  <circle id="badge" cx="27" cy="5" r="5"/>
-</svg>
--- a/browser/themes/shared/notification-icons/camera-blocked.svg
+++ b/browser/themes/shared/notification-icons/camera-blocked.svg
@ -0,0 +1,12 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+#include clip-path.inc.svg
+#include camera-icon.inc.svg
+  </defs>
+  <use clip-path="url(#blocked-clipPath)" href="#camera-icon"/>
+#include strikeout.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/camera-icon.inc.svg
+++ b/browser/themes/shared/notification-icons/camera-icon.inc.svg
@ -0,0 +1 @@
+<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"/>
--- a/browser/themes/shared/notification-icons/camera.svg
+++ b/browser/themes/shared/notification-icons/camera.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+#include camera-icon.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/clip-path.inc.svg
+++ b/browser/themes/shared/notification-icons/clip-path.inc.svg
@ -0,0 +1,3 @@
+<clipPath id="blocked-clipPath">
+    <path d="m 0,0 0,31 31,-31 z m 6,32 26,0 0,-26 z"/>
+</clipPath>
--- a/browser/themes/shared/notification-icons/default-info.svg
+++ b/browser/themes/shared/notification-icons/default-info.svg
@ -0,0 +1,16 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <mask id="i-mask" 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>
+    <circle cx="16" cy="16" r="14" mask="url(#i-mask)"/>
+  </g>
+</svg>
--- a/browser/themes/shared/notification-icons/desktop-notification-blocked.svg
+++ b/browser/themes/shared/notification-icons/desktop-notification-blocked.svg
@ -0,0 +1,12 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+#include clip-path.inc.svg
+#include desktop-notification-icon.inc.svg
+  </defs>
+  <use clip-path="url(#blocked-clipPath)" href="#desktop-notification-icon"/>
+#include strikeout.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/desktop-notification-icon.inc.svg
+++ b/browser/themes/shared/notification-icons/desktop-notification-icon.inc.svg
@ -0,0 +1 @@
+<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"/>
--- a/browser/themes/shared/notification-icons/desktop-notification.svg
+++ b/browser/themes/shared/notification-icons/desktop-notification.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+#include desktop-notification-icon.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/focus-tab-by-prompt.svg
+++ b/browser/themes/shared/notification-icons/focus-tab-by-prompt.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <path d="M29.43,25,18.57,3.8A2.92,2.92,0,0,0,16,2a2.92,2.92,0,0,0-2.57,1.8L2.57,25a3.47,3.47,0,0,0,0,3.4A3.15,3.15,0,0,0,5.33,30H26.66a3.15,3.15,0,0,0,2.77-1.6A3.47,3.47,0,0,0,29.43,25ZM16,7.2a2.3,2.3,0,0,1,2.37,2.4L18,18a1.88,1.88,0,0,1-2,2,1.88,1.88,0,0,1-2-2l-.4-8.4A2.3,2.3,0,0,1,16,7.2ZM16,28a3,3,0,0,1,0-6,3,3,0,0,1,0,6Z"/>
+</svg>
--- a/browser/themes/shared/notification-icons/geo-linux-blocked.svg
+++ b/browser/themes/shared/notification-icons/geo-linux-blocked.svg
@ -0,0 +1,12 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+#include clip-path.inc.svg
+#include geo-linux-icon.inc.svg
+  </defs>
+  <use clip-path="url(#blocked-clipPath)" href="#geo-linux-icon"/>
+#include strikeout.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/geo-linux-detailed.svg
+++ b/browser/themes/shared/notification-icons/geo-linux-detailed.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <path 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"/>
+</svg>
--- a/browser/themes/shared/notification-icons/geo-linux-icon.inc.svg
+++ b/browser/themes/shared/notification-icons/geo-linux-icon.inc.svg
@ -0,0 +1 @@
+<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"/>
--- a/browser/themes/shared/notification-icons/geo-linux.svg
+++ b/browser/themes/shared/notification-icons/geo-linux.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+#include geo-linux-icon.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/geo-osx-blocked.svg
+++ b/browser/themes/shared/notification-icons/geo-osx-blocked.svg
@ -0,0 +1,12 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+#include clip-path.inc.svg
+#include geo-osx-icon.inc.svg
+  </defs>
+  <use clip-path="url(#blocked-clipPath)" href="#geo-osx-icon"/>
+#include strikeout.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/geo-osx-icon.inc.svg
+++ b/browser/themes/shared/notification-icons/geo-osx-icon.inc.svg
@ -0,0 +1 @@
+<path id="geo-osx-icon" d="m 0,16 16,0 0,16 12,-28 z"/>
--- a/browser/themes/shared/notification-icons/geo-osx.svg
+++ b/browser/themes/shared/notification-icons/geo-osx.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+#include geo-osx-icon.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/geo-windows-blocked.svg
+++ b/browser/themes/shared/notification-icons/geo-windows-blocked.svg
@ -0,0 +1,12 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+#include clip-path.inc.svg
+#include geo-windows-icon.inc.svg
+  </defs>
+  <use clip-path="url(#blocked-clipPath)" href="#geo-windows-icon"/>
+#include strikeout.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/geo-windows-detailed.svg
+++ b/browser/themes/shared/notification-icons/geo-windows-detailed.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <path d="m 2,14.5 0,3 2,0.5 a 12,12 0 0 0 10,10 l 0.5,2 3,0 0.5,-2 a 12,12 0 0 0 10,-10 l 2,-0.5 0,-3 -2,-0.5 a 12,12 0 0 0 -10,-10 l -0.5,-2 -3,0 -0.5,2 a 12,12 0 0 0 -10,10 z m 4,1.4 a 10,10 0 1 1 0,0.2 z m 3,0 a 7,7 0 1 1 0,0.2 z"/>
+</svg>
--- a/browser/themes/shared/notification-icons/geo-windows-icon.inc.svg
+++ b/browser/themes/shared/notification-icons/geo-windows-icon.inc.svg
@ -0,0 +1 @@
+<path id="geo-windows-icon" d="m 2,14 0,4 2,0 a 12,12 0 0 0 10,10 l 0,2 4,0 0,-2 a 12,12 0 0 0 10,-10 l 2,0 0,-4 -2,0 a 12,12 0 0 0 -10,-10 l 0,-2 -4,0 0,2 a 12,12 0 0 0 -10,10 z m 4,1.9 a 10,10 0 1 1 0,0.2 z m 4,0 a 6,6 0 1 1 0,0.2 z"/>
--- a/browser/themes/shared/notification-icons/geo-windows.svg
+++ b/browser/themes/shared/notification-icons/geo-windows.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+#include geo-windows-icon.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/indexedDB-blocked.svg
+++ b/browser/themes/shared/notification-icons/indexedDB-blocked.svg
@ -0,0 +1,12 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+#include clip-path.inc.svg
+#include indexedDB-icon.inc.svg
+  </defs>
+  <use clip-path="url(#blocked-clipPath)" href="#indexedDB-icon"/>
+#include strikeout.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/indexedDB-icon.inc.svg
+++ b/browser/themes/shared/notification-icons/indexedDB-icon.inc.svg
@ -0,0 +1 @@
+<path id="indexedDB-icon" d="m 2,24 a 4,4 0 0 0 4,4 l 2,0 0,-4 -2,0 0,-16 20,0 0,16 -2,0 0,4 2,0 a 4,4 0 0 0 4,-4 l 0,-16 a 4,4 0 0 0 -4,-4 l -20,0 a 4,4 0 0 0 -4,4 z m 8,-2 6,7 6,-7 -4,0 0,-8 -4,0 0,8 z"/>
--- a/browser/themes/shared/notification-icons/indexedDB.svg
+++ b/browser/themes/shared/notification-icons/indexedDB.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+#include indexedDB-icon.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/login-detailed.svg
+++ b/browser/themes/shared/notification-icons/login-detailed.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <path 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"/>
+</svg>
--- a/browser/themes/shared/notification-icons/login.svg
+++ b/browser/themes/shared/notification-icons/login.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <path 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"/>
+</svg>
--- a/browser/themes/shared/notification-icons/microphone-blocked.svg
+++ b/browser/themes/shared/notification-icons/microphone-blocked.svg
@ -0,0 +1,12 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+#include clip-path.inc.svg
+#include microphone-icon.inc.svg
+  </defs>
+  <use clip-path="url(#blocked-clipPath)" href="#microphone-icon"/>
+#include strikeout.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/microphone-detailed.svg
+++ b/browser/themes/shared/notification-icons/microphone-detailed.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <path 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"/>
+</svg>
--- a/browser/themes/shared/notification-icons/microphone-icon.inc.svg
+++ b/browser/themes/shared/notification-icons/microphone-icon.inc.svg
@ -0,0 +1 @@
+<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"/>
--- a/browser/themes/shared/notification-icons/microphone.svg
+++ b/browser/themes/shared/notification-icons/microphone.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+#include microphone-icon.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/persistent-storage-blocked.svg
+++ b/browser/themes/shared/notification-icons/persistent-storage-blocked.svg
@ -0,0 +1,12 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+#include clip-path.inc.svg
+#include persistent-storage-icon.inc.svg
+  </defs>
+  <use clip-path="url(#blocked-clipPath)" href="#persistent-storage-icon"/>
+#include strikeout.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/persistent-storage-icon.inc.svg
+++ b/browser/themes/shared/notification-icons/persistent-storage-icon.inc.svg
@ -0,0 +1 @@
+<path id="persistent-storage-icon" d="M26 21.1H6c-1.1 0-2 .9-2 2V27c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2v-3.9c0-1.1-.9-2-2-2zM24.1 27c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM25 3H7C5.3 3 4 4.4 4 6.2v13.3c.6-.3 1.3-.5 2-.5h20c.7 0 1.4.2 2 .5V6.2C28 4.4 26.7 3 25 3z"/>
--- a/browser/themes/shared/notification-icons/persistent-storage.svg
+++ b/browser/themes/shared/notification-icons/persistent-storage.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+#include persistent-storage-icon.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/plugin-badge.svg
+++ b/browser/themes/shared/notification-icons/plugin-badge.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <circle fill="#3088d4" cx="27" cy="5" r="5"/>
+</svg>
--- a/browser/themes/shared/notification-icons/plugin-blocked.svg
+++ b/browser/themes/shared/notification-icons/plugin-blocked.svg
@ -0,0 +1,12 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+#include clip-path.inc.svg
+#include plugin-icon.inc.svg
+  </defs>
+  <use clip-path="url(#blocked-clipPath)" href="#plugin-icon"/>
+#include strikeout.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/plugin-icon.inc.svg
+++ b/browser/themes/shared/notification-icons/plugin-icon.inc.svg
@ -0,0 +1 @@
+<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"/>
--- a/browser/themes/shared/notification-icons/plugin.svg
+++ b/browser/themes/shared/notification-icons/plugin.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+#include plugin-icon.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/popup.svg
+++ b/browser/themes/shared/notification-icons/popup.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <path 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"/>
+</svg>
--- a/browser/themes/shared/notification-icons/screen-blocked.svg
+++ b/browser/themes/shared/notification-icons/screen-blocked.svg
@ -0,0 +1,12 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+#include clip-path.inc.svg
+#include screen-icon.inc.svg
+  </defs>
+  <use clip-path="url(#blocked-clipPath)" href="#screen-icon"/>
+#include strikeout.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/screen-icon.inc.svg
+++ b/browser/themes/shared/notification-icons/screen-icon.inc.svg
@ -0,0 +1 @@
+<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"/>
--- a/browser/themes/shared/notification-icons/screen.svg
+++ b/browser/themes/shared/notification-icons/screen.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+#include screen-icon.inc.svg
+</svg>
--- a/browser/themes/shared/notification-icons/strikeout.inc.svg
+++ b/browser/themes/shared/notification-icons/strikeout.inc.svg
@ -0,0 +1 @@
+<path id="strikeout" d="m 2,28 2,2 26,-26 -2,-2 z"/>
--- a/browser/themes/shared/notification-icons/update.svg
+++ b/browser/themes/shared/notification-icons/update.svg
@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <path stroke="#fff" stroke-width="3px" stroke-linecap="round" d="M 16,9 L 16,24 M 16,9 L 11,14 M 16,9 L 21,14"/>
+</svg>
--- a/browser/themes/shared/plugin-doorhanger.inc.css
+++ b/browser/themes/shared/plugin-doorhanger.inc.css
@ -50,7 +50,7 @@
 }

 .messageImage[value="plugin-hidden"] {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
+  list-style-image: url(chrome://browser/skin/notification-icons/plugin.svg);
 }

 /* Keep any changes to this style in sync with pluginProblem.css */
@ -61,5 +61,5 @@ notification.pluginVulnerable {
 }

 notification.pluginVulnerable .messageImage {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
+  list-style-image: url(chrome://browser/skin/notification-icons/plugin-blocked.svg);
 }
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@ -116,15 +116,15 @@
 }

 .tab-sharing-icon-overlay[sharing="camera"] {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
+  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
 }

 .tab-sharing-icon-overlay[sharing="microphone"] {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
+  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
 }

 .tab-sharing-icon-overlay[sharing="screen"] {
-  list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
+  list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
 }

 .tab-icon-overlay {
--- a/browser/themes/shared/webRTC-indicator.css
+++ b/browser/themes/shared/webRTC-indicator.css
@ -35,7 +35,7 @@ window {
 }

 #screenShareButton {
-  background-image: url("chrome://browser/skin/notification-icons.svg#screen-indicator");
+  background-image: url("chrome://browser/skin/notification-icons/screen.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px;
@ -67,17 +67,17 @@ window[sharingaudio] > #audioVideoButton {
 }

 window[sharingvideo] > #audioVideoButton {
-  background-image: url("chrome://browser/skin/notification-icons.svg#camera-indicator");
+  background-image: url("chrome://browser/skin/notification-icons/camera.svg");
 }

 window[sharingaudio] > #audioVideoButton {
-  background-image: url("chrome://browser/skin/notification-icons.svg#microphone-indicator");
+  background-image: url("chrome://browser/skin/notification-icons/microphone.svg");
 }

 /* Multi-icon button: */
 window[sharingaudio][sharingvideo] > #audioVideoButton {
-  background-image: url("chrome://browser/skin/notification-icons.svg#camera-indicator"),
-                    url("chrome://browser/skin/notification-icons.svg#microphone-indicator");
+  background-image: url("chrome://browser/skin/notification-icons/camera.svg"),
+                    url("chrome://browser/skin/notification-icons/microphone.svg");
  background-position: 6px center, 26px center;
  background-size: 16px, 16px;
  min-width: 46px;
				`@ -0,0 +1 @@`
				`<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"/>`
				`@ -0,0 +1 @@`
				`<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"/>`
				`@ -0,0 +1 @@`
				`<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"/>`
				`@ -0,0 +1 @@`
				`<path id="geo-osx-icon" d="m 0,16 16,0 0,16 12,-28 z"/>`
				`@ -0,0 +1 @@`
				`<path id="geo-windows-icon" d="m 2,14 0,4 2,0 a 12,12 0 0 0 10,10 l 0,2 4,0 0,-2 a 12,12 0 0 0 10,-10 l 2,0 0,-4 -2,0 a 12,12 0 0 0 -10,-10 l 0,-2 -4,0 0,2 a 12,12 0 0 0 -10,10 z m 4,1.9 a 10,10 0 1 1 0,0.2 z m 4,0 a 6,6 0 1 1 0,0.2 z"/>`
				`@ -0,0 +1 @@`
				`<path id="indexedDB-icon" d="m 2,24 a 4,4 0 0 0 4,4 l 2,0 0,-4 -2,0 0,-16 20,0 0,16 -2,0 0,4 2,0 a 4,4 0 0 0 4,-4 l 0,-16 a 4,4 0 0 0 -4,-4 l -20,0 a 4,4 0 0 0 -4,4 z m 8,-2 6,7 6,-7 -4,0 0,-8 -4,0 0,8 z"/>`
				`@ -0,0 +1 @@`
				`<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"/>`
				`@ -0,0 +1 @@`
				`<path id="persistent-storage-icon" d="M26 21.1H6c-1.1 0-2 .9-2 2V27c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2v-3.9c0-1.1-.9-2-2-2zM24.1 27c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM25 3H7C5.3 3 4 4.4 4 6.2v13.3c.6-.3 1.3-.5 2-.5h20c.7 0 1.4.2 2 .5V6.2C28 4.4 26.7 3 25 3z"/>`
				`@ -0,0 +1 @@`
				`<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"/>`
				`@ -0,0 +1 @@`
				`<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"/>`