DevTools: Implement CrashReportContextView component and tests

This CL introduces the CrashReportContextView component which will be
used to display crash report entries for each frame in the Application panel.
It uses standard Lit templates and the UI.Widget directive to render its
contents.

This CL also registers the visual elements logging context values for the
view and the toolbar actions.

Bug: 400432195
Change-Id: I072bf102110ae543b7f4f97c1192da05bbbc45cf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7718543
Reviewed-by: Paul Irish <paulirish@chromium.org>
Commit-Queue: James Scott <jamescscott@google.com>
Reviewed-by: Danil Somsikov <dsv@chromium.org>

Author: jcscottiii

config/gni/devtools_grd_files.gni

@@ -1409,6 +1409,7 @@ grd_files_unbundled_sources = [
   "front_end/panels/application/BackgroundServiceView.js",
   "front_end/panels/application/BounceTrackingMitigationsTreeElement.js",
   "front_end/panels/application/CookieItemsView.js",
+  "front_end/panels/application/CrashReportContextView.js",
   "front_end/panels/application/DOMStorageItemsView.js",
   "front_end/panels/application/DOMStorageModel.js",
   "front_end/panels/application/DeviceBoundSessionsModel.js",

front_end/panels/application/BUILD.gn

@@ -43,6 +43,7 @@ devtools_ui_module("application") {
     "BackgroundServiceView.ts",
     "BounceTrackingMitigationsTreeElement.ts",
     "CookieItemsView.ts",
+    "CrashReportContextView.ts",
     "DOMStorageItemsView.ts",
     "DOMStorageModel.ts",
     "DeviceBoundSessionsModel.ts",
@@ -169,6 +170,7 @@ devtools_ui_module("unittests") {
     "AppManifestView.test.ts",
     "ApplicationPanelSidebar.test.ts",
     "BackgroundServiceView.test.ts",
+    "CrashReportContextView.test.ts",
     "DOMStorageModel.test.ts",
     "DeviceBoundSessionsModel.test.ts",
     "DeviceBoundSessionsTreeElement.test.ts",

front_end/panels/application/CrashReportContextView.test.ts

@@ -0,0 +1,205 @@
+// 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 SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection, setMockConnectionResponseHandler} from '../../testing/MockConnection.js';
+import {createViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
+
+import * as Application from './application.js';
+
+describeWithMockConnection('CrashReportContextView', () => {
+  const FRAME_ID = 'frame-1' as Protocol.Page.FrameId;
+  const ORIGIN = 'https://example.com';
+  const URL = 'https://example.com/index.html';
+
+  let target: SDK.Target.Target;
+
+  beforeEach(() => {
+    target = createTarget();
+    target.model(SDK.CrashReportContextModel.CrashReportContextModel);
+    target.model(SDK.ResourceTreeModel.ResourceTreeModel);
+  });
+
+  async function createComponent() {
+    const view = createViewFunctionStub(Application.CrashReportContextView.CrashReportContextView);
+    const component = new Application.CrashReportContextView.CrashReportContextView(view);
+    return {view, component};
+  }
+
+  it('renders frame sections and entries', async () => {
+    sinon.stub(SDK.FrameManager.FrameManager.instance(), 'getFrame').returns({
+      url: URL,
+      securityOrigin: ORIGIN,
+      isMainFrame: () => true,
+      displayName: () => URL,
+    } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame);
+
+    setMockConnectionResponseHandler(
+        'CrashReportContext.getEntries', () => ({
+                                           entries: [
+                                             {key: 'user_id', value: '12345', frameId: FRAME_ID},
+                                           ],
+                                         }));
+
+    const {view} = await createComponent();
+    const input = await view.nextInput;
+
+    assert.lengthOf(input.frames, 1);
+    assert.strictEqual(input.frames[0].url, URL);
+    assert.strictEqual(input.frames[0].displayName, URL);
+    assert.strictEqual(input.frames[0].entries[0].key, 'user_id');
+  });
+
+  it('groups entries by frame', async () => {
+    const stub = sinon.stub(SDK.FrameManager.FrameManager.instance(), 'getFrame');
+    stub.withArgs('frame-1' as Protocol.Page.FrameId).returns({
+      url: 'https://frame1.com',
+      securityOrigin: 'https://frame1.com',
+      isMainFrame: () => true,
+      displayName: () => 'https://frame1.com',
+    } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame);
+    stub.withArgs('frame-2' as Protocol.Page.FrameId).returns({
+      url: 'https://frame2.com',
+      securityOrigin: 'https://frame2.com',
+      isMainFrame: () => false,
+      displayName: () => 'https://frame2.com',
+    } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame);
+
+    setMockConnectionResponseHandler(
+        'CrashReportContext.getEntries', () => ({
+                                           entries: [
+                                             {key: 'k1', value: 'v1', frameId: 'frame-1' as Protocol.Page.FrameId},
+                                             {key: 'k2', value: 'v2', frameId: 'frame-2' as Protocol.Page.FrameId},
+                                           ],
+                                         }));
+
+    const {view} = await createComponent();
+    const input = await view.nextInput;
+
+    assert.lengthOf(input.frames, 2);
+    assert.strictEqual(input.frames[0].url, 'https://frame1.com');
+    assert.strictEqual(input.frames[1].url, 'https://frame2.com');
+  });
+
+  it('handles unknown frames by showing a fallback URL', async () => {
+    // Explicitly return null for the frame lookup
+    sinon.stub(SDK.FrameManager.FrameManager.instance(), 'getFrame').returns(null);
+
+    setMockConnectionResponseHandler(
+        'CrashReportContext.getEntries',
+        () => ({
+          entries: [
+            {key: 'k1', value: 'v1', frameId: 'unknown-frame' as Protocol.Page.FrameId},
+          ],
+        }));
+
+    const {view} = await createComponent();
+    const input = await view.nextInput;
+
+    assert.lengthOf(input.frames, 1);
+    assert.strictEqual(input.frames[0].url, 'Unknown Frame');
+  });
+
+  it('disambiguates frames with the same URL', async () => {
+    const stub = sinon.stub(SDK.FrameManager.FrameManager.instance(), 'getFrame');
+    const SHARED_URL = 'https://shared.com';
+
+    stub.withArgs('frame-main' as Protocol.Page.FrameId).returns({
+      url: SHARED_URL,
+      securityOrigin: SHARED_URL,
+      isMainFrame: () => true,
+      displayName: () => SHARED_URL,
+    } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame);
+
+    stub.withArgs('frame-sub' as Protocol.Page.FrameId).returns({
+      url: SHARED_URL,
+      securityOrigin: SHARED_URL,
+      isMainFrame: () => false,
+      displayName: () => SHARED_URL,
+    } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame);
+
+    setMockConnectionResponseHandler(
+        'CrashReportContext.getEntries', () => ({
+                                           entries: [
+                                             {key: 'k1', value: 'v1', frameId: 'frame-main' as Protocol.Page.FrameId},
+                                             {key: 'k2', value: 'v2', frameId: 'frame-sub' as Protocol.Page.FrameId},
+                                           ],
+                                         }));
+
+    const {view} = await createComponent();
+    const input = await view.nextInput;
+
+    assert.lengthOf(input.frames, 2);
+    assert.strictEqual(input.frames[0].displayName, SHARED_URL);
+    assert.strictEqual(input.frames[1].displayName, SHARED_URL);
+  });
+
+  it('uses frame.displayName() if available to render titles', async () => {
+    const stub = sinon.stub(SDK.FrameManager.FrameManager.instance(), 'getFrame');
+    const URL = 'https://example.com';
+    const TITLE = 'Frame Page Title';
+
+    stub.withArgs('frame-1' as Protocol.Page.FrameId).returns({
+      url: URL,
+      securityOrigin: URL,
+      isMainFrame: () => true,
+      displayName: () => TITLE,
+    } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame);
+
+    setMockConnectionResponseHandler(
+        'CrashReportContext.getEntries',
+        () => ({
+          entries: [
+            {key: 'user_id', value: '12345', frameId: 'frame-1' as Protocol.Page.FrameId},
+          ],
+        }));
+
+    const {view} = await createComponent();
+    const input = await view.nextInput;
+
+    assert.lengthOf(input.frames, 1);
+    assert.strictEqual(input.frames[0].displayName, TITLE);
+  });
+
+  it('renders a placeholder when no context is available', async () => {
+    setMockConnectionResponseHandler('CrashReportContext.getEntries', () => ({
+                                                                        entries: [],
+                                                                      }));
+
+    const {view} = await createComponent();
+    const input = await view.nextInput;
+
+    assert.lengthOf(input.frames, 0);
+  });
+
+  it('handles refresh and filter correctly', async () => {
+    const {view, component} = await createComponent();
+    const input = await view.nextInput;
+
+    assert.exists(input.onRefresh);
+    assert.exists(input.onFilterChanged);
+    assert.deepEqual(input.filters, []);
+
+    const updateSpy = sinon.spy(component, 'requestUpdate');
+
+    // Test Refresh
+    input.onRefresh();
+    sinon.assert.calledOnce(updateSpy);
+
+    // Test Filter
+    input.onFilterChanged(new CustomEvent('change', {detail: 'test'}));
+    sinon.assert.calledTwice(updateSpy);
+
+    const filteredInput = await view.nextInput;
+    assert.lengthOf(filteredInput.filters, 1);
+    assert.strictEqual(filteredInput.filters[0].key, 'key,value');
+
+    // Test Clear Filter
+    input.onFilterChanged(new CustomEvent('change', {detail: ''}));
+    const clearedInput = await view.nextInput;
+    assert.deepEqual(clearedInput.filters, []);
+  });
+});