roxxie-proxy-u-prod 0.1.0

package/source/packages/chrome/src/adblock/NOTICE.md

@@ -0,0 +1,14 @@
+# Ad-blocking notices
+
+The Roxxie Proxy U integration code in this directory is licensed under
+AGPL-3.0-only with the rest of the project.
+
+It uses [`@ghostery/adblocker`](https://github.com/ghostery/adblocker),
+licensed under MPL-2.0. The library describes its filter parser as compatible
+with uBlock Origin and EasyList syntax. The generated filter-engine asset is
+compiled from EasyList, EasyPrivacy, and the uBlock Origin filter lists listed
+in `third_party/filter-lists/manifest.json`. The engine also embeds the uBlock
+redirect resources recorded there.
+
+The original list snapshots, attribution, source URLs, hashes, and license
+texts are retained under `third_party/filter-lists/`.

package/source/packages/chrome/src/adblock/index.ts

@@ -0,0 +1,18 @@
+/* SPDX-License-Identifier: AGPL-3.0-only */
+
+import filterEngineUrl from "./assets/filters.bin?url";
+import { AdBlockPlugin } from "./AdBlockPlugin";
+import { AdBlockService } from "./AdBlockService";
+
+export { AdBlockPlugin, AdBlockService };
+export * from "./AdBlockService";
+
+export function createBundledAdBlocker(enabled: () => boolean): {
+	plugin: AdBlockPlugin;
+	ready: Promise<void>;
+	service: AdBlockService;
+} {
+	const service = new AdBlockService(enabled);
+	const ready = service.initialize(filterEngineUrl);
+	return { plugin: new AdBlockPlugin(service), ready, service };
+}

package/source/packages/chrome/src/assets/favicon.ts

@@ -0,0 +1,4 @@
+import defaultFavicon from "/defaultfavicon.png";
+
+export const defaultFaviconUrl = defaultFavicon;
+export const roxxieIconUrl = `${import.meta.env.BASE_URL}roxxie-icon.svg`;

package/source/packages/chrome/src/components/BookmarkPopup.tsx

@@ -0,0 +1,101 @@
+import { css, type FC, type Stateful } from "dreamland/core";
+import { Input } from "@components/Input";
+import { closeMenu } from "@components/Menu";
+import { Button } from "@components/Button";
+import type { BookmarkEntry } from "../services/ProfileService";
+import { profileService } from "..";
+
+export function BookmarkPopup(
+	this: FC<{
+		bookmark: Stateful<BookmarkEntry>;
+		new: boolean;
+	}>
+) {
+	return (
+		<div>
+			<div class="title">{this.new ? "Add Bookmark" : "Edit Bookmark"}</div>
+
+			<div class="field">
+				<Input label="Title" value={use(this.bookmark.title)} />
+			</div>
+			<div class="field">
+				<Input label="URL" value={use(this.bookmark.url.href)} />
+			</div>
+			<div class="actions">
+				<Button
+					on:click={() => {
+						if (!this.new) {
+							profileService.bookmarks = profileService.bookmarks.filter(
+								(b) => b !== this.bookmark
+							);
+						}
+						closeMenu();
+					}}
+				>
+					{this.new ? "Cancel" : "Delete"}
+				</Button>
+				<Button
+					variant="primary"
+					on:click={() => {
+						if (this.new) {
+							profileService.bookmarks = [
+								this.bookmark,
+								...profileService.bookmarks,
+							];
+						}
+
+						closeMenu();
+					}}
+				>
+					{this.new ? "Add" : "Save"}
+				</Button>
+			</div>
+		</div>
+	);
+}
+BookmarkPopup.style = css`
+	:scope {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xl);
+		width: 20em;
+		padding: var(--space-xl);
+		padding-top: 0;
+	}
+	.title {
+		padding: var(--space-xl);
+		font-weight: bold;
+		border-bottom: 1px solid var(--text-30);
+		text-align: center;
+		margin-inline: calc(var(--space-xl) * -1);
+	}
+	.field {
+		margin-bottom: var(--space-md);
+	}
+	.actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--space-md);
+		margin-top: var(--space-md);
+	}
+	button {
+		background: var(--toolbar_field);
+		border: 1px solid var(--text-20);
+		border-radius: var(--radius-md);
+		padding: var(--space-md) var(--space-xl);
+		font-size: 0.9em;
+		cursor: pointer;
+		color: var(--toolbar_field_text);
+	}
+	button:hover {
+		background: var(--text-10);
+	}
+	button.accent {
+		background: var(--tab_line);
+		color: white;
+		border-color: var(--tab_line);
+	}
+	button.accent:hover {
+		background: var(--accent-shade-15);
+	}
+`;

package/source/packages/chrome/src/components/BookmarksStrip.tsx

@@ -0,0 +1,150 @@
+import { css, type FC, type Stateful } from "dreamland/core";
+import { iconAdd, iconOpen, iconLink, iconBrush, iconTrash } from "../icons";
+import { createMenu, createMenuCustom, setContextMenu } from "@components/Menu";
+import { BookmarkPopup } from "@components/BookmarkPopup";
+import { profileService, settingsService, tabsService } from "..";
+import type { BookmarkEntry } from "../services/ProfileService";
+
+export function BookmarksStrip(
+	this: FC<{
+		orientation?: "horizontal" | "vertical";
+	}>
+) {
+	this.orientation ??= "horizontal";
+
+	this.cx.mount = () => {
+		setContextMenu(this.root, [
+			{
+				label: "Add Bookmark",
+				icon: iconAdd,
+				action: () => {},
+			},
+			{
+				label: "Pin Bookmarks Strip",
+				checkbox: use(settingsService.settings.showBookmarksBar),
+			},
+		]);
+	};
+	return (
+		<div class:vertical={this.orientation === "vertical"}>
+			{use(profileService.bookmarks).mapEach((b) => (
+				<button
+					on:auxclick={(e: MouseEvent) => {
+						if (e.button != 1) return;
+						tabsService.newTab(new URL(b.url));
+					}}
+					on:contextmenu={(e: MouseEvent) => {
+						createMenu({ left: e.clientX, top: e.clientY }, [
+							{
+								label: "Open",
+								icon: iconLink,
+								action: () =>
+									tabsService.activetab.pushNavigate(new URL(b.url)),
+							},
+							{
+								label: "Open in New Tab",
+								icon: iconOpen,
+								action: () => tabsService.newTab(new URL(b.url)),
+							},
+							{
+								label: "Edit Bookmark",
+								action: () => {
+									// doesn't like having the menu open while opening another menu
+									requestAnimationFrame(() => {
+										createMenuCustom(
+											{
+												left: e.clientX,
+												top: e.clientY,
+											},
+											<BookmarkPopup
+												bookmark={b as Stateful<BookmarkEntry>}
+												new={false}
+											/>
+										);
+									});
+								},
+								icon: iconBrush,
+							},
+							{
+								label: "Delete Bookmark",
+								icon: iconTrash,
+								action: () => {
+									profileService.bookmarks = profileService.bookmarks.filter(
+										(br) => br != b
+									);
+								},
+							},
+						]);
+						e.preventDefault();
+						e.stopPropagation();
+					}}
+					on:click={() => {
+						tabsService.activetab.pushNavigate(new URL(b.url));
+					}}
+				>
+					<img src={use(b.favicon)}></img>
+					<span>{use(b.title)}</span>
+				</button>
+			))}
+		</div>
+	);
+}
+BookmarksStrip.style = css`
+	:scope {
+		padding: var(--space-xs);
+		padding-left: var(--space-md);
+		display: flex;
+		gap: var(--space-md);
+		background: var(--toolbar);
+		color: var(--toolbar_text);
+		height: var(--tab-height);
+	}
+
+	:scope.vertical {
+		padding: 0;
+		height: auto;
+		flex-direction: column;
+		gap: var(--space-sm);
+		background: none;
+	}
+
+	button {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		gap: var(--space-sm);
+		padding-inline: var(--space-xs);
+		border-radius: var(--radius-xs);
+		color: var(--toolbar_text);
+	}
+
+	:scope.vertical button {
+		width: 100%;
+		height: auto;
+		gap: var(--space-sm);
+		min-height: var(--tab-height);
+		padding: var(--space-md);
+		border-radius: calc(var(--radius-md) + 1px);
+		background: var(--toolbar_field);
+	}
+
+	button:hover {
+		background: var(--toolbarbutton-hover-background);
+	}
+
+	button span {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-size: 0.83rem;
+	}
+
+	:scope.vertical button span {
+		font-size: 0.75rem;
+	}
+
+	button img {
+		width: 16px;
+		height: 16px;
+	}
+`;

package/source/packages/chrome/src/components/Button.tsx

@@ -0,0 +1,99 @@
+import { css, type FC } from "dreamland/core";
+
+export function Button(
+	this: FC<{
+		"on:click"?: (e: any) => void;
+		disabled?: boolean;
+		variant?: "primary" | "secondary" | "icon";
+		children?: any;
+	}>
+) {
+	return (
+		<button
+			class={this.variant || ""}
+			disabled={use(this.disabled)}
+			on:click={this["on:click"] || (() => {})}
+		>
+			{this.children}
+		</button>
+	);
+}
+
+Button.style = css`
+	:scope {
+		color: inherit;
+	}
+	:scope:not(.icon) {
+		background: var(--toolbar_field);
+		border: 1px solid var(--text-20);
+		border-radius: var(--radius-md);
+		padding: var(--space-md) var(--space-xl);
+		font-size: 0.9em;
+		cursor: pointer;
+		color: var(--toolbar_field_text);
+	}
+	:scope:not(.icon):hover {
+		background: var(--text-10);
+		background-image: radial-gradient(
+			70% 80% at 50% 100%,
+			var(--text-8),
+			var(--text-5)
+		);
+	}
+	:scope.primary {
+		background-color: var(--tab_line);
+		background-image: radial-gradient(
+			70% 80% at 50% 100%,
+			var(--tab_line),
+			var(--accent-shade-20)
+		);
+		box-shadow: inset 0px 0.05em 0.025em rgb(255 255 255 / 30%);
+		text-shadow: 0 0.055em 0.05em var(--accent-shade-20);
+		color: white;
+		font-weight: 500;
+		border-color: var(--tab_line);
+	}
+
+	:scope.primary:hover {
+		background-color: var(--accent-shade-10);
+		background-image: radial-gradient(
+			70% 80% at 50% 100%,
+			var(--accent-shade-5),
+			var(--accent-shade-25)
+		);
+		filter: saturate(1.1);
+	}
+
+	:scope:disabled,
+	:scope[disabled] {
+		opacity: 0.6;
+		cursor: not-allowed;
+		pointer-events: none;
+		background: var(--toolbar_field);
+		color: var(--text-40);
+		border-color: var(--text-20);
+	}
+	:scope:disabled:hover,
+	:scope[disabled]:hover {
+		background: var(--toolbar_field);
+	}
+
+	:scope.icon {
+		display: flex;
+		align-items: center;
+		font-size: 1em;
+		position: relative;
+	}
+	:scope.icon:hover::before {
+		content: "";
+		z-index: -1;
+		position: absolute;
+		width: 150%;
+		height: 150%;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: var(--text-15);
+		border-radius: 50%;
+	}
+`;

package/source/packages/chrome/src/components/Checkbox.tsx

@@ -0,0 +1,89 @@
+import { css, type FC } from "dreamland/core";
+
+export function Checkbox(
+	this: FC<{
+		value: boolean;
+		id?: string;
+		disabled?: boolean;
+		"on:change"?: (value: boolean) => void;
+	}>
+) {
+	return (
+		<label>
+			<input
+				type="checkbox"
+				id={use(this.id)}
+				checked={use(this.value)}
+				disabled={use(this.disabled).map((v) => (v ? true : undefined))}
+				onChange={(e: Event) =>
+					this["on:change"]?.((e.currentTarget as HTMLInputElement).checked)
+				}
+			></input>
+		</label>
+	);
+}
+
+Checkbox.style = css`
+	:scope {
+		width: 1em;
+		height: 1em;
+		background: var(--toolbar_field);
+		border: 1px solid var(--text-20);
+		display: inline-block;
+		position: relative;
+		border-radius: min(0.25em, var(--radius-md));
+		vertical-align: middle;
+		transition:
+			background 120ms ease,
+			border-color 120ms ease;
+		box-sizing: border-box;
+		margin: 0;
+	}
+
+	:scope::after {
+		content: "✓";
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--toolbar_field);
+		text-shadow: 0 0.055em 0.05em var(--accent-shade-20);
+		font-size: 0.8em;
+		transform: scale(0);
+		transition: transform 120ms cubic-bezier(0.43, 0.91, 0.34, 1.3);
+		pointer-events: none;
+	}
+
+	:scope:has(input:checked) {
+		background-color: var(--tab_line);
+		background-image: radial-gradient(
+			70% 50% at 50% 100%,
+			var(--accent-tint-20),
+			var(--accent-shade-10)
+		);
+		box-shadow:
+			inset 0px 0.05em 0.025em rgb(255 255 255 / 40%),
+			inset 0px -0.05em 0.04em rgb(0 0 0 / 20%);
+		border: none;
+	}
+
+	:scope:has(input:checked)::after {
+		transform: scale(1) translateY(0.5px);
+	}
+
+	:scope:has(input:disabled) {
+		opacity: 0.5;
+		filter: grayscale(100%);
+		cursor: not-allowed;
+	}
+
+	input {
+		visibility: hidden;
+		display: block;
+		height: 0;
+		width: 0;
+		position: absolute;
+		overflow: hidden;
+	}
+`;

package/source/packages/chrome/src/components/DownloadsPopup.tsx

@@ -0,0 +1,230 @@
+import { css } from "dreamland/core";
+import { Icon } from "@components/Icon";
+import { closeMenu } from "@components/Menu";
+import { iconClose, iconFolder, iconOpen, iconPause } from "../icons";
+import { formatBytes } from "../util";
+import { INTERNAL_URL_PROTOCOL } from "../consts";
+import { Button } from "@components/Button";
+import { Favicon } from "@components/Favicon";
+import { downloadsService, tabsService } from "..";
+
+export function DownloadsPopup() {
+	return (
+		<div>
+			<div class="title">
+				<span>Recent Downloads</span>
+				<div class="buttoniconcontainer">
+					<Button
+						variant="icon"
+						on:click={() => {
+							closeMenu();
+						}}
+					>
+						<Icon icon={iconClose}></Icon>
+					</Button>
+				</div>
+			</div>
+			<div class="entries">
+				{use(downloadsService.sessionDownloadHistory).mapEach((b) => (
+					<div class="entry">
+						<div class="iconcontainer">
+							<Favicon domain={new URL(b.url).hostname} size="medium"></Favicon>
+						</div>
+						<div class="contents">
+							<span>{b.filename}</span>
+							{use(b.progressbytes)
+								.and(
+									<span class="data">
+										{use(b.progressbytes).map((s) => formatBytes(s!))}/
+										{formatBytes(b.size)}
+									</span>
+								)
+								.or(<span class="data">{formatBytes(b.size)}</span>)}
+						</div>
+						<div class="buttoniconcontainer">
+							{use(b.progress)
+								.and(
+									<>
+										<Button
+											variant="icon"
+											on:click={() => {
+												b.pause!();
+											}}
+										>
+											<Icon icon={iconPause}></Icon>
+										</Button>
+										<Button
+											variant="icon"
+											on:click={() => {
+												b.cancel!();
+											}}
+										>
+											<Icon icon={iconClose}></Icon>
+										</Button>
+									</>
+								)
+								.or(
+									<>
+										<Button variant="icon">
+											<Icon icon={iconFolder}></Icon>
+										</Button>
+										<Button variant="icon">
+											<Icon icon={iconOpen}></Icon>
+										</Button>
+									</>
+								)}
+						</div>
+						{use(b.progress).and(
+							<progress value={use(b.progress).map((p) => p || 0)} max="1">
+								50%
+							</progress>
+						)}
+					</div>
+				))}
+			</div>
+			<div
+				class="footer"
+				on:click={() => {
+					tabsService.newTab(new URL(`${INTERNAL_URL_PROTOCOL}//downloads`));
+					closeMenu();
+				}}
+			>
+				<span>Full Download History</span>
+				<div class="buttoniconcontainer">
+					<Icon icon={iconOpen}></Icon>
+				</div>
+			</div>
+		</div>
+	);
+}
+DownloadsPopup.style = css`
+	:scope {
+		width: 20em;
+		display: flex;
+		flex-direction: column;
+		user-select: none;
+	}
+
+	.title {
+		padding: var(--space-xl);
+		display: flex;
+		border-bottom: 1px solid var(--text-30);
+	}
+	.title p {
+		font-size: 1.25em;
+	}
+	.title button {
+		display: flex;
+		align-items: center;
+		font-size: 1em;
+		position: relative;
+	}
+	.title button:hover::before {
+		content: "";
+		z-index: -1;
+		position: absolute;
+		width: 150%;
+		height: 150%;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: var(--text-15);
+		border-radius: 50%;
+	}
+
+	.entries {
+		max-height: 30em;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	.entry {
+		padding: var(--space-xl);
+		display: flex;
+		gap: var(--space-xl);
+		font-size: 0.9em;
+		position: relative;
+	}
+	.entry:hover {
+		background: var(--text-15);
+	}
+	.contents {
+		display: flex;
+		overflow: hidden;
+		flex-direction: column;
+		gap: var(--space-md);
+	}
+	.entry .buttoniconcontainer {
+		display: none;
+	}
+	.entry:hover .buttoniconcontainer {
+		display: flex;
+	}
+	.entry .buttoniconcontainer {
+		position: absolute;
+		right: 0;
+		top: 0;
+		padding: var(--space-xl);
+		background: var(--text-15);
+		height: 100%;
+		align-items: start;
+		gap: var(--space-xl);
+	}
+	.entry .buttoniconcontainer button {
+		font-size: 1.15em;
+		position: relative;
+		z-index: 1;
+		display: flex;
+	}
+	.entry .buttoniconcontainer button:hover::before {
+		content: "";
+		z-index: -1;
+		position: absolute;
+		width: 150%;
+		height: 150%;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: var(--text-30);
+		border-radius: 50%;
+	}
+
+	.contents .data {
+		color: var(--text-70);
+	}
+	.footer {
+		border-top: 1px solid var(--text-30);
+		padding: var(--space-xl);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+	}
+	.footer:hover {
+		background: var(--text-15);
+	}
+	.buttoniconcontainer {
+		flex: 1;
+		display: flex;
+		justify-content: right;
+	}
+	progress {
+		z-index: 1;
+		position: absolute;
+		bottom: -0.25em;
+		left: 2em;
+		margin: var(--space-md);
+		width: calc(100% - 4em);
+		height: 0.25em;
+		border: none;
+	}
+	progress::-webkit-progress-bar {
+		background-color: var(--text-30);
+		border-radius: var(--radius-md);
+	}
+	progress::-webkit-progress-value {
+		background-color: var(--tab_line);
+		border-radius: var(--radius-md);
+	}
+`;