chrome-devtools-frontend 1.0.969345 → 1.0.970539

package/front_end/models/persistence/IsolatedFileSystem.ts

@@ -77,8 +77,8 @@ export class IsolatedFileSystem extends PlatformFileSystem {
   private readonly excludedFoldersSetting: Common.Settings.Setting<{[path: string]: string[]}>;
   private excludedFoldersInternal: Set<string>;
   private readonly excludedEmbedderFolders: string[];
-  private readonly initialFilePathsInternal: Set<string>;
-  private readonly initialGitFoldersInternal: Set<string>;
+  private readonly initialFilePathsInternal: Set<Platform.DevToolsPath.EncodedPathString>;
+  private readonly initialGitFoldersInternal: Set<Platform.DevToolsPath.EncodedPathString>;
   private readonly fileLocks: Map<string, Promise<void>>;
 
   constructor(
@@ -129,7 +129,7 @@ export class IsolatedFileSystem extends PlatformFileSystem {
     const promise = new Promise<Metadata|null>(f => {
       fulfill = f;
     });
-    this.domFileSystem.root.getFile(path, undefined, fileEntryLoaded, errorHandler);
+    this.domFileSystem.root.getFile(decodeURIComponent(path), undefined, fileEntryLoaded, errorHandler);
     return promise;
 
     function fileEntryLoaded(entry: FileEntry): void {
@@ -143,11 +143,11 @@ export class IsolatedFileSystem extends PlatformFileSystem {
     }
   }
 
-  initialFilePaths(): string[] {
+  initialFilePaths(): Platform.DevToolsPath.EncodedPathString[] {
     return [...this.initialFilePathsInternal];
   }
 
-  initialGitFolders(): string[] {
+  initialGitFolders(): Platform.DevToolsPath.EncodedPathString[] {
     return [...this.initialGitFoldersInternal];
   }
 
@@ -168,12 +168,14 @@ export class IsolatedFileSystem extends PlatformFileSystem {
             if (this.isFileExcluded(entry.fullPath)) {
               continue;
             }
-            this.initialFilePathsInternal.add(entry.fullPath.substr(1));
+            this.initialFilePathsInternal.add(Common.ParsedURL.ParsedURL.rawPathToEncodedPathString(
+                entry.fullPath.substr(1) as Platform.DevToolsPath.RawPathString));
           } else {
             if (entry.fullPath.endsWith('/.git')) {
               const lastSlash = entry.fullPath.lastIndexOf('/');
               const parentFolder = entry.fullPath.substring(1, lastSlash);
-              this.initialGitFoldersInternal.add(parentFolder);
+              this.initialGitFoldersInternal.add(Common.ParsedURL.ParsedURL.rawPathToEncodedPathString(
+                  parentFolder as Platform.DevToolsPath.RawPathString));
             }
             if (this.isFileExcluded(entry.fullPath + '/')) {
               this.excludedEmbedderFolders.push(Common.ParsedURL.ParsedURL.urlToRawPathString(
@@ -221,7 +223,7 @@ export class IsolatedFileSystem extends PlatformFileSystem {
   }
 
   async createFile(path: string, name: string|null): Promise<string|null> {
-    const dirEntry = await this.createFoldersIfNotExist(path);
+    const dirEntry = await this.createFoldersIfNotExist(decodeURIComponent(path));
     if (!dirEntry) {
       return null;
     }
@@ -230,7 +232,8 @@ export class IsolatedFileSystem extends PlatformFileSystem {
     if (!fileEntry) {
       return null;
     }
-    return fileEntry.fullPath.substr(1);
+    return Common.ParsedURL.ParsedURL.rawPathToEncodedPathString(
+        fileEntry.fullPath.substr(1) as Platform.DevToolsPath.RawPathString);
 
     function createFileCandidate(
         this: IsolatedFileSystem, name: string, newFileIndex?: number): Promise<FileEntry|null> {
@@ -256,7 +259,8 @@ export class IsolatedFileSystem extends PlatformFileSystem {
     const promise = new Promise<boolean>(resolve => {
       resolveCallback = resolve;
     });
-    this.domFileSystem.root.getFile(path, undefined, fileEntryLoaded.bind(this), errorHandler.bind(this));
+    this.domFileSystem.root.getFile(
+        decodeURIComponent(path), undefined, fileEntryLoaded.bind(this), errorHandler.bind(this));
     return promise;
 
     function fileEntryLoaded(this: IsolatedFileSystem, fileEntry: FileEntry): void {
@@ -279,7 +283,7 @@ export class IsolatedFileSystem extends PlatformFileSystem {
 
   requestFileBlob(path: string): Promise<Blob|null> {
     return new Promise(resolve => {
-      this.domFileSystem.root.getFile(path, undefined, entry => {
+      this.domFileSystem.root.getFile(decodeURIComponent(path), undefined, entry => {
         entry.file(resolve, errorHandler.bind(this));
       }, errorHandler.bind(this));
 
@@ -347,7 +351,8 @@ export class IsolatedFileSystem extends PlatformFileSystem {
         // @ts-ignore TODO(crbug.com/1172300) Properly type this after jsdoc to ts migration
         callback = x;
       });
-      this.domFileSystem.root.getFile(path, {create: true}, fileEntryLoaded.bind(this), errorHandler.bind(this));
+      this.domFileSystem.root.getFile(
+          decodeURIComponent(path), {create: true}, fileEntryLoaded.bind(this), errorHandler.bind(this));
       return promise;
     };
 
@@ -391,7 +396,8 @@ export class IsolatedFileSystem extends PlatformFileSystem {
     let fileEntry: FileEntry;
     let dirEntry: DirectoryEntry;
 
-    this.domFileSystem.root.getFile(path, undefined, fileEntryLoaded.bind(this), errorHandler.bind(this));
+    this.domFileSystem.root.getFile(
+        decodeURIComponent(path), undefined, fileEntryLoaded.bind(this), errorHandler.bind(this));
 
     function fileEntryLoaded(this: IsolatedFileSystem, entry: FileEntry): void {
       if (entry.name === newName) {
@@ -458,7 +464,7 @@ export class IsolatedFileSystem extends PlatformFileSystem {
   }
 
   private requestEntries(path: string, callback: (arg0: Array<FileEntry>) => void): void {
-    this.domFileSystem.root.getDirectory(path, undefined, innerCallback.bind(this), errorHandler);
+    this.domFileSystem.root.getDirectory(decodeURIComponent(path), undefined, innerCallback.bind(this), errorHandler);
 
     function innerCallback(this: IsolatedFileSystem, dirEntry: DirectoryEntry): void {
       this.readDirectory(dirEntry, callback);

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Workspace from '../workspace/workspace.js';
@@ -31,6 +32,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
   private activeInternal: boolean;
   private enabled: boolean;
   private eventDescriptors: Common.EventTarget.EventDescriptor[];
+  #headerOverridesMap: Map<string, HeaderOverrideWithRegex[]> = new Map();
 
   private constructor(workspace: Workspace.Workspace.WorkspaceImpl) {
     super();
@@ -246,6 +248,11 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     }
   }
 
+  private fileUrlFromNetworkUrl(url: Platform.DevToolsPath.UrlString): Platform.DevToolsPath.UrlString {
+    return (this.projectInternal as FileSystem).fileSystemPath() + '/' + this.encodedPathFromUrl(url) as
+        Platform.DevToolsPath.UrlString;
+  }
+
   private decodeLocalPathToUrlPath(path: string): string {
     try {
       return unescape(path);
@@ -339,12 +346,11 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
         !this.canHandleNetworkUISourceCode(uiSourceCode)) {
       return;
     }
-    const url = Common.ParsedURL.ParsedURL.urlWithoutHash(uiSourceCode.url());
+    const url = Common.ParsedURL.ParsedURL.urlWithoutHash(uiSourceCode.url()) as Platform.DevToolsPath.UrlString;
     this.networkUISourceCodeForEncodedPath.set(this.encodedPathFromUrl(url), uiSourceCode);
 
     const project = this.projectInternal as FileSystem;
-    const fileSystemUISourceCode =
-        project.uiSourceCodeForURL(project.fileSystemPath() + '/' + this.encodedPathFromUrl(url));
+    const fileSystemUISourceCode = project.uiSourceCodeForURL(this.fileUrlFromNetworkUrl(url));
     if (fileSystemUISourceCode) {
       await this.bind(uiSourceCode, fileSystemUISourceCode);
     }
@@ -363,29 +369,97 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     }
   }
 
-  private updateInterceptionPatterns(): void {
-    void this.updateInterceptionThrottler.schedule(innerUpdateInterceptionPatterns.bind(this));
-
-    function innerUpdateInterceptionPatterns(this: NetworkPersistenceManager): Promise<void> {
-      if (!this.activeInternal || !this.projectInternal) {
-        return SDK.NetworkManager.MultitargetNetworkManager.instance().setInterceptionHandlerForPatterns(
-            [], this.interceptionHandlerBound);
+  async generateHeaderPatterns(uiSourceCode: Workspace.UISourceCode.UISourceCode):
+      Promise<{headerPatterns: Set<string>, path: string, overridesWithRegex: HeaderOverrideWithRegex[]}> {
+    const headerPatterns = new Set<string>();
+    const content = (await uiSourceCode.requestContent()).content || '';
+    let headerOverrides: HeaderOverride[] = [];
+    try {
+      headerOverrides = JSON.parse(content) as HeaderOverride[];
+      if (!headerOverrides.every(isHeaderOverride)) {
+        throw 'Type mismatch after parsing';
       }
-      const patterns = new Set<string>();
-      const indexFileName = 'index.html';
-      for (const uiSourceCode of this.projectInternal.uiSourceCodes()) {
-        const pattern = this.patternForFileSystemUISourceCode(uiSourceCode);
-        patterns.add(pattern);
-        if (pattern.endsWith('/' + indexFileName)) {
-          patterns.add(pattern.substr(0, pattern.length - indexFileName.length));
-        }
+    } catch (e) {
+      console.error('Failed to parse', uiSourceCode.url(), 'for locally overriding headers.');
+      return {headerPatterns, path: '', overridesWithRegex: []};
+    }
+    const relativePath = FileSystemWorkspaceBinding.relativePath(uiSourceCode).join('/');
+    const decodedPath = this.decodeLocalPathToUrlPath(relativePath).slice(0, -HEADERS_FILENAME.length);
+
+    const overridesWithRegex: HeaderOverrideWithRegex[] = [];
+    for (const headerOverride of headerOverrides) {
+      headerPatterns.add('http?://' + decodedPath + headerOverride.applyTo);
+
+      // Most servers have the concept of a "directory index", which is a
+      // default resource name for a request targeting a "directory", e. g.
+      // requesting "example.com/path/" would result in the same response as
+      // requesting "example.com/path/index.html". To match this behavior we
+      // generate an additional pattern without "index.html" as the longer
+      // pattern would not match against a shorter request.
+      const {head, tail} = extractDirectoryIndex(headerOverride.applyTo);
+      if (tail) {
+        headerPatterns.add('http?://' + decodedPath + head);
+
+        const pattern = escapeRegex(decodedPath + head) + '(' + escapeRegex(tail) + ')?';
+        const regex = new RegExp('^https?:\/\/' + pattern + '$');
+        overridesWithRegex.push({
+          applyToRegex: regex,
+          headers: headerOverride.headers,
+        });
+      } else {
+        const regex = new RegExp('^https?:\/\/' + escapeRegex(decodedPath + headerOverride.applyTo) + '$');
+        overridesWithRegex.push({
+          applyToRegex: regex,
+          headers: headerOverride.headers,
+        });
       }
+    }
+    return {headerPatterns, path: decodedPath, overridesWithRegex};
+  }
+
+  async updateInterceptionPatternsForTests(): Promise<void> {
+    await this.#innerUpdateInterceptionPatterns();
+  }
+
+  private updateInterceptionPatterns(): void {
+    void this.updateInterceptionThrottler.schedule(this.#innerUpdateInterceptionPatterns.bind(this));
+  }
 
+  async #innerUpdateInterceptionPatterns(): Promise<void> {
+    this.#headerOverridesMap.clear();
+    if (!this.activeInternal || !this.projectInternal) {
       return SDK.NetworkManager.MultitargetNetworkManager.instance().setInterceptionHandlerForPatterns(
-          Array.from(patterns).map(
-              pattern => ({urlPattern: pattern, requestStage: Protocol.Fetch.RequestStage.Response})),
-          this.interceptionHandlerBound);
+          [], this.interceptionHandlerBound);
+    }
+    let patterns = new Set<string>();
+    for (const uiSourceCode of this.projectInternal.uiSourceCodes()) {
+      const pattern = this.patternForFileSystemUISourceCode(uiSourceCode);
+      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES) &&
+          uiSourceCode.name() === HEADERS_FILENAME) {
+        const {headerPatterns, path, overridesWithRegex} = await this.generateHeaderPatterns(uiSourceCode);
+        if (headerPatterns.size > 0) {
+          patterns = new Set([...patterns, ...headerPatterns]);
+          this.#headerOverridesMap.set(path, overridesWithRegex);
+        }
+      } else {
+        patterns.add(pattern);
+      }
+      // Most servers have the concept of a "directory index", which is a
+      // default resource name for a request targeting a "directory", e. g.
+      // requesting "example.com/path/" would result in the same response as
+      // requesting "example.com/path/index.html". To match this behavior we
+      // generate an additional pattern without "index.html" as the longer
+      // pattern would not match against a shorter request.
+      const {head, tail} = extractDirectoryIndex(pattern);
+      if (tail) {
+        patterns.add(head);
+      }
     }
+
+    return SDK.NetworkManager.MultitargetNetworkManager.instance().setInterceptionHandlerForPatterns(
+        Array.from(patterns).map(
+            pattern => ({urlPattern: pattern, requestStage: Protocol.Fetch.RequestStage.Response})),
+        this.interceptionHandlerBound);
   }
 
   private async onUISourceCodeRemoved(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
@@ -409,7 +483,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     await this.unbind(uiSourceCode);
   }
 
-  private async setProject(project: Workspace.Workspace.Project|null): Promise<void> {
+  async setProject(project: Workspace.Workspace.Project|null): Promise<void> {
     if (project === this.projectInternal) {
       return;
     }
@@ -452,17 +526,67 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     }
   }
 
+  mergeHeaders(baseHeaders: Protocol.Fetch.HeaderEntry[], overrideHeaders: Protocol.Network.Headers):
+      Protocol.Fetch.HeaderEntry[] {
+    const result: Protocol.Fetch.HeaderEntry[] = [];
+    const headerMap = new Map<string, string>();
+    for (const header of baseHeaders) {
+      headerMap.set(header.name, header.value);
+    }
+    for (const [headerName, headerValue] of Object.entries(overrideHeaders)) {
+      headerMap.set(headerName, headerValue);
+    }
+    headerMap.forEach((headerValue, headerName) => {
+      result.push({name: headerName, value: headerValue});
+    });
+    return result;
+  }
+
+  #maybeMergeHeadersForPathSegment(path: string, requestUrl: string, headers: Protocol.Fetch.HeaderEntry[]):
+      Protocol.Fetch.HeaderEntry[] {
+    const headerOverrides = this.#headerOverridesMap.get(path) || [];
+    for (const headerOverride of headerOverrides) {
+      if (headerOverride.applyToRegex.test(requestUrl)) {
+        headers = this.mergeHeaders(headers, headerOverride.headers);
+      }
+    }
+    return headers;
+  }
+
+  handleHeaderInterception(interceptedRequest: SDK.NetworkManager.InterceptedRequest): Protocol.Fetch.HeaderEntry[] {
+    let result: Protocol.Fetch.HeaderEntry[] = interceptedRequest.responseHeaders || [];
+    const urlSegments = this.encodedPathFromUrl(interceptedRequest.request.url).split('/');
+    // Traverse the hierarchy of overrides from the most general to the most
+    // specific. Check with empty string first to match overrides applying to
+    // all domains.
+    // e.g. '', 'www.example.com/', 'www.example.com/path/', ...
+    let path = '';
+    result = this.#maybeMergeHeadersForPathSegment(path, interceptedRequest.request.url, result);
+    for (const segment of urlSegments) {
+      path += segment + '/';
+      result = this.#maybeMergeHeadersForPathSegment(path, interceptedRequest.request.url, result);
+    }
+    return result;
+  }
+
   private async interceptionHandler(interceptedRequest: SDK.NetworkManager.InterceptedRequest): Promise<void> {
     const method = interceptedRequest.request.method;
     if (!this.activeInternal || (method !== 'GET' && method !== 'POST')) {
       return;
     }
     const proj = this.projectInternal as FileSystem;
-    const path = proj.fileSystemPath() + '/' + this.encodedPathFromUrl(interceptedRequest.request.url);
+    const path = this.fileUrlFromNetworkUrl(interceptedRequest.request.url as Platform.DevToolsPath.UrlString);
     const fileSystemUISourceCode = proj.uiSourceCodeForURL(path);
-    if (!fileSystemUISourceCode) {
+    let responseHeaders: Protocol.Fetch.HeaderEntry[] = [];
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      responseHeaders = this.handleHeaderInterception(interceptedRequest);
+    }
+    if (!fileSystemUISourceCode && !responseHeaders.length) {
       return;
     }
+    if (!responseHeaders.length) {
+      responseHeaders = interceptedRequest.responseHeaders || [];
+    }
 
     let mimeType = '';
     if (interceptedRequest.responseHeaders) {
@@ -477,32 +601,41 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     if (!mimeType) {
       const expectedResourceType =
           Common.ResourceType.resourceTypes[interceptedRequest.resourceType] || Common.ResourceType.resourceTypes.Other;
-      mimeType = fileSystemUISourceCode.mimeType();
+      mimeType = fileSystemUISourceCode?.mimeType() || '';
       if (Common.ResourceType.ResourceType.fromMimeType(mimeType) !== expectedResourceType) {
         mimeType = expectedResourceType.canonicalMimeType();
       }
     }
-    const project = fileSystemUISourceCode.project() as FileSystem;
-
-    this.originalResponseContentPromises.set(
-        fileSystemUISourceCode, interceptedRequest.responseBody().then(response => {
-          if (response.error || response.content === null) {
-            return null;
-          }
-          if (response.encoded) {
-            const text = atob(response.content);
-            const data = new Uint8Array(text.length);
-            for (let i = 0; i < text.length; ++i) {
-              data[i] = text.charCodeAt(i);
-            }
-            return new TextDecoder('utf-8').decode(data);
-          }
-          return response.content;
-        }));
 
-    const blob = await project.requestFileBlob(fileSystemUISourceCode);
-    if (blob) {
-      void interceptedRequest.continueRequestWithContent(new Blob([blob], {type: mimeType}));
+    if (fileSystemUISourceCode) {
+      this.originalResponseContentPromises.set(
+          fileSystemUISourceCode, interceptedRequest.responseBody().then(response => {
+            if (response.error || response.content === null) {
+              return null;
+            }
+            if (response.encoded) {
+              const text = atob(response.content);
+              const data = new Uint8Array(text.length);
+              for (let i = 0; i < text.length; ++i) {
+                data[i] = text.charCodeAt(i);
+              }
+              return new TextDecoder('utf-8').decode(data);
+            }
+            return response.content;
+          }));
+
+      const project = fileSystemUISourceCode.project() as FileSystem;
+      const blob = await project.requestFileBlob(fileSystemUISourceCode);
+      if (blob) {
+        void interceptedRequest.continueRequestWithContent(
+            new Blob([blob], {type: mimeType}), /* encoded */ false, responseHeaders);
+      }
+    } else {
+      const responseBody = await interceptedRequest.responseBody();
+      if (!responseBody.error && responseBody.content) {
+        void interceptedRequest.continueRequestWithContent(
+            new Blob([responseBody.content], {type: mimeType}), /* encoded */ true, responseHeaders);
+      }
     }
   }
 }
@@ -512,6 +645,8 @@ const RESERVED_FILENAMES = new Set<string>([
   'com8', 'com9', 'lpt1', 'lpt2', 'lpt3', 'lpt4', 'lpt5', 'lpt6', 'lpt7', 'lpt8', 'lpt9',
 ]);
 
+const HEADERS_FILENAME = '.headers';
+
 // TODO(crbug.com/1167717): Make this a const enum again
 // eslint-disable-next-line rulesdir/const_enum
 export enum Events {
@@ -521,3 +656,36 @@ export enum Events {
 export type EventTypes = {
   [Events.ProjectChanged]: Workspace.Workspace.Project|null,
 };
+
+interface HeaderOverride {
+  applyTo: string;
+  headers: Protocol.Network.Headers;
+}
+
+interface HeaderOverrideWithRegex {
+  applyToRegex: RegExp;
+  headers: Protocol.Network.Headers;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isHeaderOverride(arg: any): arg is HeaderOverride {
+  if (!(arg && arg.applyTo && typeof (arg.applyTo === 'string') && arg.headers && Object.keys(arg.headers).length)) {
+    return false;
+  }
+  return Object.values(arg.headers).every(value => typeof value === 'string');
+}
+
+export function escapeRegex(pattern: string): string {
+  return Platform.StringUtilities.escapeCharacters(pattern, '[]{}()\\.^$+|-,?').replaceAll('*', '.*');
+}
+
+export function extractDirectoryIndex(pattern: string): {head: string, tail?: string} {
+  const lastSlash = pattern.lastIndexOf('/');
+  const tail = lastSlash >= 0 ? pattern.slice(lastSlash + 1) : pattern;
+  const head = lastSlash >= 0 ? pattern.slice(0, lastSlash + 1) : '';
+  const regex = new RegExp('^' + escapeRegex(tail) + '$');
+  if (regex.test('index.html') || regex.test('index.htm') || regex.test('index.php')) {
+    return {head, tail};
+  }
+  return {head: pattern};
+}

package/front_end/models/persistence/PlatformFileSystem.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../core/common/common.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
 
@@ -26,11 +27,11 @@ export class PlatformFileSystem {
     return Promise.resolve(null);
   }
 
-  initialFilePaths(): string[] {
+  initialFilePaths(): Platform.DevToolsPath.EncodedPathString[] {
     return [];
   }
 
-  initialGitFolders(): string[] {
+  initialGitFolders(): Platform.DevToolsPath.EncodedPathString[] {
     return [];
   }
 

package/front_end/models/timeline_model/TimelineFrameModel.ts

@@ -138,10 +138,10 @@ export class TimelineFrameModel {
     }
     this.lastBeginFrame = startTime;
 
-    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, false);
+    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, false, false);
   }
 
-  handleDroppedFrame(startTime: number, seqId: number): void {
+  handleDroppedFrame(startTime: number, seqId: number, isPartial: boolean): void {
     if (!this.lastFrame) {
       this.startFrame(startTime);
     }
@@ -149,8 +149,9 @@ export class TimelineFrameModel {
     // This line handles the case where no BeginFrame event is issued for
     // the dropped frame. In this situation, add a BeginFrame to the queue
     // as if it actually occurred.
-    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, true);
+    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, true, isPartial);
     this.beginFrameQueue.setDropped(seqId, true);
+    this.beginFrameQueue.setPartial(seqId, isPartial);
   }
 
   handleDrawFrame(startTime: number, seqId: number): void {
@@ -187,6 +188,9 @@ export class TimelineFrameModel {
         if (frame.isDropped) {
           this.lastFrame.dropped = true;
         }
+        if (frame.isPartial) {
+          this.lastFrame.isPartial = true;
+        }
       }
     }
     this.mainFrameCommitted = false;
@@ -318,7 +322,7 @@ export class TimelineFrameModel {
     } else if (event.name === RecordType.NeedsBeginFrameChanged) {
       this.handleNeedFrameChanged(timestamp, event.args['data'] && event.args['data']['needsBeginFrame']);
     } else if (event.name === RecordType.DroppedFrame) {
-      this.handleDroppedFrame(timestamp, event.args['frameSeqId']);
+      this.handleDroppedFrame(timestamp, event.args['frameSeqId'], event.args['hasPartialUpdate']);
     }
   }
 
@@ -426,6 +430,7 @@ export class TimelineFrame {
   cpuTime: number;
   idle: boolean;
   dropped: boolean;
+  isPartial: boolean;
   layerTree: TracingFrameLayerTree|null;
   paints: LayerPaintEvent[];
   mainFrameId: number|undefined;
@@ -439,6 +444,7 @@ export class TimelineFrame {
     this.cpuTime = 0;
     this.idle = false;
     this.dropped = false;
+    this.isPartial = false;
     this.layerTree = null;
     this.paints = [];
     this.mainFrameId = undefined;
@@ -545,10 +551,12 @@ class BeginFrameInfo {
   seqId: number;
   startTime: number;
   isDropped: boolean;
-  constructor(seqId: number, startTime: number, isDropped: boolean) {
+  isPartial: boolean;
+  constructor(seqId: number, startTime: number, isDropped: boolean, isPartial: boolean) {
     this.seqId = seqId;
     this.startTime = startTime;
     this.isDropped = isDropped;
+    this.isPartial = isPartial;
   }
 }
 
@@ -570,9 +578,9 @@ export class TimelineFrameBeginFrameQueue {
   }
 
   // Add a BeginFrame to the queue, if it does not already exit.
-  addFrameIfNotExists(seqId: number, startTime: number, isDropped: boolean): void {
+  addFrameIfNotExists(seqId: number, startTime: number, isDropped: boolean, isPartial: boolean): void {
     if (!(seqId in this.mapFrames)) {
-      this.mapFrames[seqId] = new BeginFrameInfo(seqId, startTime, isDropped);
+      this.mapFrames[seqId] = new BeginFrameInfo(seqId, startTime, isDropped, isPartial);
       this.queueFrames.push(seqId);
     }
   }
@@ -584,6 +592,12 @@ export class TimelineFrameBeginFrameQueue {
     }
   }
 
+  setPartial(seqId: number, isPartial: boolean): void {
+    if (seqId in this.mapFrames) {
+      this.mapFrames[seqId].isPartial = isPartial;
+    }
+  }
+
   processPendingBeginFramesOnDrawFrame(seqId: number): BeginFrameInfo[] {
     const framesToVisualize: BeginFrameInfo[] = [];
 

package/front_end/models/workspace/UISourceCode.ts

@@ -36,7 +36,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 
 import type {Project} from './WorkspaceImpl.js';
-import {Events as WorkspaceImplEvents, projectTypes} from './WorkspaceImpl.js';
+import {Events as WorkspaceImplEvents} from './WorkspaceImpl.js';
 
 const UIStrings = {
   /**
@@ -82,9 +82,13 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     if (parsedURL) {
       this.originInternal = parsedURL.securityOrigin();
       this.parentURLInternal = this.originInternal + parsedURL.folderPathComponents;
-      this.nameInternal = parsedURL.lastPathComponent;
       if (parsedURL.queryParams) {
-        this.nameInternal += '?' + parsedURL.queryParams;
+        // in case file name contains query params, it doesn't look like a normal file name anymore
+        // so it can as well remain encoded
+        this.nameInternal = parsedURL.lastPathComponent + '?' + parsedURL.queryParams;
+      } else {
+        // file name looks best decoded
+        this.nameInternal = decodeURIComponent(parsedURL.lastPathComponent);
       }
     } else {
       this.originInternal = '';
@@ -138,15 +142,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     if (!this.nameInternal) {
       return i18nString(UIStrings.index);
     }
-    let name: string = this.nameInternal;
-    try {
-      if (this.project().type() === projectTypes.FileSystem) {
-        name = unescape(name);
-      } else {
-        name = decodeURI(name);
-      }
-    } catch (error) {
-    }
+    const name = this.nameInternal;
     return skipTrim ? name : Platform.StringUtilities.trimEndWithMaxLength(name, 100);
   }
 
@@ -178,10 +174,12 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   private updateName(name: string, url: string, contentType?: Common.ResourceType.ResourceType): void {
     const oldURL = this.urlInternal;
-    this.urlInternal = this.urlInternal.substring(0, this.urlInternal.length - this.nameInternal.length) + name;
     this.nameInternal = name;
     if (url) {
       this.urlInternal = url;
+    } else {
+      this.urlInternal = Common.ParsedURL.ParsedURL.relativePathToUrlString(
+          name as Platform.DevToolsPath.RawPathString, oldURL as Platform.DevToolsPath.UrlString);
     }
     if (contentType) {
       this.contentTypeInternal = contentType;
@@ -191,7 +189,6 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         WorkspaceImplEvents.UISourceCodeRenamed, {oldURL: oldURL, uiSourceCode: this});
   }
 
-  // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
   contentURL(): string {
     return this.url();
   }

package/front_end/models/workspace/WorkspaceImpl.ts

@@ -29,6 +29,7 @@
  */
 
 import * as Common from '../../core/common/common.js';
+import type * as Platform from '../../core/platform/platform.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
 
 import type {UISourceCodeMetadata} from './UISourceCode.js';
@@ -175,7 +176,10 @@ export abstract class ProjectStore implements Project {
 
   renameUISourceCode(uiSourceCode: UISourceCode, newName: string): void {
     const oldPath = uiSourceCode.url();
-    const newPath = uiSourceCode.parentURL() ? uiSourceCode.parentURL() + '/' + newName : newName;
+    const newPath = uiSourceCode.parentURL() ?
+        Common.ParsedURL.ParsedURL.urlFromParentUrlAndName(
+            uiSourceCode.parentURL() as Platform.DevToolsPath.UrlString, newName) :
+        encodeURIComponent(newName);
     const value = this.uiSourceCodesMap.get(oldPath) as {
       uiSourceCode: UISourceCode,
       index: number,