Bug 1365846 - Use context-fill for identity, connection and tracking protection icons in the site identity block. r?johannh draft
authorDão Gottwald <dao@mozilla.com>
Thu, 18 May 2017 14:43:51 +0200
changeset 580383 928eccb99d22b498eb2f48b53618ccda8bdb2cf7
parent 580382 2fa6931995b23f1f39752385b6689dc6b8d94c1b
child 629262 fbcb909f433ccaa511643eff126327375656138e
push id59529
push userdgottwald@mozilla.com
push dateThu, 18 May 2017 12:44:24 +0000
reviewersjohannh
bugs1365846
milestone55.0a1
Bug 1365846 - Use context-fill for identity, connection and tracking protection icons in the site identity block. r?johannh MozReview-Commit-ID: 87EuHr7TvUs
browser/base/content/test/general/browser_addCertException.js
browser/base/content/test/siteIdentity/browser_insecureLoginForms.js
browser/base/content/test/siteIdentity/browser_mixed_content_cert_override.js
browser/base/content/test/siteIdentity/head.js
browser/themes/shared/autocomplete.inc.css
browser/themes/shared/compacttheme.inc.css
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/icons.inc.css
browser/themes/shared/identity-block/identity-block.inc.css
browser/themes/shared/identity-block/identity-icon.svg
browser/themes/shared/identity-block/tracking-protection-16.svg
browser/themes/shared/jar.inc.mn
--- a/browser/base/content/test/general/browser_addCertException.js
+++ b/browser/base/content/test/general/browser_addCertException.js
@@ -31,20 +31,20 @@ function checkControlPanelIcons() {
         .getPropertyValue("list-style-image");
   let securityViewBG = gBrowser.ownerGlobal
         .getComputedStyle(document.getElementById("identity-popup-securityView"))
         .getPropertyValue("background-image");
   let securityContentBG = gBrowser.ownerGlobal
         .getComputedStyle(document.getElementById("identity-popup-security-content"))
         .getPropertyValue("background-image");
   is(connectionIconImage,
-     "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg#icon\")",
+     "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg\")",
      "Using expected icon image in the identity block");
   is(securityViewBG,
-     "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg#icon\")",
+     "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg\")",
      "Using expected icon image in the Control Center main view");
   is(securityContentBG,
-     "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg#icon\")",
+     "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg\")",
      "Using expected icon image in the Control Center subview");
 
   gIdentityHandler._identityPopup.hidden = true;
 }
 
