@64mb/freelens-power 1.2.1 → 1.2.2

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,28 +284,55 @@ function startDashboardViews() {
 				card.floatingPreparation?.selectorChanged();
 			}
 			if (card.floating && !card.floating.isDestroyed()) card.floating.setTitle(setting.title);
+			if (card.floatingStyles) {
+				const scrollbars = setting.size === "l" || setting.size === "xl";
+				if (card.floatingStyles.scrollbars !== scrollbars) {
+					card.floatingStyles.scrollbars = scrollbars;
+					applyWebsiteStyles(card.floatingStyles);
+				}
+			}
 			const interval = setting.refreshEvery10Seconds ? 1e4 : setting.autoRefresh ? 6e5 : void 0;
 			if (card.refreshInterval === interval) continue;
-			clearInterval(card.refreshTimer);
+			clearTimeout(card.refreshTimer);
 			card.refreshTimer = void 0;
 			card.refreshInterval = interval;
+			const refreshGeneration = (card.refreshGeneration ?? 0) + 1;
+			card.refreshGeneration = refreshGeneration;
 			if (!interval) continue;
-			card.refreshTimer = setInterval(() => {
-				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() || card.loading || card.view.webContents.isLoading()) return;
-				if (latest.refreshEvery10Seconds) {
-					if (card.floating) {
-						if (card.floating.isDestroyed() || card.floating.webContents.isLoading() || card.floatingPreparation?.isPreparing()) return;
-						Promise.all([reload(card, latest.url), card.floatingPreparation?.refresh()]);
-					} else if (card.visible && dashboardUrl(sender.getURL())) reload(card, latest.url);
-				} else if (!card.floating && !dashboardUrl(sender.getURL())) reload(card, latest.url);
-			}, interval);
+			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, refreshEvery10Seconds, 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
@@ -299,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" };
@@ -318,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,
@@ -335,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;
@@ -417,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));
@@ -429,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,
@@ -489,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);
@@ -498,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" };
@@ -512,31 +659,11 @@ 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);
@@ -568,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;
@@ -579,6 +708,7 @@ function startDashboardViews() {
 					finish,
 					fail: () => {
 						if (current()) {
+							releaseDashboardPage(contents);
 							skeleton.setVisible(false);
 							stop();
 						}
@@ -588,17 +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;
@@ -610,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", () => {
@@ -628,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);
 			});