chrome-devtools-frontend 1.0.981537 → 1.0.995491

package/front_end/panels/elements/elements-legacy.ts

@@ -93,6 +93,9 @@ Elements.NodeStackTraceWidget = ElementsModule.NodeStackTraceWidget.NodeStackTra
 /** @constructor */
 Elements.PropertiesWidget = ElementsModule.PropertiesWidget.PropertiesWidget;
 
+/** @constructor */
+Elements.StylePropertiesSection = ElementsModule.StylePropertiesSection.StylePropertiesSection;
+
 /** @constructor */
 Elements.StylePropertyTreeElement = ElementsModule.StylePropertyTreeElement.StylePropertyTreeElement;
 
@@ -104,6 +107,3 @@ Elements.StylesSidebarPane.CSSPropertyPrompt = ElementsModule.StylesSidebarPane.
 
 /** @constructor */
 Elements.StylesSidebarPane.ButtonProvider = ElementsModule.StylesSidebarPane.ButtonProvider;
-
-/** @constructor */
-Elements.StylePropertiesSection = ElementsModule.StylesSidebarPane.StylePropertiesSection;

package/front_end/panels/elements/elements.ts

@@ -16,6 +16,7 @@ import './MetricsSidebarPane.js';
 import './PlatformFontsWidget.js';
 import './PropertiesWidget.js';
 import './NodeStackTraceWidget.js';
+import './StylePropertiesSection.js';
 import './StylePropertyHighlighter.js';
 import './StylesSidebarPane.js';
 import './StylePropertyTreeElement.js';
@@ -47,6 +48,7 @@ import * as NodeStackTraceWidget from './NodeStackTraceWidget.js';
 import * as PlatformFontsWidget from './PlatformFontsWidget.js';
 import * as PropertiesWidget from './PropertiesWidget.js';
 import * as StyleEditorWidget from './StyleEditorWidget.js';
+import * as StylePropertiesSection from './StylePropertiesSection.js';
 import * as StylePropertyHighlighter from './StylePropertyHighlighter.js';
 import * as StylePropertyTreeElement from './StylePropertyTreeElement.js';
 import * as StylePropertyUtils from './StylePropertyUtils.js';
@@ -75,6 +77,7 @@ export {
   PlatformFontsWidget,
   PropertiesWidget,
   StyleEditorWidget,
+  StylePropertiesSection,
   StylePropertyHighlighter,
   StylePropertyTreeElement,
   StylePropertyUtils,

package/front_end/panels/elements/stylesSidebarPane.css

@@ -142,11 +142,13 @@
 }
 
 .styles-sidebar-pane-toolbar-container {
+  --override-toolbar-background-color: var(--color-background-elevation-1);
+
   flex-shrink: 0;
   overflow: hidden;
   position: sticky;
   top: 0;
-  background-color: var(--color-background-elevation-1);
+  background-color: var(--override-toolbar-background-color);
   z-index: 2;
 }
 

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);
@@ -312,7 +313,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     const inputViewId = 'Inputs';
     void UI.ViewManager.ViewManager.instance()
         .showView(inputViewId)
