diff --git a/browser/components/protections/content/protections.css b/browser/components/protections/content/protections.css index 3e71a15d10a3..739e22d25c22 100644 --- a/browser/components/protections/content/protections.css +++ b/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); } diff --git a/browser/components/protections/content/protections.js b/browser/components/protections/content/protections.js index 9733d07e7ce8..4c081e7e5c35 100644 --- a/browser/components/protections/content/protections.js +++ b/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); diff --git a/browser/themes/shared/controlcenter/tracker-image.svg b/browser/themes/shared/controlcenter/tracker-image.svg new file mode 100644 index 000000000000..7adb17533a9e --- /dev/null +++ b/browser/themes/shared/controlcenter/tracker-image.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn index 47639f1fec4e..41afa4e9b592 100644 --- a/browser/themes/shared/jar.inc.mn +++ b/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)