feat: add Edge inspector integration

Author: connor4312

CHANGELOG.md

@@ -6,6 +6,7 @@ This changelog records changes to stable releases since 1.50.2. "TBA" changes he
 
 - feat: support renamed sourcemap identifiers ([ref](https://github.com/microsoft/vscode/issues/12066))
 - feat: support DAP `hitBreakpointIds` ([#994](https://github.com/microsoft/vscode-js-debug/issues/994))
+- feat: add Edge inspector integration
 - refactor: include a mandator path in the CDP proxy ([#987](https://github.com/microsoft/vscode-js-debug/issues/987))
 - fix: make sure servers are listening before returning
 - fix: don't send infinite telemetry requests for React Native ([#981](https://github.com/microsoft/vscode-js-debug/issues/981))

src/build/generate-contributions.ts

@@ -1249,6 +1249,11 @@ const commands: ReadonlyArray<{
     title: refString('startWithStopOnEntry.label'),
     category: 'Debug',
   },
+  {
+    command: Commands.OpenEdgeDevTools,
+    title: refString('openEdgeDevTools.label'),
+    icon: '$(inspect)',
+  },
 ];
 
 const menus: Menus = {
@@ -1282,6 +1287,11 @@ const menus: Menus = {
       title: refString('createDiagnostics.label'),
       when: forAnyDebugType('debugType', 'inDebugMode'),
     },
+    {
+      command: Commands.OpenEdgeDevTools,
+      title: refString('openEdgeDevTools.label'),
+      when: `debugType == ${DebugType.Edge}`,
+    },
   ],
   'debug/callstack/context': [
     {
@@ -1320,6 +1330,10 @@ const menus: Menus = {
       command: Commands.StopProfile,
       when: forAnyDebugType('debugType', 'jsDebugIsProfiling'),
     },
+    {
+      command: Commands.OpenEdgeDevTools,
+      when: `debugType == ${DebugType.Edge}`,
+    },
   ],
   'view/title': [
     {

src/build/strings.ts

@@ -309,6 +309,7 @@ A common case to disable certificate verification can be done by passing \`{ "ht
   'createDiagnostics.label': 'Diagnose Breakpoint Problems',
   'startWithStopOnEntry.label': 'Start Debugging and Stop on Entry',
   'requestCDPProxy.label': 'Request CDP Proxy for Debug Session',
+  'openEdgeDevTools.label': 'Open Browser Devtools',
   'workspaceTrust.description': 'Trust is required to debug code in this workspace.',
 };
 

src/common/contributionUtils.ts

@@ -38,6 +38,7 @@ export const enum Commands {
   StartProfile = 'extension.js-debug.startProfile',
   StopProfile = 'extension.js-debug.stopProfile',
   ToggleSkipping = 'extension.js-debug.toggleSkippingFile',
+  OpenEdgeDevTools = 'extension.js-debug.openEdgeDevTools',
 }
 
 export const enum DebugType {
@@ -77,6 +78,7 @@ const commandsObj: { [K in Commands]: null } = {
   [Commands.ToggleSkipping]: null,
   [Commands.StartWithStopOnEntry]: null,
   [Commands.RequestCDPProxy]: null,
+  [Commands.OpenEdgeDevTools]: null,
 };
 
 /**
@@ -165,6 +167,7 @@ export interface ICommandTypes {
   [Commands.RequestCDPProxy](
     sessionId: string,
   ): { address: string; port: number; family: string } | null;
+  [Commands.OpenEdgeDevTools](): void;
 }
 
 /**

src/targets/browser/browserTargets.ts

@@ -79,11 +79,13 @@ export class BrowserTarget implements ITarget, IThreadDelegate {
   /**
    * @inheritdoc
    */
-  public readonly supplementalConfig = {
-    __usePerformanceFromParent:
-      this._targetInfo.type !== BrowserTargetType.Page &&
-      this._targetInfo.type !== BrowserTargetType.Page,
-  };
+  public get supplementalConfig() {
+    const type = this.type();
+    return {
+      __browserTargetType: type,
+      __usePerformanceFromParent: type !== BrowserTargetType.Page,
+    };
+  }
 
   _children: Map<Cdp.Target.TargetID, BrowserTarget> = new Map();
 

src/ui/debugSessionTracker.ts

@@ -20,6 +20,27 @@ export class DebugSessionTracker implements vscode.Disposable {
     return !!session.configuration.__pendingTargetId;
   }
 
+  /**
+   * Prompts the user to pick one of the given debug sessions. Will not show
+   * a prompt if candidates < 2.
+   */
+  public static pickSession(candidates: vscode.DebugSession[], title: string) {
+    if (candidates.length < 2) {
+      return candidates[0];
+    }
+
+    const qp = vscode.window.createQuickPick<{ id: string; label: string }>();
+    qp.title = title;
+    qp.items = candidates.map(c => ({ label: c.name, id: c.id }));
+    qp.ignoreFocusOut = true;
+
+    return new Promise<vscode.DebugSession | undefined>(resolve => {
+      qp.onDidAccept(() => resolve(candidates.find(i => i.id === qp.selectedItems[0]?.id)));
+      qp.onDidHide(() => resolve(undefined));
+      qp.show();
+    }).finally(() => qp.dispose());
+  }
+
   private _onSessionAddedEmitter = new vscode.EventEmitter<vscode.DebugSession>();
   private _onSessionEndedEmitter = new vscode.EventEmitter<vscode.DebugSession>();
   private _disposables: vscode.Disposable[] = [];

src/ui/diagnosticsUI.ts

@@ -87,21 +87,10 @@ export class DiagnosticsUI implements IExtensionContribution {
   }
 
   private pickSession() {
-    const candidates = this.tracker.getConcreteSessions();
-    if (candidates.length < 2) {
-      return candidates[0];
-    }
-
-    const qp = vscode.window.createQuickPick<{ id: string; label: string }>();
-    qp.title = localize('selectInspectSession', 'Select the session you want to inspect:');
-    qp.items = candidates.map(c => ({ label: c.name, id: c.id }));
-    qp.ignoreFocusOut = true;
-
-    return new Promise<vscode.DebugSession | undefined>(resolve => {
-      qp.onDidAccept(() => resolve(candidates.find(i => i.id === qp.selectedItems[0]?.id)));
-      qp.onDidHide(() => resolve(undefined));
-      qp.show();
-    }).finally(() => qp.dispose());
+    return DebugSessionTracker.pickSession(
+      this.tracker.getConcreteSessions(),
+      localize('selectInspectSession', 'Select the session you want to inspect:'),
+    );
   }
 
   private async getDiagnosticInfo(

src/ui/edgeDevToolOpener.ts

@@ -0,0 +1,61 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { inject, injectable } from 'inversify';
+import * as vscode from 'vscode';
+import * as nls from 'vscode-nls';
+import { Commands, DebugType, registerCommand } from '../common/contributionUtils';
+import { IExtensionContribution } from '../ioc-extras';
+import { BrowserTargetType } from '../targets/browser/browserTargets';
+import { DebugSessionTracker } from './debugSessionTracker';
+
+const localize = nls.loadMessageBundle();
+
+const qualifies = (session: vscode.DebugSession) => {
+  if (session?.type !== DebugType.Edge) {
+    return false;
+  }
+
+  const type: BrowserTargetType = session.configuration.__browserTargetType;
+  return type === BrowserTargetType.IFrame || type === BrowserTargetType.Page;
+};
+
+const toolExtensionId = 'ms-edgedevtools.vscode-edge-devtools';
+const commandId = 'vscode-edge-devtools.attachToCurrentDebugTarget';
+
+@injectable()
+export class EdgeDevToolOpener implements IExtensionContribution {
+  constructor(@inject(DebugSessionTracker) private readonly tracker: DebugSessionTracker) {}
+
+  /** @inheritdoc */
+  public register(context: vscode.ExtensionContext) {
+    context.subscriptions.push(
+      registerCommand(vscode.commands, Commands.OpenEdgeDevTools, async () => {
+        if (!vscode.extensions.all.some(e => e.id === toolExtensionId)) {
+          return vscode.commands.executeCommand(
+            'workbench.extensions.action.showExtensionsWithIds',
+            [toolExtensionId],
+          );
+        }
+
+        const session =
+          vscode.debug.activeDebugSession && qualifies(vscode.debug.activeDebugSession)
+            ? vscode.debug.activeDebugSession
+            : await DebugSessionTracker.pickSession(
+                this.tracker.getConcreteSessions().filter(qualifies),
+                localize(
+                  'selectEdgeToolSession',
+                  'Select the page where you want to open the devtools',
+                ),
+              );
+
+        if (!session) {
+          return;
+        }
+
+        return vscode.commands.executeCommand(commandId, session.id);
+      }),
+    );
+  }
+}

src/ui/ui-ioc.ts

@@ -15,6 +15,7 @@ import { DebugLinkUi } from './debugLinkUI';
 import { DebugSessionTracker } from './debugSessionTracker';
 import { DiagnosticsUI } from './diagnosticsUI';
 import { DisableSourceMapUI } from './disableSourceMapUI';
+import { EdgeDevToolOpener } from './edgeDevToolOpener';
 import { ILinkedBreakpointLocation } from './linkedBreakpointLocation';
 import { LinkedBreakpointLocationUI } from './linkedBreakpointLocationUI';
 import { LongPredictionUI } from './longPredictionUI';
@@ -47,6 +48,7 @@ export const registerUiComponents = (container: Container) => {
   container.bind(IExtensionContribution).to(DiagnosticsUI).inSingletonScope();
   container.bind(IExtensionContribution).to(StartDebugingAndStopOnEntry).inSingletonScope();
   container.bind(IExtensionContribution).to(JsDebugPortAttributesProvider).inSingletonScope();
+  container.bind(IExtensionContribution).to(EdgeDevToolOpener).inSingletonScope();
   container.bind(ILinkedBreakpointLocation).to(LinkedBreakpointLocationUI).inSingletonScope();
   container.bind(DebugSessionTracker).toSelf().inSingletonScope().onActivation(trackDispose);
   container.bind(UiProfileManager).toSelf().inSingletonScope().onActivation(trackDispose);