chrome-devtools-frontend 1.0.981004 → 1.0.995227

package/front_end/panels/network/networkLogView.css

@@ -88,35 +88,27 @@
   height: 21px;
 }
 
-.network-waterfall-header,
 .network-log-grid.data-grid th {
-  border-bottom: 1px solid var(--color-details-hairline);
-  border-left: 1px solid var(--color-details-hairline);
+  border-bottom: none;
 }
 
-.network-log-grid.data-grid table.data th {
-  border-bottom: none;
+.network-waterfall-header,
+.network-log-grid.data-grid thead th {
+  border-bottom: 1px solid var(--color-details-hairline);
+  border-left: 1px solid var(--color-details-hairline);
 }
 
 .network-waterfall-header,
-.network-log-grid.data-grid .header-container {
+.network-log-grid.data-grid thead {
   height: 31px;
   background-color: var(--color-background-elevation-1);
 }
 
-.network-log-grid.data-grid .data-container {
-  top: 31px;
-}
-
 .network-waterfall-header.small,
-.network-log-grid.data-grid.small .header-container {
+.network-log-grid.data-grid.small thead {
   height: 27px;
 }
 
-.network-log-grid.data-grid.small .data-container {
-  top: 27px;
-}
-
 .network-log-grid.data-grid select {
   appearance: none;
   border: none;
@@ -437,8 +429,8 @@
   }
 
   .network-waterfall-header.small,
-  .network-log-grid.data-grid.small .header-container .network-waterfall-header,
-  .network-log-grid.data-grid .header-container {
+  .network-log-grid.data-grid.small thead .network-waterfall-header,
+  .network-log-grid.data-grid thead {
     background-color: canvas;
   }
 

package/front_end/panels/network/requestHeadersTree.css

@@ -216,3 +216,19 @@
 .header-decode-error {
   color: var(--color-accent-red);
 }
+
+.headers-title {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-right: 5px;
+}
+
+.tree-outline li .headers-link {
+  display: none;
+}
+
+.tree-outline li.expanded .headers-link {
+  display: inline;
+  color: var(--color-text-primary);
+}

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -376,6 +376,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
       const retainmentViewHeader = document.createElement('div');
       retainmentViewHeader.classList.add('heap-snapshot-view-resizer');
       const retainingPathsTitleDiv = retainmentViewHeader.createChild('div', 'title');
+      retainmentViewHeader.createChild('div', 'verticalResizerIcon');
       const retainingPathsTitle = retainingPathsTitleDiv.createChild('span');
       retainingPathsTitle.textContent = i18nString(UIStrings.retainers);
 
@@ -1123,6 +1124,7 @@ export class AllocationPerspective extends Perspective {
     const resizer = document.createElement('div');
     resizer.classList.add('heap-snapshot-view-resizer');
     const title = resizer.createChild('div', 'title').createChild('span');
+    resizer.createChild('div', 'verticalResizerIcon');
     title.textContent = i18nString(UIStrings.liveObjects);
     this.allocationSplitWidget.hideDefaultResizer();
     this.allocationSplitWidget.installResizer(resizer);
@@ -1557,7 +1559,7 @@ export class HeapProfileHeader extends ProfileHeader {
   onTempFileReady: (() => void)|null;
   failedToCreateTempFile?: boolean;
   wasDisposed?: boolean;
-  fileName?: string;
+  fileName?: Platform.DevToolsPath.RawPathString;
 
   constructor(
       heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, type: HeapSnapshotProfileType, title?: string) {
@@ -1713,7 +1715,8 @@ export class HeapProfileHeader extends ProfileHeader {
   saveToFile(): void {
     const fileOutputStream = new Bindings.FileUtils.FileOutputStream();
     this.fileName = this.fileName ||
-        'Heap-' + Platform.DateUtilities.toISO8601Compact(new Date()) + this.profileType().fileExtension();
+        'Heap-' + Platform.DateUtilities.toISO8601Compact(new Date()) + this.profileType().fileExtension() as
+            Platform.DevToolsPath.RawPathString;
     const onOpen = async(accepted: boolean): Promise<void> => {
       if (!accepted) {
         return;

package/front_end/panels/profiler/LiveHeapProfileView.ts

@@ -292,7 +292,9 @@ export class LiveHeapProfileView extends UI.Widget.VBox {
     if (!node || !node.url) {
       return;
     }
-    const sourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(node.url);
+    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
+    const sourceCode =
+        Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(node.url as Platform.DevToolsPath.UrlString);
     if (sourceCode) {
       void Common.Revealer.reveal(sourceCode);
     }

package/front_end/panels/profiler/ProfileView.ts

@@ -549,7 +549,7 @@ export const enum ViewTypes {
 
 export class WritableProfileHeader extends ProfileHeader implements Common.StringOutputStream.OutputStream {
   readonly debuggerModel: SDK.DebuggerModel.DebuggerModel|null;
-  fileName?: string;
+  fileName?: Platform.DevToolsPath.RawPathString;
   jsonifiedProfile?: string|null;
   profile?: Protocol.Profiler.Profile;
   protocolProfileInternal?: Protocol.Profiler.Profile;
@@ -599,7 +599,7 @@ export class WritableProfileHeader extends ProfileHeader implements Common.Strin
       const now = Platform.DateUtilities.toISO8601Compact(new Date());
       const fileExtension = this.profileType().fileExtension();
 
-      this.fileName = `${this.profileType().typeName()}-${now}${fileExtension}`;
+      this.fileName = `${this.profileType().typeName()}-${now}${fileExtension}` as Platform.DevToolsPath.RawPathString;
     }
 
     const accepted = await fileOutputStream.open(this.fileName);

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/protocol_monitor/ProtocolMonitor.ts

@@ -247,7 +247,8 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
                 const [domain, method] = String(methodColumn.value).split('.');
                 const type = typeColumn.value === 'sent' ? 'method' : 'event';
                 Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-                    `https://chromedevtools.github.io/devtools-protocol/tot/${domain}#${type}-${method}`);
+                    `https://chromedevtools.github.io/devtools-protocol/tot/${domain}#${type}-${method}` as
+                    Platform.DevToolsPath.UrlString);
               });
             },
       },
@@ -466,7 +467,8 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
 
   private async saveAsFile(): Promise<void> {
     const now = new Date();
-    const fileName = 'ProtocolMonitor-' + Platform.DateUtilities.toISO8601Compact(now) + '.json';
+    const fileName = 'ProtocolMonitor-' + Platform.DateUtilities.toISO8601Compact(now) + '.json' as
+        Platform.DevToolsPath.RawPathString;
     const stream = new Bindings.FileUtils.FileOutputStream();
 
     const accepted = await stream.open(fileName);

package/front_end/panels/screencast/ScreencastView.ts

@@ -32,6 +32,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 SDK from '../../core/sdk/sdk.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -717,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();
   }
@@ -743,7 +744,9 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     if (match) {
       url = match[1];
     }
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.inspectedURLChanged(url);
+    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.inspectedURLChanged(
+        url as Platform.DevToolsPath.UrlString);
     this.navigationUrl.value = decodeURI(url);
   }
 

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

@@ -32,6 +32,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 Root from '../../core/root/root.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -508,9 +509,11 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'settings.show':
         void SettingsScreen.showSettingsScreen({focusTabHeader: true} as ShowSettingsScreenOptions);
         return true;
+      // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
       case 'settings.documentation':
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-            UI.UIUtils.addReferrerToURL('https://developer.chrome.com/docs/devtools/'));
+            UI.UIUtils.addReferrerToURL('https://developer.chrome.com/docs/devtools/') as
+            Platform.DevToolsPath.UrlString);
         return true;
       case 'settings.shortcuts':
         void SettingsScreen.showSettingsScreen({name: 'keybinds', focusTabHeader: true});

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();
   }