@64mb/freelens-power 1.2.0 → 1.2.2

package/out/main/dashboard-preload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-preload.js","names":[],"sources":["../../src/main/dashboard-preload.ts"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\n\n// this preload runs before website scripts without requiring modules in the sandbox\n(() => {\n  const properties = [\n    [\"opacity\", \"0\"],\n    [\"pointer-events\", \"none\"],\n  ] as const;\n  const masked = new Map<HTMLElement, Map<string, { value: string; priority: string }>>();\n  const overlay = document.createElement(\"freelens-power-loading\");\n  const style = (element: HTMLElement, values: Record<string, string>) => {\n    for (const [property, value] of Object.entries(values)) element.style.setProperty(property, value, \"important\");\n  };\n  const dark = window.matchMedia?.(\"(prefers-color-scheme: dark)\").matches ?? false;\n  style(overlay, {\n    position: \"fixed\",\n    inset: \"0\",\n    display: \"block\",\n    \"z-index\": \"2147483647\",\n    \"pointer-events\": \"all\",\n    opacity: \"1\",\n    background: dark ? \"#202124\" : \"#ffffff\",\n    padding: \"20px\",\n    \"box-sizing\": \"border-box\",\n    overflow: \"hidden\",\n  });\n  const shadow = overlay.attachShadow({ mode: \"open\" });\n  for (let index = 0; index < 4; index++) {\n    const bar = document.createElement(\"div\");\n    style(bar, {\n      display: \"block\",\n      background: dark ? \"#393b40\" : \"#e8e9eb\",\n      \"border-radius\": \"6px\",\n      width: index === 0 ? \"45%\" : \"100%\",\n      height: index === 0 ? \"20px\" : index === 3 ? \"calc(100vh - 148px)\" : \"12px\",\n      \"min-height\": index === 3 ? \"30px\" : \"0\",\n      \"margin-bottom\": index === 0 ? \"20px\" : \"12px\",\n    });\n    shadow.append(bar);\n  }\n  const animations: Animation[] = [];\n  let preparing = false;\n  const restore = (element: HTMLElement) => {\n    for (const [property, value] of properties) {\n      const saved = masked.get(element)?.get(property);\n      if (\n        saved &&\n        element.style.getPropertyValue(property) === value &&\n        element.style.getPropertyPriority(property) === \"important\"\n      ) {\n        if (saved.value) element.style.setProperty(property, saved.value, saved.priority);\n        else element.style.removeProperty(property);\n      }\n    }\n    masked.delete(element);\n  };\n  const apply = () => {\n    if (!preparing || !document.documentElement) return;\n    if (overlay.parentElement !== document.documentElement) document.documentElement.append(overlay);\n    for (const element of masked.keys()) {\n      if (element.parentElement !== document.documentElement) restore(element);\n    }\n    for (const element of Array.from(document.documentElement.children)) {\n      if (!(element instanceof HTMLElement) || element === overlay) continue;\n      let previous = masked.get(element);\n      if (!previous) {\n        previous = new Map();\n        masked.set(element, previous);\n      }\n      for (const [property, value] of properties) {\n        const current = element.style.getPropertyValue(property);\n        const priority = element.style.getPropertyPriority(property);\n        if (!previous.has(property) || current !== value || priority !== \"important\") {\n          previous.set(property, { value: current, priority });\n          element.style.setProperty(property, value, \"important\");\n        }\n      }\n    }\n  };\n  const observer = new MutationObserver(apply);\n  const prepare = () => {\n    if (!preparing && !(window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches ?? false)) {\n      for (const element of Array.from(shadow.children)) {\n        if (element instanceof HTMLElement && typeof element.animate === \"function\") {\n          try {\n            animations.push(\n              element.animate([{ opacity: 0.55 }, { opacity: 1 }], {\n                duration: 1200,\n                direction: \"alternate\",\n                iterations: Infinity,\n              }),\n            );\n          } catch {}\n        }\n      }\n    }\n    preparing = true;\n    observer.observe(document, { childList: true, subtree: true, attributes: true, attributeFilter: [\"style\"] });\n    apply();\n  };\n  const release = () => {\n    preparing = false;\n    for (const animation of animations) animation.cancel();\n    animations.length = 0;\n    observer.disconnect();\n    for (const element of masked.keys()) restore(element);\n    overlay.remove();\n  };\n  document.addEventListener(\"freelens-power:dashboard:preparing\", prepare);\n  document.addEventListener(\"freelens-power:dashboard:prepared\", release);\n  window.addEventListener(\"pagehide\", () => {\n    release();\n    document.removeEventListener(\"freelens-power:dashboard:preparing\", prepare);\n    document.removeEventListener(\"freelens-power:dashboard:prepared\", release);\n  });\n  prepare();\n})();\n\nexport {};\n"],"mappings":"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"}

