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 +459 -170
32 changed files with 459 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 78ee0bd52a - Show all commits

BIN
assets/fonts/fira-code/ttf/FiraCode-Bold.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/ttf/FiraCode-Light.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/ttf/FiraCode-Medium.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/ttf/FiraCode-Regular.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/ttf/FiraCode-Retina.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/ttf/FiraCode-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/variable_ttf/FiraCode-VF.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff/FiraCode-Bold.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff/FiraCode-Light.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff/FiraCode-Medium.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff/FiraCode-Regular.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff/FiraCode-SemiBold.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff/FiraCode-VF.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff2/FiraCode-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff2/FiraCode-Light.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff2/FiraCode-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff2/FiraCode-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff2/FiraCode-SemiBold.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fonts/fira-code/woff2/FiraCode-VF.woff2 Normal file
View File

Binary file not shown.

3
assets/icons/cookie.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="M11.9837 21.9999C6.47237 21.9938 2.00605 17.5203 2 11.9999C2.39311 12.1112 2.79955 12.168 3.20803 12.1689C4.55933 12.1789 5.82888 11.5217 6.6025 10.412C7.29413 9.41154 7.44027 8.13091 6.99186 6.99997C7.27858 7.05119 7.5692 7.07729 7.86045 7.07797C9.1552 7.08764 10.3841 6.50698 11.2 5.49998C11.9984 4.52274 12.3106 3.2352 12.0486 2C17.5625 2.01795 22.0178 6.50963 21.9999 12.0324C21.982 17.5553 17.4976 22.0178 11.9837 21.9999ZM12.7455 18.5679C12.8991 18.634 13.0645 18.6681 13.2317 18.6679C13.7362 18.6674 14.1909 18.363 14.3842 17.8961C14.5775 17.4293 14.4714 16.8919 14.1152 16.5339C13.8805 16.2998 13.5629 16.1683 13.2317 16.1679C12.6392 16.1693 12.1294 16.5877 12.0115 17.1693C11.8937 17.7509 12.2004 18.3353 12.7455 18.5679ZM6.91199 16.8749C7.11205 16.9578 7.32647 17.0003 7.54296 16.9999C8.21842 16.9997 8.82678 16.5907 9.08272 15.9646C9.33866 15.3385 9.19143 14.6195 8.71006 14.1449C8.3989 13.838 7.97969 13.6659 7.54296 13.6659C6.62442 13.667 5.88022 14.4129 5.87967 15.3329C5.87984 16.0017 6.2781 16.606 6.89202 16.8689H6.89702H6.908L6.91199 16.8749ZM16.3276 14.3679C16.9987 14.6502 17.775 14.4627 18.2439 13.9051C18.7127 13.3475 18.7652 12.5493 18.3733 11.9349C18.2506 11.7436 18.0902 11.5793 17.9021 11.4519C17.3853 11.1024 16.7167 11.0716 16.17 11.3721C15.6233 11.6726 15.2902 12.254 15.307 12.8784C15.3238 13.5028 15.6877 14.0654 16.2498 14.3359H16.2378L16.2677 14.3489L16.2877 14.3569H16.2817C16.296 14.3615 16.31 14.3669 16.3236 14.3729L16.3276 14.3679ZM11.9837 10.333C11.5855 10.3323 11.2426 10.6141 11.1655 11.0054C11.0883 11.3967 11.2986 11.7879 11.6672 11.9389C12.0357 12.0899 12.4594 11.9583 12.6782 11.625C12.8969 11.2917 12.8493 10.8499 12.5648 10.571C12.4906 10.4978 12.4032 10.4394 12.3072 10.399L12.2892 10.391L12.2623 10.381C12.1729 10.349 12.0786 10.3328 11.9837 10.333ZM15.7276 6.16697C15.0888 6.16539 14.5526 6.64873 14.4871 7.28522C14.4216 7.92172 14.8481 8.50444 15.4738 8.63339C16.0995 8.76235 16.7211 8.39562 16.9118 7.78494C17.1025 7.17425 16.8004 6.51814 16.2128 6.26698H16.2028C16.0525 6.20267 15.8911 6.16869 15.7276 6.16697ZM4.49593 9.49996C4.03663 9.49996 3.66429 9.12701 3.66429 8.66696C3.66429 8.20691 4.03663 7.83397 4.49593 7.83397C4.95523 7.83397 5.32757 8.20691 5.32757 8.66696C5.32702 9.12679 4.95501 9.49941 4.49593 9.49996ZM3.24797 6.99997C2.55873 6.99997 2 6.44033 2 5.74998C2 5.05963 2.55873 4.49999 3.24797 4.49999C3.9372 4.49999 4.49593 5.05963 4.49593 5.74998C4.49483 6.43988 3.93674 6.99887 3.24797 6.99997ZM8.23983 5.33298C7.55059 5.33298 6.99186 4.77334 6.99186 4.08299C6.99186 3.39264 7.55059 2.833 8.23983 2.833C8.92906 2.833 9.48779 3.39264 9.48779 4.08299C9.48779 4.7735 8.92922 5.33343 8.23983 5.33398V5.33298ZM5.32857 3.66699C4.8694 3.66699 4.49711 3.29425 4.49693 2.83433C4.49675 2.37441 4.86873 2.00137 5.32791 2.001C5.78708 2.00063 6.15967 2.37308 6.16022 2.833C6.16022 3.29321 5.78804 3.66644 5.32857 3.66699Z" fill="#2E3A59"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

