chrome-devtools-frontend 1.0.1512147 → 1.0.1513662

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -169,7 +169,7 @@ export class NetworkLogViewColumns {
   private readonly popupLinkifier: Components.Linkifier.Linkifier;
   private calculatorsMap: Map<string, NetworkTimeCalculator.NetworkTimeCalculator>;
   private lastWheelTime: number;
-  private dataGridInternal!: DataGrid.SortableDataGrid.SortableDataGrid<NetworkNode>;
+  #dataGrid!: DataGrid.SortableDataGrid.SortableDataGrid<NetworkNode>;
   private splitWidget!: UI.SplitWidget.SplitWidget;
   private waterfallColumn!: NetworkWaterfallColumn;
   private activeScroller!: Element;
@@ -269,23 +269,23 @@ export class NetworkLogViewColumns {
     this.popoverHelper = new UI.PopoverHelper.PopoverHelper(
         this.networkLogView.element, this.getPopoverRequest.bind(this), 'network.initiator-stacktrace');
     this.popoverHelper.setTimeout(300, 300);
-    this.dataGridInternal = new DataGrid.SortableDataGrid.SortableDataGrid<NetworkNode>(({
+    this.#dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid<NetworkNode>(({
       displayName: (i18nString(UIStrings.networkLog) as string),
       columns: this.columns.map(NetworkLogViewColumns.convertToDataGridDescriptor),
       deleteCallback: undefined,
       refreshCallback: undefined,
     }));
-    this.dataGridScroller = (this.dataGridInternal.scrollContainer as HTMLDivElement);
+    this.dataGridScroller = (this.#dataGrid.scrollContainer as HTMLDivElement);
 
     this.updateColumns();
-    this.dataGridInternal.addEventListener(DataGrid.DataGrid.Events.SORTING_CHANGED, this.sortHandler, this);
-    this.dataGridInternal.setHeaderContextMenuCallback(this.innerHeaderContextMenu.bind(this));
+    this.#dataGrid.addEventListener(DataGrid.DataGrid.Events.SORTING_CHANGED, this.sortHandler, this);
+    this.#dataGrid.setHeaderContextMenuCallback(this.innerHeaderContextMenu.bind(this));
 
     this.activeWaterfallSortId = WaterfallSortIds.StartTime;
-    this.dataGridInternal.markColumnAsSortedBy(INITIAL_SORT_COLUMN, DataGrid.DataGrid.Order.Ascending);
+    this.#dataGrid.markColumnAsSortedBy(INITIAL_SORT_COLUMN, DataGrid.DataGrid.Order.Ascending);
 
     this.splitWidget = new UI.SplitWidget.SplitWidget(true, true, 'network-panel-split-view-waterfall', 200);
-    const widget = this.dataGridInternal.asWidget();
+    const widget = this.#dataGrid.asWidget();
     widget.setMinimumSize(150, 0);
     this.splitWidget.setMainWidget(widget);
   }
@@ -306,11 +306,11 @@ export class NetworkLogViewColumns {
     this.waterfallScroller = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-v-scroll');
     this.waterfallScrollerContent = this.waterfallScroller.createChild('div', 'network-waterfall-v-scroll-content');
 
-    this.dataGridInternal.addEventListener(DataGrid.DataGrid.Events.PADDING_CHANGED, () => {
+    this.#dataGrid.addEventListener(DataGrid.DataGrid.Events.PADDING_CHANGED, () => {
       this.waterfallScrollerWidthIsStale = true;
       this.syncScrollers();
     });
-    this.dataGridInternal.addEventListener(
+    this.#dataGrid.addEventListener(
         DataGrid.ViewportDataGrid.Events.VIEWPORT_CALCULATED, this.redrawWaterfallColumn.bind(this));
 
     this.createWaterfallHeader();
@@ -374,7 +374,7 @@ export class NetworkLogViewColumns {
       return;
     }
     this.waterfallScrollerContent.style.height =
-        this.dataGridScroller.scrollHeight - this.dataGridInternal.headerHeight() + 'px';
+        this.dataGridScroller.scrollHeight - this.#dataGrid.headerHeight() + 'px';
     this.updateScrollerWidthIfNeeded();
     this.dataGridScroller.scrollTop = this.waterfallScroller.scrollTop;
   }
@@ -418,10 +418,10 @@ export class NetworkLogViewColumns {
 
     function waterfallHeaderClicked(this: NetworkLogViewColumns): void {
       const sortOrders = DataGrid.DataGrid.Order;
-      const wasSortedByWaterfall = this.dataGridInternal.sortColumnId() === 'waterfall';
-      const wasSortedAscending = this.dataGridInternal.isSortOrderAscending();
+      const wasSortedByWaterfall = this.#dataGrid.sortColumnId() === 'waterfall';
+      const wasSortedAscending = this.#dataGrid.isSortOrderAscending();
       const sortOrder = wasSortedByWaterfall && wasSortedAscending ? sortOrders.Descending : sortOrders.Ascending;
-      this.dataGridInternal.markColumnAsSortedBy('waterfall', sortOrder);
+      this.#dataGrid.markColumnAsSortedBy('waterfall', sortOrder);
       this.sortHandler();
     }
   }
@@ -436,8 +436,8 @@ export class NetworkLogViewColumns {
   private updateRowsSize(): void {
     const largeRows = Boolean(this.networkLogLargeRowsSetting.get());
 
-    this.dataGridInternal.element.classList.toggle('small', !largeRows);
-    this.dataGridInternal.scheduleUpdate();
+    this.#dataGrid.element.classList.toggle('small', !largeRows);
+    this.#dataGrid.scheduleUpdate();
 
     this.waterfallScrollerWidthIsStale = true;
     this.waterfallColumn.setRowHeight(largeRows ? 41 : 21);
@@ -463,7 +463,7 @@ export class NetworkLogViewColumns {
   }
 
   dataGrid(): DataGrid.SortableDataGrid.SortableDataGrid<NetworkNode> {
-    return this.dataGridInternal;
+    return this.#dataGrid;
   }
 
   sortByCurrentColumn(): void {
@@ -475,16 +475,16 @@ export class NetworkLogViewColumns {
     // NetworkLogView can be empty until it has been invalidated (see
     // crbug.com/379762016).
     window.requestAnimationFrame(() => {
-      this.dataGridInternal.scheduleUpdate();
+      this.#dataGrid.scheduleUpdate();
     });
   }
 
   private sortHandler(): void {
-    const columnId = this.dataGridInternal.sortColumnId();
+    const columnId = this.#dataGrid.sortColumnId();
     this.networkLogView.removeAllNodeHighlights();
     this.waterfallRequestsAreStale = true;
     if (columnId === 'waterfall') {
-      if (this.dataGridInternal.sortOrder() === DataGrid.DataGrid.Order.Ascending) {
+      if (this.#dataGrid.sortOrder() === DataGrid.DataGrid.Order.Ascending) {
         this.waterfallColumnSortIcon.name = 'triangle-up';
       } else {
         this.waterfallColumnSortIcon.name = 'triangle-down';
@@ -495,7 +495,7 @@ export class NetworkLogViewColumns {
           (NetworkRequestNode.RequestPropertyComparator.bind(null, this.activeWaterfallSortId) as
                (arg0: DataGrid.SortableDataGrid.SortableDataGridNode<NetworkNode>,
                 arg1: DataGrid.SortableDataGrid.SortableDataGridNode<NetworkNode>) => number);
-      this.dataGridInternal.sortNodes(sortFunction, !this.dataGridInternal.isSortOrderAscending());
+      this.#dataGrid.sortNodes(sortFunction, !this.#dataGrid.isSortOrderAscending());
       this.dataGridSortedForTest();
       return;
     }
@@ -514,7 +514,7 @@ export class NetworkLogViewColumns {
     if (!sortingFunction) {
       return;
     }
-    this.dataGridInternal.sortNodes(sortingFunction, !this.dataGridInternal.isSortOrderAscending());
+    this.#dataGrid.sortNodes(sortingFunction, !this.#dataGrid.isSortOrderAscending());
     this.dataGridSortedForTest();
   }
 
@@ -522,7 +522,7 @@ export class NetworkLogViewColumns {
   }
 
   private updateColumns(): void {
-    if (!this.dataGridInternal) {
+    if (!this.#dataGrid) {
       return;
     }
     const visibleColumns = new Set<string>();
@@ -547,7 +547,7 @@ export class NetworkLogViewColumns {
       }
       this.setWaterfallVisibility(false);
     }
-    this.dataGridInternal.setColumnsVisibility(visibleColumns);
+    this.#dataGrid.setColumnsVisibility(visibleColumns);
   }
 
   switchViewMode(gridMode: boolean): void {
@@ -576,12 +576,12 @@ export class NetworkLogViewColumns {
       this.splitWidget.showBoth();
       this.activeScroller = this.waterfallScroller;
       this.waterfallScroller.scrollTop = this.dataGridScroller.scrollTop;
-      this.dataGridInternal.setScrollContainer(this.waterfallScroller);
+      this.#dataGrid.setScrollContainer(this.waterfallScroller);
     } else {
       this.networkLogView.removeAllNodeHighlights();
       this.splitWidget.hideSidebar();
       this.activeScroller = this.dataGridScroller;
-      this.dataGridInternal.setScrollContainer(this.dataGridScroller);
+      this.#dataGrid.setScrollContainer(this.dataGridScroller);
     }
   }
 
@@ -732,7 +732,7 @@ export class NetworkLogViewColumns {
       this.networkLogView.setCalculator((calculator as NetworkTimeCalculator.NetworkTimeCalculator));
 
       this.activeWaterfallSortId = sortId;
-      this.dataGridInternal.markColumnAsSortedBy('waterfall', DataGrid.DataGrid.Order.Ascending);
+      this.#dataGrid.markColumnAsSortedBy('waterfall', DataGrid.DataGrid.Order.Ascending);
       this.sortHandler();
     }
   }
@@ -789,7 +789,7 @@ export class NetworkLogViewColumns {
     }
 
     this.columns.splice(index, 1);
-    this.dataGridInternal.removeColumn(headerId);
+    this.#dataGrid.removeColumn(headerId);
     this.saveColumnsSettings();
     this.updateColumns();
     return true;
@@ -829,8 +829,8 @@ export class NetworkLogViewColumns {
     const columnConfig = columnConfigBase as Descriptor;
 
     this.columns.splice(index, 0, columnConfig);
-    if (this.dataGridInternal) {
-      this.dataGridInternal.addColumn(NetworkLogViewColumns.convertToDataGridDescriptor(columnConfig), index);
+    if (this.#dataGrid) {
+      this.#dataGrid.addColumn(NetworkLogViewColumns.convertToDataGridDescriptor(columnConfig), index);
     }
     this.saveColumnsSettings();
     this.updateColumns();

package/front_end/panels/network/NetworkPanel.ts

@@ -391,7 +391,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
     return networkPanelInstance;
   }
 
-  static revealAndFilter(filters: Array<{
+  static async revealAndFilter(filters: Array<{
     filterType: NetworkForward.UIFilter.FilterType | null,
     filterValue: string,
   }>): Promise<void> {
@@ -404,8 +404,10 @@ export class NetworkPanel extends UI.Panel.Panel implements
         filterString += `${filter.filterValue} `;
       }
     }
+    await UI.ViewManager.ViewManager.instance().showView('network');
     panel.networkLogView.setTextFilterValue(filterString);
-    return UI.ViewManager.ViewManager.instance().showView('network');
+    panel.filterBar.setting().set(true);
+    panel.filterBar.focus();
   }
 
   throttlingSelectForTest(): UI.Toolbar.ToolbarItem {
@@ -916,14 +918,15 @@ export class FilmStripRecorder implements Tracing.TracingManager.TracingManagerC
     this.#tracingManager = null;
     await this.#traceEngine.parse(this.#collectedTraceEvents);
 
-    const data = this.#traceEngine.parsedTrace(this.#traceEngine.size() - 1) as
-        Trace.Extras.FilmStrip.HandlerDataWithScreenshots;
+    const data = this.#traceEngine.parsedTrace(this.#traceEngine.size() - 1)?.data as
+            Trace.Extras.FilmStrip.HandlerDataWithScreenshots |
+        null;
     if (!data) {
       return;
     }
     const zeroTimeInSeconds = Trace.Types.Timing.Seconds(this.#timeCalculator.minimumBoundary());
     const filmStrip =
-        Trace.Extras.FilmStrip.fromParsedTrace(data, Trace.Helpers.Timing.secondsToMicro(zeroTimeInSeconds));
+        Trace.Extras.FilmStrip.fromHandlerData(data, Trace.Helpers.Timing.secondsToMicro(zeroTimeInSeconds));
 
     if (this.#callback) {
       this.#callback(filmStrip);

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -159,8 +159,8 @@ const opCodeDescriptions: Array<() => string> = (function(): Array<() => Common.
 class ResourceFrameNode extends DataGridItem {
   readonly frame: SDK.NetworkRequest.WebSocketFrame;
   private readonly isTextFrame: boolean;
-  private dataTextInternal: string;
-  private binaryViewInternal: BinaryResourceView|null;
+  #dataText: string;
+  #binaryView: BinaryResourceView|null;
 
   constructor(frame: SDK.NetworkRequest.WebSocketFrame) {
     let length = String(frame.text.length);
@@ -194,9 +194,9 @@ class ResourceFrameNode extends DataGridItem {
 
     this.frame = frame;
     this.isTextFrame = isTextFrame;
-    this.dataTextInternal = dataText;
+    this.#dataText = dataText;
 
-    this.binaryViewInternal = null;
+    this.#binaryView = null;
   }
 
   override createCells(element: Element): void {
@@ -214,7 +214,7 @@ class ResourceFrameNode extends DataGridItem {
   }
 
   override dataText(): string {
-    return this.dataTextInternal;
+    return this.#dataText;
   }
 
   override binaryView(): BinaryResourceView|null {
@@ -222,15 +222,15 @@ class ResourceFrameNode extends DataGridItem {
       return null;
     }
 
-    if (!this.binaryViewInternal) {
-      if (this.dataTextInternal.length > 0) {
-        this.binaryViewInternal = new BinaryResourceView(
+    if (!this.#binaryView) {
+      if (this.#dataText.length > 0) {
+        this.#binaryView = new BinaryResourceView(
             TextUtils.StreamingContentData.StreamingContentData.from(
-                new TextUtils.ContentData.ContentData(this.dataTextInternal, true, 'applicaiton/octet-stream')),
+                new TextUtils.ContentData.ContentData(this.#dataText, true, 'applicaiton/octet-stream')),
             Platform.DevToolsPath.EmptyUrlString, Common.ResourceType.resourceTypes.WebSocket);
       }
     }
-    return this.binaryViewInternal;
+    return this.#binaryView;
   }
 
   override getTime(): number {

package/front_end/panels/profiler/HeapDetachedElementsView.ts

@@ -170,7 +170,7 @@ export namespace DetachedElementsProfileType {
 }
 
 export class DetachedElementsProfileHeader extends WritableProfileHeader {
-  readonly heapProfilerModelInternal: SDK.HeapProfilerModel.HeapProfilerModel|null;
+  readonly #heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null;
   readonly detachedElements: Protocol.DOM.DetachedElementInfo[]|null;
   constructor(
       heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, type: DetachedElementsProfileType,
@@ -179,7 +179,7 @@ export class DetachedElementsProfileHeader extends WritableProfileHeader {
         heapProfilerModel?.debuggerModel() ?? null, type,
         title || i18nString(UIStrings.detachedElementProfile, {PH1: type.nextProfileUid()}));
     this.detachedElements = detachedElements;
-    this.heapProfilerModelInternal = heapProfilerModel;
+    this.#heapProfilerModel = heapProfilerModel;
   }
 
   override createView(dataDisplayDelegate: DataDisplayDelegate): DetachedElementsProfileView {
@@ -187,7 +187,7 @@ export class DetachedElementsProfileHeader extends WritableProfileHeader {
   }
 
   heapProfilerModel(): SDK.HeapProfilerModel.HeapProfilerModel|null {
-    return this.heapProfilerModelInternal;
+    return this.#heapProfilerModel;
   }
 
   override profileType(): DetachedElementsProfileType {

package/front_end/panels/profiler/HeapProfileView.ts

@@ -701,7 +701,7 @@ export class HeapFlameChartDataProvider extends ProfileFlameChartDataProvider {
     const link = linkifier.maybeLinkifyConsoleCallFrame(
         this.heapProfilerModel ? this.heapProfilerModel.target() : null, node.callFrame);
     if (link) {
-      pushRow(i18nString(UIStrings.url), (link.textContent as string));
+      pushRow(i18nString(UIStrings.url), link.textContent);
     }
     linkifier.dispose();
     return ProfileView.buildPopoverTable(popoverInfo);

package/front_end/panels/profiler/ProfileFlameChartDataProvider.ts

@@ -40,7 +40,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 let colorGeneratorInstance: Common.Color.Generator|null = null;
 
 export class ProfileFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataProvider {
-  readonly colorGeneratorInternal: Common.Color.Generator;
+  readonly #colorGenerator: Common.Color.Generator;
   maxStackDepthInternal: number;
   timelineDataInternal: PerfUI.FlameChart.FlameChartTimelineData|null;
   entryNodes: CPUProfile.ProfileTreeModel.ProfileNode[];
@@ -48,7 +48,7 @@ export class ProfileFlameChartDataProvider implements PerfUI.FlameChart.FlameCha
   boldFont?: string;
 
   constructor() {
-    this.colorGeneratorInternal = ProfileFlameChartDataProvider.colorGenerator();
+    this.#colorGenerator = ProfileFlameChartDataProvider.colorGenerator();
     this.maxStackDepthInternal = 0;
     this.timelineDataInternal = null;
     this.entryNodes = [];
@@ -121,8 +121,7 @@ export class ProfileFlameChartDataProvider implements PerfUI.FlameChart.FlameCha
     const node = this.entryNodes[entryIndex];
     // For idle and program, we want different 'shades of gray', so we fallback to functionName as scriptId = 0
     // For rest of nodes e.g eval scripts, if url is empty then scriptId will be guaranteed to be non-zero
-    return this.colorGeneratorInternal.colorForID(
-        node.url || (node.scriptId !== '0' ? node.scriptId : node.functionName));
+    return this.#colorGenerator.colorForID(node.url || (node.scriptId !== '0' ? node.scriptId : node.functionName));
   }
 
   decorateEntry(

package/front_end/panels/profiler/ProfileHeader.ts

@@ -8,18 +8,18 @@ import type * as Bindings from '../../models/bindings/bindings.js';
 import type * as UI from '../../ui/legacy/legacy.js';
 
 export class ProfileHeader extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  readonly profileTypeInternal: ProfileType;
+  readonly #profileType: ProfileType;
   title: string;
   uid: number;
-  fromFileInternal: boolean;
+  #fromFile: boolean;
   tempFile: Bindings.TempFile.TempFile|null;
 
   constructor(profileType: ProfileType, title: string) {
     super();
-    this.profileTypeInternal = profileType;
+    this.#profileType = profileType;
     this.title = title;
     this.uid = profileType.incrementProfileUid();
-    this.fromFileInternal = false;
+    this.#fromFile = false;
 
     this.tempFile = null;
   }
@@ -30,7 +30,7 @@ export class ProfileHeader extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   }
 
   profileType(): ProfileType {
-    return this.profileTypeInternal;
+    return this.#profileType;
   }
 
   updateStatus(subtitle: string|null, wait?: boolean): void {
@@ -70,11 +70,11 @@ export class ProfileHeader extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   }
 
   fromFile(): boolean {
-    return this.fromFileInternal;
+    return this.#fromFile;
   }
 
   setFromFile(): void {
-    this.fromFileInternal = true;
+    this.#fromFile = true;
   }
 
   setProfile(_profile: Protocol.Profiler.Profile): void {
@@ -101,19 +101,19 @@ export interface EventTypes {
 }
 
 export class ProfileType extends Common.ObjectWrapper.ObjectWrapper<ProfileEventTypes> {
-  readonly idInternal: string;
-  readonly nameInternal: string;
+  readonly #id: string;
+  readonly #name: string;
   profiles: ProfileHeader[];
-  profileBeingRecordedInternal: ProfileHeader|null;
-  nextProfileUidInternal: number;
+  #profileBeingRecorded: ProfileHeader|null;
+  #nextProfileUid: number;
 
   constructor(id: string, name: string) {
     super();
-    this.idInternal = id;
-    this.nameInternal = name;
+    this.#id = id;
+    this.#name = name;
     this.profiles = [];
-    this.profileBeingRecordedInternal = null;
-    this.nextProfileUidInternal = 1;
+    this.#profileBeingRecorded = null;
+    this.#nextProfileUid = 1;
 
     if (!window.opener) {
       window.addEventListener('pagehide', this.clearTempStorage.bind(this), false);
@@ -125,11 +125,11 @@ export class ProfileType extends Common.ObjectWrapper.ObjectWrapper<ProfileEvent
   }
 
   nextProfileUid(): number {
-    return this.nextProfileUidInternal;
+    return this.#nextProfileUid;
   }
 
   incrementProfileUid(): number {
-    return this.nextProfileUidInternal++;
+    return this.#nextProfileUid++;
   }
 
   hasTemporaryView(): boolean {
@@ -145,15 +145,15 @@ export class ProfileType extends Common.ObjectWrapper.ObjectWrapper<ProfileEvent
   }
 
   get id(): string {
-    return this.idInternal;
+    return this.#id;
   }
 
   get treeItemTitle(): string {
-    return this.nameInternal;
+    return this.#name;
   }
 
   get name(): string {
-    return this.nameInternal;
+    return this.#name;
   }
 
   buttonClicked(): boolean {
@@ -174,7 +174,7 @@ export class ProfileType extends Common.ObjectWrapper.ObjectWrapper<ProfileEvent
 
   getProfiles(): ProfileHeader[] {
     function isFinished(this: ProfileType, profile: ProfileHeader): boolean {
-      return this.profileBeingRecordedInternal !== profile;
+      return this.#profileBeingRecorded !== profile;
     }
     return this.profiles.filter(isFinished.bind(this));
   }
@@ -224,11 +224,11 @@ export class ProfileType extends Common.ObjectWrapper.ObjectWrapper<ProfileEvent
   }
 
   profileBeingRecorded(): ProfileHeader|null {
-    return this.profileBeingRecordedInternal;
+    return this.#profileBeingRecorded;
   }
 
   setProfileBeingRecorded(profile: ProfileHeader|null): void {
-    this.profileBeingRecordedInternal = profile;
+    this.#profileBeingRecorded = profile;
   }
 
   profileBeingRecordedRemoved(): void {
@@ -239,13 +239,13 @@ export class ProfileType extends Common.ObjectWrapper.ObjectWrapper<ProfileEvent
       this.disposeProfile(profile);
     }
     this.profiles = [];
-    this.nextProfileUidInternal = 1;
+    this.#nextProfileUid = 1;
   }
 
   disposeProfile(profile: ProfileHeader): void {
     this.dispatchEventToListeners(ProfileEvents.REMOVE_PROFILE_HEADER, profile);
     profile.dispose();
-    if (this.profileBeingRecordedInternal === profile) {
+    if (this.#profileBeingRecorded === profile) {
       this.profileBeingRecordedRemoved();
       this.setProfileBeingRecorded(null);
     }

package/front_end/panels/profiler/ProfileLauncherView.ts

@@ -70,7 +70,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class ProfileLauncherView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
     UI.Widget.VBox) {
   readonly panel: ProfilesPanel;
-  private contentElementInternal: HTMLElement;
+  #contentElement: HTMLElement;
   readonly selectedProfileTypeSetting: Common.Settings.Setting<string>;
   profileTypeHeaderElement: HTMLElement;
   readonly profileTypeSelectorForm: HTMLElement;
@@ -91,16 +91,15 @@ export class ProfileLauncherView extends Common.ObjectWrapper.eventMixin<EventTy
 
     this.panel = profilesPanel;
     this.element.classList.add('profile-launcher-view');
-    this.contentElementInternal = this.element.createChild('div', 'profile-launcher-view-content vbox');
+    this.#contentElement = this.element.createChild('div', 'profile-launcher-view-content vbox');
 
-    const profileTypeSelectorElement = this.contentElementInternal.createChild('div', 'vbox');
+    const profileTypeSelectorElement = this.#contentElement.createChild('div', 'vbox');
     this.selectedProfileTypeSetting = Common.Settings.Settings.instance().createSetting('selected-profile-type', 'CPU');
     this.profileTypeHeaderElement = profileTypeSelectorElement.createChild('h1');
     this.profileTypeSelectorForm = profileTypeSelectorElement.createChild('form');
     UI.ARIAUtils.markAsRadioGroup(this.profileTypeSelectorForm);
 
-    const isolateSelectorElement =
-        this.contentElementInternal.createChild('div', 'vbox profile-isolate-selector-block');
+    const isolateSelectorElement = this.#contentElement.createChild('div', 'vbox profile-isolate-selector-block');
     isolateSelectorElement.createChild('h1').textContent = i18nString(UIStrings.selectJavascriptVmInstance);
     const isolateSelector = new IsolateSelector();
     const isolateSelectorElementChild = isolateSelectorElement.createChild('div', 'vbox profile-launcher-target-list');
@@ -108,7 +107,7 @@ export class ProfileLauncherView extends Common.ObjectWrapper.eventMixin<EventTy
     isolateSelector.show(isolateSelectorElementChild);
     isolateSelectorElement.appendChild(isolateSelector.totalMemoryElement());
 
-    const buttonsDiv = this.contentElementInternal.createChild('div', 'hbox profile-launcher-buttons');
+    const buttonsDiv = this.#contentElement.createChild('div', 'hbox profile-launcher-buttons');
     this.controlButton = UI.UIUtils.createTextButton('', this.controlButtonClicked.bind(this), {
       jslogContext: 'profiler.heap-toggle-recording',
       variant: Buttons.Button.Variant.PRIMARY,

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

@@ -168,7 +168,9 @@ export class ReplaySection extends HTMLElement {
       this.#settings.replayExtension = '';
     }
 
-    Host.userMetrics.recordingReplaySpeed(replaySpeedToMetricSpeedMap[speed]);
+    if (replaySpeedToMetricSpeedMap[speed]) {
+      Host.userMetrics.recordingReplaySpeed(replaySpeedToMetricSpeedMap[speed]);
+    }
     void ComponentHelpers.ScheduledRender.scheduleRender(
         this,
         this.#render,

package/front_end/panels/security/OriginTreeElement.ts

@@ -18,9 +18,9 @@ export class ShowOriginEvent extends Event {
 }
 
 export class OriginTreeElement extends SecurityPanelSidebarTreeElement {
-  #securityStateInternal: Protocol.Security.SecurityState|null;
+  #securityState: Protocol.Security.SecurityState|null;
   readonly #renderTreeElement: (element: SecurityPanelSidebarTreeElement) => void;
-  readonly #originInternal: Platform.DevToolsPath.UrlString|null = null;
+  readonly #origin: Platform.DevToolsPath.UrlString|null = null;
 
   constructor(
       className: string, renderTreeElement: (element: SecurityPanelSidebarTreeElement) => void,
@@ -28,28 +28,28 @@ export class OriginTreeElement extends SecurityPanelSidebarTreeElement {
     super();
 
     this.#renderTreeElement = renderTreeElement;
-    this.#originInternal = origin;
+    this.#origin = origin;
 
     this.listItemElement.classList.add(className);
-    this.#securityStateInternal = null;
+    this.#securityState = null;
     this.setSecurityState(Protocol.Security.SecurityState.Unknown);
   }
 
   setSecurityState(newSecurityState: Protocol.Security.SecurityState): void {
-    this.#securityStateInternal = newSecurityState;
+    this.#securityState = newSecurityState;
     this.#renderTreeElement(this);
   }
 
   securityState(): Protocol.Security.SecurityState|null {
-    return this.#securityStateInternal;
+    return this.#securityState;
   }
 
   origin(): Platform.DevToolsPath.UrlString|null {
-    return this.#originInternal;
+    return this.#origin;
   }
 
   override showElement(): void {
-    this.listItemElement.dispatchEvent(new ShowOriginEvent(this.#originInternal));
+    this.listItemElement.dispatchEvent(new ShowOriginEvent(this.#origin));
   }
 }
 

package/front_end/panels/security/SecurityPanel.ts

@@ -1588,19 +1588,19 @@ export class SecurityOriginView extends UI.Widget.VBox {
 }
 
 export class SecurityDetailsTable {
-  private readonly elementInternal: HTMLTableElement;
+  readonly #element: HTMLTableElement;
 
   constructor() {
-    this.elementInternal = document.createElement('table');
-    this.elementInternal.classList.add('details-table');
+    this.#element = document.createElement('table');
+    this.#element.classList.add('details-table');
   }
 
   element(): HTMLTableElement {
-    return this.elementInternal;
+    return this.#element;
   }
 
   addRow(key: string, value: string|Node): void {
-    const row = this.elementInternal.createChild('tr', 'details-table-row');
+    const row = this.#element.createChild('tr', 'details-table-row');
     row.createChild('td').textContent = key;
 
     const valueCell = row.createChild('td');