package/out/main/dashboard-views.js

@@ -14,6 +14,7 @@ var reloadChannel = "freelens-power:dashboard-views:reload";
 var clearChannel = "freelens-power:dashboard-views:clear";
 var dashboardPath = "/extension/freelens-power/dashboard";
 var websiteStyles = "* { scrollbar-width: none !important; } *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }";
+var expandedWebsiteStyles = "* { scrollbar-width: auto !important; } *::-webkit-scrollbar { display: revert !important; width: revert !important; height: revert !important; }";
 function rendererUrl(value, dashboardOnly = false) {
 	try {
 		const url = new URL(value);
@@ -48,19 +49,58 @@ function rectangle(value) {
 		height: rect.height
 	};
 }
-async function waitForReadiness(contents, network, selector, current) {
+function createDashboardSkeleton() {
+	const view = new electron.View();
+	view.setBackgroundColor(electron.nativeTheme.shouldUseDarkColors ? "#202124" : "#ffffff");
+	const bars = Array.from({ length: 4 }, () => {
+		const bar = new electron.View();
+		bar.setBackgroundColor(electron.nativeTheme.shouldUseDarkColors ? "#393b40" : "#e8e9eb");
+		bar.setBorderRadius(6);
+		view.addChildView(bar);
+		return bar;
+	});
+	return {
+		view,
+		layout: (width, height) => {
+			view.setBounds({
+				x: 0,
+				y: 0,
+				width,
+				height
+			});
+			bars.forEach((bar, index) => {
+				bar.setBounds({
+					x: 20,
+					y: index === 0 ? 20 : 60 + (index - 1) * 24,
+					width: Math.max(1, Math.round((width - 40) * (index === 0 ? .45 : 1))),
+					height: index === 0 ? 20 : index === 3 ? Math.max(30, height - 128) : 12
+				});
+			});
+		}
+	};
+}
+async function applyWebsiteStyles(card) {
+	const contents = card.view.webContents;
+	const generation = (card.websiteStylesGeneration ?? 0) + 1;
+	card.websiteStylesGeneration = generation;
+	const previous = card.websiteStylesKey;
+	card.websiteStylesKey = void 0;
+	if (contents.isDestroyed()) return;
+	if (previous) await contents.removeInsertedCSS(previous).catch(() => {});
+	if (card.websiteStylesGeneration !== generation || contents.isDestroyed()) return;
+	const key = await contents.insertCSS(card.scrollbars ? expandedWebsiteStyles : websiteStyles, { cssOrigin: "user" }).catch(() => void 0);
+	if (!key) return;
+	if (card.websiteStylesGeneration === generation && !contents.isDestroyed()) card.websiteStylesKey = key;
+	else if (!contents.isDestroyed()) await contents.removeInsertedCSS(key).catch(() => {});
+}
+async function waitForReadiness(contents, _network, selector, current) {
 	let deadline;
 	try {
 		await Promise.race([(async () => {
 			if (!current()) return;
-			await network.ready();
+			await contents.mainFrame.executeJavaScript(require_dashboard_selector.dashboardSelectorScript(selector())).catch(() => {});
 			if (!current()) return;
-			await contents.executeJavaScriptInIsolatedWorld(1004, [{ code: require_dashboard_selector.dashboardSelectorScript(selector()) }]).catch(() => {});
-			do {
-				await network.wait();
-				if (!current()) return;
-				await contents.executeJavaScriptInIsolatedWorld(1004, [{ code: require_dashboard_readiness.dashboardReadinessScript(selector()) }]);
-			} while (current() && !network.quiet());
+			await contents.mainFrame.executeJavaScript(require_dashboard_readiness.dashboardReadinessScript(selector()));
 		})().catch(() => new Promise((resolve) => setTimeout(resolve, 200))), new Promise((resolve) => {
 			deadline = setTimeout(resolve, 8500);
 		})]);
@@ -68,6 +108,21 @@ async function waitForReadiness(contents, network, selector, current) {
 		clearTimeout(deadline);
 	}
 }
+async function prepareDashboardPage(contents) {
+	if (contents.isDestroyed()) return;
+	let deadline;
+	try {
+		await Promise.race([contents.mainFrame.executeJavaScript("document.dispatchEvent(new Event(\"freelens-power:dashboard:preparing\"))").catch(() => {}), new Promise((resolve) => {
+			deadline = setTimeout(resolve, 250);
+		})]);
+	} finally {
+		clearTimeout(deadline);
+	}
+}
+function releaseDashboardPage(contents) {
+	if (contents.isDestroyed()) return Promise.resolve();
+	return contents.mainFrame.executeJavaScript("document.dispatchEvent(new Event(\"freelens-power:dashboard:prepared\"))").catch(() => {});
+}
 function startDashboardViews() {
 	const websiteSession = electron.session.fromPartition("persist:freelens-power-websites");
 	websiteSession.setPermissionRequestHandler((_contents, _permission, callback) => callback(false));
@@ -78,9 +133,11 @@ function startDashboardViews() {
 		const card = owner.cards.get(id);
 		if (!card) return;
 		owner.cards.delete(id);
+		card.nativeNavigation?.fail();
 		card.stopPreparation?.();
+		card.websiteStylesGeneration = (card.websiteStylesGeneration ?? 0) + 1;
 		card.faviconRequest?.abort();
-		clearInterval(card.refreshTimer);
+		clearTimeout(card.refreshTimer);
 		card.floatingPreparation?.stop();
 		card.floating?.destroy();
 		card.floating = void 0;
@@ -129,10 +186,12 @@ function startDashboardViews() {
 			});
 		}
 	};
-	const reload = (card, configuredUrl, initial = false) => {
+	const reload = (card, configuredUrl, initial = false, navigation) => {
 		const current = card.view.webContents.getURL();
 		const target = !initial && card.url === configuredUrl && webUrl(current) ? current : configuredUrl;
+		const prepareExisting = !initial && !navigation && !card.loading && !card.failed && webUrl(current);
 		card.faviconRequest?.abort();
+		if (!navigation) card.nativeNavigation?.fail();
 		card.url = configuredUrl;
 		card.failed = false;
 		card.loading = true;
@@ -142,23 +201,27 @@ function startDashboardViews() {
 		if (backgroundThrottling) contents.setBackgroundThrottling(false);
 		const network = require_dashboard_network.observeDashboardNetwork(card.view.webContents);
 		let stopped = false;
+		let documentReady;
 		const stopPreparation = () => {
 			if (stopped) return;
 			stopped = true;
 			network.dispose();
 			contents.removeListener("destroyed", stopPreparation);
+			if (documentReady) contents.removeListener("dom-ready", documentReady);
 			if (!contents.isDestroyed() && backgroundThrottling && !contents.getBackgroundThrottling()) contents.setBackgroundThrottling(backgroundThrottling);
 			if (card.stopPreparation === stopPreparation) card.stopPreparation = void 0;
 		};
 		card.stopPreparation = stopPreparation;
 		contents.once("destroyed", stopPreparation);
 		const generation = ++card.generation;
-		card.container.setVisible(false);
+		card.skeleton.view.setVisible(true);
+		card.container.setVisible(card.visible && !card.floating);
 		publishLoading(card);
 		const settled = (failed) => {
 			if (card.generation !== generation || card.view.webContents.isDestroyed()) return;
 			card.failed = failed;
 			card.loading = false;
+			card.skeleton.view.setVisible(false);
 			for (const [sender, owner] of owners) {
 				if (![...owner.cards.values()].includes(card)) continue;
 				card.container.setVisible(card.visible && !card.floating && !failed && dashboardUrl(sender.getURL()));
@@ -167,19 +230,33 @@ function startDashboardViews() {
 		};
 		const load = () => {
 			if (card.generation !== generation || card.view.webContents.isDestroyed() || ![...owners.values()].some((owner) => [...owner.cards.values()].includes(card))) return Promise.resolve();
-			return card.view.webContents.loadURL(target);
+			if (navigation) return navigation;
+			const navigate = () => {
+				if (card.generation !== generation || contents.isDestroyed()) return Promise.resolve();
+				card.requestedNavigation = true;
+				return contents.loadURL(target).finally(() => {
+					if (card.generation === generation) card.requestedNavigation = false;
+				});
+			};
+			return prepareExisting ? prepareDashboardPage(contents).then(navigate) : navigate();
 		};
-		card.pending = load().then(async () => {
+		const ready = new Promise((resolve) => {
+			documentReady = resolve;
+			contents.once("dom-ready", documentReady);
+		});
+		card.pending = Promise.race([load(), ready]).then(async () => {
 			let preparing = true;
 			const current = () => preparing && card.generation === generation && !card.view.webContents.isDestroyed() && [...owners.values()].some((owner) => [...owner.cards.values()].includes(card));
 			try {
 				await waitForReadiness(contents, network, () => card.selector, current);
+				if (current()) await releaseDashboardPage(contents);
 			} finally {
 				preparing = false;
 				stopPreparation();
 			}
 			settled(false);
 		}, () => {
+			if (card.generation === generation) releaseDashboardPage(contents);
 			stopPreparation();
 			settled(true);
 		});
@@ -187,7 +264,7 @@ function startDashboardViews() {
 	};
 	const applySelector = (card) => {
 		if (card.view.webContents.isDestroyed()) return Promise.resolve();
-		return card.view.webContents.executeJavaScriptInIsolatedWorld(1004, [{ code: require_dashboard_selector.dashboardSelectorScript(card.selector) }]).catch(() => {});
+		return card.view.webContents.mainFrame.executeJavaScript(require_dashboard_selector.dashboardSelectorScript(card.selector)).catch(() => {});
 	};
 	const refreshTimers = () => {
 		const configured = configuredCards();
@@ -207,24 +284,57 @@ function startDashboardViews() {
 				card.floatingPreparation?.selectorChanged();
 			}
 			if (card.floating && !card.floating.isDestroyed()) card.floating.setTitle(setting.title);
-			if (!setting.autoRefresh) {
-				clearInterval(card.refreshTimer);
-				card.refreshTimer = void 0;
-				continue;
+			if (card.floatingStyles) {
+				const scrollbars = setting.size === "l" || setting.size === "xl";
+				if (card.floatingStyles.scrollbars !== scrollbars) {
+					card.floatingStyles.scrollbars = scrollbars;
+					applyWebsiteStyles(card.floatingStyles);
+				}
 			}
-			if (card.refreshTimer) continue;
-			card.refreshTimer = setInterval(() => {
-				const latest = configuredCards().find((item) => item.id === id);
-				if (owners.get(sender) !== owner || card.floating || dashboardUrl(sender.getURL()) || owner.cards.get(id) !== card || !latest?.autoRefresh || latest.url !== card.url || card.view.webContents.isDestroyed() || card.view.webContents.isLoading()) return;
-				reload(card, latest.url);
-			}, 6e5);
+			const interval = setting.refreshEvery10Seconds ? 1e4 : setting.autoRefresh ? 6e5 : void 0;
+			if (card.refreshInterval === interval) continue;
+			clearTimeout(card.refreshTimer);
+			card.refreshTimer = void 0;
+			card.refreshInterval = interval;
+			const refreshGeneration = (card.refreshGeneration ?? 0) + 1;
+			card.refreshGeneration = refreshGeneration;
+			if (!interval) continue;
+			const schedule = () => {
+				if (owners.get(sender) !== owner || owner.cards.get(id) !== card || card.refreshGeneration !== refreshGeneration) return;
+				if (card.loading && card.pending) {
+					card.pending.then(schedule);
+					return;
+				}
+				card.refreshTimer = setTimeout(tick, interval);
+			};
+			const tick = async () => {
+				try {
+					const latest = configuredCards().find((item) => item.id === id);
+					if (owners.get(sender) !== owner || owner.cards.get(id) !== card || !latest || latest.url !== card.url || (latest.refreshEvery10Seconds ? 1e4 : latest.autoRefresh ? 6e5 : void 0) !== interval || card.view.webContents.isDestroyed()) return;
+					if (card.loading) {
+						await card.pending;
+						return;
+					}
+					if (latest.refreshEvery10Seconds) {
+						if (card.floating) {
+							if (card.floating.isDestroyed() || card.floatingPreparation?.isPreparing()) return;
+							await Promise.all([reload(card, latest.url), card.floatingPreparation?.refresh()]);
+						} else if (card.visible && dashboardUrl(sender.getURL())) await reload(card, latest.url);
+					} else if (!card.floating && !dashboardUrl(sender.getURL())) await reload(card, latest.url);
+				} finally {
+					schedule();
+				}
+			};
+			schedule();
 		}
 	};
-	const stopSettingsReaction = require__global_external_mobx.reaction(() => JSON.stringify(configuredCards().map(({ id, title, url, autoRefresh, selector }) => ({
+	const stopSettingsReaction = require__global_external_mobx.reaction(() => JSON.stringify(configuredCards().map(({ id, title, url, size, autoRefresh, refreshEvery10Seconds, selector }) => ({
 		id,
 		title,
 		url,
+		size,
 		autoRefresh,
+		refreshEvery10Seconds,
 		selector
 	}))), refreshTimers);
 	const trusted = (event) => event.senderFrame === event.sender.mainFrame && dashboardUrl(event.senderFrame?.url ?? "") && dashboardUrl(event.sender.getURL());
@@ -293,12 +403,10 @@ function startDashboardViews() {
 					contextIsolation: true,
 					sandbox: true,
 					webSecurity: true,
-					partition: "persist:freelens-power-websites"
+					partition: "persist:freelens-power-websites",
+					preload: (0, node_path.join)(__dirname, "dashboard-preload.js")
 				} });
 				view.setBackgroundColor("#00000000");
-				view.webContents.on("did-finish-load", () => {
-					if (!view.webContents.isDestroyed()) view.webContents.insertCSS(websiteStyles, { cssOrigin: "user" }).catch(() => {});
-				});
 				view.webContents.setWindowOpenHandler(({ url }) => {
 					if (webUrl(url)) electron.shell.openExternal(url).catch(() => {});
 					return { action: "deny" };
@@ -312,9 +420,12 @@ function startDashboardViews() {
 					if (!webUrl(event.url)) event.preventDefault();
 				});
 				container.addChildView(view);
+				const skeleton = createDashboardSkeleton();
+				container.addChildView(skeleton.view);
 				window.contentView.addChildView(container);
 				card = {
 					container,
+					skeleton,
 					view,
 					url: "",
 					failed: false,
@@ -329,7 +440,38 @@ function startDashboardViews() {
 					event.sender.send("freelens-power:dashboard-escape");
 				});
 				created.selector = configured.selector;
-				view.webContents.on("did-finish-load", () => applySelector(created));
+				view.webContents.on("did-start-navigation", (_event, _url, inPlace, mainFrame) => {
+					if (!mainFrame) return;
+					if (created.requestedNavigation) {
+						created.requestedNavigation = false;
+						return;
+					}
+					created.nativeNavigation?.fail();
+					const navigation = new Promise((resolve, reject) => {
+						created.nativeNavigation = {
+							finish: () => {
+								created.nativeNavigation = void 0;
+								resolve();
+							},
+							fail: () => {
+								created.nativeNavigation = void 0;
+								reject(/* @__PURE__ */ new Error("dashboard navigation failed"));
+							}
+						};
+					});
+					if (inPlace) view.webContents.mainFrame.executeJavaScript("document.dispatchEvent(new Event(\"freelens-power:dashboard:preparing\"))").catch(() => {});
+					reload(created, created.url, false, navigation);
+					if (inPlace) created.nativeNavigation?.finish();
+				});
+				view.webContents.on("did-finish-load", () => {
+					applyWebsiteStyles(created);
+					applySelector(created);
+					created.nativeNavigation?.finish();
+				});
+				view.webContents.on("did-fail-load", (_event, code, _description, _url, mainFrame) => {
+					if (!mainFrame || code === -3 && view.webContents.isLoading()) return;
+					created.nativeNavigation?.fail();
+				});
 				view.webContents.on("page-favicon-updated", (_event, favicons) => {
 					const favicon = favicons.find((value) => {
 						if (!webUrl(value)) return false;
@@ -411,8 +553,12 @@ function startDashboardViews() {
 					})().catch(() => {}).finally(() => clearTimeout(timeout));
 				});
 			}
+			if (card.scrollbars !== (item.scrollbars === true)) {
+				card.scrollbars = item.scrollbars === true;
+				applyWebsiteStyles(card);
+			}
 			card.visible = true;
-			card.container.setVisible(!card.loading && !card.failed && card.url === configured.url);
+			card.container.setVisible(!card.failed && (card.loading || card.url === configured.url));
 			const zoom = event.sender.getZoomFactor();
 			card.container.setBorderRadius(Math.round(12 * zoom));
 			card.view.setBorderRadius(Math.round(12 * zoom));
@@ -423,6 +569,7 @@ function startDashboardViews() {
 				height: Math.round(rect.height * zoom)
 			});
 			card.container.setBounds(scale(clip));
+			card.skeleton.layout(Math.round(clip.width * zoom), Math.round(clip.height * zoom));
 			card.view.setBounds(scale({
 				x: bounds.x - clip.x,
 				y: bounds.y - clip.y,
@@ -483,7 +630,8 @@ function startDashboardViews() {
 					contextIsolation: true,
 					sandbox: true,
 					webSecurity: true,
-					partition: "persist:freelens-power-websites"
+					partition: "persist:freelens-power-websites",
+					preload: (0, node_path.join)(__dirname, "dashboard-preload.js")
 				}
 			});
 			floating.setMenu(null);
@@ -492,6 +640,11 @@ function startDashboardViews() {
 			card.floating = floating;
 			card.container.setVisible(false);
 			const contents = floating.webContents;
+			const floatingStyles = {
+				view: { webContents: contents },
+				scrollbars: configured.size === "l" || configured.size === "xl"
+			};
+			card.floatingStyles = floatingStyles;
 			contents.setWindowOpenHandler(({ url }) => {
 				if (webUrl(url)) electron.shell.openExternal(url).catch(() => {});
 				return { action: "deny" };
@@ -506,40 +659,22 @@ function startDashboardViews() {
 			});
 			contents.on("page-title-updated", (event) => event.preventDefault());
 			contents.on("will-prevent-unload", (event) => event.preventDefault());
-			const skeleton = new electron.View();
-			skeleton.setBackgroundColor(electron.nativeTheme.shouldUseDarkColors ? "#202124" : "#ffffff");
-			const bars = Array.from({ length: 4 }, () => {
-				const bar = new electron.View();
-				bar.setBackgroundColor(electron.nativeTheme.shouldUseDarkColors ? "#393b40" : "#e8e9eb");
-				bar.setBorderRadius(6);
-				skeleton.addChildView(bar);
-				return bar;
-			});
+			const loadingSkeleton = createDashboardSkeleton();
+			const skeleton = loadingSkeleton.view;
 			const layoutSkeleton = () => {
 				const { width, height } = floating.getContentBounds();
-				skeleton.setBounds({
-					x: 0,
-					y: 0,
-					width,
-					height
-				});
-				bars.forEach((bar, index) => {
-					bar.setBounds({
-						x: 20,
-						y: index === 0 ? 20 : 60 + (index - 1) * 24,
-						width: Math.max(1, Math.round((width - 40) * (index === 0 ? .45 : 1))),
-						height: index === 0 ? 20 : index === 3 ? Math.max(30, height - 128) : 12
-					});
-				});
+				loadingSkeleton.layout(width, height);
 			};
 			floating.contentView.addChildView(skeleton);
 			floating.on("resize", layoutSkeleton);
 			layoutSkeleton();
 			let generation = 0;
+			let floatingPreparing = false;
 			let stopPreparation = () => {};
 			let finishLoad;
 			const begin = () => {
 				stopPreparation();
+				floatingPreparing = true;
 				const token = ++generation;
 				const backgroundThrottling = contents.getBackgroundThrottling();
 				if (backgroundThrottling) contents.setBackgroundThrottling(false);
@@ -551,6 +686,7 @@ function startDashboardViews() {
 				stopPreparation = () => {
 					if (!active) return;
 					active = false;
+					floatingPreparing = false;
 					network.dispose();
 					if (!contents.isDestroyed() && backgroundThrottling) contents.setBackgroundThrottling(true);
 				};
@@ -559,6 +695,8 @@ function startDashboardViews() {
 					finishing ??= (async () => {
 						await waitForReadiness(contents, network, () => card.selector, current);
 						if (!current()) return false;
+						await releaseDashboardPage(contents);
+						if (!current()) return false;
 						skeleton.setVisible(false);
 						stop();
 						return false;
@@ -570,6 +708,7 @@ function startDashboardViews() {
 					finish,
 					fail: () => {
 						if (current()) {
+							releaseDashboardPage(contents);
 							skeleton.setVisible(false);
 							stop();
 						}
@@ -579,16 +718,26 @@ function startDashboardViews() {
 			const refresh = () => {
 				const preparation = begin();
 				const current = contents.getURL();
-				return contents.loadURL(webUrl(current) ? current : configured.url).then(() => finishLoad?.() ?? false, () => {
+				let documentReady;
+				const ready = new Promise((resolve) => {
+					documentReady = () => {
+						(finishLoad?.() ?? Promise.resolve(false)).then(resolve);
+					};
+					contents.once("dom-ready", documentReady);
+				});
+				const loading = prepareDashboardPage(contents).then(() => contents.loadURL(webUrl(current) ? current : configured.url)).then(() => finishLoad?.() ?? false, () => {
 					preparation.fail();
 					return !contents.isDestroyed();
 				});
+				return Promise.race([loading, ready]).finally(() => {
+					contents.removeListener("dom-ready", documentReady);
+				});
 			};
 			card.floatingPreparation = {
 				refresh,
+				isPreparing: () => floatingPreparing,
 				selectorChanged: () => {
-					const preparation = begin();
-					if (!contents.isLoading()) preparation.finish();
+					begin().finish();
 				},
 				stop: () => {
 					++generation;
@@ -600,14 +749,18 @@ function startDashboardViews() {
 				const preparation = begin();
 				if (inPlace) preparation.finish();
 			});
+			contents.on("dom-ready", () => {
+				applyWebsiteStyles(floatingStyles);
+				if (!contents.isDestroyed()) finishLoad?.();
+			});
 			contents.on("did-finish-load", () => {
-				if (contents.isDestroyed()) return;
-				contents.insertCSS(websiteStyles, { cssOrigin: "user" }).catch(() => {});
-				finishLoad?.();
+				applyWebsiteStyles(floatingStyles);
+				if (!contents.isDestroyed()) finishLoad?.();
 			});
 			contents.on("did-fail-load", (_event, code, _description, _url, mainFrame) => {
 				if (!mainFrame || code === -3) return;
 				stopPreparation();
+				releaseDashboardPage(contents);
 				skeleton.setVisible(false);
 			});
 			contents.once("destroyed", () => {
@@ -618,6 +771,8 @@ function startDashboardViews() {
 				if (card.floating !== floating) return;
 				card.floatingPreparation?.stop();
 				card.floatingPreparation = void 0;
+				floatingStyles.websiteStylesGeneration = (floatingStyles.websiteStylesGeneration ?? 0) + 1;
+				card.floatingStyles = void 0;
 				card.floating = void 0;
 				if (owner.cards.get(id) === card) publishPinned(event.sender, owner);
 			});