Bug 1381117 - Increase opacity of icons in the identity block on hover. r?johannh draft
authorDão Gottwald <dao@mozilla.com>
Mon, 17 Jul 2017 18:52:44 +0200
changeset 609868 d0381926875733e5644a74b0b2e87b835cee889b
parent 609768 d43779e278d2e4d3e21dba2fcb585a3bf4b1288e
child 637702 6d2df08f8040dac04dce806478ff6819525828e5
push id68718
push userdgottwald@mozilla.com
push dateMon, 17 Jul 2017 16:53:09 +0000
reviewersjohannh
bugs1381117
milestone56.0a1
Bug 1381117 - Increase opacity of icons in the identity block on hover. r?johannh MozReview-Commit-ID: GyGIO4OviGI
browser/themes/shared/controlcenter/extension.svg
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/icon-colors.inc.svg
browser/themes/shared/identity-block/connection-mixed-active-loaded.svg
browser/themes/shared/identity-block/connection-mixed-passive-loaded.svg
browser/themes/shared/identity-block/connection-secure.svg
browser/themes/shared/identity-block/identity-block.inc.css
browser/themes/shared/identity-block/identity-icon-hover.svg
browser/themes/shared/identity-block/identity-icon-notice-hover.svg
browser/themes/shared/identity-block/identity-icon-notice.svg
browser/themes/shared/identity-block/identity-icon.svg
browser/themes/shared/identity-block/tracking-protection-16.svg
browser/themes/shared/notification-icons.svg
toolkit/themes/osx/global/icons/autocomplete-search.svg
toolkit/themes/windows/global/icons/autocomplete-search.svg
--- a/browser/themes/shared/controlcenter/extension.svg
+++ b/browser/themes/shared/controlcenter/extension.svg
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 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"
      width="64" height="64" viewBox="0 0 64 64">
-  <path fill="context-fill" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
 </svg>
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -62,16 +62,20 @@
 
 .panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView menulist,
 .panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView button:not([panel-multiview-anchor]) {
   -moz-user-focus: ignore;
 }
 
 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
+  /* Set default fill for icons in the identity popup.
+     Individual icons can override this. */
+  fill: currentColor;
+  fill-opacity: .6;
 }
 
 .panel-mainview[panelid=identity-popup] {
   min-width: 30em;
 }
 
 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews {
   transform: translateX(100%);
@@ -244,18 +248,17 @@
 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
   background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-degraded);
 }
 
 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView,
 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content {
   background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg);
-  -moz-context-properties: fill;
-  fill: GrayText;
+  -moz-context-properties: fill, fill-opacity;
 }
 
 #identity-popup[loginforms=insecure] #identity-popup-securityView,
 #identity-popup[loginforms=insecure] #identity-popup-security-content,
 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView,
 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content {
   background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
 }
--- a/browser/themes/shared/icon-colors.inc.svg
+++ b/browser/themes/shared/icon-colors.inc.svg
@@ -1,12 +1,13 @@
 <style>
 
 .fieldtext {
-  fill: GrayText;
+  fill: fieldtext;
+  fill-opacity: .6;
 }
 
 .highlighttext {
   fill: highlighttext;
 }
 
 .black {
   fill: black;
--- a/browser/themes/shared/identity-block/connection-mixed-active-loaded.svg
+++ b/browser/themes/shared/identity-block/connection-mixed-active-loaded.svg
@@ -1,36 +1,36 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 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"
+<svg xmlns="http://www.w3.org/2000/svg"
      width="16" height="16" viewBox="0 0 16 16">
 
   <defs>
     <rect id="shape-lock-clasp-outer" x="4" y="2" width="8" height="10" rx="4" ry="4" />
     <rect id="shape-lock-clasp-inner" x="6" y="4" width="4" height="6" rx="2" ry="2" />
     <rect id="shape-lock-base" x="3" y="7" width="10" height="7" rx="1" ry="1" />
 
     <mask id="mask-clasp-cutout">
-      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
-      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+      <use href="#shape-lock-clasp-outer" fill="#fff"/>
+      <use href="#shape-lock-clasp-inner" fill="#000"/>
       <line x1="2" y1="13" x2="14" y2="1.5" stroke="#000" stroke-width="2" />
       <line x1="2" y1="15" x2="14" y2="3.5" stroke="#000" stroke-width="2" />
       <rect x="3" y="7" width="10" height="7" rx="1" ry="1" fill="#000" />
     </mask>
 
     <mask id="mask-base-cutout">
-      <use xlink:href="#shape-lock-base" fill="#fff" />
+      <use href="#shape-lock-base" fill="#fff"/>
       <line x1="2" y1="14.8" x2="14" y2="3.2" stroke="#000" stroke-width="1.8" />
     </mask>
 
     <g id="lock">
-      <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)"/>
-      <use xlink:href="#shape-lock-base" mask="url(#mask-base-cutout)"/>
+      <use href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)"/>
+      <use href="#shape-lock-base" mask="url(#mask-base-cutout)"/>
     </g>
 
     <line id="strike-through-red" x1="2" y1="14.1" x2="14" y2="2.5" stroke="#d92d21" stroke-width="1.8"/>
   </defs>
 
