build: consume devtools-frontend as a submodule

.github/dependabot.yml

@@ -10,7 +10,6 @@ updates:
     cooldown:
       default-days: 7
       exclude:
-        - 'chrome-devtools-frontend'
         - 'puppeteer*'
         - 'lighthouse'
         - '@google/genai'
@@ -23,17 +22,12 @@ updates:
         dependency-type: development
         exclude-patterns:
           - 'puppeteer*'
-          - 'chrome-devtools-frontend'
           - '@modelcontextprotocol/sdk'
           - 'yargs'
           - 'debug'
           - 'core-js'
         patterns:
           - '*'
-      # breaks often so better to roll separetely.
-      bundled-devtools:
-        patterns:
-          - 'chrome-devtools-frontend'
       bundled:
         patterns:
           - 'puppeteer*'
@@ -56,3 +50,13 @@ updates:
       all:
         patterns:
           - '*'
+  - package-ecosystem: 'gitsubmodule'
+    directory: '/'
+    schedule:
+      interval: 'daily'
+      time: '06:00'
+      timezone: 'Europe/Berlin'
+    cooldown:
+      default-days: 7
+      exclude:
+        - 'devtools-frontend'

.github/workflows/pre-release.yml

@@ -1,6 +1,7 @@
 name: Pre-release
 
-permissions: read-all
+permissions:
+  contents: read
 
 on:
   workflow_dispatch:
@@ -17,6 +18,8 @@ jobs:
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           fetch-depth: 2
+          submodules: true
+          submodule-depth: 1
 
       - name: Set up Node.js
         uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0

.github/workflows/presubmit.yml

@@ -1,6 +1,7 @@
 name: Check code before submitting
 
-permissions: read-all
+permissions:
+  contents: read
 
 on:
   merge_group:
@@ -19,6 +20,8 @@ jobs:
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           fetch-depth: 2
+          submodules: true
+          submodule-depth: 1
 
       - name: Set up Node.js
         uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
@@ -41,6 +44,8 @@ jobs:
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           fetch-depth: 2
+          submodules: true
+          submodule-depth: 1
 
       - name: Set up Node.js
         uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0

.github/workflows/publish-to-mcp-registry-on-tag.yml

@@ -20,6 +20,8 @@ jobs:
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           fetch-depth: 2
+          submodules: true
+          submodule-depth: 1
 
       - name: Set up Node.js
         uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0

.github/workflows/publish-to-npm-on-tag.yml

@@ -20,6 +20,8 @@ jobs:
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           fetch-depth: 2
+          submodules: true
+          submodule-depth: 1
 
       - name: Set up Node.js
         uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0

.github/workflows/run-tests.yml

@@ -1,6 +1,7 @@
 name: Compile and run tests
 
-permissions: read-all
+permissions:
+  contents: read
 
 on:
   merge_group:
@@ -30,6 +31,8 @@ jobs:
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           fetch-depth: 2
+          submodules: true
+          submodule-depth: 1
 
       - name: Set up Node.js
         uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "devtools-frontend"]
+	path = devtools-frontend
+	url = https://github.com/ChromeDevTools/devtools-frontend.git

.prettierignore

@@ -1,6 +1,7 @@
 # Prettier-only ignores.
 CHANGELOG.md
 src/third_party/lighthouse-devtools-mcp-bundle.js
+devtools-frontend
 
 # Release-please formatting brakes CI checks
 .claude-plugin/plugin.json

eslint.config.mjs