--- a/browser/base/content/test/siteIdentity/browser_insecureLoginForms.js
+++ b/browser/base/content/test/siteIdentity/browser_insecureLoginForms.js
@@ -47,17 +47,17 @@ add_task(async function test_simple() {
             .getPropertyValue("list-style-image");
       let securityViewBG = gBrowser.ownerGlobal
             .getComputedStyle(document.getElementById("identity-popup-securityView"))
             .getPropertyValue("background-image");
       let securityContentBG = gBrowser.ownerGlobal
             .getComputedStyle(document.getElementById("identity-popup-security-content"))
             .getPropertyValue("background-image");
       is(connectionIconImage,
-         "url(\"chrome://browser/skin/connection-mixed-active-loaded.svg#icon\")",
+         "url(\"chrome://browser/skin/connection-mixed-active-loaded.svg\")",
          "Using expected icon image in the identity block");
       is(securityViewBG,
          "url(\"chrome://browser/skin/controlcenter/mcb-disabled.svg\")",
          "Using expected icon image in the Control Center main view");
       is(securityContentBG,
          "url(\"chrome://browser/skin/controlcenter/mcb-disabled.svg\")",
          "Using expected icon image in the Control Center subview");
       is(Array.filter(document.querySelectorAll("[observes=identity-popup-insecure-login-forms-learn-more]"),
--- a/browser/base/content/test/siteIdentity/browser_mixed_content_cert_override.js
+++ b/browser/base/content/test/siteIdentity/browser_mixed_content_cert_override.js
@@ -26,28 +26,28 @@ function checkIdentityPopup(icon) {
   ok(getPopupContentVerifier().textContent.includes("security exception"), "Text shows overridden certificate warning.");
 }
 
 add_task(async function() {
   await BrowserTestUtils.openNewForegroundTab(gBrowser);
 
   // check that a warning is shown when loading a page with mixed content and an overridden certificate
   await loadBadCertPage(MIXED_CONTENT_URL);
-  checkIdentityPopup("connection-mixed-passive-loaded.svg#icon");
+  checkIdentityPopup("connection-mixed-passive-loaded.svg");
 
   // check that the crossed out icon is shown when disabling mixed content protection
   gIdentityHandler.disableMixedContentProtection();
   await BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
 
-  checkIdentityPopup("connection-mixed-active-loaded.svg#icon");
+  checkIdentityPopup("connection-mixed-active-loaded.svg");
 
   // check that a warning is shown even without mixed content
   await BrowserTestUtils.loadURI(gBrowser.selectedBrowser, "https://self-signed.example.com");
   await BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
-  checkIdentityPopup("connection-mixed-passive-loaded.svg#icon");
+  checkIdentityPopup("connection-mixed-passive-loaded.svg");
 
   // remove cert exception
   let certOverrideService = Cc["@mozilla.org/security/certoverride;1"]
                               .getService(Ci.nsICertOverrideService);
   certOverrideService.clearValidityOverride("self-signed.example.com", -1);
 
   await BrowserTestUtils.removeTab(gBrowser.selectedTab);
 });
--- a/browser/base/content/test/siteIdentity/head.js
+++ b/browser/base/content/test/siteIdentity/head.js
@@ -176,29 +176,29 @@ function assertMixedContentBlockingState
         "identityBox has expected class for activeBlocked && !passiveLoaded");
     is(classList.contains("mixedDisplayContent"), passiveLoaded && !(activeLoaded || activeBlocked),
        "identityBox has expected class for passiveLoaded && !(activeLoaded || activeBlocked)");
     is(classList.contains("mixedDisplayContentLoadedActiveBlocked"), passiveLoaded && activeBlocked,
        "identityBox has expected class for passiveLoaded && activeBlocked");
 
     ok(!is_hidden(connectionIcon), "connection icon should be visible");
     if (activeLoaded) {
-      is(connectionIconImage, "url(\"chrome://browser/skin/connection-mixed-active-loaded.svg#icon\")",
+      is(connectionIconImage, "url(\"chrome://browser/skin/connection-mixed-active-loaded.svg\")",
         "Using active loaded icon");
     }
     if (activeBlocked && !passiveLoaded) {
       is(connectionIconImage, "url(\"chrome://browser/skin/connection-secure.svg\")",
         "Using active blocked icon");
     }
     if (passiveLoaded && !(activeLoaded || activeBlocked)) {
-      is(connectionIconImage, "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg#icon\")",
+      is(connectionIconImage, "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg\")",
         "Using passive loaded icon");
     }
     if (passiveLoaded && activeBlocked) {
-      is(connectionIconImage, "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg#icon\")",
+      is(connectionIconImage, "url(\"chrome://browser/skin/connection-mixed-passive-loaded.svg\")",
         "Using active blocked and passive loaded icon");
     }
   }
 
   // Make sure the identity popup has the correct mixedcontent states
   gIdentityHandler._identityBox.click();
   let popupAttr = doc.getElementById("identity-popup").getAttribute("mixedcontent");
   let bodyAttr = doc.getElementById("identity-popup-securityView-body").getAttribute("mixedcontent");
--- a/browser/themes/shared/autocomplete.inc.css
+++ b/browser/themes/shared/autocomplete.inc.css
@@ -56,10 +56,12 @@
   font-size: 1em;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
   color: inherit;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
-  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
+  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg);
+  -moz-context-properties: fill;
+  fill: GrayText;
 }
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -234,20 +234,22 @@ toolbar:-moz-lwtheme-darktext {
 #navigator-toolbox .searchbar-textbox {
   background-color: var(--url-and-searchbar-background-color) !important;
   background-image: none !important;
   color: inherit !important;
   border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
   box-shadow: none !important;
 }
 
-%filter substitution
-%define selectorSuffix :-moz-lwtheme-brighttext
-%define iconVariant -white
-%include identity-block/icons.inc.css
+#identity-icon:-moz-lwtheme-brighttext,
+#tracking-protection-icon:-moz-lwtheme-brighttext,
+#connection-icon:-moz-lwtheme-brighttext,
+#extension-icon:-moz-lwtheme-brighttext {
+  fill: rgba(255,255,255,.7);
+}
 
 #urlbar {
 %ifndef MOZ_PHOTON_THEME
   border-inline-start: none !important;
 %endif
   opacity: 1 !important;
 }
 
--- a/browser/themes/shared/controlcenter/extension.svg
+++ b/browser/themes/shared/controlcenter/extension.svg
@@ -1,9 +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">
-#include ../icon-colors.inc.svg
-  <path class="fieldtext" 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" 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
@@ -235,29 +235,33 @@
 #identity-popup[ciphers=weak] #identity-popup-security-content,
 #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#icon);
+  background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg);
+  -moz-context-properties: fill;
+  fill: GrayText;
 }
 
 #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);
 }
 
 #identity-popup[connection=extension] #identity-popup-securityView,
 #identity-popup[connection=extension] #identity-popup-security-content {
   background-image: url(chrome://browser/skin/controlcenter/extension.svg);
+  -moz-context-properties: fill;
+  fill: #60bf4c;
 }
 
 #identity-popup-security-descriptions > description {
   margin-top: 6px;
   color: Graytext;
 }
 
 #identity-popup-securityView-header,
