Redesign #3

Closed
arek wants to merge 15 commits from redesign into master
4 changed files with 195 additions and 145 deletions
Showing only changes of commit 33a25a3e9d - Show all commits

View File

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

View File

@ -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>
);
};

View File

@ -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>
);
}

View File

@ -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}