chrome-devtools-frontend 1.0.1660788 → 1.0.1662289

package/front_end/panels/linear_memory_inspector/components/LinearMemoryNavigator.ts

@@ -14,27 +14,27 @@ import linearMemoryNavigatorStyles from './linearMemoryNavigator.css.js';
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over a valid memory address (e.g. 0x0) in the address line in the Linear memory inspector.
+   * @description Tooltip text that appears when hovering over a valid memory address (for example, 0x0) in the address line in the Memory inspector panel.
    */
   enterAddress: 'Enter address',
   /**
-   * @description Tooltip text that appears when hovering over the button to go back in history in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the button to go back in history in the Memory inspector panel.
    */
   goBackInAddressHistory: 'Go back in address history',
   /**
-   * @description Tooltip text that appears when hovering over the button to go forward in history in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the button to go forward in history in the Memory inspector panel.
    */
   goForwardInAddressHistory: 'Go forward in address history',
   /**
-   * @description Tooltip text that appears when hovering over the page back icon in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the page back icon in the Memory inspector panel.
    */
   previousPage: 'Previous page',
   /**
-   * @description Tooltip text that appears when hovering over the next page icon in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the next page icon in the Memory inspector panel.
    */
   nextPage: 'Next page',
   /**
-   * @description Text to refresh the page
+   * @description Tooltip text that appears when hovering over the refresh button in the Memory inspector panel.
    */
   refresh: 'Refresh',
 } as const;

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -18,14 +18,14 @@ import {ValueInterpreterSettings} from './ValueInterpreterSettings.js';
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over the gear button to open and close settings in the Linear memory inspector. These settings
+   * @description Tooltip text that appears when hovering over the gear button to open and close settings in the Memory inspector panel. These settings
    *             allow the user to change the value type to view, such as 32-bit Integer, or 32-bit Float.
    */
   toggleValueTypeSettings: 'Toggle value type settings',
   /**
-   * @description Tooltip text that appears when hovering over the 'Little Endian' or 'Big Endian' setting in the Linear memory inspector.
+   * @description Tooltip text that appears when hovering over the Little Endian or Big Endian setting in the Memory inspector panel.
    */
-  changeEndianness: 'Change `Endianness`',
+  changeEndianness: 'Change endianness',
 } as const;
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts', UIStrings);

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -26,27 +26,26 @@ import {
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over an unsigned interpretation of the memory under the Value Interpreter
+   * @description Tooltip text that appears when hovering over an unsigned interpretation of the memory in the value interpreter in the Memory inspector panel.
    */
-  unsignedValue: '`Unsigned` value',
+  unsignedValue: 'Unsigned value',
   /**
-   * @description Tooltip text that appears when hovering over the element to change value type modes of under the Value Interpreter. Value type modes
-   *             are different ways of viewing a certain value, e.g.: 10 (decimal) can be 0xa in hexadecimal mode, or 12 in octal mode.
+   * @description Tooltip text that appears when hovering over the element to change value type modes in the value interpreter in the Memory inspector panel. Value type modes
+   *             are different ways of viewing a certain value, for example: 10 (decimal) can be 0xa in hexadecimal mode, or 12 in octal mode.
    */
   changeValueTypeMode: 'Change mode',
   /**
-   * @description Tooltip text that appears when hovering over a signed interpretation of the memory under the Value Interpreter
+   * @description Tooltip text that appears when hovering over a signed interpretation of the memory in the value interpreter in the Memory inspector panel.
    */
-  signedValue: '`Signed` value',
+  signedValue: 'Signed value',
   /**
-   * @description Tooltip text that appears when hovering over a 'jump-to-address' button that is next to a pointer (32-bit or 64-bit) under the Value Interpreter
+   * @description Tooltip text that appears when hovering over a jump-to-address button that is next to a pointer (32-bit or 64-bit) in the value interpreter in the Memory inspector panel.
    */
   jumpToPointer: 'Jump to address',
   /**
-   * @description Tooltip text that appears when hovering over a 'jump-to-address' button that is next to a pointer (32-bit or 64-bit) with an invalid address under the Value Interpreter.
+   * @description Tooltip text that appears when hovering over a jump-to-address button that is next to a pointer (32-bit or 64-bit) with an invalid address in the value interpreter in the Memory inspector panel.
    */
   addressOutOfRange: 'Address out of memory range',
-
 } as const;
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts', UIStrings);

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplayUtils.ts

