Bug 1576562 - Convert icons from background-image so they are displayed in high contrast mode. r=johannh

Differential Revision: https://phabricator.services.mozilla.com/D43669

--HG--
extra : moz-landing-system : lando

browser/components/protections/content/protections.css

@@ -82,6 +82,7 @@ h2 {
 
 
 /* We want to hide certain components depending on its state. */
+.etp-card .icon.dark,
 a.hidden,
 .loading .card-body.hidden,
 .lockwise-card.hidden,
@@ -95,24 +96,18 @@ a.hidden,
 #monitor-body-content .monitor-breached-passwords.hidden,
 .loading a,
 .loading button,
-.loading .card-title,
+.loading .wrapper {
-.loading .content,
-.loading .monitor-scanned-text {
   display: none;
 }
 
 .icon {
   width: 60px;
-  height: 60px;
+  height: auto;
   grid-column: 1;
   margin: 0 auto;
   z-index: 1;
 }
 
-.etp-card .icon {
-  background: url("chrome://browser/content/logos/tracking-protection.svg") no-repeat center/contain;
-}
-
 @supports -moz-bool-pref("browser.in-content.dark-mode") {
   @media (prefers-color-scheme: dark) {
     :root {
@@ -123,20 +118,16 @@ a.hidden,
       --cryptominer-highlight-color: #BEBECA;
     }
 
-    .etp-card .icon {
+    .etp-card .icon.dark {
-      background: url("chrome://browser/content/logos/tracking-protection-dark-theme.svg") no-repeat center/contain;
+      display: block;
+    }
+
+    .etp-card .icon.light {
+      display: none;
     }
   }
 }
 
-.lockwise-card .icon {
-  background: url("chrome://browser/content/logos/lockwise.svg") no-repeat center/cover;
-}
-
-.monitor-card .icon {
-  background: url("chrome://browser/content/logos/monitor.svg") no-repeat center/cover;
-}
-
 .card {
   display: grid;
   grid-template-columns: 100%;
@@ -167,8 +158,7 @@ a.hidden,
   cursor: default;
 }
 
-#protection-details,
+#protection-details {
-.inline-text-icon {
   padding: 4px;
   padding-inline-start: 24px;
 }
@@ -244,6 +234,7 @@ a.hidden,
   width: 100%;
   border-radius: 2px;
   overflow: hidden;
+  outline: 1px solid transparent;
 }
 
 .graph-bar:hover {
@@ -359,47 +350,50 @@ input[type="radio"] {
 }
 
 #legend label {
-  display: inline-block;
   margin-bottom: -1px;
-  padding: 15px 23px;
+  padding: 15px 0px;
   padding-inline-end: 5px;
   border: 3px solid transparent;
   -moz-context-properties: fill;
-  background-repeat: no-repeat;
+  display: inline-block;
-  background-position: left center;
-  background-size: 16px;
-}
-
-[dir="rtl"] #legend label {
-  background-position: right center;
 }
 
 #legend label:-moz-focusring {
   outline: none;
 }
 
