chrome-devtools-frontend 1.0.1621678 → 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/models/ai_assistance/agents/PerformanceAgent.ts

@@ -222,10 +222,11 @@ enum ScorePriority {
   DEFAULT = 1,
 }
 
-// TODO(crbug.com/503296282): Remove this when we add support for all insights
 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> {

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -20,6 +20,7 @@ import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as PanelsCommon from '../../../panels/common/common.js';
+import * as TraceBounds from '../../../services/trace_bounds/trace_bounds.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
@@ -31,6 +32,7 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Elements from '../../elements/elements.js';
 import * as TimelineComponents from '../../timeline/components/components.js';
+import type {BaseInsightComponent} from '../../timeline/components/insights/BaseInsightComponent.js';
 import * as TimelineInsights from '../../timeline/components/insights/insights.js';
 import * as Timeline from '../../timeline/timeline.js';
 import * as TimelineUtils from '../../timeline/utils/utils.js';
@@ -201,6 +203,14 @@ const UIStringsNotTranslate = {
    * @description Accessible label for the reveal button in the LCP breakdown widget.
    */
   revealLcpBreakdown: 'Reveal LCP breakdown',
+  /**
+   * @description Accessible label for the reveal button in the LCP discovery widget.
+   */
+  revealLcpDiscovery: 'Reveal LCP discovery',
+  /**
+   * @description Accessible label for the reveal button in the layout shift culprits widget.
+   */
+  revealClsCulprits: 'Reveal layout shift culprits',
   /**
    * @description Accessible label for the reveal button in the render-blocking requests widget.
    */
@@ -225,6 +235,14 @@ const UIStringsNotTranslate = {
    * @description Title for the LCP breakdown widget.
    */
   lcpBreakdown: 'LCP breakdown',
+  /**
+   * @description Title for the LCP discovery widget.
+   */
+  lcpDiscovery: 'LCP discovery',
+  /**
+   * @description Title for the layout shift culprits widget.
+   */
+  clsCulprits: 'Layout shift culprits',
   /**
    * @description Title for the render-blocking requests widget.
    */
@@ -922,55 +940,78 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
   };
 }
 
+const INSIGHT_METADATA: Record<string, {
+  component: typeof TimelineInsights.LCPBreakdown.LCPBreakdown | typeof TimelineInsights.RenderBlocking.RenderBlocking |
+      typeof TimelineInsights.LCPDiscovery.LCPDiscovery | typeof TimelineInsights.CLSCulprits.CLSCulprits,
+  accessibleLabel: string,
+  title: string,
+  jslog: string,
+}> = {
+  [Trace.Insights.Types.InsightKeys.LCP_BREAKDOWN]: {
+    component: TimelineInsights.LCPBreakdown.LCPBreakdown,
+    accessibleLabel: UIStringsNotTranslate.revealLcpBreakdown,
+    title: UIStringsNotTranslate.lcpBreakdown,
+    jslog: 'lcp-breakdown-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.RENDER_BLOCKING]: {
+    component: TimelineInsights.RenderBlocking.RenderBlocking,
+    accessibleLabel: UIStringsNotTranslate.revealRenderBlockingBreakdown,
+    title: UIStringsNotTranslate.renderBlockingBreakdown,
+    jslog: 'render-blocking-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.LCP_DISCOVERY]: {
+    component: TimelineInsights.LCPDiscovery.LCPDiscovery,
+    accessibleLabel: UIStringsNotTranslate.revealLcpDiscovery,
+    title: UIStringsNotTranslate.lcpDiscovery,
+    jslog: 'lcp-discovery-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.CLS_CULPRITS]: {
+    component: TimelineInsights.CLSCulprits.CLSCulprits,
+    accessibleLabel: UIStringsNotTranslate.revealClsCulprits,
+    title: UIStringsNotTranslate.clsCulprits,
+    jslog: 'cls-culprits-widget',
+  },
+};
+
+function renderInsightWidget<T extends Trace.Insights.Types.InsightModel>(
+    component: new () => BaseInsightComponent<T>, insight: T, jslog: string, accessibleLabel: string, title: string,
+    bounds?: Trace.Types.Timing.TraceWindowMicro): WidgetMakerResponse {
+  const renderedWidget = html`<devtools-widget
+    class=${jslog}
+    ${widget(component, {
+    model: insight,
+    minimal: true,
+    bounds: bounds ?? null,
+  })}></devtools-widget>`;
+
+  return {
+    renderedWidget,
+    revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
+    accessibleRevealLabel: lockedString(accessibleLabel),
+    title: lockedString(title),
+    jslogContext: jslog,
+  };
+}
+
 async function makePerfInsightWidget(widgetData: PerfInsightAiWidget): Promise<WidgetMakerResponse|null> {
-  switch (widgetData.data.insight) {
-    case Trace.Insights.Types.InsightKeys.LCP_BREAKDOWN: {
-      const insight = widgetData.data.insightData;
-      if (!insight || !Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(insight)) {
-        return null;
-      }
-      // clang-format off
-      const renderedWidget = html`<devtools-widget
-        class="lcp-breakdown-widget"
-        ${widget(TimelineInsights.LCPBreakdown.LCPBreakdown, {
-          model: insight,
-          minimal: true,
-        })}></devtools-widget>`;
-      // clang-format on
+  const insightKey = widgetData.data.insight;
+  const insight = widgetData.data.insightData;
 
-      return {
-        renderedWidget,
-        revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
-        accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealLcpBreakdown),
-        title: lockedString(UIStringsNotTranslate.lcpBreakdown),
-        jslogContext: 'lcp-breakdown',
-      };
-    }
-    case Trace.Insights.Types.InsightKeys.RENDER_BLOCKING: {
-      const insight = widgetData.data.insightData;
-      if (!insight || !Trace.Insights.Models.RenderBlocking.isRenderBlockingInsight(insight)) {
-        return null;
-      }
-      // clang-format off
-      const renderedWidget = html`<devtools-widget
-        class="render-blocking-widget"
-        ${widget(TimelineInsights.RenderBlocking.RenderBlocking, {
-          model: insight,
-          minimal: true,
-        })}></devtools-widget>`;
-      // clang-format on
+  const meta = INSIGHT_METADATA[insightKey];
+  if (!meta) {
+    return null;
+  }
 
-      return {
-        renderedWidget,
-        revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
-        accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealRenderBlockingBreakdown),
-        title: lockedString(UIStringsNotTranslate.renderBlockingBreakdown),
-        jslogContext: 'render-blocking-widget',
-      };
-    }
-    default:
+  let bounds;
+  if (insightKey === Trace.Insights.Types.InsightKeys.CLS_CULPRITS) {
+    const traceBounds = TraceBounds.TraceBounds.BoundsManager.instance().state()?.micro.entireTraceBounds;
+    if (!traceBounds) {
       return null;
+    }
+    bounds = traceBounds;
   }
+
+  return renderInsightWidget(meta.component, insight, meta.jslog, meta.accessibleLabel, meta.title, bounds);
 }
 
 async function makeBottomUpTimelineTreeWidget(widgetData: BottomUpTreeAiWidget): Promise<WidgetMakerResponse|null> {

package/front_end/panels/console/SymbolizedErrorWidget.ts

@@ -0,0 +1,69 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Bindings from '../../models/bindings/bindings.js';
+import type * as Workspace from '../../models/workspace/workspace.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+export interface ViewInput {
+  error: Bindings.SymbolizedError.SymbolizedError;
+  ignoreListManager?: Workspace.IgnoreListManager.IgnoreListManager;
+}
+
+const DEFAULT_VIEW = (_input: ViewInput, _output: object, _target: HTMLElement): void => {};
+
+export class SymbolizedErrorWidget extends UI.Widget.Widget {
+  #error?: Bindings.SymbolizedError.SymbolizedError;
+  #view: typeof DEFAULT_VIEW;
+  #ignoreListManager?: Workspace.IgnoreListManager.IgnoreListManager;
+
+  constructor(element?: HTMLElement, view: typeof DEFAULT_VIEW = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  set ignoreListManager(ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager) {
+    this.#ignoreListManager = ignoreListManager;
+    this.requestUpdate();
+  }
+
+  get ignoreListManager(): Workspace.IgnoreListManager.IgnoreListManager|undefined {
+    return this.#ignoreListManager;
+  }
+
+  set error(error: Bindings.SymbolizedError.SymbolizedError) {
+    this.#error?.removeEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+    this.#error = error;
+    if (this.isShowing()) {
+      this.#error?.addEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+    }
+    this.requestUpdate();
+  }
+
+  get error(): Bindings.SymbolizedError.SymbolizedError|undefined {
+    return this.#error;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.#error?.addEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+    this.requestUpdate();
+  }
+
+  override willHide(): void {
+    super.willHide();
+    this.#error?.removeEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+  }
+
+  override performUpdate(): void {
+    if (!this.#error) {
+      return;
+    }
+    const input: ViewInput = {
+      error: this.#error,
+      ignoreListManager: this.#ignoreListManager,
+    };
+    this.#view(input, {}, this.contentElement);
+  }
+}

package/front_end/panels/console/console.ts

@@ -13,6 +13,7 @@ import './ConsoleViewMessage.js';
 import './ConsolePrompt.js';
 import './ConsoleView.js';
 import './ConsolePanel.js';
+import './SymbolizedErrorWidget.js';
 import './PromptBuilder.js';
 
 import * as ConsoleContextSelector from './ConsoleContextSelector.js';
@@ -27,6 +28,7 @@ import * as ConsoleView from './ConsoleView.js';
 import * as ConsoleViewMessage from './ConsoleViewMessage.js';
 import * as ConsoleViewport from './ConsoleViewport.js';
 import * as PromptBuilder from './PromptBuilder.js';
+import * as SymbolizedErrorWidget from './SymbolizedErrorWidget.js';
 
 export {
   ConsoleContextSelector,
@@ -41,4 +43,5 @@ export {
   ConsoleViewMessage,
   ConsoleViewport,
   PromptBuilder,
+  SymbolizedErrorWidget,
 };