chrome-devtools-frontend 1.0.981537 → 1.0.982087

package/front_end/core/common/ParsedURL.ts

@@ -254,6 +254,11 @@ export class ParsedURL {
     return devToolsPath.trim() as DevToolsPathType;
   }
 
+  static slice<DevToolsPathType extends BrandedPathString>(
+      devToolsPath: DevToolsPathType, start?: number, end?: number): DevToolsPathType {
+    return devToolsPath.slice(start, end) as DevToolsPathType;
+  }
+
   static join<DevToolsPathType extends Platform.DevToolsPath.UrlString|Platform.DevToolsPath.RawPathString|
                                        Platform.DevToolsPath.EncodedPathString>(
       devToolsPaths: DevToolsPathType[], separator?: string): DevToolsPathType {

package/front_end/core/host/InspectorFrontendHost.ts

@@ -53,7 +53,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const MAX_RECORDED_HISTOGRAMS_SIZE = 100;
 
 export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
-  readonly #urlsBeingSaved: Map<string, string[]>;
+  readonly #urlsBeingSaved: Map<Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString, string[]>;
   events!: Common.EventTarget.EventTarget<EventTypes>;
 
   recordedEnumeratedHistograms: {actionName: EnumeratedHistogram, actionCode: number}[] = [];
@@ -122,7 +122,7 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
   setInjectedScriptForOrigin(origin: string, script: string): void {
   }
 
-  inspectedURLChanged(url: string): void {
+  inspectedURLChanged(url: Platform.DevToolsPath.UrlString): void {
     document.title = i18nString(UIStrings.devtoolsS, {PH1: url.replace(/^https?:\/\//, '')});
   }
 
@@ -133,7 +133,7 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
     void navigator.clipboard.writeText(text);
   }
 
-  openInNewTab(url: string): void {
+  openInNewTab(url: Platform.DevToolsPath.UrlString): void {
     window.open(url, '_blank');
   }
 
@@ -142,7 +142,8 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
         'Show item in folder is not enabled in hosted mode. Please inspect using chrome://inspect');
   }
 
-  save(url: string, content: string, forceSaveAs: boolean): void {
+  save(url: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString, content: string, forceSaveAs: boolean):
+      void {
     let buffer = this.#urlsBeingSaved.get(url);
     if (!buffer) {
       buffer = [];
@@ -152,7 +153,7 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
     this.events.dispatchEventToListeners(Events.SavedURL, {url, fileSystemPath: url});
   }
 
-  append(url: string, content: string): void {
+  append(url: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString, content: string): void {
     const buffer = this.#urlsBeingSaved.get(url);
     if (buffer) {
       buffer.push(content);
@@ -160,7 +161,7 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
     }
   }
 
-  close(url: string): void {
+  close(url: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString): void {
     const buffer = this.#urlsBeingSaved.get(url) || [];
     this.#urlsBeingSaved.delete(url);
     let fileName = '';

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -127,8 +127,8 @@ export interface RevealSourceLineEvent {
 }
 
 export interface SavedURLEvent {
-  url: string;
-  fileSystemPath: string;
+  url: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString;
+  fileSystemPath: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString;
 }
 
 export interface SearchCompletedEvent {
@@ -142,8 +142,8 @@ export interface SearchCompletedEvent {
 // Please note that the "dispatch" side can't be type-checked as the dispatch is
 // done dynamically.
 export type EventTypes = {
-  [Events.AppendedToURL]: string,
-  [Events.CanceledSaveURL]: string,
+  [Events.AppendedToURL]: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString,
+  [Events.CanceledSaveURL]: Platform.DevToolsPath.UrlString,
   [Events.ContextMenuCleared]: void,
   [Events.ContextMenuItemSelected]: number,
   [Events.DeviceCountUpdated]: number,
@@ -197,7 +197,7 @@ export interface InspectorFrontendHostAPI {
 
   inspectElementCompleted(): void;
 
-  openInNewTab(url: string): void;
+  openInNewTab(url: Platform.DevToolsPath.UrlString): void;
 
   showItemInFolder(fileSystemPath: string): void;
 
@@ -205,11 +205,11 @@ export interface InspectorFrontendHostAPI {
 
   requestFileSystems(): void;
 
-  save(url: string, content: string, forceSaveAs: boolean): void;
+  save(url: Platform.DevToolsPath.UrlString, content: string, forceSaveAs: boolean): void;
 
-  append(url: string, content: string): void;
+  append(url: Platform.DevToolsPath.UrlString, content: string): void;
 
-  close(url: string): void;
+  close(url: Platform.DevToolsPath.UrlString): void;
 
   searchInPath(requestId: number, fileSystemPath: string, query: string): void;
 

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

@@ -9245,12 +9245,24 @@
   "panels/sources/CallStackSidebarPane.ts | showMore": {
     "message": "Show more"
   },
+  "panels/sources/components/HeadersView.ts | addHeader": {
+    "message": "Add a header"
+  },
+  "panels/sources/components/HeadersView.ts | addHeaderOverride": {
+    "message": "Add header override"
+  },
   "panels/sources/components/HeadersView.ts | errorWhenParsing": {
     "message": "Error when parsing ''{PH1}''."
   },
   "panels/sources/components/HeadersView.ts | parsingErrorExplainer": {
     "message": "This is most likely due to a syntax error in ''{PH1}''. Try opening this file in an external editor to fix the error or delete the file and re-create the override."
   },
+  "panels/sources/components/HeadersView.ts | removeBlock": {
+    "message": "Remove this 'ApplyTo'-section"
+  },
+  "panels/sources/components/HeadersView.ts | removeHeader": {
+    "message": "Remove this header"
+  },
   "panels/sources/CoveragePlugin.ts | clickToShowCoveragePanel": {
     "message": "Click to show Coverage Panel"
   },

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

@@ -9245,12 +9245,24 @@
   "panels/sources/CallStackSidebarPane.ts | showMore": {
     "message": "Ŝh́ôẃ m̂ór̂é"
   },
+  "panels/sources/components/HeadersView.ts | addHeader": {
+    "message": "Âd́d̂ á ĥéâd́êŕ"
+  },
+  "panels/sources/components/HeadersView.ts | addHeaderOverride": {
+    "message": "Âd́d̂ h́êád̂ér̂ óv̂ér̂ŕîd́ê"
+  },
   "panels/sources/components/HeadersView.ts | errorWhenParsing": {
     "message": "Êŕr̂ór̂ ẃĥén̂ ṕâŕŝín̂ǵ ''{PH1}''."
   },
   "panels/sources/components/HeadersView.ts | parsingErrorExplainer": {
     "message": "T̂h́îś îś m̂óŝt́ l̂ík̂él̂ý d̂úê t́ô á ŝýn̂t́âx́ êŕr̂ór̂ ín̂ ''{PH1}''. T́r̂ý ôṕêńîńĝ t́ĥíŝ f́îĺê ín̂ án̂ éx̂t́êŕn̂ál̂ éd̂ít̂ór̂ t́ô f́îx́ t̂h́ê ér̂ŕôŕ ôŕ d̂él̂ét̂é t̂h́ê f́îĺê án̂d́ r̂é-ĉŕêát̂é t̂h́ê óv̂ér̂ŕîd́ê."
   },
+  "panels/sources/components/HeadersView.ts | removeBlock": {
+    "message": "R̂ém̂óv̂é t̂h́îś 'ApplyTo'-ŝéĉt́îón̂"
+  },
+  "panels/sources/components/HeadersView.ts | removeHeader": {
+    "message": "R̂ém̂óv̂é t̂h́îś ĥéâd́êŕ"
+  },
   "panels/sources/CoveragePlugin.ts | clickToShowCoveragePanel": {
     "message": "Ĉĺîćk̂ t́ô śĥóŵ Ćôv́êŕâǵê Ṕâńêĺ"
   },

package/front_end/core/sdk/Target.ts

@@ -175,7 +175,8 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
     const parsedURL = Common.ParsedURL.ParsedURL.fromString(inspectedURL);
     this.#inspectedURLName = parsedURL ? parsedURL.lastPathComponentWithFragment() : '#' + this.#idInternal;
     if (!this.parentTarget()) {
-      Host.InspectorFrontendHost.InspectorFrontendHostInstance.inspectedURLChanged(inspectedURL || '');
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.inspectedURLChanged(
+          inspectedURL || Platform.DevToolsPath.EmptyUrlString);
     }
     this.#targetManagerInternal.onInspectedURLChange(this);
     if (!this.#nameInternal) {

package/front_end/models/bindings/FileUtils.ts

@@ -29,6 +29,7 @@
  */
 
 import type * as Common from '../../core/common/common.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as Workspace from '../workspace/workspace.js';
 
 export interface ChunkedReader {
@@ -206,13 +207,13 @@ export class ChunkedFileReader implements ChunkedReader {
 
 export class FileOutputStream implements Common.StringOutputStream.OutputStream {
   #writeCallbacks: (() => void)[];
-  #fileName!: string;
+  #fileName!: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString;
   #closed?: boolean;
   constructor() {
     this.#writeCallbacks = [];
   }
 
-  async open(fileName: string): Promise<boolean> {
+  async open(fileName: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString): Promise<boolean> {
     this.#closed = false;
     this.#writeCallbacks = [];
     this.#fileName = fileName;

package/front_end/models/workspace/FileManager.ts

@@ -30,15 +30,17 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import type * as Platform from '../../core/platform/platform.js';
 
 let fileManagerInstance: FileManager|null;
 
 interface SaveCallbackParam {
-  fileSystemPath?: string;
+  fileSystemPath?: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString;
 }
 
 export class FileManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  private readonly saveCallbacks: Map<string, (arg0: SaveCallbackParam|null) => void>;
+  private readonly saveCallbacks:
+      Map<Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString, (arg0: SaveCallbackParam|null) => void>;
   private constructor() {
     super();
     this.saveCallbacks = new Map();
@@ -59,7 +61,8 @@ export class FileManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return fileManagerInstance;
   }
 
-  save(url: string, content: string, forceSaveAs: boolean): Promise<SaveCallbackParam|null> {
+  save(url: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString, content: string, forceSaveAs: boolean):
+      Promise<SaveCallbackParam|null> {
     // Remove this url from the saved URLs while it is being saved.
     const result = new Promise<SaveCallbackParam|null>(resolve => this.saveCallbacks.set(url, resolve));
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.save(url, content, forceSaveAs);
@@ -75,7 +78,7 @@ export class FileManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     }
   }
 
-  private canceledSavedURL({data: url}: Common.EventTarget.EventTargetEvent<string>): void {
+  private canceledSavedURL({data: url}: Common.EventTarget.EventTargetEvent<Platform.DevToolsPath.UrlString>): void {
     const callback = this.saveCallbacks.get(url);
     this.saveCallbacks.delete(url);
     if (callback) {
@@ -83,11 +86,11 @@ export class FileManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     }
   }
 
-  append(url: string, content: string): void {
+  append(url: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString, content: string): void {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.append(url, content);
   }
 
-  close(url: string): void {
+  close(url: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString): void {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.close(url);
   }
 

package/front_end/panels/application/BackgroundServiceView.ts

@@ -457,7 +457,8 @@ export class BackgroundServiceView extends UI.Widget.VBox {
    * Saves all currently displayed events in a file (JSON format).
    */
   private async saveToFile(): Promise<void> {
-    const fileName = `${this.serviceName}-${Platform.DateUtilities.toISO8601Compact(new Date())}.json`;
+    const fileName = `${this.serviceName}-${Platform.DateUtilities.toISO8601Compact(new Date())}.json` as
+        Platform.DevToolsPath.RawPathString;
     const stream = new Bindings.FileUtils.FileOutputStream();
 
     const accepted = await stream.open(fileName);

package/front_end/panels/console/ConsoleView.ts

@@ -1076,7 +1076,9 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   private async saveConsole(): Promise<void> {
     const url = (SDK.TargetManager.TargetManager.instance().mainTarget() as SDK.Target.Target).inspectedURL();
     const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
-    const filename = Platform.StringUtilities.sprintf('%s-%d.log', parsedURL ? parsedURL.host : 'console', Date.now());
+    const filename =
+        Platform.StringUtilities.sprintf('%s-%d.log', parsedURL ? parsedURL.host : 'console', Date.now()) as
+        Platform.DevToolsPath.RawPathString;
     const stream = new Bindings.FileUtils.FileOutputStream();
 
     const progressIndicator = new UI.ProgressIndicator.ProgressIndicator();

package/front_end/panels/coverage/CoverageView.ts

@@ -506,7 +506,8 @@ export class CoverageView extends UI.Widget.VBox {
 
   private async exportReport(): Promise<void> {
     const fos = new Bindings.FileUtils.FileOutputStream();
-    const fileName = `Coverage-${Platform.DateUtilities.toISO8601Compact(new Date())}.json`;
+    const fileName =
+        `Coverage-${Platform.DateUtilities.toISO8601Compact(new Date())}.json` as Platform.DevToolsPath.RawPathString;
     const accepted = await fos.open(fileName);
     if (!accepted) {
       return;

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -6,6 +6,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 EmulationModel from '../../models/emulation/emulation.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
@@ -389,7 +390,7 @@ export class DeviceModeToolbar {
 
   private experimentalClicked(): void {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-        'chrome://flags/#enable-experimental-web-platform-features');
+        'chrome://flags/#enable-experimental-web-platform-features' as Platform.DevToolsPath.UrlString);
   }
 
   private fillOptionsToolbar(toolbar: UI.Toolbar.Toolbar): void {

package/front_end/panels/input/InputTimeline.ts

@@ -182,7 +182,8 @@ export class InputTimeline extends UI.Widget.VBox implements Timeline.TimelineLo
       return;
     }
 
-    const fileName = `InputProfile-${Platform.DateUtilities.toISO8601Compact(new Date())}.json`;
+    const fileName = `InputProfile-${Platform.DateUtilities.toISO8601Compact(new Date())}.json` as
+        Platform.DevToolsPath.RawPathString;
     const stream = new Bindings.FileUtils.FileOutputStream();
 
     const accepted = await stream.open(fileName);

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -184,7 +184,7 @@ export class LighthouseReportUIFeatures extends LighthouseReport.ReportUIFeature
     const sanitizedDomain = domain.replace(/[^a-z0-9.-]+/gi, '_');
     const timestamp = Platform.DateUtilities.toISO8601Compact(new Date(this.json.fetchTime));
     const ext = blob.type.match('json') ? '.json' : '.html';
-    const basename = `${sanitizedDomain}-${timestamp}${ext}`;
+    const basename = `${sanitizedDomain}-${timestamp}${ext}` as Platform.DevToolsPath.RawPathString;
     const text = await blob.text();
     void Workspace.FileManager.FileManager.instance().save(basename, text, true /* forceSaveAs */);
   }

package/front_end/panels/network/NetworkLogView.ts

@@ -1673,10 +1673,10 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     }
     const url = mainTarget.inspectedURL();
     const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
-    const filename = parsedURL ? parsedURL.host : 'network-log';
+    const filename = (parsedURL ? parsedURL.host : 'network-log') as Platform.DevToolsPath.RawPathString;
     const stream = new Bindings.FileUtils.FileOutputStream();
 
-    if (!await stream.open(filename + '.har')) {
+    if (!await stream.open(Common.ParsedURL.ParsedURL.concatenate(filename, '.har'))) {
       return;
     }
 

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1557,7 +1557,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 +1713,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/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/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';
 
@@ -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/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/sources/components/HeadersView.css

@@ -16,8 +16,7 @@
   font-family: var(--monospace-font-family);
   font-size: var(--monospace-font-size);
   align-items: center;
-  line-height: 18px;
-  margin-top: 3px;
+  line-height: 24px;
 }
 
 .row devtools-button {
@@ -57,6 +56,18 @@
   border-radius: 2px;
 }
 
+.row .inline-button {
+  opacity: 0%;
+  visibility: hidden;
+  transition: opacity 200ms;
+}
+
+.row:focus-within .inline-button,
+.row:hover .inline-button {
+  opacity: 100%;
+  visibility: visible;
+}
+
 .center-wrapper {
   height: 100%;
   display: flex;
@@ -79,3 +90,7 @@
   line-height: 1.5em;
   color: var(--color-text-secondary);
 }
+
+.add-block {
+  margin-top: 3px;
+}

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

@@ -5,6 +5,7 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Persistence from '../../../models/persistence/persistence.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -12,6 +13,18 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import HeadersViewStyles from './HeadersView.css.js';
 
 const UIStrings = {
+  /**
+  *@description The title of a button that adds a field to input a header in the editor form.
+  */
+  addHeader: 'Add a header',
+  /**
+  *@description The title of a button that removes a field to input a header in the editor form.
+  */
+  removeHeader: 'Remove this header',
+  /**
+  *@description The title of a button that removes a section for defining header overrides in the editor form.
+  */
+  removeBlock: 'Remove this \'`ApplyTo`\'-section',
   /**
   *@description Error message for files which cannot not be parsed.
   *@example {.headers} PH1
@@ -23,10 +36,17 @@ const UIStrings = {
   */
   parsingErrorExplainer:
       'This is most likely due to a syntax error in \'\'{PH1}\'\'. Try opening this file in an external editor to fix the error or delete the file and re-create the override.',
+  /**
+  *@description Button text for a button which adds an additional header override.
+  */
+  addHeaderOverride: 'Add header override',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/components/HeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const plusIconUrl = new URL('../../../Images/plus_icon.svg', import.meta.url).toString();
+const minusIconUrl = new URL('../../../Images/minus_icon.svg', import.meta.url).toString();
+
 export class HeadersView extends UI.View.SimpleView {
   readonly #headersViewComponent = new HeadersViewComponent();
   #uiSourceCode: Workspace.UISourceCode.UISourceCode;
@@ -96,6 +116,10 @@ export class HeadersView extends UI.View.SimpleView {
     this.#setComponentData(this.#uiSourceCode.workingCopy());
   }
 
+  getComponent(): HeadersViewComponent {
+    return this.#headersViewComponent;
+  }
+
   dispose(): void {
     this.#uiSourceCode.removeEventListener(
         Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged, this);
@@ -127,11 +151,13 @@ export class HeadersViewComponent extends HTMLElement {
   #headerOverrides: HeaderOverride[] = [];
   #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
   #parsingError = false;
+  #focusElement: {blockIndex: number, headerIndex?: number}|null = null;
 
   constructor() {
     super();
     this.#shadow.addEventListener('focusin', this.#onFocusIn.bind(this));
     this.#shadow.addEventListener('focusout', this.#onFocusOut.bind(this));
+    this.#shadow.addEventListener('click', this.#onClick.bind(this));
     this.#shadow.addEventListener('input', this.#onInput.bind(this));
     this.#shadow.addEventListener('keydown', this.#onKeyDown.bind(this));
   }
@@ -187,6 +213,43 @@ export class HeadersViewComponent extends HTMLElement {
     selection?.removeAllRanges();
   }
 
+  #generateNextHeaderName(headers: Header[]): string {
+    const takenNames = new Set<string>(headers.map(header => header.name));
+    let idx = 1;
+    while (takenNames.has('headerName' + idx)) {
+      idx++;
+    }
+    return 'headerName' + idx;
+  }
+
+  #onClick(e: Event): void {
+    const target = e.target as HTMLButtonElement;
+    const rowElement = target.closest('.row') as HTMLElement | null;
+    const blockIndex = Number(rowElement?.dataset.blockIndex || 0);
+    const headerIndex = Number(rowElement?.dataset.headerIndex || 0);
+    if (target.matches('.add-header')) {
+      this.#headerOverrides[blockIndex].headers.splice(
+          headerIndex + 1, 0,
+          {name: this.#generateNextHeaderName(this.#headerOverrides[blockIndex].headers), value: 'headerValue'});
+      this.#focusElement = {blockIndex, headerIndex: headerIndex + 1};
+      this.#onHeadersChanged();
+    } else if (target.matches('.remove-header')) {
+      this.#headerOverrides[blockIndex].headers.splice(headerIndex, 1);
+      if (this.#headerOverrides[blockIndex].headers.length === 0) {
+        this.#headerOverrides[blockIndex].headers.push(
+            {name: this.#generateNextHeaderName(this.#headerOverrides[blockIndex].headers), value: 'headerValue'});
+      }
+      this.#onHeadersChanged();
+    } else if (target.matches('.add-block')) {
+      this.#headerOverrides.push({applyTo: '*', headers: [{name: 'headerName', value: 'headerValue'}]});
+      this.#focusElement = {blockIndex: this.#headerOverrides.length - 1};
+      this.#onHeadersChanged();
+    } else if (target.matches('.remove-block')) {
+      this.#headerOverrides.splice(blockIndex, 1);
+      this.#onHeadersChanged();
+    }
+  }
+
   #onInput(e: Event): void {
     const target = e.target as HTMLButtonElement;
     const rowElement = target.closest('.row') as HTMLElement;
@@ -252,8 +315,25 @@ export class HeadersViewComponent extends HTMLElement {
           )}
         `,
       )}
+      <${Buttons.Button.Button.litTagName} .variant=${Buttons.Button.Variant.SECONDARY} class="add-block">
+        ${i18nString(UIStrings.addHeaderOverride)}
+      </${Buttons.Button.Button.litTagName}>
     `, this.#shadow, {host: this});
     // clang-format on
+
+    if (this.#focusElement) {
+      let focusElement: Element|null = null;
+      if (this.#focusElement.headerIndex) {
+        focusElement = this.#shadow.querySelector(`[data-block-index="${
+            this.#focusElement.blockIndex}"][data-header-index="${this.#focusElement.headerIndex}"] .header-name`);
+      } else {
+        focusElement = this.#shadow.querySelector(`[data-block-index="${this.#focusElement.blockIndex}"] .apply-to`);
+      }
+      if (focusElement) {
+        (focusElement as HTMLElement).focus();
+      }
+      this.#focusElement = null;
+    }
   }
 
   #renderApplyToRow(pattern: string, blockIndex: number): LitHtml.TemplateResult {
@@ -263,6 +343,13 @@ export class HeadersViewComponent extends HTMLElement {
         <div>${i18n.i18n.lockedString('Apply to')}</div>
         <div class="separator">:</div>
         ${this.#renderEditable(pattern, 'apply-to')}
+        <${Buttons.Button.Button.litTagName}
+        title=${i18nString(UIStrings.removeBlock)}
+        .size=${Buttons.Button.Size.SMALL}
+        .iconUrl=${minusIconUrl}
+        .variant=${Buttons.Button.Variant.ROUND}
+        class="remove-block inline-button"
+      ></${Buttons.Button.Button.litTagName}>
       </div>
     `;
     // clang-format on
@@ -275,6 +362,21 @@ export class HeadersViewComponent extends HTMLElement {
         ${this.#renderEditable(header.name, 'header-name red')}
         <div class="separator">:</div>
         ${this.#renderEditable(header.value, 'header-value')}
+        <${Buttons.Button.Button.litTagName}
+          title=${i18nString(UIStrings.addHeader)}
+          .size=${Buttons.Button.Size.SMALL}
+          .iconUrl=${plusIconUrl}
+          .variant=${Buttons.Button.Variant.ROUND}
+          class="add-header inline-button"
+        ></${Buttons.Button.Button.litTagName}>
+        <${Buttons.Button.Button.litTagName}
+          title=${i18nString(UIStrings.removeHeader)}
+          .size=${Buttons.Button.Size.SMALL}
+          .iconUrl=${minusIconUrl}
+          .variant=${Buttons.Button.Variant.ROUND}
+          class="remove-header inline-button"
+        ></${Buttons.Button.Button.litTagName}>
+      </div>
     `;
     // clang-format on
   }

package/front_end/panels/timeline/TimelinePanel.ts

@@ -636,7 +636,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
 
     const now = new Date();
-    const fileName = 'Profile-' + Platform.DateUtilities.toISO8601Compact(now) + '.json';
+    const fileName =
+        'Profile-' + Platform.DateUtilities.toISO8601Compact(now) + '.json' as Platform.DevToolsPath.RawPathString;
     const stream = new Bindings.FileUtils.FileOutputStream();
 
     const accepted = await stream.open(fileName);

package/front_end/ui/components/panel_feedback/FeedbackButton.ts

@@ -4,6 +4,7 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as Buttons from '../buttons/buttons.js';
@@ -38,7 +39,9 @@ export class FeedbackButton extends HTMLElement {
   }
 
   #onFeedbackClick(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.#props.feedbackUrl);
+    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+        this.#props.feedbackUrl as Platform.DevToolsPath.UrlString);
   }
 
   #render(): void {

package/front_end/ui/legacy/XLink.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
+
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as ComponentHelpers from '../components/helpers/helpers.js';
@@ -47,13 +49,15 @@ export class XLink extends XElement {
 
     this.onClick = (event: Event): void => {
       event.consume(true);
-      Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab((this.hrefInternal as string));
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+          (this.hrefInternal as Platform.DevToolsPath.UrlString));
       this.dispatchEvent(new Event('x-link-invoke'));
     };
     this.onKeyDown = (event: Event): void => {
       if (isEnterOrSpaceKey(event)) {
         event.consume(true);
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab((this.hrefInternal as string));
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+            (this.hrefInternal as Platform.DevToolsPath.UrlString));
       }
       this.dispatchEvent(new Event('x-link-invoke'));
     };
@@ -138,7 +142,8 @@ export class ContextMenuProvider implements Provider {
     const node: XLink = targetNode;
     contextMenu.revealSection().appendItem(openLinkExternallyLabel(), () => {
       if (node.href) {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(node.href);
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+            node.href as Platform.DevToolsPath.UrlString);
       }
     });
     contextMenu.revealSection().appendItem(copyLinkAddressLabel(), () => {

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -359,8 +359,10 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private static showHelp(): void {
+    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-        UI.UIUtils.addReferrerToURL('https://web.dev/color-and-contrast-accessibility/'));
+        UI.UIUtils.addReferrerToURL('https://web.dev/color-and-contrast-accessibility/') as
+        Platform.DevToolsPath.UrlString);
   }
 
   setVisible(visible: boolean): void {

package/front_end/ui/legacy/components/utils/ImagePreview.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
+
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -113,7 +115,8 @@ export class ImagePreview {
 
         // Open image in new tab.
         link.addEventListener('click', () => {
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+              imageURL as Platform.DevToolsPath.UrlString);
         });
 
         const intrinsicWidth = imageElement.naturalWidth;
@@ -158,7 +161,8 @@ export class ImagePreview {
              HTMLLinkElement);
         sourceLink.textContent = sourceText;
         sourceLink.addEventListener('click', () => {
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+              imageURL as Platform.DevToolsPath.UrlString);
         });
         resolve(shadowBoundary);
       }

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -31,6 +31,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 type * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
@@ -749,10 +750,12 @@ export class Linkifier implements SDK.TargetManager.Observer {
       }
     }
     if (resource || info.url) {
+      // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
       result.push({
         section: 'reveal',
         title: UI.UIUtils.openLinkExternallyLabel(),
-        handler: (): void => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url),
+        handler: (): void => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+            url as Platform.DevToolsPath.UrlString),
       });
       result.push({
         section: 'clipboard',
@@ -916,7 +919,9 @@ export class ContentProviderContextMenuProvider implements UI.ContextMenu.Provid
     contextMenu.revealSection().appendItem(
         UI.UIUtils.openLinkExternallyLabel(),
         () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-            contentUrl.endsWith(':formatted') ? contentUrl.slice(0, contentUrl.lastIndexOf(':')) : contentUrl));
+            contentUrl.endsWith(':formatted') ?
+                Common.ParsedURL.ParsedURL.slice(contentUrl, 0, contentUrl.lastIndexOf(':')) :
+                contentUrl));
     for (const title of linkHandlers.keys()) {
       const handler = linkHandlers.get(title);
       if (!handler) {

package/front_end/ui/legacy/tabbedPane.css

@@ -98,6 +98,7 @@
   pointer-events: none;
   margin-left: 0;
   position: relative;
+  cursor: default;
 }
 
 .tabbed-pane-header-contents > * {

package/package.json

@@ -54,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.981537"
+  "version": "1.0.982087"
 }