fix browser elements bugs (#249245)

src/vs/platform/browserElements/electron-main/nativeBrowserElementsMainService.ts

@@ -58,14 +58,20 @@ export class NativeBrowserElementsMainService extends Disposable implements INat
 
 		// search for webview via search parameters
 		if (matchingTarget) {
-			const url = new URL(matchingTarget.url);
-			const resultId = url.searchParams.get('id')!;
+			let resultId: string | undefined;
+			let url: URL | undefined;
+			try {
+				url = new URL(matchingTarget.url);
+				resultId = url.searchParams.get('id')!;
+			} catch (e) {
+				return undefined;
+			}
+
 			target = targetInfos.find((targetInfo: { url: string }) => {
 				try {
 					const url = new URL(targetInfo.url);
 					const isLiveServer = browserType === BrowserType.LiveServer && url.searchParams.get('serverWindowId') === resultId;
 					const isSimpleBrowser = browserType === BrowserType.SimpleBrowser && url.searchParams.get('id') === resultId && url.searchParams.has('vscodeBrowserReqId');
-
 					if (isLiveServer || isSimpleBrowser) {
 						this.currentLocalAddress = url.origin;
 						return true;
@@ -75,6 +81,10 @@ export class NativeBrowserElementsMainService extends Disposable implements INat
 					return false;
 				}
 			});
+
+			if (target) {
+				return target.targetId;
+			}
 		}
 
 		// fallback: search for webview without parameters based on current origin
@@ -94,12 +104,12 @@ export class NativeBrowserElementsMainService extends Disposable implements INat
 		return target.targetId;
 	}
 
-	async waitForWebviewTargets(debuggers: any, windowId: number): Promise<any> {
+	async waitForWebviewTargets(debuggers: any, windowId: number, browserType: BrowserType): Promise<any> {
 		const start = Date.now();
 		const timeout = 10000;
 
 		while (Date.now() - start < timeout) {
-			const targetId = await this.findWebviewTarget(debuggers, windowId, BrowserType.SimpleBrowser);
+			const targetId = await this.findWebviewTarget(debuggers, windowId, browserType);
 			if (targetId) {
 				return targetId;
 			}
@@ -108,6 +118,7 @@ export class NativeBrowserElementsMainService extends Disposable implements INat
 			await new Promise(resolve => setTimeout(resolve, 500));
 		}
 
+		debuggers.detach();
 		return undefined;
 	}
 
@@ -131,16 +142,19 @@ export class NativeBrowserElementsMainService extends Disposable implements INat
 		}
 
 		try {
-			const matchingTargetId = await this.waitForWebviewTargets(debuggers, windowId!);
+			const matchingTargetId = await this.waitForWebviewTargets(debuggers, windowId!, browserType);
 			if (!matchingTargetId) {
-				return undefined;
+				if (debuggers.isAttached()) {
+					debuggers.detach();
+				}
+				throw new Error('No target found');
 			}
 
 		} catch (e) {
 			if (debuggers.isAttached()) {
 				debuggers.detach();
 			}
-			throw new Error('No target found', e);
+			throw new Error('No target found');
 		}
 
 		window.win.webContents.on('ipc-message', async (event, channel, closedCancelAndDetachId) => {

src/vs/workbench/contrib/chat/browser/chatEditing/simpleBrowserEditorOverlay.ts

@@ -347,6 +347,10 @@ class SimpleBrowserOverlayController {
 		this._store.add(toDisposable(() => this._domNode.remove()));
 		this._store.add(widget);
 
+		const connectingWebviewElement = document.createElement('div');
+		connectingWebviewElement.className = 'connecting-webview-element';
+
+
 		const getActiveBrowserType = () => {
 			const editor = group.activeEditorPane;
 			const isSimpleBrowser = editor?.input.editorId === 'mainThreadWebview-simpleBrowser.view';
@@ -356,15 +360,27 @@ class SimpleBrowserOverlayController {
 
 		let cts = new CancellationTokenSource();
 		const show = async () => {
+			// Show the connecting indicator while establishing the session
+			connectingWebviewElement.textContent = localize('connectingWebviewElement', 'Connecting to webview...');
+			if (!container.contains(connectingWebviewElement)) {
+				container.appendChild(connectingWebviewElement);
+			}
+
 			cts = new CancellationTokenSource();
 			const activeBrowserType = getActiveBrowserType();
 			if (activeBrowserType) {
-				await this._browserElementsService.startDebugSession(cts.token, activeBrowserType);
+				try {
+					await this._browserElementsService.startDebugSession(cts.token, activeBrowserType);
+				} catch (error) {
+					connectingWebviewElement.textContent = localize('reopenErrorWebviewElement', 'Please reopen the preview.');
+					return;
+				}
 			}
 
 			if (!container.contains(this._domNode)) {
 				container.appendChild(this._domNode);
 			}
+			connectingWebviewElement.remove();
 		};
 
 		const hide = () => {
@@ -372,6 +388,7 @@ class SimpleBrowserOverlayController {
 				cts.cancel();
 				this._domNode.remove();
 			}
+			connectingWebviewElement.remove();
 		};
 
 		const activeEditorSignal = observableSignalFromEvent(this, Event.any(group.onDidActiveEditorChange, group.onDidModelChange));

src/vs/workbench/contrib/chat/browser/media/simpleBrowserOverlay.css

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 .element-selection-message,
-.element-expand-container {
+.element-expand-container,
+.connecting-webview-element {
 	position: absolute;
 	bottom: 10px;
 	right: 10px;
@@ -27,7 +28,8 @@
 	right: 10px;
 }
 
-.element-expand-container {
+.element-expand-container,
+.connecting-webview-element {
 	bottom: 15px;
 	right: 15px;
 }