Allow mode switching during initial FullPage capture

V3 previously locked all non-FullPage mode buttons until the screenshot
loop completed. V1 allowed switching during capture; restoring that UX.

Renderer:
- Drop the three mode-button disable loops (initial lock, switchToFullPage
  re-entry, sign-out reset). Save + signout remain locked during capture.
- New abortCurrentCapture() centralizes the cancel teardown: sends
  cancelCapture to worker, clears local progress UI, restores the
  preview-frame overlay, resets stitchYOffset so the next session
  starts clean.
- Click handler invokes abortCurrentCapture() when leaving FullPage
  mid-capture (replacing the previous early-return that blocked the
  switch entirely).
- switchToFullPage's re-entry path defers kickoffFullPageCapture
  through a two-step requestAnimationFrame, with an explicit
  iframe.contentWindow.scrollTo(0, 0) after a forced reflow. Two paint
  frames is enough for the iframe to commit the display:none ->
  display:block transition AND the scroll reset before the worker's
  captureVisibleTab fires. Without this, captureVisibleTab grabs the
  iframe at its prior scroll position and the new capture appears to
  "continue where it left off".
- Finalize's UI cleanup guards on currentMode === "fullpage" so a
  capture that completes while the user has already pivoted to another
  mode doesn't force-enable the Save button or steal focus.

Worker:
- New cancelCapture action handler sets a captureCancelled flag scoped
  to setupPort.
- Four async-resume points (the scrollResult setTimeout, the
  windows.update callback, the captureVisibleTab callback, the
  drawComplete handler) short-circuit on the flag.
- The dimensions handler resets the flag to false on every fresh
  kickoff so the new session starts clean.

Aria intact (1x microsoft.applications.telemetry.LogManager in minified
target/chrome/logManager.js); npm run build:prod completes clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: wikirby

src/scripts/extensions/webExtensionBase/webExtensionWorker.ts

