Update

sidebar/sidebar.scss

@@ -63,6 +63,13 @@ nav {
             }
         }
 
+        &:disabled {
+            color: $light-grey;
+            svg path {
+                fill: $light-grey;
+            }
+        }
+
         span {
             padding-left: 0.5rem;
             font-size: 0.875rem;

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';
-import { RequestCluster } from '../request-cluster';
 import InfoCircleIcon from '../assets/icons/info_circle_outline.svg';
 import SettingsIcon from '../assets/icons/settings.svg';
 import TrashIcon from '../assets/icons/trash_full.svg';
@@ -30,6 +29,7 @@ const Sidebar = () => {
     const [cookiesOrOriginOnly, setCookiesOrOriginOnly] =
         useState<boolean>(false);
     const [counter, setCounter] = useEmitter(getMemory());
+    const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
 
     useEffect(() => {
         const listener = async (data: any) => {
@@ -47,6 +47,18 @@ const Sidebar = () => {
         };
     });
 
+    useEffect(() => {
+        for (const cluster of Object.values(
+            getMemory().getClustersForOrigin(origin)
+        )) {
+            if (cluster.hasMarks()) {
+                return setMarksOccurrence(true);
+            }
+        }
+        return setMarksOccurrence(false);
+    }, [counter]);
+
+
     return (
         <Fragment>
             {/* <div id="selector">
@@ -93,15 +105,28 @@ const Sidebar = () => {
                             origin,
                             getshorthost(new URL(origin).host)
                         );
+                        setMarksOccurrence(false);
                     }}
                 >
                     {/* {stolenDataView ? 'Options' : 'Data'}
                      */}
                     <TrashIcon />
-                    <span>Wyczyść ciasteczka tej domeny</span>
+                    <span>Wyczyść ciasteczka first-party</span>
                 </button>
                 <button
-                    // disabled={RequestCluster.hasMarks()}
+                    onClick={() => {
+                        getMemory().removeRequestsFor(origin);
+                        setCounter((c) => c + 1);
+                        setMarksOccurrence(false);
+                    }}
+                >
+                    {/* {stolenDataView ? 'Options' : 'Data'}
+                     */}
+                    <TrashIcon />
+                    <span>Wyczyść pamięć</span>
+                </button>
+                <button
+                    disabled={!marksOccurrence}
                     onClick={() => {
                         const params = [
                             'height=' + screen.height,
@@ -142,7 +167,7 @@ const Sidebar = () => {
                 )}
             </section>
 
-            <footer>Footer</footer>
+            <footer>Footer marks → {JSON.stringify(marksOccurrence)}</footer>
         </Fragment>
     );
 };

sidebar/stolen-data-cluster.tsx

@@ -1,154 +1,170 @@
-import React from "react";
-import { getMemory } from "../memory";
-import { StolenDataEntry } from "../stolen-data-entry";
+import React from 'react';
+import { getMemory } from '../memory';
+import { StolenDataEntry } from '../stolen-data-entry';
 
-import { maskString, useEmitter } from "../util";
+import { maskString, useEmitter } from '../util';
 
 const MAX_STRING_VALUE_LENGTH = 100;
 
 function StolenDataValue({
-  entry,
+    entry,
 }: {
-  entry: StolenDataEntry;
-  prefixKey?: string;
+    entry: StolenDataEntry;
+    prefixKey?: string;
 }) {
-  const [version] = useEmitter(entry);
-  let body = null;
-  if (!entry.value) {
-    body = <></>;
-  } else {
-    body = (
-      <div data-version={version}>
-        {maskString(entry.value, 1, MAX_STRING_VALUE_LENGTH)}
-      </div>
+    const [version] = useEmitter(entry);
+    let body = null;
+    if (!entry.value) {
+        body = <></>;
+    } else {
+        body = (
+            <div data-version={version}>
+                {maskString(entry.value, 1, MAX_STRING_VALUE_LENGTH)}
+            </div>
+        );
+    }
+    return (
+        <div
+            onClick={(e) => {
+                entry.toggleMark();
+                e.stopPropagation();
+            }}
+            style={{ color: entry.isMarked ? 'black' : 'gray' }}
+        >
+            {body}
+        </div>
     );
-  }
-  return (
-    <div
-      onClick={(e) => {
-        entry.toggleMark();
-        e.stopPropagation();
-      }}
-      style={{ color: entry.isMarked ? "black" : "gray" }}
-    >
-      {body}
-    </div>
-  );
 }
 
-function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
-  const [version] = useEmitter(entry);
-  return (
-    <tr data-key={entry.id} data-version={version}>
-      <td>
-        <input
-          type="checkbox"
-          checked={entry.isMarked}
-          onChange={() => entry.toggleMark()}
-        />
-      </td>
-      <th
-        style={{
-          width: "100px",
-          overflowWrap: "anywhere",
-        }}
-        title={"Źródło: " + entry.source}
-        onClick={() => entry.toggleMark()}
-      >
-        {entry.name}
-      </th>
-      <td style={{ whiteSpace: "nowrap" }}>
-        {entry.source === "cookie" ? (
-          <span title="Dane przechowywane w Cookies">🍪</span>
-        ) : entry.request.hasCookie() ? (
-          <span
-            title="Wysłane w zapytaniu opatrzonym cookies"
-            style={{ opacity: 0.5, fontSize: "0.5em" }}
-          >
-            🍪
-          </span>
-        ) : null}
-        {entry.exposesOrigin() ? (
-          <span title="Pokazuje część historii przeglądania">⚠️</span>
-        ) : entry.request.exposesOrigin() ? (
-          <span
-            title="Jest częścią zapytania, które ujawnia historię przeglądania"
-            style={{ opacity: 0.5, fontSize: "0.5em" }}
-          >
-            ⚠️
-          </span>
-        ) : null}
-      </td>
-      <td style={{ wordWrap: "anywhere" as any }}>
-        <StolenDataValue entry={entry} />
-      </td>
-    </tr>
-  );
+function StolenDataRow({
+    entry,
+    refresh,
+}: {
+    entry: StolenDataEntry;
+    refresh: Function;
+}) {
+    const [version] = useEmitter(entry);
+    return (
+        <tr data-key={entry.id} data-version={version}>
+            <td>
+                <input
+                    type="checkbox"
+                    checked={entry.isMarked}
+                    onChange={() => {
+                        entry.toggleMark();
+                        refresh();
+                    }}
+                />
+            </td>
+            <th
+                style={{
+                    width: '100px',
+                    overflowWrap: 'anywhere',
+                }}
+                title={'Źródło: ' + entry.source}
+                onClick={() => {
+                    entry.toggleMark();
+                    refresh();
+                }}
+            >
+                {entry.name}
+            </th>
+            <td style={{ whiteSpace: 'nowrap' }}>
+                {entry.source === 'cookie' ? (
+                    <span title="Dane przechowywane w Cookies">🍪</span>
+                ) : entry.request.hasCookie() ? (
+                    <span
+                        title="Wysłane w zapytaniu opatrzonym cookies"
+                        style={{ opacity: 0.5, fontSize: '0.5em' }}
+                    >
+                        🍪
+                    </span>
+                ) : null}
+                {entry.exposesOrigin() ? (
+                    <span title="Pokazuje część historii przeglądania">⚠️</span>
+                ) : entry.request.exposesOrigin() ? (
+                    <span
+                        title="Jest częścią zapytania, które ujawnia historię przeglądania"
+                        style={{ opacity: 0.5, fontSize: '0.5em' }}
+                    >
+                        ⚠️
+                    </span>
+                ) : null}
+            </td>
+            <td style={{ wordWrap: 'anywhere' as any }}>
+                <StolenDataValue entry={entry} />
+            </td>
+        </tr>
+    );
 }
 
 export default function StolenDataCluster({
-  origin,
-  shorthost,
-  minValueLength,
-  cookiesOnly,
-  cookiesOrOriginOnly,
+    origin,
+    shorthost,
+    minValueLength,
+    refresh,
+    cookiesOnly,
+    cookiesOrOriginOnly,
 }: {
-  origin: string;
-  shorthost: string;
-  refreshToken: number;
-  minValueLength: number;
-  cookiesOnly: boolean;
-  cookiesOrOriginOnly: boolean;
+    origin: string;
+    shorthost: string;
+    refreshToken: number;
+    minValueLength: number;
+    refresh: Function;
+    cookiesOnly: boolean;
+    cookiesOrOriginOnly: boolean;
 }) {
-  const cluster = getMemory().getClustersForOrigin(origin)[shorthost];
-  return (
-    <div>
-      <h2>
-        <a href={"https://" + cluster.id}>{cluster.id}</a>{" "}
-        {cluster.hasCookies() ? "🍪" : ""} x{cluster.requests.length}{" "}
-        {/* <a
-         *   href="#"
-         *   style={{ fontSize: "10px" }}
-         *   onClick={() => getMemory().removeCookiesFor(origin, shorthost)}
-         * >
-         *   Wyczyść cookiesy
-         * </a> */}
-        <a
-          href="#"
-          style={{ fontSize: "10px" }}
-          onClick={(e) => {
-            cluster.autoMark();
-            e.preventDefault();
-          }}
-        >
-          Zaznacz auto
-        </a>
-      </h2>
-      <div>
-        {cluster.getFullHosts().map((host) => (
-          <a key={host} href={`https://${host}`}>
-            {host},{" "}
-          </a>
-        ))}
-      </div>
-      <table>
-        <tbody>
-          {cluster
-            .calculateRepresentativeStolenData({
-              minValueLength,
-              cookiesOnly,
-              cookiesOrOriginOnly,
-            })
-            .map((entry) => (
-              <StolenDataRow
-                {...{
-                  entry,
-                  key: entry.id,
-                }}
-              />
-            ))}
-        </tbody>
-      </table>
-    </div>
-  );
+    const cluster = getMemory().getClustersForOrigin(origin)[shorthost];
+    return (
+        <div>
+            <h2>
+                <a href={'https://' + cluster.id}>{cluster.id}</a>{' '}
+                {cluster.hasCookies() ? '🍪' : ''} x{cluster.requests.length}{' '}
+                {/* <a
+                 *   href="#"
+                 *   style={{ fontSize: "10px" }}
+                 *   onClick={() => getMemory().removeCookiesFor(origin, shorthost)}
+                 * >
+                 *   Wyczyść cookiesy
+                 * </a> */}
+                <a
+                    href="#"
+                    style={{ fontSize: '10px' }}
+                    onClick={(e) => {
+                        cluster.autoMark();
+                        refresh();
+                        e.preventDefault();
+                    }}
+                >
+                    Zaznacz auto
+                </a>
+            </h2>
+            <div>
+                {cluster.getFullHosts().map((host) => (
+                    <a key={host} href={`https://${host}`}>
+                        {host},{' '}
+                    </a>
+                ))}
+            </div>
+            <table>
+                <tbody>
+                    {cluster
+                        .calculateRepresentativeStolenData({
+                            minValueLength,
+                            cookiesOnly,
+                            cookiesOrOriginOnly,
+                        })
+                        .map((entry) => (
+                            <StolenDataRow
+                                refresh={refresh}
+                                {...{
+                                    entry,
+                                    key: entry.id,
+                                }}
+                            />
+                        ))}
+                </tbody>
+            </table>
+        </div>
+    );
 }

sidebar/stolen-data.tsx

@@ -56,9 +56,10 @@ export function StolenData({
                     Wyczyść pamięć
                 </button> */}
                 <button
-                    onClick={() =>
-                        clusters.forEach((cluster) => cluster.autoMark())
-                    }
+                    onClick={() => {
+                        clusters.forEach((cluster) => cluster.autoMark());
+                        refresh();
+                    }}
                 >
                     Zaznacz automatycznie
                 </button>
@@ -81,6 +82,7 @@ export function StolenData({
                             origin={origin}
                             shorthost={cluster.id}
                             key={cluster.id + origin}
+                            refresh={refresh}
                             refreshToken={refreshToken}
                             minValueLength={minValueLength}
                             cookiesOnly={cookiesOnly}