chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -36,6 +36,7 @@ interface ViewInput {
   attributeBeingEdited: SDK.DOMModel.Attribute|null;
   attributes: SDK.DOMModel.Attribute[];
   backendNodeId?: number;
+  targetId?: string;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement|DocumentFragment) => void;
@@ -99,6 +100,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           attributes: {
             jslog: `${VisualLogging.section('aria-attributes')}`,
             ...(input.backendNodeId ? {'data-backend-node-id': `${input.backendNodeId}`} : {}),
+            ...(input.targetId ? {'data-target-id': `${input.targetId}`} : {}),
           },
         },
       });
@@ -159,6 +161,7 @@ export class ARIAAttributesPane extends AccessibilitySubPane<ShadowRoot> {
       onCancelEditing,
       propertyCompletions,
       backendNodeId: this.node()?.backendNodeId(),
+      targetId: this.node()?.domModel().target().id(),
     };
     this.#view(input, {}, this.contentElement);
   }

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingListView.ts

@@ -0,0 +1,177 @@
+// 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 '../../ui/legacy/components/data_grid/data_grid.js';
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+
+import accessibilityAnnouncementRecordingListViewStyles from './accessibilityAnnouncementRecordingListView.css.js';
+import {
+  type A11yAnnouncement,
+  AnnouncementApi,
+} from './AccessibilityAnnouncementRecordingView.js';
+
+const {html, render} = Lit;
+
+const UIStrings = {
+  /**
+   * @description Column header for the announcement timestamp.
+   */
+  time: 'Time',
+  /**
+   * @description Column header for the API type (DOM aria-live vs JS ariaNotify).
+   */
+  api: 'API',
+  /**
+   * @description Column header for the politeness level (e.g. polite, assertive).
+   */
+  politeness: 'Politeness',
+  /**
+   * @description Column header for the announcement message text.
+   */
+  message: 'Message',
+  /**
+   * @description Value for DOM aria-live announcements in the API column.
+   */
+  ariaLive: 'ARIA live',
+  /**
+   * @description Value for JS ariaNotify announcements in the API column.
+   */
+  jsTriggered: 'JS-triggered',
+  /**
+   * @description Accessible title for the announcements data grid.
+   */
+  ariaLiveRecordingList: 'Accessibility Announcements',
+} as const;
+const str_ =
+    i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityAnnouncementRecordingListView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+  items: readonly A11yAnnouncement[];
+  selectedItem: A11yAnnouncement|null;
+  onSelect: (item: A11yAnnouncement) => void;
+  onDeselect: () => void;
+}
+
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <style>${accessibilityAnnouncementRecordingListViewStyles}</style>
+    <devtools-data-grid
+      name=${i18nString(UIStrings.ariaLiveRecordingList)}
+      striped
+      class="flex-auto"
+      @deselect=${input.onDeselect}>
+      <table>
+        <tr>
+          <th id="time" sortable fixed width="110px" align="right">
+            ${i18nString(UIStrings.time)}
+          </th>
+          <th id="api" sortable fixed width="110px">
+            ${i18nString(UIStrings.api)}
+          </th>
+          <th id="politeness" sortable fixed width="90px">
+            ${i18nString(UIStrings.politeness)}
+          </th>
+          <th id="message" sortable width="300px">
+            ${i18nString(UIStrings.message)}
+          </th>
+        </tr>
+        ${input.items.map(item => {
+          const timeString = new Date(item.time).toLocaleTimeString(i18n.DevToolsLocale.DevToolsLocale.instance().locale);
+          const apiDisplay = item.api === AnnouncementApi.JS_TRIGGERED ?
+              i18nString(UIStrings.jsTriggered) :
+              i18nString(UIStrings.ariaLive);
+
+          return html`
+            <tr
+              ?selected=${item === input.selectedItem}
+              @select=${() => input.onSelect(item)}>
+              <td data-value=${item.time}>
+                <span>${timeString}</span>
+              </td>
+              <td>${apiDisplay}</td>
+              <td>${item.politeness}</td>
+              <td title=${item.message}>
+                ${item.message}
+              </td>
+            </tr>`;
+        })}
+      </table>
+    </devtools-data-grid>`,
+    target);
+  // clang-format on
+};
+
+export class AccessibilityAnnouncementRecordingListView extends UI.Widget.VBox {
+  #items: readonly A11yAnnouncement[] = [];
+  #selectedItem: A11yAnnouncement|null = null;
+  #onSelect: ((item: A11yAnnouncement|null) => void)|null = null;
+  readonly #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  set items(items: readonly A11yAnnouncement[]) {
+    if (this.#items === items) {
+      return;
+    }
+    this.#items = items;
+    this.requestUpdate();
+  }
+
+  get items(): readonly A11yAnnouncement[] {
+    return this.#items;
+  }
+
+  set selectedItem(item: A11yAnnouncement|null) {
+    if (this.#selectedItem === item) {
+      return;
+    }
+    this.#selectedItem = item;
+    this.requestUpdate();
+  }
+
+  get selectedItem(): A11yAnnouncement|null {
+    return this.#selectedItem;
+  }
+
+  set onSelect(onSelect: (item: A11yAnnouncement|null) => void) {
+    this.#onSelect = onSelect;
+  }
+
+  reset(): void {
+    this.#items = [];
+    this.#selectedItem = null;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const input: ViewInput = {
+      items: this.#items,
+      selectedItem: this.#selectedItem,
+      onSelect: (item: A11yAnnouncement) => {
+        this.selectedItem = item;
+        this.#onSelect?.(item);
+      },
+      onDeselect: () => {
+        this.selectedItem = null;
+        this.#onSelect?.(null);
+      },
+    };
+    this.#view(input, undefined, this.contentElement);
+  }
+}

package/front_end/panels/accessibility/accessibility.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as AccessibilityAnnouncementRecordingListView from './AccessibilityAnnouncementRecordingListView.js';
 import * as AccessibilityAnnouncementRecordingView from './AccessibilityAnnouncementRecordingView.js';
 import * as AccessibilityNodeView from './AccessibilityNodeView.js';
 import * as AccessibilitySidebarView from './AccessibilitySidebarView.js';
@@ -11,6 +12,7 @@ import * as ARIAAttributesView from './ARIAAttributesView.js';
 import * as ARIAMetadata from './ARIAMetadata.js';
 
 export {
+  AccessibilityAnnouncementRecordingListView,
   AccessibilityAnnouncementRecordingView,
   AccessibilityNodeView,
   AccessibilitySidebarView,

package/front_end/panels/accessibility/accessibilityAnnouncementRecordingListView.css

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+:host {
+  font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+@scope to (devtools-widget > *) {
+  :scope {
+    font-family: inherit;
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  devtools-data-grid {
+    font-family: inherit;
+    flex: auto;
+    height: 100%;
+    border: none;
+  }
+}

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -626,11 +626,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   };
   #textInputValue = '';
 
-  constructor(private view: View = defaultView, {aidaClient, aidaAvailability}: {
+  private view: View;
+
+  constructor(view: View|undefined = defaultView, {aidaClient, aidaAvailability}: {
     aidaClient: Host.AidaClient.AidaClient,
     aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
   }) {
     super(AiAssistancePanel.panelName);
+    this.view = view;
     this.registerRequiredCSS(aiAssistancePanelStyles);
     this.#aiAssistanceEnabledSetting = this.#getAiAssistanceEnabledSetting();
 
@@ -730,8 +733,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onTextSubmit: async (text: string, imageInput?: Host.AidaClient.Part,
                                multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
             const submit = (): void => {
-              Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
-              void this.#startConversation(text, imageInput, multimodalInputType);
+              void this.#submitQuery(text, imageInput, multimodalInputType);
             };
 
             const seenSetting = Common.Settings.Settings.instance().resolve(
@@ -1505,11 +1507,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return;
       }
 
-      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
       if (this.#conversation && this.#conversation.isBlockedByOrigin) {
         this.#handleNewChatRequest();
       }
-      await this.#startConversation(predefinedPrompt);
+      await this.#submitQuery(predefinedPrompt);
     } else {
       this.#viewOutput.chatView?.focusTextInput();
     }
@@ -1589,7 +1590,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     this.#updateConversationState(conversation);
-    await this.#doConversation(conversation.history);
+    await this.#consumeResponseStream(conversation.history);
   }
 
   #handleNewChatRequest(): void {
@@ -1707,7 +1708,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
   }
 
-  async #startConversation(
+  /**
+   * Submits a user query turn to the active conversation and streams the response.
+   * Executes on every turn (both initial prompt and follow-up turns).
+   */
+  async #submitQuery(
       text: string,
       imageInput?: Host.AidaClient.Part,
       multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType,
@@ -1715,13 +1720,18 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (!this.#conversation) {
       return;
     }
-    // Cancel any previous in-flight conversation.
+    // Cancel any previous in-flight query.
     this.#cancel();
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
     const signal = this.#runAbortController.signal;
 
-    // If a different context is provided, it must be from the same origin.
+    // Initial conversation boundary (turn 1 only).
     if (this.#conversation.isEmpty) {
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.STARTED_AI_CONVERSATION);
+      // Note: Prior to September 2026 (crrev.com/c/8366147), this event erroneously logged on every query
+      // turn because this method was named #startConversation. It is now correctly
+      // restricted to conversation initialization.
+      void VisualLogging.logFunctionCall(`start-conversation-${this.#conversation.type}`, 'ui');
     }
 
     let multimodalInput: AiAssistanceModel.AiAgent.MultimodalInput|undefined;