@@ -7,8 +7,8 @@ import * as Platform from '../../../core/platform/platform.js';
 
 const UIStrings = {
   /**
-   * @description Text that is shown in the LinearMemoryInspector if a value could not be correctly formatted
-   *             for the requested mode (e.g. we do not floats to be represented as hexadecimal numbers).
+   * @description Text that is shown in the Memory inspector panel if a value cannot be correctly formatted
+   *             for the requested mode (for example, when a float cannot be represented as a hexadecimal number).
    *             Abbreviation stands for 'not applicable'.
    */
   notApplicable: 'N/A',

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterSettings.ts

@@ -15,7 +15,7 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Name of a group of selectable value types that do not fall under integer and floating point value types, e.g. Pointer32. The group appears name appears under the Value Interpreter Settings.
+   * @description Name of a group of selectable value types that do not fall under integer and floating point value types (for example, Pointer32). The group name appears in the value interpreter settings in the Memory inspector panel.
    */
   otherGroup: 'Other',
 } as const;

package/front_end/panels/linear_memory_inspector/linear_memory_inspector-meta.ts

@@ -12,11 +12,11 @@ import type * as LinearMemoryInspector from './linear_memory_inspector.js';
 
 const UIStrings = {
   /**
-   * @description Title of the Linear Memory inspector tool
+   * @description Title of the Memory inspector panel.
    */
   memoryInspector: 'Memory inspector',
   /**
-   * @description Command for showing the 'Memory inspector' tool
+   * @description Command for showing the Memory inspector panel.
    */
   showMemoryInspector: 'Show Memory inspector',
 } as const;

package/front_end/panels/network/RequestPayloadView.ts

@@ -109,8 +109,10 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/RequestPayloadView.ts',
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface ViewInput {
-  decodeRequestParameters: boolean;
-  setURLDecoding(value: boolean): void;
+  decodeQueryParameters: boolean;
+  setDecodeQueryParameters(value: boolean): void;
+  decodeFormParameters: boolean;
+  setDecodeFormParameters(value: boolean): void;
   viewQueryParamSource: boolean;
   setViewQueryParamSource(value: boolean): void;
   viewFormParamSource: boolean;
@@ -157,15 +159,28 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         </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 createParsedParams = (params: SDK.NetworkRequest.NameValue[],
+                              decodeParameters: boolean): TemplateResult[] => params.map(param => {
+    // clang-format off
+        return html`
+        <li role=treeitem
+            @contextmenu=${copyValueContextmenu(
+                i18nString(UIStrings.copyValue),
+                () => decodeURIComponent(param.value),
+                'copy-value'
+            )}>
+          ${param.name !== '' ? html`
+            ${RequestPayloadView.formatParameter(param.name, 'payload-name', decodeParameters)}
+            ${RequestPayloadView.formatParameter(param.value, 'payload-value source-code', decodeParameters)}
+          ` : RequestPayloadView.formatParameter(
+              i18nString(UIStrings.empty),
+              'empty-request-payload',
+              decodeParameters
+          )}
+        </li>
+      `;
+    // clang-format on
+  });
 
   const parsedFormData = (() => {
     if (input.formData && !input.formParameters) {
@@ -173,23 +188,25 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         return JSON.parse(input.formData);
       } catch {
       }
-      return undefined;
     }
+    return undefined;
   })();
 
-  const createPayload = (parsedFormData: unknown): TemplateResult => {
+  const createPayload = (parsedFormData: unknown): LitTemplate => {
+    if (!parsedFormData) {
+      return nothing;
+    }
     const object = new SDK.RemoteObject.LocalJSONObject(parsedFormData);
-    const section =
-        new ObjectUI.ObjectPropertiesSection.RootElement(new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
-          readOnly: true,
-          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-        }));
-    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 objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
+      readOnly: true,
+      propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+    });
+    return html`
+      <li role=treeitem class="source-code object-properties-section-root-element object-properties-section" open>
+        ${object.description}
+        ${object.hasChildren ? ObjectUI.ObjectPropertiesSection.renderObjectTree(objectTree) : nothing}
+      </li>
+    `;
   };
 
   const queryStringExpandedSetting =
@@ -199,24 +216,23 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   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 onContextMenu = (
+      viewSource: boolean,
+      setViewSource: (value: boolean) => void,
+      decoding?: {decode: boolean, toggleDecode: () => void},
+      ) => (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'});
+      section.appendItem(i18nString(UIStrings.viewParsed), () => setViewSource(!viewSource),
+                         {jslogContext: 'view-parsed'});
     } else {
-      section.appendItem(i18nString(UIStrings.viewSource), () => callback(!viewSource), {jslogContext: 'view-source'});
-      if (includeURLDecodingOption) {
+      section.appendItem(i18nString(UIStrings.viewSource), () => setViewSource(!viewSource),
+                         {jslogContext: 'view-source'});
+      if (decoding) {
         const viewURLEncodedText =
-            input.decodeRequestParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded);
-        section.appendItem(
-            viewURLEncodedText, toggleURLDecoding.bind(this, event), {jslogContext: 'toggle-url-decoding'});
+            decoding.decode ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded);
+        section.appendItem(viewURLEncodedText, () => decoding.toggleDecode(), {jslogContext: 'toggle-url-decoding'});
       }
     }
     void contextMenu.show();
