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

Cleanup files, split sidebar and toolbar

Browse Source
This commit is contained in:
Arkadiusz Wieczorek 2022-04-13 11:44:59 +02:00
parent eed5aba0ec
commit 39a7e34cb4
42 changed files with 6121 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -15,6 +15,3 @@ Note: At the moment, we support Polish language because this extension generates
3. `npm run build`
4. The build code is located in the `lib/` directory
![screenshot](./screenshot.png)
![screenshot](./screenshot2.png)
![screenshot](./screenshot3.png)

2
report-window/deduce-problems.tsx → components/report-window/deduce-problems.tsx
View File

@ -1,4 +1,4 @@
import { RequestCluster } from '../request-cluster';
import { RequestCluster } from '../../request-cluster';
import { ParsedAnswers } from './parse-answers';
import NoInformationAtAllProblem from './problems/no-information-at-all';
import { Problem } from './problems/problem';

4
report-window/email-content.tsx → components/report-window/email-content.tsx
View File

@ -1,5 +1,5 @@
import { RequestCluster } from '../request-cluster';
import { getDate } from '../util';
import { RequestCluster } from '../../request-cluster';
import { getDate } from '../../util';
import deduceProblems from './deduce-problems';
import { Explainers } from './explainers';
import { ParsedAnswers } from './parse-answers';

0
report-window/explainers.tsx → components/report-window/explainers.tsx
View File

0
report-window/generate-survey-questions.ts → components/report-window/generate-survey-questions.ts
View File

0
report-window/generate-survey.ts → components/report-window/generate-survey.ts
View File

