chrome-devtools-frontend 1.0.998787 → 1.0.1000057

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -71,13 +71,20 @@ export class TimespanView extends UI.Dialog.Dialog {
     const dialogRoot = UI.Utils.createShadowRootWithCoreStyles(
         this.contentElement, {cssFile: [lighthouseDialogStyles], delegatesFocus: undefined});
 
-    this.endButton = UI.UIUtils.createTextButton(i18nString(UIStrings.endTimespan), this.endTimespan.bind(this));
+    this.endButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.endTimespan),
+        this.endTimespan.bind(this),
+        undefined,
+        true,
+    );
     const cancelButton = UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), this.cancel.bind(this));
     const fragment = UI.Fragment.Fragment.build`
   <div class="lighthouse-view vbox">
   <h2 $="status-header"></h2>
-  ${this.endButton}
+  <div class="lighthouse-action-buttons hbox">
   ${cancelButton}
+  ${this.endButton}
+  </div>
   </div>
   `;
 

package/front_end/panels/lighthouse/lighthouseDialog.css

@@ -117,3 +117,8 @@
   display: block;
   margin-top: 5px;
 }
+
+.lighthouse-action-buttons {
+  align-self: end;
+  column-gap: 8px;
+}

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -11,7 +11,9 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {MobileThrottlingSelector} from './MobileThrottlingSelector.js';
 import {NetworkThrottlingSelector} from './NetworkThrottlingSelector.js';
 
