Redesign #3
3
assets/icons/close_big.svg
Normal file
3
assets/icons/close_big.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41L17.59 5Z" fill="#2E3A59"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 240 B |
@ -3,10 +3,10 @@
|
||||
"name": "Problematyczne requesty",
|
||||
"version": "1.0",
|
||||
|
||||
"description": "Adds a red border to all webpages matching mozilla.org.",
|
||||
"description": "",
|
||||
|
||||
"sidebar_action": {
|
||||
"default_title": "ICD Skaner",
|
||||
"default_title": "ICD",
|
||||
"default_panel": "sidebar/sidebar.html",
|
||||
"default_icon": "sidebar_icon.png"
|
||||
},
|
||||
|
||||
30
options.scss
Normal file
30
options.scss
Normal file
@ -0,0 +1,30 @@
|
||||
@import './sidebar/colors.scss';
|
||||
|
||||
.options-container {
|
||||
padding-top: 0.5rem;
|
||||
span {
|
||||
color: $mid-grey;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0.5rem 0;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
.label-checkbox {
|
||||
cursor: pointer;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.input-container{
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
#minValueLength {
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
136
options.tsx
136
options.tsx
@ -1,50 +1,96 @@
|
||||
import React from "react";
|
||||
import React from 'react';
|
||||
import './options.scss';
|
||||
|
||||
export default function Options({
|
||||
minValueLength,
|
||||
setMinValueLength,
|
||||
cookiesOnly,
|
||||
setCookiesOnly,
|
||||
cookiesOrOriginOnly,
|
||||
setCookiesOrOriginOnly,
|
||||
minValueLength,
|
||||
setMinValueLength,
|
||||
cookiesOnly,
|
||||
setCookiesOnly,
|
||||
cookiesOrOriginOnly,
|
||||
setCookiesOrOriginOnly,
|
||||
readWarningDataDialog,
|
||||
setReadWarningDataDialog,
|
||||
}: {
|
||||
minValueLength: number;
|
||||
setMinValueLength: (n: number) => void;
|
||||
cookiesOnly: boolean;
|
||||
setCookiesOnly: (b: boolean) => void;
|
||||
cookiesOrOriginOnly: boolean;
|
||||
setCookiesOrOriginOnly: (b: boolean) => void;
|
||||
minValueLength: number;
|
||||
setMinValueLength: (n: number) => void;
|
||||
cookiesOnly: boolean;
|
||||
setCookiesOnly: (b: boolean) => void;
|
||||
cookiesOrOriginOnly: boolean;
|
||||
setCookiesOrOriginOnly: (b: boolean) => void;
|
||||
readWarningDataDialog: string;
|
||||
setReadWarningDataDialog: (s: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<fieldset>
|
||||
<h3>Zaawansowane ustawienia 💛</h3>
|
||||
<label htmlFor="minValueLength">
|
||||
Pokazuj tylko wartości o długości co najmniej{" "}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="minValueLength"
|
||||
value={minValueLength}
|
||||
onChange={(e) => setMinValueLength(parseInt(e.target.value))}
|
||||
/>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
id="cookiesOnly"
|
||||
checked={cookiesOnly}
|
||||
onChange={(e) => setCookiesOnly(e.target.checked)}
|
||||
/>
|
||||
<label htmlFor="cookiesOnly">Pokazuj tylko dane z cookiesów</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
id="cookiesOrOriginOnly"
|
||||
checked={cookiesOrOriginOnly}
|
||||
onChange={(e) => setCookiesOrOriginOnly(e.target.checked)}
|
||||
/>
|
||||
<label htmlFor="cookiesOrOriginOnly">
|
||||
Pokazuj tylko dane z cookiesów lub z częścią historii przeglądania
|
||||
</label>
|
||||
</fieldset>
|
||||
);
|
||||
return (
|
||||
<div className="options-container">
|
||||
<span>Ustawienia interfejsu</span>
|
||||
<fieldset>
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="readWarningDataDialog"
|
||||
checked={readWarningDataDialog != '1'}
|
||||
onChange={(e) => {
|
||||
setReadWarningDataDialog(
|
||||
e.target.checked ? '0' : '1'
|
||||
);
|
||||
localStorage.setItem(
|
||||
'readWarningDataDialog',
|
||||
e.target.checked ? '0' : '1'
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
className="label-checkbox"
|
||||
htmlFor="readWarningDataDialog"
|
||||
>
|
||||
Wyświetlaj informację o pozyskiwanych danych
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<span>Ustawienia zaawansowane</span>
|
||||
<fieldset>
|
||||
<div className="input-container">
|
||||
<label htmlFor="minValueLength">
|
||||
Pokazuj tylko wartości o długości co najmniej{' '}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="minValueLength"
|
||||
value={minValueLength}
|
||||
onChange={(e) =>
|
||||
setMinValueLength(parseInt(e.target.value))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="cookiesOnly"
|
||||
checked={cookiesOnly}
|
||||
onChange={(e) => setCookiesOnly(e.target.checked)}
|
||||
/>
|
||||
<label className="label-checkbox" htmlFor="cookiesOnly">
|
||||
Pokazuj tylko dane z cookiesów
|
||||
</label>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="cookiesOrOriginOnly"
|
||||
checked={cookiesOrOriginOnly}
|
||||
onChange={(e) =>
|
||||
setCookiesOrOriginOnly(e.target.checked)
|
||||
}
|
||||
/>
|
||||
<label
|
||||
className="label-checkbox"
|
||||
htmlFor="cookiesOrOriginOnly"
|
||||
>
|
||||
Pokazuj tylko dane z cookiesów lub z częścią historii
|
||||
przeglądania
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,3 +3,5 @@ $disabled-grey: #8a949f;
|
||||
$light-grey: #d1d1d1;
|
||||
$blue: #0048D9;
|
||||
$icd-yellow: #ffee2c;
|
||||
$pale-yellow: #fff8e5;
|
||||
$contrast-yellow: #ffb900;
|
||||
|
||||
@ -79,4 +79,30 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: $mid-grey;
|
||||
line-height: 1.25rem;
|
||||
background: transparent;
|
||||
padding: 0.5rem 0.5rem;
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import SettingsIcon from '../assets/icons/settings.svg';
|
||||
import TrashIcon from '../assets/icons/trash_full.svg';
|
||||
import MailIcon from '../assets/icons/mail.svg';
|
||||
import ShortLeftIcon from '../assets/icons/short_left.svg';
|
||||
import CloseBigIcon from '../assets/icons/close_big.svg';
|
||||
|
||||
async function getCurrentTab() {
|
||||
const [tab] = await browser.tabs.query({
|
||||
@ -30,6 +31,9 @@ const Sidebar = () => {
|
||||
useState<boolean>(false);
|
||||
const [counter, setCounter] = useEmitter(getMemory());
|
||||
const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
|
||||
const [readWarningDataDialog, setReadWarningDataDialog] = useState<
|
||||
string | null
|
||||
>(localStorage.getItem('readWarningDataDialog'));
|
||||
|
||||
useEffect(() => {
|
||||
const listener = async (data: any) => {
|
||||
@ -91,18 +95,15 @@ const Sidebar = () => {
|
||||
)}
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
{stolenDataView ? (
|
||||
<Fragment>
|
||||
<button
|
||||
onClick={() => setStolenDataView(!stolenDataView)}
|
||||
>
|
||||
{/* {stolenDataView ? 'Options' : 'Data'}
|
||||
*/}
|
||||
<SettingsIcon width={20} height={20} />
|
||||
<span>Ustawienia wtyczki</span>
|
||||
</button>
|
||||
{/* <button
|
||||
{stolenDataView ? (
|
||||
<nav>
|
||||
<button onClick={() => setStolenDataView(!stolenDataView)}>
|
||||
{/* {stolenDataView ? 'Options' : 'Data'}
|
||||
*/}
|
||||
<SettingsIcon width={20} height={20} />
|
||||
<span>Ustawienia wtyczki</span>
|
||||
</button>
|
||||
{/* <button
|
||||
onClick={() => {
|
||||
getMemory().removeCookiesFor(
|
||||
origin,
|
||||
@ -114,57 +115,80 @@ const Sidebar = () => {
|
||||
<TrashIcon />
|
||||
<span>Wyczyść ciasteczka first-party</span>
|
||||
</button> */}
|
||||
<button
|
||||
onClick={() => {
|
||||
getMemory().removeRequestsFor(origin);
|
||||
setCounter((c) => c + 1);
|
||||
setMarksOccurrence(false);
|
||||
}}
|
||||
>
|
||||
{/* {stolenDataView ? 'Options' : 'Data'}
|
||||
*/}
|
||||
<TrashIcon 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
|
||||
);
|
||||
}}
|
||||
>
|
||||
<MailIcon width={20} height={20} />
|
||||
<span>
|
||||
Utwórz wiadomość dla administratora tej witryny
|
||||
</span>
|
||||
</button>
|
||||
</Fragment>
|
||||
) : null}
|
||||
</nav>
|
||||
<button
|
||||
onClick={() => {
|
||||
getMemory().removeRequestsFor(origin);
|
||||
setCounter((c) => c + 1);
|
||||
setMarksOccurrence(false);
|
||||
}}
|
||||
>
|
||||
{/* {stolenDataView ? 'Options' : 'Data'}
|
||||
*/}
|
||||
<TrashIcon 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
|
||||
);
|
||||
}}
|
||||
>
|
||||
<MailIcon width={20} height={20} />
|
||||
<span>
|
||||
Utwórz wiadomość dla administratora tej witryny
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
) : null}
|
||||
|
||||
<section>
|
||||
{stolenDataView ? (
|
||||
<StolenData
|
||||
origin={origin}
|
||||
refreshToken={counter}
|
||||
refresh={() => setCounter((c) => c + 1)}
|
||||
minValueLength={minValueLength}
|
||||
cookiesOnly={cookiesOnly}
|
||||
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
||||
/>
|
||||
<Fragment>
|
||||
{readWarningDataDialog != '1' ? (
|
||||
<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={() => {
|
||||
setReadWarningDataDialog('1');
|
||||
localStorage.setItem(
|
||||
'readWarningDataDialog',
|
||||
'1'
|
||||
);
|
||||
}}
|
||||
>
|
||||
<CloseBigIcon width={16} height={16} />
|
||||
</button>
|
||||
</section>
|
||||
) : null}
|
||||
<StolenData
|
||||
origin={origin}
|
||||
refreshToken={counter}
|
||||
refresh={() => setCounter((c) => c + 1)}
|
||||
minValueLength={minValueLength}
|
||||
cookiesOnly={cookiesOnly}
|
||||
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
||||
/>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Options
|
||||
minValueLength={minValueLength}
|
||||
@ -173,6 +197,8 @@ const Sidebar = () => {
|
||||
setCookiesOnly={setCookiesOnly}
|
||||
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
||||
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
|
||||
readWarningDataDialog={readWarningDataDialog}
|
||||
setReadWarningDataDialog={setReadWarningDataDialog}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
|
||||
@ -83,7 +83,7 @@ export function StolenData({
|
||||
Zaznacz automatycznie
|
||||
</button> */}
|
||||
|
||||
<span>Domeny, które pozyskały informacje</span>
|
||||
<span>Domeny oraz przesłane informacje</span>
|
||||
|
||||
{clusters.map((cluster) => {
|
||||
return (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user