Implement OpenDevTools

Bug: none
Change-Id: Ic1c1c3970786ae00be07baf4a5fce5ba4ff61385
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6830455
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>

Author: OrKoN

test/e2e_non_hosted/conductor/state-provider.ts

@@ -86,7 +86,7 @@ export class StateProvider {
 
     const browsingContext = await browser.createBrowserContext();
     const inspectedPage = await setupInspectedPage(browsingContext, StateProvider.serverPort);
-    const devToolsPage = await setupDevToolsPage(browsingContext, settings);
+    const devToolsPage = await setupDevToolsPage(browsingContext, settings, inspectedPage);
     const state = {
       devToolsPage,
       inspectedPage,

test/e2e_non_hosted/shared/browser-helper.ts

@@ -80,10 +80,6 @@ export class Launcher {
   static async browserSetup(settings: BrowserSettings) {
     const browser = await Launcher.launchChrome(settings);
     setupBrowserProcessIO(browser);
-    // Close default devtools.
-    const devToolsTarget = await browser.waitForTarget(target => target.url().startsWith('devtools://'));
-    const page = await devToolsTarget.page();
-    await page?.close();
     return new BrowserWrapper(browser);
   }
 
@@ -101,7 +97,6 @@ export class Launcher {
       '--host-resolver-rules=MAP *.test 127.0.0.1',
       '--disable-gpu',
       `--disable-features=${disabledFeatures.join(',')}`,
-      '--auto-open-devtools-for-tabs',
       `--custom-devtools-frontend=${frontEndDirectory}`,
       '--enable-crash-reporter',
       // This has no effect (see https://crbug.com/435638630)

test/e2e_non_hosted/shared/frontend-helper.ts

@@ -12,6 +12,7 @@ import {TestConfig} from '../../conductor/test_config.js';
 
 import type {BrowserWrapper} from './browser-helper.js';
 import {PageWrapper} from './page-wrapper.js';
+import type {InspectedPage} from './target-helper.js';
 
 export type Action = (element: puppeteer.ElementHandle) => Promise<void>;
 
@@ -681,8 +682,18 @@ async function setDockingSide(devToolsPage: DevToolsPage, side: string) {
   `);
 }
 
-export async function setupDevToolsPage(context: puppeteer.BrowserContext, settings: DevtoolsSettings) {
-  const devToolsTarget = await context.waitForTarget(target => target.url().startsWith('devtools://'));
+export async function setupDevToolsPage(
+    context: puppeteer.BrowserContext, settings: DevtoolsSettings, inspectedPage: InspectedPage) {
+  const session = await context.browser().target().createCDPSession();
+  // FIXME: get rid of the reload below and configure
+  // the initial DevTools state via the openDevTools command.
+  // @ts-expect-error no types yet
+  const {targetId} = await session.send('Target.openDevTools', {
+    // @ts-expect-error need to expose this via Puppeteer.
+    targetId: inspectedPage.page.target()._getTargetInfo().targetId
+  });
+  // @ts-expect-error need to expose this via Puppeteer.
+  const devToolsTarget = await context.waitForTarget(target => target._getTargetInfo().targetId === targetId);
   const frontend = await devToolsTarget?.page();
   if (!frontend) {
     throw new Error('Unable to find frontend target!');