@@ -1733,9 +1743,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       };
     }
 
-    void VisualLogging.logFunctionCall(`start-conversation-${this.#conversation.type}`, 'ui');
-
-    await this.#doConversation(
+    await this.#consumeResponseStream(
         this.#conversation.run(
             text,
             {
@@ -1746,9 +1754,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     );
   }
 
-  async #doConversation(
-      items: Iterable<AiAssistanceModel.AiAgent.ResponseData, void, void>|
-      AsyncIterable<AiAssistanceModel.AiAgent.ResponseData, void, void>): Promise<void> {
+  /**
+   * Consumes response items (live generator or historic array) and drives UI updates.
+   */
+  async #consumeResponseStream(items: Iterable<AiAssistanceModel.AiAgent.ResponseData, void, void>|
+                               AsyncIterable<AiAssistanceModel.AiAgent.ResponseData, void, void>): Promise<void> {
     const release = await this.#mutex.acquire();
     try {
       let systemMessage: ModelChatMessage = {

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

@@ -19,10 +19,9 @@ import * as Trace from '../../../models/trace/trace.js';
 import * as Workspace from '../../../models/workspace/workspace.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';
-import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
+import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import * as Snackbars from '../../../ui/components/snackbars/snackbars.js';
 import * as UIHelpers from '../../../ui/helpers/helpers.js';
 import type * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -614,7 +613,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
       <div class="user-query-wrapper">
         <section class=${messageClasses} jslog=${VisualLogging.section('question')}>
           ${imageInput}
-          <div class="message-content">${renderTextAsMarkdown(message.text, input.markdownRenderer)}</div>
+          <div class="message-content">${MarkdownView.MarkdownView.renderTextAsMarkdown(message.text, input.markdownRenderer)}</div>
         </section>
       </div>
     `, target);
@@ -643,7 +642,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           (part, index) => {
             const isLastPart = index === message.parts.length - 1;
             if (part.type === 'answer') {
-              return html`<p>${renderTextAsMarkdown(part.text, input.markdownRenderer, { animate: !input.isReadOnly && input.isLoading && isLastPart && input.isLastMessage })}</p>`;
+              return html`<p>${MarkdownView.MarkdownView.renderTextAsMarkdown(part.text, input.markdownRenderer, { animate: !input.isReadOnly && input.isLoading && isLastPart && input.isLastMessage })}</p>`;
             }
             if (part.type === 'widget') {
               return html`${Lit.Directives.until(renderWidgets(part.widgets, {wrapperClass: 'main-widgets-wrapper'}))}`;
@@ -662,36 +661,6 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
 
 export type View = typeof DEFAULT_VIEW;
 
-function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownView.MarkdownView.MarkdownLitRenderer,
-                              {animate, ref: refFn}: {
-                                animate?: boolean,
-                                ref?: (element?: Element) => void,
-                              } = {}): Lit.TemplateResult {
-  let tokens = [];
-  try {
-    tokens = Marked.Marked.lexer(text);
-    for (const token of tokens) {
-      // Try to render all the tokens to make sure that
-      // they all have a template defined for them. If there
-      // isn't any template defined for a token, we'll fallback
-      // to rendering the text as plain text instead of markdown.
-      markdownRenderer.renderToken(token);
-    }
-  } catch {
-    // The tokens were not parsed correctly or
-    // one of the tokens are not supported, so we
-    // continue to render this as text.
-    return html`${text}`;
-  }
-
-  // clang-format off
-  return html`<devtools-markdown-view
-    .data=${{tokens, renderer: markdownRenderer, animationEnabled: animate} as MarkdownView.MarkdownView.MarkdownViewData}
-    ${refFn ? ref(refFn) : Lit.nothing}>
-  </devtools-markdown-view>`;
-  // clang-format on
-}
-
 export function titleForStep(step: Step): string {
   return step.title ?? `${lockedString(UIStringsNotTranslate.investigating)}…`;
 }
@@ -754,7 +723,9 @@ function renderStepDetails({
 }): Lit.LitTemplate {
   const sideEffects =
       isLast && step.state.type === 'needs_approval' ? renderSideEffectConfirmationUi(step) : Lit.nothing;
-  const thought = step.thought ? html`<p>${renderTextAsMarkdown(step.thought, markdownRenderer)}</p>` : Lit.nothing;
+  const thought = step.thought ?
+      html`<p>${MarkdownView.MarkdownView.renderTextAsMarkdown(step.thought, markdownRenderer)}</p>` :
+      Lit.nothing;
 
   // clang-format off
   const contextDetails = step.contextDetails ?

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

@@ -3,13 +3,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/kit/kit.js';
+
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import {html, type LitTemplate, render} from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import disabledWidgetStyles from './disabledWidget.css.js';
 
@@ -85,14 +86,14 @@ function renderConsentViewContents(
   }
 
   // eslint-disable-next-line @devtools/no-imperative-dom-api
-  const settingsLink = document.createElement('span');
+  const settingsLink = document.createElement('devtools-link');
   settingsLink.textContent = i18nString(UIStrings.settingsLink);
   settingsLink.classList.add('link');
   UI.ARIAUtils.markAsLink(settingsLink);
   settingsLink.addEventListener('click', () => {
     void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
   });
-  settingsLink.setAttribute('jslog', `${VisualLogging.action('open-ai-settings').track({click: true})}`);
+  settingsLink.jslogContext = 'open-ai-settings';
 
   let consentViewContents: HTMLSpanElement;
   if (hostConfig.devToolsAiAssistancePerformanceAgent?.enabled) {

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -615,7 +615,9 @@
 
   .storage-breakdown-widget {
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
+    min-width: fit-content;
     padding: var(--sys-size-4);
+    width: 100%;
   }
 }

package/front_end/panels/animation/AnimationTimeline.ts

@@ -1213,6 +1213,7 @@ export class NodeUI {
       return;
     }
     this.element.setAttribute('data-backend-node-id', String(node.backendNodeId()));
+    this.element.setAttribute('data-target-id', node.domModel().target().id());
     this.#node = node;
     this.nodeChanged();
     const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {

package/front_end/panels/application/CrashReportContextView.ts

@@ -213,7 +213,6 @@ export class CrashReportContextView extends UI.Widget.VBox {
             frameId,
             displayName,
             isMain: frame?.isMainFrame() ?? false,
-            origin: frame?.securityOrigin || '',
             entries: frameEntries,
           };
         })

package/front_end/panels/application/FrameDetailsView.ts

@@ -351,7 +351,7 @@ function renderDocumentSection(input: FrameDetailsViewInput): LitTemplate {
         </div>
       </devtools-report-value>
       ${maybeRenderUnreachableURL(input.frame?.unreachableUrl())}
-      ${maybeRenderOrigin(input.frame?.securityOrigin)}
+      ${maybeRenderOrigin(input.frame?.securityOrigin())}
       ${renderOwnerElement(input.linkTargetDOMNode)}
       ${maybeRenderCreationStacktrace(input.creationStackTrace)}
       ${maybeRenderAdStatus(input.frame?.adFrameType(), input.frame?.adFrameStatus())}
@@ -414,12 +414,13 @@ function renderNetworkLinkForUnreachableURL(unreachableUrlString: Platform.DevTo
   return nothing;
 }
 
-function maybeRenderOrigin(securityOrigin: string|null): LitTemplate {
-  if (securityOrigin && securityOrigin !== '://') {
+function maybeRenderOrigin(securityOrigin: SDK.SecurityOrigin.SecurityOrigin|undefined): LitTemplate {
+  if (securityOrigin && !securityOrigin.isOpaque()) {
+    const originString = securityOrigin.siteId();
     return html`
         <devtools-report-key>${i18nString(UIStrings.origin)}</devtools-report-key>
         <devtools-report-value>
-          <div class="text-ellipsis" title=${securityOrigin}>${securityOrigin}</div>
+          <div class="text-ellipsis" title=${originString}>${originString}</div>
         </devtools-report-value>
       `;
   }

package/front_end/panels/application/IndexedDBViews.ts

@@ -289,14 +289,14 @@ const populateContextMenu = (e: CustomEvent<UI.ContextMenu.ContextMenu>): void =
 const renderDataGrid = (input: IndexedDBDataViewInput): LitTemplate => {
   const keyPath = input.isIndex && input.index ? input.index.keyPath : input.objectStore.keyPath;
   // clang-format off
-  return html`<devtools-data-grid striped style="flex: auto;" name=${i18nString(UIStrings.indexedDb)} .template=${html`
+  return html`<devtools-data-grid row-height="auto" striped style="flex: auto;" name=${i18nString(UIStrings.indexedDb)} .template=${html`
     <style>${indexedDBViewsStyles}</style>
     <table>
       <tr>
         <th id="number" fixed width="50px">#</th>
-        <th id="key">${renderKeyColumnHeader(i18nString(UIStrings.keyString), keyPath)}</th>
-        ${input.isIndex ? html`<th id="primary-key">${renderKeyColumnHeader(i18nString(UIStrings.primaryKey), input.objectStore.keyPath)}</th>` : nothing}
-        <th id="value">${i18nString(UIStrings.valueString)}</th>
+        <th id="key" weight="2">${renderKeyColumnHeader(i18nString(UIStrings.keyString), keyPath)}</th>
+        ${input.isIndex ? html`<th id="primary-key" weight="2">${renderKeyColumnHeader(i18nString(UIStrings.primaryKey), input.objectStore.keyPath)}</th>` : nothing}
+        <th id="value" weight="8">${i18nString(UIStrings.valueString)}</th>
       </tr>
       ${repeat(input.entries, (_entry, index) => index, (entry, index) => {
         return html`

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -460,7 +460,7 @@ export class BackForwardCacheView extends UI.Widget.Widget {
   #historyIndex = 0;
   #view: View;
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super({useShadowDom: true, delegatesFocus: true});
     this.#view = view;
   }

package/front_end/panels/application/components/EndpointsGrid.ts

@@ -71,7 +71,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
 type View = typeof DEFAULT_VIEW;
 
 export class EndpointsGrid extends UI.Widget.Widget {
-  endpoints = new Map<string, Protocol.Network.ReportingApiEndpoint[]>();
+  endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]> =
+      new Map<string, Protocol.Network.ReportingApiEndpoint[]>();
   #view: View;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {

package/front_end/panels/application/components/PermissionsPolicySection.ts

@@ -218,7 +218,7 @@ export class PermissionsPolicySection extends UI.Widget.Widget {
   #showDetails = false;
   #view: View;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: false});
     this.#view = view;
   }

package/front_end/panels/application/components/ServiceWorkerRouterView.ts

@@ -45,7 +45,7 @@ export class ServiceWorkerRouterView extends UI.Widget.Widget {
   #rules: SDK.ServiceWorkerManager.ServiceWorkerRouterRule[] = [];
   #view: View;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
   }

package/front_end/panels/application/components/TrustTokensView.ts

@@ -141,7 +141,7 @@ export class TrustTokensView extends UI.Widget.VBox {
   #tokens: Protocol.Storage.TrustTokens[] = [];
   #view: View;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
   }

package/front_end/panels/application/indexedDBViews.css

@@ -32,20 +32,6 @@
   color: inherit;
 }
 
-:host-context(.indexed-db-data-view) .section,
-:host-context(.indexed-db-data-view) .section > .header,
-:host-context(.indexed-db-data-view) .section > .header .title {
-  margin: 0;
-  min-height: inherit;
-  line-height: inherit;
-}
-
-:host-context(.indexed-db-data-view) .data-grid .data-container td .section .header .title {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
 .indexed-db-key-path {
   color: var(--sys-color-error);
   white-space: pre-wrap;

package/front_end/panels/application/preloading/components/PreloadingDetailsReportView.ts

@@ -443,7 +443,8 @@ export class PreloadingDetailsReportView extends UI.Widget.VBox {
   #data: PreloadingDetailsReportViewData = null;
   #view: typeof DEFAULT_VIEW;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement,
+              view: (input: ViewInput, _output: undefined, target: HTMLElement) => void = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
   }

package/front_end/panels/application/preloading/components/RuleSetDetailsView.ts

@@ -79,7 +79,8 @@ export class RuleSetDetailsView extends UI.Widget.VBox {
   #ruleSet: RuleSet|null = null;
   #shouldPrettyPrint = true;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement,
+              view: (input: ViewInput|null, _output: object, target: HTMLElement) => void = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
   }

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -425,7 +425,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
 export class UsedPreloadingView extends UI.Widget.VBox {
   readonly #view: View;
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
     this.#view = view;
   }