chrome-devtools-frontend/front_end/panels/network/RequestPayloadView.ts

Chrome DevTools UI

// Copyright 2021 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/*
 * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
 * Copyright (C) IBM Corp. 2009  All rights reserved.
 * Copyright (C) 2010 Google Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 * 1.  Redistributions of source code must retain the above copyright
 *     notice, this list of conditions and the following disclaimer.
 * 2.  Redistributions in binary form must reproduce the above copyright
 *     notice, this list of conditions and the following disclaimer in the
 *     documentation and/or other materials provided with the distribution.
 * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
 *     its contributors may be used to endorse or promote products derived
 *     from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

import * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as i18n from '../../core/i18n/i18n.js';
import * as SDK from '../../core/sdk/sdk.js';
import * as Buttons from '../../ui/components/buttons/buttons.js';
import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
// eslint-disable-next-line @devtools/es-modules-import
import objectPropertiesSectionStyles from '../../ui/legacy/components/object_ui/objectPropertiesSection.css.js';
// eslint-disable-next-line @devtools/es-modules-import
import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
import * as UI from '../../ui/legacy/legacy.js';
import {Directives, html, type LitTemplate, render, type TemplateResult} from '../../ui/lit/lit.js';
import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';

import requestPayloadTreeStyles from './requestPayloadTree.css.js';
import requestPayloadViewStyles from './requestPayloadView.css.js';
import {ShowMoreDetailsWidget} from './ShowMoreDetailsWidget.js';

