build: bundle devtools frontend (#656)

Author: OrKoN

.github/workflows/run-tests.yml

@@ -42,6 +42,8 @@ jobs:
 
       - name: Build
         run: npm run bundle
+        env:
+          NODE_OPTIONS: '--max_old_space_size=4096'
 
       - name: Set up Node.js
         uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
@@ -62,7 +64,7 @@ jobs:
       - name: Run tests
         shell: bash
         if: ${{ matrix.node != '20' }}
-        run: npm run test
+        run: npm run test:no-build
 
   # Gating job for branch protection.
   test-success:

package.json

@@ -7,7 +7,7 @@
   "main": "index.js",
   "scripts": {
     "clean": "node -e \"require('fs').rmSync('build', {recursive: true, force: true})\"",
-    "bundle": "npm run clean && npm run build && rollup -c rollup.config.mjs",
+    "bundle": "npm run clean && npm run build && rollup -c rollup.config.mjs && node -e \"require('fs').rmSync('build/node_modules', {recursive: true, force: true})\"",
     "build": "tsc && node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/post-build.ts",
     "typecheck": "tsc --noEmit",
     "format": "eslint --cache --fix . && prettier --write --cache .",
@@ -16,11 +16,12 @@
     "docs:generate": "node --experimental-strip-types scripts/generate-docs.ts",
     "start": "npm run build && node build/src/index.js",
     "start-debug": "DEBUG=mcp:* DEBUG_COLORS=false npm run build && node build/src/index.js",
-    "test:node20": "node --require ./build/tests/setup.js --test-reporter spec --test-force-exit --test build/tests",
-    "test": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test \"build/tests/**/*.test.js\"",
-    "test:only": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",
-    "test:only:no-build": "node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",
-    "test:update-snapshots": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-force-exit --test --test-update-snapshots \"build/tests/**/*.test.js\"",
+    "test:node20": "node --import ./build/tests/setup.js --test-reporter spec --test-force-exit --test build/tests",
+    "test:no-build": "node --import ./build/tests/setup.js --no-warnings=ExperimentalWarning --experimental-print-required-tla --test-reporter spec --test-force-exit --test \"build/tests/**/*.test.js\"",
+    "test": "npm run build && npm run test:no-build",
+    "test:only": "npm run build && npm run test:only:no-build",
+    "test:only:no-build": "node --import ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",
+    "test:update-snapshots": "npm run build && node --import ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-force-exit --test --test-update-snapshots \"build/tests/**/*.test.js\"",
     "prepare": "node --experimental-strip-types scripts/prepare.ts",
     "verify-server-json-version": "node --experimental-strip-types scripts/verify-server-json-version.ts"
   },

rollup.config.mjs

@@ -19,6 +19,7 @@
  * and modified to specific requirement.
  */
 
+import fs from 'node:fs';
 import path from 'node:path';
 
 import commonjs from '@rollup/plugin-commonjs';
@@ -79,7 +80,7 @@ const bundleDependency = (
             'THIRD_PARTY_NOTICES',
           ),
           template(dependencies) {
-            const stringified_dependencies = dependencies.map(dependency => {
+            const stringifiedDependencies = dependencies.map(dependency => {
               let arr = [];
               arr.push(`Name: ${dependency.name ?? 'N/A'}`);
               let url = dependency.homepage ?? dependency.repository;
@@ -95,9 +96,60 @@ const bundleDependency = (
               }
               return arr.join('\n');
             });
+
+            // Manual license handling for chrome-devtools-frontend third_party
+            const tsConfig = JSON.parse(
+              fs.readFileSync(
+                path.join(process.cwd(), 'tsconfig.json'),
+                'utf-8',
+              ),
+            );
+            const thirdPartyDirectories = tsConfig.include.filter(location =>
+              location.includes(
+                'node_modules/chrome-devtools-frontend/front_end/third_party',
+              ),
+            );
+
+            const manualLicenses = [];
+            // Add chrome-devtools-frontend main license
+            const cdtfLicensePath = path.join(
+              process.cwd(),
+              'node_modules/chrome-devtools-frontend/LICENSE',
+            );
+            if (fs.existsSync(cdtfLicensePath)) {
+              manualLicenses.push(
+                [
+                  'Name: chrome-devtools-frontend',
+                  'License: Apache-2.0',
+                  '',
+                  fs.readFileSync(cdtfLicensePath, 'utf-8'),
+                ].join('\n'),
+              );
+            }
+
+            for (const thirdPartyDir of thirdPartyDirectories) {
+              const fullPath = path.join(process.cwd(), thirdPartyDir);
+              const licenseFile = path.join(fullPath, 'LICENSE');
+              if (fs.existsSync(licenseFile)) {
+                const name = path.basename(thirdPartyDir);
+                manualLicenses.push(
+                  [
+                    `Name: ${name}`,
+                    `License:`,
+                    '',
+                    fs.readFileSync(licenseFile, 'utf-8').replaceAll('\r', ''),
+                  ].join('\n'),
+                );
+              }
+            }
+
+            if (manualLicenses.length > 0) {
+              stringifiedDependencies.push(...manualLicenses);
+            }
+
             const divider =
               '\n\n-------------------- DEPENDENCY DIVIDER --------------------\n\n';
-            return stringified_dependencies.join(divider);
+            return stringifiedDependencies.join(divider);
           },
         },
       },

scripts/post-build.ts

@@ -7,8 +7,6 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 
-import tsConfig from '../tsconfig.json' with {type: 'json'};
-
 import {sed} from './sed.ts';
 
 const BUILD_DIR = path.join(process.cwd(), 'build');
@@ -22,29 +20,6 @@ function writeFile(filePath: string, content: string): void {
   fs.writeFileSync(filePath, content, 'utf-8');
 }
 
-/**
- * Ensures that licenses for third party files we use gets copied into the build/ dir.
- */
-function copyThirdPartyLicenseFiles() {
-  const thirdPartyDirectories = tsConfig.include.filter(location => {
-    return location.includes(
-      'node_modules/chrome-devtools-frontend/front_end/third_party',
-    );
-  });
-
-  for (const thirdPartyDir of thirdPartyDirectories) {
-    const fullPath = path.join(process.cwd(), thirdPartyDir);
-    const licenseFile = path.join(fullPath, 'LICENSE');
-    if (!fs.existsSync(licenseFile)) {
-      console.error('No LICENSE for', path.basename(thirdPartyDir));
-    }
-
-    const destinationDir = path.join(BUILD_DIR, thirdPartyDir);
-    const destinationFile = path.join(destinationDir, 'LICENSE');
-    fs.copyFileSync(licenseFile, destinationFile);
-  }
-}
-
 function main(): void {
   const devtoolsThirdPartyPath =
     'node_modules/chrome-devtools-frontend/front_end/third_party';
@@ -113,30 +88,19 @@ export const experiments = {
   sed(clientFile, globalAssignment, '');
   sed(clientFile, registerCommands, '');
 
-  const devtoolsLicensePath = path.join(
-    'node_modules',
-    'chrome-devtools-frontend',
-    'LICENSE',
-  );
-  const devtoolsLicenseFileSource = path.join(
-    process.cwd(),
-    devtoolsLicensePath,
-  );
-  const devtoolsLicenseFileDestination = path.join(
-    BUILD_DIR,
-    devtoolsLicensePath,
-  );
-  fs.copyFileSync(devtoolsLicenseFileSource, devtoolsLicenseFileDestination);
-
-  copyThirdPartyLicenseFiles();
   copyDevToolsDescriptionFiles();
 }
 
 function copyDevToolsDescriptionFiles() {
   const devtoolsIssuesDescriptionPath =
     'node_modules/chrome-devtools-frontend/front_end/models/issues_manager/descriptions';
   const sourceDir = path.join(process.cwd(), devtoolsIssuesDescriptionPath);
-  const destDir = path.join(BUILD_DIR, devtoolsIssuesDescriptionPath);
+  const destDir = path.join(
+    BUILD_DIR,
+    'src',
+    'third_party',
+    'issue-descriptions',
+  );
   fs.cpSync(sourceDir, destDir, {recursive: true});
 }
 

src/DevToolsConnectionAdapter.ts

@@ -4,9 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type {CDPConnection as devtools} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
-
 import type * as puppeteer from './third_party/index.js';
+import type {DevTools} from './third_party/index.js';
 import {CDPSessionEvent} from './third_party/index.js';
 
 /**
@@ -17,9 +16,11 @@ import {CDPSessionEvent} from './third_party/index.js';
  * We don't have to recursively listen for 'sessionattached' as the "root" CDP session sees all child session attached
  * events, regardless how deeply nested they are.
  */
-export class PuppeteerDevToolsConnection implements devtools.CDPConnection {
+export class PuppeteerDevToolsConnection
+  implements DevTools.CDPConnection.CDPConnection
+{
   readonly #connection: puppeteer.Connection;
-  readonly #observers = new Set<devtools.CDPConnectionObserver>();
+  readonly #observers = new Set<DevTools.CDPConnection.CDPConnectionObserver>();
   readonly #sessionEventHandlers = new Map<
     string,
     puppeteer.Handler<unknown>
@@ -40,11 +41,14 @@ export class PuppeteerDevToolsConnection implements devtools.CDPConnection {
     this.#startForwardingCdpEvents(session);
   }
 
-  send<T extends devtools.Command>(
+  send<T extends DevTools.CDPConnection.Command>(
     method: T,
-    params: devtools.CommandParams<T>,
+    params: DevTools.CDPConnection.CommandParams<T>,
     sessionId: string | undefined,
-  ): Promise<{result: devtools.CommandResult<T>} | {error: devtools.CDPError}> {
+  ): Promise<
+    | {result: DevTools.CDPConnection.CommandResult<T>}
+    | {error: DevTools.CDPConnection.CDPError}
+  > {
     if (sessionId === undefined) {
       throw new Error(
         'Attempting to send on the root session. This must not happen',
@@ -63,11 +67,11 @@ export class PuppeteerDevToolsConnection implements devtools.CDPConnection {
     /* eslint-enable @typescript-eslint/no-explicit-any */
   }
 
-  observe(observer: devtools.CDPConnectionObserver): void {
+  observe(observer: DevTools.CDPConnection.CDPConnectionObserver): void {
     this.#observers.add(observer);
   }
 
-  unobserve(observer: devtools.CDPConnectionObserver): void {
+  unobserve(observer: DevTools.CDPConnection.CDPConnectionObserver): void {
     this.#observers.delete(observer);
   }
 
@@ -99,7 +103,7 @@ export class PuppeteerDevToolsConnection implements devtools.CDPConnection {
     ) {
       this.#observers.forEach(observer =>
         observer.onEvent({
-          method: type as devtools.Event,
+          method: type as DevTools.CDPConnection.Event,
           sessionId,
           params: event,
         }),

src/DevtoolsUtils.ts

@@ -4,25 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  type Issue,
-  type AggregatedIssue,
-  type IssuesManagerEventTypes,
-  type Target,
-  DebuggerModel,
-  Foundation,
-  TargetManager,
-  MarkdownIssueDescription,
-  Marked,
-  ProtocolClient,
-  Common,
-  I18n,
-} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
-
 import {PuppeteerDevToolsConnection} from './DevToolsConnectionAdapter.js';
 import {ISSUE_UTILS} from './issue-descriptions.js';
 import {logger} from './logger.js';
 import {Mutex} from './Mutex.js';
+import {DevTools} from './third_party/index.js';
 import type {
   Browser,
   Page,
@@ -88,14 +74,14 @@ function normalizeUrl(url: string): string {
  * A mock implementation of an issues manager that only implements the methods
  * that are actually used by the IssuesAggregator
  */
-export class FakeIssuesManager extends Common.ObjectWrapper
-  .ObjectWrapper<IssuesManagerEventTypes> {
-  issues(): Issue[] {
+export class FakeIssuesManager extends DevTools.Common.ObjectWrapper
+  .ObjectWrapper<DevTools.IssuesManagerEventTypes> {
+  issues(): DevTools.Issue[] {
     return [];
   }
 }
 
-export function mapIssueToMessageObject(issue: AggregatedIssue) {
+export function mapIssueToMessageObject(issue: DevTools.AggregatedIssue) {
   const count = issue.getAggregatedIssuesCount();
   const markdownDescription = issue.getDescription();
   const filename = markdownDescription?.file;
@@ -114,12 +100,14 @@ export function mapIssueToMessageObject(issue: AggregatedIssue) {
   let title: string | null;
 
   try {
-    processedMarkdown = MarkdownIssueDescription.substitutePlaceholders(
-      rawMarkdown,
-      markdownDescription.substitutions,
-    );
-    const markdownAst = Marked.Marked.lexer(processedMarkdown);
-    title = MarkdownIssueDescription.findTitleFromMarkdownAst(markdownAst);
+    processedMarkdown =
+      DevTools.MarkdownIssueDescription.substitutePlaceholders(
+        rawMarkdown,
+        markdownDescription.substitutions,
+      );
+    const markdownAst = DevTools.Marked.Marked.lexer(processedMarkdown);
+    title =
+      DevTools.MarkdownIssueDescription.findTitleFromMarkdownAst(markdownAst);
   } catch {
     logger('error parsing markdown for issue ' + issue.code());
     return null;
@@ -138,22 +126,22 @@ export function mapIssueToMessageObject(issue: AggregatedIssue) {
 }
 
 // DevTools CDP errors can get noisy.
-ProtocolClient.InspectorBackend.test.suppressRequestErrors = true;
+DevTools.ProtocolClient.InspectorBackend.test.suppressRequestErrors = true;
 
-I18n.DevToolsLocale.DevToolsLocale.instance({
+DevTools.I18n.DevToolsLocale.DevToolsLocale.instance({
   create: true,
   data: {
     navigatorLanguage: 'en-US',
     settingLanguage: 'en-US',
     lookupClosestDevToolsLocale: l => l,
   },
 });
-I18n.i18n.registerLocaleDataForTest('en-US', {});
+DevTools.I18n.i18n.registerLocaleDataForTest('en-US', {});
 
 export interface TargetUniverse {
   /** The DevTools target corresponding to the puppeteer Page */
-  target: Target;
-  universe: Foundation.Universe.Universe;
+  target: DevTools.SDKTarget;
+  universe: DevTools.Foundation.Universe.Universe;
 }
 export type TargetUniverseFactoryFn = (page: Page) => Promise<TargetUniverse>;
 
@@ -232,22 +220,23 @@ export class UniverseManager {
 }
 
 const DEFAULT_FACTORY: TargetUniverseFactoryFn = async (page: Page) => {
-  const settingStorage = new Common.Settings.SettingsStorage({});
-  const universe = new Foundation.Universe.Universe({
+  const settingStorage = new DevTools.Common.Settings.SettingsStorage({});
+  const universe = new DevTools.Foundation.Universe.Universe({
     settingsCreationOptions: {
       syncedStorage: settingStorage,
       globalStorage: settingStorage,
       localStorage: settingStorage,
-      settingRegistrations: Common.SettingRegistration.getRegisteredSettings(),
+      settingRegistrations:
+        DevTools.Common.SettingRegistration.getRegisteredSettings(),
     },
-    overrideAutoStartModels: new Set([DebuggerModel]),
+    overrideAutoStartModels: new Set([DevTools.DebuggerModel]),
   });
 
   const session = await page.createCDPSession();
   const connection = new PuppeteerDevToolsConnection(session);
 
-  const targetManager = universe.context.get(TargetManager);
-  targetManager.observeModels(DebuggerModel, SKIP_ALL_PAUSES);
+  const targetManager = universe.context.get(DevTools.TargetManager);
+  targetManager.observeModels(DevTools.DebuggerModel, SKIP_ALL_PAUSES);
 
   const target = targetManager.createTarget(
     'main',
@@ -267,7 +256,7 @@ const DEFAULT_FACTORY: TargetUniverseFactoryFn = async (page: Page) => {
 // sent. This means DevTools can still pause, step and do whatever. We just won't
 // see the `Debugger.paused`/`Debugger.resumed` events on the MCP side.
 const SKIP_ALL_PAUSES = {
-  modelAdded(model: DebuggerModel): void {
+  modelAdded(model: DevTools.DebuggerModel): void {
     void model.agent.invoke_setSkipAllPauses({skip: true});
   },