Bug 1564503 - Add missing pieces to the protection report graph. r=mtigley

Bug 1564503 - Add missing pieces to the graph on protections report.

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

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

browser/components/protections/content/protections.css

@@ -23,6 +23,7 @@
   --blue-60: #0060DF;
   --blue-70: #003eaa;
   --blue-80: #002275;
+  --column-width: 16px;
 }
 
  a {
@@ -189,13 +190,13 @@ body[focuseddatatype=cryptominer] {
 
 #graph-wrapper {
   width: 100%;
-  margin-top: 30px;
+  margin-top: 40px;
 }
 
 #graph {
   display: grid;
   grid: repeat(10, 1fr) max-content / repeat(7, 1fr);
-  height: 200px;
+  height: 175px;
   margin-bottom: 10px;
 }
 
@@ -204,15 +205,29 @@ body[focuseddatatype=cryptominer] {
   grid-row: 1 / -2;
   justify-self: center;
   align-self: flex-end;
-  width: 16px;
-  border-radius: 4px;
-  overflow: hidden;
+  width: var(--column-width);
+  position: relative;
+}
+
+.graph-bar div:nth-child(2){
+  border-radius: 2px 2px 0 0;
+}
+
+.graph-bar div:last-child{
+  border-radius: 0 0 2px 2px;
 }
 
 .graph-bar:hover {
   cursor: pointer;
 }
 
+.graph-bar.empty {
+  height: 0;
+  border: 1px rgba(12,12,13,0.2) solid;
+  border-radius: 4px;
+  cursor: default;
+}
+
 .social-bar {
   background-color: var(--social-color);
 }
@@ -257,6 +272,14 @@ body[focuseddatatype=cryptominer] {
   justify-self: center;
   margin-top: 5px;
   font-size: 0.9rem;
+  width: var(--column-width);
+}
+
+.bar-count {
+  position: absolute;
+  top: -25px;
+	color: #0C0C0D;
+  font-size: .8rem;
 }
 
 /* Legend */
@@ -289,7 +312,7 @@ label[data-type="cookie"] {
 }
 
 label[data-type="tracker"] {
-  background-image: url(chrome://browser/skin/controlcenter/trackers.svg);
+  background-image: url(chrome://browser/skin/controlcenter/tracker-image.svg);
   fill: var(--tracker-color);
   color: var(--tracker-color);
 }

browser/components/protections/content/protections.js

@@ -46,6 +46,10 @@ document.addEventListener("DOMContentLoaded", e => {
       bar.className = "graph-bar";
       if (data[dateString]) {
         let content = data[dateString];
+        let count = document.createElement("div");
+        count.className = "bar-count";
+        count.textContent = content.total;
+        bar.appendChild(count);
         let barHeight = (content.total / largest) * 100;
         bar.style.height = `${barHeight}%`;
         for (let type of dataTypes) {
@@ -60,7 +64,7 @@ document.addEventListener("DOMContentLoaded", e => {
         }
       } else {
         // There were no content blocking events on this day.
-        bar.style.height = `0`;
+        bar.classList.add("empty");
       }
       graph.appendChild(bar);
 

browser/themes/shared/controlcenter/tracker-image.svg

@@ -0,0 +1,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 data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M13 1H3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3zm1 11a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M3.25 10.07l2-1.76a.49.49 0 0 1 .49-.1l1.93.67a.5.5 0 0 0 .56-.17L10 6.37a.5.5 0 0 1 .77 0l2.13 2.27A.58.58 0 0 1 13 9l.12 2.82-10 .45-.08-1.75a.53.53 0 0 1 .21-.45z"/>
+  <circle fill="context-fill" cx="4.89" cy="6.14" r="1"/>
+</svg>

browser/themes/shared/jar.inc.mn

@@ -37,6 +37,7 @@
   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/tracker-image.svg         (../shared/controlcenter/tracker-image.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)