-        .then(() => (UI.ViewManager.ViewManager.instance().view(inputViewId) as UI.View.View).widget())
+        .then(() => UI.ViewManager.ViewManager.instance().view(inputViewId).widget())
         .then(widget => this.innerHandleAction(widget as InputTimeline, actionId));
 
     return true;

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -47,26 +47,6 @@ const UIStrings = {
    * A origin is (roughly said) the front part of a URL.
    */
   untrustworthyOrigin: 'Untrustworthy origin',
-  /**
-   * @description Label for the column showing the invalid value used for the 'trigger-data' query
-   * parameter.
-   */
-  invalidTriggerData: 'Invalid `trigger-data`',
-  /**
-   * @description Label for the column showing the invalid value used for the
-   * 'event-source-trigger-data' query parameter.
-   */
-  invalidEventSourceTriggerData: 'Invalid `event-source-trigger-data`',
-  /**
-   * @description Label for the column showing the invalid value used for the
-   * 'priority' query parameter.
-   */
-  invalidTriggerPriority: 'Invalid `priority`',
-  /**
-   * @description Label for the column showing the invalid value used for the
-   * 'dedup-key' query parameter.
-   */
-  invalidTriggerDedupKey: 'Invalid `dedup-key`',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/issues/AttributionReportingIssueDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -109,24 +89,6 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendColumnTitle(header, i18nString(UIStrings.element));
         this.appendColumnTitle(header, i18nString(UIStrings.untrustworthyOrigin));
         break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionData:
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionTriggerDataTooLarge:
-        this.appendColumnTitle(header, i18nString(UIStrings.request));
-        this.appendColumnTitle(header, i18nString(UIStrings.invalidTriggerData));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidEventSourceTriggerData:
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionEventSourceTriggerDataTooLarge:
-        this.appendColumnTitle(header, i18nString(UIStrings.request));
-        this.appendColumnTitle(header, i18nString(UIStrings.invalidEventSourceTriggerData));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerPriority:
-        this.appendColumnTitle(header, i18nString(UIStrings.request));
-        this.appendColumnTitle(header, i18nString(UIStrings.invalidTriggerPriority));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerDedupKey:
-        this.appendColumnTitle(header, i18nString(UIStrings.request));
-        this.appendColumnTitle(header, i18nString(UIStrings.invalidTriggerDedupKey));
-        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceEventId:
         this.appendColumnTitle(header, i18nString(UIStrings.frame));
         this.appendColumnTitle(header, i18nString(UIStrings.element));
@@ -142,9 +104,6 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendColumnTitle(header, i18nString(UIStrings.element));
         this.appendColumnTitle(header, i18nString(UIStrings.invalidSourcePriority));
         break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.MissingAttributionData:
-        this.appendColumnTitle(header, i18nString(UIStrings.request));
-        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyDisabled:
         this.appendColumnTitle(header, i18nString(UIStrings.frame));
         this.appendColumnTitle(header, i18nString(UIStrings.element));
@@ -179,13 +138,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         await this.#appendElementOrEmptyCell(element, issue);
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionTriggerDataTooLarge:
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionEventSourceTriggerDataTooLarge:
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionUntrustworthyOrigin:
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionData:
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidEventSourceTriggerData:
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerPriority:
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerDedupKey:
         this.#appendRequestOrEmptyCell(element, details.request);
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
@@ -197,9 +150,6 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         await this.#appendElementOrEmptyCell(element, issue);
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.MissingAttributionData:
-        this.#appendRequestOrEmptyCell(element, details.request);
-        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyDisabled:
         this.#appendFrameOrEmptyCell(element, issue);
         await this.#appendElementOrEmptyCell(element, issue);

package/front_end/panels/issues/ComboBoxOfCheckBoxes.ts

@@ -4,6 +4,16 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as i18n from '../../core/i18n/i18n.js';
+
+const UIStrings = {
+  /**
+  *@description Generic menu name accessibility label
+  */
+  genericMenuLabel: 'Menu',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/issues/ComboBoxOfCheckBoxes.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ComboBoxOfCheckBoxes extends UI.Toolbar.ToolbarButton {
   #options = new Array<MenuOption>();
@@ -41,7 +51,7 @@ export class ComboBoxOfCheckBoxes extends UI.Toolbar.ToolbarButton {
     return this.#options;
   }
 
-  #showLevelContextMenu({data: mouseEvent}: Common.EventTarget.EventTargetEvent<Event>): void {
+  async #showLevelContextMenu({data: mouseEvent}: Common.EventTarget.EventTargetEvent<Event>): Promise<void> {
     const contextMenu = new UI.ContextMenu.ContextMenu(mouseEvent, {
       useSoftMenu: true,
       x: this.element.totalOffsetLeft(),
@@ -56,7 +66,9 @@ export class ComboBoxOfCheckBoxes extends UI.Toolbar.ToolbarButton {
         this.setOptionEnabled(index, !enabled);
       }, enabled);
     }
-    void contextMenu.show();
+    contextMenu.setContextMenuLabel(this.title ?? i18nString(UIStrings.genericMenuLabel));
+    await contextMenu.show();
+    contextMenu.markAsMenuItemCheckBox();
   }
 }
 

package/front_end/panels/issues/IssueAggregator.ts

@@ -36,6 +36,7 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
   #blockedByResponseDetails = new Map<string, Protocol.Audits.BlockedByResponseIssueDetails>();
   #corsIssues = new Set<IssuesManager.CorsIssue.CorsIssue>();
   #cspIssues = new Set<IssuesManager.ContentSecurityPolicyIssue.ContentSecurityPolicyIssue>();
+  #deprecationIssues = new Set<IssuesManager.DeprecationIssue.DeprecationIssue>();
   #issueKind = IssuesManager.Issue.IssueKind.Improvement;
   #lowContrastIssues = new Set<IssuesManager.LowTextContrastIssue.LowTextContrastIssue>();
   #mixedContentIssues = new Set<IssuesManager.MixedContentIssue.MixedContentIssue>();
@@ -104,6 +105,10 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
     return this.#cspIssues;
   }
 
