chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/network/components/RequestTrustTokensView.ts

@@ -2,17 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/report_view/report_view.js';
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as ReportView from '../../../ui/components/report_view/report_view.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import requestTrustTokensViewStyles from './RequestTrustTokensView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Section heading in the Trust Token tab
@@ -94,7 +98,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestTrust
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-trust-token-report`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #request: SDK.NetworkRequest.NetworkRequest;
 
@@ -123,10 +126,10 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`<${ReportView.ReportView.Report.litTagName}>
+    LitHtml.render(html`<devtools-report>
         ${this.#renderParameterSection()}
         ${this.#renderResultSection()}
-      </${ReportView.ReportView.Report.litTagName}>
+      </devtools-report>
     `, this.#shadow, {host: this});
     // clang-format on
   }
@@ -137,16 +140,15 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName} jslog=${VisualLogging.pane('trust-tokens').track({
+    return html`
+      <devtools-report-section-header jslog=${VisualLogging.pane('trust-tokens').track({
       resize: true,
-    })}>${i18nString(UIStrings.parameters)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
+    })}>${i18nString(UIStrings.parameters)}</devtools-report-section-header>
       ${renderRowWithCodeValue(i18nString(UIStrings.type), trustTokenParams.operation.toString())}
       ${this.#renderRefreshPolicy(trustTokenParams)}
       ${this.#renderIssuers(trustTokenParams)}
       ${this.#renderIssuerAndTopLevelOriginFromResult()}
-      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
-        ReportView.ReportView.ReportSectionDivider.litTagName}>
+      <devtools-report-divider></devtools-report-divider>
     `;
   }
 
@@ -162,14 +164,13 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.issuers)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+      <devtools-report-key>${i18nString(UIStrings.issuers)}</devtools-report-key>
+      <devtools-report-value>
         <ul class="issuers-list">
-          ${params.issuers.map(issuer => LitHtml.html`<li>${issuer}</li>`)}
+          ${params.issuers.map(issuer => html`<li>${issuer}</li>`)}
         </ul>
-      </${ReportView.ReportView.ReportValue.litTagName}>
+      </devtools-report-value>
     `;
   }
 
@@ -182,7 +183,7 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
+    return html`
       ${renderSimpleRowIfValuePresent(i18nString(UIStrings.topLevelOrigin), trustTokenResult.topLevelOrigin)}
       ${renderSimpleRowIfValuePresent(i18nString(UIStrings.issuer), trustTokenResult.issuerOrigin)}`;
   }
@@ -192,23 +193,20 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
     if (!trustTokenResult) {
       return LitHtml.nothing;
     }
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.result)}</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.status)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+      <devtools-report-section-header>${i18nString(UIStrings.result)}</devtools-report-section-header>
+      <devtools-report-key>${i18nString(UIStrings.status)}</devtools-report-key>
+      <devtools-report-value>
         <span>
-          <${IconButton.Icon.Icon.litTagName} class="status-icon"
-            .data=${getIconForStatusCode(trustTokenResult.status) as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}>
+          <devtools-icon class="status-icon"
+            .data=${getIconForStatusCode(trustTokenResult.status)}>
+          </devtools-icon>
           <strong>${getSimplifiedStatusTextForStatusCode(trustTokenResult.status)}</strong>
           ${getDetailedTextForStatusCode(trustTokenResult.status)}
         </span>
-      </${ReportView.ReportView.ReportValue.litTagName}>
+      </devtools-report-value>
       ${this.#renderIssuedTokenCount(trustTokenResult)}
-      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
-        ReportView.ReportView.ReportSectionDivider.litTagName}>
+      <devtools-report-divider></devtools-report-divider>
       `;
   }
 
@@ -279,17 +277,16 @@ function renderSimpleRowIfValuePresent<T>(key: string, value: T|undefined): LitH
     return LitHtml.nothing;
   }
 
-  return LitHtml.html`
-    <${ReportView.ReportView.ReportKey.litTagName}>${key}</${ReportView.ReportView.ReportKey.litTagName}>
-    <${ReportView.ReportView.ReportValue.litTagName}>${value}</${ReportView.ReportView.ReportValue.litTagName}>
+  return html`
+    <devtools-report-key>${key}</devtools-report-key>
+    <devtools-report-value>${value}</devtools-report-value>
   `;
 }
 
 function renderRowWithCodeValue(key: string, value: string): LitHtml.TemplateResult {
-  return LitHtml.html`
-    <${ReportView.ReportView.ReportKey.litTagName}>${key}</${ReportView.ReportView.ReportKey.litTagName}>
-    <${ReportView.ReportView.ReportValue.litTagName} class="code">${value}</${
-      ReportView.ReportView.ReportValue.litTagName}>
+  return html`
+    <devtools-report-key>${key}</devtools-report-key>
+    <devtools-report-value class="code">${value}</devtools-report-value>
   `;
 }
 