@@ -17,6 +17,7 @@ export default defineConfig([
   globalIgnores([
     '**/node_modules',
     '**/build/',
+    'devtools-frontend/**',
     'tests/tools/fixtures/',
     'tests/fixtures/',
     'src/third_party/lighthouse-devtools-mcp-bundle.js',
@@ -133,9 +134,9 @@ export default defineConfig([
         {
           patterns: [
             {
-              regex: '.*chrome-devtools-frontend/(?!mcp/mcp.js$).*',
+              regex: '.*devtools-frontend/(?!mcp/mcp.js$).*',
               message:
-                'Import only the devtools-frontend code exported via node_modules/chrome-devtools-frontend/mcp/mcp.js',
+                'Import only the devtools-frontend code exported via devtools-frontend/mcp/mcp.js',
             },
           ],
         },

package.json

@@ -67,7 +67,6 @@
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
-    "chrome-devtools-frontend": "1.0.1672557",
     "core-js": "3.49.0",
     "debug": "4.4.3",
     "eslint": "^10.7.0",

rollup.config.mjs

@@ -193,24 +193,22 @@ const bundleDependency = (
               return arr.join('\n');
             });
 
-            // Manual license handling for chrome-devtools-frontend third_party
+            // Manual license handling for 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',
-              ),
+              location.includes('devtools-frontend/front_end/third_party'),
             );
 
             const manualLicenses = [];
-            // Add chrome-devtools-frontend main license
+            // Add devtools-frontend main license
             const cdtfLicensePath = path.join(
               process.cwd(),
-              'node_modules/chrome-devtools-frontend/LICENSE',
+              'devtools-frontend/LICENSE',
             );
             if (fs.existsSync(cdtfLicensePath)) {
               manualLicenses.push(

scripts/post-build.ts

@@ -19,10 +19,17 @@ function writeFile(filePath: string, content: string): void {
 }
 
 function main(): void {
-  const devtoolsThirdPartyPath =
-    'node_modules/chrome-devtools-frontend/front_end/third_party';
-  const devtoolsFrontEndCorePath =
-    'node_modules/chrome-devtools-frontend/front_end/core';
+  const devtoolsTs = path.join(
+    process.cwd(),
+    'src',
+    'third_party',
+    'devtools.ts',
+  );
+  if (fs.existsSync(devtoolsTs)) {
+    fs.unlinkSync(devtoolsTs);
+  }
+  const devtoolsThirdPartyPath = 'devtools-frontend/front_end/third_party';
+  const devtoolsFrontEndCorePath = 'devtools-frontend/front_end/core';
 
   // Create i18n mock
   const i18nDir = path.join(BUILD_DIR, devtoolsFrontEndCorePath, 'i18n');
@@ -60,6 +67,30 @@ export const css = { cssLanguage: { parser: { parse: () => ({ topNode: { getChil
 `;
   writeFile(codeMirrorFile, codeMirrorContent);
 
+  // Create skills mocks
+  const skillsDir = path.join(
+    BUILD_DIR,
+    'devtools-frontend',
+    'front_end',
+    'models',
+    'ai_assistance',
+    'skills',
+  );
+  fs.mkdirSync(skillsDir, {recursive: true});
+  const skillMockContent = `
+export const skill = {
+  name: '',
+  description: '',
+  tools: [],
+  systemPrompt: '',
+};
+export default skill;
+`;
+  writeFile(path.join(skillsDir, 'accessibility.skill.js'), skillMockContent);
+  writeFile(path.join(skillsDir, 'network.skill.js'), skillMockContent);
+  writeFile(path.join(skillsDir, 'performance.skill.js'), skillMockContent);
+  writeFile(path.join(skillsDir, 'styling.skill.js'), skillMockContent);
+
   // Create root mock
   const rootDir = path.join(BUILD_DIR, devtoolsFrontEndCorePath, 'root');
   fs.mkdirSync(rootDir, {recursive: true});
@@ -113,8 +144,7 @@ export const ExperimentName = {
   );
   const codemirrorSrcDir = path.join(
     process.cwd(),
-    'node_modules',
-    'chrome-devtools-frontend',
+    'devtools-frontend',
     'front_end',
     'third_party',
     'codemirror',
@@ -135,9 +165,9 @@ export const ExperimentName = {
   copyDevToolsDescriptionFiles();
 }
 
-function copyDevToolsDescriptionFiles() {
+function copyDevToolsDescriptionFiles(): void {
   const devtoolsIssuesDescriptionPath =
-    'node_modules/chrome-devtools-frontend/front_end/models/issues_manager/descriptions';
+    'devtools-frontend/front_end/models/issues_manager/descriptions';
   const sourceDir = path.join(process.cwd(), devtoolsIssuesDescriptionPath);
   const destDir = path.join(
     BUILD_DIR,

scripts/prepare.ts

@@ -4,29 +4,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {readFileSync, writeFileSync} from 'node:fs';
-import {rm} from 'node:fs/promises';
+import {execSync} from 'node:child_process';
+import {existsSync, readFileSync, writeFileSync} from 'node:fs';
 import {resolve} from 'node:path';
 
 const projectRoot = process.cwd();
 
-const filesToRemove = [
-  'node_modules/chrome-devtools-frontend/package.json',
-  'node_modules/chrome-devtools-frontend/front_end/models/trace/lantern/testing',
-  'node_modules/chrome-devtools-frontend/front_end/third_party/intl-messageformat/package/package.json',
-];
-
 /**
  * Removes the conflicting global HTMLElementEventMap declaration from
  * @paulirish/trace_engine/models/trace/ModelImpl.d.ts to avoid TS2717 error
- * when both chrome-devtools-frontend and @paulirish/trace_engine declare
+ * when both devtools-frontend and @paulirish/trace_engine declare
  * the same property.
  */
 function removeConflictingGlobalDeclaration(): void {
   const filePath = resolve(
     projectRoot,
     'node_modules/@paulirish/trace_engine/models/trace/ModelImpl.d.ts',
   );
+  if (!existsSync(filePath)) {
+    return;
+  }
   console.log(
     'Removing conflicting global declaration from @paulirish/trace_engine...',
   );
@@ -41,40 +38,44 @@ function removeConflictingGlobalDeclaration(): void {
   console.log('Successfully removed conflicting global declaration.');
 }
 
-async function main() {
-  console.log('Running prepare script to clean up chrome-devtools-frontend...');
-  for (const file of filesToRemove) {
-    const fullPath = resolve(projectRoot, file);
-    console.log(`Removing: ${file}`);
+function ensureSubmodule(): void {
+  const devtoolsFrontendDir = resolve(projectRoot, 'devtools-frontend');
+  const mcpEntry = resolve(devtoolsFrontendDir, 'mcp', 'mcp.ts');
+
+  if (existsSync(mcpEntry)) {
+    console.log('devtools-frontend submodule is ready.');
+    return;
+  }
+
+  console.log('Initializing devtools-frontend submodule...');
+  try {
+    execSync('git submodule update --init --recursive --depth 1', {
+      cwd: projectRoot,
+      stdio: 'inherit',
+    });
+  } catch (submoduleError) {
+    console.warn('git submodule update failed:', submoduleError);
+  }
+
+  if (!existsSync(mcpEntry)) {
+    console.log('Fetching devtools-frontend...');
     try {
-      await rm(fullPath, {recursive: true, force: true});
-    } catch (error) {
-      console.error(`Failed to remove ${file}:`, error);
-      process.exit(1);
+      execSync(
+        'git clone --depth 1 https://github.com/ChromeDevTools/devtools-frontend.git devtools-frontend',
+        {
+          cwd: projectRoot,
+          stdio: 'inherit',
+        },
+      );
+    } catch (cloneError) {
+      console.error('Failed to clone devtools-frontend:', cloneError);
     }
   }
-  console.log('Clean up of chrome-devtools-frontend complete.');
-
-  removeConflictingGlobalDeclaration();
-  mockAiAssistanceFiles();
 }
 
-function mockAiAssistanceFiles(): void {
-  const patchAgentPath = resolve(
-    projectRoot,
-    'node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/agents/PatchAgent.ts',
-  );
-  writeFileSync(patchAgentPath, 'export class PatchAgent {}', 'utf-8');
-
-  const skillRegistryPath = resolve(
-    projectRoot,
-    'node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/skills/SkillRegistry.ts',
-  );
-  const skillRegistryContent = `export class SkillRegistry {}
-export const SKILLS: any = { styling: {}, network: {}, accessibility: {} };
-`;
-  writeFileSync(skillRegistryPath, skillRegistryContent, 'utf-8');
-  console.log('Successfully mocked AI assistance files.');
+function main(): void {
+  ensureSubmodule();
+  removeConflictingGlobalDeclaration();
 }
 
-void main();
+main();

src/devtools/devtools.d.ts

@@ -9,3 +9,15 @@ declare module '*.css.js' {
   const styles: CSSInJS;
   export default styles;
 }
+
+declare module '*.skill.js' {
+  interface Skill {
+    name: 'styling' | 'network' | 'accessibility' | 'performance';
+    description: string;
+    allowedTools: string[];
+    instructions: string;
+  }
+  const skill: Skill;
+  export {skill};
+  export default skill;
+}

src/third_party/devtools-formatter-worker.ts

@@ -5,4 +5,4 @@
  */
 
 // eslint-disable-next-line no-restricted-imports
-import '../../node_modules/chrome-devtools-frontend/front_end/entrypoints/formatter_worker/formatter_worker-entrypoint.js';
+import '../../devtools-frontend/front_end/entrypoints/formatter_worker/formatter_worker-entrypoint.js';