Redesign #3
@ -63,6 +63,13 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $light-grey;
|
||||
svg path {
|
||||
fill: $light-grey;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
padding-left: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user