Update

2022-04-15 10:34:29 +02:00 · 2022-04-15 10:34:29 +02:00 · 51dc008aa7
commit 51dc008aa7
parent d8b6e05efb
5 changed files with 254 additions and 119 deletions
--- 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<string | null>(null);
+    // const [origin, setOrigin] = React.useState<string | null>(null);
+    const url = new URL(document.location.toString());
+    const origin = url.searchParams.get('origin');
+
    const [minValueLength, setMinValueLength] = React.useState<number | null>(
        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 (
        <div className="sidebar">
--- 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;
+        flex-flow: column;
+        justify-content: center;
+        padding-bottom: 1.5rem;
+        border-bottom: 1px solid $light-grey;
+
+        .counters-wrapper {
+            flex-flow: row;
+            display: flex;
+            justify-content: center;
+
            .counters {
                display: flex;
+                flex-flow: column;
+                align-content: flex-start;
+                justify-content: center;
+                margin-right: 1rem;
+
                .counter {
-                font-size: 1rem;
-                font-weight: 900;
-            }
-        }
-        .big-counter {
-            font-size: 6rem;
-            font-size: 900;
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    align-items: center;
+                    display: flex;

+                    img {
+                        margin-right: 0.5rem;
                    }
-    }
-
-    .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;

                    span {
-            padding: 1rem;
+                        margin-right: 2rem;
                    }

-        button {
-            justify-content: flex-end;
-            border: none;
-            cursor: pointer;
-            color: $ultra-black-color;
-            line-height: 1.25rem;
-            background: transparent;
-            padding: 0.5rem 0.5rem;
+                    &:nth-child(1) {
+                        margin-bottom: 1rem;
+                    }
+                }
+            }
+
+            .big-counter {
+                font-size: 6rem;
+                font-weight: 700;
+            }
+        }
+
+        .notice {
+            font-size: 0.875rem;
+            font-weight: 700;
+            text-align: center;
+        }
+    }
+
+    .details {
+        padding-top: 1.5rem;
+
+        p {
+            font-size: 0.875rem;
+            padding-bottom: 1rem;
+        }
+    }
+
+    .about {
+        p {
+            font-size: 0.875rem;
+            font-weight: 700;
+        }
+    }
+
+    .actions {
+        padding: 2rem 0;
        display: flex;
-            align-self: flex-start;
+        justify-content: center;
+        align-items: center;
+
+        a {
+            font-size: 0.875rem;
+            font-weight: 700;
+            color: #000;
+            margin-right: 0.5rem;
+        }
+
+        .button {
+            border: 0;
+            outline: 0;
+            height: 3rem;
+            font-size: 0.875rem;
+            line-height: 0.875rem;
+            cursor: pointer;
+
+            &--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;
+                }
+            }
        }
    }
 }
--- 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<string | null>(null);
-    const [minValueLength, setMinValueLength] = React.useState<number | null>(
-        localStorage.getItem('minValueLength') === null
-            ? 7
-            : (localStorage.getItem('minValueLength') as unknown as number)
-    );
-    const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
    const [stolenDataView, setStolenDataView] = React.useState<boolean>(true);
-    const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState<boolean>(false);
    const [eventCounts, setEventCounts] = useEmitter(getMemory());