--- a/browser/themes/shared/icon-colors.inc.svg
+++ b/browser/themes/shared/icon-colors.inc.svg
@@ -1,34 +1,16 @@
 <style>
 
 .fieldtext {
-  fill: -moz-fieldtext;
-#ifdef MOZ_WIDGET_GTK
-  /* The fill-opacity needs to be sufficient for high-contrast settings, and
-     pathological Gtk themes where -moz-fieldtext provides low contrast by
-     default. */
-  fill-opacity: .7;
-#else
-  fill-opacity: .5;
-#endif
+  fill: GrayText;
 }
 
-#ifdef XP_WIN
-@media (-moz-windows-default-theme: 0) {
-  /* more opacity for high-contrast themes */
-  .fieldtext {
-    fill-opacity: .8;
-  }
-}
-#endif
-
 .highlighttext {
   fill: highlighttext;
-  fill-opacity: 1;
 }
 
 .black {
   fill: black;
   fill-opacity: .6;
 }
 
 .white {
--- a/browser/themes/shared/identity-block/connection-mixed-active-loaded.svg
+++ b/browser/themes/shared/identity-block/connection-mixed-active-loaded.svg
@@ -1,20 +1,14 @@
 <?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="16" height="16" viewBox="0 0 16 16">
-#include ../icon-colors.inc.svg
-  <style>
-    svg > g:not(:target) {
-      display: none;
-    }
-  </style>
 
   <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" />
@@ -32,23 +26,11 @@
     <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)"/>
     </g>
 
     <line id="strike-through-red" x1="2" y1="14.1" x2="14" y2="2.5" stroke="#d92d21" stroke-width="1.8"/>
   </defs>
 
-  <g id="icon">
-    <use xlink:href="#lock" class="fieldtext"/>
-    <use xlink:href="#strike-through-red"/>
-  </g>
-
-  <g id="icon-black">
-    <use xlink:href="#lock" class="black"/>
-    <use xlink:href="#strike-through-red"/>
-  </g>
-
-  <g id="icon-white">
-    <use xlink:href="#lock" class="white"/>
-    <use xlink:href="#strike-through-red"/>
-  </g>
+  <use fill="context-fill" xlink:href="#lock"/>
+  <use xlink: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,20 +1,14 @@
 <?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="16" height="16" viewBox="0 0 16 16">
-#include ../icon-colors.inc.svg
-  <style>
-    svg > g:not(:target) {
-      display: none;
-    }
-  </style>
 
   <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" />
@@ -30,23 +24,11 @@
     <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>
 
-  <g id="icon">
-    <rect width="16" height="16" mask="url(#mask-lock)" class="fieldtext"/>
-    <use xlink:href="#warning-triangle"/>
-  </g>
-
-  <g id="icon-black">
-    <rect width="16" height="16" mask="url(#mask-lock)" class="black"/>
-    <use xlink:href="#warning-triangle"/>
-  </g>
-
-  <g id="icon-white">
-    <rect width="16" height="16" mask="url(#mask-lock)" class="white"/>
-    <use xlink:href="#warning-triangle"/>
-  </g>
+  <rect fill="context-fill" width="16" height="16" mask="url(#mask-lock)"/>
+  <use xlink:href="#warning-triangle"/>
 </svg>
