Bug 1563586 - Add icons to graph legend. r=mtigley

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

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

Author: Erica Wright

browser/components/protections/content/protections.css

@@ -215,32 +215,44 @@ input {
   display: none;
 }
 
-label {
+#legend label {
   display: inline-block;
   margin: 0 0 -1px;
-  padding: 15px 25px;
-  font-weight: 600;
-  text-align: center;
-  border: 1px solid transparent;
+  padding: 15px 23px;
+  border: 3px solid transparent;
+  -moz-context-properties: fill;
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: 16px;
 }
 
 label[data-type="social"] {
+  background-image: url(chrome://browser/skin/controlcenter/socialblock.svg);
+  fill: var(--social-color);
   color: var(--social-color);
 }
 
 label[data-type="crossSite"] {
+  background-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg);
+  fill: var(--crossSite-color);
   color: var(--crossSite-color);
 }
 
 label[data-type="tracker"] {
+  background-image: url(chrome://browser/skin/controlcenter/trackers.svg);
+  fill: var(--tracker-color);
   color: var(--tracker-color);
 }
 
 label[data-type="fingerprinter"] {
+  background-image: url(chrome://browser/skin/controlcenter/fingerprinters.svg);
+  fill: var(--fingerprinter-color);
   color: var(--fingerprinter-color);
 }
 
 label[data-type="cryptominer"] {
+  background-image: url(chrome://browser/skin/controlcenter/cryptominers.svg);
+  fill: var(--cryptominer-color);
   color: var(--cryptominer-color);
 }
 
@@ -254,7 +266,7 @@ label:hover {
   cursor: pointer;
 }
 
-input:checked + label {
+#legend input:checked + label {
   border-bottom: 3px solid var(--tab-highlight);
 }
 

browser/components/protections/content/protections.html

@@ -41,19 +41,19 @@ <h3 class="card-title">
               <div id="graph"></div>
               <div id="legend">
                 <input id="tab-social" data-type="social" type="radio" name="tabs" checked>
-                <label for="tab-social" data-type="social">Social</label>
+                <label for="tab-social" data-type="social">345</label>
 
                 <input id="tab-crossSite" data-type="crossSite" type="radio" name="tabs">
-                <label for="tab-crossSite" data-type="crossSite">cross-site-tracker</label>
+                <label for="tab-crossSite" data-type="crossSite">123</label>
 
                 <input id="tab-tracker" data-type="tracker" type="radio" name="tabs">
-                <label for="tab-tracker" data-type="tracker">ad-tracker</label>
+                <label for="tab-tracker" data-type="tracker">1</label>
 
                 <input id="tab-fingerprinter" data-type="fingerprinter" type="radio" name="tabs">
-                <label for="tab-fingerprinter" data-type="fingerprinter">fingerprinter</label>
+                <label for="tab-fingerprinter" data-type="fingerprinter">45666</label>
 
                 <input id="tab-cryptominer" data-type="cryptominer" type="radio" name="tabs">
-                <label for="tab-cryptominer" data-type="cryptominer">cryptominer</label>
+                <label for="tab-cryptominer" data-type="cryptominer">7</label>
 
                 <div id="social" class="tab-content">
                   <p class="content-title">Social Media Trackers</p>

browser/themes/shared/controlcenter/socialblock.svg

@@ -36,6 +36,7 @@
   skin/classic/browser/controlcenter/fingerprinters-disabled.svg (../shared/controlcenter/fingerprinters-disabled.svg)
   skin/classic/browser/controlcenter/info.svg                  (../shared/controlcenter/info.svg)
   skin/classic/browser/controlcenter/permissions.svg           (../shared/controlcenter/permissions.svg)
+  skin/classic/browser/controlcenter/socialblock.svg           (../shared/controlcenter/socialblock.svg)
   skin/classic/browser/controlcenter/trackers.svg              (../shared/controlcenter/trackers.svg)
   skin/classic/browser/controlcenter/trackers-disabled.svg     (../shared/controlcenter/trackers-disabled.svg)
   skin/classic/browser/controlcenter/tracking-protection.svg   (../shared/controlcenter/tracking-protection.svg)