chrome-devtools-frontend 1.0.1606789 → 1.0.1608868

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

@@ -0,0 +1,154 @@
+// 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 Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import type * as TextUtils from '../../../models/text_utils/text_utils.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import {html, render} from '../../../ui/lit/lit.js';
+
+const UIStrings = {
+  /**
+   * @description Text in Crash Report Context Items View of the Application panel
+   */
+  key: 'Key',
+  /**
+   * @description Text in Crash Report Context Items View of the Application panel
+   */
+  value: 'Value',
+  /**
+   * @description Context menu item to copy the key of a context entry
+   */
+  copyKey: 'Copy key',
+  /**
+   * @description Context menu item to copy the value of a context entry
+   */
+  copyValue: 'Copy value',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/CrashReportContextGrid.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface CrashReportContextGridData {
+  entries: Array<{key: string, value: string}>;
+  selectedKey?: string;
+  filters?: TextUtils.TextUtils.ParsedFilter[];
+}
+
+export interface ViewInput {
+  entries: Array<{key: string, value: string}>;
+  selectedKey?: string;
+  onSelect: (key: string) => void;
+  onContextMenu: (e: Event, key: string, value: string) => void;
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement|ShadowRoot): void => {
+  // clang-format off
+  render(
+      html`
+      <style>
+        :host {
+          display: block;
+        }
+
+        div {
+          overflow: auto;
+        }
+
+        td {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      </style>
+      <style>${UI.inspectorCommonStyles}</style>
+      <div>
+        <devtools-data-grid striped inline>
+          <table>
+            <thead>
+              <tr>
+                <th id="key" weight="50">${i18nString(UIStrings.key)}</th>
+                <th id="value" weight="50">${i18nString(UIStrings.value)}</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${input.entries.map(entry => html`
+                <tr class=${input.selectedKey === entry.key ? 'selected' : ''}
+                    @select=${() => input.onSelect(entry.key)}
+                    @contextmenu=${(e: Event) => input.onContextMenu(e, entry.key, entry.value)}>
+                  <td title=${entry.key}>${entry.key}</td>
+                  <td title=${entry.value}>${entry.value}</td>
+                </tr>
+              `)}
+            </tbody>
+          </table>
+        </devtools-data-grid>
+      </div>
+    `,
+      target);
+  // clang-format on
+};
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement|ShadowRoot) => void;
+
+export class CrashReportContextGrid extends UI.Widget.Widget {
+  #entries: Array<{key: string, value: string}> = [];
+  #filteredEntries: Array<{key: string, value: string}> = [];
+  #selectedKey?: string;
+  #filters: TextUtils.TextUtils.ParsedFilter[] = [];
+  readonly #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  set data(data: CrashReportContextGridData) {
+    this.#entries = data.entries;
+    this.#selectedKey = data.selectedKey;
+    this.#filters = data.filters || [];
+    this.requestUpdate();
+  }
+
+  #computeFilteredEntries(): void {
+    if (this.#filters.length === 0) {
+      this.#filteredEntries = this.#entries;
+      return;
+    }
+    this.#filteredEntries = this.#entries.filter(entry => {
+      return this.#filters.every(filter => {
+        const regex = filter.regex;
+        if (!regex) {
+          return true;
+        }
+        const matches = regex.test(entry.key) || regex.test(entry.value);
+        return filter.negative ? !matches : matches;
+      });
+    });
+  }
+
+  #onContextMenu(e: Event, key: string, value: string): void {
+    const customEvent = e as CustomEvent<UI.ContextMenu.ContextMenu>;
+    const contextMenu = customEvent.detail;
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyKey), () => {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(key);
+    }, {jslogContext: 'copy-key'});
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyValue), () => {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(value);
+    }, {jslogContext: 'copy-value'});
+  }
+
+  override performUpdate(): void {
+    this.#computeFilteredEntries();
+    this.#view(
+        {
+          entries: this.#filteredEntries,
+          selectedKey: this.#selectedKey,
+          onSelect: (key: string) => this.element.dispatchEvent(new CustomEvent('select', {detail: key})),
+          onContextMenu: (e: Event, key: string, value: string) => this.#onContextMenu(e, key, value),
+        },
+        undefined, this.contentElement);
+  }
+}

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

