Bug 1576562 - Convert icons from background-image so they are displayed in high contrast mode. r=johannh
authorErica Wright <ewright@mozilla.com>
Thu, 29 Aug 2019 08:13:36 +0000
changeset 554440 1268324809b4f36078337193ab7becc3e67fffb3
parent 554439 03cc4203321f4f63d08bf290d697e433b72be972
child 554441 aa4ed6460777a5c0a83b309df6ead0e8899ad939
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1576562
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
browser/components/protections/content/protections.css
browser/components/protections/content/protections.html
browser/components/protections/content/protections.js
--- a/browser/components/protections/content/protections.css
+++ b/browser/components/protections/content/protections.css
@@ -77,71 +77,62 @@ h2 {
 
 .card.lockwise-card .card-header,
 .card.monitor-card.no-logins .card-header {
   grid-template-columns: 2fr 6fr 7fr;
 }
 
 
 /* We want to hide certain components depending on its state. */
+.etp-card .icon.dark,
 a.hidden,
 .loading .card-body.hidden,
 .lockwise-card.hidden,
 #lockwise-body-content .has-logins.hidden,
 #lockwise-body-content .no-logins.hidden,
 .monitor-card.hidden,
 .monitor-card.no-logins .card-body,
 .monitor-card.no-logins #monitor-header-content a,
 .monitor-card.no-logins .inline-text-icon.monitor-scanned-text,
 .monitor-card.has-logins #sign-up-for-monitor-link,
 #monitor-body-content .monitor-breached-passwords.hidden,
 .loading a,
 .loading button,
-.loading .card-title,
-.loading .content,
-.loading .monitor-scanned-text {
+.loading .wrapper {
   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 {
       --social-highlight-color: #9661FF;
       --cookie-highlight-color: #2BA8FF;
       --tracker-highlight-color: #39E1BC;
       --fingerprinter-highlight-color: #FFB65E;
       --cryptominer-highlight-color: #BEBECA;
     }
 
-    .etp-card .icon {
-      background: url("chrome://browser/content/logos/tracking-protection-dark-theme.svg") no-repeat center/contain;
+    .etp-card .icon.dark {
+      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%;
   grid-template-rows: 20% auto;
   padding: 0;
   margin-bottom: 25px;
 }
 
@@ -162,18 +153,17 @@ a.hidden,
 
 .card .content {
   margin-bottom: 24px;
   margin-top: 5px;
   font-size: 0.85em;
   cursor: default;
 }
 
-#protection-details,
-.inline-text-icon {
+#protection-details {
   padding: 4px;
   padding-inline-start: 24px;
 }
 
 #protection-details {
   -moz-context-properties: fill;
   fill: currentColor;
   background: url("chrome://browser/skin/settings.svg") no-repeat 3px 3px;
@@ -239,16 +229,17 @@ a.hidden,
   position: relative;
 }
 
 .graph-wrapper-bar {
   height: 100%;
   width: 100%;
   border-radius: 2px;
   overflow: hidden;
+  outline: 1px solid transparent;
 }
 
 .graph-bar:hover {
   cursor: pointer;
 }
 
 .graph-bar.empty {
   height: 0;
@@ -354,57 +345,60 @@ input[type="radio"] {
   position: absolute;
   height: 4px;
   width: 100%;
   bottom: -1px;
   align-self: end;
 }
 
 #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;
-  background-position: left center;
-  background-size: 16px;
-}
-
-[dir="rtl"] #legend label {
-  background-position: right center;
+  display: inline-block;
 }
 
 #legend label:-moz-focusring {
   outline: none;
 }
 
-label[data-type="social"] {
-  background-image: url(chrome://browser/skin/controlcenter/socialblock.svg);
+.icon-small {
+  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"] {
-  background-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg);
+label[data-type="cookie"] .icon-small {
   fill: var(--cookie-color);
 }
 
-label[data-type="tracker"] {
-  background-image: url(chrome://browser/skin/controlcenter/tracker-image.svg);
+label[data-type="tracker"] .icon-small {
   fill: var(--tracker-color);
 }
 
-label[data-type="fingerprinter"] {
-  background-image: url(chrome://browser/skin/controlcenter/fingerprinters.svg);
+label[data-type="fingerprinter"] .icon-small {
   fill: var(--fingerprinter-color);
 }
 
-label[data-type="cryptominer"] {
-  background-image: url(chrome://browser/skin/controlcenter/cryptominers.svg);
+label[data-type="cryptominer"] .icon-small {
   fill: var(--cryptominer-color);
 }
 
 .hover-social label[for="tab-social"],
 .hover-cookie label[for="tab-cookie"],
 .hover-tracker label[for="tab-tracker"],
 .hover-fingerprinter label[for="tab-fingerprinter"],
 .hover-cryptominer label[for="tab-cryptominer"],
@@ -488,51 +482,27 @@ label[for="tab-cryptominer"]:hover ~ #hi
   grid-gap: 0;
 }
 
 #lockwise-body-content > .has-logins {
   grid: 1fr 1fr / minmax(70px, auto) 1fr;
   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;
 }
 
 .passwords-stored-text,
 .synced-devices-text {
   width: max-content;
-}
-
-.passwords-stored-text {
-  background-image: url("chrome://browser/skin/login.svg");
-}
-
-.synced-devices-text {
-  background-image: url("chrome://browser/skin/sync.svg");
+  padding-inline-start: 4px;
 }
 
 .block {
   background-color: var(--grey-60);
   border-radius: 4px;
   text-align: center;
   font-size: 1.125em;
   font-weight: bold;
@@ -562,17 +532,16 @@ label[for="tab-cryptominer"]:hover ~ #hi
 
 .monitor-info-wrapper {
   display: grid;
   grid: 1fr / 1fr 1fr 1fr;
   grid-gap: 10px;
 }
 
 .monitor-scanned-text {
-  background-image: url("chrome://browser/skin/reload.svg");
   font-size: 0.85em;
 }
 
 .monitor-card #monitor-header-content > a {
   display: block;
   margin-block-start: 5px;
   width: max-content;
 }
@@ -592,36 +561,24 @@ label[for="tab-cryptominer"]:hover ~ #hi
   text-align: center;
   padding: 25px 5px 25px 5px;
 }
 
 .email {
   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;
   font-size: 0.85em;
 }
 
 .monitor-stat {
   display: flex;
@@ -632,27 +589,26 @@ label[for="tab-cryptominer"]:hover ~ #hi
   justify-content: center;
   flex-wrap: wrap;
 }
 
 .monitor-icon {
   margin-inline-end: 3px;
 }
 
-.monitor-stat .monitor-icon {
-  background-size: 24px 24px;
-  background-repeat: no-repeat;
+.icon-med {
+  width: 24px;
+  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 {
   font-size: .75em;
   line-height: 13px;
   margin-block-start: 5px;
 }
 
--- a/browser/components/protections/content/protections.html
+++ b/browser/components/protections/content/protections.html
@@ -20,44 +20,60 @@
     <title data-l10n-id="protection-report-page-title"></title>
   </head>
 
   <body>
     <div id="report-content">
       <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>
             <p id="protection-details" role="link" tabindex="0" data-l10n-title="go-to-privacy-settings"></p>
           </div>
         </div>
         <div class="card-body">
           <div class="body-wrapper">
             <p id="graph-week-summary"></p>
             <div id="graph-wrapper">
               <div id="graph" role="table" aria-labelledby="graphLegendDescription"></div>
               <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">
                   <p id="socialTitle" class="content-title" data-l10n-id="social-tab-title"></p>
                   <p id="socialContent" data-l10n-id="social-tab-contant">
                     <a target="_blank" id="social-link" data-l10n-name="learn-more-link"></a>
                   </p>
                 </div>
@@ -89,56 +105,57 @@
             </div>
             <div id="graph-total-summary"></div>
           </div>
         </div>
       </div>
      <!-- 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">
                 <span>
                   <!-- Insert Monitor header content here. -->
                 </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. -->
             </a>
           </div>
           <div class="card-body hidden">
             <div class="body-wrapper">
               <div id="monitor-body-content">
                 <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>
                       </span>
                       <span id="info-monitored-addresses" class="info-text"></span>
                     </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>
                       </span>
                       <span id="info-known-breaches" class="info-text"></span>
                     </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>
                       </span>
                       <span id="info-exposed-passwords" class="info-text"></span>
                     </div>
                 </div>
                 <div id="full-report-link" class="monitor-view-full-report" data-l10n-id="full-report-link">
@@ -154,47 +171,51 @@
                 </div>
               </div>
             </div>
           </div>
       </section>
       <!-- 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. -->
             </h2>
             <p id="lockwise-header-content" class="content">
               <!-- Insert Lockwise header content here. -->
             </p>
           </div>
           <button id="open-about-logins-button" class="primary" data-l10n-id="open-about-logins-button" data-l10n-title="go-to-saved-logins"></button>
         </div>
         <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>
             </div>
             <div class="has-logins hidden">
               <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">
-                 <!-- Display message for stored logins here. -->
-                 <a target="_blank" id="lockwise-how-it-works" data-l10n-name="lockwise-how-it-works" href=""></a>
+              <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>
                 <a id="turn-on-sync" tabindex="0" class="hidden" href="" data-l10n-id="turn-on-sync"></a>
                 <a id="manage-devices" target="_blank" class="hidden" href="" data-l10n-id="manage-devices"></a>
               </span>
             </div>
           </div>
--- a/browser/components/protections/content/protections.js
+++ b/browser/components/protections/content/protections.js
@@ -187,17 +187,17 @@ document.addEventListener("DOMContentLoa
       bar.setAttribute("aria-owns", "day" + i + " " + ariaOwnsString);
       date.setDate(date.getDate() - 1);
     }
     maxColumnCount += 1; // Add the day column in the fake table
     graph.setAttribute("aria-colCount", maxColumnCount);
     // 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(
         `browser.contentblocking.report.${type}.url`
       );
       learnMoreLink.addEventListener("click", () => {
         document.sendTelemetryEvent("click", "trackers_about_link", type);
       });