chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -8,12 +8,9 @@ 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';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
@@ -22,29 +19,19 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as Sources from '../../sources/sources.js';
 
+import {type RequestHeaderSectionData, RequestHeaderSection} from './RequestHeaderSection.js';
+import {
+  type ResponseHeaderSectionData,
+  ResponseHeaderSection,
+  RESPONSE_HEADER_SECTION_DATA_KEY,
+} from './ResponseHeaderSection.js';
+
 import requestHeadersViewStyles from './RequestHeadersView.css.js';
 
 const RAW_HEADER_CUTOFF = 3000;
 const {render, html} = LitHtml;
 
 const UIStrings = {
-  /**
-  *@description Comment used in decoded X-Client-Data HTTP header output in Headers View of the Network panel
-  */
-  activeClientExperimentVariation: 'Active `client experiment variation IDs`.',
-  /**
-  *@description Comment used in decoded X-Client-Data HTTP header output in Headers View of the Network panel
-  */
-  activeClientExperimentVariationIds: 'Active `client experiment variation IDs` that trigger server-side behavior.',
-  /**
-  *@description Text in Headers View of the Network panel
-  */
-  chooseThisOptionIfTheResourceAnd:
-      'Choose this option if the resource and the document are served from the same site.',
-  /**
-  *@description Text in Headers View of the Network panel for X-Client-Data HTTP headers
-  */
-  decoded: 'Decoded:',
   /**
   *@description Text in Request Headers View of the Network panel
   */
@@ -79,36 +66,10 @@ const UIStrings = {
   */
   headerOverrides: 'Header overrides',
   /**
-  *@description Text that is usually a hyperlink to more documentation
-  */
-  learnMore: 'Learn more',
-  /**
-  *@description Text for a link to the issues panel
-  */
-  learnMoreInTheIssuesTab: 'Learn more in the issues tab',
-  /**
   *@description Label for a checkbox to switch between raw and parsed headers
   */
   raw: 'Raw',
   /**
-  *@description Text in Headers View of the Network panel
-  */
-  onlyChooseThisOptionIfAn:
-      'Only choose this option if an arbitrary website including this resource does not impose a security risk.',
-  /**
-  *@description Message to explain lack of raw headers for a particular network request
-  */
-  provisionalHeadersAreShownDisableCache: 'Provisional headers are shown. Disable cache to see full headers.',
-  /**
-  *@description Tooltip to explain lack of raw headers for a particular network request
-  */
-  onlyProvisionalHeadersAre:
-      'Only provisional headers are available because this request was not sent over the network and instead was served from a local cache, which doesn’t store the original request headers. Disable cache to see full request headers.',
-  /**
-  *@description Message to explain lack of raw headers for a particular network request
-  */
-  provisionalHeadersAreShown: 'Provisional headers are shown.',
-  /**
   *@description Text in Request Headers View of the Network panel
   */
   referrerPolicy: 'Referrer Policy',
@@ -133,6 +94,10 @@ const UIStrings = {
   */
   responseHeaders: 'Response Headers',
   /**
+  *@description Title text for a link to the Sources panel to the file containing the header override definitions
+  */
+  revealHeaderOverrides: 'Reveal header override definitions',
+  /**
   *@description Text to show more content
   */
   showMore: 'Show more',
@@ -140,51 +105,26 @@ const UIStrings = {
   *@description HTTP response code
   */
   statusCode: 'Status Code',
-  /**
-  *@description Text in Headers View of the Network panel
-  */
-  thisDocumentWasBlockedFrom:
-      'This document was blocked from loading in an `iframe` with a `sandbox` attribute because this document specified a cross-origin opener policy.',
-  /**
-  *@description Text in Headers View of the Network panel
-  */
-  toEmbedThisFrameInYourDocument:
-      'To embed this frame in your document, the response needs to enable the cross-origin embedder policy by specifying the following response header:',
-  /**
-  *@description Text in Headers View of the Network panel
-  */
-  toUseThisResourceFromADifferent:
-      'To use this resource from a different origin, the server needs to specify a cross-origin resource policy in the response headers:',
-  /**
-  *@description Text in Headers View of the Network panel
-  */
-  toUseThisResourceFromADifferentOrigin:
-      'To use this resource from a different origin, the server may relax the cross-origin resource policy response header:',
-  /**
-  *@description Text in Headers View of the Network panel
-  */
-  toUseThisResourceFromADifferentSite:
-      'To use this resource from a different site, the server may relax the cross-origin resource policy response header:',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestHeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 export class RequestHeadersView extends UI.Widget.VBox {
-  readonly #headersView = new RequestHeadersComponent();
+  readonly #requestHeadersComponent = new RequestHeadersComponent();
   readonly #request: SDK.NetworkRequest.NetworkRequest;
 
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
     super();
     this.#request = request;
-    this.contentElement.appendChild(this.#headersView);
+    this.contentElement.appendChild(this.#requestHeadersComponent);
   }
 
   wasShown(): void {
     this.#request.addEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
     this.#request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
     this.#request.addEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged, this.#refreshHeadersView, this);
-    this.#request.addEventListener(SDK.NetworkRequest.Events.ResponseHeadersChanged, this.#refreshHeadersView, this);
+    this.#request.addEventListener(
+        SDK.NetworkRequest.Events.ResponseHeadersChanged, this.#resetAndRefreshHeadersView, this);
     this.#refreshHeadersView();
   }
 
@@ -192,17 +132,25 @@ export class RequestHeadersView extends UI.Widget.VBox {
     this.#request.removeEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
     this.#request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
     this.#request.removeEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged, this.#refreshHeadersView, this);
-    this.#request.removeEventListener(SDK.NetworkRequest.Events.ResponseHeadersChanged, this.#refreshHeadersView, this);
+    this.#request.removeEventListener(
+        SDK.NetworkRequest.Events.ResponseHeadersChanged, this.#resetAndRefreshHeadersView, this);
+  }
+
+  #resetAndRefreshHeadersView(): void {
+    this.#request.deleteAssociatedData(RESPONSE_HEADER_SECTION_DATA_KEY);
+    this.#requestHeadersComponent.data = {
+      request: this.#request,
+    };
   }
 
   #refreshHeadersView(): void {
-    this.#headersView.data = {
+    this.#requestHeadersComponent.data = {
       request: this.#request,
     };
   }
 
   revealHeader(section: NetworkForward.UIRequestLocation.UIHeaderSection, header?: string): void {
-    this.#headersView.data = {
+    this.#requestHeadersComponent.data = {
       request: this.#request,
       toReveal: {section, header: header},
     };
@@ -237,6 +185,9 @@ export class RequestHeadersComponent extends HTMLElement {
         Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
     this.#workspace.addEventListener(
         Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('persistenceNetworkOverridesEnabled')
+        .addChangeListener(this.#render, this);
   }
 
   disconnectedCallback(): void {
@@ -244,6 +195,9 @@ export class RequestHeadersComponent extends HTMLElement {
         Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
     this.#workspace.removeEventListener(
         Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('persistenceNetworkOverridesEnabled')
+        .removeChangeListener(this.#render, this);
   }
 
   #uiSourceCodeAddedOrRemoved(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
@@ -272,60 +226,11 @@ export class RequestHeadersComponent extends HTMLElement {
       return LitHtml.nothing;
     }
 
-    const headersWithIssues = [];
-    if (this.#request.wasBlocked()) {
-      const headerWithIssues =
-          BlockedReasonDetails.get((this.#request.blockedReason() as Protocol.Network.BlockedReason));
-      if (headerWithIssues) {
-        headersWithIssues.push(headerWithIssues);
-      }
-    }
-
-    function mergeHeadersWithIssues(
-        headers: SDK.NetworkRequest.NameValue[], headersWithIssues: HeaderDescriptor[]): HeaderDescriptor[] {
-      let i = 0, j = 0;
-      const result: HeaderDescriptor[] = [];
-      while (i < headers.length && j < headersWithIssues.length) {
-        if (headers[i].name < headersWithIssues[j].name) {
-          result.push({...headers[i++], headerNotSet: false});
-        } else if (headers[i].name > headersWithIssues[j].name) {
-          result.push({...headersWithIssues[j++], headerNotSet: true});
-        } else {
-          result.push({...headersWithIssues[j++], ...headers[i++], headerNotSet: false});
-        }
-      }
-      while (i < headers.length) {
-        result.push({...headers[i++], headerNotSet: false});
-      }
-      while (j < headersWithIssues.length) {
-        result.push({...headersWithIssues[j++], headerNotSet: true});
-      }
-      return result;
-    }
-
-    const mergedHeaders = mergeHeadersWithIssues(this.#request.sortedResponseHeaders.slice(), headersWithIssues);
-
-    const blockedResponseCookies = this.#request.blockedResponseCookies();
-    const blockedCookieLineToReasons = new Map<string, Protocol.Network.SetCookieBlockedReason[]>(
-        blockedResponseCookies?.map(c => [c.cookieLine, c.blockedReasons]));
-    for (const header of mergedHeaders) {
-      if (header.name.toLowerCase() === 'set-cookie' && header.value) {
-        const matchingBlockedReasons = blockedCookieLineToReasons.get(header.value.toString());
-        if (matchingBlockedReasons) {
-          header.setCookieBlockedReasons = matchingBlockedReasons;
-        }
-      }
-    }
-
     const toggleShowRaw = (): void => {
       this.#showResponseHeadersText = !this.#showResponseHeadersText;
       this.#render();
     };
 
-    if (!mergedHeaders.length) {
-      return LitHtml.nothing;
-    }
-
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
@@ -343,7 +248,10 @@ export class RequestHeadersComponent extends HTMLElement {
       >
         ${this.#showResponseHeadersText ?
             this.#renderRawHeaders(this.#request.responseHeadersText, true) : html`
-          ${mergedHeaders.map(header => this.#renderHeader(header, NetworkForward.UIRequestLocation.UIHeaderSection.Response))}
+          <${ResponseHeaderSection.litTagName} .data=${{
+            request: this.#request,
+            toReveal: this.#toReveal,
+          } as ResponseHeaderSectionData}></${ResponseHeaderSection.litTagName}>
         `}
       </${Category.litTagName}>
     `;
@@ -385,7 +293,7 @@ export class RequestHeadersComponent extends HTMLElement {
     };
 
     return html`
-      <x-link @click=${revealHeadersFile} class="link devtools-link">
+      <x-link @click=${revealHeadersFile} class="link devtools-link" title=${UIStrings.revealHeaderOverrides}>
         ${fileIcon}${i18nString(UIStrings.headerOverrides)}
       </x-link>
     `;
@@ -405,15 +313,7 @@ export class RequestHeadersComponent extends HTMLElement {
     if (!this.#request) {
       return LitHtml.nothing;
     }
-
-    const headers = this.#request.requestHeaders().slice();
-    headers.sort(function(a, b) {
-      return Platform.StringUtilities.compare(a.name.toLowerCase(), b.name.toLowerCase());
-    });
     const requestHeadersText = this.#request.requestHeadersText();
-    if (!headers.length && requestHeadersText !== undefined) {
-      return LitHtml.nothing;
-    }
 
     const toggleShowRaw = (): void => {
       this.#showRequestHeadersText = !this.#showRequestHeadersText;
@@ -436,174 +336,16 @@ export class RequestHeadersComponent extends HTMLElement {
       >
         ${(this.#showRequestHeadersText && requestHeadersText) ?
             this.#renderRawHeaders(requestHeadersText, false) : html`
-          ${this.#maybeRenderProvisionalHeadersWarning()}
-          ${headers.map(header => this.#renderHeader({...header, headerNotSet: false}, NetworkForward.UIRequestLocation.UIHeaderSection.Request))}
+          <${RequestHeaderSection.litTagName} .data=${{
+            request: this.#request,
+            toReveal: this.#toReveal,
+          } as RequestHeaderSectionData}></${RequestHeaderSection.litTagName}>
         `}
       </${Category.litTagName}>
     `;
     // clang-format on
   }
 
-  #maybeRenderProvisionalHeadersWarning(): LitHtml.LitTemplate {
-    if (!this.#request || this.#request.requestHeadersText() !== undefined) {
-      return LitHtml.nothing;
-    }
-
-    let cautionText;
-    let cautionTitle = '';
-    if (this.#request.cachedInMemory() || this.#request.cached()) {
-      cautionText = i18nString(UIStrings.provisionalHeadersAreShownDisableCache);
-      cautionTitle = i18nString(UIStrings.onlyProvisionalHeadersAre);
-    } else {
-      cautionText = i18nString(UIStrings.provisionalHeadersAreShown);
-    }
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <div class="call-to-action">
-        <div class="call-to-action-body">
-          <div class="explanation" title=${cautionTitle}>
-            <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
-                iconName: 'clear-warning_icon',
-                width: '12px',
-                height: '12px',
-              } as IconButton.Icon.IconData}>
-            </${IconButton.Icon.Icon.litTagName}>
-            ${cautionText} <x-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</x-link>
-          </div>
-        </div>
-      </div>
-    `;
-    // clang-format on
-  }
-
-  #renderHeader(header: HeaderDescriptor, section: NetworkForward.UIRequestLocation.UIHeaderSection):
-      LitHtml.TemplateResult {
-    const isHighlighted =
-        section === this.#toReveal?.section && header.name.toUpperCase() === this.#toReveal?.header?.toUpperCase();
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <div class="row ${isHighlighted ? 'header-highlight' : ''}">
-        <div class="header-name">
-          ${header.headerNotSet ?
-            html`<div class="header-badge header-badge-text">${i18n.i18n.lockedString('not-set')}</div>` :
-            LitHtml.nothing
-          }${header.name}:
-        </div>
-        <div
-          class="header-value ${header.headerValueIncorrect ? 'header-warning' : ''}"
-          @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
-        >
-          ${header.value?.toString() || ''}
-          ${this.#maybeRenderHeaderValueSuffix(header)}
-        </div>
-      </div>
-      ${this.#maybeRenderBlockedDetails(header.blockedDetails)}
-    `;
-    // clang-format on
-  }
-
-  #maybeRenderHeaderValueSuffix(header: HeaderDescriptor): LitHtml.LitTemplate {
-    const headerId = header.name.toLowerCase();
-
-    if (headerId === 'set-cookie' && header.setCookieBlockedReasons) {
-      const titleText =
-          header.setCookieBlockedReasons.map(SDK.NetworkRequest.setCookieBlockedReasonToUiString).join('\n');
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      return html`
-        <${IconButton.Icon.Icon.litTagName} class="inline-icon" title=${titleText} .data=${{
-            iconName: 'clear-warning_icon',
-            width: '12px',
-            height: '12px',
-          } as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}>
-      `;
-      // clang-format on
-    }
-
-    if (headerId === 'x-client-data') {
-      const data = ClientVariations.parseClientVariations(header.value?.toString() || '');
-      const output = ClientVariations.formatClientVariations(
-          data, i18nString(UIStrings.activeClientExperimentVariation),
-          i18nString(UIStrings.activeClientExperimentVariationIds));
-      return html`
-        <div>${i18nString(UIStrings.decoded)}</div>
-        <code>${output}</code>
-      `;
-    }
-
-    return LitHtml.nothing;
-  }
-
-  #maybeRenderBlockedDetails(blockedDetails?: BlockedDetailsDescriptor): LitHtml.LitTemplate {
-    if (!blockedDetails) {
-      return LitHtml.nothing;
-    }
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <div class="call-to-action">
-        <div class="call-to-action-body">
-          <div class="explanation">${blockedDetails.explanation()}</div>
-          ${blockedDetails.examples.map(example => html`
-            <div class="example">
-              <code>${example.codeSnippet}</code>
-              ${example.comment ? html`
-                <span class="comment">${example.comment()}</span>
-              ` : ''}
-            </div>
-          `)}
-          ${this.#maybeRenderBlockedDetailsLink(blockedDetails)}
-        </div>
-      </div>
-    `;
-    // clang-format on
-  }
-
-  #maybeRenderBlockedDetailsLink(blockedDetails?: BlockedDetailsDescriptor): LitHtml.LitTemplate {
-    if (this.#request && IssuesManager.RelatedIssue.hasIssueOfCategory(this.#request, IssuesManager.Issue.IssueCategory.CrossOriginEmbedderPolicy)) {
-      const followLink = (): void => {
-        Host.userMetrics.issuesPanelOpenedFrom(Host.UserMetrics.IssueOpener.LearnMoreLinkCOEP);
-        if (this.#request) {
-          void IssuesManager.RelatedIssue.reveal(
-              this.#request, IssuesManager.Issue.IssueCategory.CrossOriginEmbedderPolicy);
-        }
-      };
-      return html`
-        <div class="devtools-link" @click=${followLink}>
-          <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
-            iconName: 'issue-exclamation-icon',
-            color: 'var(--issue-color-yellow)',
-            width: '16px',
-            height: '16px',
-            } as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}>
-          ${i18nString(UIStrings.learnMoreInTheIssuesTab)}
-        </div>
-      `;
-    }
-    if (blockedDetails?.link) {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      return html`
-        <x-link href=${blockedDetails.link.url} class="link">
-          <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
-            iconName: 'link_icon',
-            color: 'var(--color-link)',
-            width: '16px',
-            height: '16px',
-          } as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}
-          >${i18nString(UIStrings.learnMore)}
-        </x-link>
-      `;
-      // clang-format on
-    }
-    return LitHtml.nothing;
-  }
-
   #renderRawHeaders(rawHeadersText: string, forResponseHeaders: boolean): LitHtml.TemplateResult {
     const trimmed = rawHeadersText.trim();
     const showFull = forResponseHeaders ? this.#showResponseHeadersTextFull : this.#showRequestHeadersTextFull;
@@ -706,7 +448,7 @@ export class RequestHeadersComponent extends HTMLElement {
 
   #renderGeneralRow(name: Common.UIString.LocalizedString, value: string, classNames?: string[]): LitHtml.LitTemplate {
     const isHighlighted = this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.General &&
-        name.toUpperCase() === this.#toReveal?.header?.toUpperCase();
+        name.toLowerCase() === this.#toReveal?.header?.toLowerCase();
     return html`
       <div class="row ${isHighlighted ? 'header-highlight' : ''}">
         <div class="header-name">${name}:</div>
@@ -774,7 +516,7 @@ export class Category extends HTMLElement {
         <summary class="header" @keydown=${this.#onSummaryKeyDown}>
           <div class="header-grid-container">
             <div>
-              ${this.#title}${this.#headerCount ?
+              ${this.#title}${this.#headerCount !== undefined ?
                 html`<span class="header-count"> (${this.#headerCount})</span>` :
                 LitHtml.nothing
               }
@@ -826,119 +568,3 @@ declare global {
     'devtools-request-headers-category': Category;
   }
 }
-
-interface BlockedDetailsDescriptor {
-  explanation: () => string;
-  examples: Array<{
-    codeSnippet: string,
-    comment?: (() => string),
-  }>;
-  link: {
-    url: string,
-  }|null;
-}
-
-interface HeaderDescriptor {
-  name: string;
-  value: Object|null;
-  headerValueIncorrect?: boolean|null;
-  blockedDetails?: BlockedDetailsDescriptor;
-  headerNotSet: boolean|null;
-  setCookieBlockedReasons?: Protocol.Network.SetCookieBlockedReason[];
-}
-
-const BlockedReasonDetails = new Map<Protocol.Network.BlockedReason, HeaderDescriptor>([
-  [
-    Protocol.Network.BlockedReason.CoepFrameResourceNeedsCoepHeader,
-    {
-      name: 'cross-origin-embedder-policy',
-      value: null,
-      headerValueIncorrect: null,
-      blockedDetails: {
-        explanation: i18nLazyString(UIStrings.toEmbedThisFrameInYourDocument),
-        examples: [{codeSnippet: 'Cross-Origin-Embedder-Policy: require-corp', comment: undefined}],
-        link: {url: 'https://web.dev/coop-coep/'},
-      },
-      headerNotSet: null,
-    },
-  ],
-  [
-    Protocol.Network.BlockedReason.CorpNotSameOriginAfterDefaultedToSameOriginByCoep,
-    {
-      name: 'cross-origin-resource-policy',
-      value: null,
-      headerValueIncorrect: null,
-      blockedDetails: {
-        explanation: i18nLazyString(UIStrings.toUseThisResourceFromADifferent),
-        examples: [
-          {
-            codeSnippet: 'Cross-Origin-Resource-Policy: same-site',
-            comment: i18nLazyString(UIStrings.chooseThisOptionIfTheResourceAnd),
-          },
-          {
-            codeSnippet: 'Cross-Origin-Resource-Policy: cross-origin',
-            comment: i18nLazyString(UIStrings.onlyChooseThisOptionIfAn),
-          },
-        ],
-        link: {url: 'https://web.dev/coop-coep/'},
-      },
-      headerNotSet: null,
-    },
-  ],
-  [
-    Protocol.Network.BlockedReason.CoopSandboxedIframeCannotNavigateToCoopPage,
-    {
-      name: 'cross-origin-opener-policy',
-      value: null,
-      headerValueIncorrect: false,
-      blockedDetails: {
-        explanation: i18nLazyString(UIStrings.thisDocumentWasBlockedFrom),
-        examples: [],
-        link: {url: 'https://web.dev/coop-coep/'},
-      },
-      headerNotSet: null,
-    },
-  ],
-  [
-    Protocol.Network.BlockedReason.CorpNotSameSite,
-    {
-      name: 'cross-origin-resource-policy',
-      value: null,
-      headerValueIncorrect: true,
-      blockedDetails: {
-        explanation: i18nLazyString(UIStrings.toUseThisResourceFromADifferentSite),
-        examples: [
-          {
-            codeSnippet: 'Cross-Origin-Resource-Policy: cross-origin',
-            comment: i18nLazyString(UIStrings.onlyChooseThisOptionIfAn),
-          },
-        ],
-        link: null,
-      },
-      headerNotSet: null,
-    },
-  ],
-  [
-    Protocol.Network.BlockedReason.CorpNotSameOrigin,
-    {
-      name: 'cross-origin-resource-policy',
-      value: null,
-      headerValueIncorrect: true,
-      blockedDetails: {
-        explanation: i18nLazyString(UIStrings.toUseThisResourceFromADifferentOrigin),
-        examples: [
-          {
-            codeSnippet: 'Cross-Origin-Resource-Policy: same-site',
-            comment: i18nLazyString(UIStrings.chooseThisOptionIfTheResourceAnd),
-          },
-          {
-            codeSnippet: 'Cross-Origin-Resource-Policy: cross-origin',
-            comment: i18nLazyString(UIStrings.onlyChooseThisOptionIfAn),
-          },
-        ],
-        link: null,
-      },
-      headerNotSet: null,
-    },
-  ],
-]);

package/front_end/panels/network/components/ResponseHeaderSection.css

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  display: block;
+}
+
+devtools-header-section-row:last-of-type {
+  margin-bottom: 10px;
+}
+
+devtools-header-section-row:first-of-type {
+  margin-top: 2px;
+}
+
+.add-header-button {
+  margin: -4px 0 10px 5px;
+}