@@ -4,6 +4,7 @@
 
 import * as BackForwardCacheView from './BackForwardCacheView.js';
 import * as BounceTrackingMitigationsView from './BounceTrackingMitigationsView.js';
+import * as CrashReportContextGrid from './CrashReportContextGrid.js';
 import * as EndpointsGrid from './EndpointsGrid.js';
 import * as InterestGroupAccessGrid from './InterestGroupAccessGrid.js';
 import * as PermissionsPolicySection from './PermissionsPolicySection.js';
@@ -18,6 +19,7 @@ import * as TrustTokensView from './TrustTokensView.js';
 export {
   BackForwardCacheView,
   BounceTrackingMitigationsView,
+  CrashReportContextGrid,
   EndpointsGrid,
   InterestGroupAccessGrid,
   PermissionsPolicySection,

package/front_end/panels/application/webMCPView.css

@@ -27,11 +27,36 @@
         flex: auto;
     }
 
-    devtools-data-grid td {
+    .data-grid {
+      th {
+        height: 26px;
+      }
+
+      td {
         vertical-align: middle;
+      }
+
+      tr.status-cancelled {
+        color: var(--sys-color-on-surface-light);
+      }
+
+      tr.status-error {
+        color: var(--sys-color-error);
+      }
+
+      tr.selected {
+        background-color: var(--sys-color-tonal-container);
+      }
+
+      tr.selected.status-error {
+        background-color: var(--sys-color-error-container);
+        color: var(--sys-color-error);
+      }
     }
 
     .section-title {
+        display: flex;
+        gap: var(--sys-size-2);
         background-color: var(--sys-color-surface1);
         padding: 0 5px;
         line-height: 22px;
@@ -47,6 +72,57 @@
         gap: 4px;
     }
 
+    .tool-details {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+    }
+
+    .tool-details-grid {
+      display: grid;
+      grid-template-columns: min-content 1fr;
+      gap: 0 var(--sys-size-16);
+      padding: calc(0.5*var(--sys-size-6)) var(--sys-size-8);
+      align-items: flex-start;
+
+      .label {
+        color: var(--sys-color-on-surface-subtle);
+        white-space: nowrap;
+        padding: var(--sys-size-6) 0;
+      }
+
+      .value {
+        &.source-code {
+          color: var(--sys-color-token-attribute);
+        }
+
+        padding: var(--sys-size-6) 0;
+        color: var(--sys-color-on-surface);
+        overflow-wrap: anywhere;
+
+        &:has(> .stack-preview-container) {
+          padding: var(--sys-size-4) 0;
+        }
+
+        &.tool-origin-container {
+          display: flex;
+          align-items: center;
+          gap: var(--sys-size-4);
+        }
+
+        .tool-origin-node {
+          display: flex;
+          align-items: center;
+          cursor: default;
+        }
+      }
+
+      .show-element {
+        height: 1lh;
+      }
+    }
+
     devtools-list {
       flex: 1 1 auto;
       margin: 0;
@@ -60,8 +136,17 @@
         padding: 8px 0;
         gap: 4px;
         width: 100%;
-        min-width: 0;
+        box-sizing: border-box;
         border-bottom: 1px solid var(--sys-color-divider);
+        cursor: pointer;
+    }
+
+    .tool-item:hover {
+        background-color: var(--sys-color-state-hover-on-subtle);
+    }
+
+    .tool-item.selected {
+        background-color: var(--sys-color-tonal-container);
     }
 
     .tool-name-container {
@@ -91,10 +176,9 @@
 
     .tool-description {
         color: var(--sys-color-on-surface);
-    }
-
-    tr.status-error {
-      color: var(--sys-color-error);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     devtools-toolbar-input {
@@ -102,10 +186,6 @@
         flex-shrink: 1;
     }
 
-    tr.status-cancelled {
-      color: var(--sys-color-on-surface-light);
-    }
-
     .toolbar-text.status-error-text {
       color: var(--sys-color-error);
     }
@@ -113,4 +193,21 @@
     .toolbar-text.status-cancelled-text {
       color: var(--sys-color-on-surface-light);
     }
+
+    .call-details-tabbed-pane {
+        flex: auto;
+        border-bottom: 1px solid var(--sys-color-divider);
+    }
+
+    .call-payload-view {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .call-payload-content {
+        padding: var(--sys-size-5);
+        flex: auto;
+        overflow: auto;
+    }
 }

package/front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -44,6 +44,16 @@ const UIStringsNotTranslate = {
    */
   tooltipDisclaimerTextForAiCodeCompletionNoLoggingInSources:
       'To generate code suggestions, the contents of the currently open file are shared with Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
+  /**
+   * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code completion in Styles pane.
+   */
+  tooltipDisclaimerTextForAiCodeCompletionInStyles:
+      'To generate code suggestions, the CSS properties of the selected element and the relevant CSS files are shared with Google. This data may be seen by human reviewers to improve this feature.',
+  /**
+   * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code completion in Styles pane.
+   */
+  tooltipDisclaimerTextForAiCodeCompletionNoLoggingInStyles:
+      'To generate code suggestions, the CSS properties of the selected element and the relevant CSS files are shared with Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
    * Text for tooltip shown on hovering over spinner.
    */
@@ -71,8 +81,8 @@ function getTooltipDisclaimerText(noLogging: boolean, panel: AiCodeCompletion.Ai
           lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionNoLoggingInSources) :
           lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionInSources);
     case AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES:
-      // TODO(476101019): update with string for styles pane
-      return '';
+      return noLogging ? lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionNoLoggingInStyles) :
+                         lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionInStyles);
   }
 }
 

