chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/network/NetworkPanel.ts

@@ -125,16 +125,29 @@ const UIStrings = {
    */
   importHarFile: 'Import `HAR` file...',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon download button in the
-   * Network Panel. HAR is a file format (HTTP Archive) and should not be translated. This action
-   * triggers the download of a HAR file.
+   * @description Tooltip text that appears when hovering over the download button in the Network
+   * panel, when the setting to allow generating HAR files with sensitive data is enabled. HAR is
+   * a file format (HTTP Archive) and should not be translated. This action triggers a context
+   * menu with two options, one to download HAR sanitized and one to download HAR with sensitive
+   * data.
+   */
+  exportHar: 'Export `HAR` (either sanitized or with sensitive data)',
+  /**
+   * @description Tooltip text that appears when hovering over the download button in the Network
+   * panel, when the setting to allow generating HAR files with sensitive data is disabled. HAR is
+   * a file format (HTTP Archive) and should not be translated. This action triggers the download
+   * of a HAR file.
+   *
+   * This string is also used as the first item in the context menu for the download button in
+   * the Network panel, when the setting to allow generating HAR files with sensitive data is
+   * enabled.
    */
   exportHarSanitized: 'Export `HAR` (sanitized)...',
   /**
-   * @description Context menu item in the export long click button of the Network panel, which is
-   * only available when the Network setting to allow generating HAR with sensitive data is active.
-   * HAR is a file format (HTTP Archive) and should not be translated. This action triggers the
-   * download of a HAR file with sensitive data included.
+   * @description Context menu item in the context menu for the download button of the Network panel,
+   * which is only available when the Network setting to allow generating HAR with sensitive data
+   * is active. HAR is a file format (HTTP Archive) and should not be translated. This action
+   * triggers the download of a HAR file with sensitive data included.
    */
   exportHarWithSensitiveData: 'Export `HAR` (with sensitive data)...',
   /**
@@ -470,6 +483,19 @@ export class NetworkPanel extends UI.Panel.Panel implements
         this.networkRecordFilmStripSetting, i18nString(UIStrings.captureScreenshotsWhenLoadingA),
         i18nString(UIStrings.captureScreenshots)));
 
+    const exportHarContextMenu = (contextMenu: UI.ContextMenu.ContextMenu): void => {
+      contextMenu.defaultSection().appendItem(
+          i18nString(UIStrings.exportHarSanitized),
+          this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: true}),
+          {jslogContext: 'export-har'},
+      );
+      contextMenu.defaultSection().appendItem(
+          i18nString(UIStrings.exportHarWithSensitiveData),
+          this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: false}),
+          {jslogContext: 'export-har-with-sensitive-data'},
+      );
+    };
+
     this.panelToolbar.appendSeparator();
     const importHarButton =
         new UI.Toolbar.ToolbarButton(i18nString(UIStrings.importHarFile), 'import', undefined, 'import-har');
@@ -482,35 +508,17 @@ export class NetworkPanel extends UI.Panel.Panel implements
         UI.Toolbar.ToolbarButton.Events.CLICK,
         this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: true}), this);
     this.panelToolbar.appendToolbarItem(exportHarButton);
+    const exportHarMenuButton = new UI.Toolbar.ToolbarMenuButton(
+        exportHarContextMenu, /* isIconDropdown */ true, /* useSoftMenu */ false, 'export-har-menu', 'download');
+    exportHarMenuButton.setTitle(i18nString(UIStrings.exportHar));
+    this.panelToolbar.appendToolbarItem(exportHarMenuButton);
 
-    // Support for exporting HAR (with sensitive data), which is added via a long-click
-    // context menu on the Export button in the Network panel.
-    // Checkout https://goo.gle/devtools-har-exclude-cookies-design for more details.
     const networkShowOptionsToGenerateHarWithSensitiveData = Common.Settings.Settings.instance().createSetting(
         'network.show-options-to-generate-har-with-sensitive-data', false);
