chrome-devtools-frontend 1.0.1621064 → 1.0.1622369

package/.agents/skills/foundation-test-migration/SKILL.md

@@ -0,0 +1,171 @@
+---
+name: foundation-test-migration
+description: Migrating unit tests to foundation unit tests using TestUniverse and devtools_foundation_module. Use when moving tests away from DOM-heavy helpers like describeWithEnvironment or describeWithMockConnection.
+---
+
+# Foundation Test Migration
+
+This skill provides guidance on migrating DevTools unit tests to the "foundation" pattern, which is lighter, avoids global singletons, and is compatible with both Node and Browser runtimes (Isomorphic).
+
+## Core Concepts
+
+### devtools_foundation_module (BUILD.gn)
+Use this template for modules that should be platform-agnostic.
+- **Enforcement**: It type-checks the code against both Browser and Node APIs.
+- **Constraint**: Avoid direct DOM access (like `FileReader` or layout metrics) or heavy DevTools dependencies. Use `Universe` to access services.
+
+### TestUniverse
+`TestUniverse` is the preferred way to setup a DevTools-like environment for tests without global singletons.
+- **Lazy**: Dependencies (targetManager, settings, workspace, etc.) are only created when accessed via getters.
+- **Scoped**: Does not install instances as globals (avoids `Common.Settings.Settings.instance()`).
+- **Explicit**: Uses `DevToolsContext` to manage dependencies.
+
+## Migration Guide
+
+### 1. Replace Heavy Helpers
+Avoid `describeWithEnvironment` or `describeWithMockConnection`.
+
+Instead, use standard `describe` and initialize environment hooks at the top-level `describe` block. **Crucial:** Without `setupRuntimeHooks`, tests creating SDK models will crash due to uninitialized experiments (e.g. `capture-node-creation-stacks`).
+
+```ts
+import {setupLocaleHooks} from '../../testing/LocaleHelpers.js';
+import {setupSettingsHooks} from '../../testing/SettingsHelpers.js';
+import {setupRuntimeHooks} from '../../testing/RuntimeHelpers.js';
+import {TestUniverse} from '../../testing/TestUniverse.js';
+
+describe('MyComponent', () => {
+  setupLocaleHooks();
+  setupSettingsHooks();
+  setupRuntimeHooks();
+
+  let universe: TestUniverse;
+
+  beforeEach(() => {
+    universe = new TestUniverse();
+  });
+});
+```
+
+### 2. Access Dependencies via Universe
+Instead of using `SDK.TargetManager.TargetManager.instance()`, use `universe.targetManager`. Use `universe.createTarget()` instead of the global `createTarget`.
+
+```ts
+// OLD
+const target = createTarget();
+const targetManager = SDK.TargetManager.TargetManager.instance();
+
+// NEW
+const target = universe.createTarget({url: urlString`http://example.com/`});
+const targetManager = universe.targetManager;
+```
+
+#### Mocking CDP Traffic
+If the test used `describeWithMockConnection` and global `setMockConnectionResponseHandler` to stub CDP traffic, you can migrate this by passing a `MockCDPConnection` to `universe.createTarget()`. This allows stubbing out CDP traffic scoped to a specific target tree rather than globally.
+
+```ts
+import {MockCDPConnection} from '../../testing/MockCDPConnection.js';
+
+const cdpConnection = new MockCDPConnection([
+  {
+    method: 'Network.getResponseBody',
+    response: () => ({body: 'mocked body', base64Encoded: false}),
+  }
+]);
+
+const target = universe.createTarget({connection: cdpConnection});
+```
+
+> [!TIP]
+> **Legacy Target URLs**: `EnvironmentHelpers.createTarget()` defaults to `http://example.com/`. `TestUniverse.createTarget()` defaults to `about:blank`. If your test asserts against specific URLs, remember to pass the URL explicitly.
+
+### 3. Dealing with Legacy Singletons & Helpers
+
+For large integration tests, you may encounter code that strictly calls `SomeModule.instance()` or uses complex legacy helpers (like `createWorkspaceProject`).
+
+**Do not use `setUpEnvironment()`** as it will create disconnected singletons. Instead, wire the singletons to your `TestUniverse` and stub the globals to bridge legacy helpers:
+
+```ts
+beforeEach(async () => {
+  universe = new TestUniverse();
+  const {targetManager, workspace, settings} = universe;
+
+  // 1. Stub globals so legacy helpers use TestUniverse components
+  sinon.stub(Workspace.Workspace.WorkspaceImpl, 'instance').returns(workspace);
+  sinon.stub(SDK.TargetManager.TargetManager, 'instance').returns(targetManager);
+  sinon.stub(Common.Settings.Settings, 'instance').returns(settings);
+
+  // 2. Initialize interdependent singletons in the correct order
+  SDK.NetworkManager.MultitargetNetworkManager.instance({forceNew: true, targetManager});
+
+  // 3. Now safe to use legacy helpers that rely on the above instances
+  await createWorkspaceProject(urlString`file:///path/to/overrides`, [...]);
+});
+```
+
+## Pitfalls & Troubleshooting
+
+### Strict Equality in Protocol Responses (`assert.deepEqual`)
+Protocol requests/responses dynamically generated by Chrome (like Network conditions) can vary slightly (e.g., adding `connectionType`, `urlPattern`).
+- **Problem**: `assert.deepEqual(rules, [{...}])` will flake if unrequested fields are present.
+- **Solution**: Use `sinon.spy()` for handlers and assert with `sinon.assert.calledOnceWithMatch`:
+
+```ts
+const emulateSpy = sinon.spy();
+connection.setHandler('Network.emulateNetworkConditionsByRule', request => {
+  emulateSpy(request);
+  return {result: {ruleIds: []}};
+});
+
+// Matches only the fields you care about, ignoring extra protocol fields
+sinon.assert.calledOnceWithMatch(emulateSpy, {
+  offline: false,
+  matchedNetworkConditions: [sinon.match({ downloadThroughput: 1000 })],
+});
+```
+
+### DOM Globals (`ReferenceError: FileReader is not defined`)
+Foundation tests run in Node.js where `window`, `FileReader`, and certain DOM string encodings don't exist.
+- **Fix**: Use isomorphic equivalents (e.g. `btoa()`, `Uint8Array`).
+- **Last Resort**: Skip the test with `it.skip()` if it explicitly tests browser quirks (e.g. legacy charset decoding).
+
+### Initialization Order Lockups
+If a test times out (5000ms exceeded), it is usually an unhandled promise caused by a missing singleton. Double-check the constructor of the failing manager to see which `instance()` it listens to, and ensure that dependent singleton was created *first*.
+
+## BUILD.gn Changes
+
+When a module and its tests are ready, update `BUILD.gn`:
+
+1.  Change `devtools_module` to `devtools_foundation_module` for both the module and its unittests.
+2.  Ensure the tests are grouped under a `foundation_unittests` target in the parent `BUILD.gn`.
+
+```gn
+# front_end/my_module/BUILD.gn
+
+devtools_foundation_module("my_module") {
+  sources = [ "MyModule.ts" ]
+  deps = [ "../../core/common:bundle" ]
+}
+
+devtools_foundation_module("unittests") {
+  testonly = true
+  sources = [ "MyModule.test.ts" ]
+  deps = [
+    ":my_module",
+    "../../testing",
+  ]
+}
+```
+
+## Verification
+
+Foundation tests must pass in both Node.js and Browser runtimes.
+
+### Run in Node.js
+```bash
+npm test -- front_end/core/sdk/NetworkManager.test.ts --node-unit-tests
+```
+
+### Run in Browser
+```bash
+npm test -- front_end/core/sdk/NetworkManager.test.ts
+```

package/.agents/skills/verification/SKILL.md

@@ -13,25 +13,16 @@ description: MANDATORY: Activate this skill ANY TIME you need to build the proje
 
 ## Building & compiling
 
-- Check for TypeScript or dependency issues in the build system by running `autoninja -C out/Default`.
-
-## Fast builds
-
-- If the `out/Fast` or `out/fast-build` directory exists, this means that a build that does not execute TypeScript is available to you which greatly decreases build time.
-- To use the fast build for tests, pass the `--target=Fast` (adjust the value based on the name of the directory) argument to `npm run test`.
+- Check for build issues by running `autoninja -C out/Default`.
 
 ## Linting
 
 - `npm run lint` will execute ESLint and StyleLint. It will report any violations and automatically fix them where possible.
 - To run the linter on a specific file or directory, you can run `npm run lint -- <PATH>` where `PATH` is a path to a file or directory. This will also automatically fix violations where possible.
 
-## Presubmit
-
-- `git cl presubmit -u` will check if the current change is ready for upload. It will also format and lint the change.
-
 ## Best practices
 
 - Run tests often to verify your changes.
 - Prefer using a fast build, if it exists, to keep the feedback loop shorter.
-- Periodically compile with TypeScript to check for type errors.
+- Periodically build to check for errors.
 - Run `git cl presubmit -u` at the end of your code changes.

package/front_end/core/common/Base64.ts

@@ -36,8 +36,18 @@ export function decode(input: string): Uint8Array<ArrayBuffer> {
  * Note: if input can be very large (larger than the max string size), callers should
  * expect this to throw an error.
  */
-export function encode(input: BlobPart): Promise<string> {
-  return new Promise((resolve, reject) => {
+export async function encode(input: BlobPart): Promise<string> {
+  // Node.js environment (for foundation unit tests)
+  if (typeof FileReader === 'undefined') {
+    const blob = new Blob([input]);
+    const arrayBuffer = await blob.arrayBuffer();
+    // Use globalThis.Buffer to avoid TypeScript errors if Node types are not included.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (globalThis as any).Buffer.from(arrayBuffer).toString('base64');
+  }
+
+  // Browser environment
+  return await new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onerror = () => reject(new Error('failed to convert to base64: internal error'));
     reader.onload = () => {

package/front_end/core/i18n/i18nImpl.ts

@@ -64,10 +64,14 @@ function getLocaleFetchUrl(locale: Intl.UnicodeBCP47LocaleIdentifier, location:
  * fetched locally or remotely.
  */
 export async function fetchAndRegisterLocaleData(
-    locale: Intl.UnicodeBCP47LocaleIdentifier, location = self.location.toString()): Promise<void> {
-  const localeDataTextPromise = fetch(getLocaleFetchUrl(locale, location)).then(result => result.json());
-  const timeoutPromise =
-      new Promise<never>((_, reject) => window.setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
+    locale: Intl.UnicodeBCP47LocaleIdentifier,
+    // Type issue with universal types.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    location = (globalThis as any).location?.toString() ?? ''): Promise<void> {
+  const localeDataTextPromise =
+      fetch(getLocaleFetchUrl(locale, location)).then(result => result.json()) as Promise<I18n.I18n.LocalizedMessages>;
+  const timeoutPromise = new Promise<never>(
+      (_, reject) => globalThis.setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
   const localeData = await Promise.race([timeoutPromise, localeDataTextPromise]);
   i18nInstance.registerLocaleData(locale, localeData);
 }

package/front_end/core/root/Runtime.ts

@@ -12,12 +12,27 @@ let runtimeInstance: Runtime|undefined;
 let isNode: boolean|undefined;
 let isTraceAppEntry: boolean|undefined;
 
+interface Global {
+  location?: {
+    toString(): string,
+    pathname: string,
+    search: string,
+  };
+  navigator?: {
+    userAgent: string,
+  };
+  localStorage?: Storage;
+  self?: Global;
+}
+
+const globalObject = (globalThis as unknown as Global);
+
 /**
  * Returns the base URL (similar to `<base>`).
  * Used to resolve the relative URLs of any additional DevTools files (locale strings, etc) needed.
  * See: https://cs.chromium.org/remoteBase+f:devtools_window
  */
-export function getRemoteBase(location: string = self.location.toString()): {
+export function getRemoteBase(location: string = globalObject.self?.location?.toString() ?? ''): {
   base: string,
   version: string,
 }|null {
@@ -36,7 +51,7 @@ export function getRemoteBase(location: string = self.location.toString()): {
 }
 
 export function getPathName(): string {
-  return window.location.pathname;
+  return globalObject.location?.pathname ?? '';
 }
 
 export function isNodeEntry(pathname: string): boolean {
@@ -46,7 +61,7 @@ export function isNodeEntry(pathname: string): boolean {
 
 export const getChromeVersion = (): string => {
   const chromeRegex = /(?:^|\W)(?:Chrome|HeadlessChrome)\/(\S+)/;
-  const chromeMatch = navigator.userAgent.match(chromeRegex);
+  const chromeMatch = globalObject.navigator?.userAgent?.match(chromeRegex);
   if (chromeMatch && chromeMatch.length > 1) {
     return chromeMatch[1];
   }
@@ -75,9 +90,8 @@ export class Runtime {
   static #queryParamsObject: URLSearchParams;
 
   static #getSearchParams(): URLSearchParams|null {
-    // TODO(crbug.com/451502260): Find a more explicit way to support running in Node.js
-    if (!Runtime.#queryParamsObject && 'location' in globalThis) {
-      Runtime.#queryParamsObject = new URLSearchParams(location.search);
+    if (!Runtime.#queryParamsObject && globalObject.location) {
+      Runtime.#queryParamsObject = new URLSearchParams(globalObject.location.search);
     }
     return Runtime.#queryParamsObject;
   }
@@ -297,13 +311,13 @@ export class ExperimentsSupport {
   }
 }
 
-/** Manages the 'experiments' dictionary in self.localStorage */
+/** Manages the 'experiments' dictionary in globalThis.localStorage */
 class ExperimentStorage {
   readonly #experiments: Record<string, boolean|undefined> = {};
 
   constructor() {
     try {
-      const storedExperiments = self.localStorage?.getItem('experiments');
+      const storedExperiments = globalObject.localStorage?.getItem('experiments');
       if (storedExperiments) {
         this.#experiments = JSON.parse(storedExperiments);
       }
@@ -337,7 +351,7 @@ class ExperimentStorage {
   }
 
   #syncToLocalStorage(): void {
-    self.localStorage?.setItem('experiments', JSON.stringify(this.#experiments));
+    globalObject.localStorage?.setItem('experiments', JSON.stringify(this.#experiments));
   }
 }
 
@@ -480,6 +494,10 @@ export interface HostConfigAiAssistanceAccessibilityAgent {
   enabled: boolean;
 }
 
+export interface HostConfigAiAssistanceStorageAgent {
+  enabled: boolean;
+}
+
 export interface HostConfigAiCodeCompletion {
   modelId: string;
   temperature: number;
@@ -638,6 +656,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAiAssistanceFileAgent: HostConfigAiAssistanceFileAgent,
   devToolsAiAssistancePerformanceAgent: HostConfigAiAssistancePerformanceAgent,
   devToolsAiAssistanceAccessibilityAgent: HostConfigAiAssistanceAccessibilityAgent,
+  devToolsAiAssistanceStorageAgent: HostConfigAiAssistanceStorageAgent,
   devToolsAiAssistanceV2: HostConfigAiAssistanceV2,
   devToolsAiCodeCompletion: HostConfigAiCodeCompletion,
   devToolsAiCodeGeneration: HostConfigAiCodeGeneration,

package/front_end/entrypoints/device_mode_emulation_frame/device_mode_emulation_frame.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../core/dom_extension/dom_extension.js';
+import '../../ui/dom_extension/dom_extension.js';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: tsc 6.0 does not support side-effect imports without a type definition.
 // We cannot use `@ts-expect-error` here because the import is correctly resolved

package/front_end/entrypoints/shell/shell.ts

@@ -7,7 +7,7 @@
 // We cannot use `@ts-expect-error` here because the import is correctly resolved
 // when bundling the application (which doesn't error) and only errors in unbundled builds.
 import '../../Images/Images.js';
-import '../../core/dom_extension/dom_extension.js';
+import '../../ui/dom_extension/dom_extension.js';
 import '../../panels/sources/sources-meta.js';
 import '../../panels/profiler/profiler-meta.js';
 import '../../panels/console/console-meta.js';

package/front_end/generated/InspectorBackendCommands.ts

@@ -349,7 +349,7 @@ inspectorBackend.registerCommand("CrashReportContext.getEntries", [], ["entries"
 inspectorBackend.registerType("CrashReportContext.CrashReportContextEntry", [{"name": "key", "type": "string", "optional": false, "description": "", "typeRef": null}, {"name": "value", "type": "string", "optional": false, "description": "", "typeRef": null}, {"name": "frameId", "type": "string", "optional": false, "description": "The ID of the frame where the key-value pair was set.", "typeRef": "Page.FrameId"}]);
 
 // DOM.
-inspectorBackend.registerEnum("DOM.PseudoType", {FirstLine: "first-line", FirstLetter: "first-letter", Checkmark: "checkmark", Before: "before", After: "after", ExpandIcon: "expand-icon", PickerIcon: "picker-icon", InterestHint: "interest-hint", Marker: "marker", Backdrop: "backdrop", Column: "column", Selection: "selection", SearchText: "search-text", TargetText: "target-text", SpellingError: "spelling-error", GrammarError: "grammar-error", Highlight: "highlight", FirstLineInherited: "first-line-inherited", ScrollMarker: "scroll-marker", ScrollMarkerGroup: "scroll-marker-group", ScrollButton: "scroll-button", Scrollbar: "scrollbar", ScrollbarThumb: "scrollbar-thumb", ScrollbarButton: "scrollbar-button", ScrollbarTrack: "scrollbar-track", ScrollbarTrackPiece: "scrollbar-track-piece", ScrollbarCorner: "scrollbar-corner", Resizer: "resizer", InputListButton: "input-list-button", ViewTransition: "view-transition", ViewTransitionGroup: "view-transition-group", ViewTransitionImagePair: "view-transition-image-pair", ViewTransitionGroupChildren: "view-transition-group-children", ViewTransitionOld: "view-transition-old", ViewTransitionNew: "view-transition-new", Placeholder: "placeholder", FileSelectorButton: "file-selector-button", DetailsContent: "details-content", Picker: "picker", PermissionIcon: "permission-icon", OverscrollAreaParent: "overscroll-area-parent"});
+inspectorBackend.registerEnum("DOM.PseudoType", {FirstLine: "first-line", FirstLetter: "first-letter", Checkmark: "checkmark", Before: "before", After: "after", ExpandIcon: "expand-icon", PickerIcon: "picker-icon", InterestButton: "interest-button", Marker: "marker", Backdrop: "backdrop", Column: "column", Selection: "selection", SearchText: "search-text", TargetText: "target-text", SpellingError: "spelling-error", GrammarError: "grammar-error", Highlight: "highlight", FirstLineInherited: "first-line-inherited", ScrollMarker: "scroll-marker", ScrollMarkerGroup: "scroll-marker-group", ScrollButton: "scroll-button", Scrollbar: "scrollbar", ScrollbarThumb: "scrollbar-thumb", ScrollbarButton: "scrollbar-button", ScrollbarTrack: "scrollbar-track", ScrollbarTrackPiece: "scrollbar-track-piece", ScrollbarCorner: "scrollbar-corner", Resizer: "resizer", InputListButton: "input-list-button", ViewTransition: "view-transition", ViewTransitionGroup: "view-transition-group", ViewTransitionImagePair: "view-transition-image-pair", ViewTransitionGroupChildren: "view-transition-group-children", ViewTransitionOld: "view-transition-old", ViewTransitionNew: "view-transition-new", Placeholder: "placeholder", FileSelectorButton: "file-selector-button", DetailsContent: "details-content", Picker: "picker", PermissionIcon: "permission-icon", OverscrollAreaParent: "overscroll-area-parent"});
 inspectorBackend.registerEnum("DOM.ShadowRootType", {UserAgent: "user-agent", Open: "open", Closed: "closed"});
 inspectorBackend.registerEnum("DOM.CompatibilityMode", {QuirksMode: "QuirksMode", LimitedQuirksMode: "LimitedQuirksMode", NoQuirksMode: "NoQuirksMode"});
 inspectorBackend.registerEnum("DOM.PhysicalAxes", {Horizontal: "Horizontal", Vertical: "Vertical", Both: "Both"});

package/front_end/generated/protocol.ts

@@ -4604,7 +4604,7 @@ export namespace DOM {
     After = 'after',
     ExpandIcon = 'expand-icon',
     PickerIcon = 'picker-icon',
-    InterestHint = 'interest-hint',
+    InterestButton = 'interest-button',
     Marker = 'marker',
     Backdrop = 'backdrop',
     Column = 'column',

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -251,7 +251,7 @@ export interface PerformanceTraceAiWidget {
 export interface PerfInsightAiWidget {
   name: 'PERF_INSIGHT';
   data: {
-    insight: 'lcp',
+    insight: Trace.Insights.Types.InsightKeys,
     insightData: Trace.Insights.Types.InsightModel,
   };
 }

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -222,6 +222,13 @@ enum ScorePriority {
   DEFAULT = 1,
 }
 
+const SUPPORTED_INSIGHT_WIDGETS = new Set<Trace.Insights.Types.InsightKeys>([
+  Trace.Insights.Types.InsightKeys.LCP_BREAKDOWN,
+  Trace.Insights.Types.InsightKeys.RENDER_BLOCKING,
+  Trace.Insights.Types.InsightKeys.LCP_DISCOVERY,
+  Trace.Insights.Types.InsightKeys.CLS_CULPRITS,
+]);
+
 export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   static fromParsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace): PerformanceTraceContext {
     return new PerformanceTraceContext(AgentFocus.fromParsedTrace(parsedTrace));
@@ -334,8 +341,8 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
         const failingInsightSuggestions =
             Object.values(insightSet.model)
                 .filter(model => {
-                  return model.state !== 'pass' &&
-                      !poorMetrics.has(model.insightKey as Trace.Insights.Types.InsightKeys);
+                  return model.state !== 'pass' && Trace.Insights.Common.isInsightKey(model.insightKey) &&
+                      !poorMetrics.has(model.insightKey);
                 })
                 .map(model => new PerformanceInsightFormatter(focus, model).getSuggestions().at(-1))
                 .filter((suggestion): suggestion is ConversationSuggestion => !!suggestion)
@@ -536,15 +543,18 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       return widgets;
     }
 
-    // Case 2: LCP Insight -> LCP breakdown & CWV widgets
-    if (focus.insight && Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(focus.insight)) {
-      widgets.push({
-        name: 'PERF_INSIGHT',
-        data: {
-          insight: 'lcp',
-          insightData: focus.insight,
-        },
-      });
+    // Case 2: Insight -> PERF_INSIGHT widget
+    if (focus.insight) {
+      const insightKey = focus.insight.insightKey;
+      if (Trace.Insights.Common.isInsightKey(insightKey) && SUPPORTED_INSIGHT_WIDGETS.has(insightKey)) {
+        widgets.push({
+          name: 'PERF_INSIGHT',
+          data: {
+            insight: insightKey,
+            insightData: focus.insight,
+          },
+        });
+      }
     }
 
     // Case 3: Whole Trace or insight other than LCP -> CWV widget
@@ -1006,15 +1016,17 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
               }
             }
           }
-          if (params.insightName === 'LCPBreakdown') {
-            widgets.push({
-              name: 'PERF_INSIGHT',
-              data: {
-                insight: 'lcp',
-                insightData: insight as Trace.Insights.Types.InsightModel,
-              },
-            });
-          }
+        }
+
+        const insightKey = params.insightName;
+        if (Trace.Insights.Common.isInsightKey(insightKey) && SUPPORTED_INSIGHT_WIDGETS.has(insightKey)) {
+          widgets.push({
+            name: 'PERF_INSIGHT',
+            data: {
+              insight: insightKey,
+              insightData: insight as Trace.Insights.Types.InsightModel,
+            },
+          });
         }
 
         const key = `getInsightDetails('${params.insightSetId}', '${params.insightName}')`;

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -21,10 +21,11 @@ import {NetworkProject} from './NetworkProject.js';
 import type {ResourceMapping} from './ResourceMapping.js';
 import {type ResourceScriptFile, ResourceScriptMapping} from './ResourceScriptMapping.js';
 import {
+  isErrorLike,
   type SymbolizedError,
   SymbolizedErrorObject,
   SymbolizedSyntaxError,
-  UnparsableError
+  UnparsableError,
 } from './SymbolizedError.js';
 
 export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
@@ -247,6 +248,9 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
       }
     } else if (remoteObject.type === 'string') {
       errorStack = remoteObject.description || '';
+      if (!isErrorLike(errorStack)) {
+        return null;
+      }
     } else {
       return null;
     }

package/front_end/models/bindings/SymbolizedError.ts

@@ -11,6 +11,10 @@ import type * as Workspace from '../workspace/workspace.js';
 import type {DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
 import {type LiveLocation, LiveLocationPool} from './LiveLocation.js';
 
+export function isErrorLike(stack: string): boolean {
+  return /\n\s*at\s/.test(stack) || stack.startsWith('SyntaxError:');
+}
+
 export type SymbolizedError = SymbolizedErrorObject|SymbolizedSyntaxError|UnparsableError;
 
 export class UnparsableError extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
@@ -21,6 +25,19 @@ export class UnparsableError extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     super();
     this.errorStack = errorStack;
     this.cause = cause;
+
+    this.cause?.addEventListener(Events.UPDATED, this.#fireUpdated, this);
+  }
+
+  dispose(): void {
+    this.cause?.removeEventListener(Events.UPDATED, this.#fireUpdated, this);
+    if (this.cause instanceof SymbolizedErrorObject || this.cause instanceof UnparsableError) {
+      this.cause.dispose();
+    }
+  }
+
+  #fireUpdated(): void {
+    this.dispatchEventToListeners(Events.UPDATED);
   }
 }
 
@@ -42,7 +59,7 @@ export class SymbolizedErrorObject extends Common.ObjectWrapper.ObjectWrapper<Ev
   dispose(): void {
     this.stackTrace.removeEventListener(StackTrace.StackTrace.Events.UPDATED, this.#fireUpdated, this);
     this.cause?.removeEventListener(Events.UPDATED, this.#fireUpdated, this);
-    if (this.cause instanceof SymbolizedErrorObject) {
+    if (this.cause instanceof SymbolizedErrorObject || this.cause instanceof UnparsableError) {
       this.cause.dispose();
     }
   }

package/front_end/models/issues_manager/GenericIssue.ts

@@ -193,6 +193,31 @@ export const genericNavigationEntryMarkedSkippable = {
   }],
 };
 
+export const genericFormModelContextMissingToolName = {
+  file: 'genericFormModelContextMissingToolName.md',
+  links: [],
+};
+
+export const genericFormModelContextMissingToolDescription = {
+  file: 'genericFormModelContextMissingToolDescription.md',
+  links: [],
+};
+
+export const genericFormModelContextParameterMissingTitleAndDescription = {
+  file: 'genericFormModelContextParameterMissingTitleAndDescription.md',
+  links: [],
+};
+
+export const genericFormModelContextRequiredParameterMissingName = {
+  file: 'genericFormModelContextRequiredParameterMissingName.md',
+  links: [],
+};
+
+export const genericFormModelContextParameterMissingName = {
+  file: 'genericFormModelContextParameterMissingName.md',
+  links: [],
+};
+
 const issueDescriptions = new Map<Protocol.Audits.GenericIssueErrorType, LazyMarkdownIssueDescription>([
   [Protocol.Audits.GenericIssueErrorType.FormLabelForNameError, genericFormLabelForNameError],
   [Protocol.Audits.GenericIssueErrorType.FormInputWithNoLabelError, genericFormInputWithNoLabelError],
@@ -233,6 +258,26 @@ const issueDescriptions = new Map<Protocol.Audits.GenericIssueErrorType, LazyMar
     Protocol.Audits.GenericIssueErrorType.NavigationEntryMarkedSkippable,
     genericNavigationEntryMarkedSkippable,
   ],
+  [
+    Protocol.Audits.GenericIssueErrorType.FormModelContextMissingToolName,
+    genericFormModelContextMissingToolName,
+  ],
+  [
+    Protocol.Audits.GenericIssueErrorType.FormModelContextMissingToolDescription,
+    genericFormModelContextMissingToolDescription,
+  ],
+  [
+    Protocol.Audits.GenericIssueErrorType.FormModelContextParameterMissingTitleAndDescription,
+    genericFormModelContextParameterMissingTitleAndDescription,
+  ],
+  [
+    Protocol.Audits.GenericIssueErrorType.FormModelContextRequiredParameterMissingName,
+    genericFormModelContextRequiredParameterMissingName,
+  ],
+  [
+    Protocol.Audits.GenericIssueErrorType.FormModelContextParameterMissingName,
+    genericFormModelContextParameterMissingName,
+  ],
 ]);
 
 const issueTypes = new Map<Protocol.Audits.GenericIssueErrorType, IssueKind>([
@@ -249,5 +294,9 @@ const issueTypes = new Map<Protocol.Audits.GenericIssueErrorType, IssueKind>([
   [Protocol.Audits.GenericIssueErrorType.FormLabelForMatchesNonExistingIdError, IssueKind.PAGE_ERROR],
   [Protocol.Audits.GenericIssueErrorType.FormLabelHasNeitherForNorNestedInputError, IssueKind.IMPROVEMENT],
   [Protocol.Audits.GenericIssueErrorType.FormInputHasWrongButWellIntendedAutocompleteValueError, IssueKind.IMPROVEMENT],
-
+  [Protocol.Audits.GenericIssueErrorType.FormModelContextMissingToolName, IssueKind.PAGE_ERROR],
+  [Protocol.Audits.GenericIssueErrorType.FormModelContextMissingToolDescription, IssueKind.PAGE_ERROR],
+  [Protocol.Audits.GenericIssueErrorType.FormModelContextParameterMissingTitleAndDescription, IssueKind.PAGE_ERROR],
+  [Protocol.Audits.GenericIssueErrorType.FormModelContextRequiredParameterMissingName, IssueKind.PAGE_ERROR],
+  [Protocol.Audits.GenericIssueErrorType.FormModelContextParameterMissingName, IssueKind.PAGE_ERROR],
 ]);

package/front_end/models/issues_manager/descriptions/genericFormModelContextMissingToolDescription.md

@@ -0,0 +1,5 @@
+# Missing tool description for a WebMCP declarative tool definition
+
+This form is intended to be used as a WebMCP declarative tool definition, but it lacks a description explaining what the tool does. Descriptions are critical for AI models to decide when to use a given tool.
+
+To fix this issue, provide a tool description via the `tooldescription` attribute.

package/front_end/models/issues_manager/descriptions/genericFormModelContextMissingToolName.md

@@ -0,0 +1,5 @@
+# Missing tool name for a WebMCP declarative tool definition
+
+This form is intended to be used as a WebMCP declarative tool definition, but it does not specify a name. A tool name is required for an AI model to correctly identify and invoke the tool.
+
+To fix this issue, provide a tool name via the `toolname` attribute.

package/front_end/models/issues_manager/descriptions/genericFormModelContextParameterMissingName.md

@@ -0,0 +1,5 @@
+# Parameter missing name for a WebMCP declarative tool definition
+
+An input element within this form lacks a `name` attribute. Without a name, the AI model cannot format the parameter payload correctly when invoking the tool.
+
+To fix this issue, ensure form parameters have a `name` attribute.

package/front_end/models/issues_manager/descriptions/genericFormModelContextParameterMissingTitleAndDescription.md

@@ -0,0 +1,5 @@
+# Missing parameter title and description for a WebMCP declarative tool definition
+
+A parameter within this form (such as an `<input>` field) is missing both a title and a description. An AI model needs this metadata to understand what information should be passed to this parameter when invoking the tool.
+
+To fix this issue, add a title and description to the form parameter.

package/front_end/models/issues_manager/descriptions/genericFormModelContextRequiredParameterMissingName.md

@@ -0,0 +1,5 @@
+# Required parameter missing name for a WebMCP declarative tool definition
+
+A required input element within this form lacks a `name` attribute. Without a name, the AI model cannot format the parameter payload correctly when invoking the tool.
+
+To fix this issue, ensure all required form parameters have a `name` attribute.