3
assets/icons/warning.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="M21.2659 20.998H2.73288C2.37562 20.998 2.04551 20.8074 1.86688 20.498C1.68825 20.1886 1.68825 19.8074 1.86688 19.498L11.1329 3.49799C11.3117 3.1891 11.6415 2.9989 11.9984 2.9989C12.3553 2.9989 12.6851 3.1891 12.8639 3.49799L22.1299 19.498C22.3084 19.8072 22.3085 20.1882 22.1301 20.4975C21.9518 20.8069 21.622 20.9976 21.2649 20.998H21.2659ZM10.9999 15.998V17.998H11.9329H11.9979H12.0629H12.9979V15.998H10.9999ZM10.9999 8.99799V13.998H12.9999V8.99799H10.9999Z" fill="#2E3A59"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 590 B

1
esbuild.config.js
View File

@ -12,6 +12,7 @@ esbuild
],
bundle: true,
outdir: './lib',
loader: { '.woff': 'file', '.woff2': 'file' },
plugins: [scss(), svg()],
watch: {
onRebuild(error, result) {

2
memory.ts
View File

@ -56,7 +56,7 @@ export default class Memory extends EventEmitter {
}
return true;
} catch (e) {
debugger;
// debugger;
}
}

3
sidebar/colors.scss
View File

@ -1,2 +1,5 @@
$mid-grey: #2e3a59;
$disabled-grey: #8a949f;
$light-grey: #d1d1d1;
$blue: #0048D9;
$icd-yellow: #ffee2c;

49
sidebar/fonts.scss Normal file
View File

@ -0,0 +1,49 @@
@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;
}

9
sidebar/global.scss
View File