-    let controller: UI.UIUtils.LongClickController|null = null;
     const updateShowOptionsToGenerateHarWithSensitiveData = (): void => {
-      exportHarButton.setLongClickable(networkShowOptionsToGenerateHarWithSensitiveData.get());
-      if (controller !== null) {
-        controller.dispose();
-        controller = null;
-      }
-      if (networkShowOptionsToGenerateHarWithSensitiveData.get()) {
-        controller = new UI.UIUtils.LongClickController(exportHarButton.element, event => {
-          const contextMenu = new UI.ContextMenu.ContextMenu(event);
-          contextMenu.defaultSection().appendItem(
-              i18nString(UIStrings.exportHarSanitized),
-              this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: true}),
-              {jslogContext: 'export-har'},
-          );
-          contextMenu.defaultSection().appendItem(
-              i18nString(UIStrings.exportHarWithSensitiveData),
-              this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: false}),
-              {jslogContext: 'export-har-with-sensitive-data'},
-          );
-          void contextMenu.show();
-        });
-      }
+      const showOptionsToGenerateHarWithSensitiveData = networkShowOptionsToGenerateHarWithSensitiveData.get();
+      exportHarButton.setVisible(!showOptionsToGenerateHarWithSensitiveData);
+      exportHarMenuButton.setVisible(showOptionsToGenerateHarWithSensitiveData);
     };
     networkShowOptionsToGenerateHarWithSensitiveData.addChangeListener(updateShowOptionsToGenerateHarWithSensitiveData);
     updateShowOptionsToGenerateHarWithSensitiveData();

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -341,7 +341,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     void coordinator.write('NetworkWaterfallColumn.render', () => this.update());
   }
 
