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,8 +1,8 @@
-import React from "react";
+import React from 'react';
-import { getMemory } from "../memory";
+import { getMemory } from '../memory';
-import { StolenDataEntry } from "../stolen-data-entry";
+import { StolenDataEntry } from '../stolen-data-entry';
 
-import { maskString, useEmitter } from "../util";
+import { maskString, useEmitter } from '../util';
 
 const MAX_STRING_VALUE_LENGTH = 100;
 
@@ -29,14 +29,20 @@ function StolenDataValue({
                 entry.toggleMark();
                 e.stopPropagation();
             }}
-      style={{ color: entry.isMarked ? "black" : "gray" }}
+            style={{ color: entry.isMarked ? 'black' : 'gray' }}
         >
             {body}
         </div>
     );
 }
 
-function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
+function StolenDataRow({
+    entry,
+    refresh,
+}: {
+    entry: StolenDataEntry;
+    refresh: Function;
+}) {
     const [version] = useEmitter(entry);
     return (
         <tr data-key={entry.id} data-version={version}>
@@ -44,26 +50,32 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
                 <input
                     type="checkbox"
                     checked={entry.isMarked}
-          onChange={() => entry.toggleMark()}
+                    onChange={() => {
+                        entry.toggleMark();
+                        refresh();
+                    }}
                 />
             </td>
             <th
                 style={{
-          width: "100px",
+                    width: '100px',
-          overflowWrap: "anywhere",
+                    overflowWrap: 'anywhere',
+                }}
+                title={'Źródło: ' + entry.source}
+                onClick={() => {
+                    entry.toggleMark();
+                    refresh();
                 }}
-        title={"Źródło: " + entry.source}
-        onClick={() => entry.toggleMark()}
             >
                 {entry.name}
             </th>
-      <td style={{ whiteSpace: "nowrap" }}>
+            <td style={{ whiteSpace: 'nowrap' }}>
-        {entry.source === "cookie" ? (
+                {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" }}
+                        style={{ opacity: 0.5, fontSize: '0.5em' }}
                     >
                         🍪
                     </span>
@@ -73,13 +85,13 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
                 ) : entry.request.exposesOrigin() ? (
                     <span
                         title="Jest częścią zapytania, które ujawnia historię przeglądania"
-            style={{ opacity: 0.5, fontSize: "0.5em" }}
+                        style={{ opacity: 0.5, fontSize: '0.5em' }}
                     >
                         ⚠️
                     </span>
                 ) : null}
             </td>
-      <td style={{ wordWrap: "anywhere" as any }}>
+            <td style={{ wordWrap: 'anywhere' as any }}>
                 <StolenDataValue entry={entry} />
             </td>
         </tr>
@@ -90,6 +102,7 @@ export default function StolenDataCluster({
     origin,
     shorthost,
     minValueLength,
+    refresh,
     cookiesOnly,
     cookiesOrOriginOnly,
 }: {
@@ -97,6 +110,7 @@ export default function StolenDataCluster({
     shorthost: string;
     refreshToken: number;
     minValueLength: number;
+    refresh: Function;
     cookiesOnly: boolean;
     cookiesOrOriginOnly: boolean;
 }) {
@@ -104,8 +118,8 @@ export default function StolenDataCluster({
     return (
         <div>
             <h2>
-        <a href={"https://" + cluster.id}>{cluster.id}</a>{" "}
+                <a href={'https://' + cluster.id}>{cluster.id}</a>{' '}
-        {cluster.hasCookies() ? "🍪" : ""} x{cluster.requests.length}{" "}
+                {cluster.hasCookies() ? '🍪' : ''} x{cluster.requests.length}{' '}
                 {/* <a
                  *   href="#"
                  *   style={{ fontSize: "10px" }}
@@ -115,9 +129,10 @@ export default function StolenDataCluster({
                  * </a> */}
                 <a
                     href="#"
-          style={{ fontSize: "10px" }}
+                    style={{ fontSize: '10px' }}
                     onClick={(e) => {
                         cluster.autoMark();
+                        refresh();
                         e.preventDefault();
                     }}
                 >
@@ -127,7 +142,7 @@ export default function StolenDataCluster({
             <div>
                 {cluster.getFullHosts().map((host) => (
                     <a key={host} href={`https://${host}`}>
-            {host},{" "}
+                        {host},{' '}
                     </a>
                 ))}
             </div>
@@ -141,6 +156,7 @@ export default function StolenDataCluster({
                         })
                         .map((entry) => (
                             <StolenDataRow
+                                refresh={refresh}
                                 {...{
                                     entry,
                                     key: entry.id,

sidebar/stolen-data.tsx

@@ -56,9 +56,10 @@ export function StolenData({
                     Wyczyść pamięć
                 </button> */}
                 <button
-                    onClick={() =>
+                    onClick={() => {
-                        clusters.forEach((cluster) => cluster.autoMark())
+                        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}