front_end/panels/network/components/HeaderSectionRow.ts - devtools/devtools-frontend.git - Git at Google

 // Copyright 2022 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */

 import '../../../ui/kit/kit.js';
 import '../../../ui/legacy/legacy.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 type * as Protocol from '../../../generated/protocol.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 Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';

 import type {EditableSpan} from './EditableSpan.js';
 import headerSectionRowStyles from './HeaderSectionRow.css.js';

 const {render, html} = Lit;

 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 for X-Client-Data HTTP headers
    */
   decoded: 'Decoded:',
   /**
    * @description The title of a button to enable overriding a HTTP header.
    */
   editHeader: 'Override header',
   /**
    * @description Description of which letters the name of an HTTP header may contain (a-z, A-Z, 0-9, '-', or '_').
    */
   headerNamesOnlyLetters: 'Header names should contain only letters, digits, hyphens or underscores',
   /**
    * @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 Hover text prompting the user to reload the whole page or refresh the particular request, so that the changes they made take effect.
    */
   reloadPrompt: 'Refresh the page/request for these changes to take effect',
   /**
    * @description The title of a button which removes a HTTP header override.
    */
   removeOverride: 'Remove this header override',
 } as const;

 const str_ = i18n.i18n.registerUIStrings('panels/network/components/HeaderSectionRow.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

 export const isValidHeaderName = (headerName: string): boolean => {
   return /^[a-z0-9_\-]+$/i.test(headerName);
 };

 export const compareHeaders = (first: string|null|undefined, second: string|null|undefined): boolean => {
   // Replaces all whitespace characters with regular spaces.
   // When working with contenteditables, their content can contain (non-obvious)
   // non-breaking spaces (NBSPs). It would be tricky to get rid of NBSPs during
   // editing and saving, so we just handle them after reading them in.
   // Tab characters are invalid in headers (and DevTools shows a warning for
   // them), the replacement here ensures that headers containing tabs are not
   // incorrectly marked as being overridden.
   return first?.replaceAll(/\s/g, ' ') === second?.replaceAll(/\s/g, ' ');
 };

 export class HeaderEditedEvent extends Event {
   static readonly eventName = 'headeredited';
   headerName: Platform.StringUtilities.LowerCaseString;
   headerValue: string;

   constructor(headerName: Platform.StringUtilities.LowerCaseString, headerValue: string) {
     super(HeaderEditedEvent.eventName, {});
     this.headerName = headerName;
     this.headerValue = headerValue;
   }
 }

 export class HeaderRemovedEvent extends Event {
   static readonly eventName = 'headerremoved';
   headerName: Platform.StringUtilities.LowerCaseString;
   headerValue: string;

   constructor(headerName: Platform.StringUtilities.LowerCaseString, headerValue: string) {
     super(HeaderRemovedEvent.eventName, {});
     this.headerName = headerName;
     this.headerValue = headerValue;
   }
 }

 export class EnableHeaderEditingEvent extends Event {
   static readonly eventName = 'enableheaderediting';

   constructor() {
     super(EnableHeaderEditingEvent.eventName, {});
   }
 }

 export interface HeaderSectionRowData {
   header: HeaderDescriptor;
 }

 export class HeaderSectionRow extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #header: HeaderDescriptor|null = null;
   #isHeaderValueEdited = false;
   #isValidHeaderName = true;

   set data(data: HeaderSectionRowData) {
     this.#header = data.header;
     this.#isHeaderValueEdited =
         this.#header.originalValue !== undefined && this.#header.value !== this.#header.originalValue;
     this.#isValidHeaderName = isValidHeaderName(this.#header.name);
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }

   #render(): void {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('HeaderSectionRow render was not scheduled');
     }

     if (!this.#header) {
       return;
     }

     const rowClasses = Lit.Directives.classMap({
       row: true,
       'header-highlight': Boolean(this.#header.highlight),
       'header-overridden': Boolean(this.#header.isOverride) || this.#isHeaderValueEdited,
       'header-editable': this.#header.valueEditable === EditingAllowedStatus.ENABLED,
       'header-deleted': Boolean(this.#header.isDeleted),
     });

     const headerNameClasses = Lit.Directives.classMap({
       'header-name': true,
       'pseudo-header': this.#header.name.startsWith(':'),
     });

     const headerValueClasses = Lit.Directives.classMap({
       'header-value': true,
       'header-warning': Boolean(this.#header.headerValueIncorrect),
       'flex-columns': this.#header.name === 'x-client-data' && !this.#header.isResponseHeader,
     });

     // The header name is only editable when the header value is editable as well.
     // This ensures the header name's editability reacts correctly to enabling or
     // disabling local overrides.
     const isHeaderNameEditable =
         this.#header.nameEditable && this.#header.valueEditable === EditingAllowedStatus.ENABLED;

     // Case 1: Headers which were just now added via the 'Add header button'.
     //         'nameEditable' is true only for such headers.
     // Case 2: Headers for which the user clicked the 'remove' button.
     // Case 3: Headers for which there is a mismatch between original header
     //         value and current header value.
     const showReloadInfoIcon = this.#header.nameEditable || this.#header.isDeleted || this.#isHeaderValueEdited;

     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
       <style>${headerSectionRowStyles}</style>
       <div class=${rowClasses}>
         <div class=${headerNameClasses}>
           ${this.#header.headerNotSet ?
             html`<div class="header-badge header-badge-text">${i18n.i18n.lockedString('not-set')}</div> ` :
             Lit.nothing
           }
           ${isHeaderNameEditable && !this.#isValidHeaderName ?
             html`<devtools-icon class="inline-icon disallowed-characters medium" title=${UIStrings.headerNamesOnlyLetters} name='cross-circle-filled'>
             </devtools-icon>` : Lit.nothing
           }
           ${isHeaderNameEditable && !this.#header.isDeleted ?
             html`<devtools-editable-span
               @focusout=${this.#onHeaderNameFocusOut}
               @keydown=${this.#onKeyDown}
               @input=${this.#onHeaderNameEdit}
               @paste=${this.#onHeaderNamePaste}
               .data=${{value: this.#header.name}}
             ></devtools-editable-span>` :
             this.#header.name}
         </div>
         <div
           class=${headerValueClasses}
           @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
         >
           ${this.#renderHeaderValue()}
         </div>
         ${showReloadInfoIcon ?
           html`<devtools-icon name="info" class="row-flex-icon flex-right medium" title=${UIStrings.reloadPrompt}>
           </devtools-icon>` : Lit.nothing
         }
       </div>
       ${this.#maybeRenderBlockedDetails(this.#header.blockedDetails)}
     `, this.#shadow, {host: this});
     // clang-format on

     if (this.#header.highlight) {
       this.scrollIntoView({behavior: 'auto'});
     }
   }

   #renderHeaderValue(): Lit.LitTemplate {
     if (!this.#header) {
       return Lit.nothing;
     }
     if (this.#header.name === 'x-client-data' && !this.#header.isResponseHeader) {
       return this.#renderXClientDataHeader(this.#header);
     }

     if (this.#header.isDeleted || this.#header.valueEditable !== EditingAllowedStatus.ENABLED) {
       const showEditHeaderButton = this.#header.isResponseHeader && !this.#header.isDeleted &&
           this.#header.valueEditable !== EditingAllowedStatus.FORBIDDEN;
       // clang-format off
       return html`
       ${this.#header.value || ''}
       ${this.#maybeRenderHeaderValueSuffix(this.#header)}
       ${showEditHeaderButton ? html`
         <devtools-button
           title=${i18nString(UIStrings.editHeader)}
           .accessibleLabel=${i18nString(UIStrings.editHeader)}
           .size=${Buttons.Button.Size.SMALL}
           .iconName=${'edit'}
           .variant=${Buttons.Button.Variant.ICON}
           @click=${() => {
             this.dispatchEvent(new EnableHeaderEditingEvent());
           }}
           jslog=${VisualLogging.action('enable-header-overrides').track({click: true})}
           class="enable-editing inline-button"
         ></devtools-button>
       ` : Lit.nothing}
     `;
     }
     return html`
       <devtools-editable-span
         @focusout=${this.#onHeaderValueFocusOut}
         @input=${this.#onHeaderValueEdit}
         @paste=${this.#onHeaderValueEdit}
         @keydown=${this.#onKeyDown}
         .data=${{value: this.#header.value || ''}}
       ></devtools-editable-span>
       ${this.#maybeRenderHeaderValueSuffix(this.#header)}
       <devtools-button
         title=${i18nString(UIStrings.removeOverride)}
         .size=${Buttons.Button.Size.SMALL}
         .iconName=${'bin'}
         .variant=${Buttons.Button.Variant.ICON}
         class="remove-header inline-button"
         @click=${this.#onRemoveOverrideClick}
         jslog=${VisualLogging.action('remove-header-override').track({click: true})}
       ></devtools-button>
     `;
     // clang-format on
   }

   #renderXClientDataHeader(header: HeaderDescriptor): Lit.LitTemplate {
     const data = ClientVariations.parseClientVariations(header.value || '');
     const output = ClientVariations.formatClientVariations(
         data, i18nString(UIStrings.activeClientExperimentVariation),
         i18nString(UIStrings.activeClientExperimentVariationIds));
     // clang-format off
     return html`
       <div>${header.value || ''}</div>
       <div>${i18nString(UIStrings.decoded)}</div>
       <code>${output}</code>
     `;
     // clang-format on
   }

   override focus(): void {
     requestAnimationFrame(() => {
       const editableName = this.#shadow.querySelector<HTMLElement>('.header-name devtools-editable-span');
       editableName?.focus();
     });
   }

   #maybeRenderHeaderValueSuffix(header: HeaderDescriptor): Lit.LitTemplate {
     if (header.name === '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`
         <devtools-icon class="row-flex-icon medium" title=${titleText} name='warning-filled'>
         </devtools-icon>
       `;
       // clang-format on
     }
     return Lit.nothing;
   }

   #maybeRenderBlockedDetails(blockedDetails?: BlockedDetailsDescriptor): Lit.LitTemplate {
     if (!blockedDetails) {
       return Lit.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): Lit.LitTemplate {
     if (blockedDetails?.reveal) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       return html`
         <div class="devtools-link" @click=${blockedDetails.reveal}>
           <devtools-icon name="issue-exclamation-filled" class="inline-icon medium">
           </devtools-icon
           >${i18nString(UIStrings.learnMoreInTheIssuesTab)}
         </div>
       `;
       // clang-format on
     }
     if (blockedDetails?.link) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       return html`
         <devtools-link href=${blockedDetails.link.url} class="link">
           <devtools-icon name="open-externally" class="inline-icon extra-large" style="color: var(--icon-link);">
           </devtools-icon
           >${i18nString(UIStrings.learnMore)}
         </devtools-link>
       `;
       // clang-format on
     }
     return Lit.nothing;
   }

   #onHeaderValueFocusOut(event: Event): void {
     const target = event.target as EditableSpan;
     if (!this.#header) {
       return;
     }
     const headerValue = target.value.trim();
     if (!compareHeaders(headerValue, this.#header.value?.trim())) {
       this.#header.value = headerValue;
       this.dispatchEvent(new HeaderEditedEvent(this.#header.name, headerValue));
       void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
     }

     // Clear selection (needed when pressing 'enter' in editable span).
     const selection = window.getSelection();
     selection?.removeAllRanges();

     // Reset pasted header name
     this.#header.originalName = '';
   }

   #onHeaderNameFocusOut(event: Event): void {
     const target = event.target as EditableSpan;
     if (!this.#header) {
       return;
     }
     const headerName = Platform.StringUtilities.toLowerCaseString(target.value.trim());
     // If the header name has been edited to '', reset it to its previous value.
     if (headerName === '') {
       target.value = this.#header.name;
     } else if (!compareHeaders(headerName, this.#header.name.trim())) {
       this.#header.name = headerName;
       this.dispatchEvent(new HeaderEditedEvent(headerName, this.#header.value || ''));
       void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
     }

     // Clear selection (needed when pressing 'enter' in editable span).
     const selection = window.getSelection();
     selection?.removeAllRanges();
   }

   #onRemoveOverrideClick(): void {
     if (!this.#header) {
       return;
     }
     const headerValueElement = this.#shadow.querySelector('.header-value devtools-editable-span') as EditableSpan;
     if (this.#header.originalValue) {
       headerValueElement.value = this.#header?.originalValue;
     }
     this.dispatchEvent(new HeaderRemovedEvent(this.#header.name, this.#header.value || ''));
   }

   #onKeyDown(event: KeyboardEvent): void {
     const target = event.target as EditableSpan;
     if (event.key === 'Escape') {
       event.consume();
       if (target.matches('.header-name devtools-editable-span')) {
         target.value = this.#header?.name || '';
         this.#onHeaderNameEdit(event);
       } else if (target.matches('.header-value devtools-editable-span')) {
         target.value = this.#header?.value || '';
         this.#onHeaderValueEdit(event);

         if (this.#header?.originalName) {
           const headerNameElement = this.#shadow.querySelector('.header-name devtools-editable-span') as EditableSpan;
           headerNameElement.value = this.#header.originalName;
           this.#header.originalName = '';
           headerNameElement.dispatchEvent(new Event('input'));
           headerNameElement.focus();
           return;
         }
       }
       target.blur();
     }
   }

   #onHeaderNameEdit(event: Event): void {
     const editable = event.target as EditableSpan;
     const isValidName = isValidHeaderName(editable.value);
     if (this.#isValidHeaderName !== isValidName) {
       this.#isValidHeaderName = isValidName;
       void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
     }
   }

   #onHeaderValueEdit(event: Event): void {
     const editable = event.target as EditableSpan;
     const isEdited =
         this.#header?.originalValue !== undefined && !compareHeaders(this.#header?.originalValue || '', editable.value);
     if (this.#isHeaderValueEdited !== isEdited) {
       this.#isHeaderValueEdited = isEdited;
       if (this.#header) {
         this.#header.highlight = false;
       }
       void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
     }
   }

   #onHeaderNamePaste(event: ClipboardEvent): void {
     if (!event.clipboardData) {
       return;
     }

     const nameEl = event.target as EditableSpan;
     const clipboardText = event.clipboardData.getData('text/plain') || '';
     const separatorPosition = clipboardText.indexOf(':');

     if (separatorPosition < 1) {
       // Not processing further either case 'abc' or ':abc'
       nameEl.value = clipboardText;
       event.preventDefault();
       nameEl.dispatchEvent(new Event('input', {bubbles: true}));
       return;
     }

     if (this.#header) {
       this.#header.originalName = this.#header.name;
     }

     const headerValue = clipboardText.substring(separatorPosition + 1, clipboardText.length).trim();
     const headerName = clipboardText.substring(0, separatorPosition);

     nameEl.value = headerName;
     nameEl.dispatchEvent(new Event('input'));

     const valueEL = this.#shadow.querySelector<HTMLElement>('.header-value devtools-editable-span');
     if (valueEL) {
       valueEL.focus();
       (valueEL as EditableSpan).value = headerValue;
       valueEL.dispatchEvent(new Event('input'));
     }
     event.preventDefault();
   }
 }

 customElements.define('devtools-header-section-row', HeaderSectionRow);

 declare global {
   interface HTMLElementTagNameMap {
     'devtools-header-section-row': HeaderSectionRow;
     'devtools-editable-span': EditableSpan;
   }

   interface HTMLElementEventMap {
     [HeaderEditedEvent.eventName]: HeaderEditedEvent;
   }
 }

 interface BlockedDetailsDescriptor {
   explanation: () => string;
   examples: Array<{
     codeSnippet: string,
     comment?: () => string,
   }>;
   link: {
     url: string,
   }|null;
   reveal?: () => void;
 }

 export const enum EditingAllowedStatus {
   DISABLED = 0,   // Local overrides are currently disabled.
   ENABLED = 1,    // The header is free to be edited.
   FORBIDDEN = 2,  // Editing this header is forbidden even when local overrides are enabled.
 }

 export interface HeaderDetailsDescriptor {
   name: Platform.StringUtilities.LowerCaseString;
   value: string|null;
   headerValueIncorrect?: boolean;
   blockedDetails?: BlockedDetailsDescriptor;
   headerNotSet?: boolean;
   setCookieBlockedReasons?: Protocol.Network.SetCookieBlockedReason[];
   highlight?: boolean;
   isResponseHeader?: boolean;
 }

 export interface HeaderEditorDescriptor {
   name: Platform.StringUtilities.LowerCaseString;
   value: string|null;
   originalName?: string|null;
   originalValue?: string|null;
   isOverride?: boolean;
   valueEditable: EditingAllowedStatus;
   nameEditable?: boolean;
   isDeleted?: boolean;
 }

 export type HeaderDescriptor = HeaderDetailsDescriptor&HeaderEditorDescriptor;
	// Copyright 2022 The Chromium Authors
	// Use of this source code is governed by a BSD-style license that can be
	// found in the LICENSE file.
	/* eslint-disable @devtools/no-lit-render-outside-of-view */

	import '../../../ui/kit/kit.js';
	import '../../../ui/legacy/legacy.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 type * as Protocol from '../../../generated/protocol.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 Lit from '../../../ui/lit/lit.js';
	import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';

	import type {EditableSpan} from './EditableSpan.js';
	import headerSectionRowStyles from './HeaderSectionRow.css.js';

	const {render, html} = Lit;

	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 for X-Client-Data HTTP headers
	*/
	decoded: 'Decoded:',
	/**
	* @description The title of a button to enable overriding a HTTP header.
	*/
	editHeader: 'Override header',
	/**
	* @description Description of which letters the name of an HTTP header may contain (a-z, A-Z, 0-9, '-', or '_').
	*/
	headerNamesOnlyLetters: 'Header names should contain only letters, digits, hyphens or underscores',
	/**
	* @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 Hover text prompting the user to reload the whole page or refresh the particular request, so that the changes they made take effect.
	*/
	reloadPrompt: 'Refresh the page/request for these changes to take effect',
	/**
	* @description The title of a button which removes a HTTP header override.
	*/
	removeOverride: 'Remove this header override',
	} as const;

	const str_ = i18n.i18n.registerUIStrings('panels/network/components/HeaderSectionRow.ts', UIStrings);
	const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

	export const isValidHeaderName = (headerName: string): boolean => {
	return /^[a-z0-9_\-]+$/i.test(headerName);
	};

	export const compareHeaders = (first: string\|null\|undefined, second: string\|null\|undefined): boolean => {
	// Replaces all whitespace characters with regular spaces.
	// When working with contenteditables, their content can contain (non-obvious)
	// non-breaking spaces (NBSPs). It would be tricky to get rid of NBSPs during
	// editing and saving, so we just handle them after reading them in.
	// Tab characters are invalid in headers (and DevTools shows a warning for
	// them), the replacement here ensures that headers containing tabs are not
	// incorrectly marked as being overridden.
	return first?.replaceAll(/\s/g, ' ') === second?.replaceAll(/\s/g, ' ');
	};

	export class HeaderEditedEvent extends Event {
	static readonly eventName = 'headeredited';
	headerName: Platform.StringUtilities.LowerCaseString;
	headerValue: string;

	constructor(headerName: Platform.StringUtilities.LowerCaseString, headerValue: string) {
	super(HeaderEditedEvent.eventName, {});
	this.headerName = headerName;
	this.headerValue = headerValue;
	}
	}

	export class HeaderRemovedEvent extends Event {
	static readonly eventName = 'headerremoved';
	headerName: Platform.StringUtilities.LowerCaseString;
	headerValue: string;

	constructor(headerName: Platform.StringUtilities.LowerCaseString, headerValue: string) {
	super(HeaderRemovedEvent.eventName, {});
	this.headerName = headerName;
	this.headerValue = headerValue;
	}
	}

	export class EnableHeaderEditingEvent extends Event {
	static readonly eventName = 'enableheaderediting';

	constructor() {
	super(EnableHeaderEditingEvent.eventName, {});
	}
	}

	export interface HeaderSectionRowData {
	header: HeaderDescriptor;
	}

	export class HeaderSectionRow extends HTMLElement {
	readonly #shadow = this.attachShadow({mode: 'open'});
	#header: HeaderDescriptor\|null = null;
	#isHeaderValueEdited = false;
	#isValidHeaderName = true;

	set data(data: HeaderSectionRowData) {
	this.#header = data.header;
	this.#isHeaderValueEdited =
	this.#header.originalValue !== undefined && this.#header.value !== this.#header.originalValue;
	this.#isValidHeaderName = isValidHeaderName(this.#header.name);
	void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
	}

	#render(): void {
	if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
	throw new Error('HeaderSectionRow render was not scheduled');
	}

	if (!this.#header) {
	return;
	}

	const rowClasses = Lit.Directives.classMap({
	row: true,
	'header-highlight': Boolean(this.#header.highlight),
	'header-overridden': Boolean(this.#header.isOverride) \|\| this.#isHeaderValueEdited,
	'header-editable': this.#header.valueEditable === EditingAllowedStatus.ENABLED,
	'header-deleted': Boolean(this.#header.isDeleted),
	});

	const headerNameClasses = Lit.Directives.classMap({
	'header-name': true,
	'pseudo-header': this.#header.name.startsWith(':'),
	});

	const headerValueClasses = Lit.Directives.classMap({
	'header-value': true,
	'header-warning': Boolean(this.#header.headerValueIncorrect),
	'flex-columns': this.#header.name === 'x-client-data' && !this.#header.isResponseHeader,
	});

	// The header name is only editable when the header value is editable as well.
	// This ensures the header name's editability reacts correctly to enabling or
	// disabling local overrides.
	const isHeaderNameEditable =
	this.#header.nameEditable && this.#header.valueEditable === EditingAllowedStatus.ENABLED;

	// Case 1: Headers which were just now added via the 'Add header button'.
	// 'nameEditable' is true only for such headers.
	// Case 2: Headers for which the user clicked the 'remove' button.
	// Case 3: Headers for which there is a mismatch between original header
	// value and current header value.
	const showReloadInfoIcon = this.#header.nameEditable \|\| this.#header.isDeleted \|\| this.#isHeaderValueEdited;

	// Disabled until https://crbug.com/1079231 is fixed.
	// clang-format off
	render(html`
	<style>${headerSectionRowStyles}</style>
	<div class=${rowClasses}>
	<div class=${headerNameClasses}>
	${this.#header.headerNotSet ?
	html`<div class="header-badge header-badge-text">${i18n.i18n.lockedString('not-set')}</div> ` :
	Lit.nothing
	}
	${isHeaderNameEditable && !this.#isValidHeaderName ?
	html`<devtools-icon class="inline-icon disallowed-characters medium" title=${UIStrings.headerNamesOnlyLetters} name='cross-circle-filled'>
	</devtools-icon>` : Lit.nothing
	}
	${isHeaderNameEditable && !this.#header.isDeleted ?
	html`<devtools-editable-span
	@focusout=${this.#onHeaderNameFocusOut}
	@keydown=${this.#onKeyDown}
	@input=${this.#onHeaderNameEdit}
	@paste=${this.#onHeaderNamePaste}
	.data=${{value: this.#header.name}}
	></devtools-editable-span>` :
	this.#header.name}
	</div>
	<div
	class=${headerValueClasses}
	@copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
	>
	${this.#renderHeaderValue()}
	</div>
	${showReloadInfoIcon ?
	html`<devtools-icon name="info" class="row-flex-icon flex-right medium" title=${UIStrings.reloadPrompt}>
	</devtools-icon>` : Lit.nothing
	}
	</div>
	${this.#maybeRenderBlockedDetails(this.#header.blockedDetails)}
	`, this.#shadow, {host: this});
	// clang-format on

	if (this.#header.highlight) {
	this.scrollIntoView({behavior: 'auto'});
	}
	}

	#renderHeaderValue(): Lit.LitTemplate {
	if (!this.#header) {
	return Lit.nothing;
	}
	if (this.#header.name === 'x-client-data' && !this.#header.isResponseHeader) {
	return this.#renderXClientDataHeader(this.#header);
	}

	if (this.#header.isDeleted \|\| this.#header.valueEditable !== EditingAllowedStatus.ENABLED) {
	const showEditHeaderButton = this.#header.isResponseHeader && !this.#header.isDeleted &&
	this.#header.valueEditable !== EditingAllowedStatus.FORBIDDEN;
	// clang-format off
	return html`
	${this.#header.value \|\| ''}
	${this.#maybeRenderHeaderValueSuffix(this.#header)}
	${showEditHeaderButton ? html`
	<devtools-button
	title=${i18nString(UIStrings.editHeader)}
	.accessibleLabel=${i18nString(UIStrings.editHeader)}
	.size=${Buttons.Button.Size.SMALL}
	.iconName=${'edit'}
	.variant=${Buttons.Button.Variant.ICON}
	@click=${() => {
	this.dispatchEvent(new EnableHeaderEditingEvent());
	}}
	jslog=${VisualLogging.action('enable-header-overrides').track({click: true})}
	class="enable-editing inline-button"
	></devtools-button>
	` : Lit.nothing}
	`;
	}
	return html`
	<devtools-editable-span
	@focusout=${this.#onHeaderValueFocusOut}
	@input=${this.#onHeaderValueEdit}
	@paste=${this.#onHeaderValueEdit}
	@keydown=${this.#onKeyDown}
	.data=${{value: this.#header.value \|\| ''}}
	></devtools-editable-span>
	${this.#maybeRenderHeaderValueSuffix(this.#header)}
	<devtools-button
	title=${i18nString(UIStrings.removeOverride)}
	.size=${Buttons.Button.Size.SMALL}
	.iconName=${'bin'}
	.variant=${Buttons.Button.Variant.ICON}
	class="remove-header inline-button"
	@click=${this.#onRemoveOverrideClick}
	jslog=${VisualLogging.action('remove-header-override').track({click: true})}
	></devtools-button>
	`;
	// clang-format on
	}

	#renderXClientDataHeader(header: HeaderDescriptor): Lit.LitTemplate {
	const data = ClientVariations.parseClientVariations(header.value \|\| '');
	const output = ClientVariations.formatClientVariations(
	data, i18nString(UIStrings.activeClientExperimentVariation),
	i18nString(UIStrings.activeClientExperimentVariationIds));
	// clang-format off
	return html`
	<div>${header.value \|\| ''}</div>
	<div>${i18nString(UIStrings.decoded)}</div>
	<code>${output}</code>
	`;
	// clang-format on
	}

	override focus(): void {
	requestAnimationFrame(() => {
	const editableName = this.#shadow.querySelector<HTMLElement>('.header-name devtools-editable-span');
	editableName?.focus();
	});
	}

	#maybeRenderHeaderValueSuffix(header: HeaderDescriptor): Lit.LitTemplate {
	if (header.name === '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`
	<devtools-icon class="row-flex-icon medium" title=${titleText} name='warning-filled'>
	</devtools-icon>
	`;
	// clang-format on
	}
	return Lit.nothing;
	}

	#maybeRenderBlockedDetails(blockedDetails?: BlockedDetailsDescriptor): Lit.LitTemplate {
	if (!blockedDetails) {
	return Lit.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): Lit.LitTemplate {
	if (blockedDetails?.reveal) {
	// Disabled until https://crbug.com/1079231 is fixed.
	// clang-format off
	return html`
	<div class="devtools-link" @click=${blockedDetails.reveal}>
	<devtools-icon name="issue-exclamation-filled" class="inline-icon medium">
	</devtools-icon
	>${i18nString(UIStrings.learnMoreInTheIssuesTab)}
	</div>
	`;
	// clang-format on
	}
	if (blockedDetails?.link) {
	// Disabled until https://crbug.com/1079231 is fixed.
	// clang-format off
	return html`
	<devtools-link href=${blockedDetails.link.url} class="link">
	<devtools-icon name="open-externally" class="inline-icon extra-large" style="color: var(--icon-link);">
	</devtools-icon
	>${i18nString(UIStrings.learnMore)}
	</devtools-link>
	`;
	// clang-format on
	}
	return Lit.nothing;
	}

	#onHeaderValueFocusOut(event: Event): void {
	const target = event.target as EditableSpan;
	if (!this.#header) {
	return;
	}
	const headerValue = target.value.trim();
	if (!compareHeaders(headerValue, this.#header.value?.trim())) {
	this.#header.value = headerValue;
	this.dispatchEvent(new HeaderEditedEvent(this.#header.name, headerValue));
	void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
	}

	// Clear selection (needed when pressing 'enter' in editable span).
	const selection = window.getSelection();
	selection?.removeAllRanges();

	// Reset pasted header name
	this.#header.originalName = '';
	}

	#onHeaderNameFocusOut(event: Event): void {
	const target = event.target as EditableSpan;
	if (!this.#header) {
	return;
	}
	const headerName = Platform.StringUtilities.toLowerCaseString(target.value.trim());
	// If the header name has been edited to '', reset it to its previous value.
	if (headerName === '') {
	target.value = this.#header.name;
	} else if (!compareHeaders(headerName, this.#header.name.trim())) {
	this.#header.name = headerName;
	this.dispatchEvent(new HeaderEditedEvent(headerName, this.#header.value \|\| ''));
	void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
	}

	// Clear selection (needed when pressing 'enter' in editable span).
	const selection = window.getSelection();
	selection?.removeAllRanges();
	}

	#onRemoveOverrideClick(): void {
	if (!this.#header) {
	return;
	}
	const headerValueElement = this.#shadow.querySelector('.header-value devtools-editable-span') as EditableSpan;
	if (this.#header.originalValue) {
	headerValueElement.value = this.#header?.originalValue;
	}
	this.dispatchEvent(new HeaderRemovedEvent(this.#header.name, this.#header.value \|\| ''));
	}

	#onKeyDown(event: KeyboardEvent): void {
	const target = event.target as EditableSpan;
	if (event.key === 'Escape') {
	event.consume();
	if (target.matches('.header-name devtools-editable-span')) {
	target.value = this.#header?.name \|\| '';
	this.#onHeaderNameEdit(event);
	} else if (target.matches('.header-value devtools-editable-span')) {
	target.value = this.#header?.value \|\| '';
	this.#onHeaderValueEdit(event);

	if (this.#header?.originalName) {
	const headerNameElement = this.#shadow.querySelector('.header-name devtools-editable-span') as EditableSpan;
	headerNameElement.value = this.#header.originalName;
	this.#header.originalName = '';
	headerNameElement.dispatchEvent(new Event('input'));
	headerNameElement.focus();
	return;
	}
	}
	target.blur();
	}
	}

	#onHeaderNameEdit(event: Event): void {
	const editable = event.target as EditableSpan;
	const isValidName = isValidHeaderName(editable.value);
	if (this.#isValidHeaderName !== isValidName) {
	this.#isValidHeaderName = isValidName;
	void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
	}
	}

	#onHeaderValueEdit(event: Event): void {
	const editable = event.target as EditableSpan;
	const isEdited =
	this.#header?.originalValue !== undefined && !compareHeaders(this.#header?.originalValue \|\| '', editable.value);
	if (this.#isHeaderValueEdited !== isEdited) {
	this.#isHeaderValueEdited = isEdited;
	if (this.#header) {
	this.#header.highlight = false;
	}
	void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
	}
	}

	#onHeaderNamePaste(event: ClipboardEvent): void {
	if (!event.clipboardData) {
	return;
	}

	const nameEl = event.target as EditableSpan;
	const clipboardText = event.clipboardData.getData('text/plain') \|\| '';
	const separatorPosition = clipboardText.indexOf(':');

	if (separatorPosition < 1) {
	// Not processing further either case 'abc' or ':abc'
	nameEl.value = clipboardText;
	event.preventDefault();
	nameEl.dispatchEvent(new Event('input', {bubbles: true}));
	return;
	}

	if (this.#header) {
	this.#header.originalName = this.#header.name;
	}

	const headerValue = clipboardText.substring(separatorPosition + 1, clipboardText.length).trim();
	const headerName = clipboardText.substring(0, separatorPosition);

	nameEl.value = headerName;
	nameEl.dispatchEvent(new Event('input'));

	const valueEL = this.#shadow.querySelector<HTMLElement>('.header-value devtools-editable-span');
	if (valueEL) {
	valueEL.focus();
	(valueEL as EditableSpan).value = headerValue;
	valueEL.dispatchEvent(new Event('input'));
	}
	event.preventDefault();
	}
	}

	customElements.define('devtools-header-section-row', HeaderSectionRow);

	declare global {
	interface HTMLElementTagNameMap {
	'devtools-header-section-row': HeaderSectionRow;
	'devtools-editable-span': EditableSpan;
	}

	interface HTMLElementEventMap {
	[HeaderEditedEvent.eventName]: HeaderEditedEvent;
	}
	}

	interface BlockedDetailsDescriptor {
	explanation: () => string;
	examples: Array<{
	codeSnippet: string,
	comment?: () => string,
	}>;
	link: {
	url: string,
	}\|null;
	reveal?: () => void;
	}

	export const enum EditingAllowedStatus {
	DISABLED = 0, // Local overrides are currently disabled.
	ENABLED = 1, // The header is free to be edited.
	FORBIDDEN = 2, // Editing this header is forbidden even when local overrides are enabled.
	}

	export interface HeaderDetailsDescriptor {
	name: Platform.StringUtilities.LowerCaseString;
	value: string\|null;
	headerValueIncorrect?: boolean;
	blockedDetails?: BlockedDetailsDescriptor;
	headerNotSet?: boolean;
	setCookieBlockedReasons?: Protocol.Network.SetCookieBlockedReason[];
	highlight?: boolean;
	isResponseHeader?: boolean;
	}

	export interface HeaderEditorDescriptor {
	name: Platform.StringUtilities.LowerCaseString;
	value: string\|null;
	originalName?: string\|null;
	originalValue?: string\|null;
	isOverride?: boolean;
	valueEditable: EditingAllowedStatus;
	nameEditable?: boolean;
	isDeleted?: boolean;
	}

	export type HeaderDescriptor = HeaderDetailsDescriptor&HeaderEditorDescriptor;