-  <use fill="context-fill" xlink:href="#lock"/>
-  <use xlink:href="#strike-through-red"/>
+  <use fill="context-fill" fill-opacity="context-fill-opacity" href="#lock"/>
+  <use href="#strike-through-red"/>
 </svg>
--- a/browser/themes/shared/identity-block/connection-mixed-passive-loaded.svg
+++ b/browser/themes/shared/identity-block/connection-mixed-passive-loaded.svg
@@ -1,34 +1,34 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 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"
+<svg xmlns="http://www.w3.org/2000/svg"
      width="16" height="16" viewBox="0 0 16 16">
 
   <defs>
     <rect id="shape-lock-clasp-outer" x="2" y="1" width="8" height="10" rx="4" ry="4" />
     <rect id="shape-lock-clasp-inner" x="4" y="3" width="4" height="6" rx="2" ry="2" />
     <rect id="shape-lock-base" x="1" y="6" width="10" height="7" rx="1" ry="1" />
 
     <mask id="mask-clasp-cutout">
       <rect width="16" height="16" fill="#000" />
-      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
-      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+      <use href="#shape-lock-clasp-outer" fill="#fff"/>
+      <use href="#shape-lock-clasp-inner" fill="#000"/>
     </mask>
 
     <mask id="mask-lock">
-      <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" fill="#fff"/>
-      <use xlink:href="#shape-lock-base" fill="#fff"/>
+      <use href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" fill="#fff"/>
+      <use href="#shape-lock-base" fill="#fff"/>
     </mask>
 
     <g id="warning-triangle">
       <path fill="#fff" d="M10.5,5C9.8,5,9.1,5.4,8.8,6.2l-3.5,6.8c-0.4,0.7-0.4,1.4,0,2c0.4,0.6,1,1,1.8,1H14c0.8,0,1.4-0.4,1.8-1 c0.3-0.6,0.3-1.4,0-2l-3.5-6.8C11.9,5.4,11.2,5,10.5,5L10.5,5z"/>
       <path fill="#ffbf00" d="M14.8,13.4l-3.5-6.8C11.2,6.2,10.9,6,10.5,6c-0.3,0-0.7,0.2-0.9,0.6l-3.5,6.8c-0.2,0.4-0.2,0.8,0,1.1C6.3,14.8,6.6,15,7,15 H14c0.4,0,0.7-0.2,0.9-0.5C15.1,14.2,15,13.8,14.8,13.4z"/>
       <path fill="#fff" d="M10,8.5C10,8.2,10.2,8,10.5,8S11,8.2,11,8.5L10.8,11h-0.6L10,8.5z"/>
       <circle fill="#fff" cx="10.5" cy="12.5" r=".75"/>
     </g>
   </defs>
 
-  <rect fill="context-fill" width="16" height="16" mask="url(#mask-lock)"/>
-  <use xlink:href="#warning-triangle"/>
+  <rect fill="context-fill" fill-opacity="context-fill-opacity" width="16" height="16" mask="url(#mask-lock)"/>
+  <use href="#warning-triangle"/>
 </svg>
--- a/browser/themes/shared/identity-block/connection-secure.svg
+++ b/browser/themes/shared/identity-block/connection-secure.svg
@@ -1,19 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 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"
+<svg xmlns="http://www.w3.org/2000/svg"
      width="16" height="16" viewBox="0 0 16 16">
   <defs>
     <rect id="shape-lock-clasp-outer" x="4" y="2" width="8" height="10" rx="4" ry="4" />
     <rect id="shape-lock-clasp-inner" x="6" y="4" width="4" height="6" rx="2" ry="2" />
     <rect id="shape-lock-base" x="3" y="7" width="10" height="7" rx="1" ry="1" />
     <mask id="mask-clasp-cutout">
       <rect width="16" height="16" fill="#000" />