const {classMap} = Directives;
const {widgetConfig} = UI.Widget;
const UIStrings = {
  /**
   * @description A context menu item Payload View of the Network panel to copy a parsed value.
   */
  copyValue: 'Copy value',
  /**
   * @description A context menu item Payload View of the Network panel to copy the payload.
   */
  copyPayload: 'Copy',
  /**
   * @description Text in Request Payload View of the Network panel. This is a noun-phrase meaning the
   * payload of a network request.
   */
  requestPayload: 'Request Payload',
  /**
   * @description Text in Request Payload View of the Network panel
   */
  unableToDecodeValue: '(unable to decode value)',
  /**
   * @description Text in Request Payload View of the Network panel
   */
  queryStringParameters: 'Query String Parameters',
  /**
   * @description Text in Request Payload View of the Network panel
   */
  formData: 'Form Data',
  /**
   * @description Text for toggling the view of payload data (e.g. query string parameters) from source to parsed in the payload tab
   */
  viewParsed: 'View parsed',
  /**
   * @description Text to show an item is empty
   */
  empty: '(empty)',
  /**
   * @description Text for toggling the view of payload data (e.g. query string parameters) from parsed to source in the payload tab
   */
  viewSource: 'View source',
  /**
   * @description Text for toggling payload data (e.g. query string parameters) from decoded to
   * encoded in the payload tab or in the cookies preview. URL-encoded is a different data format for
   * the same data, which the user sees when they click this command.
   */
  viewUrlEncoded: 'View URL-encoded',
  /**
   * @description Text for toggling payload data (e.g. query string parameters) from encoded to decoded in the payload tab or in the cookies preview
   */
  viewDecoded: 'View decoded',
} as const;
const str_ = i18n.i18n.registerUIStrings('panels/network/RequestPayloadView.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

interface ViewInput {
  decodeRequestParameters: boolean;
  setURLDecoding(value: boolean): void;
  viewQueryParamSource: boolean;
  setViewQueryParamSource(value: boolean): void;
  viewFormParamSource: boolean;
  setViewFormParamSource(value: boolean): void;
  viewJSONPayloadSource: boolean;
  setViewJSONPayloadSource(value: boolean): void;
  copyValue(value: string): void;

  formData: string|undefined;
  formParameters: SDK.NetworkRequest.NameValue[]|undefined;
  queryString: string|null;
  queryParameters: SDK.NetworkRequest.NameValue[]|null;
}

type View = (input: ViewInput, output: object, target: HTMLElement) => void;
export const DEFAULT_VIEW: View = (input, output, target) => {
  const createViewSourceToggle = (viewSource: boolean, callback: (value: boolean) => void): LitTemplate =>
      html`<devtools-button
      class="payload-toggle"
      jslog=${VisualLogging.action().track({click: true}).context('source-parse')}
      .variant=${Buttons.Button.Variant.OUTLINED}
      @click=${(e: Event) => {
        e.consume();
        callback(!viewSource);
      }}>
      ${viewSource ? i18nString(UIStrings.viewParsed) : i18nString(UIStrings.viewSource)}
    </devtools-button>`;

  const copyValueContextmenu = (title: string, value: () => string, jslogContext: string) => (e: Event) => {
    e.consume(true);
    const contextMenu = new UI.ContextMenu.ContextMenu(e);
    const copyValueHandler = (): void => input.copyValue(value());
    contextMenu.clipboardSection().appendItem(title, copyValueHandler, {jslogContext});
    void contextMenu.show();
  };

  const createSourceText = (text: string): TemplateResult => html`<li role=treeitem
      @contextmenu=${copyValueContextmenu(i18nString(UIStrings.copyPayload), () => text, 'copy-payload')}>
        <devtools-widget class='payload-value source-code' .widgetConfig=${widgetConfig(ShowMoreDetailsWidget, {text})}>
        </devtools-widget>
      </li>`;

  const createParsedParams = (params: SDK.NetworkRequest.NameValue[]): TemplateResult[] => params.map(
      param => html`<li role=treeitem @contextmenu=${
          copyValueContextmenu(i18nString(UIStrings.copyValue), () => decodeURIComponent(param.value), 'copy-value')}>${
          param.name !== '' ?
              html`${RequestPayloadView.formatParameter(param.name, 'payload-name', input.decodeRequestParameters)}${
                  RequestPayloadView.formatParameter(
                      param.value, 'payload-value source-code', input.decodeRequestParameters)}` :
              RequestPayloadView.formatParameter(
                  i18nString(UIStrings.empty), 'empty-request-payload', input.decodeRequestParameters)}</li>`);

  const parsedFormData = (() => {
    if (input.formData && !input.formParameters) {
      try {
        return JSON.parse(input.formData);
      } catch {
      }
      return undefined;
    }
  })();

  const createPayload = (parsedFormData: unknown): TemplateResult => {
    const object = new SDK.RemoteObject.LocalJSONObject(parsedFormData);
    const section =
        new ObjectUI.ObjectPropertiesSection.RootElement(new ObjectUI.ObjectPropertiesSection.ObjectTree(object));
    section.title = document.createTextNode(object.description);
    section.listItemElement.classList.add('source-code', 'object-properties-section');
    section.childrenListElement.classList.add('source-code', 'object-properties-section');
    section.expand();
    return html`<devtools-tree-wrapper
          .treeElement=${section}></devtools-tree-wrapper>`;
  };

  const queryStringExpandedSetting =
      Common.Settings.Settings.instance().createSetting('request-info-query-string-category-expanded', true);
  const formDataExpandedSetting =
      Common.Settings.Settings.instance().createSetting('request-info-form-data-category-expanded', true);
  const requestPayloadExpandedSetting =
      Common.Settings.Settings.instance().createSetting('request-info-request-payload-category-expanded', true);

  const toggleURLDecoding = (e: Event): void => {
    e.consume();
    input.setURLDecoding(!input.decodeRequestParameters);
  };

  const onContextMenu = (viewSource: boolean, callback: (value: boolean) => void, includeURLDecodingOption = true) => (
      event: Event): void => {
    const contextMenu = new UI.ContextMenu.ContextMenu(event);
    const section = contextMenu.newSection();
    if (viewSource) {
      section.appendItem(i18nString(UIStrings.viewParsed), () => callback(!viewSource), {jslogContext: 'view-parsed'});
    } else {
      section.appendItem(i18nString(UIStrings.viewSource), () => callback(!viewSource), {jslogContext: 'view-source'});
      if (includeURLDecodingOption) {
        const viewURLEncodedText =
            input.decodeRequestParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded);
        section.appendItem(
            viewURLEncodedText, toggleURLDecoding.bind(this, event), {jslogContext: 'toggle-url-decoding'});
      }
    }
    void contextMenu.show();
  };

  // clang-format off
  render(html`<style>${requestPayloadViewStyles}</style>
   <devtools-tree dense class=request-payload-tree .template=${html`
     <style>${objectValueStyles}</style>
     <style>${objectPropertiesSectionStyles}</style>
     <style>${requestPayloadTreeStyles}</style>
     <ul role=tree>
      <li
          role=treeitem
          ?hidden=${!input.queryParameters}
          jslog=${VisualLogging.section().context('query-string')}
          @contextmenu=${onContextMenu(input.viewQueryParamSource, input.setViewQueryParamSource)}
          @expanded=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) =>
            queryStringExpandedSetting.set(e.detail.expanded)}
        >
        <div class="selection fill"></div>${i18nString(UIStrings.queryStringParameters)}<span
          class=payload-count>${`\xA0(${input.queryParameters?.length ?? 0})`}</span>${
            createViewSourceToggle(input.viewQueryParamSource, input.setViewQueryParamSource)}
        <devtools-button
            class=payload-toggle
            ?hidden=${input.viewQueryParamSource}
            jslog=${VisualLogging.action().track({click: true}).context('decode-encode')}
            .variant=${Buttons.Button.Variant.OUTLINED}
            @click=${toggleURLDecoding}>
          ${input.decodeRequestParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded)}
        </devtools-button>
        <ul role=group ?hidden=${!queryStringExpandedSetting.get()}>
          ${input.viewQueryParamSource ? createSourceText(input.queryString ?? '')
                                       : createParsedParams(input.queryParameters ?? [])}
        </ul>
      </li>
      <li
          role=treeitem
          ?hidden=${!input.formData || !input.formParameters}
          jslog=${VisualLogging.section().context('form-data')}
          @contextmenu=${onContextMenu(input.viewFormParamSource, input.setViewFormParamSource)}
          @expanded=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => formDataExpandedSetting.set(e.detail.expanded)}
        >
        <div class="selection fill"></div>${i18nString(UIStrings.formData)}<span
          class=payload-count>${`\xA0(${input.formParameters?.length ?? 0})`}</span>${
            createViewSourceToggle(input.viewFormParamSource, input.setViewFormParamSource)}
        <devtools-button
            class=payload-toggle
            ?hidden=${input.viewFormParamSource}
            jslog=${VisualLogging.action().track({click: true}).context('decode-encode')}
            .variant=${Buttons.Button.Variant.OUTLINED}
            @click=${toggleURLDecoding}>
          ${input.decodeRequestParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded)}
        </devtools-button>
        <ul role=group ?hidden=${!formDataExpandedSetting.get()}>>
          ${input.viewFormParamSource ? createSourceText(input.formData ?? '')
                                      : createParsedParams(input.formParameters ?? [])}
        </ul>
      </li>
      <li
          role=treeitem
          ?hidden=${!input.formData || Boolean(input.formParameters)}
          jslog=${VisualLogging.section().context('request-payload')}
          @contextmenu=${onContextMenu(input.viewJSONPayloadSource, input.setViewJSONPayloadSource,
                                       /* includeURLDecodingOption*/ false)}
          @expanded=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) =>
            requestPayloadExpandedSetting.set(e.detail.expanded)}
        >
        <div class="selection fill"></div>${i18nString(UIStrings.requestPayload)}${
            createViewSourceToggle(input.viewJSONPayloadSource, input.setViewJSONPayloadSource)}
        <ul role=group ?hidden=${!requestPayloadExpandedSetting.get()}>
          ${!parsedFormData || input.viewJSONPayloadSource ? createSourceText(input.formData ?? '')
                                                           : createPayload(parsedFormData)}
        </ul>
      </li>
     </ul>
     `}></devtools-tree>
   `, target);
  // clang-format on
};