@@ -233,7 +249,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           role=treeitem
           ?hidden=${!input.queryParameters}
           jslog=${VisualLogging.section().context('query-string')}
-          @contextmenu=${onContextMenu(input.viewQueryParamSource, input.setViewQueryParamSource)}
+          @contextmenu=${onContextMenu(
+              input.viewQueryParamSource,
+              input.setViewQueryParamSource,
+              {
+                decode: input.decodeQueryParameters,
+                toggleDecode: () => input.setDecodeQueryParameters(!input.decodeQueryParameters),
+              }
+          )}
           @expanded=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) =>
             queryStringExpandedSetting.set(e.detail.expanded)}
           ?open=${queryStringExpandedSetting.get()}
@@ -246,19 +269,26 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             ?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)}
+            @click=${(e: Event) => { e.consume(); input.setDecodeQueryParameters(!input.decodeQueryParameters); }}>
+          ${input.decodeQueryParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded)}
         </devtools-button>
         <ul role=group>
           ${ifExpanded(input.viewQueryParamSource ? createSourceText(input.queryString ?? '')
-                                                  : createParsedParams(input.queryParameters ?? []))}
+                                                  : createParsedParams(input.queryParameters ?? [], input.decodeQueryParameters))}
         </ul>
       </li>
       <li
           role=treeitem
           ?hidden=${!input.formData || !input.formParameters}
           jslog=${VisualLogging.section().context('form-data')}
-          @contextmenu=${onContextMenu(input.viewFormParamSource, input.setViewFormParamSource)}
+          @contextmenu=${onContextMenu(
+              input.viewFormParamSource,
+              input.setViewFormParamSource,
+              {
+                decode: input.decodeFormParameters,
+                toggleDecode: () => input.setDecodeFormParameters(!input.decodeFormParameters),
+              }
+          )}
           @expanded=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => formDataExpandedSetting.set(e.detail.expanded)}
           ?open=${formDataExpandedSetting.get()}
         >
@@ -270,20 +300,22 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             ?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)}
+            @click=${(e: Event) => { e.consume(); input.setDecodeFormParameters(!input.decodeFormParameters); }}>
+          ${input.decodeFormParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded)}
         </devtools-button>
         <ul role=group>
           ${ifExpanded(input.viewFormParamSource ? createSourceText(input.formData ?? '')
-                                                 : createParsedParams(input.formParameters ?? []))}
+                                                 : createParsedParams(input.formParameters ?? [], input.decodeFormParameters))}
         </ul>
       </li>
       <li
           role=treeitem
           ?hidden=${!input.formData || Boolean(input.formParameters) || Boolean(input.binaryPayloadContentData)}
           jslog=${VisualLogging.section().context('request-payload')}
-          @contextmenu=${onContextMenu(input.viewJSONPayloadSource, input.setViewJSONPayloadSource,
-                                       /* includeURLDecodingOption*/ false)}
+          @contextmenu=${onContextMenu(
+              input.viewJSONPayloadSource,
+              input.setViewJSONPayloadSource,
+          )}
           @expanded=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) =>
             requestPayloadExpandedSetting.set(e.detail.expanded)}
           ?open=${requestPayloadExpandedSetting.get()}
@@ -322,7 +354,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
 export class RequestPayloadView extends UI.Widget.VBox {
   #request?: SDK.NetworkRequest.NetworkRequest;
-  #decodeRequestParameters = true;
+  #decodeQueryParameters = true;
+  #decodeFormParameters = true;
   #formData?: string;
   #formParameters?: SDK.NetworkRequest.NameValue[];
   #binaryPayloadContentData: TextUtils.ContentData.ContentData|null = null;
@@ -343,9 +376,11 @@ export class RequestPayloadView extends UI.Widget.VBox {
     }
     this.#request = request;
 
+    this.#decodeQueryParameters = true;
+    this.#decodeFormParameters = true;
     const contentType = request.requestContentType();
     if (contentType) {
-      this.#decodeRequestParameters = Boolean(contentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i));
+      this.#decodeFormParameters = Boolean(contentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i));
     }
 
     if (this.isShowing()) {
@@ -400,9 +435,14 @@ export class RequestPayloadView extends UI.Widget.VBox {
       queryParameters: this.request.queryParameters,
       formData: this.#formData,
       formParameters: this.#formParameters,
-      decodeRequestParameters: this.#decodeRequestParameters,
-      setURLDecoding: (value: boolean): void => {
-        this.#decodeRequestParameters = value;
+      decodeQueryParameters: this.#decodeQueryParameters,
+      setDecodeQueryParameters: (value: boolean): void => {
+        this.#decodeQueryParameters = value;
+        this.requestUpdate();
+      },
+      decodeFormParameters: this.#decodeFormParameters,
+      setDecodeFormParameters: (value: boolean): void => {
+        this.#decodeFormParameters = value;
         this.requestUpdate();
       },
       viewQueryParamSource: this.#viewQueryParamSource,