chrome-devtools-frontend 1.0.982087 → 1.0.995227

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -29,6 +29,7 @@
 
 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';
 // eslint-disable-next-line rulesdir/es_modules_import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
@@ -235,7 +236,7 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
     if (!this.toggleRecordAction.enabled()) {
       return true;
     }
-    const toggleButton = this.element.ownerDocument.deepActiveElement();
+    const toggleButton = Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument);
     const type = this.selectedProfileType;
     if (!type) {
       return true;

package/front_end/panels/profiler/heapProfiler.css

@@ -77,11 +77,9 @@
 }
 
 .heap-snapshot-view .heap-snapshot-view-resizer {
-  background-image: var(--image-file-toolbarResizerVertical);
   background-color: var(--color-background-elevation-1);
   border-bottom: 1px solid var(--color-details-hairline);
-  background-repeat: no-repeat;
-  background-position: right center, center;
+  display: flex;
   flex: 0 0 21px;
 }
 
@@ -89,6 +87,20 @@
   margin-right: 6px;
 }
 
+.heap-snapshot-view .heap-snapshot-view-resizer .title {
+  flex: 0 1 auto;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.heap-snapshot-view .heap-snapshot-view-resizer .verticalResizerIcon {
+  background-image: var(--image-file-toolbarResizerVertical);
+  background-repeat: no-repeat;
+  background-position: center;
+  flex: 0 0 28px;
+  margin-left: auto;
+}
+
 .heap-snapshot-view .heap-snapshot-view-resizer .title > span {
   display: inline-block;
   padding-top: 3px;

package/front_end/panels/screencast/ScreencastView.ts

@@ -718,7 +718,7 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     // encodeURI ensures an encoded URL is always passed to the backend
     // This allows the input field to support both encoded and decoded URLs
     if (this.resourceTreeModel) {
-      void this.resourceTreeModel.navigate(encodeURI(decodeURI(url)));
+      void this.resourceTreeModel.navigate(encodeURI(decodeURI(url)) as Platform.DevToolsPath.UrlString);
     }
     this.canvasElement.focus();
   }

package/front_end/panels/search/SearchConfig.ts

@@ -94,7 +94,8 @@ export class SearchConfig implements Workspace.Workspace.ProjectSearchConfig {
     }
   }
 