export class RequestPayloadView extends UI.Widget.VBox {
  #request?: SDK.NetworkRequest.NetworkRequest;
  #decodeRequestParameters = true;
  #formData?: string;
  #formParameters?: SDK.NetworkRequest.NameValue[];
  #view: View;
  #viewJSONPayloadSource = false;
  #viewFormParamSource = false;
  #viewQueryParamSource = false;

  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
    super({jslog: `${VisualLogging.pane('payload').track({resize: true})}`, classes: ['request-payload-view']});
    this.#view = view;
  }

  set request(request: SDK.NetworkRequest.NetworkRequest) {
    if (this.#request) {
      this.#request.removeEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.#refreshFormData, this);
    }
    this.#request = request;

    const contentType = request.requestContentType();
    if (contentType) {
      this.#decodeRequestParameters = Boolean(contentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i));
    }

    if (this.isShowing()) {
      this.#request?.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.#refreshFormData, this);
    }

    this.requestUpdate();
    void this.#refreshFormData();
  }

  get request(): SDK.NetworkRequest.NetworkRequest|undefined {
    return this.#request;
  }

  override wasShown(): void {
    super.wasShown();
    this.request?.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.#refreshFormData, this);

    void this.#refreshFormData();
  }

  override willHide(): void {
    super.willHide();
    this.request?.removeEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.#refreshFormData, this);
  }

  private addEntryContextMenuHandler(
      treeElement: UI.TreeOutline.TreeElement, menuItem: string, jslogContext: string, getValue: () => string): void {
    treeElement.listItemElement.addEventListener('contextmenu', event => {
      event.consume(true);
      const contextMenu = new UI.ContextMenu.ContextMenu(event);
      const copyValueHandler = (): void => {
        Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(getValue());
      };
      contextMenu.clipboardSection().appendItem(menuItem, copyValueHandler, {jslogContext});
      void contextMenu.show();
    });
  }

  override performUpdate(): void {
    if (!this.request) {
      return;
    }

    const input: ViewInput = {
      queryString: this.request.queryString(),
      queryParameters: this.request.queryParameters,
      formData: this.#formData,
      formParameters: this.#formParameters,
      decodeRequestParameters: this.#decodeRequestParameters,
      setURLDecoding: (value: boolean): void => {
        this.#decodeRequestParameters = value;
        this.requestUpdate();
      },
      viewQueryParamSource: this.#viewQueryParamSource,
      setViewQueryParamSource: (value: boolean): void => {
        this.#viewQueryParamSource = value;
        this.requestUpdate();
      },
      viewFormParamSource: this.#viewFormParamSource,
      setViewFormParamSource: (value: boolean): void => {
        this.#viewFormParamSource = value;
        this.requestUpdate();
      },
      viewJSONPayloadSource: this.#viewJSONPayloadSource,
      setViewJSONPayloadSource: (value: boolean): void => {
        this.#viewJSONPayloadSource = value;
        this.requestUpdate();
      },
      copyValue: (value: string): void => {
        Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(value);
      }
    };
    this.#view(input, {}, this.element);
  }

  async #refreshFormData(): Promise<void> {
    this.#formData = await this.request?.requestFormData() ?? undefined;
    if (this.#formData) {
      this.#formParameters = await this.request?.formParameters() ?? undefined;
    }
    this.requestUpdate();
  }

  static formatParameter(value: string, className: string, decodeParameters: boolean): LitTemplate {
    let errorDecoding = false;

    if (decodeParameters) {
      value = value.replace(/\+/g, ' ');
      if (value.indexOf('%') >= 0) {
        try {
          value = decodeURIComponent(value);
        } catch {
          errorDecoding = true;
        }
      }
    }
    const classes = classMap({[className]: !!className, 'empty-value': value === ''});
    return html`<div class=${classes}>
      ${
        errorDecoding ? html`<span class=payload-decode-error>${i18nString(UIStrings.unableToDecodeValue)}</span>` :
                        value}
    </div>`;
  }
}