-    const [marksOccurrence, setMarksOccurrence] = React.useState<boolean>(false);
-    const [warningDataDialogAck, setWarningDataDialogAck] = React.useState<boolean>(
-        localStorage.getItem('warningDataDialogAck') === null
-            ? true
-            : localStorage.getItem('warningDataDialogAck') == 'true'
-            ? true
-            : false
-    );
-    const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
-        localStorage.getItem('logoVisibility') === null
-            ? false
-            : localStorage.getItem('logoVisibility') == 'true'
-            ? true
-            : false
+    const [cookieDomainCopy, setCookieDomainCopy] = React.useState<string | null>(null);
+    const [exposedOriginDomainCopy, setExposedOriginDomainCopy] = React.useState<string | null>(
+        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 (
        <div className="toolbar">
            <header className="header">
                <img src="../../assets/icon-addon.svg" height={32}></img>
-                <div
-                    className={
-                        logoVisibility
-                            ? 'webpage-metadata'
-                            : 'webpage-metadata webpage-metadata--without-logo'
-                    }
-                >
+                <div className="webpage-metadata">
                    {origin ? (
                        <>
                            <span>Analiza strony</span>
@ -102,39 +130,72 @@ const Toolbar = () => {
            </header>

            <section className="summary">
-                <div>
+                <div className="counters-wrapper">
                    <div className="counters">
-                        <div className="counter counter--browser-history">12</div>
-                        <div className="counter counter--cookies">21</div>
+                        <div className="counter counter--browser-history">
+                            <img src="/assets/icons/warning.svg" width="24" height="24" />
+                            <span data-event={`${eventCounts['*']}`}>
+                                {
+                                    Object.values(getMemory().getClustersForOrigin(origin)).filter(
+                                        (cluster) => cluster.exposesOrigin()
+                                    ).length
+                                }
+                            </span>
                        </div>
-                    <div className="big-counter">33</div>
+                        <div className="counter counter--cookies">
+                            <img src="/assets/icons/cookie.svg" width="24" height="24" />
+                            <span data-event={`${eventCounts['*']}`}>
+                                {
+                                    Object.values(getMemory().getClustersForOrigin(origin)).filter(
+                                        (cluster) => cluster.hasCookies()
+                                    ).length
+                                }
+                            </span>
                        </div>
-                <p>Liczba wykrytych domen podmiotów trzecich</p>
+                    </div>
+                    <div className="big-counter" data-event={`${eventCounts['*']}`}>
+                        {Object.values(getMemory().getClustersForOrigin(origin)).length}
+                    </div>
+                </div>
+                <span className="notice">Liczba wykrytych domen podmiotów trzecich</span>
            </section>

            <section className="details">
-                <p>
-                    Strona wp.pl wysłała informacje o części Twojej historii przeglądania do
-                    facebook.com, adnsx.com (i 43 innych).
-                </p>
-                <p>
-                    Dokonała też zapisu i odczytu plików Cookie dla domen doubleclick.google.net,
-                    3dsio.com (i 59 innych).
-                </p>
+                <p>{exposedOriginDomainCopy}</p>
+                <p>{cookieDomainCopy}</p>
            </section>

-            <section className="warning-container">
-                <span>
-                    <strong>Takie przetwarzanie danych może być niezgodne z prawem.</strong> Kliknij
-                    w przycisk <i>Generuj raport</i>, aby pomóc ustalić, czy ta strona nie narusza
+            {exposedOriginDomainCopy !== null || cookieDomainCopy !== null ? (
+                <Fragment>
+                    <section className="about">
+                        <p>
+                            Takie przetwarzanie danych może być niezgodne z prawem. Kliknij w
+                            przycisk „Generuj raport”, aby pomóc ustalić, czy ta strona nie narusza
                            RODO.
-                </span>
+                        </p>
                    </section>
-
                    <section className="actions">
-                <a href="">Pokaż szczegóły</a>
-                <button>Generuj raport</button>
+                        <button
+                            className="button button--details"
+                            onClick={() => {
+                                const params = [
+                                    'height=' + screen.height,
+                                    'width=' + screen.width,
+                                    'fullscreen=yes',
+                                ].join(',');
+                                window.open(
+                                    `/components/sidebar/sidebar.html?origin=${origin}`,
+                                    'new_window',
+                                    params
+                                );
+                            }}
+                        >
+                            Pokaż szczegóły
+                        </button>
+                        <button className="button button--report">Generuj raport</button>
                    </section>
+                </Fragment>
+            ) : null}
        </div>
    );
 };
--- 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
--- 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;