Update

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">

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{
+            justify-content: center;
-                font-size: 1rem;
-                font-weight: 900;
-            }
-        }
-        .big-counter {
-            font-size: 6rem;
-            font-size: 900;
 
-        }
+            .counters {
-    }
+                display: flex;
+                flex-flow: column;
+                align-content: flex-start;
+                justify-content: center;
+                margin-right: 1rem;
 
-    .warning-container {
+                .counter {
-        background-color: $pale-yellow;
+                    font-size: 1.25rem;
-        border-left: 4px solid $contrast-yellow;
+                    font-weight: 700;
-        margin-top: 0.5rem;
+                    align-items: center;
-        font-size: 0.875rem;
+                    display: flex;
-        display: grid;
+
-        grid-template-columns: calc(100% - 2rem) 2rem;
+                    img {
-        align-items: flex-start;
+                        margin-right: 0.5rem;
+                    }
 
                     span {
-            padding: 1rem;
+                        margin-right: 2rem;
                     }
 
-        button {
+                    &:nth-child(1) {
-            justify-content: flex-end;
+                        margin-bottom: 1rem;
-            border: none;
+                    }
-            cursor: pointer;
+                }
-            color: $ultra-black-color;
+            }
-            line-height: 1.25rem;
+
-            background: transparent;
+            .big-counter {
-            padding: 0.5rem 0.5rem;
+                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;
+                }
+            }
         }
     }
 }

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 [cookieDomainCopy, setCookieDomainCopy] = React.useState<string | null>(null);
-    const [warningDataDialogAck, setWarningDataDialogAck] = React.useState<boolean>(
+    const [exposedOriginDomainCopy, setExposedOriginDomainCopy] = React.useState<string | null>(
-        localStorage.getItem('warningDataDialogAck') === null
+        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
     );
 
     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))) {
+        const exposedOriginDomains = Object.values(getMemory().getClustersForOrigin(origin))
-            if (cluster.hasMarks()) {
+            .filter((cluster) => cluster.exposesOrigin())
-                return setMarksOccurrence(true);
+            .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
+                <div className="webpage-metadata">
-                    className={
-                        logoVisibility
-                            ? 'webpage-metadata'
-                            : 'webpage-metadata webpage-metadata--without-logo'
-                    }
-                >
                     {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--browser-history">
-                        <div className="counter counter--cookies">21</div>
+                            <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>
+                <p>{exposedOriginDomainCopy}</p>
-                    Strona wp.pl wysłała informacje o części Twojej historii przeglądania do
+                <p>{cookieDomainCopy}</p>
-                    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>
             </section>
 
-            <section className="warning-container">
+            {exposedOriginDomainCopy !== null || cookieDomainCopy !== null ? (
-                <span>
+                <Fragment>
-                    <strong>Takie przetwarzanie danych może być niezgodne z prawem.</strong> Kliknij
+                    <section className="about">
-                    w przycisk <i>Generuj raport</i>, aby pomóc ustalić, czy ta strona nie narusza
+                        <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
-                <button>Generuj raport</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>
     );
 };

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

styles/global.scss

@@ -10,11 +10,7 @@
     user-select: none;
 }
 
-body {
+
-    width: 400px;
-    height: 600px;
-    overflow-x: hidden;
-}
 
 html {
     font-size: 1rem;