-label[data-type="social"] {
+.icon-small {
-  background-image: url(chrome://browser/skin/controlcenter/socialblock.svg);
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline-end: 2px;
+}
+
+label span {
+  margin-inline-start: 1px;
+  display: inline-block;
+}
+
+label[data-type="social"] .icon-small {
   fill: var(--social-color);
 }
 
-label[data-type="cookie"] {
+label[data-type="cookie"] .icon-small {
-  background-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg);
   fill: var(--cookie-color);
 }
 
-label[data-type="tracker"] {
+label[data-type="tracker"] .icon-small {
-  background-image: url(chrome://browser/skin/controlcenter/tracker-image.svg);
   fill: var(--tracker-color);
 }
 
-label[data-type="fingerprinter"] {
+label[data-type="fingerprinter"] .icon-small {
-  background-image: url(chrome://browser/skin/controlcenter/fingerprinters.svg);
   fill: var(--fingerprinter-color);
 }
 
-label[data-type="cryptominer"] {
+label[data-type="cryptominer"] .icon-small {
-  background-image: url(chrome://browser/skin/controlcenter/cryptominers.svg);
   fill: var(--cryptominer-color);
 }
 
@@ -493,26 +487,9 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
   grid-gap: 10px;
 }
 
-.inline-text-icon {
-  -moz-context-properties: fill;
-  fill: currentColor;
-  background-size: 16px 16px;
-  background-repeat: no-repeat;
-  background-position-x: 3px;
-  background-position-y: 5px;
-  padding: 4px;
-  padding-inline-start: 24px;
-}
-
-[dir="rtl"] #protection-details,
-[dir="rtl"] .inline-text-icon {
-  background-position-x: 100%;
-}
-
 .lockwise-mobile-app-icon {
   -moz-context-properties: fill;
   fill: currentColor;
-  background: url("chrome://browser/content/logos/lockwise-mobile-app.svg") no-repeat center/cover;
   width: 38px;
   height: 35px;
 }
@@ -520,14 +497,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
 .passwords-stored-text,
 .synced-devices-text {
   width: max-content;
-}
+  padding-inline-start: 4px;
-
-.passwords-stored-text {
-  background-image: url("chrome://browser/skin/login.svg");
-}
-
-.synced-devices-text {
-  background-image: url("chrome://browser/skin/sync.svg");
 }
 
 .block {
@@ -567,7 +537,6 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
 }
 
 .monitor-scanned-text {
-  background-image: url("chrome://browser/skin/reload.svg");
   font-size: 0.85em;
 }
 
@@ -597,26 +566,14 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
   background: linear-gradient(162.33deg, #AB71FF 0%, #9059FF 100%);
 }
 
-.email .monitor-icon {
-  background-image: url(chrome://browser/skin/mail.svg);
-}
-
 .breaches {
   background: linear-gradient(162.33deg, #9059FF 0%, #7542E5 100%);
 }
 
-.breaches .monitor-icon {
-  background-image: url(chrome://browser/skin/fxa/avatar.svg);
-}
-
 .passwords {
   background: linear-gradient(162.33deg, #7542E5 0%, #592ACB 100%);
 }
 
-.passwords .monitor-icon {
-  background-image: url(chrome://browser/skin/login.svg);
-}
-
 .monitor-view-full-report {
   grid-row: 2;
   grid-column: span 2;
@@ -637,17 +594,16 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
   margin-inline-end: 3px;
 }
 
-.monitor-stat .monitor-icon {
+.icon-med {
-  background-size: 24px 24px;
+  width: 24px;
-  background-repeat: no-repeat;
+  height: 24px;
   -moz-context-properties: fill,fill-opacity;
   fill: white;
   fill-opacity: 0.65;
-  width: 24px;
-  height: 24px;
   display: block;
   padding: 5px;
-  background-position: center;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .info-text {

browser/components/protections/content/protections.html

@@ -25,7 +25,8 @@
       <h1 id="report-title" data-l10n-id="protection-report-content-title"></h1>
       <div class="card card-no-hover etp-card">
         <div class="card-header">
-          <div class="icon"></div>
+          <img class="icon light" src="chrome://browser/content/logos/tracking-protection.svg"/>
+          <img class="icon dark" src="chrome://browser/content/logos/tracking-protection-dark-theme.svg"/>
           <div class="wrapper">
             <h2 class="card-title" data-l10n-id="etp-card-title"></h2>
             <p class="content" data-l10n-id="etp-card-content"></p>
@@ -40,19 +41,34 @@
               <div id="legend">
                 <label id="graphLegendDescription" data-l10n-id="graph-legend-description"></label>
                 <input id="tab-social" data-type="social" type="radio" name="tabs" aria-labelledby="socialLabel socialTitle" aria-describedby="socialContent" checked>
-                <label id="socialLabel" for="tab-social" data-type="social"></label>
+                <label id="socialLabel" for="tab-social" data-type="social">
+                  <img class="icon-small" src="chrome://browser/skin/controlcenter/socialblock.svg" data-type="social"/>
+                  <span data-type="social"></span>
+                </label>
 
                 <input id="tab-cookie" data-type="cookie" type="radio" name="tabs" aria-labelledby="cookieLabel cookieTitle" aria-describedby="cookieContent">
-                <label id="cookieLabel" for="tab-cookie" data-type="cookie"></label>
+                <label id="cookieLabel" for="tab-cookie" data-type="cookie">
+                  <img class="icon-small" src="chrome://browser/skin/controlcenter/3rdpartycookies.svg" data-type="cookie"/>
+                  <span data-type="cookie"></span>
+                </label>
 
                 <input id="tab-tracker" data-type="tracker" type="radio" name="tabs" aria-labelledby="trackerLabel trackerTitle" aria-describedby="trackerContent">
-                <label id="trackerLabel" for="tab-tracker" data-type="tracker"></label>
+                <label id="trackerLabel" for="tab-tracker" data-type="tracker">
+                  <img class="icon-small" src="chrome://browser/skin/controlcenter/tracker-image.svg" data-type="tracker"/>
+                  <span data-type="tracker"></span>
+                </label>
 
                 <input id="tab-fingerprinter" data-type="fingerprinter" type="radio" name="tabs" aria-labelledby="fingerprinterLabel fingerprinterTitle" aria-describedby="fingerprinterContent">
-                <label id="fingerprinterLabel" for="tab-fingerprinter" data-type="fingerprinter"></label>
+                <label id="fingerprinterLabel" for="tab-fingerprinter" data-type="fingerprinter">
+                  <img class="icon-small" src="chrome://browser/skin/controlcenter/fingerprinters.svg" data-type="fingerprinter"/>
+                  <span data-type="fingerprinter"></span>
+                </label>
 
                 <input id="tab-cryptominer" data-type="cryptominer" type="radio" name="tabs" aria-labelledby="cryptominerLabel cryptominerTitle" aria-describedby="cryptominerContent">
-                <label id="cryptominerLabel" for="tab-cryptominer" data-type="cryptominer"></label>
+                <label id="cryptominerLabel" for="tab-cryptominer" data-type="cryptominer">
+                  <img class="icon-small" src="chrome://browser/skin/controlcenter/cryptominers.svg" data-type="cryptominer"/>
+                  <span data-type="cryptominer"></span>
+                </label>
                 <div id=highlight></div>
                 <div id=highlight-hover></div>
                 <div id="social" class="tab-content">
@@ -94,7 +110,7 @@
      <!-- Markup for Monitor card. -->
       <section class="card card-no-hover monitor-card hidden">
           <div class="card-header">
-            <div class="icon"></div>
+            <img class="icon" src="chrome://browser/content/logos/monitor.svg"/>
             <div class="wrapper">
               <h2 id="monitor-title" class="card-title" data-l10n-id="monitor-title"></h2>
               <p id="monitor-header-content" class="content">
@@ -103,7 +119,8 @@
                 </span>
                 <a target="_blank" href="" id="monitor-link" data-l10n-id="monitor-link"></a>
               </p>
-              <span class="inline-text-icon monitor-scanned-text" data-l10n-id="auto-scan"></span>
+              <img class="icon-small" src="chrome://browser/skin/reload.svg"/>
+              <span class="monitor-scanned-text" data-l10n-id="auto-scan"></span>
             </div>
             <a target="_blank" id="sign-up-for-monitor-link">
               <!-- Insert Monitor link content here. -->
@@ -115,7 +132,7 @@
                 <div class="monitor-info-wrapper">
                   <div class="monitor-block email">
                       <span class="monitor-stat">
-                        <span class="monitor-icon"></span>
+                        <img class="icon-med" src="chrome://browser/skin/mail.svg"/>
                         <span data-type="stored-emails">
                           <!-- Display number of stored emails here. -->
                         </span>
@@ -124,7 +141,7 @@
                     </div>
                     <div class="monitor-block breaches">
                       <span class="monitor-stat">
-                        <span class="monitor-icon"></span>
+                        <img class="icon-med" src="chrome://browser/skin/fxa/avatar.svg"/>
                         <span data-type="known-breaches">
                           <!-- Display number of known breaches here. -->
                         </span>
@@ -133,7 +150,7 @@
                     </div>
                     <div class="monitor-block passwords">
                       <span class="monitor-stat">
-                          <span class="monitor-icon"></span>
+                          <img class="icon-med" src="chrome://browser/skin/login.svg"/>
                           <span data-type="exposed-passwords">
                             <!-- Display number of exposed passwords here. -->
                           </span>
@@ -159,7 +176,7 @@
       <!-- Markup for Lockwise card. -->
       <section class="card card-no-hover lockwise-card hidden">
         <div class="card-header">
-          <div class="icon"></div>
+          <img class="icon" src="chrome://browser/content/logos/lockwise.svg"/>
           <div class="wrapper">
             <h2 id="lockwise-title" class="card-title">
               <!-- Insert Lockwise card title here. -->
@@ -173,7 +190,7 @@
         <div class="card-body hidden">
           <div id="lockwise-body-content" class="body-wrapper">
             <div class="no-logins hidden">
-                <div class="lockwise-mobile-app-icon"></div>
+                <img class="lockwise-mobile-app-icon" src="chrome://browser/content/logos/lockwise-mobile-app.svg"/>
                 <span data-l10n-id="lockwise-no-logins-content">
                   <a target="_blank" id="lockwise-inline-link" data-l10n-name="lockwise-inline-link" href=""></a>
                 </span>
@@ -182,14 +199,18 @@
               <span class="number-of-logins block">
                 <!-- Display number of stored logins here. -->
               </span>
-              <span id="lockwise-passwords-stored" class="inline-text-icon passwords-stored-text">
+              <span class="passwords-stored-text">
+                <img class="icon-small" src= "chrome://browser/skin/login.svg"/>
+                <span id="lockwise-passwords-stored">
                   <!-- Display message for stored logins here. -->
                   <a target="_blank" id="lockwise-how-it-works" data-l10n-name="lockwise-how-it-works" href=""></a>
                 </span>
+              </span>
               <span class="number-of-synced-devices block">
                 <!-- Display number of synced devices here. -->
               </span>
-              <span class="inline-text-icon synced-devices-text">
+              <span class="synced-devices-text">
+                <img class="icon-small" src="chrome://browser/skin/sync.svg"/>
                 <span>
                   <!-- Display message for status of synced devices here. -->
                 </span>

browser/components/protections/content/protections.js

@@ -192,7 +192,7 @@ document.addEventListener("DOMContentLoaded", e => {
     // Set the total number of each type of tracker on the tabs as well as their
     // "Learn More" links
     for (let type of dataTypes) {
-      document.querySelector(`label[data-type=${type}]`).textContent =
+      document.querySelector(`label[data-type=${type}] span`).textContent =
         weekTypeCounts[type];
       const learnMoreLink = document.getElementById(`${type}-link`);
       learnMoreLink.href = RPMGetFormatURLPref(