deleted file mode 100644
--- a/browser/themes/shared/identity-block/icons.inc.css
+++ /dev/null
@@ -1,63 +0,0 @@
-%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
-
-#identity-icon@selectorSuffix@ {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#normal@iconVariant@);
-}
-
-#identity-box:hover > #identity-icon:not(.no-hover)@selectorSuffix@,
-#identity-box[open=true] > #identity-icon@selectorSuffix@ {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#hover@iconVariant@);
-}
-
-#identity-box.extensionPage > #extension-icon@selectorSuffix@ {
-  list-style-image: url(chrome://browser/skin/controlcenter/extension.svg);
-  visibility: visible;
-}
-
-#identity-box.grantedPermissions > #identity-icon@selectorSuffix@ {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice@iconVariant@);
-}
-
-#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover)@selectorSuffix@,
-#identity-box.grantedPermissions[open=true] > #identity-icon@selectorSuffix@ {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover@iconVariant@);
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon@selectorSuffix@ {
-  list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
-}
-
-
-#tracking-protection-icon@selectorSuffix@ {
-  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled@iconVariant@);
-}
-
-#tracking-protection-icon[state="loaded-tracking-content"]@selectorSuffix@ {
-  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled@iconVariant@);
-}
-
-
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon@selectorSuffix@,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon@selectorSuffix@,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon@selectorSuffix@ {
-  list-style-image: url(chrome://browser/skin/connection-secure.svg);
-  visibility: visible;
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon@selectorSuffix@,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon@selectorSuffix@,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon@selectorSuffix@,
-#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon@selectorSuffix@ {
-  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon@iconVariant@);
-  visibility: visible;
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon@selectorSuffix@,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon@selectorSuffix@ {
-  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon@iconVariant@);
-  visibility: visible;
-}
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -1,24 +1,14 @@
 %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
 
-%filter substitution
-
-%define selectorSuffix
-%define iconVariant
-%include icons.inc.css
-
-%define selectorSuffix :-moz-lwtheme
-%define iconVariant -black
-%include icons.inc.css
-
 #identity-box {
   font-size: .9em;
   padding: 3px 5px;
   overflow: hidden;
   /* The padding-left and padding-right transitions handle the delayed hiding of
      the forward button when hovered. */
   transition: padding-left, padding-right;
 }
@@ -56,41 +46,67 @@
 }
 
 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
   /* 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,
+#extension-icon {
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill;
+  fill: GrayText;
+}
+
+#identity-icon:-moz-lwtheme,
+#tracking-protection-icon:-moz-lwtheme,
+#connection-icon:-moz-lwtheme,
+#extension-icon:-moz-lwtheme {
+  fill: rgba(0,0,0,.6);
+}
+
 /* MAIN IDENTITY ICON */
 
 #identity-icon {
-  width: 16px;
-  height: 16px;
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
+}
+
+#identity-box:hover > #identity-icon:not(.no-hover),
+#identity-box[open=true] > #identity-icon {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
+}
+
+#identity-box.grantedPermissions > #identity-icon {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
+}
+
+#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
+#identity-box.grantedPermissions[open=true] > #identity-icon {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
+}
+
+#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;
 }
 
 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
-  -moz-image-region: inherit;
   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
-  -moz-context-properties: fill;
-  fill: GrayText;
-  width: 16px;
-  height: 16px;
 }
 
 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
-  -moz-image-region: inherit;
   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
-  width: 16px;
-  height: 16px;
 }
 
 /* SHARING ICON */
 
 #sharing-icon {
   width: 16px;
   height: 16px;
   margin-inline-start: -16px;
@@ -128,22 +144,25 @@
   33.33%, 66.66% {
     opacity: 1;
   }
 }
 
 /* TRACKING PROTECTION ICON */
 
 #tracking-protection-icon {
-  width: 16px;
-  height: 16px;
+  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] {
   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
 }
 
 #tracking-protection-icon:not([state]) {
   margin-inline-end: -18px;
   pointer-events: none;
   opacity: 0;
@@ -152,23 +171,48 @@
 }
 
 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
   visibility: collapse;
 }
 
 /* CONNECTION ICON, EXTENSION ICON */
 