package/front_end/panels/network/components/ResponseHeaderSection.ts

@@ -6,7 +6,7 @@ import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
-import {type NameValue} from '../../../core/sdk/NetworkRequest.js';
+import type {NameValue} from '../../../core/sdk/NetworkRequest.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
@@ -27,7 +27,7 @@ import {
   type HeaderEditedEvent,
   type HeaderEditorDescriptor,
   type HeaderRemovedEvent,
-  HeaderSectionRow,
+  type HeaderSectionRow,
   type HeaderSectionRowData,
   isValidHeaderName,
 } from './HeaderSectionRow.js';
@@ -120,7 +120,6 @@ class ResponseHeaderSectionBase extends HTMLElement {
 }
 
 export class EarlyHintsHeaderSection extends ResponseHeaderSectionBase {
-  static readonly litTagName = LitHtml.literal`devtools-early-hints-header-section`;
   #request?: SDK.NetworkRequest.NetworkRequest;
 
   set data(data: ResponseHeaderSectionData) {
@@ -141,9 +140,9 @@ export class EarlyHintsHeaderSection extends ResponseHeaderSectionBase {
     // clang-format off
     render(html`
       ${this.headerDetails.map(header => html`
-        <${HeaderSectionRow.litTagName} .data=${{
+        <devtools-header-section-row .data=${{
         header,
-      } as HeaderSectionRowData}></${HeaderSectionRow.litTagName}>
+      } as HeaderSectionRowData}></devtools-header-section-row>
       `)}
     `, this.shadow, { host: this });
     // clang-format on
@@ -153,7 +152,6 @@ export class EarlyHintsHeaderSection extends ResponseHeaderSectionBase {
 customElements.define('devtools-early-hints-header-section', EarlyHintsHeaderSection);
 
 export class ResponseHeaderSection extends ResponseHeaderSectionBase {
-  static readonly litTagName = LitHtml.literal`devtools-response-header-section`;
   #request?: SDK.NetworkRequest.NetworkRequest;
   #headerEditors: HeaderEditorDescriptor[] = [];
   #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
@@ -540,24 +538,24 @@ export class ResponseHeaderSection extends ResponseHeaderSectionBase {
     // clang-format off
     render(html`
       ${headerDescriptors.map((header, index) => html`
-        <${HeaderSectionRow.litTagName}
+        <devtools-header-section-row
             .data=${{header} as HeaderSectionRowData}
             @headeredited=${this.#onHeaderEdited}
             @headerremoved=${this.#onHeaderRemoved}
             @enableheaderediting=${this.#onEnableHeaderEditingClick}
             data-index=${index}
             jslog=${VisualLogging.item('response-header')}
-        ></${HeaderSectionRow.litTagName}>
+        ></devtools-header-section-row>
       `)}
       ${this.#isEditingAllowed === EditingAllowedStatus.ENABLED ? html`
-        <${Buttons.Button.Button.litTagName}
+        <devtools-button
           class="add-header-button"
           .variant=${Buttons.Button.Variant.OUTLINED}
           .iconUrl=${plusIconUrl}
           @click=${this.#onAddHeaderClick}
           jslog=${VisualLogging.action('add-header').track({click: true})}>
           ${i18nString(UIStrings.addHeader)}
-        </${Buttons.Button.Button.litTagName}>
+        </devtools-button>
       ` : LitHtml.nothing}
     `, this.shadow, {host: this});
     // clang-format on

package/front_end/panels/network/components/WebBundleInfoView.ts

@@ -2,12 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/data_grid/data_grid.js';
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import {PanelUtils} from '../../../panels/utils/utils.js';
-import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -26,7 +29,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/components/WebBundleInf
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-web-bundle-info`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #webBundleInfo: Readonly<SDK.NetworkRequest.WebBundleInfo>;
   #webBundleName: Readonly<string>;
@@ -60,9 +62,9 @@ export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComp
             renderer(): LitHtml.TemplateResult {
               return html`
                 <div style="display: flex;">
-                  <${IconButton.Icon.Icon.litTagName} class="icon"
+                  <devtools-icon class="icon"
                     .data=${{...iconData, width: '20px'} as IconButton.Icon.IconData}>
-                  </${IconButton.Icon.Icon.litTagName}>
+                  </devtools-icon>
                   <span>${url}</span>
                 </div>`;
             },
@@ -73,21 +75,21 @@ export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComp
     render(
         html`
       <div class="header">
-        <${IconButton.Icon.Icon.litTagName} class="icon"
+        <devtools-icon class="icon"
           .data=${{color: 'var(--icon-default)', iconName: 'bundle', width: '20px'} as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
         <span>${this.#webBundleName}</span>
         <x-link href="https://web.dev/web-bundles/#explaining-web-bundles"
           jslog=${VisualLogging.link('webbundle-explainer').track({
           click: true,
         })}>
-          <${IconButton.Icon.Icon.litTagName} class="icon"
+          <devtools-icon class="icon"
             .data=${{color: 'var(--icon-default)', iconName: 'help', width: '16px'} as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}>
+          </devtools-icon>
         </x-link>
       </div>
       <div>
-        <${DataGrid.DataGrid.DataGrid.litTagName}
+        <devtools-data-grid
           .data=${{
           columns: [
             {
@@ -101,7 +103,7 @@ export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComp
           rows,
           activeSort: null,
         } as DataGrid.DataGrid.DataGridData}>
-        </${DataGrid.DataGrid.DataGrid.litTagName}>
+        </devtools-data-grid>
       </div>`,
         this.#shadow, {host: this});
   }

package/front_end/panels/network/networkConfigView.css

@@ -92,15 +92,23 @@
 }
 
 .network-config-ua-custom {
-  opacity: 50%;
   padding-bottom: 8px;
-}
 
-.network-config-ua-custom.checked {
-  opacity: 100%;
+  input,
+  devtools-user-agent-client-hints-form {
+    opacity: 38%;
+    pointer-events: none;
+  }
+
+  &.checked input,
+  &.checked devtools-user-agent-client-hints-form {
+    opacity: revert;
+    pointer-events: revert;
+  }
 }
 
-.client-hints-form {
+devtools-user-agent-client-hints-form {
+  display: block;
   margin-top: 14px;
   width: min(100%, 400px);
 }

package/front_end/panels/network/networkLogView.css

@@ -155,19 +155,36 @@
   color: var(--sys-color-error) !important;
 }
 
+.network-warning-row,
+.network-warning-row .network-cell-subtitle {
+  color: var(--sys-color-yellow);
+}
+
 .network-log-grid.data-grid tr.selected.network-error-row,
 .network-log-grid.data-grid tr.selected.network-error-row .network-cell-subtitle,
-.network-log-grid.data-grid tr.selected.network-error-row .network-dim-cell,
-.network-log-grid.data-grid:focus-within tr.selected.network-error-row .devtools-link,
+.network-log-grid.data-grid tr.selected.network-error-row .network-dim-cell {
+  color: var(--sys-color-error);
+}
+
+.network-log-grid.data-grid tr.selected.network-warning-row,
+.network-log-grid.data-grid tr.selected.network-warning-row .network-cell-subtitle,
+.network-log-grid.data-grid tr.selected.network-warning-row .network-dim-cell {
+  color: var(--sys-color-yellow);
+}
+
 .network-log-grid.data-grid:focus-within tr.selected.network-error-row,
+.network-log-grid.data-grid:focus-within tr.selected.network-error-row .devtools-link,
 .network-log-grid.data-grid:focus-within tr.selected.network-error-row .network-cell-subtitle,
 .network-log-grid.data-grid:focus-within tr.selected.network-error-row .network-dim-cell {
   color: var(--sys-color-error);
 }
 
-/* We are using a multitude of different selector specificity rules here, which
-   is incompatible with what stylelint requires as ordering of the rules. */
-/* stylelint-disable no-descending-specificity */
+.network-log-grid.data-grid:focus-within tr.selected.network-warning-row,
+.network-log-grid.data-grid:focus-within tr.selected.network-warning-row .devtools-link,
+.network-log-grid.data-grid:focus-within tr.selected.network-warning-row .network-cell-subtitle,
+.network-log-grid.data-grid:focus-within tr.selected.network-warning-row .network-dim-cell {
+  color: var(--sys-color-yellow);
+}
 
 .network-log-grid.data-grid tr.selected,
 .network-log-grid.data-grid tr.selected .network-cell-subtitle,
@@ -198,8 +215,6 @@
 .network-log-grid tr.highlighted-row {
   animation: network-row-highlight-fadeout 2s 0s;
 }
-/* See comment above why the rules were disabled */
-/* stylelint-enable no-descending-specificity */
 
 @keyframes network-row-highlight-fadeout {
   from {
@@ -212,8 +227,8 @@
 }
 
 /* Resource preview icons */
-/* These rules are grouped by type and therefore do not adhere to the ordering of stylelint */
-/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
+/* These rules are grouped by type */
+/* stylelint-disable no-duplicate-selectors */
 
 .network-log-grid.data-grid .icon.image {
   position: relative;
@@ -244,6 +259,15 @@
   vertical-align: sub;
 }
 
+.data-grid-data-grid-node .ai-button-container {
+  display: none;
+  float: right;
+}
+
+.data-grid-data-grid-node:hover .ai-button-container {
+  display: inline-flex;
+}
+
 .image-network-icon-preview {
   bottom: 0;
   left: 0;
@@ -271,10 +295,9 @@
 .network-log-grid.data-grid .trailing-link-icon {
   padding-left: 0.5ex;
 }
-/* stylelint-enable no-descending-specificity, no-duplicate-selectors */
+/* stylelint-enable no-duplicate-selectors */
 /* This is part of the large color block declared above, but should not be
    extracted out. */
-/* stylelint-disable-next-line no-descending-specificity */
 .network-dim-cell {
   color: var(--sys-color-token-subtle);
 }
@@ -356,8 +379,8 @@
   font-weight: normal;
   padding: 0 4px;
 }
+
 /* All network-waterfall-header rules are defined here instead of above */
-/* stylelint-disable-next-line no-descending-specificity */
 .network-waterfall-header .sort-order-icon-container {
   position: absolute;
   top: 1px;
@@ -410,9 +433,6 @@
     color: linktext;
   }
 
-  /* This is part of the large color block declared above, but should not be
-   extracted out. */
-  /* stylelint-disable no-descending-specificity */
   .network-log-grid.data-grid tbody tr.revealed.selected,
   .network-log-grid.data-grid:focus-within tbody tr.revealed.selected,
   .network-log-grid.data-grid:focus-within tr.selected .network-dim-cell,
@@ -422,7 +442,6 @@
   .network-waterfall-header:hover * {
     color: HighlightText;
   }
-  /* stylelint-enable no-descending-specificity */
 
   .network-log-grid {
     --color-grid-default: canvas;

package/front_end/panels/network/networkPanel.css

@@ -44,7 +44,8 @@
   --network-grid-navigation-color: var(--ref-palette-blue90);
   --network-grid-initiator-path-color: var(--ref-palette-green90);
   --network-grid-initiated-path-color: var(--ref-palette-error80);
-  --network-grid-focus-selected-color-has-error: var(--sys-color-error-container);
+  --network-grid-focus-selected-color-has-error: var(--sys-color-surface-error);
+  --network-grid-focus-selected-color-has-warning: var(--sys-color-surface-yellow);
   --network-grid-from-frame-color: var(--ref-palette-cyan95);
   --network-grid-is-product-color: var(--ref-palette-yellow95);
   --network-frame-divider-color: var(--ref-palette-yellow60);

package/front_end/panels/network/requestHTMLView.css

@@ -8,6 +8,7 @@
   box-shadow: var(--drop-shadow);
   /* We always want a white background, even in dark mode */
   background: var(--ref-palette-neutral100);
+  color-scheme: light;
   flex-grow: 1;
   margin: 20px;
 }

package/front_end/panels/profiler/BottomUpProfileDataGrid.ts

@@ -33,11 +33,11 @@
 // because a root node can represent itself AND an ancestor.
 
 import * as Platform from '../../core/platform/platform.js';
+import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
 import type * as UI from '../../ui/legacy/legacy.js';
 
-import {ProfileDataGridNode, ProfileDataGridTree, type Formatter} from './ProfileDataGrid.js';
-import {type TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
-import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
+import {type Formatter, ProfileDataGridNode, ProfileDataGridTree} from './ProfileDataGrid.js';
+import type {TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
 
 export interface NodeInfo {
   ancestor: CPUProfile.ProfileTreeModel.ProfileNode;

package/front_end/panels/profiler/HeapProfileView.ts

@@ -14,7 +14,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {Events, HeapTimelineOverview, type IdsRangeChangedEvent, type Samples} from './HeapTimelineOverview.js';
-import {type Formatter, type ProfileDataGridNode} from './ProfileDataGrid.js';
+import type {Formatter, ProfileDataGridNode} from './ProfileDataGrid.js';
 import {ProfileFlameChartDataProvider} from './ProfileFlameChartDataProvider.js';
 import {ProfileEvents, type ProfileHeader, ProfileType} from './ProfileHeader.js';
 import {ProfileView, WritableProfileHeader} from './ProfileView.js';

package/front_end/panels/profiler/HeapProfilerPanel.ts

@@ -7,8 +7,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {type HeapSnapshotView} from './HeapSnapshotView.js';
-import {type ProfileType} from './ProfileHeader.js';
+import type {HeapSnapshotView} from './HeapSnapshotView.js';
+import type {ProfileType} from './ProfileHeader.js';
 import {ProfilesPanel} from './ProfilesPanel.js';
 import {instance} from './ProfileTypeRegistry.js';
 

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -45,9 +45,9 @@ import {
   HeapSnapshotObjectNode,
   HeapSnapshotRetainingObjectNode,
 } from './HeapSnapshotGridNodes.js';
-import {type HeapSnapshotProxy} from './HeapSnapshotProxy.js';
-import {type HeapProfileHeader} from './HeapSnapshotView.js';
-import {type DataDisplayDelegate} from './ProfileHeader.js';
+import type {HeapSnapshotProxy} from './HeapSnapshotProxy.js';
+import type {HeapProfileHeader} from './HeapSnapshotView.js';
+import type {DataDisplayDelegate} from './ProfileHeader.js';
 
 const UIStrings = {
   /**
@@ -831,17 +831,18 @@ export class HeapSnapshotConstructorsDataGrid extends HeapSnapshotViewportDataGr
       return null;
     }
 
-    const className = await this.snapshot.nodeClassName(parseInt(id, 10));
-    if (!className) {
+    const classKey = await this.snapshot.nodeClassKey(parseInt(id, 10));
+    if (!classKey) {
       return null;
     }
 
-    const parent = this.topLevelNodes().find(classNode => classNode.name === className);
+    const topLevelNodes = this.topLevelNodes() as HeapSnapshotConstructorNode[];
+    const parent = topLevelNodes.find(classNode => classNode.classKey === classKey);
     if (!parent) {
       return null;
     }
 
-    const nodes = await (parent as HeapSnapshotConstructorNode).populateNodeBySnapshotObjectId(parseInt(id, 10));
+    const nodes = await parent.populateNodeBySnapshotObjectId(parseInt(id, 10));
     return nodes.length ? this.revealTreeNode(nodes) : null;
   }
 
@@ -886,10 +887,10 @@ export class HeapSnapshotConstructorsDataGrid extends HeapSnapshotViewportDataGr
     }
     this.removeTopLevelNodes();
     this.resetSortingCache();
-    for (const constructor in aggregates) {
+    for (const classKey in aggregates) {
       this.appendNode(
           (this.rootNode() as HeapSnapshotGridNode),
-          new HeapSnapshotConstructorNode(this, constructor, aggregates[constructor], nodeFilter));
+          new HeapSnapshotConstructorNode(this, classKey, aggregates[classKey], nodeFilter));
     }
     this.sortingChanged();
     this.lastFilter = nodeFilter;
@@ -1005,11 +1006,11 @@ export class HeapSnapshotDiffDataGrid extends HeapSnapshotViewportDataGrid {
     // then pass it to the second snapshot to calclulate the diff.
     const interfaceDefinitions = await this.snapshot.interfaceDefinitions();
     const aggregatesForDiff = await this.baseSnapshot.aggregatesForDiff(interfaceDefinitions);
-    const diffByClassName = await this.snapshot.calculateSnapshotDiff(this.baseSnapshot.uid, aggregatesForDiff);
+    const diffByClassKey = await this.snapshot.calculateSnapshotDiff(this.baseSnapshot.uid, aggregatesForDiff);
 
-    for (const className in diffByClassName) {
-      const diff = diffByClassName[className];
-      this.appendNode(this.rootNode(), new HeapSnapshotDiffNode(this, className, diff));
+    for (const classKey in diffByClassKey) {
+      const diff = diffByClassKey[classKey];
+      this.appendNode(this.rootNode(), new HeapSnapshotDiffNode(this, classKey, diff));
     }
     this.sortingChanged();
   }