Integrated browser fixes, configuration provider

Author: kycutler

src/targets/browser/editorBrowserAttacher.ts

@@ -10,7 +10,7 @@ import { DebugType } from '../../common/contributionUtils';
 import { EventEmitter } from '../../common/events';
 import { ILogger } from '../../common/logging';
 import { ISourcePathResolver } from '../../common/sourcePathResolver';
-import { createTargetFilter } from '../../common/urlUtils';
+import { createTargetFilter, requirePageTarget } from '../../common/urlUtils';
 import {
   AnyChromiumConfiguration,
   AnyLaunchConfiguration,
@@ -21,6 +21,7 @@ import { ProtocolError } from '../../dap/protocolError';
 import { VSCodeApi } from '../../ioc-extras';
 import { ILaunchContext, ILauncher, ILaunchResult, IStopMetadata, ITarget } from '../targets';
 import { BrowserTargetManager } from './browserTargetManager';
+import { BrowserTargetType } from './browserTargets';
 import { EditorBrowserSessionTransport } from './editorBrowserSessionTransport';
 
 @injectable()
@@ -238,7 +239,9 @@ export class EditorBrowserAttacher implements ILauncher {
       }
     });
 
-    await targetManager.waitForMainTarget();
+    await targetManager.waitForMainTarget(
+      requirePageTarget(t => t.type === BrowserTargetType.Page),
+    );
 
     return { blockSessionTermination: true };
   }

src/targets/browser/editorBrowserLauncher.ts

@@ -10,6 +10,7 @@ import { DebugType } from '../../common/contributionUtils';
 import { EventEmitter } from '../../common/events';
 import { ILogger } from '../../common/logging';
 import { ISourcePathResolver } from '../../common/sourcePathResolver';
+import { requirePageTarget } from '../../common/urlUtils';
 import {
   AnyChromiumConfiguration,
   AnyLaunchConfiguration,
@@ -20,6 +21,7 @@ import { ProtocolError } from '../../dap/protocolError';
 import { VSCodeApi } from '../../ioc-extras';
 import { ILaunchContext, ILauncher, ILaunchResult, IStopMetadata, ITarget } from '../targets';
 import { BrowserTargetManager } from './browserTargetManager';
+import { BrowserTargetType } from './browserTargets';
 import { EditorBrowserSessionTransport } from './editorBrowserSessionTransport';
 
 @injectable()
@@ -75,7 +77,10 @@ export class EditorBrowserLauncher implements ILauncher {
       );
     }
 
-    const tab = await vscodeWindow.openBrowserTab(url);
+    // Open the browser tab to about:blank first, then attach the debugger
+    // before navigating to the target URL. This mirrors the Chrome/Edge launch
+    // flow and ensures early breakpoints and on-load scripts are captured.
+    const tab = await vscodeWindow.openBrowserTab('');
     const session = await tab.startCDPSession();
 
     const transport = new EditorBrowserSessionTransport(session);
@@ -92,7 +97,7 @@ export class EditorBrowserLauncher implements ILauncher {
       connection,
       undefined,
       this.pathResolver,
-      launchParams as unknown as AnyChromiumConfiguration,
+      { ...launchParams, cleanUp: 'wholeBrowser' } as unknown as AnyChromiumConfiguration,
       this.logger,
       context.telemetryReporter,
       context.targetOrigin,
@@ -116,7 +121,15 @@ export class EditorBrowserLauncher implements ILauncher {
       }
     });
 
-    await targetManager.waitForMainTarget();
+    const mainTarget = await targetManager.waitForMainTarget(
+      requirePageTarget(t => t.type === BrowserTargetType.Page),
+    );
+
+    // Navigate to the user's URL after the debugger is attached, matching
+    // the finishLaunch() behavior in BrowserLauncher for Chrome/Edge.
+    if (mainTarget) {
+      await mainTarget.cdp().Page.navigate({ url });
+    }
 
     return { blockSessionTermination: true };
   }

src/ui/configuration/editorBrowserDebugConfigurationProvider.ts

@@ -2,15 +2,20 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
+import * as l10n from '@vscode/l10n';
 import { injectable } from 'inversify';
+import { basename } from 'path';
 import * as vscode from 'vscode';
 import { DebugType } from '../../common/contributionUtils';
 import {
   AnyEditorBrowserConfiguration,
   editorBrowserAttachConfigDefaults,
   editorBrowserLaunchConfigDefaults,
+  IEditorBrowserLaunchConfiguration,
+  ResolvingConfiguration,
   ResolvingEditorBrowserConfiguration,
 } from '../../configuration';
+import { BaseConfigurationProvider } from './baseConfigurationProvider';
 import { BaseConfigurationResolver } from './baseConfigurationResolver';
 
 /**
@@ -50,3 +55,47 @@ export class EditorBrowserDebugConfigurationResolver
     return [config.rootPath, config.webRoot];
   }
 }
+
+@injectable()
+export class EditorBrowserDebugConfigurationProvider
+  extends BaseConfigurationProvider<IEditorBrowserLaunchConfiguration>
+{
+  protected getType() {
+    return DebugType.EditorBrowser as const;
+  }
+
+  protected getTriggerKind() {
+    return vscode.DebugConfigurationProviderTriggerKind.Initial;
+  }
+
+  protected provide(): ResolvingConfiguration<IEditorBrowserLaunchConfiguration> {
+    return this.createLaunchConfigFromContext() || this.getDefaultLaunch();
+  }
+
+  public createLaunchConfigFromContext():
+    | ResolvingConfiguration<IEditorBrowserLaunchConfiguration>
+    | undefined
+  {
+    const editor = vscode.window.activeTextEditor;
+    if (editor && editor.document.languageId === 'html') {
+      return {
+        type: this.getType(),
+        request: 'launch',
+        name: `Open ${basename(editor.document.uri.fsPath)}`,
+        url: editor.document.uri.toString(),
+      } as ResolvingConfiguration<IEditorBrowserLaunchConfiguration>;
+    }
+
+    return undefined;
+  }
+
+  private getDefaultLaunch(): ResolvingConfiguration<IEditorBrowserLaunchConfiguration> {
+    return {
+      type: this.getType(),
+      request: 'launch',
+      name: l10n.t('Launch Integrated Browser against localhost'),
+      url: 'http://localhost:8080',
+      webRoot: '${workspaceFolder}',
+    } as ResolvingConfiguration<IEditorBrowserLaunchConfiguration>;
+  }
+}

src/ui/configuration/index.ts

@@ -11,7 +11,10 @@ import {
   EdgeDebugConfigurationProvider,
   EdgeDebugConfigurationResolver,
 } from './edgeDebugConfigurationProvider';
-import { EditorBrowserDebugConfigurationResolver } from './editorBrowserDebugConfigurationProvider';
+import {
+  EditorBrowserDebugConfigurationProvider,
+  EditorBrowserDebugConfigurationResolver,
+} from './editorBrowserDebugConfigurationProvider';
 import { ExtensionHostConfigurationResolver } from './extensionHostConfigurationResolver';
 import {
   NodeDynamicDebugConfigurationProvider,
@@ -32,6 +35,7 @@ export const allConfigurationResolvers = [
 export const allConfigurationProviders = [
   ChromeDebugConfigurationProvider,
   EdgeDebugConfigurationProvider,
+  EditorBrowserDebugConfigurationProvider,
   NodeInitialDebugConfigurationProvider,
   NodeDynamicDebugConfigurationProvider,
 ];