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 +331 -192
9 changed files with 331 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 01e0901a91 - Show all commits

97
icons/logo-black-square.svg Normal file
View File

@ -0,0 +1,97 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="2048"
height="2048"
viewBox="0 0 541.86667 541.86667"
version="1.1"
id="svg2399"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
sodipodi:docname="logo-black-square.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview2401"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
units="px"
lock-margins="true"
inkscape:zoom="0.083628825"
inkscape:cx="-131.53359"
inkscape:cy="2845.9087"
inkscape:window-width="1920"
inkscape:window-height="1024"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="g5214-0-20-3-1-92" />
<defs
id="defs2396" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(195.39804,196.97992)">
<g
id="g2559">
<rect
y="-196.9799"
x="-195.39803"
height="541.86664"
width="541.86664"
id="rect5174-5-2-1-8-9"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:89.9968;stroke-opacity:1"
inkscape:export-xdpi="562.5"
inkscape:export-ydpi="562.5" />
<g
id="g5216-6-9-9-2-87"
transform="matrix(25.209725,0,0,25.209725,-5013.7768,-42754.638)"
style="fill:#ffffff;fill-opacity:1">
<g
id="g5214-0-20-3-1-92"
transform="translate(-146.29537,198.647)"
style="fill:#ffffff;fill-opacity:1">
<g
id="g17009"
transform="matrix(1.0494588,0,0,1.0494588,-16.219745,-80.475607)">
<text
xml:space="preserve"
style="font-size:13.4678px;line-height:1.25;font-family:Poppins;-inkscape-font-specification:Poppins;word-spacing:0px;stroke-width:0.0935269"
x="338.93002"
y="1510.9918"
id="text3426"><tspan
sodipodi:role="line"
id="tspan3424"
style="font-style:italic;font-variant:normal;font-weight:900;font-stretch:normal;font-size:13.4678px;font-family:Poppins;-inkscape-font-specification:'Poppins Heavy Italic';stroke-width:0.0935269"
x="338.93002"
y="1510.9918">Pr</tspan></text>
<text
xml:space="preserve"
style="font-size:13.4678px;line-height:1.25;font-family:Poppins;-inkscape-font-specification:Poppins;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke-width:0.0935269"
x="352.05331"
y="1510.884"
id="text3426-3"><tspan
sodipodi:role="line"
id="tspan3424-6"
style="font-style:italic;font-variant:normal;font-weight:900;font-stretch:normal;font-size:13.4678px;font-family:Poppins;-inkscape-font-specification:'Poppins Heavy Italic';stroke-width:0.0935269"
x="352.05331"
y="1510.884">.</tspan></text>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

58
manifest.json
View File

@ -1,33 +1,35 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Problematyczne requesty", "name": "Problematyczne requesty",
"version": "1.0", "version": "1.0",
"description": "", "description": "",
"sidebar_action": { "sidebar_action": {
"default_title": "ICD", "default_title": "Problematic requests",
"default_panel": "sidebar/sidebar.html", "default_panel": "sidebar/sidebar.html",
"default_icon": "sidebar_icon.png" "default_icon": "icons/logo-black-square.svg",
}, "browser_style": true,
"background": { "open_at_install": true
"scripts": ["lib/background.js"] },
}, "background": {
"icons": { "scripts": ["lib/background.js"]
"48": "icons/border-48.png" },
}, "icons": {
"permissions": [ "48": "icons/border-48.png"
"proxy", },
"storage", "permissions": [
"<all_urls>", "proxy",
"webRequest", "storage",
"webRequestBlocking", "<all_urls>",
"cookies", "webRequest",
"privacy" "webRequestBlocking",
], "cookies",
"browser_specific_settings": { "privacy"
"gecko": { ],
"id": "problematic-requests@internet-czas-dzialac.pl" "browser_specific_settings": {
"gecko": {
"id": "problematic-requests@internet-czas-dzialac.pl"
}
} }
}
} }

23
options.tsx
View File

