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 +241 -108
8 changed files with 241 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 49542b58e5 - Show all commits

3
assets/icons/close_big.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 240 B

4
manifest.json
View File

@ -3,10 +3,10 @@
"name": "Problematyczne requesty", "name": "Problematyczne requesty",
"version": "1.0", "version": "1.0",
"description": "Adds a red border to all webpages matching mozilla.org.", "description": "",
"sidebar_action": { "sidebar_action": {
"default_title": "ICD Skaner", "default_title": "ICD",
"default_panel": "sidebar/sidebar.html", "default_panel": "sidebar/sidebar.html",
"default_icon": "sidebar_icon.png" "default_icon": "sidebar_icon.png"
}, },

30
options.scss Normal file
View 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
View File

@ -1,50 +1,96 @@
import React from "react"; import React from 'react';
import './options.scss';
export default function Options({ export default function Options({
minValueLength, minValueLength,
setMinValueLength, setMinValueLength,
cookiesOnly, cookiesOnly,
setCookiesOnly, setCookiesOnly,
cookiesOrOriginOnly, cookiesOrOriginOnly,
setCookiesOrOriginOnly, setCookiesOrOriginOnly,
readWarningDataDialog,
setReadWarningDataDialog,
}: { }: {
minValueLength: number; minValueLength: number;
setMinValueLength: (n: number) => void; setMinValueLength: (n: number) => void;
cookiesOnly: boolean; cookiesOnly: boolean;
setCookiesOnly: (b: boolean) => void; setCookiesOnly: (b: boolean) => void;
cookiesOrOriginOnly: boolean; cookiesOrOriginOnly: boolean;
setCookiesOrOriginOnly: (b: boolean) => void; setCookiesOrOriginOnly: (b: boolean) => void;
readWarningDataDialog: string;
setReadWarningDataDialog: (s: string) => void;
}) { }) {
return ( return (
<fieldset> <div className="options-container">
<h3>Zaawansowane ustawienia 💛</h3> <span>Ustawienia interfejsu</span>
<label htmlFor="minValueLength"> <fieldset>
Pokazuj tylko wartości o długości co najmniej{" "} <div className="input-container">
</label> <input
<input type="checkbox"
type="number" id="readWarningDataDialog"
id="minValueLength" checked={readWarningDataDialog != '1'}
value={minValueLength} onChange={(e) => {
onChange={(e) => setMinValueLength(parseInt(e.target.value))} setReadWarningDataDialog(
/> e.target.checked ? '0' : '1'
<br /> );
<input localStorage.setItem(
type="checkbox" 'readWarningDataDialog',
id="cookiesOnly" e.target.checked ? '0' : '1'
checked={cookiesOnly} );
onChange={(e) => setCookiesOnly(e.target.checked)} }}
/> />
<label htmlFor="cookiesOnly">Pokazuj tylko dane z cookiesów</label> <label
<br /> className="label-checkbox"
<input htmlFor="readWarningDataDialog"
type="checkbox" >
id="cookiesOrOriginOnly" Wyświetlaj informację o pozyskiwanych danych
checked={cookiesOrOriginOnly} </label>
onChange={(e) => setCookiesOrOriginOnly(e.target.checked)} </div>
/> </fieldset>
<label htmlFor="cookiesOrOriginOnly"> <span>Ustawienia zaawansowane</span>
Pokazuj tylko dane z cookiesów lub z częścią historii przeglądania <fieldset>
</label> <div className="input-container">
</fieldset> <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>
);
} }

2
sidebar/colors.scss
View File

@ -3,3 +3,5 @@ $disabled-grey: #8a949f;
$light-grey: #d1d1d1; $light-grey: #d1d1d1;
$blue: #0048D9; $blue: #0048D9;
$icd-yellow: #ffee2c; $icd-yellow: #ffee2c;
$pale-yellow: #fff8e5;
$contrast-yellow: #ffb900;

26
sidebar/sidebar.scss
View File

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

146
sidebar/sidebar.tsx
View File

@ -9,6 +9,7 @@ import SettingsIcon from '../assets/icons/settings.svg';
import TrashIcon from '../assets/icons/trash_full.svg'; import TrashIcon from '../assets/icons/trash_full.svg';
import MailIcon from '../assets/icons/mail.svg'; import MailIcon from '../assets/icons/mail.svg';
import ShortLeftIcon from '../assets/icons/short_left.svg'; import ShortLeftIcon from '../assets/icons/short_left.svg';
import CloseBigIcon from '../assets/icons/close_big.svg';
async function getCurrentTab() { async function getCurrentTab() {
const [tab] = await browser.tabs.query({ const [tab] = await browser.tabs.query({
@ -30,6 +31,9 @@ const Sidebar = () => {
useState<boolean>(false); useState<boolean>(false);
const [counter, setCounter] = useEmitter(getMemory()); const [counter, setCounter] = useEmitter(getMemory());
const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false); const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
const [readWarningDataDialog, setReadWarningDataDialog] = useState<
string | null
>(localStorage.getItem('readWarningDataDialog'));
useEffect(() => { useEffect(() => {
const listener = async (data: any) => { const listener = async (data: any) => {
@ -91,18 +95,15 @@ const Sidebar = () => {
)} )}
</header> </header>
<nav> {stolenDataView ? (
{stolenDataView ? ( <nav>
<Fragment> <button onClick={() => setStolenDataView(!stolenDataView)}>
<button {/* {stolenDataView ? 'Options' : 'Data'}
onClick={() => setStolenDataView(!stolenDataView)} */}
> <SettingsIcon width={20} height={20} />
{/* {stolenDataView ? 'Options' : 'Data'} <span>Ustawienia wtyczki</span>
*/} </button>
<SettingsIcon width={20} height={20} /> {/* <button
<span>Ustawienia wtyczki</span>
</button>
{/* <button
onClick={() => { onClick={() => {
getMemory().removeCookiesFor( getMemory().removeCookiesFor(
origin, origin,
@ -114,57 +115,80 @@ const Sidebar = () => {
<TrashIcon /> <TrashIcon />
<span>Wyczyść ciasteczka first-party</span> <span>Wyczyść ciasteczka first-party</span>
</button> */} </button> */}
<button <button
onClick={() => { onClick={() => {
getMemory().removeRequestsFor(origin); getMemory().removeRequestsFor(origin);
setCounter((c) => c + 1); setCounter((c) => c + 1);
setMarksOccurrence(false); setMarksOccurrence(false);
}} }}
> >
{/* {stolenDataView ? 'Options' : 'Data'} {/* {stolenDataView ? 'Options' : 'Data'}
*/} */}
<TrashIcon width={20} height={20} /> <TrashIcon width={20} height={20} />
<span>Wyczyść ciasteczka</span> <span>Wyczyść ciasteczka</span>
</button> </button>
<button <button
disabled={!marksOccurrence} disabled={!marksOccurrence}
title={ title={
marksOccurrence marksOccurrence
? 'Kliknij, aby wygenerować wiadomość' ? 'Kliknij, aby wygenerować wiadomość'
: 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość' : 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
} }
onClick={() => { onClick={() => {
const params = [ const params = [
'height=' + screen.height, 'height=' + screen.height,
'width=' + screen.width, 'width=' + screen.width,
'fullscreen=yes', 'fullscreen=yes',
].join(','); ].join(',');
window.open( window.open(
`/report-window/report-window.html?origin=${origin}`, `/report-window/report-window.html?origin=${origin}`,
'new_window', 'new_window',
params params
); );
}} }}
> >
<MailIcon width={20} height={20} /> <MailIcon width={20} height={20} />
<span> <span>
Utwórz wiadomość dla administratora tej witryny Utwórz wiadomość dla administratora tej witryny
</span> </span>
</button> </button>
</Fragment> </nav>
) : null} ) : null}
</nav>
<section> <section>
{stolenDataView ? ( {stolenDataView ? (
<StolenData <Fragment>
origin={origin} {readWarningDataDialog != '1' ? (
refreshToken={counter} <section className="warning-container">
refresh={() => setCounter((c) => c + 1)} <span>
minValueLength={minValueLength} <strong>Uwaga!</strong> Niekoniecznie każda
cookiesOnly={cookiesOnly} przechwycona poniżej informacja jest daną
cookiesOrOriginOnly={cookiesOrOriginOnly} 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 <Options
minValueLength={minValueLength} minValueLength={minValueLength}
@ -173,6 +197,8 @@ const Sidebar = () => {
setCookiesOnly={setCookiesOnly} setCookiesOnly={setCookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly} cookiesOrOriginOnly={cookiesOrOriginOnly}
setCookiesOrOriginOnly={setCookiesOrOriginOnly} setCookiesOrOriginOnly={setCookiesOrOriginOnly}
readWarningDataDialog={readWarningDataDialog}
setReadWarningDataDialog={setReadWarningDataDialog}
/> />
)} )}
</section> </section>

2
sidebar/stolen-data.tsx
View File

@ -83,7 +83,7 @@ export function StolenData({
Zaznacz automatycznie Zaznacz automatycznie
</button> */} </button> */}
<span>Domeny, które pozyskały informacje</span> <span>Domeny oraz przesłane informacje</span>
{clusters.map((cluster) => { {clusters.map((cluster) => {
return ( return (