chrome-devtools-frontend 1.0.980472 → 1.0.982087

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -53,7 +53,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-disable-line rulesdir/es_modules_import
 
-import {format} from './ConsoleFormat.js';
+import {format, updateStyle} from './ConsoleFormat.js';
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
 import consoleViewStyles from './consoleView.css.js';
 import {augmentErrorStackWithScriptIds, parseSourcePositionsFromErrorStack} from './ErrorStackParser.js';
@@ -925,26 +925,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
           }
           break;
         }
-        case 'style': {
+        case 'style':
           // Make sure that allowed properties do not interfere with link visibility.
-          const ALLOWED_PROPERTY_PREFIXES =
-              ['background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text'];
-
-          currentStyle.clear();
-          const buffer = document.createElement('span');
-          buffer.setAttribute('style', token.value);
-          for (const property of buffer.style) {
-            if (!ALLOWED_PROPERTY_PREFIXES.some(
-                    prefix => property.startsWith(prefix) || property.startsWith(`-webkit-${prefix}`))) {
-              continue;
-            }
-            currentStyle.set(property, {
-              value: buffer.style.getPropertyValue(property),
-              priority: buffer.style.getPropertyPriority(property),
-            });
-          }
+          updateStyle(currentStyle, token.value);
           break;
-        }
       }
     }
     return args;

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

@@ -2,9 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
+import type * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {DeviceModeWrapper} from './DeviceModeWrapper.js';
 import type {Bounds} from './InspectedPagePlaceholder.js';
@@ -77,7 +78,10 @@ export class AdvancedApp implements Common.App.App {
   }
 
   deviceModeEmulationFrameLoaded(toolboxDocument: Document): void {
-    Common.Settings.Settings.instance().createSetting('uiTheme', 'default');
+    ThemeSupport.ThemeSupport.instance().applyTheme(toolboxDocument);
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      ThemeSupport.ThemeSupport.instance().applyTheme(toolboxDocument);
+    });
     UI.UIUtils.initializeUIUtils(toolboxDocument);
     UI.UIUtils.installComponentRootStyles((toolboxDocument.body as Element));
     UI.ContextMenu.ContextMenu.installHandler(toolboxDocument);

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/network/ResourceWebSocketFrameView.ts

@@ -462,8 +462,7 @@ export class ResourceWebSocketFrameNode extends DataGrid.SortableDataGrid.Sortab
     if (!this.binaryViewInternal) {
       if (this.dataTextInternal.length > 0) {
         this.binaryViewInternal = new BinaryResourceView(
-            this.dataTextInternal, /* url */ '' as Platform.DevToolsPath.UrlString,
-            Common.ResourceType.resourceTypes.WebSocket);
+            this.dataTextInternal, Platform.DevToolsPath.EmptyUrlString, Common.ResourceType.resourceTypes.WebSocket);
       }
     }
     return this.binaryViewInternal;

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/snippets/ScriptSnippetFileSystem.ts