-  update(scrollTop?: number, eventDividers?: Map<string, number[]>, nodes?: NetworkNode[]): void {
+  override update(scrollTop?: number, eventDividers?: Map<string, number[]>, nodes?: NetworkNode[]): void {
     if (scrollTop !== undefined && this.scrollTop !== scrollTop) {
       this.popoverHelper.hidePopover();
       this.scrollTop = scrollTop;

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

@@ -5,7 +5,10 @@
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
 
+import * as Network from './NetworkTimeCalculator.js';
 import * as RequestTimingView from './RequestTimingView.js';
 
 function createNetworkRequest(
@@ -53,7 +56,7 @@ function createNetworkRequest(
   return request;
 }
 
-describe('ResourceTimingView', () => {
+describeWithLocale('ResourceTimingView', () => {
   it('RequestTimeRanges has router evaluation field with SW router source as network', async () => {
     const request = createNetworkRequest(
         Protocol.Network.ServiceWorkerRouterSource.Network, Protocol.Network.ServiceWorkerRouterSource.Network);
@@ -133,4 +136,35 @@ describe('ResourceTimingView', () => {
     assert.strictEqual(cacheLookup?.start, timingInfo.requestTime + cacheLookupStart / 1000);
     assert.strictEqual(cacheLookup?.end, timingInfo.requestTime + timingInfo.sendStart / 1000);
   });
+
+  it('Timing table has router evaluation field with detail tabs', async () => {
+    const request = createNetworkRequest(
+        Protocol.Network.ServiceWorkerRouterSource.Network, Protocol.Network.ServiceWorkerRouterSource.Network);
+
+    const component = new RequestTimingView.RequestTimingView(request, new Network.NetworkTimeCalculator(true));
+    const div = document.createElement('div');
+    renderElementIntoDOM(div);
+    component.markAsRoot();
+    component.show(div);
+
+    // Test if we correctly set details element
+    const routerEvaluationDetailsElement = document.querySelector('.router-evaluation-timing-bar-details');
+    assert.isNotNull(routerEvaluationDetailsElement, 'router evaluation details does not exist');
+    assert.strictEqual(
+        routerEvaluationDetailsElement.childElementCount, 1,
+        'router evaluation details child element count does not match');
+    assert.isNotNull(routerEvaluationDetailsElement.firstElementChild, 'router evaluation first element is non null');
+
+    // Test if we correctly set the tree item inside shadow root
+    const shadowElement = routerEvaluationDetailsElement.firstElementChild.shadowRoot;
+    assert.isNotNull(shadowElement, 'shadow element does not exist');
+    const content = getCleanTextContentFromElements(shadowElement, '.network-fetch-details-treeitem');
+    assert.strictEqual(content.length, 2, 'does not match the tree item');
+
+    // Check the content of the view. Since the value is set from matched to actual,
+    // the order should be the same.
+    const networkString = String(Protocol.Network.ServiceWorkerRouterSource.Network);
+    assert.strictEqual(content[0], `Matched source: ${networkString}`, 'matched source does not match');
+    assert.strictEqual(content[1], `Actual source: ${networkString}`, 'actual source does not match');
+  });
 });

package/front_end/panels/network/RequestTimingView.ts

@@ -106,6 +106,14 @@ const UIStrings = {
    *@description Text in Signed Exchange Info View of the Network panel
    */
   label: 'Label',
+  /**
+   *@description Text in Request Timing View of the Network panel
+   */
+  routerEvaluation: 'Router Evaluation',
+  /**
+   *@description Text in Request Timing View of the Network panel
+   */
+  routerCacheLookup: 'Cache Lookup',
   /**
    *@description Inner element text content in Network Log View Columns of the Network panel
    */
@@ -217,6 +225,16 @@ const UIStrings = {
    *@description Text used to show that data was retrieved using ServiceWorker fallback code
    */
   fallbackCode: 'Fallback code',
+  /**
+   *@description Name of the specified source for SW static routing API.
+   *@example {network} PH1
+   */
+  routerMatchedSource: 'Matched source: {PH1}',
+  /**
+   *@description Name of the actually used source for SW static routing API.
+   *@example {network} PH1
+   */
+  routerActualSource: 'Actual source: {PH1}',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestTimingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -258,6 +276,10 @@ export class RequestTimingView extends UI.Widget.VBox {
         return i18nString(UIStrings.requestToServiceworker);
       case RequestTimeRangeNames.SERVICE_WORKER_PREPARATION:
         return i18nString(UIStrings.startup);
+      case RequestTimeRangeNames.SERVICE_WORKER_ROUTER_EVALUATION:
+        return i18nString(UIStrings.routerEvaluation);
+      case RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP:
+        return i18nString(UIStrings.routerCacheLookup);
       case RequestTimeRangeNames.SERVICE_WORKER_RESPOND_WITH:
         return i18nString(UIStrings.respondwith);
       case RequestTimeRangeNames.SSL:
@@ -490,6 +512,15 @@ export class RequestTimingView extends UI.Widget.VBox {
         timingBarTitleElement.setAttribute('role', 'switch');
         UI.ARIAUtils.setChecked(timingBarTitleElement, false);
       }
+
+      if (range.name === 'serviceworker-routerevaluation') {
+        timingBarTitleElement.classList.add('network-fetch-timing-bar-clickable');
+        tableElement.createChild('tr', 'router-evaluation-timing-bar-details');
+
+        timingBarTitleElement.setAttribute('tabindex', '0');
+        timingBarTitleElement.setAttribute('role', 'switch');
+        UI.ARIAUtils.setChecked(timingBarTitleElement, false);
+      }
     }
 
     if (!request.finished && !request.preserved) {
@@ -683,6 +714,67 @@ export class RequestTimingView extends UI.Widget.VBox {
     }
   }
 
+  private constructRouterEvaluationView(): void {
+    if (!this.tableElement) {
+      return;
+    }
+
+    const routerEvaluationDetailsElement = this.tableElement.querySelector('.router-evaluation-timing-bar-details');
+    if (!routerEvaluationDetailsElement) {
+      return;
+    }
+
+    routerEvaluationDetailsElement.classList.add('network-fetch-timing-bar-details-collapsed');
+
+    self.onInvokeElement(
+        this.tableElement, this.onToggleRouterEvaluationDetails.bind(this, routerEvaluationDetailsElement));
+
+    const detailsView = new UI.TreeOutline.TreeOutlineInShadow();
+    routerEvaluationDetailsElement.appendChild(detailsView.element);
+
+    const {serviceWorkerRouterInfo} = this.request;
+    if (!serviceWorkerRouterInfo) {
+      return;
+    }
+
+    const document = this.tableElement.ownerDocument;
+
+    // Add matched source type element
+    const matchedSourceTypeElement = document.createElement('div');
+    matchedSourceTypeElement.classList.add('network-fetch-details-treeitem');
+    const matchedSourceType = serviceWorkerRouterInfo.matchedSourceType;
+    const matchedSourceTypeString = String(matchedSourceType) || i18nString(UIStrings.unknown);
+    matchedSourceTypeElement.textContent = i18nString(UIStrings.routerMatchedSource, {PH1: matchedSourceTypeString});
+
+    const matchedSourceTypeTreeElement = new UI.TreeOutline.TreeElement(matchedSourceTypeElement);
+    detailsView.appendChild(matchedSourceTypeTreeElement);
+
+    // Add actual source type element
+    const actualSourceTypeElement = document.createElement('div');
+    actualSourceTypeElement.classList.add('network-fetch-details-treeitem');
+    const actualSourceType = serviceWorkerRouterInfo.actualSourceType;
+    const actualSourceTypeString = String(actualSourceType) || i18nString(UIStrings.unknown);
+    actualSourceTypeElement.textContent = i18nString(UIStrings.routerActualSource, {PH1: actualSourceTypeString});
+
+    const actualSourceTypeTreeElement = new UI.TreeOutline.TreeElement(actualSourceTypeElement);
+    detailsView.appendChild(actualSourceTypeTreeElement);
+  }
+
+  private onToggleRouterEvaluationDetails(routerEvaluationDetailsElement: Element, event: Event): void {
+    if (!event.target) {
+      return;
+    }
+
+    const target = (event.target as Element);
+    if (target.classList.contains('network-fetch-timing-bar-clickable')) {
+      const expanded = target.getAttribute('aria-checked') === 'true';
+      target.setAttribute('aria-checked', String(!expanded));
+
+      routerEvaluationDetailsElement.classList.toggle('network-fetch-timing-bar-details-collapsed');
+      routerEvaluationDetailsElement.classList.toggle('network-fetch-timing-bar-details-expanded');
+    }
+  }
+
   override wasShown(): void {
     this.request.addEventListener(SDK.NetworkRequest.Events.TIMING_CHANGED, this.refresh, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.refresh, this);
@@ -709,6 +801,10 @@ export class RequestTimingView extends UI.Widget.VBox {
     if (this.request.fetchedViaServiceWorker) {
       this.constructFetchDetailsView();
     }
+
+    if (this.request.serviceWorkerRouterInfo) {
+      this.constructRouterEvaluationView();
+    }
   }
 
   private boundaryChanged(): void {

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 {

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);
   }
 
@@ -675,28 +675,28 @@ export class HeapFlameChartDataProvider extends ProfileFlameChartDataProvider {
     return this.timelineDataInternal;
   }
 
-  override prepareHighlightedEntryInfo(entryIndex: number): Element|null {
+  override preparePopoverElement(entryIndex: number): Element|null {
     const node = this.entryNodes[entryIndex];
     if (!node) {
       return null;
     }
-    const entryInfo: {
+    const popoverInfo: {
       title: string,
       value: string,
     }[] = [];
-    function pushEntryInfoRow(title: string, value: string): void {
-      entryInfo.push({title, value});
+    function pushRow(title: string, value: string): void {
+      popoverInfo.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));
+    pushRow(i18nString(UIStrings.name), UI.UIUtils.beautifyFunctionName(node.functionName));
+    pushRow(i18nString(UIStrings.selfSize), i18n.ByteUtilities.bytesToString(node.self));
+    pushRow(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);
     if (link) {
-      pushEntryInfoRow(i18nString(UIStrings.url), (link.textContent as string));
+      pushRow(i18nString(UIStrings.url), (link.textContent as string));
     }
     linkifier.dispose();
-    return ProfileView.buildPopoverTable(entryInfo);
+    return ProfileView.buildPopoverTable(popoverInfo);
   }
 }

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,12 +210,12 @@ 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 {
+  override update(): void {
     this.updateTimerId = null;
     if (!this.isShowing()) {
       return;
@@ -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});
@@ -233,7 +232,7 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
         SDK.CPUProfilerModel.CPUProfilerModel, model && model.target().model(SDK.CPUProfilerModel.CPUProfilerModel));
   }
 
-  update(): void {
+  override update(): void {
     this.updateTotal();
     this.list.invalidateRange(0, this.items.length);
   }
@@ -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/LiveHeapProfileView.ts

@@ -204,7 +204,9 @@ export class LiveHeapProfileView extends UI.Widget.VBox {
     } while (this.currentPollId === pollId);
   }
 
-  update(isolates: SDK.IsolateManager.Isolate[], profiles: (Protocol.HeapProfiler.SamplingHeapProfile|null)[]): void {
+  override update(
+      isolates: SDK.IsolateManager.Isolate[] = [],
+      profiles: (Protocol.HeapProfiler.SamplingHeapProfile|null)[] = []): void {
     const dataByUrl = new Map<string, {
       size: number,
       isolates: Set<SDK.IsolateManager.Isolate>,

package/front_end/panels/profiler/ProfileFlameChartDataProvider.ts

@@ -93,7 +93,7 @@ export class ProfileFlameChartDataProvider implements PerfUI.FlameChart.FlameCha
     throw 'Not implemented.';
   }
 
-  prepareHighlightedEntryInfo(_entryIndex: number): Element|null {
+  preparePopoverElement(_entryIndex: number): Element|null {
     throw 'Not implemented.';
   }
 
@@ -208,7 +208,7 @@ export class ProfileFlameChart extends
     this.dispatchEventToListeners(PerfUI.FlameChart.Events.ENTRY_INVOKED, event.data);
   }
 
-  update(): void {
+  override update(): void {
     this.overviewPane.update();
     this.mainPane.update();
   }
@@ -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>):
@@ -373,7 +373,7 @@ export class OverviewPane extends Common.ObjectWrapper.eventMixin<OverviewPaneEv
     this.updateTimerId = this.element.window().requestAnimationFrame(this.update.bind(this));
   }
 
-  update(): void {
+  override update(): void {
     this.updateTimerId = 0;
     const timelineData = this.timelineData();
     if (!timelineData) {

package/front_end/panels/profiler/ProfileSidebarTreeElement.ts

@@ -35,8 +35,7 @@ export class ProfileSidebarTreeElement extends UI.TreeOutline.TreeElement {
   small: boolean;
   readonly dataDisplayDelegate: DataDisplayDelegate;
   profile: ProfileHeader;
-  saveLinkElement?: HTMLElement;
-  editing?: UI.InplaceEditor.Controller|null;
+  editing: UI.InplaceEditor.Controller|null;
   constructor(dataDisplayDelegate: DataDisplayDelegate, profile: ProfileHeader, className: string) {
     super('', false);
     this.iconElement = document.createElement('div');
@@ -66,6 +65,7 @@ export class ProfileSidebarTreeElement extends UI.TreeOutline.TreeElement {
     this.dataDisplayDelegate = dataDisplayDelegate;
     this.profile = profile;
     profile.addEventListener(ProfileHeaderEvents.UPDATE_STATUS, this.updateStatus, this);
+    this.editing = null;
   }
 
   updateStatus(event: Common.EventTarget.EventTargetEvent<StatusUpdate>): void {
@@ -93,17 +93,18 @@ export class ProfileSidebarTreeElement extends UI.TreeOutline.TreeElement {
     if (!container) {
       return;
     }
-    const config = new UI.InplaceEditor.Config(this.editingCommitted.bind(this), this.editingCancelled.bind(this));
+    const config =
+        new UI.InplaceEditor.Config(this.editingCommitted.bind(this), this.editingCancelled.bind(this), undefined);
     this.editing = UI.InplaceEditor.InplaceEditor.startEditing(container, config);
   }
 
-  editingCommitted(container: Element, newTitle: string): void {
-    delete this.editing;
+  editingCommitted(_container: Element, newTitle: string): void {
+    this.editing = null;
     this.profile.setTitle(newTitle);
   }
 
   editingCancelled(): void {
-    delete this.editing;
+    this.editing = null;
   }
 
   dispose(): void {

package/front_end/panels/profiler/ProfileView.ts

@@ -223,12 +223,12 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
     this.linkifierInternal = new Components.Linkifier.Linkifier(maxLinkLength);
   }
 
-  static buildPopoverTable(entryInfo: {
+  static buildPopoverTable(popoverInfo: {
     title: string,
     value: string,
   }[]): Element {
     const table = document.createElement('table');
-    for (const entry of entryInfo) {
+    for (const entry of popoverInfo) {
       const row = table.createChild('tr');
       row.createChild('td').textContent = entry.title;
       row.createChild('td').textContent = entry.value;
@@ -566,7 +566,7 @@ export class WritableProfileHeader extends ProfileHeader implements Common.Strin
     if (this.jsonifiedProfile) {
       // TODO(l10n): Is the '%' at the end of this string correct? 4MB% looks wrong
       this.updateStatus(
-          i18nString(UIStrings.loadingD, {PH1: Platform.NumberUtilities.bytesToString(this.jsonifiedProfile.length)}));
+          i18nString(UIStrings.loadingD, {PH1: i18n.ByteUtilities.bytesToString(this.jsonifiedProfile.length)}));
     }
   }
 

package/front_end/panels/profiler/profileLauncherView.css

@@ -29,7 +29,7 @@
   margin-left: 22px;
 }
 
-.profile-launcher-view-content p [is="dt-checkbox"] {
+.profile-launcher-view-content p dt-checkbox {
   display: flex;
 }
 

package/front_end/panels/profiler/profilesSidebarTree.css

@@ -129,7 +129,7 @@ ol.tree-outline {
   margin-top: var(--sys-size-6);
   line-height: var(--sys-size-8);
 
-  &:hover:not(:has(span[is="dt-checkbox"])) .selection {
+  &:hover:not(:has(dt-checkbox)) .selection {
     background-color: transparent;
   }
 }