chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -190,7 +190,7 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
       refreshCallback: undefined,
     });
     this.dataGrid.setRowContextMenuCallback(onRowContextMenu.bind(this));
-    this.dataGrid.setStickToBottom(true);
+    this.dataGrid.setEnableAutoScrollToBottom(true);
     this.dataGrid.setCellClass('websocket-frame-view-td');
     this.timeComparator =
         (resourceWebSocketFrameNodeTimeComparator as
@@ -422,7 +422,7 @@ export class ResourceWebSocketFrameNode extends DataGrid.SortableDataGrid.Sortab
       description = dataText;
 
     } else if (frame.opCode === OpCodes.BINARY_FRAME) {
-      length = Platform.NumberUtilities.bytesToString(Platform.StringUtilities.base64ToSize(frame.text));
+      length = i18n.ByteUtilities.bytesToString(Platform.StringUtilities.base64ToSize(frame.text));
       description = opCodeDescriptions[frame.opCode]();
 
     } else {
@@ -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/network/networkTimingTable.css

@@ -161,7 +161,8 @@ table.network-timing-table > tr:not(.network-timing-table-header):not(.network-t
   display: block;
 }
 
-.network-fetch-timing-bar-details {
+.network-fetch-timing-bar-details,
+.router-evaluation-timing-bar-details {
   padding-left: 11px;
   width: fit-content;
 }

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -658,7 +658,7 @@ export class MetricIndicator {
       case Format.PERCENT:
         return percentFormatter.format(value);
       case Format.BYTES:
-        return Platform.NumberUtilities.bytesToString(value);
+        return i18n.ByteUtilities.bytesToString(value);
       default:
         return numberFormatter.format(value);
     }

package/front_end/panels/profiler/HeapProfileView.ts

@@ -164,7 +164,7 @@ export class HeapProfileView extends ProfileView implements UI.SearchableView.Se
   onIdsRangeChanged(event: Common.EventTarget.EventTargetEvent<IdsRangeChangedEvent>): void {
     const {minId, maxId} = event.data;
     this.selectedSizeText.setText(
-        i18nString(UIStrings.selectedSizeS, {PH1: Platform.NumberUtilities.bytesToString(event.data.size)}));
+        i18nString(UIStrings.selectedSizeS, {PH1: i18n.ByteUtilities.bytesToString(event.data.size)}));
     this.setSelectionRange(minId, maxId);
   }
 
@@ -688,8 +688,8 @@ export class HeapFlameChartDataProvider extends ProfileFlameChartDataProvider {
       entryInfo.push({title, value});
     }
     pushEntryInfoRow(i18nString(UIStrings.name), UI.UIUtils.beautifyFunctionName(node.functionName));
-    pushEntryInfoRow(i18nString(UIStrings.selfSize), Platform.NumberUtilities.bytesToString(node.self));
-    pushEntryInfoRow(i18nString(UIStrings.totalSize), Platform.NumberUtilities.bytesToString(node.total));
+    pushEntryInfoRow(i18nString(UIStrings.selfSize), i18n.ByteUtilities.bytesToString(node.self));
+    pushEntryInfoRow(i18nString(UIStrings.totalSize), i18n.ByteUtilities.bytesToString(node.total));
     const linkifier = new Components.Linkifier.Linkifier();
     const link = linkifier.maybeLinkifyConsoleCallFrame(
         this.heapProfilerModel ? this.heapProfilerModel.target() : null, node.callFrame);

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

@@ -599,7 +599,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   onIdsRangeChanged(event: Common.EventTarget.EventTargetEvent<IdsRangeChangedEvent>): void {
     const {minId, maxId} = event.data;
     this.selectedSizeText.setText(
-        i18nString(UIStrings.selectedSizeS, {PH1: Platform.NumberUtilities.bytesToString(event.data.size)}));
+        i18nString(UIStrings.selectedSizeS, {PH1: i18n.ByteUtilities.bytesToString(event.data.size)}));
     if (this.constructorsDataGrid.snapshot) {
       this.constructorsDataGrid.setSelectionRange(minId, maxId);
     }
@@ -1746,7 +1746,7 @@ export class HeapProfileHeader extends ProfileHeader {
     if (!this.snapshotProxy) {
       return;
     }
-    this.updateStatus(Platform.NumberUtilities.bytesToString(this.snapshotProxy.totalSize), false);
+    this.updateStatus(i18n.ByteUtilities.bytesToString(this.snapshotProxy.totalSize), false);
   }
 
   transferChunk(chunk: string): void {

package/front_end/panels/profiler/HeapTimelineOverview.ts

@@ -15,8 +15,8 @@ export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventT
   overviewContainer: HTMLElement;
   overviewGrid: PerfUI.OverviewGrid.OverviewGrid;
   overviewCanvas: HTMLCanvasElement;
-  windowLeft: number;
-  windowRight: number;
+  windowLeftRatio: number;
+  windowRightRatio: number;
   readonly yScale: SmoothScale;
   readonly xScale: SmoothScale;
   profileSamples: Samples;
@@ -24,7 +24,7 @@ export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventT
   updateOverviewCanvas?: boolean;
   updateGridTimerId?: number;
   updateTimerId?: number|null;
-  windowWidth?: number;
+  windowWidthRatio?: number;
   constructor() {
     super();
     this.element.id = 'heap-recording-view';
@@ -40,9 +40,9 @@ export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventT
     this.overviewContainer.appendChild(this.overviewGrid.element);
     this.overviewGrid.addEventListener(PerfUI.OverviewGrid.Events.WINDOW_CHANGED, this.onWindowChanged, this);
 
-    this.windowLeft = 0.0;
-    this.windowRight = 1.0;
-    this.overviewGrid.setWindow(this.windowLeft, this.windowRight);
+    this.windowLeftRatio = 0.0;
+    this.windowRightRatio = 1.0;
+    this.overviewGrid.setWindowRatio(this.windowLeftRatio, this.windowRightRatio);
     this.yScale = new SmoothScale();
     this.xScale = new SmoothScale();
 
@@ -174,7 +174,7 @@ export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventT
     context.closePath();
 
     if (gridValue) {
-      const label = Platform.NumberUtilities.bytesToString(gridValue);
+      const label = i18n.ByteUtilities.bytesToString(gridValue);
       const labelPadding = 4;
       const labelX = 0;
       const labelY = gridY - 0.5;
@@ -210,9 +210,9 @@ export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventT
   }
 
   updateBoundaries(): void {
-    this.windowLeft = this.overviewGrid.windowLeft();
-    this.windowRight = this.overviewGrid.windowRight();
-    this.windowWidth = this.windowRight - this.windowLeft;
+    this.windowLeftRatio = this.overviewGrid.windowLeftRatio();
+    this.windowRightRatio = this.overviewGrid.windowRightRatio();
+    this.windowWidthRatio = this.windowRightRatio - this.windowLeftRatio;
   }
 
   update(): void {
@@ -237,8 +237,8 @@ export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventT
     const sizes = this.profileSamples.sizes;
     const startTime = timestamps[0];
     const totalTime = this.profileSamples.totalTime;
-    const timeLeft = startTime + totalTime * this.windowLeft;
-    const timeRight = startTime + totalTime * this.windowRight;
+    const timeLeft = startTime + totalTime * this.windowLeftRatio;
+    const timeRight = startTime + totalTime * this.windowRightRatio;
     const minIndex =
         Platform.ArrayUtilities.lowerBound(timestamps, timeLeft, Platform.ArrayUtilities.DEFAULT_COMPARATOR);
     const maxIndex =

package/front_end/panels/profiler/IsolateSelector.ts

@@ -4,7 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -172,7 +171,7 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
       total += isolate.usedHeapSize();
       trend += isolate.usedHeapSizeGrowRate();
     }
-    this.totalValueDiv.textContent = Platform.NumberUtilities.bytesToString(total);
+    this.totalValueDiv.textContent = i18n.ByteUtilities.bytesToString(total);
     IsolateSelector.formatTrendElement(trend, this.totalTrendDiv);
   }
 
@@ -182,7 +181,7 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
     if (Math.abs(changeRateBytesPerSecond) < changeRateThresholdBytesPerSecond) {
       return;
     }
-    const changeRateText = Platform.NumberUtilities.bytesToString(Math.abs(changeRateBytesPerSecond));
+    const changeRateText = i18n.ByteUtilities.bytesToString(Math.abs(changeRateBytesPerSecond));
     let changeText, changeLabel;
     if (changeRateBytesPerSecond > 0) {
       changeText = '\u2B06' + i18nString(UIStrings.changeRate, {PH1: changeRateText});
@@ -267,7 +266,7 @@ export class ListItem {
   }
 
   updateStats(): void {
-    this.heapDiv.textContent = Platform.NumberUtilities.bytesToString(this.isolate.usedHeapSize());
+    this.heapDiv.textContent = i18n.ByteUtilities.bytesToString(this.isolate.usedHeapSize());
     IsolateSelector.formatTrendElement(this.isolate.usedHeapSizeGrowRate(), this.trendDiv);
   }
 

package/front_end/panels/profiler/ProfileFlameChartDataProvider.ts

@@ -346,7 +346,7 @@ export class OverviewPane extends Common.ObjectWrapper.eventMixin<OverviewPaneEv
   selectRange(timeLeft: number, timeRight: number): void {
     const startTime = this.dataProvider.minimumBoundary();
     const totalTime = this.dataProvider.totalTime();
-    this.overviewGrid.setWindow((timeLeft - startTime) / totalTime, (timeRight - startTime) / totalTime);
+    this.overviewGrid.setWindowRatio((timeLeft - startTime) / totalTime, (timeRight - startTime) / totalTime);
   }
 
   onWindowChanged(event: Common.EventTarget.EventTargetEvent<PerfUI.OverviewGrid.WindowChangedWithPositionEvent>):