@@ -311,6 +311,8 @@ export class WebExtensionWorker extends ExtensionWorkerBase<W3CTab, number> {
 				let captureCount = 0;
 				let lastScrollY = -1;
 				let lastScrollData: { scrollY: number; pageHeight: number };
+				// Set true on cancelCapture to short-circuit the capture loop and stop focus-stealing.
+				let captureCancelled = false;
 
 				// Per-port save accumulator — images streamed via saveImage chunks
 				let pendingSave: any = undefined; // tslint:disable-line:no-null-keyword
@@ -428,6 +430,7 @@ export class WebExtensionWorker extends ExtensionWorkerBase<W3CTab, number> {
 						captureCount = 0;
 						lastScrollY = -1;
 						lastScrollData = { scrollY: 0, pageHeight: 0 };
+						captureCancelled = false;
 
 						if (!viewportHeight) {
 							cleanup();
@@ -445,12 +448,19 @@ export class WebExtensionWorker extends ExtensionWorkerBase<W3CTab, number> {
 						port.postMessage({ action: "scroll", scrollTo: 0 });
 					}
 
+					if (message.action === "cancelCapture") {
+						captureCancelled = true;
+					}
+
 					if (message.action === "scrollResult") {
 						lastScrollData = { scrollY: message.scrollY, pageHeight: message.pageHeight };
 						setTimeout(() => {
-						// Re-focus renderer window before capture — handles user clicking away
+							if (captureCancelled) { return; }
+							// Re-focus renderer window before capture — handles user clicking away
 							WebExtension.browser.windows.update(renderWindowId, { focused: true }, () => {
+								if (captureCancelled) { return; }
 								WebExtension.browser.tabs.captureVisibleTab(renderWindowId, { format: "png" }, (dataUrl: string) => {
+									if (captureCancelled) { return; }
 									if (!dataUrl) {
 										cleanup();
 										return;
@@ -472,8 +482,9 @@ export class WebExtensionWorker extends ExtensionWorkerBase<W3CTab, number> {
 					}
 
 					if (message.action === "drawComplete") {
-					// Detect scroll stall: if scrollY didn't change, we've hit the
-					// real bottom even if scrollHeight is inflated
+						if (captureCancelled) { return; }
+						// Detect scroll stall: if scrollY didn't change, we've hit the
+						// real bottom even if scrollHeight is inflated
 						let scrollStalled = captureCount > 0 && lastScrollData.scrollY === lastScrollY;
 						lastScrollY = lastScrollData.scrollY;
 						captureCount++;

src/scripts/renderer.ts

@@ -897,22 +897,15 @@ async function fetchFreshNotebooks() {
 		logTelemetryEvent(getNotebooksEvent);
 	}
 }
-// Lock all interactive controls during initial capture — prevents race conditions
-// (e.g., clicking sign-out mid-capture corrupts state)
-document.querySelectorAll(".mode-btn").forEach((btn) => {
-	if (btn.getAttribute("data-mode") !== "fullpage") {
-		(btn as HTMLButtonElement).disabled = true;
-		btn.classList.add("disabled");
-	}
-});
+// Sign-out and Save lock until capture completes; mode buttons stay interactive.
 saveBtn.disabled = true;
 disableSignout();
 // Show initial capture progress (bar hidden until first drawCapture with viewport counts)
 capturePanel.style.display = "flex";
 statusText.textContent = strings.capturing;
 announceToScreenReader(strings.capturing);
 (document.getElementById("progress-bar-track") as HTMLElement).style.display = "none";
-// During capture, Cancel is the only actionable control — focus it
+// Cancel is the safest initial focus target; user can Tab to a mode button.
 if (isSignedIn) { setTimeout(function() { cancelBtn.focus(); }, 100); }
 
 // Section selection persistence is handled by selectSection() in the custom dropdown
@@ -1013,17 +1006,18 @@ function switchToFullPage() {
 		statusText.textContent = strings.capturing;
 		saveBtn.disabled = true;
 		if (captureDimensions && !captureInProgress) {
-			document.querySelectorAll(".mode-btn").forEach((b: Element) => {
-				if (b.getAttribute("data-mode") !== "fullpage") {
-					(b as HTMLButtonElement).disabled = true;
-					b.classList.add("disabled");
-				}
-			});
 			disableSignout();
 			announceToScreenReader(strings.capturing);
 			let progressTrack = document.getElementById("progress-bar-track") as HTMLElement;
 			if (progressTrack) { progressTrack.style.display = "none"; }
-			kickoffFullPageCapture();
+			// Defer kickoff one paint so the iframe commits scrollTo(0,0) before captureVisibleTab fires.
+			void iframe.offsetHeight;
+			iframe.contentWindow?.scrollTo(0, 0);
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					kickoffFullPageCapture();
+				});
+			});
 		}
 	}
 }
@@ -2389,8 +2383,8 @@ modeButtons.forEach((btn, idx) => {
 	btn.addEventListener("click", () => {
 		let mode = btn.getAttribute("data-mode");
 		if (mode === currentMode) { return; }
-		// Block mode switching mid-capture (captureVisibleTab needs the iframe visible).
-		if (captureInProgress && mode !== "fullpage") { return; }
+		// Pivoting away from fullpage mid-capture aborts; re-entry restarts.
+		if (captureInProgress && mode !== "fullpage") { abortCurrentCapture(); }
 
 		// Update selected state visually + ARIA
 		document.querySelectorAll(".mode-btn").forEach((b) => {
@@ -2436,7 +2430,6 @@ modeButtons.forEach((btn, idx) => {
 
 // --- Full-page capture lifecycle helpers ---
 
-// Sends `dimensions` to start the worker's scroll-and-stitch loop.
 function kickoffFullPageCapture() {
 	if (!captureDimensions || captureInProgress || fullPageComplete) { return; }
 	captureInProgress = true;
@@ -2448,6 +2441,18 @@ function kickoffFullPageCapture() {
 	});
 }
 
+// Aborts the in-flight capture: tells the worker to stop the loop and clears the local progress UI.
+function abortCurrentCapture() {
+	if (!captureInProgress) { return; }
+	safeSend({ action: "cancelCapture" });
+	captureInProgress = false;
+	stitchYOffset = 0;
+	capturePanel.style.display = "none";
+	let progressTrack = document.getElementById("progress-bar-track") as HTMLElement;
+	if (progressTrack) { progressTrack.style.display = "none"; }
+	showPreviewFrame();
+}
+
 // Post-loadContent state for invocations that don't need a full-page screenshot
 // (Selection/Image context-menu or oEmbed-site toolbar invoke).
 function enterReadyStateWithoutCapture() {
@@ -2935,22 +2940,23 @@ port.onMessage.addListener((message: any) => {
 					previewContainer.appendChild(previewImg);
 				}
 
-				// Update sidebar to preview mode — hide progress, show Clip button
+				// Hide capture progress in all modes — capture is done.
 				capturePanel.style.display = "none";
-				saveBtn.textContent = strings.saveToOneNote;
-				saveBtn.disabled = false;
+				// Active mode owns Save state; don't force-enable here if user pivoted.
+				if (currentMode === "fullpage") {
+					saveBtn.textContent = strings.saveToOneNote;
+					saveBtn.disabled = false;
+				}
 
-				// Re-enable mode buttons and sign-out now that capture is complete
-				document.querySelectorAll(".mode-btn").forEach((b: Element) => {
-					(b as HTMLButtonElement).disabled = false;
-					b.classList.remove("disabled");
-				});
 				enableSignout();
 				captureInProgress = false;
 				announceToScreenReader(loc("WebClipper.Label.ClipSuccessful", "Capture complete"));
 
-				let fpModeBtn = document.querySelector('.mode-btn[data-mode="fullpage"]') as HTMLElement;
-				if (fpModeBtn) { setTimeout(function() { fpModeBtn.focus(); }, 100); }
+				// Only re-focus fullpage button if user is still in fullpage.
+				if (currentMode === "fullpage") {
+					let fpModeBtn = document.querySelector('.mode-btn[data-mode="fullpage"]') as HTMLElement;
+					if (fpModeBtn) { setTimeout(function() { fpModeBtn.focus(); }, 100); }
+				}
 
 				safeSend({ action: "finalizeComplete" });
 			};
@@ -3262,11 +3268,9 @@ port.onMessage.addListener((message: any) => {
 		iframe.style.display = "none";
 		previewFrameWrap.style.display = "none";
 		capturePanel.style.display = "none";
-		// Reset mode buttons to initial state (disabled until capture completes)
+		// Buttons stay interactive; the sign-in overlay covers them while signed out.
 		document.querySelectorAll(".mode-btn").forEach((b) => {
 			b.classList.remove("selected");
-			(b as HTMLButtonElement).disabled = true;
-			b.classList.add("disabled");
 		});
 		let fpBtn = document.querySelector('.mode-btn[data-mode="fullpage"]');
 		if (fpBtn) { fpBtn.classList.add("selected"); }