chrome-devtools-frontend 1.0.999279 → 1.0.1000679

package/front_end/.eslintrc.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
 const path = require('path');
 const rulesDirPlugin = require('eslint-plugin-rulesdir');
 rulesDirPlugin.RULES_DIR = path.join(__dirname, '..', 'scripts', 'eslint_rules', 'lib');
@@ -28,6 +29,7 @@ module.exports = {
       'rules': {
         '@typescript-eslint/explicit-function-return-type': 2,
         'rulesdir/no_importing_images_from_src': 2,
+        'rulesdir/enforce_bound_render_for_schedule_render': 2,
         'rulesdir/enforce_custom_event_names': 2,
         'rulesdir/set_data_type_reference': 2,
         'rulesdir/no_bound_component_methods': 2,
@@ -120,10 +122,7 @@ module.exports = {
           },
           {
             // Ignore type properties that require quotes
-            'selector': [
-              'typeProperty',
-              'enumMember'
-            ],
+            'selector': ['typeProperty', 'enumMember'],
             'format': null,
             'modifiers': ['requiresQuotes']
           }
@@ -150,3 +149,4 @@ module.exports = {
     }
   ]
 };
+// clang-format on

package/front_end/core/common/ParsedURL.ts

@@ -153,10 +153,10 @@ export class ParsedURL {
     return null;
   }
 