-      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
-      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+      <use href="#shape-lock-clasp-outer" fill="#fff"/>
+      <use href="#shape-lock-clasp-inner" fill="#000"/>
     </mask>
   </defs>
-  <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" fill="context-fill"/>
-  <use xlink:href="#shape-lock-base" class="icon-default" fill="context-fill"/>
+  <use href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" fill="context-fill"/>
+  <use href="#shape-lock-base" fill="context-fill"/>
 </svg>
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -9,28 +9,34 @@
   padding: 0 5px;
 %else
   font-size: .9em;
   padding: 3px 5px;
   /* The padding-left and padding-right transitions handle the delayed hiding of
      the forward button when hovered. */
   transition: padding-left, padding-right;
 %endif
+  /* Set default fill for icons in the identity block.
+     Individual icons can override this. */
+  fill: currentColor;
+  fill-opacity: .6;
   /* This is for tracking-protection-icon's slide-in animation. */
   overflow: hidden;
 }
 
 %ifdef MOZ_PHOTON_THEME
 #identity-box:hover:not(.no-hover):not([open=true]) {
   background-color: hsla(240,5%,5%,.05);
+  fill-opacity: .8;
 }
 
 #identity-box:hover:active:not(.no-hover),
 #identity-box[open=true] {
   background-color: hsla(240,5%,5%,.1);
+  fill-opacity: .8;
 }
 %endif
 
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
 %ifdef MOZ_PHOTON_THEME
   color: #058B00;
 %else
   color: hsl(92,100%,30%);
@@ -108,28 +114,19 @@
 #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;
+  -moz-context-properties: fill, fill-opacity;
 }
 
-#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);
 }
 %ifndef MOZ_PHOTON_THEME
 #identity-box:not(.no-hover):hover > #identity-icon,
 #identity-box[open=true] > #identity-icon {
@@ -143,17 +140,17 @@
 
 #identity-box.grantedPermissions > #identity-icon {
   list-style-image: url(chrome://browser/skin/identity-icon-notice.svg);
 }
 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
 }
 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
-  opacity: .3;
+  fill-opacity: .3;
 }
 
 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
 }
 
 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
@@ -237,16 +234,17 @@
 #extension-icon {
   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;
+  -moz-context-properties: fill;
 %ifdef MOZ_PHOTON_THEME
   fill: #12BC00;
 %else
   fill: #4d9a26;
 %endif
 }
 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
--- a/browser/themes/shared/identity-block/identity-icon-hover.svg
+++ b/browser/themes/shared/identity-block/identity-icon-hover.svg
@@ -1,6 +1,6 @@
 <!-- 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" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" fill-rule="evenodd" d="M8 1a7 7 0 1 1-7 7 7 7 0 0 1 7-7zm0 3a1 1 0 1 1-1 1 1 1 0 0 1 1-1zm0 3a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" fill-rule="evenodd" d="M8 1a7 7 0 1 1-7 7 7 7 0 0 1 7-7zm0 3a1 1 0 1 1-1 1 1 1 0 0 1 1-1zm0 3a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1z"/>
 </svg>
--- a/browser/themes/shared/identity-block/identity-icon-notice-hover.svg
+++ b/browser/themes/shared/identity-block/identity-icon-notice-hover.svg
@@ -1,6 +1,6 @@
 <!-- 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" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" fill-rule="evenodd" d="M13.5 5A2.5 2.5 0 1 1 16 2.5 2.5 2.5 0 0 1 13.5 5zm0 1.039a3.5 3.5 0 0 0 1.125-.2 7.124 7.124 0 1 1-4.464-4.464 3.5 3.5 0 0 0-.2 1.125A3.54 3.54 0 0 0 13.5 6.039zM8 4a1 1 0 1 0 1 1 1 1 0 0 0-1-1zm1 4a1 1 0 0 0-2 0v3a1 1 0 0 0 2 0V8z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" fill-rule="evenodd" d="M13.5 5A2.5 2.5 0 1 1 16 2.5 2.5 2.5 0 0 1 13.5 5zm0 1.039a3.5 3.5 0 0 0 1.125-.2 7.124 7.124 0 1 1-4.464-4.464 3.5 3.5 0 0 0-.2 1.125A3.54 3.54 0 0 0 13.5 6.039zM8 4a1 1 0 1 0 1 1 1 1 0 0 0-1-1zm1 4a1 1 0 0 0-2 0v3a1 1 0 0 0 2 0V8z"/>
 </svg>