@ -1,3 +1,5 @@
@import './fonts.scss';
* {
margin: 0px;
padding: 0px;
@ -10,7 +12,8 @@
html {
font-size: 1rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
button {
@ -45,7 +48,3 @@ select {
flex-flow: column;
justify-content: flex-start;
}
tr:hover {
background-color: hsla(0, 0%, 0%, 0.1);
}

10
sidebar/sidebar.scss
View File

@ -1,6 +1,7 @@
@import './colors.scss';
header {
.sidebar {
.header {
display: grid;
grid-template-columns: 8rem 1fr 1rem;
max-height: 4rem;
@ -10,6 +11,7 @@ header {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
.webpage-metadata {
word-break: break-all;
@ -64,9 +66,10 @@ nav {
}
&:disabled {
color: $light-grey;
cursor: not-allowed;
color: $disabled-grey;
svg path {
fill: $light-grey;
fill: $disabled-grey;
}
}
@ -77,3 +80,4 @@ nav {
}
}
}
}

6
sidebar/sidebar.tsx
View File

@ -59,7 +59,7 @@ const Sidebar = () => {
}, [counter, origin]);
return (
<Fragment>
<div className="sidebar">
{/* <div id="selector">
<TabDropdown setPickedTab={setPickedTab} pickedTab={pickedTab} />
<button
@ -69,7 +69,7 @@ const Sidebar = () => {
Wybierz aktywną kartę{" "}
</button>
</div> */}
<header>
<header className="header">
<img
src="../assets/logo-internet-czas-dzialac.svg"
height={48}
@ -178,7 +178,7 @@ const Sidebar = () => {
</section>
{/* <footer>Footer marks → {JSON.stringify(marksOccurrence)}</footer> */}
</Fragment>
</div>
);
};

135
sidebar/stolen-data-cluster.scss Normal file
View File

@ -0,0 +1,135 @@
@import './colors.scss';
.stolen-data-cluster-container {
.domains-container {
padding-top: 1rem;
display: flex;
flex-flow: column;
border-bottom: none;
.domain {
color: $mid-grey;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
}
.subdomains-container {
.subdomain {
color: $blue;
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
}
}
}
section {
padding-bottom: 0.5rem;
border-bottom: 1px solid $light-grey;
}
table {
width: 100%;
position: relative;
left: -2px;
text-align: left;
font-size: 0.75rem;
font-family: 'Fira Code';
border-collapse: separate;
border-spacing: 1px;
tr {
vertical-align: middle;
&:hover {
background-color: $icd-yellow;
color: $mid-grey !important;
cursor: pointer;
}
&.untoggled {
color: $disabled-grey;
font-weight: 500;
}
&.toggled {
font-weight: 600;
color: $mid-grey;
th {
font-weight: 600;
}
}
th {
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
word-wrap: normal;
word-break: normal;
padding-left: 0.25rem;
font-weight: 500;
vertical-align: middle;
width: 10rem;
min-width: 10rem;
max-width: 10rem;
}
}
.value {
overflow: hidden;
word-break: break-all;
text-overflow: clip;
}
.icons {
white-space: nowrap;
padding: 0 0.25rem;
position: relative;
top: 2px;
.cookie-data {
path {
fill: #000;
}
}
.request-with-cookie {
path {
fill: #000;
}
}
.show-history-part {
path {
fill: #000;
}
}
.request-with-history-part {
path {
fill: #000;
}
}
}
.table-header {
color: $mid-grey;
font-size: 0.75rem;
font-weight: 600;
padding: 0.5rem 0;
text-align: left;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
sans-serif;
&:hover {
background: #fff;
}
}
.checkbox {
// background: red;
// width: 1rem;
position: relative;
top: 1px;
width: 0.875rem;
}
}
}

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

@ -1,8 +1,12 @@
import React from 'react';
import React, { Fragment } from 'react';
import { getMemory } from '../memory';
import { StolenDataEntry } from '../stolen-data-entry';
import { maskString, useEmitter } from '../util';
import CookieIcon from '../assets/icons/cookie.svg';
import WarningIcon from '../assets/icons/warning.svg';
import './stolen-data-cluster.scss';
const MAX_STRING_VALUE_LENGTH = 100;
@ -24,15 +28,16 @@ function StolenDataValue({
);
}
return (
<div
<td
className="value"
onClick={(e) => {
entry.toggleMark();
e.stopPropagation();
}}
style={{ color: entry.isMarked ? 'black' : 'gray' }}
// style={{ color: entry.isMarked ? 'black' : 'gray' }}
>
{body}
</div>
</td>
);
}
@ -45,8 +50,12 @@ function StolenDataRow({
}) {
const [version] = useEmitter(entry);
return (
<tr data-key={entry.id} data-version={version}>
<td>
<tr
data-key={entry.id}
data-version={version}
className={`${entry.isMarked ? 'toggled' : 'untoggled'}`}
>
<td className="checkbox">
<input
type="checkbox"
checked={entry.isMarked}
@ -57,10 +66,7 @@ function StolenDataRow({
/>
</td>
<th
style={{
width: '100px',
overflowWrap: 'anywhere',
}}
// className={`${entry.isMarked ? 'toggled' : 'untoggled'}`}
title={'Źródło: ' + entry.source}
onClick={() => {
entry.toggleMark();
@ -69,31 +75,51 @@ function StolenDataRow({
>
{entry.name}
</th>
<td style={{ whiteSpace: 'nowrap' }}>
<td className="icons">
{entry.source === 'cookie' ? (
<span title="Dane przechowywane w Cookies">🍪</span>
<span title="Dane przechowywane w Cookies">
<CookieIcon
height={16}
width={16}
className="cookie-data"
/>
</span>
) : entry.request.hasCookie() ? (
<span
title="Wysłane w zapytaniu opatrzonym cookies"
style={{ opacity: 0.5, fontSize: '0.5em' }}
title="Wysłane w zapytaniu opatrzonym Cookies"
style={{ opacity: 0.25 }}
>
🍪
<CookieIcon
height={16}
width={16}
className="request-with-cookie"
/>
</span>
) : null}
{entry.exposesOrigin() ? (
<span title="Pokazuje część historii przeglądania">⚠️</span>
<span title="Pokazuje część historii przeglądania">
<WarningIcon
height={16}
width={16}
className="show-history-part"
/>
</span>
) : entry.request.exposesOrigin() ? (
<span
title="Jest częścią zapytania, które ujawnia historię przeglądania"
style={{ opacity: 0.5, fontSize: '0.5em' }}
style={{ opacity: 0.25 }}
>
⚠️
<WarningIcon
height={16}
width={16}
className="request-with-history-part"
/>
</span>
) : null}
</td>
<td style={{ wordWrap: 'anywhere' as any }}>
{/* <td style={{ wordWrap: 'anywhere' as any }}> */}
<StolenDataValue entry={entry} />
</td>
</tr>
);
}
@ -115,38 +141,36 @@ export default function StolenDataCluster({
cookiesOrOriginOnly: boolean;
}) {
const cluster = getMemory().getClustersForOrigin(origin)[shorthost];
const fullHosts = cluster.getFullHosts();
return (
<div>
<h2>
<a href={'https://' + cluster.id}>{cluster.id}</a>{' '}
{cluster.hasCookies() ? '🍪' : ''} x{cluster.requests.length}{' '}
{/* <a
* href="#"
* style={{ fontSize: "10px" }}
* onClick={() => getMemory().removeCookiesFor(origin, shorthost)}
* >
* Wyczyść cookiesy
* </a> */}
<a
href="#"
style={{ fontSize: '10px' }}
onClick={(e) => {
cluster.autoMark();
refresh();
e.preventDefault();
}}
>
Zaznacz auto
<div className="stolen-data-cluster-container">
<header className="domains-container">
<a className="domain" href={'https://' + cluster.id}>
{cluster.id}
</a>
</h2>
<div>
{cluster.getFullHosts().map((host) => (
<a key={host} href={`https://${host}`}>
{host},{' '}
<div className="subdomains-container">
{fullHosts.map((host, index) => (
<a
className="subdomain"
key={host}
href={`https://${host}`}
>
{host}{' '}
{`${fullHosts.length - 1 !== index ? '· ' : ''}`}
</a>
))}
</div>
</header>
<section>
<table>
<thead>
<tr>
<th className="table-header" colSpan={4}>
Znalezione ustawienia:
</th>
</tr>
</thead>
<tbody>
{cluster
.calculateRepresentativeStolenData({
@ -165,6 +189,58 @@ export default function StolenDataCluster({
))}
</tbody>
</table>
</section>
</div>
// <div>
// <h2>
// <a href={'https://' + cluster.id}>{cluster.id}</a>{' '}
// {cluster.hasCookies() ? '🍪' : ''} x{cluster.requests.length}{' '}
// {/* <a
// * href="#"
// * style={{ fontSize: "10px" }}
// * onClick={() => getMemory().removeCookiesFor(origin, shorthost)}
// * >
// * Wyczyść cookiesy
// * </a> */}
// <a
// href="#"
// style={{ fontSize: '10px' }}
// onClick={(e) => {
// cluster.autoMark();
// refresh();
// e.preventDefault();
// }}
// >
// Zaznacz auto
// </a>
// </h2>
// <div>
// {cluster.getFullHosts().map((host) => (
// <a key={host} href={`https://${host}`}>
// {host},{' '}
// </a>
// ))}
// </div>
// <table>
// <tbody>
// {cluster
// .calculateRepresentativeStolenData({
// minValueLength,
// cookiesOnly,
// cookiesOrOriginOnly,
// })
// .map((entry) => (
// <StolenDataRow
// refresh={refresh}
// {...{
// entry,
// key: entry.id,
// }}
// />
// ))}
// </tbody>
// </table>
// </div>
);
}

10
sidebar/stolen-data.scss Normal file
View File

@ -0,0 +1,10 @@
@import './colors.scss';
.stolen-data-container {
padding-top: .5rem;
span {
color: $mid-grey;
font-size: 0.75rem;
font-weight: 600;
}
}

14
sidebar/stolen-data.tsx
View File

@ -5,6 +5,8 @@ import StolenDataCluster from './stolen-data-cluster';
import { getshorthost } from '../util';
import { getMemory } from '../memory';
import './stolen-data.scss';
export function StolenData({
origin,
minValueLength,
@ -21,7 +23,11 @@ export function StolenData({
cookiesOrOriginOnly: boolean;
}) {
if (!origin) {
return <div></div>;
return (
<div className="stolen-data-container">
<span>Otwórz nową kartę z wybraną stroną internetową</span>
</div>
);
}
const clusters = Object.values(getMemory().getClustersForOrigin(origin))
.sort(RequestCluster.sortCompare)
@ -33,8 +39,7 @@ export function StolenData({
cluster.exposesOrigin()
);
return (
<div style={{ padding: '5px' }}>
<div>
<div className="stolen-data-container">
{/* <button
style={{ marginLeft: '1rem' }}
onClick={() =>
@ -78,6 +83,8 @@ export function StolenData({
Zaznacz automatycznie
</button> */}
<span>Domeny otrzymujące informacje</span>
{clusters.map((cluster) => {
return (
<StolenDataCluster
@ -93,6 +100,5 @@ export function StolenData({
);
})}
</div>
</div>
);
}