+  getDeprecationIssues(): Iterable<IssuesManager.DeprecationIssue.DeprecationIssue> {
+    return this.#deprecationIssues;
+  }
+
   getLowContrastIssues(): Iterable<IssuesManager.LowTextContrastIssue.LowTextContrastIssue> {
     return this.#lowContrastIssues;
   }
@@ -201,6 +206,9 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
     if (issue instanceof IssuesManager.ContentSecurityPolicyIssue.ContentSecurityPolicyIssue) {
       this.#cspIssues.add(issue);
     }
+    if (issue instanceof IssuesManager.DeprecationIssue.DeprecationIssue) {
+      this.#deprecationIssues.add(issue);
+    }
     if (issue instanceof IssuesManager.SharedArrayBufferIssue.SharedArrayBufferIssue) {
       this.#sharedArrayBufferIssues.add(issue);
     }

package/front_end/panels/issues/issues.ts

@@ -6,10 +6,12 @@ import * as CSPViolationsView from './CSPViolationsView.js';
 import * as IssueAggregator from './IssueAggregator.js';
 import * as IssueRevealer from './IssueRevealer.js';
 import * as IssuesPane from './IssuesPane.js';
+import * as IssueView from './IssueView.js';
 
 export {
   CSPViolationsView,
   IssueAggregator,
   IssueRevealer,
   IssuesPane,
+  IssueView,
 };

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -271,7 +271,11 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       return '';
     }
     const mainTarget = this.manager.target();
-    const usageData = await mainTarget.storageAgent().invoke_getUsageAndQuota({origin: mainTarget.inspectedURL()});
+    const origin = mainTarget.inspectedURL();
+    if (!origin) {
+      return '';
+    }
+    const usageData = await mainTarget.storageAgent().invoke_getUsageAndQuota({origin});
     const locations = usageData.usageBreakdown.filter(usage => usage.usage)
                           .map(usage => STORAGE_TYPE_NAMES.get(usage.storageType))
                           .map(i18nStringFn => i18nStringFn ? i18nStringFn() : undefined)

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
@@ -501,7 +502,8 @@ export class LighthousePanel extends UI.Panel.Panel {
     }
     // reload to reset the page state
     const inspectedURL = await this.controller.getInspectedURL();