--- a/browser/themes/shared/identity-block/identity-icon-notice.svg
+++ b/browser/themes/shared/identity-block/identity-icon-notice.svg
@@ -1,6 +1,6 @@
 <!-- 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" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" fill-rule="evenodd" d="M13.5 5A2.5 2.5 0 1 1 16 2.5 2.5 2.5 0 0 1 13.5 5zM8 6a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm1 5a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v3zM8 2a6.08 6.08 0 1 0 5.629 3.987 3.452 3.452 0 0 0 .984-.185A6.9 6.9 0 0 1 15 8a7 7 0 1 1-7-7 6.9 6.9 0 0 1 2.2.387 3.452 3.452 0 0 0-.185.984A5.951 5.951 0 0 0 8 2z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" fill-rule="evenodd" d="M13.5 5A2.5 2.5 0 1 1 16 2.5 2.5 2.5 0 0 1 13.5 5zM8 6a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm1 5a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v3zM8 2a6.08 6.08 0 1 0 5.629 3.987 3.452 3.452 0 0 0 .984-.185A6.9 6.9 0 0 1 15 8a7 7 0 1 1-7-7 6.9 6.9 0 0 1 2.2.387 3.452 3.452 0 0 0-.185.984A5.951 5.951 0 0 0 8 2z"/>
 </svg>
--- a/browser/themes/shared/identity-block/identity-icon.svg
+++ b/browser/themes/shared/identity-block/identity-icon.svg
@@ -1,6 +1,6 @@
 <!-- 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" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" fill-rule="evenodd" d="M8 15a7 7 0 1 1 7-7 7 7 0 0 1-7 7zM8 2a6 6 0 1 0 6 6 6 6 0 0 0-6-6zm0 10a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v3a1 1 0 0 1-1 1zm0-6a1 1 0 1 1 1-1 1 1 0 0 1-1 1z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" fill-rule="evenodd" d="M8 15a7 7 0 1 1 7-7 7 7 0 0 1-7 7zM8 2a6 6 0 1 0 6 6 6 6 0 0 0-6-6zm0 10a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v3a1 1 0 0 1-1 1zm0-6a1 1 0 1 1 1-1 1 1 0 0 1-1 1z"/>
 </svg>
--- a/browser/themes/shared/identity-block/tracking-protection-16.svg
+++ b/browser/themes/shared/identity-block/tracking-protection-16.svg
@@ -1,44 +1,44 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 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"
+<svg xmlns="http://www.w3.org/2000/svg"
      width="16" height="16" viewBox="0 0 16 16">
   <style>
     g:not(:target) {
       display: none;
     }
   </style>
 
   <defs>
     <path id="shape-shield-outer" d="M8,1L2.8,1.9C2.4,1.9,2,2.4,2,2.8C2,4,2,6.1,2.1,7.1c0.3,2.7,0.8,4,1.9,5.6C5.6,14.7,8,15,8,15s2.4-0.3,4-2.4 c1.2-1.5,1.7-2.9,1.9-5.6C14,6.1,14,4,14,2.8c0-0.5-0.4-0.9-0.8-1L8,1L8,1z"/>
     <path id="shape-shield-inner" d="M8,2l5,0.8c0,2,0,3.5-0.1,4.1c-0.3,2.7-0.8,3.8-1.7,5.1c-1.1,1.5-2.7,1.9-3.2,2c-0.4-0.1-2.1-0.5-3.2-2 c-1-1.3-1.5-2.4-1.7-5.1C3,6.3,3,4.8,3,2.8L8,2"/>
     <path id="shape-shield-detail" d="M8,13c-0.5-0.1-1.6-0.5-2.4-1.5c-0.9-1.2-1.3-2.1-1.5-4.6C4,6.3,4,5.2,4,3.7L8,3 V13z"/>
 
     <mask id="mask-shield-cutout">
       <rect width="16" height="16" fill="#000" />
-      <use xlink:href="#shape-shield-outer" fill="#fff" />
-      <use xlink:href="#shape-shield-inner" fill="#000" />
-      <use xlink:href="#shape-shield-detail" fill="#fff" />
+      <use href="#shape-shield-outer" fill="#fff"/>
+      <use href="#shape-shield-inner" fill="#000"/>
+      <use href="#shape-shield-detail" fill="#fff"/>
     </mask>
 
     <mask id="mask-shield-cutout-disabled">
       <rect width="16" height="16" fill="#000"/>
