From 54e2754d3c8d4ec4179fafcfd0a8d1b634a550b0 Mon Sep 17 00:00:00 2001 From: xsalon00 Date: Feb 26 2022 19:36:56 +0000 Subject: Add FPD report styling --- diff --git a/common/fp_detect_background.js b/common/fp_detect_background.js index f1f6495..f5aa944 100644 --- a/common/fp_detect_background.js +++ b/common/fp_detect_background.js @@ -742,7 +742,7 @@ browser.notifications.onClicked.addListener((notificationId) => { latestEvals: latestEvals, exceptionWrappers: exceptionWrappers }); - }, 1000) + }, 500) } }); } diff --git a/common/fp_report-dark.css b/common/fp_report-dark.css new file mode 100644 index 0000000..1cd9283 --- /dev/null +++ b/common/fp_report-dark.css @@ -0,0 +1,11 @@ +/* + * SPDX-FileCopyrightText: 2022 Marek Saloň + * + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +@import "popup-dark.css"; + +.fpd-group > .fpd-group { + border-left: 2px solid #444; +} diff --git a/common/fp_report.css b/common/fp_report.css new file mode 100644 index 0000000..3f52f8a --- /dev/null +++ b/common/fp_report.css @@ -0,0 +1,56 @@ +/* + + * SPDX-FileCopyrightText: 2022 2021 Marek Saloň + * + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +body { + padding: 1em; + margin: 1em; + min-width: 38em; +} + +header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-size: large; + margin-bottom: .5em; + border-bottom: 2px solid #aaa; +} + +#logo { + width: 32px; +} + +#titletext { + display: block; + font-size: large; + text-align: center; +} + +.fpd-group > .fpd-group { + padding-left: 2em; + border-left: 2px solid #aaa; +} + +.fpd-group > h2 { + display: inline-block; + margin: 0px 0px; + -webkit-transition: color 0.5s; + -moz-transition: color 0.5s; + -ms-transition: color 0.5s; + -o-transition: color 0.5s; + transition: color 0.5s; +} + +.fpd-group > h2.active:hover { + cursor: pointer; + color: #e76f51; +} + +.dot { + color: #e76f51; +} \ No newline at end of file diff --git a/common/fp_report.html b/common/fp_report.html index f82ec18..2e29411 100644 --- a/common/fp_report.html +++ b/common/fp_report.html @@ -7,25 +7,21 @@ SPDX-License-Identifier: GPL-3.0-or-later -
+

FingerPrint Detector Report

-

JShelter - FingerPrint Detector report

- -
- -
- +
+ +
diff --git a/common/fp_report.js b/common/fp_report.js index 81603b4..eb6ac81 100644 --- a/common/fp_report.js +++ b/common/fp_report.js @@ -76,10 +76,46 @@ function createReport(tabId, groups, latestEvals, exceptionWrappers) { let generateResource = (resource) => { if (processedEvals[resource]) { let accessCount = processedEvals[resource].accesses >= 1000 ? "1000+" : processedEvals[resource].accesses; - html += "

" + `${resource} - ${exceptionWrappers.includes(resource) ? "n/a" : accessCount}` + "

"; + html += `

- ${resource} (${exceptionWrappers.includes(resource) ? "n/a" : accessCount})

`; } } - + generateGroup(rootGroup); report.innerHTML += html; + + let toggleResources = (event) => { + console.log(event); + let parent = event.target.parentElement; + for (let i = 0; i < parent.children.length; i++) { + let child = parent.children[i]; + if (child.tagName == "H4") { + if (child.style.display === "none") { + child.style.display = "block"; + } else { + child.style.display = "none"; + } + } + } + } + + for (let element of document.querySelectorAll(".fpd-group")) { + let button; + let haveChild = false; + + for (let i = 0; i < element.children.length; i++) { + let child = element.children[i]; + if (child.tagName == "H2") { + button = child; + } + if (child.tagName == "H4") { + haveChild = true; + } + } + + if (button && haveChild) { + button.classList.add("active"); + button.addEventListener("click", toggleResources); + } + } + }