chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

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

@@ -0,0 +1,176 @@
+/*
+ * 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;
+
+  --override-error-background-color: #d93025;
+}
+
+.row {
+  display: flex;
+  line-height: 20px;
+  padding-left: 8px;
+  gap: 12px;
+  user-select: text;
+}
+
+.row.header-editable {
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
+}
+
+.header-name {
+  color: var(--color-primary);
+  font-weight: 500;
+  width: 160px;
+  flex-shrink: 0;
+  text-transform: capitalize;
+}
+
+.header-editable .header-name {
+  color: var(--color-syntax-1);
+}
+
+.header-value {
+  word-break: break-all;
+}
+
+.header-badge-text {
+  font-variant: small-caps;
+  font-weight: 500;
+  white-space: pre-wrap;
+  word-break: break-all;
+  text-transform: none;
+}
+
+.header-badge {
+  display: inline;
+  background-color: var(--color-accent-red);
+  color: var(--color-background);
+  border-radius: 100vh;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+.call-to-action {
+  background-color: var(--color-background-elevation-1);
+  padding: 8px;
+  border-radius: 2px;
+}
+
+.call-to-action-body {
+  padding: 6px 0;
+  margin-left: 9.5px;
+  border-left: 2px solid var(--issue-color-yellow);
+  padding-left: 18px;
+  line-height: 20px;
+}
+
+.call-to-action .explanation {
+  font-weight: bold;
+}
+
+.call-to-action code {
+  font-size: 90%;
+}
+
+.call-to-action .example .comment::before {
+  content: " — ";
+}
+
+.link,
+.devtools-link {
+  color: var(--color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  outline-offset: 2px;
+}
+
+.explanation .link {
+  font-weight: normal;
+}
+
+.inline-icon {
+  vertical-align: middle;
+}
+
+.header-value code {
+  display: block;
+  white-space: pre-wrap;
+  font-size: 90%;
+  color: var(--color-text-secondary);
+}
+
+x-link .inline-icon { /* stylelint-disable-line selector-type-no-unknown */
+  padding-right: 3px;
+}
+
+.header-highlight {
+  background-color: var(--override-header-highlight-background-color);
+}
+
+.header-warning {
+  color: var(--override-error-background-color);
+}
+
+.header-overridden {
+  background-color: var(--color-accent-green-background);
+  border-left: 3px solid var(--color-accent-green);
+  padding-left: 5px;
+}
+
+.header-highlight.header-overridden {
+  background-color: var(--override-header-highlight-background-color);
+  border-left: 3px solid var(--color-accent-green);
+  padding-left: 5px;
+}
+
+.editable {
+  cursor: text;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+  min-height: 18px;
+  line-height: 18px;
+  min-width: 0.5em;
+  background: transparent;
+  border: none;
+  outline: none;
+  display: inline-block;
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
+}
+
+.editable:hover,
+.editable:focus {
+  box-shadow: 0 0 0 1px var(--color-details-hairline);
+  border-radius: 2px;
+}
+
+.header-editable .header-name .editable {
+  color: var(--color-syntax-1);
+}
+
+.inline-button {
+  vertical-align: middle;
+}
+
+.row .inline-button {
+  opacity: 0%;
+  visibility: hidden;
+  transition: opacity 200ms;
+}
+
+.row.header-overridden:focus-within .inline-button,
+.row.header-overridden:hover .inline-button {
+  opacity: 100%;
+  visibility: visible;
+}
+
+.row:hover .inline-button.enable-editing {
+  opacity: 100%;
+  visibility: visible;
+}

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

