From 51dc008aa7a60296a9a4790cd31ca2c5766ebcb1 Mon Sep 17 00:00:00 2001 From: Arkadiusz Wieczorek Date: Fri, 15 Apr 2022 10:34:29 +0200 Subject: [PATCH] Update --- components/sidebar/sidebar.tsx | 26 ++--- components/toolbar/toolbar.scss | 147 +++++++++++++++++++------ components/toolbar/toolbar.tsx | 185 +++++++++++++++++++++----------- memory.ts | 9 +- styles/global.scss | 6 +- 5 files changed, 254 insertions(+), 119 deletions(-) diff --git a/components/sidebar/sidebar.tsx b/components/sidebar/sidebar.tsx index b28b2f5..8a292fd 100644 --- a/components/sidebar/sidebar.tsx +++ b/components/sidebar/sidebar.tsx @@ -4,7 +4,6 @@ import Options from '../../options'; import { StolenData } from './stolen-data'; import { getshorthost, useEmitter } from '../../util'; import { getMemory } from '../../memory'; -browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' }); async function getCurrentTab() { const [tab] = await browser.tabs.query({ @@ -19,7 +18,10 @@ import './../../styles/global.scss'; import './sidebar.scss'; const Sidebar = () => { - const [origin, setOrigin] = React.useState(null); + // const [origin, setOrigin] = React.useState(null); + const url = new URL(document.location.toString()); + const origin = url.searchParams.get('origin'); + const [minValueLength, setMinValueLength] = React.useState( localStorage.getItem('minValueLength') === null ? 7 @@ -45,23 +47,7 @@ const Sidebar = () => { : false ); - React.useEffect(() => { - const listener = async () => { - console.log('tab change!'); - const tab = await getCurrentTab(); - const url = new URL(tab.url); - if (url.origin.startsWith('moz-extension')) { - return; - } - setOrigin(url.origin); - }; - - browser.tabs.onUpdated.addListener(listener); - listener(); - return () => { - browser.tabs.onUpdated.removeListener(listener); - }; - }); + React.useEffect(() => { for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) { @@ -71,7 +57,7 @@ const Sidebar = () => { } return setMarksOccurrence(false); - }, [eventCounts['*'], origin]); + }, [eventCounts['*']]); return (
diff --git a/components/toolbar/toolbar.scss b/components/toolbar/toolbar.scss index 09dd1a9..3fb1dae 100644 --- a/components/toolbar/toolbar.scss +++ b/components/toolbar/toolbar.scss @@ -1,11 +1,16 @@ @import '../../styles/colors.scss'; +body { + width: 400px; + overflow-x: hidden; +} + .toolbar { - padding: 0 0.75rem; + padding: 0.125rem 1rem; .header { display: grid; - grid-template-columns: 2.75rem 1fr 1.25rem; + grid-template-columns: 1.75rem 1fr 1.25rem; align-items: center; max-height: 3.5rem; min-height: 3.5rem; @@ -21,13 +26,13 @@ flex-flow: column; flex-wrap: nowrap; font-size: 0.875rem; - font-weight: 600; + font-weight: 700; justify-content: center; padding-left: 1rem; color: #000; &--hyperlink { - font-weight: 400; + font-weight: 600; color: $ultra-black-color; max-height: 2rem; overflow: hidden; @@ -44,43 +49,125 @@ .summary { display: flex; - .counters{ + flex-flow: column; + justify-content: center; + padding-bottom: 1.5rem; + border-bottom: 1px solid $light-grey; + + .counters-wrapper { + flex-flow: row; display: flex; - .counter{ - font-size: 1rem; - font-weight: 900; + justify-content: center; + + .counters { + display: flex; + flex-flow: column; + align-content: flex-start; + justify-content: center; + margin-right: 1rem; + + .counter { + font-size: 1.25rem; + font-weight: 700; + align-items: center; + display: flex; + + img { + margin-right: 0.5rem; + } + + span { + margin-right: 2rem; + } + + &:nth-child(1) { + margin-bottom: 1rem; + } + } + } + + .big-counter { + font-size: 6rem; + font-weight: 700; } } - .big-counter { - font-size: 6rem; - font-size: 900; + .notice { + font-size: 0.875rem; + font-weight: 700; + text-align: center; } } - .warning-container { - background-color: $pale-yellow; - border-left: 4px solid $contrast-yellow; - margin-top: 0.5rem; - font-size: 0.875rem; - display: grid; - grid-template-columns: calc(100% - 2rem) 2rem; - align-items: flex-start; + .details { + padding-top: 1.5rem; - span { - padding: 1rem; + p { + font-size: 0.875rem; + padding-bottom: 1rem; + } + } + + .about { + p { + font-size: 0.875rem; + font-weight: 700; + } + } + + .actions { + padding: 2rem 0; + display: flex; + justify-content: center; + align-items: center; + + a { + font-size: 0.875rem; + font-weight: 700; + color: #000; + margin-right: 0.5rem; } - button { - justify-content: flex-end; - border: none; + .button { + border: 0; + outline: 0; + height: 3rem; + font-size: 0.875rem; + line-height: 0.875rem; cursor: pointer; - color: $ultra-black-color; - line-height: 1.25rem; - background: transparent; - padding: 0.5rem 0.5rem; - display: flex; - align-self: flex-start; + + &--details { + margin-right: 0.5rem; + color: #000; + text-decoration:underline; + background-color: #fff; + font-weight: 700; + } + + &--report { + font-weight: 800; + padding: 0 1.5rem; + margin-left: 0.5rem; + background-color: #000; + color: $icd-rentgen-color; + + &:hover { + background-image: linear-gradient( + to right, + $icd-rentgen-color 0%, + $icd-rentgen-color 4%, + #000 4%, + #000 100% + ); + animation: slidebg 1s cubic-bezier(0.19, 1, 0.22, 1) infinite; + } + } + + @keyframes slidebg { + to { + background-position: 155px; + } + } } } } diff --git a/components/toolbar/toolbar.tsx b/components/toolbar/toolbar.tsx index ee744b4..744d154 100644 --- a/components/toolbar/toolbar.tsx +++ b/components/toolbar/toolbar.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import React, { Fragment, ReactElement } from 'react'; import ReactDOM from 'react-dom'; import { useEmitter } from '../../util'; import { getMemory } from '../../memory'; -browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' }); async function getCurrentTab() { const [tab] = await browser.tabs.query({ @@ -17,34 +16,15 @@ import './toolbar.scss'; const Toolbar = () => { const [origin, setOrigin] = React.useState(null); - const [minValueLength, setMinValueLength] = React.useState( - localStorage.getItem('minValueLength') === null - ? 7 - : (localStorage.getItem('minValueLength') as unknown as number) - ); - const [cookiesOnly, setCookiesOnly] = React.useState(false); const [stolenDataView, setStolenDataView] = React.useState(true); - const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState(false); const [eventCounts, setEventCounts] = useEmitter(getMemory()); - const [marksOccurrence, setMarksOccurrence] = React.useState(false); - const [warningDataDialogAck, setWarningDataDialogAck] = React.useState( - localStorage.getItem('warningDataDialogAck') === null - ? true - : localStorage.getItem('warningDataDialogAck') == 'true' - ? true - : false - ); - const [logoVisibility, setLogoVisibility] = React.useState( - localStorage.getItem('logoVisibility') === null - ? false - : localStorage.getItem('logoVisibility') == 'true' - ? true - : false + const [cookieDomainCopy, setCookieDomainCopy] = React.useState(null); + const [exposedOriginDomainCopy, setExposedOriginDomainCopy] = React.useState( + null ); React.useEffect(() => { const listener = async () => { - console.log('tab change!'); const tab = await getCurrentTab(); const url = new URL(tab.url); if (url.origin.startsWith('moz-extension')) { @@ -61,26 +41,74 @@ const Toolbar = () => { }); React.useEffect(() => { - for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) { - if (cluster.hasMarks()) { - return setMarksOccurrence(true); - } - } + const exposedOriginDomains = Object.values(getMemory().getClustersForOrigin(origin)) + .filter((cluster) => cluster.exposesOrigin()) + .map((cluster) => cluster.id); - return setMarksOccurrence(false); + setExposedOriginDomainCopy(''); + const first_sentence = `Strona ${origin} wysłała informacje o części Twojej historii przeglądania do `; + + switch (exposedOriginDomains.length) { + case 0: + return null; + case 1: + return setExposedOriginDomainCopy(first_sentence + `${exposedOriginDomains[0]}.`); + case 2: + return setExposedOriginDomainCopy( + first_sentence + `${exposedOriginDomains[0]} oraz ${exposedOriginDomains[1]}.` + ); + case 3: + return setExposedOriginDomainCopy( + first_sentence + + `${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} oraz ${exposedOriginDomains[2]}.` + ); + default: + return setExposedOriginDomainCopy( + first_sentence + + `${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} (i ${ + exposedOriginDomains.length - 2 < 2 + ? 2 + : exposedOriginDomains.length - 2 + } innych).` + ); + } + }, [eventCounts['*'], origin]); + + React.useEffect(() => { + const cookieDomains = Object.values(getMemory().getClustersForOrigin(origin)) + .filter((cluster) => cluster.hasCookies()) + .map((cluster) => cluster.id); + const first_sentence = `Strona ${origin} dokonała zapisu i odczytu plików Cookie dla domen `; + + switch (cookieDomains.length) { + case 0: + return null; + case 1: + return setCookieDomainCopy(first_sentence + `${cookieDomains[0]}.`); + case 2: + return setCookieDomainCopy( + first_sentence + `${cookieDomains[0]} oraz ${cookieDomains[1]}.` + ); + case 3: + return setCookieDomainCopy( + first_sentence + + `${cookieDomains[0]}, ${cookieDomains[1]} oraz ${cookieDomains[2]}.` + ); + default: + return setCookieDomainCopy( + first_sentence + + `${cookieDomains[0]}, ${cookieDomains[1]} (i ${ + cookieDomains.length - 2 < 2 ? 2 : cookieDomains.length - 2 + } innych).` + ); + } }, [eventCounts['*'], origin]); return (
-
+
{origin ? ( <> Analiza strony @@ -102,39 +130,72 @@ const Toolbar = () => {
-
+
-
12
-
21
+
+ + + { + Object.values(getMemory().getClustersForOrigin(origin)).filter( + (cluster) => cluster.exposesOrigin() + ).length + } + +
+
+ + + { + Object.values(getMemory().getClustersForOrigin(origin)).filter( + (cluster) => cluster.hasCookies() + ).length + } + +
+
+
+ {Object.values(getMemory().getClustersForOrigin(origin)).length}
-
33
-

Liczba wykrytych domen podmiotów trzecich

+ Liczba wykrytych domen podmiotów trzecich
-

- Strona wp.pl wysłała informacje o części Twojej historii przeglądania do - facebook.com, adnsx.com (i 43 innych). -

-

- Dokonała też zapisu i odczytu plików Cookie dla domen doubleclick.google.net, - 3dsio.com (i 59 innych). -

+

{exposedOriginDomainCopy}

+

{cookieDomainCopy}

-
- - Takie przetwarzanie danych może być niezgodne z prawem. Kliknij - w przycisk Generuj raport, aby pomóc ustalić, czy ta strona nie narusza - RODO. - -
- -
- Pokaż szczegóły - -
+ {exposedOriginDomainCopy !== null || cookieDomainCopy !== null ? ( + +
+

+ Takie przetwarzanie danych może być niezgodne z prawem. Kliknij w + przycisk „Generuj raport”, aby pomóc ustalić, czy ta strona nie narusza + RODO. +

+
+
+ + +
+ + ) : null}
); }; diff --git a/memory.ts b/memory.ts index 8bd945e..678f6e1 100644 --- a/memory.ts +++ b/memory.ts @@ -6,7 +6,7 @@ import { RequestCluster } from './request-cluster'; function setDomainsNumber(counter: number, tabId: number) { browser.browserAction.setBadgeText({ text: counter.toString(), tabId }); browser.browserAction.setTitle({ - title: `Rentgen - liczba wykrytych podmiotów: ${counter}`, + title: 'Rentgen', tabId, }); } @@ -30,7 +30,12 @@ export default class Memory extends EventEmitter { this.origin_to_history[request.origin][shorthost].add(request); this.emit('change', false, shorthost, 'registered request(shorthost emit)'); - console.log(this.getClustersForOrigin(request.origin)); + Object.values(this.getClustersForOrigin(request.origin)).some((cluster) => + cluster.hasCookies() + ) + ? browser.browserAction.setBadgeBackgroundColor({ color: '#ff726b' }) + : browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' }); + setDomainsNumber( Object.values(this.getClustersForOrigin(request.origin)).length, request.tabId diff --git a/styles/global.scss b/styles/global.scss index 7b94ed0..0332962 100644 --- a/styles/global.scss +++ b/styles/global.scss @@ -10,11 +10,7 @@ user-select: none; } -body { - width: 400px; - height: 600px; - overflow-x: hidden; -} + html { font-size: 1rem;