-    await resourceTreeModel.navigate(inspectedURL);
+    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
+    await resourceTreeModel.navigate(inspectedURL as Platform.DevToolsPath.UrlString);
   }
 
   wasShown(): void {

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/lighthouse/LighthouseTimespanView.ts

@@ -11,15 +11,15 @@ import lighthouseDialogStyles from './lighthouseDialog.css.js';
 
 const UIStrings = {
   /**
-   * @description Header indicating that a Lighthouse timespan is starting.
+   * @description Header indicating that a Lighthouse timespan is starting. "Timespan" is a Lighthouse mode that analyzes user interactions over a period of time.
    */
   timespanStarting: 'Timespan starting…',
   /**
-   * @description Header indicating that a Lighthouse timespan has started.
+   * @description Header indicating that a Lighthouse timespan has started. "Timespan" is a Lighthouse mode that analyzes user interactions over a period of time. "interact with the page" is a call to action for the user to interact with the web page.
    */
   timespanStarted: 'Timespan started, interact with the page',
   /**
-   * @description Label for a button that ends a Lighthouse timespan.
+   * @description Label for a button that ends a Lighthouse timespan. "timespan" is a Lighthouse mode that analyzes user interactions over a period of time.
    */
   endTimespan: 'End timespan',
   /**

package/front_end/panels/network/BlockedURLsPane.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -132,7 +133,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
 
   private addButtonClicked(): void {
     this.manager.setBlockingEnabled(true);
-    this.list.addNewItem(0, {url: '', enabled: true});
+    this.list.addNewItem(0, {url: Platform.DevToolsPath.EmptyUrlString, enabled: true});
   }
 
   renderItem(pattern: SDK.NetworkManager.BlockedPattern, editable: boolean): Element {
@@ -180,7 +181,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
   commitEdit(
       item: SDK.NetworkManager.BlockedPattern, editor: UI.ListWidget.Editor<SDK.NetworkManager.BlockedPattern>,
       isNew: boolean): void {
-    const url = editor.control('url').value;
+    const url = editor.control('url').value as Platform.DevToolsPath.UrlString;
     const patterns = this.manager.blockedPatterns();
     if (isNew) {
       patterns.push({enabled: true, url: url});

package/front_end/panels/network/NetworkConfigView.ts

@@ -54,6 +54,10 @@ const UIStrings = {
   * @description Status text for successful update of client hints.
   */
   clientHintsStatusText: 'User agent updated.',
+  /**
+  * @description The aria alert message when the Network conditions panel is shown.
+  */
+  networkConditionsPanelShown: 'Network conditions shown',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkConfigView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -348,6 +352,8 @@ export class NetworkConfigView extends UI.Widget.VBox {
   wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([networkConfigViewStyles]);
+
+    UI.ARIAUtils.alert(i18nString(UIStrings.networkConditionsPanelShown));
   }
 }
 

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1060,6 +1060,10 @@ export class NetworkRequestNode extends NetworkNode {
       const networkManager = SDK.NetworkManager.NetworkManager.forRequest(this.requestInternal);
       UI.UIUtils.createTextChild(cell, networkManager ? networkManager.target().decorateLabel(name) : name);
       this.appendSubtitle(cell, this.requestInternal.path());
+      if (!this.requestInternal.url().startsWith('data')) {
+        // Show the URL as tooltip unless it's a data URL.
+        UI.Tooltip.Tooltip.install(cell, this.requestInternal.url());
+      }
     } else if (text) {
       UI.UIUtils.createTextChild(cell, text);
     }

package/front_end/panels/network/NetworkLogView.ts

@@ -1582,7 +1582,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       let patterns = manager.blockedPatterns();
 
       function addBlockedURL(url: string): void {
-        patterns.push({enabled: true, url: url});
+        patterns.push({enabled: true, url: url as Platform.DevToolsPath.UrlString});
         manager.setBlockedPatterns(patterns);
         manager.setBlockingEnabled(true);
         void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
@@ -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/RequestHTMLView.ts

@@ -57,6 +57,7 @@ export class RequestHTMLView extends UI.Widget.VBox {
     const iframe = document.createElement('iframe');
     iframe.className = 'html-preview-frame';
     iframe.setAttribute('sandbox', '');  // Forbid to run JavaScript and set unique origin.
+    iframe.setAttribute('csp', 'default-src \'none\'');
     iframe.setAttribute('src', this.dataURL);
     iframe.tabIndex = -1;
     UI.ARIAUtils.markAsPresentation(iframe);

package/front_end/panels/network/RequestHeadersView.ts

@@ -36,9 +36,12 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import * as Persistence from '../../models/persistence/persistence.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as ClientVariations from '../../third_party/chromium/client-variations/client-variations.js';
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -46,6 +49,7 @@ import objectPropertiesSectionStyles from '../../ui/legacy/components/object_ui/
 // eslint-disable-next-line rulesdir/es_modules_import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Sources from '../sources/sources.js';
 
 import requestHeadersTreeStyles from './requestHeadersTree.css.js';
 import requestHeadersViewStyles from './requestHeadersView.css.js';
@@ -198,6 +202,11 @@ const UIStrings = {
    * @example {foo} PH1
    */
   recordedAttribution: 'Recorded attribution with `trigger-data`: {PH1}',
+  /**
+  *@description Label for a link from the network panel's headers view to the file in which
+  * header overrides are defined in the sources panel.
+  */
+  headerOverrides: 'Header overrides',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestHeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -213,8 +222,9 @@ export class RequestHeadersView extends UI.Widget.VBox {
   private readonly statusCodeItem: UI.TreeOutline.TreeElement;
   private readonly remoteAddressItem: UI.TreeOutline.TreeElement;
   private readonly referrerPolicyItem: UI.TreeOutline.TreeElement;
-  private readonly responseHeadersCategory: Category;
+  readonly responseHeadersCategory: Category;
   private readonly requestHeadersCategory: Category;
+  readonly #workspace = Workspace.Workspace.WorkspaceImpl.instance();
 
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
     super();
@@ -260,6 +270,10 @@ export class RequestHeadersView extends UI.Widget.VBox {
     this.request.addEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged, this.refreshRequestHeaders, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.ResponseHeadersChanged, this.refreshResponseHeaders, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.refreshHTTPInformation, this);
+    this.#workspace.addEventListener(
+        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
+    this.#workspace.addEventListener(
+        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
 
     this.refreshURL();
     this.refreshRequestHeaders();
@@ -276,6 +290,10 @@ export class RequestHeadersView extends UI.Widget.VBox {
     this.request.removeEventListener(
         SDK.NetworkRequest.Events.ResponseHeadersChanged, this.refreshResponseHeaders, this);
     this.request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.refreshHTTPInformation, this);
+    this.#workspace.removeEventListener(
+        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
+    this.#workspace.removeEventListener(
+        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
   }
 
   private addEntryContextMenuHandler(treeElement: UI.TreeOutline.TreeElement, value: string): void {
@@ -425,7 +443,9 @@ export class RequestHeadersView extends UI.Widget.VBox {
     if (this.showRequestHeadersText && headersText) {
       this.refreshHeadersText(i18nString(UIStrings.requestHeaders), headers.length, headersText, treeElement);
     } else {
-      this.refreshHeaders(i18nString(UIStrings.requestHeaders), headers, treeElement, headersText === undefined);
+      this.refreshHeaders(
+          i18nString(UIStrings.requestHeaders), headers, treeElement, /* overrideable */ false,
+          headersText === undefined);
     }
 
     if (headersText) {
@@ -451,15 +471,17 @@ export class RequestHeadersView extends UI.Widget.VBox {
           headersWithIssues.push(headerWithIssues);
         }
       }
+      const overrideable = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES);
       this.refreshHeaders(
           i18nString(UIStrings.responseHeaders), mergeHeadersWithIssues(headers, headersWithIssues), treeElement,
+          overrideable,
           /* provisional */ false, this.request.blockedResponseCookies());
     }
 
     if (headersText) {
       const toggleButton = this.createHeadersToggleButton(this.showResponseHeadersText);
       toggleButton.addEventListener('click', this.toggleResponseHeadersText.bind(this), false);
-      treeElement.listItemElement.appendChild(toggleButton);
+      treeElement.listItemElement.querySelector('.headers-title-left')?.appendChild(toggleButton);
     }
 
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
@@ -535,23 +557,62 @@ export class RequestHeadersView extends UI.Widget.VBox {
     }
   }
 
-  private refreshHeadersTitle(title: string, headersTreeElement: UI.TreeOutline.TreeElement, headersLength: number):
-      void {
+  private refreshHeadersTitle(
+      title: string, headersTreeElement: UI.TreeOutline.TreeElement, headersLength: number,
+      overrideable: boolean): void {
     headersTreeElement.listItemElement.removeChildren();
     headersTreeElement.listItemElement.createChild('div', 'selection fill');
-    UI.UIUtils.createTextChild(headersTreeElement.listItemElement, title);
+    const container = headersTreeElement.listItemElement.createChild('div', 'headers-title');
+    const leftElement = container.createChild('div', 'headers-title-left');
+    UI.UIUtils.createTextChild(leftElement, title);
 
     const headerCount = `\xA0(${headersLength})`;
-    headersTreeElement.listItemElement.createChild('span', 'header-count').textContent = headerCount;
+    leftElement.createChild('span', 'header-count').textContent = headerCount;
+
+    if (overrideable && this.#workspace.uiSourceCodeForURL(this.#getHeaderOverridesFileUrl())) {
+      const overridesSetting: Common.Settings.Setting<boolean> =
+          Common.Settings.Settings.instance().moduleSetting('persistenceNetworkOverridesEnabled');
+      const icon = overridesSetting.get() ? UI.Icon.Icon.create('mediumicon-file-sync', 'purple-dot') :
+                                            UI.Icon.Icon.create('mediumicon-file');
+      const button = container.createChild('button', 'link devtools-link headers-link');
+      button.appendChild(icon);
+      button.addEventListener('click', this.#revealHeadersFile.bind(this));
+      const span = document.createElement('span');
+      span.textContent = i18nString(UIStrings.headerOverrides);
+      button.appendChild(span);
+    }
+  }
+
+  #getHeaderOverridesFileUrl(): Platform.DevToolsPath.UrlString {
+    const fileUrl = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().fileUrlFromNetworkUrl(
+        this.request.url(), /* ignoreInactive */ true);
+    return fileUrl.substring(0, fileUrl.lastIndexOf('/')) + '/' +
+        Persistence.NetworkPersistenceManager.HEADERS_FILENAME as Platform.DevToolsPath.UrlString;
+  }
+
+  #revealHeadersFile(event: Event): void {
+    event.stopPropagation();
+    const uiSourceCode = this.#workspace.uiSourceCodeForURL(this.#getHeaderOverridesFileUrl());
+    if (!uiSourceCode) {
+      return;
+    }
+    Sources.SourcesPanel.SourcesPanel.instance().showUISourceCode(uiSourceCode);
+  }
+
+  #uiSourceCodeAddedOrRemoved(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    if (this.#getHeaderOverridesFileUrl() === event.data.url()) {
+      this.refreshResponseHeaders();
+    }
   }
 
   private refreshHeaders(
       title: string, headers: SDK.NetworkRequest.NameValue[], headersTreeElement: UI.TreeOutline.TreeElement,
-      provisionalHeaders?: boolean, blockedResponseCookies?: SDK.NetworkRequest.BlockedSetCookieWithReason[]): void {
+      overrideable: boolean, provisionalHeaders?: boolean,
+      blockedResponseCookies?: SDK.NetworkRequest.BlockedSetCookieWithReason[]): void {
     headersTreeElement.removeChildren();
 
     const length = headers.length;
-    this.refreshHeadersTitle(title, headersTreeElement, length);
+    this.refreshHeadersTitle(title, headersTreeElement, length, overrideable);
 
     if (provisionalHeaders) {
       let cautionText;
@@ -633,7 +694,7 @@ export class RequestHeadersView extends UI.Widget.VBox {
   private refreshHeadersText(
       title: string, count: number, headersText: string, headersTreeElement: UI.TreeOutline.TreeElement): void {
     this.populateTreeElementWithSourceText(headersTreeElement, headersText);
-    this.refreshHeadersTitle(title, headersTreeElement, count);
+    this.refreshHeadersTitle(title, headersTreeElement, count, /* overrideable */ false);
   }
 
   private refreshRemoteAddress(): void {

package/front_end/panels/network/networkLogView.css

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