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

Parse URLs in data value display, make the layout denser

Browse Source
This commit is contained in:
Kuba Orlik 2021-11-07 10:09:41 +01:00
parent fa42e848ea
commit 3f61445831
5 changed files with 98 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sidebar.html
View File

@ -31,6 +31,10 @@
#app {
user-select: text;
}
tr:hover {
background-color: hsla(0, 0%, 0%, 0.1);
}
</style>
</head>
<body>

5
sidebar.tsx
View File

@ -24,11 +24,6 @@ const Sidebar = () => {
console.log("tab change!");
const tab = await getCurrentTab();
const url = new URL(tab.url);
console.log(
"NEW ORIGIN",
url.origin,
url.origin.startsWith("moz-extension")
);
if (url.origin.startsWith("moz-extension")) {
return;
}

66
stolen-data-row.tsx
View File

@ -1,6 +1,66 @@
import React from "react";
import memory from "./memory";
import { Sources } from "./request-cluster";
import { hyphenate, isJSONObject, isURL, parseToObject } from "./util";
function StolenDataValueTable({
object,
prefixKey = "",
}: {
object: Record<string, unknown>;
prefixKey: string;
}) {
return (
<table>
<tbody>
{Object.entries(object).map(([key, value]) => (
<tr key={`${prefixKey}.${key}`}>
<th>{hyphenate(key)}</th>
<td>
<StolenDataValue
value={value}
prefixKey={`${prefixKey}.${key}`}
/>
</td>
</tr>
))}
</tbody>
</table>
);
}
function StolenDataValue({
value,
prefixKey = "",
}: {
value: unknown;
prefixKey?: string;
}) {
if (!value) {
return <></>;
}
console.log("parsing value!", value);
if (isJSONObject(value)) {
const object = parseToObject(value);
return <StolenDataValueTable object={object} prefixKey={prefixKey} />;
} else if (isURL(value)) {
const url = new URL(value);
const object = {
host: url.host,
path: url.pathname,
...Object.fromEntries(
(
url.searchParams as unknown as {
entries: () => Iterable<[string, string]>;
}
).entries()
),
};
return <StolenDataValueTable object={object} prefixKey={prefixKey} />;
} else {
return <>{value.toString()}</>;
}
}
export default function StolenDataRow({
origin,
@ -43,12 +103,12 @@ export default function StolenDataRow({
key={origin + cluster.id + entry.getUniqueKey()}
data-key={origin + cluster.id + entry.getUniqueKey()}
>
<th style={{ maxWidth: "200px", wordWrap: "break-word" }}>
{entry.getNames().join(",")}
<th style={{ width: "100px", overflowWrap: "anywhere" }}>
{entry.getNames().map(hyphenate).join(", ")}
</th>
<td>{entry.getSources().map((source) => icons[source])}</td>
<td style={{ wordWrap: "anywhere" as any }}>
{entry.getValues()[0]}
<StolenDataValue value={entry.getValues()[0]} />
</td>
</tr>
))}

2
tsconfig.json
View File

@ -2,7 +2,7 @@
"compilerOptions": {
"jsx": "react",
"esModuleInterop": true,
"lib": ["es2017", "dom"],
"lib": ["es2017", "dom", "es2019"],
"typeRoots": ["node_modules/@types", "node_modules/web-ext-types"],
"outDir": "lib"
}

30
util.ts
View File

@ -46,3 +46,33 @@ export async function getTabByID(id: number) {
const tabs = await browser.tabs.query({ currentWindow: true });
return tabs.find((tab) => tab.id == id);
}
export function parseToObject(str: unknown): Record<string, unknown> {
if (typeof str === "string") {
return JSON.parse(str);
} else if (typeof str == "object") {
return str as Record<string, unknown>;
}
}
export function isJSONObject(
str: unknown
): str is Record<string, unknown> | string | number {
try {
return JSON.stringify(parseToObject(str))[0] == "{";
} catch (e) {
return false;
}
}
export function isURL(str: unknown): str is string {
try {
return !!(typeof str === "string" && new URL(str));
} catch (e) {
return false;
}
}
export function hyphenate(str: string): string {
return str.replace(/[_\[A-Z]/g, `${String.fromCharCode(173)}$&`);
}