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

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

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

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 @@
               <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

@@ -0,0 +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 data-name="social-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.51 6.46a1.87 1.87 0 0 0-.57-2.29c.21-1.31-.59-1.78-1.91-2.12A14.6 14.6 0 0 0 9.71 2c-1.43 0-2.71.19-4.18.25S2.49 2 1 2v6h3a3.65 3.65 0 0 1 .83.66.61.61 0 0 1 .1.23 4.6 4.6 0 0 0 .58.94A11.59 11.59 0 0 1 8 14.58c.32.5-.65 1.23.59 1.38s1.7-2.1 1.3-3-.89-2.67 0-2.46l.65.15c1.15.35 2.85.49 3.7-.08s.44-1.09.33-1.76a1.73 1.73 0 0 0-.06-2.35z"/>
+</svg>

browser/themes/shared/jar.inc.mn

@@ -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)