chrome-devtools-frontend 1.0.973342 → 1.0.974080

package/config/gni/devtools_grd_files.gni

@@ -144,6 +144,8 @@ grd_files_release_sources = [
   "front_end/Images/touchCursor_2x.png",
   "front_end/Images/trash_bin_icon.svg",
   "front_end/Images/treeoutlineTriangles.svg",
+  "front_end/Images/triangle-collapsed.svg",
+  "front_end/Images/triangle-expanded.svg",
   "front_end/Images/warning_icon.svg",
   "front_end/Images/whatsnew.avif",
   "front_end/Tests.js",

package/config/gni/devtools_image_files.gni

@@ -140,6 +140,8 @@ devtools_svg_sources = [
   "three_dots_menu_icon.svg",
   "trash_bin_icon.svg",
   "treeoutlineTriangles.svg",
+  "triangle-collapsed.svg",
+  "triangle-expanded.svg",
   "warning_icon.svg",
 ]
 

package/front_end/Images/src/triangle-collapsed.svg

@@ -0,0 +1 @@
+<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M 15 10 v 28 l 20 -14 L 15 10" /></svg>

package/front_end/Images/src/triangle-expanded.svg

@@ -0,0 +1 @@
+<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M 10 10 h 28 l -14 20 L 10 10" /></svg>

package/front_end/core/common/ParsedURL.ts

@@ -301,12 +301,12 @@ export class ParsedURL {
     return index < 0 ? pathAndQuery : pathAndQuery.substr(0, index);
   }
 
-  static completeURL(baseURL: string, href: string): string|null {
+  static completeURL(baseURL: Platform.DevToolsPath.UrlString, href: string): Platform.DevToolsPath.UrlString|null {
     // Return special URLs as-is.
     const trimmedHref = href.trim();
     if (trimmedHref.startsWith('data:') || trimmedHref.startsWith('blob:') || trimmedHref.startsWith('javascript:') ||
         trimmedHref.startsWith('mailto:')) {
-      return href;
+      return href as Platform.DevToolsPath.UrlString;
     }
 
     // Return absolute URLs with normalized path and other components as-is.
@@ -315,7 +315,7 @@ export class ParsedURL {
       const securityOrigin = parsedHref.securityOrigin();
       const pathText = parsedHref.path;
       const hrefSuffix = trimmedHref.substring(securityOrigin.length + pathText.length);
-      return securityOrigin + normalizePath(pathText) + hrefSuffix;
+      return securityOrigin + normalizePath(pathText) + hrefSuffix as Platform.DevToolsPath.UrlString;
     }
 
     const parsedURL = this.fromString(baseURL);
@@ -324,12 +324,12 @@ export class ParsedURL {
     }
 
     if (parsedURL.isDataURL()) {
-      return href;
+      return href as Platform.DevToolsPath.UrlString;
     }
 
     if (href.length > 1 && href.charAt(0) === '/' && href.charAt(1) === '/') {
       // href starts with "//" which is a full URL with the protocol dropped (use the baseURL protocol).
-      return parsedURL.scheme + ':' + href;
+      return parsedURL.scheme + ':' + href as Platform.DevToolsPath.UrlString;
     }
 
     const securityOrigin = parsedURL.securityOrigin();
@@ -338,15 +338,15 @@ export class ParsedURL {
 
     // Empty href resolves to a URL without fragment.
     if (!href.length) {
-      return securityOrigin + pathText + queryText;
+      return securityOrigin + pathText + queryText as Platform.DevToolsPath.UrlString;
     }
 
     if (href.charAt(0) === '#') {
-      return securityOrigin + pathText + queryText + href;
+      return securityOrigin + pathText + queryText + href as Platform.DevToolsPath.UrlString;
     }
 
     if (href.charAt(0) === '?') {
-      return securityOrigin + pathText + href;
+      return securityOrigin + pathText + href as Platform.DevToolsPath.UrlString;
     }
 
     const hrefMatches = href.match(/^[^#?]*/);
@@ -358,7 +358,7 @@ export class ParsedURL {
     if (hrefPath.charAt(0) !== '/') {
       hrefPath = parsedURL.folderPathComponents + '/' + hrefPath;
     }
-    return securityOrigin + normalizePath(hrefPath) + hrefSuffix;
+    return securityOrigin + normalizePath(hrefPath) + hrefSuffix as Platform.DevToolsPath.UrlString;
   }
 
   static splitLineAndColumn(string: string): {

package/front_end/core/sdk/DOMModel.ts

@@ -1002,15 +1002,15 @@ export class DOMNodeShortcut {
 export class DOMDocument extends DOMNode {
   body: DOMNode|null;
   documentElement: DOMNode|null;
-  documentURL: string;
-  baseURL: string;
+  documentURL: Platform.DevToolsPath.UrlString;
+  baseURL: Platform.DevToolsPath.UrlString;
   constructor(domModel: DOMModel, payload: Protocol.DOM.Node) {
     super(domModel);
     this.body = null;
     this.documentElement = null;
     this.init(this, false, payload);
-    this.documentURL = payload.documentURL || '';
-    this.baseURL = payload.baseURL || '';
+    this.documentURL = (payload.documentURL || '') as Platform.DevToolsPath.UrlString;
+    this.baseURL = (payload.baseURL || '') as Platform.DevToolsPath.UrlString;
   }
 }
 

package/front_end/core/sdk/RemoteObject.ts

@@ -485,10 +485,18 @@ export class RemoteObjectImpl extends RemoteObject {
       result.push(remoteProperty);
     }
     for (const property of privateProperties) {
-      const propertyValue =
-          this.runtimeModelInternal.createRemoteObject((property.value as Protocol.Runtime.RemoteObject));
+      const propertyValue = property.value ? this.runtimeModelInternal.createRemoteObject(property.value) : null;
       const remoteProperty = new RemoteObjectProperty(
           property.name, propertyValue, true, true, true, false, undefined, false, undefined, true);
+
+      if (typeof property.value === 'undefined') {
+        if (property.get && property.get.type !== 'undefined') {
+          remoteProperty.getter = this.runtimeModelInternal.createRemoteObject(property.get);
+        }
+        if (property.set && property.set.type !== 'undefined') {
+          remoteProperty.setter = this.runtimeModelInternal.createRemoteObject(property.set);
+        }
+      }
       result.push(remoteProperty);
     }
 

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -140,7 +140,7 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
     if (mainFramePayload && mainFramePayload.frame.url !== ':') {
       this.dispatchEventToListeners(Events.WillLoadCachedResources);
       this.addFramesRecursively(null, mainFramePayload);
-      this.target().setInspectedURL(mainFramePayload.frame.url);
+      this.target().setInspectedURL(mainFramePayload.frame.url as Platform.DevToolsPath.UrlString);
     }
     this.#cachedResourcesProcessed = true;
     const runtimeModel = this.target().model(RuntimeModel);

package/front_end/core/sdk/SourceMap.ts

@@ -32,8 +32,6 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
-
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Common from '../common/common.js';
 import * as i18n from '../i18n/i18n.js';
@@ -61,15 +59,17 @@ const str_ = i18n.i18n.registerUIStrings('core/sdk/SourceMap.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface SourceMap {
-  compiledURL(): string;
-  url(): string;
-  sourceURLs(): string[];
-  sourceContentProvider(sourceURL: string, contentType: Common.ResourceType.ResourceType):
+  compiledURL(): Platform.DevToolsPath.UrlString;
+  url(): Platform.DevToolsPath.UrlString;
+  sourceURLs(): Platform.DevToolsPath.UrlString[];
+  sourceContentProvider(sourceURL: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType):
       TextUtils.ContentProvider.ContentProvider;
-  embeddedContentByURL(sourceURL: string): string|null;
+  embeddedContentByURL(sourceURL: Platform.DevToolsPath.UrlString): string|null;
   findEntry(lineNumber: number, columnNumber: number): SourceMapEntry|null;
-  findReverseRanges(sourceURL: string, lineNumber: number, columnNumber: number): TextUtils.TextRange.TextRange[];
-  sourceLineMapping(sourceURL: string, lineNumber: number, columnNumber: number): SourceMapEntry|null;
+  findReverseRanges(sourceURL: Platform.DevToolsPath.UrlString, lineNumber: number, columnNumber: number):
+      TextUtils.TextRange.TextRange[];
+  sourceLineMapping(sourceURL: Platform.DevToolsPath.UrlString, lineNumber: number, columnNumber: number):
+      SourceMapEntry|null;
   mappings(): SourceMapEntry[];
   mapsOrigin(): boolean;
 }
@@ -77,10 +77,10 @@ export interface SourceMap {
 export class SourceMapV3 {
   version!: number;
   file!: string|undefined;
-  sources!: string[];
+  sources!: Platform.DevToolsPath.UrlString[];
   sections!: Section[]|undefined;
   mappings!: string;
-  sourceRoot!: string|undefined;
+  sourceRoot!: Platform.DevToolsPath.UrlString|undefined;
   names!: string[]|undefined;
   sourcesContent!: string|undefined;
   constructor() {
@@ -105,13 +105,13 @@ export class Offset {
 export class SourceMapEntry {
   lineNumber: number;
   columnNumber: number;
-  sourceURL: string|undefined;
+  sourceURL: Platform.DevToolsPath.UrlString|undefined;
   sourceLineNumber: number;
   sourceColumnNumber: number;
   name: string|undefined;
 
   constructor(
-      lineNumber: number, columnNumber: number, sourceURL?: string, sourceLineNumber?: number,
+      lineNumber: number, columnNumber: number, sourceURL?: Platform.DevToolsPath.UrlString, sourceLineNumber?: number,
       sourceColumnNumber?: number, name?: string) {
     this.lineNumber = lineNumber;
     this.columnNumber = columnNumber;
@@ -136,14 +136,14 @@ for (let i = 0; i < base64Digits.length; ++i) {
   base64Map.set(base64Digits.charAt(i), i);
 }
 
-const sourceMapToSourceList = new WeakMap<SourceMapV3, string[]>();
+const sourceMapToSourceList = new WeakMap<SourceMapV3, Platform.DevToolsPath.UrlString[]>();
 
 export class TextSourceMap implements SourceMap {
   readonly #initiator: PageResourceLoadInitiator;
   #json: SourceMapV3|null;
-  readonly #compiledURLInternal: string;
-  readonly #sourceMappingURL: string;
-  readonly #baseURL: string;
+  readonly #compiledURLInternal: Platform.DevToolsPath.UrlString;
+  readonly #sourceMappingURL: Platform.DevToolsPath.UrlString;
+  readonly #baseURL: Platform.DevToolsPath.UrlString;
   #mappingsInternal: SourceMapEntry[]|null;
   readonly #sourceInfos: Map<Platform.DevToolsPath.UrlString, TextSourceMap.SourceInfo>;
 
@@ -152,12 +152,13 @@ export class TextSourceMap implements SourceMap {
    * for format description.
    */
   constructor(
-      compiledURL: string, sourceMappingURL: string, payload: SourceMapV3, initiator: PageResourceLoadInitiator) {
+      compiledURL: Platform.DevToolsPath.UrlString, sourceMappingURL: Platform.DevToolsPath.UrlString,
+      payload: SourceMapV3, initiator: PageResourceLoadInitiator) {
     this.#initiator = initiator;
     this.#json = payload;
     this.#compiledURLInternal = compiledURL;
     this.#sourceMappingURL = sourceMappingURL;
-    this.#baseURL = sourceMappingURL.startsWith('data:') ? compiledURL : sourceMappingURL;
+    this.#baseURL = (sourceMappingURL.startsWith('data:') ? compiledURL : sourceMappingURL);
 
     this.#mappingsInternal = null;
     this.#sourceInfos = new Map();
@@ -174,8 +175,9 @@ export class TextSourceMap implements SourceMap {
   /**
    * @throws {!Error}
    */
-  static async load(sourceMapURL: string, compiledURL: string, initiator: PageResourceLoadInitiator):
-      Promise<TextSourceMap> {
+  static async load(
+      sourceMapURL: Platform.DevToolsPath.UrlString, compiledURL: Platform.DevToolsPath.UrlString,
+      initiator: PageResourceLoadInitiator): Promise<TextSourceMap> {
     let updatedContent;
     try {
       const {content} = await PageResourceLoader.instance().loadResource(sourceMapURL, initiator);
@@ -195,11 +197,11 @@ export class TextSourceMap implements SourceMap {
     }
   }
 
-  compiledURL(): string {
+  compiledURL(): Platform.DevToolsPath.UrlString {
     return this.#compiledURLInternal;
   }
 
-  url(): string {
+  url(): Platform.DevToolsPath.UrlString {
     return this.#sourceMappingURL;
   }
 
@@ -216,8 +218,8 @@ export class TextSourceMap implements SourceMap {
     return new CompilerSourceMappingContentProvider(sourceURL, contentType, this.#initiator);
   }
 
-  embeddedContentByURL(sourceURL: string): string|null {
-    const entry = this.#sourceInfos.get(sourceURL as Platform.DevToolsPath.UrlString);
+  embeddedContentByURL(sourceURL: Platform.DevToolsPath.UrlString): string|null {
+    const entry = this.#sourceInfos.get(sourceURL);
     if (!entry) {
       return null;
     }
@@ -231,7 +233,8 @@ export class TextSourceMap implements SourceMap {
     return index ? mappings[index - 1] : null;
   }
 
-  sourceLineMapping(sourceURL: string, lineNumber: number, columnNumber: number): SourceMapEntry|null {
+  sourceLineMapping(sourceURL: Platform.DevToolsPath.UrlString, lineNumber: number, columnNumber: number):
+      SourceMapEntry|null {
     const mappings = this.mappings();
     const reverseMappings = this.reversedMappings(sourceURL);
     const first = Platform.ArrayUtilities.lowerBound(reverseMappings, lineNumber, lineComparator);
@@ -253,7 +256,8 @@ export class TextSourceMap implements SourceMap {
     }
   }
 
-  private findReverseIndices(sourceURL: string, lineNumber: number, columnNumber: number): number[] {
+  private findReverseIndices(sourceURL: Platform.DevToolsPath.UrlString, lineNumber: number, columnNumber: number):
+      number[] {
     const mappings = this.mappings();
     const reverseMappings = this.reversedMappings(sourceURL);
     const endIndex = Platform.ArrayUtilities.upperBound(
@@ -271,12 +275,14 @@ export class TextSourceMap implements SourceMap {
     return reverseMappings.slice(startIndex, endIndex);
   }
 
-  findReverseEntries(sourceURL: string, lineNumber: number, columnNumber: number): SourceMapEntry[] {
+  findReverseEntries(sourceURL: Platform.DevToolsPath.UrlString, lineNumber: number, columnNumber: number):
+      SourceMapEntry[] {
     const mappings = this.mappings();
     return this.findReverseIndices(sourceURL, lineNumber, columnNumber).map(i => mappings[i]);
   }
 
-  findReverseRanges(sourceURL: string, lineNumber: number, columnNumber: number): TextUtils.TextRange.TextRange[] {
+  findReverseRanges(sourceURL: Platform.DevToolsPath.UrlString, lineNumber: number, columnNumber: number):
+      TextUtils.TextRange.TextRange[] {
     const mappings = this.mappings();
     const indices = this.findReverseIndices(sourceURL, lineNumber, columnNumber);
     const ranges: TextUtils.TextRange.TextRange[] = [];
@@ -308,8 +314,8 @@ export class TextSourceMap implements SourceMap {
     return this.#mappingsInternal;
   }
 
-  private reversedMappings(sourceURL: string): number[] {
-    const info = this.#sourceInfos.get(sourceURL as Platform.DevToolsPath.UrlString);
+  private reversedMappings(sourceURL: Platform.DevToolsPath.UrlString): number[] {
+    const info = this.#sourceInfos.get(sourceURL);
     if (!info) {
       return [];
     }
@@ -354,9 +360,9 @@ export class TextSourceMap implements SourceMap {
 
   private parseSources(sourceMap: SourceMapV3): void {
     const sourcesList = [];
-    let sourceRoot = sourceMap.sourceRoot || '';
+    let sourceRoot = sourceMap.sourceRoot || '' as Platform.DevToolsPath.UrlString;
     if (sourceRoot && !sourceRoot.endsWith('/')) {
-      sourceRoot += '/';
+      sourceRoot = Common.ParsedURL.ParsedURL.concatenate(sourceRoot, '/');
     }
     for (let i = 0; i < sourceMap.sources.length; ++i) {
       let href = sourceMap.sources[i];
@@ -366,14 +372,14 @@ export class TextSourceMap implements SourceMap {
       // be meaningful or useful if the source URL is already absolute though. In this
       // case, use the source URL as is without prepending the sourceRoot.
       if (Common.ParsedURL.ParsedURL.isRelativeURL(href)) {
-        href = sourceRoot + href;
+        href = Common.ParsedURL.ParsedURL.concatenate(sourceRoot, href);
       }
       let url = Common.ParsedURL.ParsedURL.completeURL(this.#baseURL, href) || href;
       const source = sourceMap.sourcesContent && sourceMap.sourcesContent[i];
       if (url === this.#compiledURLInternal && source) {
-        url += '? [sm]';
+        url = Common.ParsedURL.ParsedURL.concatenate(url, '? [sm]');
       }
-      this.#sourceInfos.set(url as Platform.DevToolsPath.UrlString, new TextSourceMap.SourceInfo(source || null, null));
+      this.#sourceInfos.set(url, new TextSourceMap.SourceInfo(source || null, null));
       sourcesList.push(url);
     }
     sourceMapToSourceList.set(sourceMap, sourcesList);
@@ -393,7 +399,7 @@ export class TextSourceMap implements SourceMap {
     const sources = sourceMapToSourceList.get(map);
     const names = map.names || [];
     const stringCharIterator = new TextSourceMap.StringCharIterator(map.mappings);
-    let sourceURL: string|(string | undefined) = sources && sources[sourceIndex];
+    let sourceURL: Platform.DevToolsPath.UrlString|undefined = sources && sources[sourceIndex];
 
     while (true) {
       if (stringCharIterator.peek() === ',') {
@@ -461,7 +467,8 @@ export class TextSourceMap implements SourceMap {
     return negative ? -result : result;
   }
 
-  reverseMapTextRange(url: string, textRange: TextUtils.TextRange.TextRange): TextUtils.TextRange.TextRange|null {
+  reverseMapTextRange(url: Platform.DevToolsPath.UrlString, textRange: TextUtils.TextRange.TextRange):
+      TextUtils.TextRange.TextRange|null {
     function comparator(
         position: {
           lineNumber: number,

package/front_end/core/sdk/SourceMapManager.ts

@@ -110,8 +110,8 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
   }
 
   private resolveRelativeURLs(sourceURL: string, sourceMapURL: string): {
-    sourceURL: string,
-    sourceMapURL: string,
+    sourceURL: Platform.DevToolsPath.UrlString,
+    sourceMapURL: Platform.DevToolsPath.UrlString,
     sourceMapId: string,
   }|null {
     // |#sourceURL| can be a random string, but is generally an absolute path.

package/front_end/core/sdk/Target.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../common/common.js';
 import * as Host from '../host/host.js';
+import type * as Platform from '../platform/platform.js';
 import * as ProtocolClient from '../protocol_client/protocol_client.js';
 import type * as Protocol from '../../generated/protocol.js';
 import type {TargetManager} from './TargetManager.js';
@@ -12,7 +13,7 @@ import {SDKModel} from './SDKModel.js';
 export class Target extends ProtocolClient.InspectorBackend.TargetBase {
   readonly #targetManagerInternal: TargetManager;
   #nameInternal: string;
-  #inspectedURLInternal: string;
+  #inspectedURLInternal: Platform.DevToolsPath.UrlString;
   #inspectedURLName: string;
   readonly #capabilitiesMask: number;
   #typeInternal: Type;
@@ -31,7 +32,7 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
     super(needsNodeJSPatching, parentTarget, sessionId, connection);
     this.#targetManagerInternal = targetManager;
     this.#nameInternal = name;
-    this.#inspectedURLInternal = '';
+    this.#inspectedURLInternal = '' as Platform.DevToolsPath.UrlString;
     this.#inspectedURLName = '';
     this.#capabilitiesMask = 0;
     switch (type) {
@@ -165,11 +166,11 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
     return this.#modelByConstructor;
   }
 
-  inspectedURL(): string {
+  inspectedURL(): Platform.DevToolsPath.UrlString {
     return this.#inspectedURLInternal;
   }
 
-  setInspectedURL(inspectedURL: string): void {
+  setInspectedURL(inspectedURL: Platform.DevToolsPath.UrlString): void {
     this.#inspectedURLInternal = inspectedURL;
     const parsedURL = Common.ParsedURL.ParsedURL.fromString(inspectedURL);
     this.#inspectedURLName = parsedURL ? parsedURL.lastPathComponentWithFragment() : '#' + this.#idInternal;

package/front_end/entrypoints/node_app/NodeMain.ts

@@ -6,6 +6,7 @@ import type * 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 Components from '../../ui/legacy/components/utils/utils.js';
+import type * as Platform from '../../core/platform/platform.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 
@@ -40,7 +41,7 @@ export class NodeMainImpl implements Common.Runnable.Runnable {
     void SDK.Connections.initMainConnection(async () => {
       const target = SDK.TargetManager.TargetManager.instance().createTarget(
           'main', i18nString(UIStrings.main), SDK.Target.Type.Browser, null);
-      target.setInspectedURL('Node.js');
+      target.setInspectedURL('Node.js' as Platform.DevToolsPath.UrlString);
     }, Components.TargetDetachedDialog.TargetDetachedDialog.webSocketConnectionLost);
   }
 }

package/front_end/models/bindings/CompilerScriptMapping.ts

@@ -30,6 +30,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
@@ -327,11 +328,11 @@ const uiSourceCodeToBinding = new WeakMap<Workspace.UISourceCode.UISourceCode, B
 
 class Binding {
   readonly #project: ContentProviderBasedProject;
-  readonly #url: string;
+  readonly #url: Platform.DevToolsPath.UrlString;
   referringSourceMaps: SDK.SourceMap.SourceMap[];
   uiSourceCode: Workspace.UISourceCode.UISourceCode|null;
 
-  constructor(project: ContentProviderBasedProject, url: string) {
+  constructor(project: ContentProviderBasedProject, url: Platform.DevToolsPath.UrlString) {
     this.#project = project;
     this.#url = url;
 

package/front_end/models/bindings/SASSSourceMapping.ts

@@ -79,7 +79,7 @@ export class SASSSourceMapping implements SourceMapping {
     for (const sourceURL of sourceMap.sourceURLs()) {
       let binding = bindings.get(sourceURL);
       if (!binding) {
-        binding = new Binding(project, sourceURL as Platform.DevToolsPath.UrlString);
+        binding = new Binding(project, sourceURL);
         bindings.set(sourceURL, binding);
       }
       binding.addSourceMap(sourceMap, header.frameId);

package/front_end/models/formatter/SourceFormatter.ts

@@ -129,7 +129,7 @@ export class SourceFormatter {
         let count = 0;
         let suffix = '';
         do {
-          formattedURL = `${uiSourceCode.url()}:formatted${suffix}`;
+          formattedURL = Common.ParsedURL.ParsedURL.concatenate(uiSourceCode.url(), ':formatted', suffix);
           suffix = `:${count++}`;
         } while (this.project.uiSourceCodeForURL(formattedURL));
         const contentProvider = TextUtils.StaticContentProvider.StaticContentProvider.fromString(

package/front_end/models/text_utils/StaticContentProvider.ts

@@ -21,14 +21,14 @@ export class StaticContentProvider implements ContentProvider {
     this.lazyContent = lazyContent;
   }
 
-  static fromString(contentURL: string, contentType: Common.ResourceType.ResourceType, content: string):
-      StaticContentProvider {
+  static fromString(
+      contentURL: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType,
+      content: string): StaticContentProvider {
     const lazyContent = (): Promise<{
       content: string,
       isEncoded: boolean,
     }> => Promise.resolve({content, isEncoded: false});
-    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-    return new StaticContentProvider(contentURL as Platform.DevToolsPath.UrlString, contentType, lazyContent);
+    return new StaticContentProvider(contentURL, contentType, lazyContent);
   }
 
   contentURL(): Platform.DevToolsPath.UrlString {

package/front_end/models/workspace/UISourceCode.ts

@@ -235,6 +235,13 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.contentInternal as TextUtils.ContentProvider.DeferredContent;
   }
 
+  #decodeContent(content: TextUtils.ContentProvider.DeferredContent|null): string|null {
+    if (!content) {
+      return null;
+    }
+    return content.isEncoded && content.content ? window.atob(content.content) : content.content;
+  }
+
   async checkContentUpdated(): Promise<void> {
     if (!this.contentLoadedInternal && !this.forceLoadOnCheckContentInternal) {
       return;
@@ -260,7 +267,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       return;
     }
 
-    if (this.contentInternal?.content === updatedContent.content) {
+    if (this.#decodeContent(this.contentInternal) === this.#decodeContent(updatedContent)) {
       this.lastAcceptedContent = null;
       return;
     }

package/front_end/panels/application/AppManifestView.ts

@@ -16,6 +16,8 @@ import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 
+// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
+
 const UIStrings = {
   /**
   *@description Text in App Manifest View of the Application panel
@@ -640,7 +642,8 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
 
     this.startURLField.removeChildren();
     if (startURL) {
-      const completeURL = (Common.ParsedURL.ParsedURL.completeURL(url, startURL) as string);
+      const completeURL =
+          (Common.ParsedURL.ParsedURL.completeURL(url as Platform.DevToolsPath.UrlString, startURL) as string);
       const link = Components.Linkifier.Linkifier.linkifyURL(
           completeURL, ({text: startURL} as Components.Linkifier.LinkifyURLOptions));
       link.tabIndex = 0;
@@ -691,7 +694,8 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     this.newNoteUrlField.parentElement?.classList.toggle('hidden', !hasNewNoteUrl);
     this.newNoteUrlField.removeChildren();
     if (hasNewNoteUrl) {
-      const completeURL = (Common.ParsedURL.ParsedURL.completeURL(url, newNoteUrl) as string);
+      const completeURL =
+          (Common.ParsedURL.ParsedURL.completeURL(url as Platform.DevToolsPath.UrlString, newNoteUrl) as string);
       const link = Components.Linkifier.Linkifier.linkifyURL(
           completeURL, ({text: newNoteUrl} as Components.Linkifier.LinkifyURLOptions));
       link.tabIndex = 0;
@@ -761,7 +765,8 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
         shortcutSection.appendFlexedField('Description', shortcut.description);
       }
       const urlField = shortcutSection.appendFlexedField('URL');
-      const shortcutUrl = (Common.ParsedURL.ParsedURL.completeURL(url, shortcut.url) as string);
+      const shortcutUrl =
+          (Common.ParsedURL.ParsedURL.completeURL(url as Platform.DevToolsPath.UrlString, shortcut.url) as string);
       const link = Components.Linkifier.Linkifier.linkifyURL(
           shortcutUrl, ({text: shortcut.url} as Components.Linkifier.LinkifyURLOptions));
       link.tabIndex = 0;
@@ -1021,7 +1026,8 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
       imageResourceErrors.push(i18nString(UIStrings.sSrcIsNotSet, {PH1: resourceName}));
       return {imageResourceErrors};
     }
-    const imageUrl = Common.ParsedURL.ParsedURL.completeURL(baseUrl, imageResource['src']);
+    const imageUrl =
+        Common.ParsedURL.ParsedURL.completeURL(baseUrl as Platform.DevToolsPath.UrlString, imageResource['src']);
     if (!imageUrl) {
       imageResourceErrors.push(
           i18nString(UIStrings.sUrlSFailedToParse, {PH1: resourceName, PH2: imageResource['src']}));

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -32,6 +32,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -319,7 +320,7 @@ export class DOMStorageItemsView extends StorageItemsView {
     const value = entry && entry.data && entry.data.value;
     if (entry && entry.data && entry.data.value) {
       const protocol = this.domStorage.isLocalStorage ? 'localstorage' : 'sessionstorage';
-      const url = `${protocol}://${entry.key}`;
+      const url = `${protocol}://${entry.key}` as Platform.DevToolsPath.UrlString;
       const provider = TextUtils.StaticContentProvider.StaticContentProvider.fromString(
           url, Common.ResourceType.resourceTypes.XHR, (value as string));
       const preview = await SourceFrame.PreviewFactory.PreviewFactory.createPreview(provider, 'text/plain');

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -15,6 +15,9 @@ import {InterestGroupStorageView} from './InterestGroupStorageView.js';
 const UIStrings = {
   /**
   *@description Label for an item in the Application Panel Sidebar of the Application panel
+  * An interest group is an ad targeting group stored on the browser that can
+  * be used to show a certain set of advertisements in the future as the
+  * outcome of a FLEDGE auction. (https://developer.chrome.com/blog/fledge-api/)
   */
   interestGroups: 'Interest Groups',
 };

package/front_end/panels/application/components/InterestGroupAccessGrid.ts

@@ -14,22 +14,33 @@ import interestGroupAccessGridStyles from './interestGroupAccessGrid.css.js';
 const UIStrings = {
   /**
   *@description Hover text for an info icon in the Interest Group Event panel
+  * An interest group is an ad targeting group stored on the browser that can
+  * be used to show a certain set of advertisements in the future as the
+  * outcome of a FLEDGE auction.
   */
   allInterestGroupStorageEvents: 'All interest group storage events.',
   /**
     *@description Text in InterestGroupStorage Items View of the Application panel
+    * Date and time of an Interest Group storage event in a locale-
+    * dependent format.
     */
   eventTime: 'Event Time',
   /**
   *@description Text in InterestGroupStorage Items View of the Application panel
+  * Type of interest group event such as 'join', 'bid', 'win', or 'leave'.
   */
   eventType: 'Access Type',
   /**
    *@description Text in InterestGroupStorage Items View of the Application panel
+   * Owner of the interest group. The origin that controls the
+   * content of information associated with the interest group such as which
+   * ads get displayed.
   */
   groupOwner: 'Owner',
   /**
    *@description Text in InterestGroupStorage Items View of the Application panel
+   * Name of the interest group. The name is unique per-owner and identifies the
+   * interest group.
   */
   groupName: 'Name',
   /**