@@ -13,8 +13,6 @@ import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 
-// TODO(crbug.com/1253323): Cast to EncodedPathString will be removed from this file when migration to branded types is complete.
-
 const UIStrings = {
   /**
   *@description Default snippet name when a new snippet is created in the Sources panel
@@ -30,12 +28,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/snippets/ScriptSnippetFileSystem.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-function escapeSnippetName(name: string): Platform.DevToolsPath.EncodedPathString {
-  return Common.ParsedURL.ParsedURL.rawPathToEncodedPathString(name as Platform.DevToolsPath.RawPathString);
+function escapeSnippetName(name: Platform.DevToolsPath.RawPathString): Platform.DevToolsPath.EncodedPathString {
+  return Common.ParsedURL.ParsedURL.rawPathToEncodedPathString(name);
 }
 
-function unescapeSnippetName(name: string): string {
-  return Common.ParsedURL.ParsedURL.encodedPathToRawPathString(name as Platform.DevToolsPath.EncodedPathString);
+function unescapeSnippetName(name: Platform.DevToolsPath.EncodedPathString): string {
+  return Common.ParsedURL.ParsedURL.encodedPathToRawPathString(name);
 }
 
 export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFileSystem {
@@ -53,11 +51,13 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
     return savedSnippets.map(snippet => escapeSnippetName(snippet.name));
   }
 
-  async createFile(_path: string, _name: string|null): Promise<string|null> {
+  async createFile(_path: Platform.DevToolsPath.EncodedPathString, _name: Platform.DevToolsPath.RawPathString|null):
+      Promise<Platform.DevToolsPath.EncodedPathString|null> {
     const nextId = this.lastSnippetIdentifierSetting.get() + 1;
     this.lastSnippetIdentifierSetting.set(nextId);
 
-    const snippetName = i18nString(UIStrings.scriptSnippet, {PH1: nextId});
+    const snippetName =
+        i18nString(UIStrings.scriptSnippet, {PH1: nextId}) as string as Platform.DevToolsPath.RawPathString;
     const snippets = this.snippetsSetting.get();
     snippets.push({name: snippetName, content: ''});
     this.snippetsSetting.set(snippets);
@@ -65,8 +65,8 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
     return escapeSnippetName(snippetName);
   }
 
-  async deleteFile(path: string): Promise<boolean> {
-    const name = unescapeSnippetName(path.substring(1));
+  async deleteFile(path: Platform.DevToolsPath.EncodedPathString): Promise<boolean> {
+    const name = unescapeSnippetName(Common.ParsedURL.ParsedURL.substring(path, 1));
     const allSnippets: Snippet[] = this.snippetsSetting.get();
     const snippets = allSnippets.filter(snippet => snippet.name !== name);
     if (allSnippets.length !== snippets.length) {
@@ -76,8 +76,9 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
     return false;
   }
 
-  async requestFileContent(path: string): Promise<TextUtils.ContentProvider.DeferredContent> {
-    const name = unescapeSnippetName(path.substring(1));
+  async requestFileContent(path: Platform.DevToolsPath.EncodedPathString):
+      Promise<TextUtils.ContentProvider.DeferredContent> {
+    const name = unescapeSnippetName(Common.ParsedURL.ParsedURL.substring(path, 1));
     const snippets: Snippet[] = this.snippetsSetting.get();
     const snippet = snippets.find(snippet => snippet.name === name);
     if (snippet) {
@@ -86,8 +87,9 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
     return {content: null, isEncoded: false, error: `A snippet with name '${name}' was not found`};
   }
 
-  async setFileContent(path: string, content: string, _isBase64: boolean): Promise<boolean> {
-    const name = unescapeSnippetName(path.substring(1));
+  async setFileContent(path: Platform.DevToolsPath.EncodedPathString, content: string, _isBase64: boolean):
+      Promise<boolean> {
+    const name = unescapeSnippetName(Common.ParsedURL.ParsedURL.substring(path, 1));
     const snippets: Snippet[] = this.snippetsSetting.get();
     const snippet = snippets.find(snippet => snippet.name === name);
     if (snippet) {
@@ -98,11 +100,13 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
     return false;
   }
 
-  renameFile(path: string, newName: string, callback: (arg0: boolean, arg1?: string|undefined) => void): void {
-    const name = unescapeSnippetName(path.substring(1));
+  renameFile(
+      path: Platform.DevToolsPath.EncodedPathString, newName: Platform.DevToolsPath.RawPathString,
+      callback: (arg0: boolean, arg1?: string|undefined) => void): void {
+    const name = unescapeSnippetName(Common.ParsedURL.ParsedURL.substring(path, 1));
     const snippets: Snippet[] = this.snippetsSetting.get();
     const snippet = snippets.find(snippet => snippet.name === name);
-    newName = newName.trim();
+    newName = Common.ParsedURL.ParsedURL.trim(newName);
     if (!snippet || newName.length === 0 || snippets.find(snippet => snippet.name === newName)) {
       callback(false);
       return;
@@ -128,7 +132,9 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
   }
 
   tooltipForURL(url: Platform.DevToolsPath.UrlString): string {
-    return i18nString(UIStrings.linkedTo, {PH1: unescapeSnippetName(url.substring(this.path().length))});
+    return i18nString(
+        UIStrings.linkedTo,
+        {PH1: unescapeSnippetName(Common.ParsedURL.ParsedURL.sliceUrlToEncodedPathString(url, this.path().length))});
   }
 
   supportsAutomapping(): boolean {
@@ -215,6 +221,6 @@ export function findSnippetsProject(): Workspace.Workspace.Project {
   return workspaceProject;
 }
 export interface Snippet {
-  name: string;
+  name: Platform.DevToolsPath.RawPathString;
   content: string;
 }

package/front_end/panels/sources/NavigatorView.ts

@@ -28,6 +28,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+// TODO(crbug.com/1253323): Casts to Branded Types will be removed from this file when migration to branded types is complete.
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -843,7 +845,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   }
 
   handleFolderContextMenu(event: Event, node: NavigatorTreeNode): void {
-    const path = (node as NavigatorFolderTreeNode).folderPath || '';
+    const path = (node as NavigatorFolderTreeNode).folderPath || Platform.DevToolsPath.EmptyEncodedPathString;
     const project = (node as NavigatorFolderTreeNode).project || null;
 
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
@@ -914,7 +916,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     if (uiSourceCodeToCopy) {
       content = (await uiSourceCodeToCopy.requestContent()).content || '';
     }
-    const uiSourceCode = await project.createFile(path, null, content);
+    const uiSourceCode = await project.createFile(path as Platform.DevToolsPath.EncodedPathString, null, content);
     if (!uiSourceCode) {
       return;
     }
@@ -1413,7 +1415,9 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
         if (this.treeElement) {
           this.treeElement.title = newTitle;
         }
-        void this.uiSourceCodeInternal.rename(newTitle).then(renameCallback.bind(this));
+        // necessary cast to RawPathString as alternative would be altering type of Config<T>
+        void this.uiSourceCodeInternal.rename(newTitle as Platform.DevToolsPath.RawPathString)
+            .then(renameCallback.bind(this));
         return;
       }
       afterEditing.call(this, true);
@@ -1453,7 +1457,7 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
 
 export class NavigatorFolderTreeNode extends NavigatorTreeNode {
   project: Workspace.Workspace.Project|null;
-  readonly folderPath: string;
+  readonly folderPath: Platform.DevToolsPath.EncodedPathString;
   title: string;
   treeElement!: NavigatorFolderTreeElement|null;
   constructor(
@@ -1461,7 +1465,7 @@ export class NavigatorFolderTreeNode extends NavigatorTreeNode {
       folderPath: string, title: string) {
     super(navigatorView, id, type);
     this.project = project;
-    this.folderPath = folderPath;
+    this.folderPath = folderPath as Platform.DevToolsPath.EncodedPathString;
     this.title = title;
   }
 

package/front_end/panels/sources/SourcesNavigator.ts

@@ -31,9 +31,9 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Persistence from '../../models/persistence/persistence.js';
-import type * as Platform from '../../core/platform/platform.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Snippets from '../snippets/snippets.js';
@@ -406,7 +406,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     switch (actionId) {
       case 'sources.create-snippet':
         void Snippets.ScriptSnippetFileSystem.findSnippetsProject()
-            .createFile('', null, '')
+            .createFile(Platform.DevToolsPath.EmptyEncodedPathString, null, '')
             .then(uiSourceCode => Common.Revealer.reveal(uiSourceCode));
         return true;
       case 'sources.add-folder-to-workspace':

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