-  private static preEncodeSpecialCharactersInPath(path: string): string {
+  static preEncodeSpecialCharactersInPath(path: string): string {
     // Based on net::FilePathToFileURL. Ideally we would handle
     // '\\' as well on non-Windows file systems.
-    for (const specialChar of ['%', ';', '#', '?']) {
+    for (const specialChar of ['%', ';', '#', '?', ' ']) {
       (path as string) = path.replaceAll(specialChar, encodeURIComponent(specialChar));
     }
     return path;
@@ -185,7 +185,7 @@ export class ParsedURL {
    */
   static urlFromParentUrlAndName(parentUrl: Platform.DevToolsPath.UrlString, name: string):
       Platform.DevToolsPath.UrlString {
-    return ParsedURL.concatenate(parentUrl, '/', encodeURIComponent(name));
+    return ParsedURL.concatenate(parentUrl, '/', ParsedURL.preEncodeSpecialCharactersInPath(name));
   }
 
   static encodedPathToRawPathString(encPath: Platform.DevToolsPath.EncodedPathString):

package/front_end/core/dom_extension/DOMExtension.ts

@@ -532,16 +532,6 @@ Node.prototype.setTextContentTruncatedIfNeeded = function(text: string|Node, pla
   return false;
 };
 
-Document.prototype.deepActiveElement = function(): Element|null {
-  let activeElement: Element|(Element | null) = this.activeElement;
-  while (activeElement && activeElement.shadowRoot && activeElement.shadowRoot.activeElement) {
-    activeElement = activeElement.shadowRoot.activeElement;
-  }
-  return activeElement;
-};
-
-DocumentFragment.prototype.deepActiveElement = Document.prototype.deepActiveElement;
-
 Element.prototype.hasFocus = function(): boolean {
   const root = this.getComponentRoot();
   return Boolean(root) && this.isSelfOrAncestor(root.activeElement);

package/front_end/core/i18n/locales/en-US.json

@@ -5822,6 +5822,9 @@
   "panels/lighthouse/LighthouseController.ts | isThisPageUsableByPeopleWith": {
     "message": "Is this page usable by people with disabilities or impairments"
   },
+  "panels/lighthouse/LighthouseController.ts | javaScriptDisabled": {
+    "message": "JavaScript is disabled. You need to enable JavaScript to audit this page. Open the Command Menu and run the Enable JavaScript command to enable JavaScript."
+  },
   "panels/lighthouse/LighthouseController.ts | legacyNavigation": {
     "message": "Legacy navigation"
   },
@@ -10238,9 +10241,6 @@
   "panels/timeline/TimelineEventOverview.ts | cpu": {
     "message": "CPU"
   },
-  "panels/timeline/TimelineEventOverview.ts | fps": {
-    "message": "FPS"
-  },
   "panels/timeline/TimelineEventOverview.ts | heap": {
     "message": "HEAP"
   },
@@ -10307,9 +10307,6 @@
   "panels/timeline/TimelineFlameChartDataProvider.ts | rasterizerThreadS": {
     "message": "Rasterizer Thread {PH1}"
   },
-  "panels/timeline/TimelineFlameChartDataProvider.ts | sFfps": {
-    "message": "{PH1} ~ {PH2} fps"
-  },
   "panels/timeline/TimelineFlameChartDataProvider.ts | sSelfS": {
     "message": "{PH1} (self {PH2})"
   },
@@ -10823,9 +10820,6 @@
   "panels/timeline/TimelineUIUtils.ts | forcedReflow": {
     "message": "Forced reflow"
   },
-  "panels/timeline/TimelineUIUtils.ts | fps": {
-    "message": "FPS"
-  },
   "panels/timeline/TimelineUIUtils.ts | frame": {
     "message": "Frame"
   },
@@ -11537,6 +11531,9 @@
   "panels/webauthn/WebauthnPane.ts | signCount": {
     "message": "Signature Count"
   },
+  "panels/webauthn/WebauthnPane.ts | supportsLargeBlob": {
+    "message": "Supports large blob"
+  },
   "panels/webauthn/WebauthnPane.ts | supportsResidentKeys": {
     "message": "Supports resident keys"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -5822,6 +5822,9 @@
   "panels/lighthouse/LighthouseController.ts | isThisPageUsableByPeopleWith": {
     "message": "Îś t̂h́îś p̂áĝé ûśâb́l̂é b̂ý p̂éôṕl̂é ŵít̂h́ d̂íŝáb̂íl̂ít̂íêś ôŕ îḿp̂áîŕm̂én̂t́ŝ"
   },
+  "panels/lighthouse/LighthouseController.ts | javaScriptDisabled": {
+    "message": "Ĵáv̂áŜćr̂íp̂t́ îś d̂íŝáb̂ĺêd́. Ŷóû ńêéd̂ t́ô én̂áb̂ĺê J́âv́âŚĉŕîṕt̂ t́ô áûd́ît́ t̂h́îś p̂áĝé. Ôṕêń t̂h́ê Ćôḿm̂án̂d́ M̂én̂ú âńd̂ ŕûń t̂h́ê Én̂áb̂ĺê J́âv́âŚĉŕîṕt̂ ćôḿm̂án̂d́ t̂ó êńâb́l̂é Ĵáv̂áŜćr̂íp̂t́."
+  },
   "panels/lighthouse/LighthouseController.ts | legacyNavigation": {
     "message": "L̂éĝáĉý n̂áv̂íĝát̂íôń"
   },
@@ -10238,9 +10241,6 @@
   "panels/timeline/TimelineEventOverview.ts | cpu": {
     "message": "ĈṔÛ"
   },
-  "panels/timeline/TimelineEventOverview.ts | fps": {
-    "message": "F̂ṔŜ"
-  },
   "panels/timeline/TimelineEventOverview.ts | heap": {
     "message": "ĤÉÂṔ"
   },
@@ -10307,9 +10307,6 @@
   "panels/timeline/TimelineFlameChartDataProvider.ts | rasterizerThreadS": {
     "message": "R̂áŝt́êŕîźêŕ T̂h́r̂éâd́ {PH1}"
   },
-  "panels/timeline/TimelineFlameChartDataProvider.ts | sFfps": {
-    "message": "{PH1} ~ {PH2} f̂ṕŝ"
-  },
   "panels/timeline/TimelineFlameChartDataProvider.ts | sSelfS": {
     "message": "{PH1} (ŝél̂f́ {PH2})"
   },
@@ -10823,9 +10820,6 @@
   "panels/timeline/TimelineUIUtils.ts | forcedReflow": {
     "message": "F̂ór̂ćêd́ r̂éf̂ĺôẃ"
   },
-  "panels/timeline/TimelineUIUtils.ts | fps": {
-    "message": "F̂ṔŜ"
-  },
   "panels/timeline/TimelineUIUtils.ts | frame": {
     "message": "F̂ŕâḿê"
   },
@@ -11537,6 +11531,9 @@
   "panels/webauthn/WebauthnPane.ts | signCount": {
     "message": "Ŝíĝńât́ûŕê Ćôún̂t́"
   },
+  "panels/webauthn/WebauthnPane.ts | supportsLargeBlob": {
+    "message": "Ŝúp̂ṕôŕt̂ś l̂ár̂ǵê b́l̂ób̂"
+  },
   "panels/webauthn/WebauthnPane.ts | supportsResidentKeys": {
     "message": "Ŝúp̂ṕôŕt̂ś r̂éŝíd̂én̂t́ k̂éŷś"
   },

package/front_end/models/extensions/ExtensionAPI.ts

@@ -28,7 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import type * as PublicAPI from '../../../extension-api/ExtensionAPI'; // eslint-disable-line rulesdir/es_modules_import
 import type * as HAR from '../har/har.js';
 
@@ -141,7 +141,7 @@ export namespace PrivateAPI {
   type UpdateButtonRequest =
       {command: Commands.UpdateButton, id: string, icon?: string, tooltip?: string, disabled?: boolean};
   type CompleteTraceSessionRequest =
-      {command: Commands.CompleteTraceSession, id: string, url: string, timeOffset: number};
+      {command: Commands.CompleteTraceSession, id: string, url: Platform.DevToolsPath.UrlString, timeOffset: number};
   type CreateSidebarPaneRequest = {command: Commands.CreateSidebarPane, id: string, panel: string, title: string};
   type SetSidebarHeightRequest = {command: Commands.SetSidebarHeight, id: string, height: string};
   type SetSidebarContentRequest = {
@@ -930,11 +930,11 @@ self.injectedExtensionAPI = function(
   }
 
   (TraceSessionImpl.prototype as Pick<APIImpl.TraceSession, 'complete'>) = {
-    complete: function(this: APIImpl.TraceSession, url?: string, timeOffset?: number): void {
+    complete: function(this: APIImpl.TraceSession, url?: Platform.DevToolsPath.UrlString, timeOffset?: number): void {
       extensionServer.sendRequest({
         command: PrivateAPI.Commands.CompleteTraceSession,
         id: this._id,
-        url: url || '',
+        url: url || Platform.DevToolsPath.EmptyUrlString,
         timeOffset: timeOffset || 0,
       });
     },

package/front_end/models/extensions/ExtensionTraceProvider.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {ExtensionServer} from './ExtensionServer.js';
+import type * as Platform from '../../core/platform/platform.js';
 
 export class ExtensionTraceProvider {
   private readonly extensionOrigin: string;
@@ -43,5 +44,5 @@ export class ExtensionTraceProvider {
 let _lastSessionId = 0;
 
 export interface TracingSession {
-  complete(url: string, timeOffsetMicroseconds: number): void;
+  complete(url: Platform.DevToolsPath.UrlString, timeOffsetMicroseconds: number): void;
 }

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -327,8 +327,13 @@ const
           xmlHttpRequestSynchronousInNonWorkerOutsideBeforeUnload:
               'Synchronous `XMLHttpRequest` on the main thread is deprecated because of its detrimental effects to the end user\u2019s experience. For more help, check https://xhr.spec.whatwg.org/.',
           /**
-   *@description TODO(crbug.com/1320365): Description needed for translation
-   */
+           *@description Warning displayed to developers that instead of using
+           *    `supportsSession()`, which returns a promise that resolves if
+           *    the XR session can be supported and rejects if not, they should
+           *    use `isSessionSupported()` which will return a promise which
+           *    resolves to a boolean indicating if the XR session can be
+           *    supported or not, but may reject to throw an exception.
+           */
           xrSupportsSession:
               '`supportsSession()` is deprecated. Please use `isSessionSupported()` and check the resolved boolean value instead.',
         };

package/front_end/models/workspace/WorkspaceImpl.ts

@@ -183,7 +183,7 @@ export abstract class ProjectStore implements Project {
     const oldPath = uiSourceCode.url();
     const newPath = uiSourceCode.parentURL() ?
         Common.ParsedURL.ParsedURL.urlFromParentUrlAndName(uiSourceCode.parentURL(), newName) :
-        encodeURIComponent(newName) as Platform.DevToolsPath.UrlString;
+        Common.ParsedURL.ParsedURL.preEncodeSpecialCharactersInPath(newName) as Platform.DevToolsPath.UrlString;
     const value = this.uiSourceCodesMap.get(oldPath) as {
       uiSourceCode: UISourceCode,
       index: number,

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -171,6 +171,11 @@ const UIStrings = {
   */
   resetStorageLocalstorage:
       'Reset storage (`cache`, `service workers`, etc) before auditing. (Good for performance & `PWA` testing)',
+  /**
+  *@description Explanation for user that Ligthhouse can only audit when JavaScript is enabled
+  */
+  javaScriptDisabled:
+      'JavaScript is disabled. You need to enable JavaScript to audit this page. Open the Command Menu and run the Enable JavaScript command to enable JavaScript.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseController.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -196,6 +201,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       runtimeSetting.setting.addChangeListener(this.recomputePageAuditability.bind(this));
     }
 
+    const javaScriptDisabledSetting = Common.Settings.Settings.instance().moduleSetting('javaScriptDisabled');
+    javaScriptDisabledSetting.addChangeListener(this.recomputePageAuditability.bind(this));
+
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerManager.ServiceWorkerManager, this);
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.InspectedURLChanged, this.recomputePageAuditability, this);
@@ -273,6 +281,10 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return null;
   }
 
+  private javaScriptDisabled(): boolean {
+    return Common.Settings.Settings.instance().moduleSetting('javaScriptDisabled').get();
+  }
+
   private async hasImportantResourcesNotCleared(): Promise<string> {
     const clearStorageSetting =
         RuntimeSettings.find(runtimeSetting => runtimeSetting.setting.name === 'lighthouse.clear_storage');
@@ -363,6 +375,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     const hasActiveServiceWorker = this.hasActiveServiceWorker();
     const hasAtLeastOneCategory = this.hasAtLeastOneCategory();
     const unauditablePageMessage = this.unauditablePageMessage();
+    const javaScriptDisabled = this.javaScriptDisabled();
 
     let helpText = '';
     if (hasActiveServiceWorker) {
@@ -371,6 +384,8 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       helpText = i18nString(UIStrings.atLeastOneCategoryMustBeSelected);
     } else if (unauditablePageMessage) {
       helpText = unauditablePageMessage;
+    } else if (javaScriptDisabled) {
+      helpText = i18nString(UIStrings.javaScriptDisabled);
     }
 
     this.dispatchEventToListeners(Events.PageAuditabilityChanged, {helpText});

package/front_end/panels/network/NetworkItemView.ts

@@ -143,7 +143,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     this.element.classList.add('network-item-view');
 
     this.resourceViewTabSetting = Common.Settings.Settings.instance().createSetting(
-        'resourceViewTab', NetworkForward.UIRequestLocation.UIRequestTabs.Preview);
+        'resourceViewTab', NetworkForward.UIRequestLocation.UIRequestTabs.Headers);
 
     this.headersView = new RequestHeadersView(request);
     this.appendTab(

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/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/ExtensionTracingSession.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Extensions from '../../models/extensions/extensions.js';
 
@@ -42,7 +43,7 @@ export class ExtensionTracingSession implements Extensions.ExtensionTraceProvide
     this.completionCallback();
   }
 
-  complete(url: string, timeOffsetMicroseconds: number): void {
+  complete(url: Platform.DevToolsPath.UrlString, timeOffsetMicroseconds: number): void {
     if (!url) {
       this.completionCallback();
       return;

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() {