@ -10,6 +10,8 @@ export default function Options({
setCookiesOrOriginOnly, setCookiesOrOriginOnly,
readWarningDataDialog, readWarningDataDialog,
setReadWarningDataDialog, setReadWarningDataDialog,
logoVisibility,
setLogoVisibility,
}: { }: {
minValueLength: number; minValueLength: number;
setMinValueLength: (n: number) => void; setMinValueLength: (n: number) => void;
@ -19,6 +21,8 @@ export default function Options({
setCookiesOrOriginOnly: (b: boolean) => void; setCookiesOrOriginOnly: (b: boolean) => void;
readWarningDataDialog: string; readWarningDataDialog: string;
setReadWarningDataDialog: (s: string) => void; setReadWarningDataDialog: (s: string) => void;
logoVisibility: string;
setLogoVisibility: (s: string) => void;
}) { }) {
return ( return (
<div className="options-container"> <div className="options-container">
@ -43,7 +47,24 @@ export default function Options({
className="label-checkbox" className="label-checkbox"
htmlFor="readWarningDataDialog" htmlFor="readWarningDataDialog"
> >
Wyświetlaj informację o pozyskiwanych danych Wyświetlaj komunikat o pozyskiwanych danych
</label>
</div>
<div className="input-container">
<input
type="checkbox"
id="logoVisibility"
checked={logoVisibility != '0'}
onChange={(e) => {
setLogoVisibility(e.target.checked ? '1' : '0');
localStorage.setItem(
'logoVisibility',
e.target.checked ? '1' : '0'
);
}}
/>
<label className="label-checkbox" htmlFor="logoVisibility">
Wyświetlaj logo <i>Internet. Czas działać!</i>
</label> </label>
</div> </div>
</fieldset> </fieldset>

56
report-window/email-template.tsx
View File

@ -1,33 +1,33 @@
import React, { useState } from "react"; import React, { useState } from 'react';
import { RequestCluster } from "../request-cluster"; import { RequestCluster } from '../request-cluster';
import { StolenDataEntry } from "../stolen-data-entry"; import { StolenDataEntry } from '../stolen-data-entry';
import EmailTemplate1 from "./email-template-1"; import EmailTemplate1 from './email-template-1';
import EmailTemplate2 from "./email-template-2"; import EmailTemplate2 from './email-template-2';
export default function EmailTemplate({ export default function EmailTemplate({
entries, entries,
clusters, clusters,
version, version,
}: { }: {
entries: StolenDataEntry[]; entries: StolenDataEntry[];
clusters: Record<string, RequestCluster>; clusters: Record<string, RequestCluster>;
version: number; version: number;
}) { }) {
const [templateVersion, setTemplateVersion] = useState("2"); const [templateVersion, setTemplateVersion] = useState('2');
return ( return (
<div> <div>
<select <select
value={templateVersion} value={templateVersion}
onChange={(e) => setTemplateVersion(e.target.value)} onChange={(e) => setTemplateVersion(e.target.value)}
> >
<option value="1">wersja 1</option> <option value="1">wersja 1</option>
<option value="2">wersja 2</option> <option value="2">wersja 2</option>
</select> </select>
{templateVersion === "1" ? ( {templateVersion === '1' ? (
<EmailTemplate1 {...{ entries, clusters, version }} /> <EmailTemplate1 {...{ entries, clusters, version }} />
) : ( ) : (
<EmailTemplate2 {...{ entries, clusters, version }} /> <EmailTemplate2 {...{ entries, clusters, version }} />
)} )}
</div> </div>
); );
} }

211
report-window/har-converter.tsx
View File

@ -1,117 +1,124 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { HAREntry } from "../extended-request"; import { HAREntry } from '../extended-request';
import { StolenDataEntry } from "../stolen-data-entry"; import { StolenDataEntry } from '../stolen-data-entry';
import { getshorthost, unique } from "../util"; import { getshorthost, unique } from '../util';
function handleNewFile( function handleNewFile(
element: HTMLInputElement, element: HTMLInputElement,
entries: StolenDataEntry[], entries: StolenDataEntry[],
setFiltered: (Blob) => void setFiltered: (Blob) => void
): void { ): void {
const reader = new FileReader(); const reader = new FileReader();
reader.addEventListener("load", () => { reader.addEventListener('load', () => {
const content = JSON.parse(reader.result as string); const content = JSON.parse(reader.result as string);
content.log.entries = content.log.entries.filter((har_entry: HAREntry) => content.log.entries = content.log.entries.filter(
entries.some((entry) => entry.matchesHAREntry(har_entry)) (har_entry: HAREntry) =>
); entries.some((entry) => entry.matchesHAREntry(har_entry))
setFiltered( );
new Blob([JSON.stringify(content)], { type: "application/json" }) setFiltered(
); new Blob([JSON.stringify(content)], { type: 'application/json' })
}); );
reader.readAsText(element.files[0]); });
reader.readAsText(element.files[0]);
} }
function generateFakeHAR(entries: StolenDataEntry[]) { function generateFakeHAR(entries: StolenDataEntry[]) {
const requests = unique(entries.map((entry) => entry.request)) const requests = unique(entries.map((entry) => entry.request))
.sort((request1, request2) => { .sort((request1, request2) => {
if (request1.shorthost < request2.shorthost) { if (request1.shorthost < request2.shorthost) {
return -1; return -1;
} else if (request1.shorthost > request2.shorthost) { } else if (request1.shorthost > request2.shorthost) {
return 1; return 1;
} else { } else {
return request2.getBalancedPriority() - request1.getBalancedPriority(); return (
} request2.getBalancedPriority() -
}) request1.getBalancedPriority()
.filter((_, index, array) => { );
if (index == 0) return true; }
if (array[index].shorthost == array[index - 1].shorthost) { })
return false; .filter((_, index, array) => {
} if (index == 0) return true;
return true; if (array[index].shorthost == array[index - 1].shorthost) {
}) return false;
.sort( }
(entry1, entry2) => return true;
entry2.getBalancedPriority() - entry1.getBalancedPriority() })
); .sort(
(entry1, entry2) =>
entry2.getBalancedPriority() - entry1.getBalancedPriority()
);
return { return {
log: { log: {
version: "1.2", version: '1.2',
creator: { creator: {
name: "Firefox", name: 'Firefox',
version: "94.0", version: '94.0',
}, },
browser: { browser: {
name: "Firefox", name: 'Firefox',
version: "94.0", version: '94.0',
}, },
pages: [ pages: [
{ {
startedDateTime: "2021-11-08T20:27:23.195+01:00", startedDateTime: '2021-11-08T20:27:23.195+01:00',
id: "page_1", id: 'page_1',
title: "HAR DUmp", title: 'HAR DUmp',
pageTimings: { pageTimings: {
onContentLoad: 467, onContentLoad: 467,
onLoad: 4226, onLoad: 4226,
}, },
},
],
entries: requests.map((r) => r.toHAR()),
}, },
], };
entries: requests.map((r) => r.toHAR()),
},
};
} }
export default function HARConverter({ export default function HARConverter({
entries, entries,
}: { }: {
entries: StolenDataEntry[]; entries: StolenDataEntry[];
}) { }) {
const [filtered, setFiltered] = useState<Blob | null>(null); const [filtered, setFiltered] = useState<Blob | null>(null);
const [filename, setFilename] = useState(""); const [filename, setFilename] = useState('');
const [fakeHAR, setFakeHAR] = useState<ReturnType<typeof generateFakeHAR>>(); const [fakeHAR, setFakeHAR] =
useEffect(() => { useState<ReturnType<typeof generateFakeHAR>>();
setFakeHAR(generateFakeHAR(entries)); useEffect(() => {
}, []); setFakeHAR(generateFakeHAR(entries));
}, []);
return ( return (
<div> <div>
<input <input
type="file" type="file"
accept=".har" accept=".har"
onChange={(e) => { onChange={(e) => {
setFilename(e.target.files[0].name); setFilename(e.target.files[0].name);
handleNewFile(e.target, entries, setFiltered); handleNewFile(e.target, entries, setFiltered);
}} }}
/> />
{(filtered && ( {(filtered && (
<a <a
href={URL.createObjectURL(filtered)} href={URL.createObjectURL(filtered)}
download={filename.replace(".har", "-filtered.har")} download={filename.replace('.har', '-filtered.har')}
> >
Pobierz wyfiltrowany HAR Pobierz wyfiltrowany HAR
</a> </a>
)) || )) ||
null} null}
<a <a
href={URL.createObjectURL( href={URL.createObjectURL(
new Blob([JSON.stringify(fakeHAR)], { type: "application/json" }) new Blob([JSON.stringify(fakeHAR)], {
)} type: 'application/json',
download={`${getshorthost( })
entries[0].request.originalURL )}
)}-${new Date().toJSON()}-trimmed.har`} download={`${getshorthost(
> entries[0].request.originalURL
Pobierz "zfałszowany" HAR )}-${new Date().toJSON()}-trimmed.har`}
</a> >
</div> Pobierz "zredukowany" HAR
); </a>
</div>
);
} }

2
sidebar/global.scss
View File

@ -47,7 +47,7 @@ select {
#app { #app {
user-select: text; user-select: text;
padding: 0rem 1rem; padding: 0rem 0.75rem;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: flex-start; justify-content: flex-start;

5
sidebar/sidebar.scss
View File

@ -3,8 +3,9 @@
.sidebar { .sidebar {
.header { .header {
display: grid; display: grid;
grid-template-columns: 8rem 1fr 1rem; grid-template-columns: 6.67rem 1fr 1rem;
max-height: 4rem; align-items: flex-start;
max-height: 3.5rem;
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
border-bottom: 1px solid $light-grey; border-bottom: 1px solid $light-grey;

21
sidebar/sidebar.tsx
View File

@ -34,6 +34,9 @@ const Sidebar = () => {
const [readWarningDataDialog, setReadWarningDataDialog] = useState< const [readWarningDataDialog, setReadWarningDataDialog] = useState<
string | null string | null
>(localStorage.getItem('readWarningDataDialog')); >(localStorage.getItem('readWarningDataDialog'));
const [logoVisibility, setLogoVisibility] = useState<string | null>(
localStorage.getItem('setLogoVisibility')
);
useEffect(() => { useEffect(() => {
const listener = async (data: any) => { const listener = async (data: any) => {
@ -76,13 +79,19 @@ const Sidebar = () => {
<header className="header"> <header className="header">
<img <img
src="../assets/logo-internet-czas-dzialac.svg" src="../assets/logo-internet-czas-dzialac.svg"
height={48} height={40}
></img> ></img>
<div className="webpage-metadata"> <div className="webpage-metadata">
<span>Analiza strony</span> {origin ? (
<span className="webpage-metadata--hyperlink"> <Fragment>
{origin} <span>Analiza strony</span>
</span> <span className="webpage-metadata--hyperlink">
{origin}
</span>
</Fragment>
) : (
<span>Przejdź do wybranej strony internetowej</span>
)}
</div> </div>
{stolenDataView ? ( {stolenDataView ? (
<a href="https://internet-czas-dzialac.pl"> <a href="https://internet-czas-dzialac.pl">
@ -199,6 +208,8 @@ const Sidebar = () => {
setCookiesOrOriginOnly={setCookiesOrOriginOnly} setCookiesOrOriginOnly={setCookiesOrOriginOnly}
readWarningDataDialog={readWarningDataDialog} readWarningDataDialog={readWarningDataDialog}
setReadWarningDataDialog={setReadWarningDataDialog} setReadWarningDataDialog={setReadWarningDataDialog}
logoVisibility={logoVisibility}
setLogoVisibility={setLogoVisibility}
/> />
)} )}
</section> </section>

50
sidebar/tab-dropdown.tsx
View File

@ -1,30 +1,30 @@
import React from "react"; import React from 'react';
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react';
export default function TabDropdown({ export default function TabDropdown({
setPickedTab, setPickedTab,
pickedTab, pickedTab,
}: { }: {
setPickedTab: (tab_id: number) => void; setPickedTab: (tab_id: number) => void;
pickedTab: number; pickedTab: number;
}) { }) {
const [tabs, setTabs] = useState([]); const [tabs, setTabs] = useState([]);
useEffect(() => { useEffect(() => {
browser.tabs.query({ currentWindow: true }).then(setTabs); browser.tabs.query({ currentWindow: true }).then(setTabs);
}, []); }, []);
return ( return (
<select <select
id="tab_dropdown" id="tab_dropdown"
value={pickedTab} value={pickedTab}
onChange={async (e) => { onChange={async (e) => {
setPickedTab(parseInt(e.target.value)); setPickedTab(parseInt(e.target.value));
}} }}
> >
{tabs.map((tab) => ( {tabs.map((tab) => (
<option value={tab.id} key={tab.id}> <option value={tab.id} key={tab.id}>
{tab.title} {tab.title}
</option> </option>
))} ))}
</select> </select>
); );
} }