-  filePathMatchesFileQuery(filePath: string): boolean {
+  filePathMatchesFileQuery(filePath: Platform.DevToolsPath.RawPathString|
+                           Platform.DevToolsPath.EncodedPathString|Platform.DevToolsPath.UrlString): boolean {
     if (!this.fileRegexQueries) {
       return true;
     }

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -263,7 +264,7 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
   }
 
   onEscapeKeyPressed(event: Event): void {
-    const deepActiveElement = document.deepActiveElement();
+    const deepActiveElement = Platform.DOMUtilities.deepActiveElement(document);
     if (this.editingRow && deepActiveElement && deepActiveElement.nodeName === 'INPUT') {
       this.editingRow.onEscapeKeyPressed(event);
     }
@@ -545,7 +546,7 @@ export class ShortcutListItem {
   }
 
   onEscapeKeyPressed(event: Event): void {
-    const activeElement = document.deepActiveElement();
+    const activeElement = Platform.DOMUtilities.deepActiveElement(document);
     for (const [shortcut, shortcutInput] of this.shortcutInputs.entries()) {
       if (activeElement === shortcutInput) {
         this.onShortcutInputKeyDown(

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -87,8 +87,7 @@
 }
 
 .info-link {
-  display: flex;
-  align-items: center;
+  height: 14px;
   margin-left: 5px;
 }
 

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -32,7 +32,7 @@ function escapeSnippetName(name: Platform.DevToolsPath.RawPathString): Platform.
   return Common.ParsedURL.ParsedURL.rawPathToEncodedPathString(name);
 }
 
-function unescapeSnippetName(name: Platform.DevToolsPath.EncodedPathString): string {
+function unescapeSnippetName(name: Platform.DevToolsPath.EncodedPathString): Platform.DevToolsPath.RawPathString {
   return Common.ParsedURL.ParsedURL.encodedPathToRawPathString(name);
 }
 
@@ -40,7 +40,7 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
   private readonly lastSnippetIdentifierSetting: Common.Settings.Setting<number>;
   private readonly snippetsSetting: Common.Settings.Setting<Snippet[]>;
   constructor() {
-    super('snippet://', 'snippets');
+    super('snippet://' as Platform.DevToolsPath.UrlString, 'snippets');
     this.lastSnippetIdentifierSetting =
         Common.Settings.Settings.instance().createSetting('scriptSnippets_lastIdentifier', 0);
     this.snippetsSetting = Common.Settings.Settings.instance().createSetting('scriptSnippets', []);
@@ -123,7 +123,7 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
     return matchedSnippets.map(snippet => `snippet:///${escapeSnippetName(snippet.name)}`);
   }
 
-  mimeFromPath(_path: string): string {
+  mimeFromPath(_path: Platform.DevToolsPath.UrlString): string {
     return 'text/javascript';
   }
 
@@ -170,7 +170,7 @@ export async function evaluateScriptSnippet(uiSourceCode: Workspace.UISourceCode
         generatePreview: true,
         replMode: true,
       } as SDK.RuntimeModel.EvaluationOptions,
-      false, true);
+      true, true);
 
   if ('exceptionDetails' in result && result.exceptionDetails) {
     SDK.ConsoleModel.ConsoleModel.instance().addMessage(SDK.ConsoleModel.ConsoleMessage.fromException(

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -75,7 +75,6 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
       TextEditor.Config.autocompletion,
       CodeMirror.EditorView.lineWrapping,
       TextEditor.Config.showCompletionHint,
-      TextEditor.JavaScript.completion(),
       TextEditor.JavaScript.argumentHints(),
     ];
 

package/front_end/panels/sources/CSSPlugin.ts

@@ -83,7 +83,7 @@ async function specificCssCompletion(
     return {
       from: node.name === 'ValueName' ? node.from : cx.pos,
       options: propertyValues.map(value => ({type: 'constant', label: value})),
-      span: /^[\w\P{ASCII}\-]+$/u,
+      validFor: /^[\w\P{ASCII}\-]+$/u,
     };
   }
   return null;
@@ -111,12 +111,12 @@ function findColorsAndCurves(
   tree.iterate({
     from,
     to,
-    enter: (type, from, to, node) => {
+    enter: node => {
       let content;
-      if (type.name === 'ValueName' || type.name === 'ColorLiteral') {
-        content = getToken(from, to);
-      } else if (type.name === 'Callee' && /^(?:(?:rgb|hsl)a?|cubic-bezier)$/.test(getToken(from, to))) {
-        content = state.sliceDoc(from, (node().parent as CodeMirror.SyntaxNode).to);
+      if (node.name === 'ValueName' || node.name === 'ColorLiteral') {
+        content = getToken(node.from, node.to);
+      } else if (node.name === 'Callee' && /^(?:(?:rgb|hsl)a?|cubic-bezier)$/.test(getToken(node.from, node.to))) {
+        content = state.sliceDoc(node.from, (node.node.parent as CodeMirror.SyntaxNode).to);
       }
       if (content) {
         const parsedColor = Common.Color.Color.parse(content);

package/front_end/panels/sources/CoveragePlugin.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 SDK from '../../core/sdk/sdk.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
@@ -190,7 +191,7 @@ const coverageState = CodeMirror.StateField.define<CodeMirror.RangeSet<CodeMirro
   },
 });
 
-function coverageGutter(url: string): CodeMirror.Extension {
+function coverageGutter(url: Platform.DevToolsPath.UrlString): CodeMirror.Extension {
   return CodeMirror.gutter({
     markers: (view): CodeMirror.RangeSet<CodeMirror.GutterMarker> => view.state.field(coverageState),
 

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -962,11 +962,11 @@ export class DebuggerPlugin extends Plugin {
     tree.iterate({
       from: fromPos,
       to: toPos,
-      enter(type, from, to): void {
-        const varName = type.name === 'VariableName' && editorState.sliceDoc(from, to);
+      enter(node): void {
+        const varName = node.name === 'VariableName' && editorState.sliceDoc(node.from, node.to);
         if (varName && variableMap.has(varName)) {
-          if (from > curLine.to) {
-            curLine = editorState.doc.lineAt(from);
+          if (node.from > curLine.to) {
+            curLine = editorState.doc.lineAt(node.from);
           }
           let names = namesPerLine.get(curLine.number - 1);
           if (!names) {

package/front_end/panels/sources/EditingLocationHistoryManager.ts

@@ -28,6 +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 Workspace from '../../models/workspace/workspace.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
@@ -92,7 +93,9 @@ export class EditingLocationHistoryManager {
   }
 
   private reveal(entry: EditingLocationHistoryEntry): void {
-    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCode(entry.projectId, entry.url);
+    // 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);
     if (uiSourceCode) {
       this.revealing = true;
       this.sourcesView.showSourceLocation(uiSourceCode, entry.position, false, true);

package/front_end/panels/sources/NavigatorView.ts

@@ -226,10 +226,11 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     return order;
   }
 
-  static appendSearchItem(contextMenu: UI.ContextMenu.ContextMenu, path?: string): void {
+  static appendSearchItem(contextMenu: UI.ContextMenu.ContextMenu, path?: Platform.DevToolsPath.EncodedPathString):
+      void {
     let searchLabel = i18nString(UIStrings.searchInFolder);
     if (!path || !path.trim()) {
-      path = '*';
+      path = '*' as Platform.DevToolsPath.EncodedPathString;
       searchLabel = i18nString(UIStrings.searchInAllFiles);
     }
     contextMenu.viewSection().appendItem(searchLabel, () => {
@@ -289,16 +290,16 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     // Update folder titles.
     const pathTokens =
         Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.relativePath(binding.fileSystem);
-    let folderPath = '';
+    let folderPath = '' as Platform.DevToolsPath.EncodedPathString;
     for (let i = 0; i < pathTokens.length - 1; ++i) {
-      folderPath += pathTokens[i];
+      folderPath = Common.ParsedURL.ParsedURL.concatenate(folderPath, pathTokens[i]);
       const folderId =
           this.folderNodeId(binding.fileSystem.project(), null, null, binding.fileSystem.origin(), folderPath);
       const folderNode = this.subfolderNodes.get(folderId);
       if (folderNode) {
         folderNode.updateTitle();
       }
-      folderPath += '/';
+      folderPath = Common.ParsedURL.ParsedURL.concatenate(folderPath, '/');
     }
 
     // Update fileSystem root title.
@@ -537,7 +538,8 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
 
   private folderNodeId(
       project: Workspace.Workspace.Project, target: SDK.Target.Target|null,
-      frame: SDK.ResourceTreeModel.ResourceTreeFrame|null, projectOrigin: string, path: string): string {
+      frame: SDK.ResourceTreeModel.ResourceTreeFrame|null, projectOrigin: string,
+      path: Platform.DevToolsPath.EncodedPathString): string {
     const targetId = target ? target.id() : '';
     const projectId = project.type() === Workspace.Workspace.projectTypes.FileSystem ? project.id() : '';
     const frameId = this.groupByFrame && frame ? frame.id : '';
@@ -556,7 +558,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       return this.domainNode(uiSourceCode, project, target, frame, projectOrigin);
     }
 
-    const folderPath = path.join('/');
+    const folderPath = Common.ParsedURL.ParsedURL.join(path, '/');
     const folderId = this.folderNodeId(project, target, frame, projectOrigin, folderPath);
     let folderNode = this.subfolderNodes.get(folderId);
     if (folderNode) {
@@ -741,7 +743,8 @@ 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 || '');
+          currentNode instanceof NavigatorFolderTreeNode && currentNode.folderPath ||
+              '' as Platform.DevToolsPath.EncodedPathString);
       this.subfolderNodes.delete(folderId);
       parentNode.removeChild(currentNode);
       currentNode = (parentNode as NavigatorUISourceCodeTreeNode | null);
@@ -777,11 +780,12 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   }
 
   private handleContextMenuCreate(
-      project: Workspace.Workspace.Project, path: string, uiSourceCode?: Workspace.UISourceCode.UISourceCode): void {
+      project: Workspace.Workspace.Project, path: Platform.DevToolsPath.EncodedPathString,
+      uiSourceCode?: Workspace.UISourceCode.UISourceCode): void {
     if (uiSourceCode) {
       const relativePath = Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.relativePath(uiSourceCode);
       relativePath.pop();
-      path = relativePath.join('/');
+      path = Common.ParsedURL.ParsedURL.join(relativePath, '/');
     }
     void this.create(project, path, uiSourceCode);
   }
@@ -790,7 +794,8 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     this.rename(node, false);
   }
 
-  private async handleContextMenuExclude(project: Workspace.Workspace.Project, path: string): Promise<void> {
+  private async handleContextMenuExclude(
+      project: Workspace.Workspace.Project, path: Platform.DevToolsPath.EncodedPathString): Promise<void> {
     const shouldExclude = await UI.UIUtils.ConfirmDialog.show(i18nString(UIStrings.areYouSureYouWantToExcludeThis));
     if (shouldExclude) {
       UI.UIUtils.startBatchUpdate();
@@ -816,7 +821,9 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     if (project.type() === Workspace.Workspace.projectTypes.FileSystem) {
       contextMenu.editSection().appendItem(i18nString(UIStrings.rename), this.handleContextMenuRename.bind(this, node));
       contextMenu.editSection().appendItem(
-          i18nString(UIStrings.makeACopy), this.handleContextMenuCreate.bind(this, project, '', uiSourceCode));
+          i18nString(UIStrings.makeACopy),
+          this.handleContextMenuCreate.bind(
+              this, project, '' as Platform.DevToolsPath.EncodedPathString, uiSourceCode));
       contextMenu.editSection().appendItem(
           i18nString(UIStrings.delete), this.handleContextMenuDelete.bind(this, uiSourceCode));
     }
@@ -910,13 +917,13 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   }
 
   async create(
-      project: Workspace.Workspace.Project, path: string,
+      project: Workspace.Workspace.Project, path: Platform.DevToolsPath.EncodedPathString,
       uiSourceCodeToCopy?: Workspace.UISourceCode.UISourceCode): Promise<void> {
     let content = '';
     if (uiSourceCodeToCopy) {
       content = (await uiSourceCodeToCopy.requestContent()).content || '';
     }
-    const uiSourceCode = await project.createFile(path as Platform.DevToolsPath.EncodedPathString, null, content);
+    const uiSourceCode = await project.createFile(path, null, content);
     if (!uiSourceCode) {
       return;
     }
@@ -1462,7 +1469,7 @@ export class NavigatorFolderTreeNode extends NavigatorTreeNode {
   treeElement!: NavigatorFolderTreeElement|null;
   constructor(
       navigatorView: NavigatorView, project: Workspace.Workspace.Project|null, id: string, type: string,
-      folderPath: string, title: string) {
+      folderPath: Platform.DevToolsPath.EncodedPathString, title: string) {
     super(navigatorView, id, type);
     this.project = project;
     this.folderPath = folderPath as Platform.DevToolsPath.EncodedPathString;
@@ -1482,9 +1489,10 @@ export class NavigatorFolderTreeNode extends NavigatorTreeNode {
     if (!this.treeElement || !this.project || this.project.type() !== Workspace.Workspace.projectTypes.FileSystem) {
       return;
     }
-    const absoluteFileSystemPath =
-        Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.fileSystemPath(this.project.id()) + '/' +
-        this.folderPath;
+    const absoluteFileSystemPath = Common.ParsedURL.ParsedURL.concatenate(
+        Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.fileSystemPath(
+            this.project.id() as Platform.DevToolsPath.UrlString),
+        '/', this.folderPath);
     const hasMappedFiles =
         Persistence.Persistence.PersistenceImpl.instance().filePathHasBindings(absoluteFileSystemPath);
     this.treeElement.listItemElement.classList.toggle('has-mapped-files', hasMappedFiles);
@@ -1642,8 +1650,8 @@ export class NavigatorGroupTreeNode extends NavigatorTreeNode {
     if (!this.treeElement || this.project.type() !== Workspace.Workspace.projectTypes.FileSystem) {
       return;
     }
-    const fileSystemPath =
-        Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.fileSystemPath(this.project.id());
+    const fileSystemPath = Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.fileSystemPath(
+        this.project.id() as Platform.DevToolsPath.UrlString);
     const wasActive = this.treeElement.listItemElement.classList.contains('has-mapped-files');
     const isActive = Persistence.Persistence.PersistenceImpl.instance().filePathHasBindings(fileSystemPath);
     if (wasActive === isActive) {

package/front_end/panels/sources/SearchSourcesView.ts

@@ -22,14 +22,14 @@ export class SearchSourcesView extends Search.SearchView.SearchView {
   }
 
   static async openSearch(query: string, searchImmediately?: boolean): Promise<UI.Widget.Widget> {
-    const view = (UI.ViewManager.ViewManager.instance().view('sources.search-sources-tab') as UI.View.View);
+    const view = UI.ViewManager.ViewManager.instance().view('sources.search-sources-tab');
     // Deliberately use target location name so that it could be changed
     // based on the setting later.
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const location = (await UI.ViewManager.ViewManager.instance().resolveLocation('drawer-view') as any);
     location.appendView(view);
-    await UI.ViewManager.ViewManager.instance().revealView((view as UI.View.View));
+    await UI.ViewManager.ViewManager.instance().revealView(view);
     const widget = (await view.widget() as Search.SearchView.SearchView);
     void widget.toggle(query, Boolean(searchImmediately));
     return widget;

package/front_end/panels/sources/SourcesNavigator.ts

@@ -339,7 +339,8 @@ export class SnippetsNavigatorView extends NavigatorView {
     const newButton = new UI.Toolbar.ToolbarButton(
         i18nString(UIStrings.newSnippet), 'largeicon-add', i18nString(UIStrings.newSnippet));
     newButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, _event => {
-      void this.create(Snippets.ScriptSnippetFileSystem.findSnippetsProject(), '');
+      void this.create(
+          Snippets.ScriptSnippetFileSystem.findSnippetsProject(), '' as Platform.DevToolsPath.EncodedPathString);
     });
     toolbar.appendToolbarItem(newButton);
     this.contentElement.insertBefore(toolbar.element, this.contentElement.firstChild);
@@ -360,7 +361,8 @@ export class SnippetsNavigatorView extends NavigatorView {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.headerSection().appendItem(
         i18nString(UIStrings.createNewSnippet),
-        () => this.create(Snippets.ScriptSnippetFileSystem.findSnippetsProject(), ''));
+        () => this.create(
+            Snippets.ScriptSnippetFileSystem.findSnippetsProject(), '' as Platform.DevToolsPath.EncodedPathString));
     void contextMenu.show();
   }
 

package/front_end/panels/sources/SourcesPanel.ts

@@ -276,7 +276,7 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     this.editorView.setMainWidget(this.sourcesViewInternal);
 
     this.threadsSidebarPane = null;
-    this.watchSidebarPane = (UI.ViewManager.ViewManager.instance().view('sources.watch') as UI.View.View);
+    this.watchSidebarPane = UI.ViewManager.ViewManager.instance().view('sources.watch');
     this.callstackPane = CallStackSidebarPane.instance();
 
     Common.Settings.Settings.instance()
@@ -354,7 +354,7 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
 
   private showThreadsIfNeeded(): void {
     if (ThreadsSidebarPane.shouldBeShown() && !this.threadsSidebarPane) {
-      this.threadsSidebarPane = (UI.ViewManager.ViewManager.instance().view('sources.threads') as UI.View.View);
+      this.threadsSidebarPane = UI.ViewManager.ViewManager.instance().view('sources.threads');
       if (this.sidebarPaneStack && this.threadsSidebarPane) {
         void this.sidebarPaneStack.showView(
             this.threadsSidebarPane, this.splitWidget.isVertical() ? this.watchSidebarPane : this.callstackPane);
@@ -1058,8 +1058,8 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
       void this.sidebarPaneStack.showView(this.threadsSidebarPane);
     }
 
-    const jsBreakpoints = (UI.ViewManager.ViewManager.instance().view('sources.jsBreakpoints') as UI.View.View);
-    const scopeChainView = (UI.ViewManager.ViewManager.instance().view('sources.scopeChain') as UI.View.View);
+    const jsBreakpoints = UI.ViewManager.ViewManager.instance().view('sources.jsBreakpoints');
+    const scopeChainView = UI.ViewManager.ViewManager.instance().view('sources.scopeChain');
 
     if (this.tabbedLocationHeader) {
       this.splitWidget.uninstallResizer(this.tabbedLocationHeader);

package/front_end/panels/sources/SourcesSearchScope.ts

@@ -28,6 +28,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+// TODO(crbug.com/1253323): Casts to Branded Types will be removed from this file when migration to branded types is complete.
+
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Bindings from '../../models/bindings/bindings.js';
@@ -126,12 +128,12 @@ export class SourcesSearchScope implements Search.SearchConfig.SearchScope {
     for (const project of this.projects()) {
       const weight = project.uiSourceCodes().length;
       const findMatchingFilesInProjectProgress = findMatchingFilesProgress.createSubProgress(weight);
-      const filesMathingFileQuery = this.projectFilesMatchingFileQuery(project, searchConfig);
+      const filesMatchingFileQuery = this.projectFilesMatchingFileQuery(project, searchConfig);
       const promise =
           project
-              .findFilesMatchingSearchRequest(searchConfig, filesMathingFileQuery, findMatchingFilesInProjectProgress)
+              .findFilesMatchingSearchRequest(searchConfig, filesMatchingFileQuery, findMatchingFilesInProjectProgress)
               .then(this.processMatchingFilesForProject.bind(
-                  this, this.searchId, project, searchConfig, filesMathingFileQuery));
+                  this, this.searchId, project, searchConfig, filesMatchingFileQuery));
       promises.push(promise);
     }
 
@@ -141,7 +143,7 @@ export class SourcesSearchScope implements Search.SearchConfig.SearchScope {
 
   private projectFilesMatchingFileQuery(
       project: Workspace.Workspace.Project, searchConfig: Workspace.Workspace.ProjectSearchConfig,
-      dirtyOnly?: boolean): string[] {
+      dirtyOnly?: boolean): Platform.DevToolsPath.UrlString[] {
     const result = [];
     const uiSourceCodes = project.uiSourceCodes();
     for (let i = 0; i < uiSourceCodes.length; ++i) {
@@ -156,7 +158,9 @@ export class SourcesSearchScope implements Search.SearchConfig.SearchScope {
       if (dirtyOnly && !uiSourceCode.isDirty()) {
         continue;
       }
-      if (searchConfig.filePathMatchesFileQuery(uiSourceCode.fullDisplayName())) {
+      if (searchConfig.filePathMatchesFileQuery(
+              uiSourceCode.fullDisplayName() as Platform.DevToolsPath.UrlString |
+              Platform.DevToolsPath.EncodedPathString)) {
         result.push(uiSourceCode.url());
       }
     }
@@ -166,7 +170,7 @@ export class SourcesSearchScope implements Search.SearchConfig.SearchScope {
 
   private processMatchingFilesForProject(
       searchId: number, project: Workspace.Workspace.Project, searchConfig: Workspace.Workspace.ProjectSearchConfig,
-      filesMathingFileQuery: string[], files: string[]): void {
+      filesMatchingFileQuery: string[], files: string[]): void {
     if (searchId !== this.searchId && this.searchFinishedCallback) {
       this.searchFinishedCallback(false);
       return;
@@ -174,13 +178,13 @@ export class SourcesSearchScope implements Search.SearchConfig.SearchScope {
 
     files.sort(Platform.StringUtilities.naturalOrderComparator);
     files = Platform.ArrayUtilities.intersectOrdered(
-        files, filesMathingFileQuery, Platform.StringUtilities.naturalOrderComparator);
+        files, filesMatchingFileQuery, Platform.StringUtilities.naturalOrderComparator);
     const dirtyFiles = this.projectFilesMatchingFileQuery(project, searchConfig, true);
     files = Platform.ArrayUtilities.mergeOrdered(files, dirtyFiles, Platform.StringUtilities.naturalOrderComparator);
 
     const uiSourceCodes = [];
     for (const file of files) {
-      const uiSourceCode = project.uiSourceCodeForURL(file);
+      const uiSourceCode = project.uiSourceCodeForURL(file as Platform.DevToolsPath.UrlString);
       if (!uiSourceCode) {
         continue;
       }

package/front_end/panels/sources/SourcesView.ts

@@ -702,7 +702,9 @@ export class SwitchFileActionDelegate implements UI.ActionRegistration.ActionDel
     }
     candidates.sort(Platform.StringUtilities.naturalOrderComparator);
     const index = Platform.NumberUtilities.mod(candidates.indexOf(name) + 1, candidates.length);
-    const fullURL = (url ? url + '/' : '') + candidates[index];
+    const fullURL = Common.ParsedURL.ParsedURL.concatenate(
+        (url ? Common.ParsedURL.ParsedURL.concatenate(url, '/') : '' as Platform.DevToolsPath.UrlString),
+        candidates[index]);
     const nextUISourceCode = currentUISourceCode.project().uiSourceCodeForURL(fullURL);
     return nextUISourceCode !== currentUISourceCode ? nextUISourceCode : null;
   }

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -238,7 +238,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
       this.scrollTimer = window.setTimeout(() => this.history.save(this.previouslyViewedFilesSetting), 100);
       if (this.currentFileInternal) {
         const {editor} = this.currentView.textEditor;
-        const topBlock = editor.blockAtHeight(editor.scrollDOM.getBoundingClientRect().top);
+        const topBlock = editor.lineBlockAtHeight(editor.scrollDOM.getBoundingClientRect().top - editor.documentTop);
         const topLine = editor.state.doc.lineAt(topBlock.from).number - 1;
         this.history.updateScrollLineNumber(this.currentFileInternal.url(), topLine);
       }

package/front_end/panels/sources/components/HeadersView.ts

@@ -52,7 +52,7 @@ export class HeadersView extends UI.View.SimpleView {
   #uiSourceCode: Workspace.UISourceCode.UISourceCode;
 
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
-    super('HeadersView');
+    super(i18n.i18n.lockedString('HeadersView'));
     this.#uiSourceCode = uiSourceCode;
     this.#uiSourceCode.addEventListener(
         Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged, this);

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -165,6 +165,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineFlameChartDataProvider.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+type TimelineFlameChartEntry = (SDK.FilmStripModel.Frame|SDK.TracingModel.Event|
+                                TimelineModel.TimelineFrameModel.TimelineFrame|TimelineModel.TimelineIRModel.Phases);
 export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     PerfUI.FlameChart.FlameChartDataProvider {
   private readonly font: string;
@@ -190,8 +192,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   private readonly interactionsHeaderLevel2: PerfUI.FlameChart.GroupStyle;
   private readonly experienceHeader: PerfUI.FlameChart.GroupStyle;
   private readonly flowEventIndexById: Map<string, number>;
-  private entryData!: (SDK.FilmStripModel.Frame|SDK.TracingModel.Event|
-                       TimelineModel.TimelineFrameModel.TimelineFrame|TimelineModel.TimelineIRModel.Phases)[];
+  private entryData!: TimelineFlameChartEntry[];
   private entryTypeByLevel!: EntryType[];
   private markers!: TimelineFlameChartMarker[];
   private asyncColorByInteractionPhase!: Map<TimelineModel.TimelineIRModel.Phases, string>;
@@ -721,11 +722,11 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     if (event.name !== TimelineModel.TimelineModel.RecordType.JSFrame) {
       return false;
     }
-    const url = event.args['data']['url'];
+    const url = event.args['data']['url'] as Platform.DevToolsPath.UrlString;
     return url && this.isIgnoreListedURL(url);
   }
 
-  private isIgnoreListedURL(url: string): boolean {
+  private isIgnoreListedURL(url: Platform.DevToolsPath.UrlString): boolean {
     return Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedURL(url);
   }
 
@@ -1345,11 +1346,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   private appendAsyncEvent(asyncEvent: SDK.TracingModel.AsyncEvent, level: number): void {
-    if (SDK.TracingModel.TracingModel.isNestableAsyncPhase(asyncEvent.phase)) {
-      // FIXME: also add steps once we support event nesting in the FlameChart.
-      this.appendEvent(asyncEvent, level);
-      return;
-    }
     const steps = asyncEvent.steps;
     // If we have past steps, put the end event for each range rather than start one.
     const eventOffset = steps.length > 1 && steps[1].phase === SDK.TracingModel.Phase.AsyncStepPast ? 1 : 0;
@@ -1467,6 +1463,10 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
         null;
   }
 
+  entryDataByIndex(entryIndex: number): TimelineFlameChartEntry {
+    return this.entryData[entryIndex];
+  }
+
   setEventColorMapping(colorForEvent: (arg0: SDK.TracingModel.Event) => string): void {
     this.colorForEvent = colorForEvent;
   }

package/front_end/panels/timeline/TimelinePanel.ts

@@ -772,7 +772,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   }
 
   private async getCoverageViewWidget(): Promise<Coverage.CoverageView.CoverageView> {
-    const view = (UI.ViewManager.ViewManager.instance().view('coverage') as UI.View.View);
+    const view = UI.ViewManager.ViewManager.instance().view('coverage');
     return await view.widget() as Coverage.CoverageView.CoverageView;
   }
 

package/front_end/panels/timeline/timelinePanel.css

@@ -406,7 +406,6 @@
 
 .timeline-tree-view .data-grid .data-container {
   overflow-y: scroll;
-  top: 21px;
 }
 
 .timeline-tree-view .data-grid.data-grid-fits-viewport .corner {
@@ -519,7 +518,7 @@
   width: 120px;
 }
 
-.timeline-tree-view .data-grid .header-container {
+.timeline-tree-view .data-grid thead {
   height: 21px;
 }