-      <use xlink:href="#shape-shield-outer" fill="#fff"/>
-      <use xlink:href="#shape-shield-inner" fill="#000"/>
-      <use xlink:href="#shape-shield-detail" fill="#fff"/>
+      <use href="#shape-shield-outer" fill="#fff"/>
+      <use href="#shape-shield-inner" fill="#000"/>
+      <use href="#shape-shield-detail" fill="#fff"/>
       <line x1="3" y1="15" x2="15" y2="3" stroke="#000" stroke-width="2"/>
     </mask>
 
     <line id="strike-through-red" x1="3" y1="14" x2="15" y2="2" stroke="#d92d21" stroke-width="2"/>
   </defs>
 
   <g id="enabled">
-    <use fill="context-fill" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
+    <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
   </g>
 
   <g id="disabled">
-    <use fill="context-fill" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/>
-    <use xlink:href="#strike-through-red"/>
+    <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/>
+    <use href="#strike-through-red"/>
   </g>
 </svg>
--- a/browser/themes/shared/notification-icons.svg
+++ b/browser/themes/shared/notification-icons.svg
@@ -1,12 +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" xmlns="http://www.w3.org/2000/svg"
+<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;
     }
--- a/toolkit/themes/osx/global/icons/autocomplete-search.svg
+++ b/toolkit/themes/osx/global/icons/autocomplete-search.svg
@@ -1,7 +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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path fill="context-fill" fill-rule="evenodd" d="M14.517,12.884l-3.279-3.287c0.545-0.851,0.864-1.861,0.864-2.947 c0-3.022-2.444-5.472-5.458-5.472c-3.014,0-5.458,2.45-5.458,5.472c0,3.022,2.444,5.471,5.458,5.471 c1.093,0,2.108-0.325,2.962-0.88l3.275,3.283c0.396,0.397,1.039,0.397,1.435,0l0.202-0.202 C14.913,13.925,14.913,13.281,14.517,12.884z M6.644,10.001c-1.846,0-3.344-1.501-3.344-3.352c0-1.851,1.497-3.352,3.344-3.352 c1.847,0,3.344,1.501,3.344,3.352C9.987,8.501,8.49,10.001,6.644,10.001z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" fill-rule="evenodd" d="M14.517,12.884l-3.279-3.287c0.545-0.851,0.864-1.861,0.864-2.947 c0-3.022-2.444-5.472-5.458-5.472c-3.014,0-5.458,2.45-5.458,5.472c0,3.022,2.444,5.471,5.458,5.471 c1.093,0,2.108-0.325,2.962-0.88l3.275,3.283c0.396,0.397,1.039,0.397,1.435,0l0.202-0.202 C14.913,13.925,14.913,13.281,14.517,12.884z M6.644,10.001c-1.846,0-3.344-1.501-3.344-3.352c0-1.851,1.497-3.352,3.344-3.352 c1.847,0,3.344,1.501,3.344,3.352C9.987,8.501,8.49,10.001,6.644,10.001z"/>
 </svg>
 
--- a/toolkit/themes/windows/global/icons/autocomplete-search.svg
+++ b/toolkit/themes/windows/global/icons/autocomplete-search.svg
@@ -1,7 +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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path fill="context-fill" fill-rule="evenodd" d="M9.356,1.178c-3.014,0-5.458,2.45-5.458,5.472c0,1.086,0.32,2.096,0.864,2.947 l-3.279,3.287c-0.396,0.397-0.396,1.041,0,1.438l0.202,0.202c0.396,0.397,1.039,0.397,1.435,0l3.275-3.283 c0.854,0.554,1.869,0.88,2.962,0.88c3.014,0,5.458-2.45,5.458-5.471C14.814,3.627,12.371,1.178,9.356,1.178z M9.356,10.001 c-1.847,0-3.344-1.501-3.344-3.352c0-1.851,1.497-3.352,3.344-3.352c1.846,0,3.344,1.501,3.344,3.352 C12.7,8.501,11.203,10.001,9.356,10.001z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" fill-rule="evenodd" d="M9.356,1.178c-3.014,0-5.458,2.45-5.458,5.472c0,1.086,0.32,2.096,0.864,2.947 l-3.279,3.287c-0.396,0.397-0.396,1.041,0,1.438l0.202,0.202c0.396,0.397,1.039,0.397,1.435,0l3.275-3.283 c0.854,0.554,1.869,0.88,2.962,0.88c3.014,0,5.458-2.45,5.458-5.471C14.814,3.627,12.371,1.178,9.356,1.178z M9.356,10.001 c-1.847,0-3.344-1.501-3.344-3.352c0-1.851,1.497-3.352,3.344-3.352c1.846,0,3.344,1.501,3.344,3.352 C12.7,8.501,11.203,10.001,9.356,10.001z"/>
 </svg>