6
report-window/har-converter.tsx → components/report-window/har-converter.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { HAREntry } from '../extended-request';
import { StolenDataEntry } from '../stolen-data-entry';
import { getshorthost, unique } from '../util';
import { HAREntry } from '../../extended-request';
import { StolenDataEntry } from '../../stolen-data-entry';
import { getshorthost, unique } from '../../util';
function handleNewFile(
element: HTMLInputElement,

0
report-window/parse-answers.ts → components/report-window/parse-answers.ts
View File

0
report-window/problems/no-information-at-all.tsx → components/report-window/problems/no-information-at-all.tsx
View File

2
report-window/problems/problem.tsx → components/report-window/problems/problem.tsx
View File

@ -1,4 +1,4 @@
import { RequestCluster } from '../../request-cluster';
import { RequestCluster } from '../../../request-cluster';
import { ExplainerKey } from '../explainers';
import { ParsedAnswers } from '../parse-answers';

4
report-window/problems/unlawful-cookies.tsx → components/report-window/problems/unlawful-cookies.tsx
View File

@ -1,5 +1,5 @@
import { RequestCluster } from '../../request-cluster';
import { wordlist } from '../../util';
import { RequestCluster } from '../../../request-cluster';
import { wordlist } from '../../../util';
import { ExplainerKey } from '../explainers';
import { ParsedAnswers } from '../parse-answers';
import { v } from '../verbs';

2
report-window/problems/unlawful-data.tsx → components/report-window/problems/unlawful-data.tsx
View File

@ -1,4 +1,4 @@
import { RequestCluster } from '../../request-cluster';
import { RequestCluster } from '../../../request-cluster';
import { ExplainerKey } from '../explainers';
import { ParsedAnswers, ParsedHostAnswers } from '../parse-answers';
import { v } from '../verbs';

0
report-window/questions.tsx → components/report-window/questions.tsx
View File

0
report-window/raw-answers.ts → components/report-window/raw-answers.ts
View File

4
report-window/report-window.html → components/report-window/report-window.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<title>Treść maila do zgłoszenia</title>
<link rel="stylesheet" href="/lib/report-window/report-window.css" />
<link rel="stylesheet" href="/lib/components/report-window/report-window.css" />
<link rel="stylesheet" href="/node_modules/survey-react/survey.css" />
<link rel="stylesheet" href="/node_modules/survey-react/modern.css" />
</head>
@ -12,6 +12,6 @@
<div id="app"></div>
<script src="/node_modules/react/umd/react.development.js"></script>
<script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="/lib/report-window/report-window.js"></script>
<script src="/lib/components/report-window/report-window.js"></script>
</body>
</html>

4
report-window/report-window.scss → components/report-window/report-window.scss
View File

@ -1,5 +1,5 @@
@import '../sidebar/fonts.scss';
@import '../sidebar/colors.scss';
@import './../../styles/colors.scss';
// @import './../../styles/fonts';
html {
font-size: 1rem;

4
report-window/report-window.tsx → components/report-window/report-window.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { getMemory } from '../memory';
import { useEmitter } from '../util';
import { getMemory } from '../../memory';
import { useEmitter } from '../../util';
import './report-window.scss';
import Questions from './questions';

0
report-window/use-survey.ts → components/report-window/use-survey.ts
View File

0
report-window/verbs.ts → components/report-window/verbs.ts
View File

6
sidebar/sidebar.html → components/sidebar/sidebar.html
View File

@ -12,15 +12,15 @@
<div id="app"></div>
<link
rel="stylesheet"
href="/lib/sidebar/global.css"
href="/lib/styles/global.css"
>
<link
rel="stylesheet"
href="/lib/sidebar/sidebar.css"
href="/lib/components/sidebar/sidebar.css"
>
<script src="/node_modules/react/umd/react.production.min.js"></script>
<script src="/node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="/lib/sidebar/sidebar.js"></script>
<script src="/lib/components/sidebar/sidebar.js"></script>
</body>

4
sidebar/sidebar.scss → components/sidebar/sidebar.scss
View File

@ -1,4 +1,4 @@
@import './colors.scss';
@import '../../styles/colors.scss';
.sidebar {
.header {
@ -10,7 +10,7 @@
border-bottom: 1px solid $light-grey;
position: sticky;
top: 0;
background: #fff;
background: #ffffff;
z-index: 1;
&--without-logo {

16
sidebar/sidebar.tsx → components/sidebar/sidebar.tsx
View File

@ -1,9 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Options from '../options';
import Options from '../../options';
import { StolenData } from './stolen-data';
import { getshorthost, useEmitter } from '../util';
import { getMemory } from '../memory';
import { getshorthost, useEmitter } from '../../util';
import { getMemory } from '../../memory';
browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' });
async function getCurrentTab() {
@ -14,14 +14,8 @@ async function getCurrentTab() {
return tab;
}
function setDomainsNumber(counter: number) {
browser.browserAction.setBadgeText({ text: counter.toString() });
browser.browserAction.setTitle({
title: `Rentgen - ${counter !== 1 ? counter + ' podmiotów' : counter + ' podmiot'} `,
});
}
import './global.scss';
import './../../styles/global.scss';
import './sidebar.scss';
const Sidebar = () => {
@ -61,6 +55,7 @@ const Sidebar = () => {
}
setOrigin(url.origin);
};
browser.tabs.onUpdated.addListener(listener);
listener();
return () => {
@ -74,7 +69,6 @@ const Sidebar = () => {
return setMarksOccurrence(true);
}
}
setDomainsNumber(Object.values(getMemory().getClustersForOrigin(origin)).length);
return setMarksOccurrence(false);
}, [eventCounts['*'], origin]);

2
sidebar/stolen-data-cluster.scss → components/sidebar/stolen-data-cluster.scss
View File

@ -1,4 +1,4 @@
@import './colors.scss';
@import '../../styles/colors.scss';
.stolen-data-cluster-container {
.domains-container {

6
sidebar/stolen-data-cluster.tsx → components/sidebar/stolen-data-cluster.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { getMemory } from '../memory';
import { StolenDataEntry } from '../stolen-data-entry';
import { getMemory } from '../../memory';
import { StolenDataEntry } from '../../stolen-data-entry';
import { maskString, useEmitter } from '../util';
import { maskString, useEmitter } from '../../util';
import './stolen-data-cluster.scss';

2
sidebar/stolen-data.scss → components/sidebar/stolen-data.scss
View File

@ -1,4 +1,4 @@
@import './colors.scss';
@import '../../styles/colors.scss';
.stolen-data-container {
padding-top: .5rem;

4
sidebar/stolen-data.tsx → components/sidebar/stolen-data.tsx
View File

@ -1,5 +1,5 @@
import { getMemory } from '../memory';
import { RequestCluster } from '../request-cluster';
import { getMemory } from '../../memory';
import { RequestCluster } from '../../request-cluster';
import StolenDataCluster from './stolen-data-cluster';

0
sidebar/tab-dropdown.tsx → components/sidebar/tab-dropdown.tsx
View File

27
components/toolbar/toolbar.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
</style>
</head>
<body>
<div id="toolbar"></div>
<link
rel="stylesheet"
href="/lib/styles/global.css"
>
<link
rel="stylesheet"
href="/lib/components/toolbar/toolbar.css"
>
<script src="/node_modules/react/umd/react.production.min.js"></script>
<script src="/node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="/lib/components/toolbar/toolbar.js"></script>
</body>
</html>

117
components/toolbar/toolbar.scss Normal file
View File

@ -0,0 +1,117 @@
@import '../../styles/colors.scss';
.toolbar {
padding: 0 .5rem;
.header {
display: grid;
grid-template-columns: 6.67rem 1fr 1.25rem;
align-items: center;
max-height: 3.5rem;
min-height: 3.5rem;
border-bottom: 1px solid $light-grey;
position: sticky;
top: 0;
background: #ffffff;
z-index: 1;
&--without-logo {
grid-template-columns: 1fr 1.25rem;
}
.webpage-metadata {
word-break: break-all;
display: flex;
flex-flow: column;
flex-wrap: nowrap;
font-size: 0.875rem;
font-weight: 600;
justify-content: center;
padding-left: 1rem;
color: #000;
&--without-logo {
padding-left: 0;
}
&--hyperlink {
font-weight: 400;
color: $ultra-black-color;
max-height: 2rem;
overflow: hidden;
}
}
button {
border: none;
background: transparent;
cursor: pointer;
padding: 0;
}
}
nav {
padding: 0.25rem 0;
border-bottom: 1px solid $light-grey;
button {
border: none;
cursor: pointer;
color: $ultra-black-color;
padding: 0.25rem 0rem;
display: flex;
flex-wrap: nowrap;
line-height: 1.25rem;
background: #fff;
width: 100%;
&:hover {
color: #000;
text-decoration: underline;
svg path {
fill: #000;
}
}
&:disabled {
cursor: not-allowed;
color: $disabled-grey;
svg path {
fill: $disabled-grey;
}
}
span {
padding-left: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
}
}
}
.warning-container {
background-color: $pale-yellow;
border-left: 4px solid $contrast-yellow;
margin-top: 0.5rem;
font-size: 0.875rem;
display: grid;
grid-template-columns: calc(100% - 2rem) 2rem;
align-items: flex-start;
span {
padding: 1rem;
}
button {
justify-content: flex-end;
border: none;
cursor: pointer;
color: $ultra-black-color;
line-height: 1.25rem;
background: transparent;
padding: 0.5rem 0.5rem;
display: flex;
align-self: flex-start;
}
}
}

204
components/toolbar/toolbar.tsx Normal file
View File

@ -0,0 +1,204 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { useEmitter } from '../../util';
import { getMemory } from '../../memory';
browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' });
async function getCurrentTab() {
const [tab] = await browser.tabs.query({
active: true,
windowId: browser.windows.WINDOW_ID_CURRENT,
});
return tab;
}
import './../../styles/global.scss';
import './toolbar.scss';
const Toolbar = () => {
const [origin, setOrigin] = React.useState<string | null>(null);
const [minValueLength, setMinValueLength] = React.useState<number | null>(
localStorage.getItem('minValueLength') === null
? 7
: (localStorage.getItem('minValueLength') as unknown as number)
);
const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
const [stolenDataView, setStolenDataView] = React.useState<boolean>(true);
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState<boolean>(false);
const [eventCounts, setEventCounts] = useEmitter(getMemory());
const [marksOccurrence, setMarksOccurrence] = React.useState<boolean>(false);
const [warningDataDialogAck, setWarningDataDialogAck] = React.useState<boolean>(
localStorage.getItem('warningDataDialogAck') === null
? true
: localStorage.getItem('warningDataDialogAck') == 'true'
? true
: false
);
const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
localStorage.getItem('logoVisibility') === null
? false
: localStorage.getItem('logoVisibility') == 'true'
? true
: false
);
React.useEffect(() => {
const listener = async () => {
console.log('tab change!');
const tab = await getCurrentTab();
const url = new URL(tab.url);
if (url.origin.startsWith('moz-extension')) {
return;
}
setOrigin(url.origin);
};
browser.tabs.onUpdated.addListener(listener);
listener();
return () => {
browser.tabs.onUpdated.removeListener(listener);
};
});
React.useEffect(() => {
for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
if (cluster.hasMarks()) {
return setMarksOccurrence(true);
}
}
return setMarksOccurrence(false);
}, [eventCounts['*'], origin]);
return (
<div className="toolbar">
<header className={logoVisibility ? 'header' : 'header header--without-logo'}>
<img
src="../assets/logo-internet-czas-dzialac.svg"
height={40}
style={!logoVisibility ? { display: 'none' } : null}
></img>
<div
className={
logoVisibility
? 'webpage-metadata'
: 'webpage-metadata webpage-metadata--without-logo'
}
>
{origin ? (
<>
<span>Analiza strony</span>
<span className="webpage-metadata--hyperlink">{origin}</span>
</>
) : (
<span>Przejdź do wybranej strony internetowej</span>
)}
</div>
{stolenDataView ? (
<a href="https://internet-czas-dzialac.pl">
<img src="/assets/icons/info_circle_outline.svg" width="20" height="20" />
</a>
) : (
<button onClick={() => setStolenDataView(true)}>
<img src="/assets/icons/short_left.svg" width="20" height="20" />
</button>
)}
</header>
{stolenDataView ? (
<nav>
<button onClick={() => setStolenDataView(!stolenDataView)}>
<img src="/assets/icons/settings.svg" width="20" height="20" />
<span>Ustawienia</span>
</button>
<button
onClick={() => {
getMemory().removeRequestsFor(origin);
getMemory().emit('change', false, origin, 'clicked trash');
setMarksOccurrence(false);
}}
>
<img src="/assets/icons/trash_full.svg" width="20" height="20" />
<span>Wyczyść historię wtyczki</span>
</button>
<button
onClick={() => {
getMemory().removeCookiesFor(origin);
getMemory().emit('change', false, origin, 'clicked clear cookies');
setMarksOccurrence(false);
}}
>
<img src="/assets/icons/cookie.svg" width="20" height="20" />
<span>Wyczyść ciasteczka</span>
</button>
<button
disabled={!marksOccurrence}
title={
marksOccurrence
? 'Kliknij, aby wygenerować wiadomość'
: 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
}
onClick={() => {
const params = [
'height=' + screen.height,
'width=' + screen.width,
'fullscreen=yes',
].join(',');
window.open(
`/report-window/report-window.html?origin=${origin}`,
'new_window',
params
);
}}
>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 20H4C2.89543 20 2 19.1046 2 18V5.913C2.04661 4.84255 2.92853 3.99899 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20ZM4 7.868V18H20V7.868L12 13.2L4 7.868ZM4.8 6L12 10.8L19.2 6H4.8Z"
fill="#2E3A59"
/>
</svg>
<span>Utwórz wiadomość dla administratora witryny</span>
</button>
</nav>
) : null}
<section>
{stolenDataView ? (
<>
{warningDataDialogAck ? (
<section className="warning-container">
<span>
<strong>Uwaga!</strong> Niekoniecznie każda przechwycona poniżej
informacja jest daną osobową. Niektóre z podanych domen mogą
należeć do właściciela strony i nie reprezentować podmiotów
trzecich.
</span>
<button
onClick={() => {
setWarningDataDialogAck(false);
localStorage.setItem(
'warningDataDialogAck',
false as unknown as string
);
}}
>
<img src="/assets/icons/close_big.svg" width="16" height="16" />
</button>
</section>
) : null}
<div>stolen data</div>
</>
) : null}
</section>
</div>
);
};
ReactDOM.render(<Toolbar />, document.getElementById('toolbar'));

5
esbuild.config.js
View File

@ -44,9 +44,10 @@ let skipReactImports = {
esbuild
.build({
entryPoints: [
'sidebar/sidebar.tsx',
'components/toolbar/toolbar.tsx',
'components/sidebar/sidebar.tsx',
'test.ts',
'report-window/report-window.tsx',
'components/report-window/report-window.tsx',
'background.ts',
],
bundle: true,

2
manifest.json
View File

@ -19,7 +19,7 @@
"browser_action": {
"default_icon": "assets/icon-addon.svg",
"default_title": "Rentgen",
"default_popup": "sidebar/sidebar.html"
"default_popup": "components/toolbar/toolbar.html"
},
"icons": {
"16": "assets/icon-addon.svg",

14
memory.ts
View File

@ -3,6 +3,14 @@ import { getshorthost, makeThrottle } from './util';
import { EventEmitter } from 'events';
import { RequestCluster } from './request-cluster';
function setDomainsNumber(counter: number, tabId: number) {
browser.browserAction.setBadgeText({ text: counter.toString(), tabId });
browser.browserAction.setTitle({
title: `Rentgen - liczba wykrytych podmiotów: ${counter}`,
tabId,
});
}
export default class Memory extends EventEmitter {
origin_to_history = {} as Record<string, Record<string, RequestCluster>>;
private throttle = makeThrottle(100);
@ -21,6 +29,12 @@ export default class Memory extends EventEmitter {
}
this.origin_to_history[request.origin][shorthost].add(request);
this.emit('change', false, shorthost, 'registered request(shorthost emit)');
console.log(this.getClustersForOrigin(request.origin));
setDomainsNumber(
Object.values(this.getClustersForOrigin(request.origin)).length,
request.tabId
);
}
constructor() {

2
options.scss
View File

@ -1,4 +1,4 @@
@import './sidebar/colors.scss';
@import './styles/colors.scss';
.options-container {
padding-top: 0.5rem;

5769
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

BIN
screenshot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1023 KiB

BIN
screenshot2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 275 KiB

BIN
screenshot3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 265 KiB

49
sidebar/fonts.scss
View File

@ -1,49 +0,0 @@
@font-face {
font-family: 'Fira Code';
src: url('./../assets/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'),
url('./../assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Fira Code';
src: url('./../assets/fonts/fira-code/woff2/FiraCode-Regular.woff2') format('woff2'),
url('./../assets/fonts/fira-code/woff/FiraCode-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fira Code';
src: url('./../assets/fonts/fira-code/woff2/FiraCode-Medium.woff2') format('woff2'),
url('./../assets/fonts/fira-code/woff/FiraCode-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Fira Code';
src: url('./../assets/fonts/fira-code/woff2/FiraCode-SemiBold.woff2') format('woff2'),
url('./../assets/fonts/fira-code/woff/FiraCode-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Fira Code';
src: url('./../assets/fonts/fira-code/woff2/FiraCode-Bold.woff2') format('woff2'),
url('./../assets/fonts/fira-code/woff/FiraCode-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Fira Code VF';
src: url('./../assets/fonts/fira-code/woff2/FiraCode-VF.woff2')
format('woff2-variations'),
url('./../assets/fonts/fira-code/woff/FiraCode-VF.woff') format('woff-variations');
/* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
font-weight: 300 700;
font-style: normal;
}

0
sidebar/colors.scss → styles/colors.scss
View File

48
styles/fonts.scss Normal file
View File

@ -0,0 +1,48 @@
@font-face {
font-family: 'Fira Code';
src: url('../assets/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'),
url('../assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Fira Code';
src: url('../assets/fonts/fira-code/woff2/FiraCode-Regular.woff2') format('woff2'),
url('../assets/fonts/fira-code/woff/FiraCode-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fira Code';
src: url('../assets/fonts/fira-code/woff2/FiraCode-Medium.woff2') format('woff2'),
url('../assets/fonts/fira-code/woff/FiraCode-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Fira Code';
src: url('../assets/fonts/fira-code/woff2/FiraCode-SemiBold.woff2') format('woff2'),
url('../assets/fonts/fira-code/woff/FiraCode-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Fira Code';
src: url('../assets/fonts/fira-code/woff2/FiraCode-Bold.woff2') format('woff2'),
url('../assets/fonts/fira-code/woff/FiraCode-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Fira Code VF';
src: url('../assets/fonts/fira-code/woff2/FiraCode-VF.woff2') format('woff2-variations'),
url('../assets/fonts/fira-code/woff/FiraCode-VF.woff') format('woff-variations');
/* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
font-weight: 300 700;
font-style: normal;
}

4
sidebar/global.scss → styles/global.scss
View File

@ -11,7 +11,9 @@
}
body {
min-width: 24rem;
width: 400px;
height: 600px;
overflow-x: hidden;
}
html {