chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -505,6 +505,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     }
   }
 
+  // Used when `network-color-code-resource-types` is true
   private getSimplifiedBarRange(request: SDK.NetworkRequest.NetworkRequest, borderOffset: number): {
     start: number,
     mid: number,
@@ -519,6 +520,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     };
   }
 
+  // Used when `network-color-code-resource-types` is true
   private buildSimplifiedBarLayers(context: CanvasRenderingContext2D, node: NetworkNode, y: number): void {
     const request = node.request();
     if (!request) {

package/front_end/panels/network/RequestResponseView.test.ts

@@ -42,7 +42,7 @@ describeWithEnvironment('RequestResponseView', () => {
     component.detach();
   });
 
-  it('shows the RequestBinaryResponseView for binary content', async () => {
+  it('shows the BinaryResourceView for binary content', async () => {
     const request = SDK.NetworkRequest.NetworkRequest.create(
         'requestId' as Protocol.Network.RequestId,
         'http://devtools-frontend.test/image.png' as Platform.DevToolsPath.UrlString,
@@ -60,7 +60,7 @@ describeWithEnvironment('RequestResponseView', () => {
     component.show(document.body);
     const widget = await showPreviewSpy.returnValues[0];
 
-    assert.instanceOf(widget, Network.RequestBinaryResponseView.RequestBinaryResponseView);
+    assert.instanceOf(widget, Network.BinaryResourceView.BinaryResourceView);
 
     await raf();
     component.detach();

package/front_end/panels/network/RequestResponseView.ts

@@ -37,7 +37,7 @@ import * as SourceFrame from '../../ui/legacy/components/source_frame/source_fra
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {RequestBinaryResponseView} from './RequestBinaryResponseView.js';
+import {BinaryResourceView} from './BinaryResourceView.js';
 
 const UIStrings = {
   /**
@@ -63,18 +63,14 @@ export class RequestResponseView extends UI.Widget.VBox {
     this.contentViewPromise = null;
   }
 
-  static async sourceViewForRequest(request: SDK.NetworkRequest.NetworkRequest): Promise<UI.Widget.Widget|null> {
+  static #sourceViewForRequest(
+      request: SDK.NetworkRequest.NetworkRequest,
+      contentData: TextUtils.StreamingContentData.StreamingContentData): UI.Widget.Widget|null {
     let sourceView = requestToSourceView.get(request);
     if (sourceView !== undefined) {
       return sourceView;
     }
 
-    const contentData = await request.requestStreamingContent();
-    if (TextUtils.StreamingContentData.isError(contentData)) {
-      requestToSourceView.delete(request);
-      return null;
-    }
-
     let mimeType;
     // If the main document is of type JSON (or any JSON subtype), do not use the more generic canonical MIME type,
     // which would prevent the JSON from being pretty-printed. See https://crbug.com/406900
@@ -96,7 +92,7 @@ export class RequestResponseView extends UI.Widget.VBox {
       // Note: Even though WASM is binary data, the source view will disassemble it and show a text representation.
       sourceView = SourceFrame.ResourceSourceFrame.ResourceSourceFrame.createSearchableView(request, mimeType);
     } else {
-      sourceView = new RequestBinaryResponseView(contentData);
+      sourceView = new BinaryResourceView(contentData, request.url(), request.resourceType());
     }
 
     requestToSourceView.set(request, sourceView);
@@ -126,7 +122,7 @@ export class RequestResponseView extends UI.Widget.VBox {
       return new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.failedToLoadResponseData) + ': ' + contentData.error);
     }
 
-    const sourceView = await RequestResponseView.sourceViewForRequest(this.request);
+    const sourceView = RequestResponseView.#sourceViewForRequest(this.request, contentData);
     if (!sourceView || this.request.statusCode === 204) {
       return new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.thisRequestHasNoResponseData));
     }

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -469,7 +469,9 @@ export class ResourceWebSocketFrameNode extends DataGrid.SortableDataGrid.Sortab
     if (!this.binaryViewInternal) {
       if (this.dataTextInternal.length > 0) {
         this.binaryViewInternal = new BinaryResourceView(
-            this.dataTextInternal, Platform.DevToolsPath.EmptyUrlString, Common.ResourceType.resourceTypes.WebSocket);
+            TextUtils.StreamingContentData.StreamingContentData.from(
+                new TextUtils.ContentData.ContentData(this.dataTextInternal, true, 'applicaiton/octet-stream')),
+            Platform.DevToolsPath.EmptyUrlString, Common.ResourceType.resourceTypes.WebSocket);
       }
     }
     return this.binaryViewInternal;

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

@@ -12,11 +12,10 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as ClientVariations from '../../../third_party/chromium/client-variations/client-variations.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import type {EditableSpan, EditableSpanData} from './EditableSpan.js';
+import type {EditableSpan} from './EditableSpan.js';
 import headerSectionRowStyles from './HeaderSectionRow.css.js';
 
 const {render, html} = LitHtml;
@@ -192,7 +191,7 @@ export class HeaderSectionRow extends HTMLElement {
               width: '16px',
               height: '16px',
               color: 'var(--icon-error)',
-            } as IconButton.Icon.IconData}>
+            }}>
             </devtools-icon>` : LitHtml.nothing
           }
           ${isHeaderNameEditable && !this.#header.isDeleted ?
@@ -201,7 +200,7 @@ export class HeaderSectionRow extends HTMLElement {
               @keydown=${this.#onKeyDown}
               @input=${this.#onHeaderNameEdit}
               @paste=${this.#onHeaderNamePaste}
-              .data=${{value: this.#header.name} as EditableSpanData}
+              .data=${{value: this.#header.name}}
             ></devtools-editable-span>` :
             this.#header.name}:
         </div>
@@ -217,7 +216,7 @@ export class HeaderSectionRow extends HTMLElement {
             width: '16px',
             height: '16px',
             color: 'var(--icon-default)',
-          } as IconButton.Icon.IconData}>
+          }}>
           </devtools-icon>` : LitHtml.nothing
         }
       </div>
@@ -266,7 +265,7 @@ export class HeaderSectionRow extends HTMLElement {
         @input=${this.#onHeaderValueEdit}
         @paste=${this.#onHeaderValueEdit}
         @keydown=${this.#onKeyDown}
-        .data=${{value: this.#header.value || ''} as EditableSpanData}
+        .data=${{value: this.#header.value || ''}}
       ></devtools-editable-span>
       ${this.#maybeRenderHeaderValueSuffix(this.#header)}
       <devtools-button
@@ -315,10 +314,10 @@ export class HeaderSectionRow extends HTMLElement {
             color: 'var(--icon-warning)',
             width: '16px',
             height: '16px',
-          } as IconButton.Icon.IconData}>
+          }}>
         </devtools-icon>
       `;
-      // clang-format on
+            // clang-format on
     }
     return LitHtml.nothing;
   }
@@ -359,12 +358,12 @@ export class HeaderSectionRow extends HTMLElement {
             color: 'var(--icon-warning)',
             width: '16px',
             height: '16px',
-          } as IconButton.Icon.IconData}>
+          }}>
           </devtools-icon
           >${i18nString(UIStrings.learnMoreInTheIssuesTab)}
         </div>
       `;
-      // clang-format on
+            // clang-format on
     }
     if (blockedDetails?.link) {
       // Disabled until https://crbug.com/1079231 is fixed.
@@ -376,12 +375,12 @@ export class HeaderSectionRow extends HTMLElement {
             color: 'var(--icon-link)',
             width: '20px',
             height: '20px',
-          } as IconButton.Icon.IconData}>
+          }}>
           </devtools-icon
           >${i18nString(UIStrings.learnMore)}
         </x-link>
       `;
-      // clang-format on
+            // clang-format on
     }
     return LitHtml.nothing;
   }

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

@@ -7,16 +7,11 @@ import '../../../ui/legacy/legacy.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as NetworkForward from '../forward/forward.js';
 
-import {
-  EditingAllowedStatus,
-  type HeaderDescriptor,
-  type HeaderSectionRowData,
-} from './HeaderSectionRow.js';
+import {EditingAllowedStatus, type HeaderDescriptor} from './HeaderSectionRow.js';
 import requestHeaderSectionStyles from './RequestHeaderSection.css.js';
 
 const {render, html} = LitHtml;
@@ -88,7 +83,7 @@ export class RequestHeaderSection extends HTMLElement {
       ${this.#maybeRenderProvisionalHeadersWarning()}
       ${this.#headers.map(header => html`
         <devtools-header-section-row
-          .data=${{header} as HeaderSectionRowData}
+          .data=${{header}}
           jslog=${VisualLogging.item('request-header')}
         ></devtools-header-section-row>
       `)}
@@ -120,14 +115,14 @@ export class RequestHeaderSection extends HTMLElement {
                 color: 'var(--icon-warning)',
                 width: '16px',
                 height: '16px',
-              } as IconButton.Icon.IconData}>
+              }}>
             </devtools-icon>
             ${cautionText} <x-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
       </div>
     `;
-    // clang-format on
+                // clang-format on
   }
 }
 

package/front_end/panels/network/components/RequestHeadersView.css

@@ -166,6 +166,13 @@ x-link .inline-icon { /* stylelint-disable-line selector-type-no-unknown */
   z-index: 1;
 }
 
+summary label {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  gap: var(--sys-size-3);
+}
+
 summary label input[type="checkbox"] {
   margin-top: 1px;
 }

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

@@ -199,7 +199,7 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
       <devtools-report-value>
         <span>
           <devtools-icon class="status-icon"
-            .data=${getIconForStatusCode(trustTokenResult.status) as IconButton.Icon.IconData}>
+            .data=${getIconForStatusCode(trustTokenResult.status)}>
           </devtools-icon>
           <strong>${getSimplifiedStatusTextForStatusCode(trustTokenResult.status)}</strong>
           ${getDetailedTextForStatusCode(trustTokenResult.status)}

package/front_end/panels/network/network.ts

@@ -41,7 +41,6 @@ import * as NetworkPanel from './NetworkPanel.js';
 import * as NetworkSearchScope from './NetworkSearchScope.js';
 import * as NetworkTimeCalculator from './NetworkTimeCalculator.js';
 import * as NetworkWaterfallColumn from './NetworkWaterfallColumn.js';
-import * as RequestBinaryResponseView from './RequestBinaryResponseView.js';
 import * as RequestCookiesView from './RequestCookiesView.js';
 import * as RequestHTMLView from './RequestHTMLView.js';
 import * as RequestInitiatorView from './RequestInitiatorView.js';
@@ -68,7 +67,6 @@ export {
   NetworkSearchScope,
   NetworkTimeCalculator,
   NetworkWaterfallColumn,
-  RequestBinaryResponseView,
   RequestCookiesView,
   RequestHTMLView,
   RequestInitiatorView,

package/front_end/panels/network/networkConfigView.css

@@ -85,10 +85,6 @@
 .network-config-ua .chrome-select {
   width: calc(100% - 20px);
   max-width: 250px;
-
-  &:disabled {
-    opacity: unset;
-  }
 }
 
 .network-config-ua span[is="dt-radio"] {
@@ -97,10 +93,15 @@
 
 .network-config-ua-custom {
   padding-bottom: 8px;
-  opacity: 38%;
-  pointer-events: none;
 
-  &.checked {
+  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;
   }

package/front_end/panels/network/networkLogView.css

@@ -155,16 +155,37 @@
   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);
 }
 
+.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,
 .network-log-grid.data-grid tr.selected .network-dim-cell {
@@ -238,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;

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/profiler/HeapSnapshotDataGrids.ts

@@ -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();
   }

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -1110,24 +1110,26 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
   readonly count: number;
   readonly shallowSize: number;
   readonly retainedSize: number;
+  readonly classKey: string;
 
   constructor(
-      dataGrid: HeapSnapshotConstructorsDataGrid, className: string,
+      dataGrid: HeapSnapshotConstructorsDataGrid, classKey: string,
       aggregate: HeapSnapshotModel.HeapSnapshotModel.Aggregate,
       nodeFilter: HeapSnapshotModel.HeapSnapshotModel.NodeFilter) {
     super(dataGrid, aggregate.count > 0);
-    this.nameInternal = className;
+    this.nameInternal = aggregate.name;
     this.nodeFilter = nodeFilter;
     this.distance = aggregate.distance;
     this.count = aggregate.count;
     this.shallowSize = aggregate.self;
     this.retainedSize = aggregate.maxRet;
+    this.classKey = classKey;
 
     const snapshot = (dataGrid.snapshot as HeapSnapshotProxy);
     const retainedSizePercent = this.retainedSize / snapshot.totalSize * 100.0;
     const shallowSizePercent = this.shallowSize / snapshot.totalSize * 100.0;
     this.data = {
-      object: className,
+      object: this.nameInternal,
       count: Platform.NumberUtilities.withThousandsSeparator(this.count),
       distance: this.toUIDistance(this.distance),
       shallowSize: Platform.NumberUtilities.withThousandsSeparator(this.shallowSize),
@@ -1143,7 +1145,7 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
 
   override createProvider(): HeapSnapshotProviderProxy {
     return (this.dataGridInternal.snapshot as HeapSnapshotProxy)
-               .createNodesProviderForClass(this.nameInternal, this.nodeFilter) as HeapSnapshotProviderProxy;
+               .createNodesProviderForClass(this.classKey, this.nodeFilter) as HeapSnapshotProviderProxy;
   }
 
   async populateNodeBySnapshotObjectId(snapshotObjectId: number): Promise<HeapSnapshotGridNode[]> {
@@ -1278,12 +1280,13 @@ export class HeapSnapshotDiffNode extends HeapSnapshotGridNode {
   readonly removedSize: number;
   readonly sizeDelta: number;
   readonly deletedIndexes: number[];
+  readonly classKey: string;
 
   constructor(
-      dataGrid: HeapSnapshotDiffDataGrid, className: string,
+      dataGrid: HeapSnapshotDiffDataGrid, classKey: string,
       diffForClass: HeapSnapshotModel.HeapSnapshotModel.DiffForClass) {
     super(dataGrid, true);
-    this.nameInternal = className;
+    this.nameInternal = diffForClass.name;
     this.addedCount = diffForClass.addedCount;
     this.removedCount = diffForClass.removedCount;
     this.countDelta = diffForClass.countDelta;
@@ -1291,8 +1294,9 @@ export class HeapSnapshotDiffNode extends HeapSnapshotGridNode {
     this.removedSize = diffForClass.removedSize;
     this.sizeDelta = diffForClass.sizeDelta;
     this.deletedIndexes = diffForClass.deletedIndexes;
+    this.classKey = classKey;
     this.data = {
-      object: className,
+      object: this.nameInternal,
       addedCount: Platform.NumberUtilities.withThousandsSeparator(this.addedCount),
       removedCount: Platform.NumberUtilities.withThousandsSeparator(this.removedCount),
       countDelta: this.signForDelta(this.countDelta) +
@@ -1313,7 +1317,7 @@ export class HeapSnapshotDiffNode extends HeapSnapshotGridNode {
     if (tree.snapshot === null || tree.baseSnapshot === undefined || tree.baseSnapshot.uid === undefined) {
       throw new Error('Data sources have not been set correctly');
     }
-    const addedNodesProvider = tree.snapshot.createAddedNodesProvider(tree.baseSnapshot.uid, this.nameInternal);
+    const addedNodesProvider = tree.snapshot.createAddedNodesProvider(tree.baseSnapshot.uid, this.classKey);
     const deletedNodesProvider = tree.baseSnapshot.createDeletedNodesProvider(this.deletedIndexes);
     if (!addedNodesProvider || !deletedNodesProvider) {
       throw new Error('Failed to create node providers');

package/front_end/panels/profiler/HeapSnapshotProxy.ts

@@ -314,8 +314,8 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     return this.callMethodPromise('calculateSnapshotDiff', baseSnapshotId, baseSnapshotAggregates);
   }
 
-  nodeClassName(snapshotObjectId: number): Promise<string|null> {
-    return this.callMethodPromise('nodeClassName', snapshotObjectId);
+  nodeClassKey(snapshotObjectId: number): Promise<string|null> {
+    return this.callMethodPromise('nodeClassKey', snapshotObjectId);
   }
 
   createEdgesProvider(nodeIndex: number): HeapSnapshotProviderProxy {
@@ -326,8 +326,8 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     return this.callFactoryMethod('createRetainingEdgesProvider', HeapSnapshotProviderProxy, nodeIndex);
   }
 
-  createAddedNodesProvider(baseSnapshotId: string, className: string): HeapSnapshotProviderProxy {
-    return this.callFactoryMethod('createAddedNodesProvider', HeapSnapshotProviderProxy, baseSnapshotId, className);
+  createAddedNodesProvider(baseSnapshotId: string, classKey: string): HeapSnapshotProviderProxy {
+    return this.callFactoryMethod('createAddedNodesProvider', HeapSnapshotProviderProxy, baseSnapshotId, classKey);
   }
 
   createDeletedNodesProvider(nodeIndexes: number[]): HeapSnapshotProviderProxy {
@@ -338,9 +338,9 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     return this.callFactoryMethod('createNodesProvider', HeapSnapshotProviderProxy, filter);
   }
 
-  createNodesProviderForClass(className: string, nodeFilter: HeapSnapshotModel.HeapSnapshotModel.NodeFilter):
+  createNodesProviderForClass(classKey: string, nodeFilter: HeapSnapshotModel.HeapSnapshotModel.NodeFilter):
       HeapSnapshotProviderProxy {
-    return this.callFactoryMethod('createNodesProviderForClass', HeapSnapshotProviderProxy, className, nodeFilter);
+    return this.callFactoryMethod('createNodesProviderForClass', HeapSnapshotProviderProxy, classKey, nodeFilter);
   }
 
   allocationTracesTops(): Promise<HeapSnapshotModel.HeapSnapshotModel.SerializedAllocationNode[]> {

package/front_end/panels/protocol_monitor/components/JSONEditor.ts

@@ -1,16 +1,15 @@
 // Copyright 2023 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import './Toolbar.js';
 import '../../../ui/components/icon_button/icon_button.js';
 import '../../../ui/components/menus/menus.js';
+import './Toolbar.js';
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as SuggestionInput from '../../../ui/components/suggestion_input/suggestion_input.js';
 import * as UI from '../../../ui/legacy/legacy.js';
@@ -892,10 +891,11 @@ export class JSONEditor extends LitElement {
       color: 'var(--icon-warning)',
       width: '14px',
       height: '14px',
-    } as IconButton.Icon.IconData}
+      }
+      }
     class=${classMap({
-      'warning-icon': true,
-    })}
+        'warning-icon': true,
+      })}
   >
   </devtools-icon>`;
   }

package/front_end/panels/recorder/components/StartView.ts

@@ -2,15 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/legacy/legacy.js';
-import '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
 import '../../../ui/components/panel_feedback/panel_feedback.js';
+import '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
+import '../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import type * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Actions from '../recorder-actions/recorder-actions.js';
@@ -108,14 +107,14 @@ export class StartView extends HTMLElement {
           feedbackUrl: FEEDBACK_URL,
           quickStartUrl: DOC_URL,
           quickStartLinkText: i18nString(UIStrings.quickStart),
-        } as PanelFeedback.PanelFeedback.PanelFeedbackData
+        }
       }>
           </devtools-panel-feedback>
           <div class="align-right">
             <devtools-feedback-button .data=${
         {
           feedbackUrl: FEEDBACK_URL,
-        } as PanelFeedback.FeedbackButton.FeedbackButtonData
+        }
       }>
             </devtools-feedback-button>
           </div>

package/front_end/panels/recorder/components/recordingView.css

@@ -300,12 +300,9 @@
   align-items: center;
 }
 
-.editable-setting devtools-select-menu {
-  height: 32px;
-}
-
 .editable-setting .devtools-text-input {
   width: fit-content;
+  height: var(--sys-size-9);
 }
 
 .wrapping-label {