-#connection-icon, #extension-icon {
-  width: 16px;
-  height: 16px;
+#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;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
+  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg);
+  visibility: visible;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
+  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg);
+  visibility: visible;
+}
+
+#identity-box.extensionPage > #extension-icon {
+  list-style-image: url(chrome://browser/skin/controlcenter/extension.svg);
+  visibility: visible;
+}
+
 /* REMOTE CONTROL ICON */
 
 #main-window[remotecontrol] #remote-control-icon {
   list-style-image: url(chrome://browser/content/robot.ico);
   visibility: visible;
   width: 16px;
   height: 16px;
   margin-inline-start: 2px;
--- a/browser/themes/shared/identity-block/identity-icon.svg
+++ b/browser/themes/shared/identity-block/identity-icon.svg
@@ -1,39 +1,24 @@
 <?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"
-     class="fieldtext"
      width="16" height="16" viewBox="0 0 16 16">
-#include ../icon-colors.inc.svg
   <style>
     use:not(:target) {
       display: none;
     }
-    use {
-      fill-rule: evenodd;
-    }
   </style>
 
   <defs>
     <path id="glyph-normal" d="M128,193a7,7,0,1,1,7-7A7,7,0,0,1,128,193Zm0-13a6,6,0,1,0,6,6A6,6,0,0,0,128,180Zm0,10a1,1,0,0,1-1-1v-3a1,1,0,0,1,2,0v3A1,1,0,0,1,128,190Zm0-6a1,1,0,1,1,1-1A1,1,0,0,1,128,184Z" transform="translate(-120 -178)"/>
     <path id="glyph-hover" d="M102,179a7,7,0,1,1-7,7A7,7,0,0,1,102,179Zm0,3a1,1,0,1,1-1,1A1,1,0,0,1,102,182Zm0,3a1,1,0,0,1,1,1v3a1,1,0,0,1-2,0v-3A1,1,0,0,1,102,185Z" transform="translate(-94 -178)"/>
     <path id="glyph-notice" d="M133.5,202a2.5,2.5,0,1,1,2.5-2.5A2.5,2.5,0,0,1,133.5,202Zm-5.5,1a1,1,0,1,1,1-1A1,1,0,0,1,128,203Zm1,5a1,1,0,0,1-2,0v-3a1,1,0,0,1,2,0v3Zm-1-9a6.08,6.08,0,1,0,5.629,3.987,3.452,3.452,0,0,0,.984-0.185A6.9,6.9,0,0,1,135,205a7,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,128,199Z" transform="translate(-120 -197)"/>
     <path id="glyph-notice-hover" d="M107.5,202a2.5,2.5,0,1,1,2.5-2.5A2.5,2.5,0,0,1,107.5,202Zm0,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,107.5,203.039ZM102,201a1,1,0,1,0,1,1A1,1,0,0,0,102,201Zm1,4a1,1,0,0,0-2,0v3a1,1,0,0,0,2,0v-3Z" transform="translate(-94 -197)"/>
   </defs>
 
-  <use id="normal" xlink:href="#glyph-normal"/>
-  <use id="hover" xlink:href="#glyph-hover"/>
-  <use id="notice" xlink:href="#glyph-notice"/>
-  <use id="notice-hover" xlink:href="#glyph-notice-hover"/>
-
-  <use class="black" id="normal-black" xlink:href="#glyph-normal"/>
-  <use class="black" id="hover-black" xlink:href="#glyph-hover"/>
-  <use class="black" id="notice-black" xlink:href="#glyph-notice"/>
-  <use class="black" id="notice-hover-black" xlink:href="#glyph-notice-hover"/>
-
-  <use class="white" id="normal-white" xlink:href="#glyph-normal"/>
-  <use class="white" id="hover-white" xlink:href="#glyph-hover"/>
-  <use class="white" id="notice-white" xlink:href="#glyph-notice"/>
-  <use class="white" id="notice-hover-white" xlink:href="#glyph-notice-hover"/>
+  <use fill="context-fill" fill-rule="evenodd" id="normal" xlink:href="#glyph-normal"/>
+  <use fill="context-fill" fill-rule="evenodd" id="hover" xlink:href="#glyph-hover"/>
+  <use fill="context-fill" fill-rule="evenodd" id="notice" xlink:href="#glyph-notice"/>
+  <use fill="context-fill" fill-rule="evenodd" id="notice-hover" xlink:href="#glyph-notice-hover"/>
 </svg>
--- a/browser/themes/shared/identity-block/tracking-protection-16.svg
+++ b/browser/themes/shared/identity-block/tracking-protection-16.svg
@@ -1,15 +1,14 @@
 <?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="16" height="16" viewBox="0 0 16 16">
-#include ../icon-colors.inc.svg
   <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"/>
@@ -30,30 +29,16 @@
       <use xlink: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 class="fieldtext" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
-  </g>
-  <g id="enabled-black">
-    <use class="black" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
-  </g>
-  <g id="enabled-white">
-    <use class="white" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
+    <use fill="context-fill" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
   </g>
 
   <g id="disabled">
-    <use class="fieldtext" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/>
-    <use xlink:href="#strike-through-red"/>
-  </g>
-  <g id="disabled-black">
-    <use class="black" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/>
-    <use xlink:href="#strike-through-red"/>
-  </g>
-  <g id="disabled-white">
-    <use class="white" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/>
+    <use fill="context-fill" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/>
     <use xlink:href="#strike-through-red"/>
   </g>
 </svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -23,17 +23,17 @@
   skin/classic/browser/addons/addon-install-restart.svg        (../shared/addons/addon-install-restart.svg)
   skin/classic/browser/addons/addon-install-warning.svg        (../shared/addons/addon-install-warning.svg)
 * skin/classic/browser/addons/addon-install-anchor.svg         (../shared/addons/addon-install-anchor.svg)
 * skin/classic/browser/controlcenter/arrow-subview.svg         (../shared/controlcenter/arrow-subview.svg)
 * skin/classic/browser/controlcenter/arrow-subview-back.svg    (../shared/controlcenter/arrow-subview-back.svg)
 * skin/classic/browser/controlcenter/conn-not-secure.svg       (../shared/controlcenter/conn-not-secure.svg)
 * skin/classic/browser/controlcenter/connection.svg            (../shared/controlcenter/connection.svg)
 * skin/classic/browser/controlcenter/mcb-disabled.svg          (../shared/controlcenter/mcb-disabled.svg)
-* skin/classic/browser/controlcenter/extension.svg             (../shared/controlcenter/extension.svg)
+  skin/classic/browser/controlcenter/extension.svg             (../shared/controlcenter/extension.svg)
 * skin/classic/browser/controlcenter/permissions.svg           (../shared/controlcenter/permissions.svg)
 * skin/classic/browser/controlcenter/tracking-protection.svg   (../shared/controlcenter/tracking-protection.svg)
   skin/classic/browser/controlcenter/warning-gray.svg          (../shared/controlcenter/warning-gray.svg)
   skin/classic/browser/controlcenter/warning-yellow.svg        (../shared/controlcenter/warning-yellow.svg)
   skin/classic/browser/customizableui/customizeFavicon.ico     (../shared/customizableui/customizeFavicon.ico)
   skin/classic/browser/customizableui/customize-illustration.png  (../shared/customizableui/customize-illustration.png)
   skin/classic/browser/customizableui/customize-illustration@2x.png  (../shared/customizableui/customize-illustration@2x.png)
   skin/classic/browser/customizableui/customize-illustration-rtl.png  (../shared/customizableui/customize-illustration-rtl.png)
@@ -60,24 +60,24 @@
   skin/classic/browser/downloads/download-summary.svg          (../shared/downloads/download-summary.svg)
   skin/classic/browser/drm-icon.svg                            (../shared/drm-icon.svg)
   skin/classic/browser/fullscreen/insecure.svg                 (../shared/fullscreen/insecure.svg)
   skin/classic/browser/fullscreen/secure.svg                   (../shared/fullscreen/secure.svg)
   skin/classic/browser/heartbeat-icon.svg                      (../shared/heartbeat-icon.svg)
   skin/classic/browser/heartbeat-star-lit.svg                  (../shared/heartbeat-star-lit.svg)
   skin/classic/browser/heartbeat-star-off.svg                  (../shared/heartbeat-star-off.svg)
   skin/classic/browser/connection-secure.svg                   (../shared/identity-block/connection-secure.svg)
-* skin/classic/browser/connection-mixed-passive-loaded.svg     (../shared/identity-block/connection-mixed-passive-loaded.svg)
-* 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/connection-mixed-passive-loaded.svg     (../shared/identity-block/connection-mixed-passive-loaded.svg)
+  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/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/tracking-protection-16.svg              (../shared/identity-block/tracking-protection-16.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-icons.svg                         (../shared/panel-icons.svg)
   skin/classic/browser/preferences/in-content/favicon.ico      (../shared/incontentprefs/favicon.ico)
   skin/classic/browser/preferences/in-content/icons.svg        (../shared/incontentprefs/icons.svg)
   skin/classic/browser/preferences/in-content/search.css       (../shared/incontentprefs/search.css)
   skin/classic/browser/preferences/in-content/siteDataSettings.css (../shared/incontentprefs/siteDataSettings.css)
 * skin/classic/browser/preferences/in-content/containers.css   (../shared/incontentprefs/containers.css)