package/front_end/panels/elements/AccessibilityTreeView.ts

@@ -16,25 +16,19 @@ import {ElementsPanel} from './ElementsPanel.js';
 export class AccessibilityTreeView extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.AccessibilityModel.AccessibilityModel> {
   private accessibilityTreeComponent: TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>;
-  private readonly toggleButton: HTMLElement;
   private inspectedDOMNode: SDK.DOMModel.DOMNode|null = null;
   private root: SDK.AccessibilityModel.AccessibilityNode|null = null;
 
   constructor(
-      toggleButton: HTMLElement,
       accessibilityTreeComponent: TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>) {
     super();
     this.registerRequiredCSS(accessibilityTreeViewStyles);
-    // toggleButton is bound to a click handler on ElementsPanel to switch between the DOM tree
-    // and accessibility tree views.
-    this.toggleButton = toggleButton;
     this.accessibilityTreeComponent = accessibilityTreeComponent;
 
     const container = this.contentElement.createChild('div');
 
     container.classList.add('accessibility-tree-view-container');
     container.setAttribute('jslog', `${VisualLogging.tree('full-accessibility')}`);
-    container.appendChild(this.toggleButton);
     container.appendChild(this.accessibilityTreeComponent);
 
     SDK.TargetManager.TargetManager.instance().observeModels(
@@ -95,6 +89,12 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
   }
 
   async renderTree(): Promise<void> {
+    if (!this.root) {
+      const frameId = SDK.FrameManager.FrameManager.instance().getOutermostFrame()?.id;
+      if (frameId) {
+        this.root = await AccessibilityTreeUtils.getRootNode(frameId);
+      }
+    }
     if (!this.root) {
       return;
     }
@@ -149,10 +149,14 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
   treeUpdated({data}: Common.EventTarget
                   .EventTargetEvent<SDK.AccessibilityModel.EventTypes[SDK.AccessibilityModel.Events.TREE_UPDATED]>):
       void {
+    if (data.root) {
+      this.root = data.root;
+    }
     if (!this.isShowing()) {
       return;
     }
     if (!data.root) {
+      this.root = null;
       void this.renderTree();
       return;
     }

package/front_end/panels/elements/ElementsPanel.ts

@@ -44,7 +44,6 @@ import * as Annotations from '../../models/annotations/annotations.js';
 import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -72,16 +71,6 @@ const UIStrings = {
    * selectors.
    */
   findByStringSelectorOrXpath: 'Find by string, selector, or `XPath`',
-  /**
-   * @description Button text for a button that takes the user to the Accessibility Tree View from the
-   * DOM tree view, in the Elements panel.
-   */
-  switchToAccessibilityTreeView: 'Switch to Accessibility Tree view',
-  /**
-   * @description Button text for a button that takes the user to the DOM tree view from the
-   * Accessibility Tree View, in the Elements panel.
-   */
-  switchToDomTreeView: 'Switch to DOM Tree view',
   /**
    * @description Tooltip for the the Computed Styles sidebar toggle in the Styles pane. Command to
    * open/show the sidebar.
@@ -179,25 +168,6 @@ type RevealAndSelectNodeOpts = RevealAndSelectNodeOptsSelectionAndFocus&{
   highlightInOverlay?: boolean,
 };
 
-const createAccessibilityTreeToggleButton = (isActive: boolean): HTMLElement => {
-  const button = new Buttons.Button.Button();
-  const title =
-      isActive ? i18nString(UIStrings.switchToDomTreeView) : i18nString(UIStrings.switchToAccessibilityTreeView);
-  button.data = {
-    active: isActive,
-    variant: Buttons.Button.Variant.TOOLBAR,
-    iconName: 'person',
-    title,
-    jslogContext: 'toggle-accessibility-tree',
-  };
-  button.tabIndex = 0;
-  button.classList.add('axtree-button');
-  if (isActive) {
-    button.classList.add('active');
-  }
-  return button;
-};
-
 let elementsPanelInstance: ElementsPanel;
 
 export const DEFAULT_COMPUTED_STYLES_DEBOUNCE_MS = 100;
@@ -268,9 +238,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.mainContainer = document.createElement('div');
     this.domTreeContainer = document.createElement('div');
     const crumbsContainer = document.createElement('div');
-    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FULL_ACCESSIBILITY_TREE)) {
-      this.initializeFullAccessibilityTreeView();
-    }
     this.mainContainer.appendChild(this.domTreeContainer);
     stackElement.appendChild(this.mainContainer);
     stackElement.appendChild(crumbsContainer);
@@ -293,10 +260,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         .addChangeListener(this.domWordWrapSettingChanged.bind(this));
 
     crumbsContainer.id = 'elements-crumbs';
-    if (this.domTreeButton) {
-      this.accessibilityTreeView =
-          new AccessibilityTreeView(this.domTreeButton, new TreeOutline.TreeOutline.TreeOutline<AXTreeNodeData>());
-    }
+    this.accessibilityTreeView = new AccessibilityTreeView(new TreeOutline.TreeOutline.TreeOutline<AXTreeNodeData>());
     this.breadcrumbs = new ElementsComponents.ElementsBreadcrumbs.ElementsBreadcrumbs();
     this.breadcrumbs.addEventListener('breadcrumbsnodeselected', event => {
       this.crumbNodeSelected(event);
@@ -401,24 +365,22 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
   }
 
-  private initializeFullAccessibilityTreeView(): void {
-    this.accessibilityTreeButton = createAccessibilityTreeToggleButton(false);
-    this.accessibilityTreeButton.addEventListener('click', this.showAccessibilityTree.bind(this));
-
-    this.domTreeButton = createAccessibilityTreeToggleButton(true);
-    this.domTreeButton.addEventListener('click', this.showDOMTree.bind(this));
-
-    this.mainContainer.appendChild(this.accessibilityTreeButton);
-  }
-
   private showAccessibilityTree(): void {
     if (this.accessibilityTreeView) {
       this.splitWidget.setMainWidget(this.accessibilityTreeView);
+      const toggleAction = UI.ActionRegistry.ActionRegistry.instance().getAction('elements.toggle-a11y-tree');
+      if (toggleAction) {
+        toggleAction.setToggled(true);
+      }
     }
   }
 
   private showDOMTree(): void {
     this.splitWidget.setMainWidget(this.#searchableView);
+    const toggleAction = UI.ActionRegistry.ActionRegistry.instance().getAction('elements.toggle-a11y-tree');
+    if (toggleAction) {
+      toggleAction.setToggled(false);
+    }
     const selectedNode = this.selectedDOMNode();
     if (!selectedNode) {
       return;
@@ -427,9 +389,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   toggleAccessibilityTree(): void {
-    if (!this.domTreeButton) {
-      return;
-    }
     if (this.splitWidget.mainWidget() === this.accessibilityTreeView) {
       this.showDOMTree();
     } else {

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -299,7 +299,7 @@ export class StylePropertiesSection {
       const newRuleButton = new UI.Toolbar.ToolbarButton(
           i18nString(UIStrings.insertStyleRuleBelow), 'plus', undefined, 'elements.new-style-rule');
       newRuleButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.onNewRuleClick, this);
-      newRuleButton.setSize(Buttons.Button.Size.SMALL);
+      newRuleButton.setSize(Buttons.Button.Size.MICRO);
       newRuleButton.element.tabIndex = -1;
       if (!this.newStyleRuleToolbar) {
         this.newStyleRuleToolbar =

package/front_end/panels/elements/elements-meta.ts

@@ -367,6 +367,7 @@ UI.ActionRegistration.registerActionExtension({
   actionId: 'elements.toggle-a11y-tree',
   category: UI.ActionRegistration.ActionCategory.ELEMENTS,
   title: i18nLazyString(UIStrings.toggleA11yTree),
+  toggleable: true,
   async loadActionDelegate() {
     const Elements = await loadElementsModule();
     return new Elements.ElementsPanel.ElementsActionDelegate();

package/front_end/panels/elements/elementsPanel.css

@@ -1,4 +1,7 @@
-/*
+/* 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.
+ *
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
@@ -83,19 +86,6 @@ devtools-tree-outline {
   overflow: auto;
 }
 
-.axtree-button {
-  position: absolute;
-  top: var(--sys-size-8);
-  right: var(--sys-size-9);
-  background-color: var(--sys-color-cdt-base-container);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1;
-  border-radius: var(--sys-shape-corner-full);
-  box-shadow: var(--sys-elevation-level1);
-}
-
 .computed-styles-wrapper {
   flex-shrink: 0;
 }

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -19,7 +19,6 @@ import {
   HeapSnapshotObjectNode,
   HeapSnapshotRetainingObjectNode,
 } from './HeapSnapshotGridNodes.js';
-import type {HeapSnapshotProxy} from './HeapSnapshotProxy.js';
 import type {HeapProfileHeader} from './HeapSnapshotView.js';
 import type {DataDisplayDelegate} from './ProfileHeader.js';
 
@@ -132,7 +131,7 @@ class HeapSnapshotSortableDataGridBase extends DataGrid.DataGrid.DataGridImpl<He
 export class HeapSnapshotSortableDataGrid extends Common.ObjectWrapper
                                                       .eventMixin<EventTypes, typeof HeapSnapshotSortableDataGridBase>(
                                                           HeapSnapshotSortableDataGridBase) {
-  snapshot: HeapSnapshotProxy|null = null;
+  snapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy|null = null;
   override selectedNode: HeapSnapshotGridNode|null = null;
   readonly heapProfilerModelInternal: SDK.HeapProfilerModel.HeapProfilerModel|null;
   readonly dataDisplayDelegateInternal: DataDisplayDelegate;
@@ -170,7 +169,8 @@ export class HeapSnapshotSortableDataGrid extends Common.ObjectWrapper
     this.setRowContextMenuCallback(this.populateContextMenu.bind(this));
   }
 
-  async setDataSource(_snapshot: HeapSnapshotProxy, _nodeIndex: number): Promise<void> {
+  async setDataSource(_snapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy, _nodeIndex: number):
+      Promise<void> {
   }
 
   isFilteredOut(node: HeapSnapshotGridNode): boolean {
@@ -643,7 +643,9 @@ export class HeapSnapshotContainmentDataGrid extends HeapSnapshotSortableDataGri
     super(heapProfilerModel, dataDisplayDelegate, {displayName, columns});
   }
 
-  override async setDataSource(snapshot: HeapSnapshotProxy, nodeIndex: number, nodeId?: number): Promise<void> {
+  override async setDataSource(
+      snapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy, nodeIndex: number,
+      nodeId?: number): Promise<void> {
     this.snapshot = snapshot;
     const node = new HeapSnapshotModel.HeapSnapshotModel.Node(
         nodeId ?? -1, 'root', 0, nodeIndex || snapshot.rootNodeIndex, 0, 0, '');
@@ -651,7 +653,9 @@ export class HeapSnapshotContainmentDataGrid extends HeapSnapshotSortableDataGri
     void (this.rootNode() as HeapSnapshotGridNode).sort();
   }
 
-  createRootNode(snapshot: HeapSnapshotProxy, node: HeapSnapshotModel.HeapSnapshotModel.Node): HeapSnapshotObjectNode {
+  createRootNode(
+      snapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy,
+      node: HeapSnapshotModel.HeapSnapshotModel.Node): HeapSnapshotObjectNode {
     const fakeEdge = new HeapSnapshotModel.HeapSnapshotModel.Edge('', node, '', -1);
     return new HeapSnapshotObjectNode(this, snapshot, fakeEdge, null);
   }
@@ -684,8 +688,9 @@ export class HeapSnapshotRetainmentDataGrid extends HeapSnapshotContainmentDataG
     super(heapProfilerModel, dataDisplayDelegate, i18nString(UIStrings.heapSnapshotRetainment), columns);
   }
 
-  override createRootNode(snapshot: HeapSnapshotProxy, node: HeapSnapshotModel.HeapSnapshotModel.Node):
-      HeapSnapshotRetainingObjectNode {
+  override createRootNode(
+      snapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy,
+      node: HeapSnapshotModel.HeapSnapshotModel.Node): HeapSnapshotRetainingObjectNode {
     const fakeEdge = new HeapSnapshotModel.HeapSnapshotModel.Edge('', node, '', -1);
     return new HeapSnapshotRetainingObjectNode(this, snapshot, fakeEdge, null);
   }
@@ -719,7 +724,9 @@ export class HeapSnapshotRetainmentDataGrid extends HeapSnapshotContainmentDataG
     });
   }
 
-  override async setDataSource(snapshot: HeapSnapshotProxy, nodeIndex: number, nodeId?: number): Promise<void> {
+  override async setDataSource(
+      snapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy, nodeIndex: number,
+      nodeId?: number): Promise<void> {
     await super.setDataSource(snapshot, nodeIndex, nodeId);
     this.rootNode().expand();
     this.updateResetButtonVisibility();
@@ -824,7 +831,8 @@ export class HeapSnapshotConstructorsDataGrid extends HeapSnapshotViewportDataGr
     this.removeTopLevelNodes();
   }
 
-  override async setDataSource(snapshot: HeapSnapshotProxy, _nodeIndex: number): Promise<void> {
+  override async setDataSource(snapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy, _nodeIndex: number):
+      Promise<void> {
     this.snapshot = snapshot;
     if (this.profileIndex === -1) {
       void this.populateChildren();
@@ -904,7 +912,7 @@ export class HeapSnapshotConstructorsDataGrid extends HeapSnapshotViewportDataGr
 }
 
 export class HeapSnapshotDiffDataGrid extends HeapSnapshotViewportDataGrid {
-  baseSnapshot?: HeapSnapshotProxy;
+  baseSnapshot?: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy;
 
   constructor(
       heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, dataDisplayDelegate: DataDisplayDelegate) {
@@ -955,11 +963,12 @@ export class HeapSnapshotDiffDataGrid extends HeapSnapshotViewportDataGrid {
     }
   }
 
-  override async setDataSource(snapshot: HeapSnapshotProxy, _nodeIndex: number): Promise<void> {
+  override async setDataSource(snapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy, _nodeIndex: number):
+      Promise<void> {
     this.snapshot = snapshot;
   }
 
-  setBaseDataSource(baseSnapshot: HeapSnapshotProxy): void {
+  setBaseDataSource(baseSnapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy): void {
     this.baseSnapshot = baseSnapshot;
     this.removeTopLevelNodes();
     this.resetSortingCache();
@@ -1023,7 +1032,8 @@ export class AllocationDataGrid extends HeapSnapshotViewportDataGrid {
     this.linkifierInternal.reset();
   }
 
-  override async setDataSource(snapshot: HeapSnapshotProxy, _nodeIndex: number): Promise<void> {
+  override async setDataSource(snapshot: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy, _nodeIndex: number):
+      Promise<void> {
     this.snapshot = snapshot;
     this.topNodes = await this.snapshot.allocationTracesTops();
     this.populateChildren();