@@ -0,0 +1,477 @@
+// 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.
+
+import * as SDK from '../../../core/sdk/sdk.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import type * as Protocol from '../../../generated/protocol.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Host from '../../../core/host/host.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as ClientVariations from '../../../third_party/chromium/client-variations/client-variations.js';
+import * as Platform from '../../../core/platform/platform.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+
+import headerSectionRowStyles from './HeaderSectionRow.css.js';
+
+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 for X-Client-Data HTTP headers
+  */
+  decoded: 'Decoded:',
+  /**
+  *@description The title of a button to enable overriding a HTTP header.
+  */
+  editHeader: 'Override header',
+  /**
+  *@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 The title of a button which removes a HTTP header override.
+  */
+  removeOverride: 'Remove this header override',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/network/components/HeaderSectionRow.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const trashIconUrl = new URL('../../../Images/trash_bin_material_icon.svg', import.meta.url).toString();
+const editIconUrl = new URL('../../../Images/edit-icon.svg', import.meta.url).toString();
+
+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 {
+  static readonly litTagName = LitHtml.literal`devtools-header-section-row`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #header: HeaderDescriptor|null = null;
+  readonly #boundRender = this.#render.bind(this);
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [headerSectionRowStyles];
+    this.#shadow.addEventListener('focusin', this.#onFocusIn.bind(this));
+    this.#shadow.addEventListener('focusout', this.#onFocusOut.bind(this));
+    this.#shadow.addEventListener('keydown', this.#onKeyDown.bind(this));
+    this.#shadow.addEventListener('paste', this.#onPaste.bind(this));
+    this.#shadow.addEventListener('input', this.#onInput.bind(this));
+  }
+
+  set data(data: HeaderSectionRowData) {
+    this.#header = data.header;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #render(): void {
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('HeaderSectionRow render was not scheduled');
+    }
+
+    if (!this.#header) {
+      return;
+    }
+
+    const rowClasses = LitHtml.Directives.classMap({
+      row: true,
+      'header-highlight': Boolean(this.#header.highlight),
+      'header-overridden': Boolean(this.#header.isOverride),
+      'header-editable': Boolean(this.#header.valueEditable),
+    });
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(html`
+      <div class=${rowClasses}>
+        <div class="header-name">
+          ${this.#header.headerNotSet ?
+            html`<div class="header-badge header-badge-text">${i18n.i18n.lockedString('not-set')}</div> ` :
+            LitHtml.nothing
+          }${this.#header.nameEditable ? this.#renderEditable(this.#header.name) : this.#header.name}:
+        </div>
+        <div
+          class="header-value ${this.#header.headerValueIncorrect ? 'header-warning' : ''}"
+          @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+        >
+          ${this.#renderHeaderValue()}
+        </div>
+      </div>
+      ${this.#maybeRenderBlockedDetails(this.#header.blockedDetails)}
+    `, this.#shadow, {host: this});
+    // clang-format on
+
+    const editable = this.shadowRoot?.querySelector<HTMLSpanElement>('.header-value .editable');
+    if (editable) {
+      this.#markOverrideStatus(editable, /* canRemoveHighlight */ false);
+    }
+  }
+
+  #renderHeaderValue(): LitHtml.LitTemplate {
+    if (!this.#header) {
+      return LitHtml.nothing;
+    }
+    if (!this.#header.valueEditable) {
+      // clang-format off
+      return html`
+      ${this.#header.value || ''}
+      ${this.#maybeRenderHeaderValueSuffix(this.#header)}
+      ${this.#header.isResponseHeader ? html`
+        <${Buttons.Button.Button.litTagName}
+          title=${i18nString(UIStrings.editHeader)}
+          .size=${Buttons.Button.Size.TINY}
+          .iconUrl=${editIconUrl}
+          .variant=${Buttons.Button.Variant.ROUND}
+          .iconWidth=${'13px'}
+          .iconHeight=${'13px'}
+          @click=${(): void => {
+            this.dispatchEvent(new EnableHeaderEditingEvent());
+          }}
+          class="enable-editing inline-button"
+        ></${Buttons.Button.Button.litTagName}>
+      ` : LitHtml.nothing}
+    `;
+    }
+    return html`
+      ${this.#renderEditable(this.#header.value || '')}
+      ${this.#maybeRenderHeaderValueSuffix(this.#header)}
+      <${Buttons.Button.Button.litTagName}
+        title=${i18nString(UIStrings.removeOverride)}
+        .size=${Buttons.Button.Size.TINY}
+        .iconUrl=${trashIconUrl}
+        .variant=${Buttons.Button.Variant.ROUND}
+        .iconWidth=${'13px'}
+        .iconHeight=${'13px'}
+        class="remove-header inline-button"
+        @click=${this.#onRemoveOverrideClick}
+      ></${Buttons.Button.Button.litTagName}>
+    `;
+    // clang-format on
+  }
+
+  focus(): void {
+    requestAnimationFrame(() => {
+      const editableName = this.#shadow.querySelector<HTMLElement>('.header-name .editable');
+      editableName?.focus();
+    });
+  }
+
+  #renderEditable(value: string): LitHtml.TemplateResult {
+    // This uses LitHtml's `live`-directive, so that when checking whether to
+    // update during re-render, `value` is compared against the actual live DOM
+    // value of the contenteditable element and not the potentially outdated
+    // value from the previous render.
+    // clang-format off
+    return html`<span contenteditable="true" class="editable" tabindex="0" .innerText=${LitHtml.Directives.live(value)}></span>`;
+    // clang-format on
+  }
+
+  #maybeRenderHeaderValueSuffix(header: HeaderDescriptor): LitHtml.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`
+        <${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 (header.name === 'x-client-data') {
+      const data = ClientVariations.parseClientVariations(header.value || '');
+      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 (blockedDetails?.reveal) {
+      // Disabled until https://crbug.com/1079231 is fixed.
+      // clang-format off
+      return html`
+        <div class="devtools-link" @click=${blockedDetails.reveal}>
+          <${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>
+      `;
+      // clang-format on
+    }
+    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;
+  }
+
+  #selectAllText(target: HTMLElement): void {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(target);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+
+  #onFocusIn(e: Event): void {
+    const target = e.target as HTMLElement;
+    if (target.matches('.editable')) {
+      this.#selectAllText(target);
+    }
+  }
+
+  #onFocusOut(event: Event): void {
+    const target = event.target as HTMLElement;
+    if (!this.#header || !target.matches('.editable')) {
+      return;
+    }
+    target.innerText = target.innerText.trim();
+    if (target.matches('.header-value .editable')) {
+      this.#markOverrideStatus(target);
+    }
+
+    const headerNameElement = this.#shadow.querySelector('.header-name') as HTMLElement;
+    const headerValueElement = this.#shadow.querySelector('.header-value .editable') as HTMLElement;
+    const headerName = Platform.StringUtilities.toLowerCaseString(headerNameElement.innerText.slice(0, -1));
+    const headerValue = headerValueElement.innerText;
+
+    if (headerName !== '') {
+      if (headerName !== this.#header.name || headerValue !== this.#header.value) {
+        this.#header.name = headerName;
+        this.#header.value = headerValue;
+        this.dispatchEvent(new HeaderEditedEvent(headerName, headerValue));
+      }
+    } else {
+      // If the header name has been edited to '', reset it to its previous value.
+      const headerNameEditable = this.#shadow.querySelector('.header-name .editable');
+      if (headerNameEditable) {
+        (headerNameEditable as HTMLElement).innerText = this.#header.name || '';
+      }
+    }
+
+    // clear selection
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+  }
+
+  #onRemoveOverrideClick(): void {
+    const headerNameElement = this.#shadow.querySelector('.header-name') as HTMLElement;
+    const headerValueElement = this.#shadow.querySelector('.header-value .editable') as HTMLElement;
+    const headerName = Platform.StringUtilities.toLowerCaseString(headerNameElement.innerText.slice(0, -1));
+    const headerValue = headerValueElement.innerText;
+    this.dispatchEvent(new HeaderRemovedEvent(headerName, headerValue));
+  }
+
+  #onKeyDown(event: Event): void {
+    const keyboardEvent = event as KeyboardEvent;
+    const target = event.target as HTMLElement;
+    if (keyboardEvent.key === 'Escape') {
+      event.consume();
+      if (target.matches('.header-name .editable')) {
+        target.innerText = this.#header?.name || '';
+      } else if (target.matches('.header-value .editable')) {
+        target.innerText = this.#header?.value || '';
+        this.#markOverrideStatus(target);
+      }
+      target.blur();
+    }
+    if (keyboardEvent.key === 'Enter') {
+      event.preventDefault();
+      target.blur();
+    }
+  }
+
+  #onPaste(event: Event): void {
+    const clipboardEvent = event as ClipboardEvent;
+    event.preventDefault();
+    if (clipboardEvent.clipboardData) {
+      const text = clipboardEvent.clipboardData.getData('text/plain');
+
+      const selection = this.#shadow.getSelection();
+      if (!selection) {
+        return;
+      }
+      selection.deleteFromDocument();
+      selection.getRangeAt(0).insertNode(document.createTextNode(text));
+    }
+    const target = event.target as HTMLElement;
+    if (target.matches('.header-value .editable')) {
+      this.#markOverrideStatus(target);
+    }
+  }
+
+  #markOverrideStatus(editable: HTMLElement, canRemoveHighlight = true): void {
+    if (!this.#header) {
+      return;
+    }
+    // We directly add/remove classes here instead of changing HeaderSectionRowData
+    // to prevent a re-render, which would mess up the current cursor position.
+    const row = this.shadowRoot?.querySelector<HTMLDivElement>('.row');
+    if (!row) {
+      return;
+    }
+    if (this.#header.isOverride || editable.innerText !== this.#header.originalValue) {
+      row.classList.add('header-overridden');
+      if (canRemoveHighlight) {
+        row.classList.remove('header-highlight');
+      }
+    } else {
+      row.classList.remove('header-overridden');
+    }
+  }
+
+  #onInput(event: Event): void {
+    const target = event.target as HTMLElement;
+    if (target.matches('.header-value .editable')) {
+      this.#markOverrideStatus(target);
+    }
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-header-section-row', HeaderSectionRow);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-header-section-row': HeaderSectionRow;
+  }
+
+  interface HTMLElementEventMap {
+    [HeaderEditedEvent.eventName]: HeaderEditedEvent;
+  }
+}
+
+interface BlockedDetailsDescriptor {
+  explanation: () => string;
+  examples: Array<{
+    codeSnippet: string,
+    comment?: () => string,
+  }>;
+  link: {
+    url: string,
+  }|null;
+  reveal?: () => void;
+}
+
+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;
+  originalValue?: string|null;
+  isOverride?: boolean;
+  valueEditable?: boolean;
+  nameEditable?: boolean;
+}
+
+export type HeaderDescriptor = HeaderDetailsDescriptor&HeaderEditorDescriptor;

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

@@ -0,0 +1,59 @@
+/*
+ * 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;
+}
+
+.call-to-action {
+  background-color: var(--color-background-elevation-1);
+  padding: 8px;
+  border-radius: 2px;
+}
+
+.call-to-action-body {
+  padding: 6px 0;
+  margin-left: 9.5px;
+  border-left: 2px solid var(--issue-color-yellow);
+  padding-left: 18px;
+  line-height: 20px;
+}
+
+.call-to-action .explanation {
+  font-weight: bold;
+}
+
+.call-to-action code {
+  font-size: 90%;
+}
+
+.call-to-action .example .comment::before {
+  content: " — ";
+}
+
+.link,
+.devtools-link {
+  color: var(--color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  outline-offset: 2px;
+}
+
+.explanation .link {
+  font-weight: normal;
+}
+
+.inline-icon {
+  vertical-align: middle;
+}