Add checkboxes for domains

components/sidebar/sidebar.scss

@@ -83,9 +83,7 @@
         }
     }
 
-    .warning-container {
+    .dialog-container {
-        background-color: $pale-yellow;
-        border-left: 4px solid $contrast-yellow;
         margin-top: 0.5rem;
         font-size: 0.875rem;
         display: grid;
@@ -107,8 +105,17 @@
             display: flex;
             align-self: flex-start;
         }
-    }
 
+        &--info {
+            background-color: $row-color;
+            border-left: 4px solid $contrast-icd-rentgen-color;
+        }
+
+        &--warning {
+            background-color: $pale-yellow;
+            border-left: 4px solid $contrast-yellow;
+        }
+    }
 
     .button {
         border: 0;
@@ -119,14 +126,14 @@
         height: 2.5rem;
         cursor: pointer;
         background-color: #000 !important;
-        
+
         &--report {
             font-weight: 800;
             padding: 0 1.5rem;
             margin-left: 0.5rem;
             background-color: #000;
             color: #fff;
-            
+
             &:hover {
                 color: $icd-rentgen-color;
                 background-image: linear-gradient(

components/sidebar/sidebar.tsx

@@ -30,6 +30,13 @@ const Sidebar = () => {
     const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState<boolean>(false);
     const [eventCounts, setEventCounts] = useEmitter(getMemory());
     const [marksOccurrence, setMarksOccurrence] = React.useState<boolean>(false);
+    const [infoDataDialogAck, setInfoDataDialogAck] = React.useState<boolean>(
+        localStorage.getItem('infoDataDialogAck') === null
+            ? true
+            : localStorage.getItem('infoDataDialogAck') == 'true'
+            ? true
+            : false
+    );
     const [warningDataDialogAck, setWarningDataDialogAck] = React.useState<boolean>(
         localStorage.getItem('warningDataDialogAck') === null
             ? true
@@ -165,12 +172,32 @@ const Sidebar = () => {
             <section>
                 {stolenDataView ? (
                     <>
+                        {infoDataDialogAck ? (
+                            <section className="dialog-container dialog-container--info">
+                                <span>
+                                    <strong>Uwaga!</strong> Wtyczka Rentgen automatycznie zaznacza
+                                    wybrane domeny, możesz teraz przejść do generowania raportu lub
+                                    dokonać korekty.
+                                </span>
+                                <button
+                                    onClick={() => {
+                                        setInfoDataDialogAck(false);
+                                        localStorage.setItem(
+                                            'infoDataDialogAck',
+                                            false as unknown as string
+                                        );
+                                    }}
+                                >
+                                    <img src="/assets/icons/close_big.svg" width="16" height="16" />
+                                </button>
+                            </section>
+                        ) : null}
                         {warningDataDialogAck ? (
-                            <section className="warning-container">
+                            <section className="dialog-container dialog-container--warning">
                                 <span>
                                     <strong>Uwaga!</strong> Niekoniecznie każda przechwycona poniżej
-                                    informacja jest daną osobową. Niektóre z podanych domen mogą
+                                    informacja jest daną osobową. Niektóre z podanych domen mogą
-                                    należeć do właściciela strony i nie reprezentować podmiotów
+                                    należeć do właściciela strony i nie reprezentować podmiotów
                                     trzecich.
                                 </span>
                                 <button

components/sidebar/stolen-data-cluster.scss

@@ -7,11 +7,16 @@
         flex-flow: column;
         border-bottom: none;
 
+        .domain-checkbox {
+            margin-right: 0.5rem;
+            width: 0.875rem;
+        }
+
         .domain {
             color: $ultra-black-color;
             font-size: 0.875rem;
             font-weight: 600;
-            text-decoration: none;
+            text-decoration: underline;
         }
 
         .subdomains-container {

components/sidebar/stolen-data-cluster.tsx

@@ -39,6 +39,21 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
             data-version={version}
             className={`${entry.isMarked ? 'toggled' : 'untoggled'}`}
         >
+            <td className="checkbox">
+                <input
+                    type="checkbox"
+                    checked={entry.isMarked}
+                    onChange={() => {
+                        entry.toggleMark();
+                        getMemory().emit(
+                            'change',
+                            false,
+                            entry.request.shorthost,
+                            'clicked checkbox'
+                        );
+                    }}
+                />
+            </td>
             <th title={`Nazwa: ${entry.name}\nŹródło: ${entry.source}`}>{entry.name}</th>
             <td className="icons">
                 {entry.source === 'cookie' ? (
@@ -107,15 +122,30 @@ export default function StolenDataCluster({
 }) {
     const cluster = getMemory().getClustersForOrigin(origin)[shorthost];
     const fullHosts = cluster.getFullHosts();
+    const [version] = useEmitter(cluster);
 
     /* console.log('Stolen data cluster!', shorthost, refreshToken); */
 
+    console.log(cluster.getMarkedEntries());
+
     return (
         <div className="stolen-data-cluster-container">
             <header className="domains-container">
-                <a className="domain" href={'https://' + cluster.id}>
+                <div>
-                    {cluster.id}
+                    <input
-                </a>
+                        type="checkbox"
+                        className="domain-checkbox"
+                        data-version={version}
+                        checked={cluster.hasMarks()}
+                        onChange={() => {
+                            cluster.hasMarks() ? cluster.undoMark() : cluster.autoMark();
+                            getMemory().emit('change', true, cluster.id, 'clicked checkbox');
+                        }}
+                    />
+                    <a className="domain" href={'https://' + cluster.id}>
+                        {cluster.id}
+                    </a>
+                </div>
                 <div className="subdomains-container">
                     {fullHosts.map((host, index) => (
                         <a className="subdomain" key={host} href={`https://${host}`}>

components/toolbar/toolbar.scss

@@ -136,21 +136,12 @@ body {
             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: #fff;
-                
+
                 &:hover {
                     color: $icd-rentgen-color;
                     background-image: linear-gradient(

components/toolbar/toolbar.tsx

@@ -214,24 +214,6 @@ const Toolbar = () => {
                         </p>
                     </section>
                     <section className="actions">
-                        <button
-                            className="button button--details"
-                            onClick={() => {
-                                const params = [
-                                    'height=' + screen.height,
-                                    'width=' + screen.width,
-                                    'fullscreen=yes',
-                                ].join(',');
-                                autoMark();
-                                window.open(
-                                    `/components/sidebar/sidebar.html?origin=${origin}`,
-                                    'new_window',
-                                    params
-                                );
-                            }}
-                        >
-                            Pokaż szczegóły
-                        </button>
                         <button
                             className="button button--report"
                             onClick={() => {
@@ -242,7 +224,7 @@ const Toolbar = () => {
                                 ].join(',');
                                 autoMark();
                                 window.open(
-                                    `/components/report-window/report-window.html?origin=${origin}`,
+                                    `/components/sidebar/sidebar.html?origin=${origin}`,
                                     'new_window',
                                     params
                                 );

request-cluster.ts

@@ -174,4 +174,11 @@ export class RequestCluster extends EventEmitter {
             entry.autoMark();
         });
     }
+
+    undoMark() {
+        this.calculateRepresentativeStolenData();
+        this.representativeStolenData.forEach((entry) => {
+            entry.unmark();
+        });
+    }
 }

styles/colors.scss

@@ -6,10 +6,11 @@ $ultra-light-grey: #ededed;
 $blue: #0048d9;
 $icd-yellow: #ffee2c;
 $icd-rentgen-color: #99ffdd;
+$contrast-icd-rentgen-color: #33f9b7;
 $highlight-color: #ccffee;
 $row-color: hsl(160, 100%, 94%);
 $pale-yellow: #fff8e5;
 $pale-red: hsl(10.8, 100%, 94.9%);
 $contrast-yellow: #ffb900;
 $contrast-red: #ff726b;
-$dark-red: hsl(2.8, 100%, 34%);
+$dark-red: hsl(2.8, 100%, 34%);