icd/rentgen
icd/rentgen
2
1
Fork 0
Code Issues 72 Pull Requests Projects Releases 6 Wiki Activity

Redesign #3

Closed
arek wants to merge 15 commits from redesign into master
pull from: redesign
merge into: icd:master
Conversation 0 Commits 15 Files Changed 61 +195 -145
4 changed files with 195 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 33a25a3e9d - Show all commits

7
sidebar/sidebar.scss
View File

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

33
sidebar/sidebar.tsx
View File

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

292
sidebar/stolen-data-cluster.tsx
View File

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

8
sidebar/stolen-data.tsx
View File

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