-import type {Conditions, ConditionsList, MobileThrottlingConditionsGroup, NetworkThrottlingConditionsGroup} from './ThrottlingPresets.js';
+import type {
+  Conditions, ConditionsList, MobileThrottlingConditionsGroup, NetworkThrottlingConditionsGroup} from
+  './ThrottlingPresets.js';
 import {ThrottlingPresets} from './ThrottlingPresets.js';
 
 const UIStrings = {

package/front_end/panels/network/NetworkLogView.ts

@@ -57,7 +57,11 @@ import {Events, NetworkGroupNode, NetworkRequestNode} from './NetworkDataGridNod
 import {NetworkFrameGrouper} from './NetworkFrameGrouper.js';
 import {NetworkLogViewColumns} from './NetworkLogViewColumns.js';
 import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
-import {NetworkTimeBoundary, NetworkTransferDurationCalculator, NetworkTransferTimeCalculator} from './NetworkTimeCalculator.js';
+import {
+  NetworkTimeBoundary,
+  NetworkTransferDurationCalculator,
+  NetworkTransferTimeCalculator,
+} from './NetworkTimeCalculator.js';
 
 const UIStrings = {
   /**

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -14,7 +14,9 @@ import type {NetworkNode} from './NetworkDataGridNode.js';
 import {NetworkRequestNode} from './NetworkDataGridNode.js';
 import type {NetworkLogView} from './NetworkLogView.js';
 import {NetworkManageCustomHeadersView} from './NetworkManageCustomHeadersView.js';
-import type {NetworkTimeCalculator, NetworkTransferDurationCalculator, NetworkTransferTimeCalculator} from './NetworkTimeCalculator.js';
+import type {
+  NetworkTimeCalculator, NetworkTransferDurationCalculator, NetworkTransferTimeCalculator} from
+  './NetworkTimeCalculator.js';
 import {NetworkWaterfallColumn} from './NetworkWaterfallColumn.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 

package/front_end/panels/network/RequestTimingView.ts

@@ -102,7 +102,7 @@ const UIStrings = {
   /**
   *@description Text in Request Timing View of the Network panel
   */
-  waitingTtfb: 'Waiting (TTFB)',
+  waitingTtfb: 'Waiting for server response',
   /**
   *@description Text in Signed Exchange Info View of the Network panel
   */

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -38,7 +38,14 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type {HeapSnapshotGridNode} from './HeapSnapshotGridNodes.js';
-import {AllocationGridNode, HeapSnapshotConstructorNode, HeapSnapshotGenericObjectNode, HeapSnapshotRetainingObjectNode, HeapSnapshotObjectNode, HeapSnapshotDiffNode} from './HeapSnapshotGridNodes.js';
+import {
+  AllocationGridNode,
+  HeapSnapshotConstructorNode,
+  HeapSnapshotGenericObjectNode,
+  HeapSnapshotRetainingObjectNode,
+  HeapSnapshotObjectNode,
+  HeapSnapshotDiffNode,
+} from './HeapSnapshotGridNodes.js';
 import type {HeapSnapshotProxy} from './HeapSnapshotProxy.js';
 import type {HeapProfileHeader} from './HeapSnapshotView.js';
 import type {DataDisplayDelegate} from './ProfileHeader.js';

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -38,7 +38,9 @@ import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type {ChildrenProvider} from './ChildrenProvider.js';
-import type {AllocationDataGrid, HeapSnapshotConstructorsDataGrid, HeapSnapshotDiffDataGrid, HeapSnapshotSortableDataGrid} from './HeapSnapshotDataGrids.js';
+import type {
+  AllocationDataGrid, HeapSnapshotConstructorsDataGrid, HeapSnapshotDiffDataGrid, HeapSnapshotSortableDataGrid} from
+  './HeapSnapshotDataGrids.js';
 import {HeapSnapshotSortableDataGridEvents} from './HeapSnapshotDataGrids.js';
 import type {HeapSnapshotProviderProxy, HeapSnapshotProxy} from './HeapSnapshotProxy.js';
 import type {DataDisplayDelegate} from './ProfileHeader.js';

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -44,7 +44,14 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type {HeapSnapshotSortableDataGrid} from './HeapSnapshotDataGrids.js';
-import {AllocationDataGrid, HeapSnapshotSortableDataGridEvents, HeapSnapshotConstructorsDataGrid, HeapSnapshotDiffDataGrid, HeapSnapshotRetainmentDataGrid, HeapSnapshotContainmentDataGrid} from './HeapSnapshotDataGrids.js';
+import {
+  AllocationDataGrid,
+  HeapSnapshotSortableDataGridEvents,
+  HeapSnapshotConstructorsDataGrid,
+  HeapSnapshotDiffDataGrid,
+  HeapSnapshotRetainmentDataGrid,
+  HeapSnapshotContainmentDataGrid,
+} from './HeapSnapshotDataGrids.js';
 import type {AllocationGridNode, HeapSnapshotGridNode} from './HeapSnapshotGridNodes.js';
 import {HeapSnapshotGenericObjectNode} from './HeapSnapshotGridNodes.js';
 import type {HeapSnapshotProxy} from './HeapSnapshotProxy.js';
@@ -53,7 +60,12 @@ import type {IdsRangeChangedEvent} from './HeapTimelineOverview.js';
 import {HeapTimelineOverview, Events, Samples} from './HeapTimelineOverview.js';
 import * as ModuleUIStrings from './ModuleUIStrings.js';
 import type {DataDisplayDelegate} from './ProfileHeader.js';
-import {Events as ProfileHeaderEvents, ProfileEvents as ProfileTypeEvents, ProfileHeader, ProfileType} from './ProfileHeader.js';
+import {
+  Events as ProfileHeaderEvents,
+  ProfileEvents as ProfileTypeEvents,
+  ProfileHeader,
+  ProfileType,
+} from './ProfileHeader.js';
 import {ProfileSidebarTreeElement} from './ProfileSidebarTreeElement.js';
 import {instance} from './ProfileTypeRegistry.js';
 

package/front_end/panels/sources/AddSourceMapURLDialog.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import dialogStyles from './dialog.css.js';
@@ -22,8 +23,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class AddSourceMapURLDialog extends UI.Widget.HBox {
   private readonly input: HTMLInputElement;
   private readonly dialog: UI.Dialog.Dialog;
-  private readonly callback: (arg0: string) => void;
-  constructor(callback: (arg0: string) => void) {
+  private readonly callback: (arg0: Platform.DevToolsPath.UrlString) => void;
+  constructor(callback: (arg0: Platform.DevToolsPath.UrlString) => void) {
     super(/* isWebComponent */ true);
 
     this.contentElement.createChild('label').textContent = i18nString(UIStrings.sourceMapUrl);
@@ -51,13 +52,13 @@ export class AddSourceMapURLDialog extends UI.Widget.HBox {
     this.dialog.show();
   }
 
-  private done(value: string): void {
+  private done(value: Platform.DevToolsPath.UrlString): void {
     this.dialog.hide();
     this.callback(value);
   }
 
   private apply(): void {
-    this.done(this.input.value);
+    this.done(this.input.value as Platform.DevToolsPath.UrlString);
   }
 
   private onKeyDown(event: KeyboardEvent): void {

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
 import debuggerPausedMessageStyles from './debuggerPausedMessage.css.js';
@@ -276,6 +277,6 @@ export const BreakpointTypeNouns = new Map([
 ]);
 interface PausedDetailsAuxData {
   description?: string;
-  url?: string;
+  url?: Platform.DevToolsPath.UrlString;
   value?: string;
 }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -472,11 +472,11 @@ export class DebuggerPlugin extends Plugin {
     }
 
     function addSourceMapURLDialogCallback(
-        scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile, url: string): void {
+        scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile, url: Platform.DevToolsPath.UrlString): void {
       if (!url) {
         return;
       }
-      scriptFile.addSourceMapURL(url as Platform.DevToolsPath.UrlString);
+      scriptFile.addSourceMapURL(url);
     }
 
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&

package/front_end/panels/sources/EditingLocationHistoryManager.ts

@@ -93,9 +93,7 @@ export class EditingLocationHistoryManager {
   }
 
   private reveal(entry: EditingLocationHistoryEntry): void {
-    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCode(
-        entry.projectId, entry.url as Platform.DevToolsPath.UrlString);
+    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCode(entry.projectId, entry.url);
     if (uiSourceCode) {
       this.revealing = true;
       this.sourcesView.showSourceLocation(uiSourceCode, entry.position, false, true);
@@ -131,7 +129,7 @@ export class EditingLocationHistoryManager {
 
 class EditingLocationHistoryEntry {
   readonly projectId: string;
-  readonly url: string;
+  readonly url: Platform.DevToolsPath.UrlString;
   position: number;
 
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode, position: number) {

package/front_end/panels/sources/NavigatorView.ts

@@ -290,7 +290,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     // Update folder titles.
     const pathTokens =
         Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.relativePath(binding.fileSystem);
-    let folderPath = '' as Platform.DevToolsPath.EncodedPathString;
+    let folderPath = Platform.DevToolsPath.EmptyEncodedPathString;
     for (let i = 0; i < pathTokens.length - 1; ++i) {
       folderPath = Common.ParsedURL.ParsedURL.concatenate(folderPath, pathTokens[i]);
       const folderId =
@@ -744,7 +744,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       const folderId = this.folderNodeId(
           project, target, frame, uiSourceCode.origin(),
           currentNode instanceof NavigatorFolderTreeNode && currentNode.folderPath ||
-              '' as Platform.DevToolsPath.EncodedPathString);
+              Platform.DevToolsPath.EmptyEncodedPathString);
       this.subfolderNodes.delete(folderId);
       parentNode.removeChild(currentNode);
       currentNode = (parentNode as NavigatorUISourceCodeTreeNode | null);
@@ -822,8 +822,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       contextMenu.editSection().appendItem(i18nString(UIStrings.rename), this.handleContextMenuRename.bind(this, node));
       contextMenu.editSection().appendItem(
           i18nString(UIStrings.makeACopy),
-          this.handleContextMenuCreate.bind(
-              this, project, '' as Platform.DevToolsPath.EncodedPathString, uiSourceCode));
+          this.handleContextMenuCreate.bind(this, project, Platform.DevToolsPath.EmptyEncodedPathString, uiSourceCode));
       contextMenu.editSection().appendItem(
           i18nString(UIStrings.delete), this.handleContextMenuDelete.bind(this, uiSourceCode));
     }
@@ -1472,7 +1471,7 @@ export class NavigatorFolderTreeNode extends NavigatorTreeNode {
       folderPath: Platform.DevToolsPath.EncodedPathString, title: string) {
     super(navigatorView, id, type);
     this.project = project;
-    this.folderPath = folderPath as Platform.DevToolsPath.EncodedPathString;
+    this.folderPath = folderPath;
     this.title = title;
   }
 

package/front_end/panels/sources/ScriptFormatterEditorAction.ts

@@ -4,6 +4,7 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as FormatterModule from '../../models/formatter/formatter.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -30,7 +31,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let scriptFormatterEditorActionInstance: ScriptFormatterEditorAction;
 
 export class ScriptFormatterEditorAction implements EditorAction {
-  private readonly pathsToFormatOnLoad: Set<string>;
+  private readonly pathsToFormatOnLoad: Set<Platform.DevToolsPath.UrlString>;
   private sourcesView!: SourcesView;
   private button!: UI.Toolbar.ToolbarButton;
   private constructor() {

package/front_end/panels/sources/SourcesPanel.ts

@@ -45,7 +45,13 @@ import {DebuggerPausedMessage} from './DebuggerPausedMessage.js';
 import sourcesPanelStyles from './sourcesPanel.css.js';
 
 import type {NavigatorView} from './NavigatorView.js';
-import {ContentScriptsNavigatorView, FilesNavigatorView, NetworkNavigatorView, OverridesNavigatorView, SnippetsNavigatorView} from './SourcesNavigator.js';
+import {
+  ContentScriptsNavigatorView,
+  FilesNavigatorView,
+  NetworkNavigatorView,
+  OverridesNavigatorView,
+  SnippetsNavigatorView,
+} from './SourcesNavigator.js';
 import {Events, SourcesView} from './SourcesView.js';
 import {ThreadsSidebarPane} from './ThreadsSidebarPane.js';
 import {UISourceCodeFrame} from './UISourceCodeFrame.js';

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -436,10 +436,10 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
   private updateHistory(): void {
     const tabIds = this.tabbedPane.lastOpenedTabIds(maximalPreviouslyViewedFilesCount);
 
-    function tabIdToURI(this: TabbedEditorContainer, tabId: string): string {
+    function tabIdToURI(this: TabbedEditorContainer, tabId: string): Platform.DevToolsPath.UrlString {
       const tab = this.files.get(tabId);
       if (!tab) {
-        return '';
+        return Platform.DevToolsPath.EmptyUrlString;
       }
       return tab.url();
     }
@@ -639,18 +639,19 @@ export let tabId = 0;
 export const maximalPreviouslyViewedFilesCount = 30;
 
 interface SerializedHistoryItem {
-  url: string;
+  url: Platform.DevToolsPath.UrlString;
   selectionRange?: TextUtils.TextRange.SerializedTextRange;
   scrollLineNumber?: number;
 }
 
 export class HistoryItem {
-  url: string;
+  url: Platform.DevToolsPath.UrlString;
   private isSerializable: boolean;
   selectionRange: TextUtils.TextRange.TextRange|undefined;
   scrollLineNumber: number|undefined;
 
-  constructor(url: string, selectionRange?: TextUtils.TextRange.TextRange, scrollLineNumber?: number) {
+  constructor(
+      url: Platform.DevToolsPath.UrlString, selectionRange?: TextUtils.TextRange.TextRange, scrollLineNumber?: number) {
     this.url = url;
     this.isSerializable = url.length < HistoryItem.serializableUrlLengthLimit;
     this.selectionRange = selectionRange;
@@ -700,7 +701,7 @@ export class History {
     return new History(items);
   }
 
-  index(url: string): number {
+  index(url: Platform.DevToolsPath.UrlString): number {
     const index = this.itemsIndex.get(url);
     if (index !== undefined) {
       return index;
@@ -716,12 +717,12 @@ export class History {
     }
   }
 
-  selectionRange(url: string): TextUtils.TextRange.TextRange|undefined {
+  selectionRange(url: Platform.DevToolsPath.UrlString): TextUtils.TextRange.TextRange|undefined {
     const index = this.index(url);
     return index !== -1 ? this.items[index].selectionRange : undefined;
   }
 
-  updateSelectionRange(url: string, selectionRange?: TextUtils.TextRange.TextRange): void {
+  updateSelectionRange(url: Platform.DevToolsPath.UrlString, selectionRange?: TextUtils.TextRange.TextRange): void {
     if (!selectionRange) {
       return;
     }
@@ -732,12 +733,12 @@ export class History {
     this.items[index].selectionRange = selectionRange;
   }
 
-  scrollLineNumber(url: string): number|undefined {
+  scrollLineNumber(url: Platform.DevToolsPath.UrlString): number|undefined {
     const index = this.index(url);
     return index !== -1 ? this.items[index].scrollLineNumber : undefined;
   }
 
-  updateScrollLineNumber(url: string, scrollLineNumber: number): void {
+  updateScrollLineNumber(url: Platform.DevToolsPath.UrlString, scrollLineNumber: number): void {
     const index = this.index(url);
     if (index === -1) {
       return;
@@ -745,7 +746,7 @@ export class History {
     this.items[index].scrollLineNumber = scrollLineNumber;
   }
 
-  update(urls: string[]): void {
+  update(urls: Platform.DevToolsPath.UrlString[]): void {
     for (let i = urls.length - 1; i >= 0; --i) {
       const index = this.index(urls[i]);
       let item;
@@ -760,7 +761,7 @@ export class History {
     }
   }
 
-  remove(url: string): void {
+  remove(url: Platform.DevToolsPath.UrlString): void {
     const index = this.index(url);
     if (index !== -1) {
       this.items.splice(index, 1);
@@ -786,7 +787,7 @@ export class History {
     return serializedHistory;
   }
 
-  urls(): string[] {
+  urls(): Platform.DevToolsPath.UrlString[] {
     const result = [];
     for (let i = 0; i < this.items.length; ++i) {
       result.push(this.items[i].url);

package/front_end/panels/timeline/TimelineController.ts

@@ -90,7 +90,7 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
     // 'disabled-by-default-v8.cpu_profiler'
     //   └ default: on, option: enableJSSampling
     const categoriesArray = [
-      '-*',
+      Root.Runtime.experiments.isEnabled('timelineShowAllEvents') ? '*' : '-*',
       TimelineModel.TimelineModel.TimelineModelImpl.Category.Console,
       TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming,
       'devtools.timeline',

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -53,10 +53,6 @@ const UIStrings = {
   /**
   *@description Text in Timeline Event Overview of the Performance panel
   */
-  fps: 'FPS',
-  /**
-  *@description Text in Timeline Event Overview of the Performance panel
-  */
   heap: 'HEAP',
   /**
   *@description Heap size label text content in Timeline Event Overview of the Performance panel
@@ -485,62 +481,6 @@ export class TimelineFilmStripOverview extends TimelineEventOverview {
   static readonly Padding = 2;
 }
 
-export class TimelineEventOverviewFrames extends TimelineEventOverview {
-  constructor() {
-    super('framerate', i18nString(UIStrings.fps));
-  }
-
-  update(): void {
-    super.update();
-    if (!this.model) {
-      return;
-    }
-    const frames = this.model.frames();
-    if (!frames.length) {
-      return;
-    }
-    const height = this.height();
-    const padding = Number(window.devicePixelRatio);
-    const baseFrameDurationMs = 1e3 / 60;
-    const visualHeight = height - 2 * padding;
-    const timeOffset = this.model.timelineModel().minimumRecordTime();
-    const timeSpan = this.model.timelineModel().maximumRecordTime() - timeOffset;
-    const scale = this.width() / timeSpan;
-    const baseY = height - padding;
-    const ctx = this.context();
-    const bottomY = baseY + 10 * window.devicePixelRatio;
-    let x = 0;
-    let y: number = bottomY;
-
-    const lineWidth = window.devicePixelRatio;
-    const offset = lineWidth & 1 ? 0.5 : 0;
-    const tickDepth = 1.5 * window.devicePixelRatio;
-    ctx.beginPath();
-    ctx.moveTo(0, y);
-    for (let i = 0; i < frames.length; ++i) {
-      const frame = frames[i];
-      x = Math.round((frame.startTime - timeOffset) * scale) + offset;
-      ctx.lineTo(x, y);
-      ctx.lineTo(x, y + tickDepth);
-      y = frame.idle ? bottomY :
-                       Math.round(baseY - visualHeight * Math.min(baseFrameDurationMs / frame.duration, 1)) - offset;
-      ctx.lineTo(x, y + tickDepth);
-      ctx.lineTo(x, y);
-    }
-    const lastFrame = frames[frames.length - 1];
-    if (lastFrame) {
-      x = Math.round((lastFrame.startTime + lastFrame.duration - timeOffset) * scale) + offset;
-    }
-    ctx.lineTo(x, y);
-    ctx.lineTo(x, bottomY);
-    ctx.fillStyle = 'hsl(110, 50%, 88%)';
-    ctx.strokeStyle = 'hsl(110, 50%, 60%)';
-    ctx.lineWidth = lineWidth;
-    ctx.fill();
-    ctx.stroke();
-  }
-}
-
 export class TimelineEventOverviewMemory extends TimelineEventOverview {
   private heapSizeLabel: HTMLElement;
   constructor() {

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -131,12 +131,6 @@ const UIStrings = {
   occurrencesS: 'Occurrences: {PH1}',
   /**
   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
-  *@example {10ms} PH1
-  *@example {100.0} PH2
-  */
-  sFfps: '{PH1} ~ {PH2} fps',
-  /**
-  *@description Text in Timeline Flame Chart Data Provider of the Performance panel
   */
   idleFrame: 'Idle Frame',
   /**
@@ -1005,9 +999,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     } else if (type === EntryType.Frame) {
       const frame = (this.entryData[entryIndex] as TimelineModel.TimelineFrameModel.TimelineFrame);
-      time = i18nString(
-          UIStrings.sFfps,
-          {PH1: i18n.TimeUtilities.preciseMillisToString(frame.duration, 1), PH2: (1000 / frame.duration).toFixed(0)});
+      time = i18n.TimeUtilities.preciseMillisToString(frame.duration, 1);
 
       if (frame.idle) {
         title = i18nString(UIStrings.idleFrame);

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -17,7 +17,10 @@ import type {PerformanceModel, WindowChangedEvent} from './PerformanceModel.js';
 import {Events as PerformanceModelEvents} from './PerformanceModel.js';
 import {TimelineDetailsView} from './TimelineDetailsView.js';
 import {TimelineRegExp} from './TimelineFilters.js';
-import {Events as TimelineFlameChartDataProviderEvents, TimelineFlameChartDataProvider} from './TimelineFlameChartDataProvider.js';
+import {
+  Events as TimelineFlameChartDataProviderEvents,
+  TimelineFlameChartDataProvider,
+} from './TimelineFlameChartDataProvider.js';
 import {TimelineFlameChartNetworkDataProvider} from './TimelineFlameChartNetworkDataProvider.js';
 import type {TimelineModeViewDelegate} from './TimelinePanel.js';
 import {TimelineSelection} from './TimelinePanel.js';

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -10,7 +10,11 @@ import * as UI from '../../ui/legacy/legacy.js';
 import timelineHistoryManagerStyles from './timelineHistoryManager.css.js';
 
 import type {PerformanceModel} from './PerformanceModel.js';
-import {TimelineEventOverviewCPUActivity, TimelineEventOverviewFrames, TimelineEventOverviewNetwork, TimelineEventOverviewResponsiveness} from './TimelineEventOverview.js';
+import {
+  TimelineEventOverviewCPUActivity,
+  TimelineEventOverviewNetwork,
+  TimelineEventOverviewResponsiveness,
+} from './TimelineEventOverview.js';
 
 const UIStrings = {
   /**
@@ -81,7 +85,6 @@ export class TimelineHistoryManager {
 
     this.allOverviews = [
       {constructor: TimelineEventOverviewResponsiveness, height: 3},
-      {constructor: TimelineEventOverviewFrames, height: 16},
       {constructor: TimelineEventOverviewCPUActivity, height: 20},
       {constructor: TimelineEventOverviewNetwork, height: 8},
     ];

package/front_end/panels/timeline/TimelinePanel.ts

@@ -57,7 +57,15 @@ import {Events, PerformanceModel} from './PerformanceModel.js';
 import type {Client} from './TimelineController.js';
 import {TimelineController} from './TimelineController.js';
 import type {TimelineEventOverview} from './TimelineEventOverview.js';
-import {TimelineEventOverviewCoverage, TimelineEventOverviewCPUActivity, TimelineEventOverviewFrames, TimelineEventOverviewInput, TimelineEventOverviewMemory, TimelineEventOverviewNetwork, TimelineEventOverviewResponsiveness, TimelineFilmStripOverview} from './TimelineEventOverview.js';
+import {
+  TimelineEventOverviewCoverage,
+  TimelineEventOverviewCPUActivity,
+  TimelineEventOverviewInput,
+  TimelineEventOverviewMemory,
+  TimelineEventOverviewNetwork,
+  TimelineEventOverviewResponsiveness,
+  TimelineFilmStripOverview,
+} from './TimelineEventOverview.js';
 import {TimelineFlameChartView} from './TimelineFlameChartView.js';
 import {TimelineHistoryManager} from './TimelineHistoryManager.js';
 import {TimelineLoader} from './TimelineLoader.js';
@@ -701,7 +709,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (Root.Runtime.experiments.isEnabled('inputEventsOnTimelineOverview')) {
       this.overviewControls.push(new TimelineEventOverviewInput());
     }
-    this.overviewControls.push(new TimelineEventOverviewFrames());
     this.overviewControls.push(new TimelineEventOverviewCPUActivity());
     this.overviewControls.push(new TimelineEventOverviewNetwork());
     if (this.showScreenshotsSetting.get() && this.performanceModel &&

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -1069,10 +1069,6 @@ const UIStrings = {
   */
   frame: 'Frame',
   /**
-  *@description Text in Timeline Event Overview of the Performance panel
-  */
-  fps: 'FPS',
-  /**
   *@description Text in Timeline UIUtils of the Performance panel
   */
   cpuTime: 'CPU time',
@@ -3089,8 +3085,6 @@ export class TimelineUIUtils {
 
     const duration = TimelineUIUtils.frameDuration(frame);
     contentHelper.appendElementRow(i18nString(UIStrings.duration), duration, frame.hasWarnings());
-    const durationInMillis = frame.endTime - frame.startTime;
-    contentHelper.appendTextRow(i18nString(UIStrings.fps), Math.floor(1000 / durationInMillis));
     contentHelper.appendTextRow(i18nString(UIStrings.cpuTime), i18n.TimeUtilities.millisToString(frame.cpuTime, true));
     if (filmStripFrame) {
       const filmStripPreview = document.createElement('div');

package/front_end/panels/timeline/timeline-legacy.ts

@@ -74,9 +74,6 @@ Timeline.TimelineEventOverviewResponsiveness = TimelineModule.TimelineEventOverv
 /** @constructor */
 Timeline.TimelineFilmStripOverview = TimelineModule.TimelineEventOverview.TimelineFilmStripOverview;
 
-/** @constructor */
-Timeline.TimelineEventOverviewFrames = TimelineModule.TimelineEventOverview.TimelineEventOverviewFrames;
-
 /** @constructor */
 Timeline.TimelineEventOverviewMemory = TimelineModule.TimelineEventOverview.TimelineEventOverviewMemory;
 

package/front_end/panels/timeline/timelinePanel.css

@@ -111,11 +111,6 @@
   flex-basis: 8px;
 }
 
-#timeline-overview-framerate {
-  flex-basis: 16px;
-  margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
-}
-
 #timeline-overview-filmstrip {
   flex-basis: 30px;
 }
@@ -124,7 +119,6 @@
   flex-basis: 20px;
 }
 
-#timeline-overview-framerate::before,
 #timeline-overview-network::before,
 #timeline-overview-cpu-activity::before {
   content: "";

package/front_end/panels/web_audio/graph_visualizer/GraphView.ts

@@ -6,7 +6,9 @@ import * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
 
 import {EdgeTypes, EdgeView, generateEdgePortIdsByData} from './EdgeView.js';
-import type {NodeCreationData, NodeParamConnectionData, NodeParamDisconnectionData, NodesConnectionData, NodesDisconnectionData, NodesDisconnectionDataWithDestination, ParamCreationData} from './GraphStyle.js';
+import type {
+  NodeCreationData, NodeParamConnectionData, NodeParamDisconnectionData, NodesConnectionData, NodesDisconnectionData,
+  NodesDisconnectionDataWithDestination, ParamCreationData} from './GraphStyle.js';
 import {NodeLabelGenerator, NodeView} from './NodeView.js';
 
 // A class that tracks all the nodes and edges of an audio graph.

package/front_end/panels/web_audio/graph_visualizer/NodeRendererUtility.ts

@@ -3,7 +3,14 @@
 // found in the LICENSE file.
 
 import type {Point, Size} from './GraphStyle.js';
-import {AudioParamRadius, InputPortRadius, LeftSideTopPadding, TotalInputPortHeight, TotalOutputPortHeight, TotalParamPortHeight} from './GraphStyle.js';
+import {
+  AudioParamRadius,
+  InputPortRadius,
+  LeftSideTopPadding,
+  TotalInputPortHeight,
+  TotalOutputPortHeight,
+  TotalParamPortHeight,
+} from './GraphStyle.js';
 
 /**
  * Calculate the x, y value of input port.