chrome-devtools-frontend 1.0.1660788 → 1.0.1661063

package/front_end/panels/emulation/DeviceModeView.ts

@@ -11,12 +11,15 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {DeviceModeToolbar} from './DeviceModeToolbar.js';
 import deviceModeViewStyles from './deviceModeView.css.js';
 import {MediaQueryInspector} from './MediaQueryInspector.js';
 
+const {classMap, styleMap} = Directives;
+
 const UIStrings = {
   /**
    * @description Bottom resizer element title in Device Mode View of the Device Toolbar
@@ -58,14 +61,12 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class DeviceModeView extends UI.Widget.VBox {
   wrapperInstance!: UI.Widget.VBox|null;
-  blockElementToWidth: WeakMap<HTMLElement, number>;
   private model: EmulationModel.DeviceModeModel.DeviceModeModel;
   private readonly mediaInspector: MediaQueryInspector;
   private showMediaInspectorSetting: Common.Settings.Setting<boolean>;
   private showRulersSetting: Common.Settings.Setting<boolean>;
   private readonly topRuler: Ruler;
   private readonly leftRuler: Ruler;
-  private presetBlocks!: HTMLElement[];
   private responsivePresetsContainer!: HTMLElement;
   private screenArea!: HTMLElement;
   private pageArea!: HTMLElement;
@@ -98,8 +99,6 @@ export class DeviceModeView extends UI.Widget.VBox {
   constructor() {
     super({useShadowDom: true});
 
-    this.blockElementToWidth = new WeakMap();
-
     this.setMinimumSize(150, 150);
     this.element.classList.add('device-mode-view');
     this.registerRequiredCSS(deviceModeViewStyles);
@@ -128,7 +127,7 @@ export class DeviceModeView extends UI.Widget.VBox {
     this.contentClip = this.contentElement.createChild('div', 'device-mode-content-clip vbox');
     this.responsivePresetsContainer = this.contentClip.createChild('div', 'device-mode-presets-container');
     this.responsivePresetsContainer.setAttribute('jslog', `${VisualLogging.responsivePresets()}`);
-    this.populatePresetsContainer();
+    this.renderPresets();
     this.mediaInspectorContainer = this.contentClip.createChild('div', 'device-mode-media-container');
     this.contentArea = this.contentClip.createChild('div', 'device-mode-content-area');
     this.outlineImage = this.contentArea.createChild('img', 'device-mode-outline-image hidden fill');
@@ -161,7 +160,8 @@ export class DeviceModeView extends UI.Widget.VBox {
     this.pageArea.createChild('slot');
   }
 
-  private populatePresetsContainer(): void {
+  private renderPresets(): void {
+    const scale = this.model.scale();
     const sizes = [320, 375, 425, 768, 1024, 1440, 2560];
     const titles = [
       i18nString(UIStrings.mobileS),
@@ -172,24 +172,29 @@ export class DeviceModeView extends UI.Widget.VBox {
       i18nString(UIStrings.laptopL),
       '4K',
     ];
-    this.presetBlocks = [];
-    const inner = this.responsivePresetsContainer.createChild('div', 'device-mode-presets-container-inner');
-    for (let i = sizes.length - 1; i >= 0; --i) {
-      const outer = inner.createChild('div', 'fill device-mode-preset-bar-outer');
-      const block = outer.createChild('div', 'device-mode-preset-bar');
-      block.createChild('span').textContent = titles[i] + ' \u2013 ' + sizes[i] + 'px';
-      block.setAttribute(
-          'jslog', `${VisualLogging.action().track({click: true}).context(`device-mode-preset-${sizes[i]}px`)}`);
-      block.addEventListener('click', applySize.bind(this, sizes[i]), false);
-      this.blockElementToWidth.set(block, sizes[i]);
-      this.presetBlocks.push(block);
-    }
-
-    function applySize(this: DeviceModeView, width: number, e: Event): void {
+
+    const applySize = (width: number, e: Event): void => {
       this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive, null, null);
       this.model.setWidthAndScaleToFit(width);
       e.consume();
-    }
+    };
+
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`
+      <div class="device-mode-presets-container-inner">
+        ${sizes.map((size, idx) => html`
+          <div class="fill device-mode-preset-bar-outer">
+            <div class="device-mode-preset-bar"
+                 style="width: ${size * scale}px;"
+                 jslog=${VisualLogging.action().track({click: true}).context(`device-mode-preset-${size}px`)}
+                 @click=${(e: Event) => applySize(size, e)}>
+              <span>${titles[idx]} – ${size}px</span>
+            </div>
+          </div>
+        `).reverse()}
+      </div>
+    `,
+           this.responsivePresetsContainer);
   }
 
   private createResizer(element: HTMLElement, widthFactor: number, heightFactor: number):
@@ -348,13 +353,7 @@ export class DeviceModeView extends UI.Widget.VBox {
     if (this.model.scale() !== this.cachedScale) {
       updateRulers = true;
       callDoResize = true;
-      for (const block of this.presetBlocks) {
-        const blockWidth = this.blockElementToWidth.get(block);
-        if (!blockWidth) {
-          throw new Error('Could not get width for block.');
-        }
-        block.style.width = blockWidth * this.model.scale() + 'px';
-      }
+      this.renderPresets();
       this.cachedScale = this.model.scale();
     }
 
@@ -571,11 +570,8 @@ export class Ruler extends UI.Widget.VBox {
   #contentElement: HTMLElement;
   private readonly horizontal: boolean;
   private scale: number;
-  private count: number;
   private readonly throttler: Common.Throttler.Throttler;
   private readonly applyCallback: (arg0: number) => void;
-  private renderedScale!: number|undefined;
-  private renderedZoomFactor!: number|undefined;
   constructor(horizontal: boolean, applyCallback: (arg0: number) => void) {
     super({jslog: `${VisualLogging.deviceModeRuler().track({click: true})}`});
     this.element.classList.add('device-mode-ruler');
@@ -583,7 +579,6 @@ export class Ruler extends UI.Widget.VBox {
         this.element.createChild('div', 'device-mode-ruler-content').createChild('div', 'device-mode-ruler-inner');
     this.horizontal = horizontal;
     this.scale = 1;
-    this.count = 0;
     this.throttler = new Common.Throttler.Throttler(0);
     this.applyCallback = applyCallback;
   }
@@ -601,13 +596,6 @@ export class Ruler extends UI.Widget.VBox {
     const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
     const size = this.horizontal ? this.#contentElement.offsetWidth : this.#contentElement.offsetHeight;
 
-    if (this.scale !== this.renderedScale || zoomFactor !== this.renderedZoomFactor) {
-      this.#contentElement.removeChildren();
-      this.count = 0;
-      this.renderedScale = this.scale;
-      this.renderedZoomFactor = zoomFactor;
-    }
-
     const dipSize = size * zoomFactor / this.scale;
     const count = Math.ceil(dipSize / 5);
     let step = 1;
@@ -627,40 +615,34 @@ export class Ruler extends UI.Widget.VBox {
       step = 32;
     }
 
-    for (let i = count; i < this.count; i++) {
-      if (!(i % step)) {
-        const lastChild = this.#contentElement.lastChild;
-        if (lastChild) {
-          lastChild.remove();
-        }
-      }
-    }
-
-    for (let i = this.count; i < count; i++) {
+    const markers = [];
+    for (let i = 0; i < count; i++) {
       if (i % step) {
         continue;
       }
-      const marker = this.#contentElement.createChild('div', 'device-mode-ruler-marker');
-      if (i) {
-        if (this.horizontal) {
-          marker.style.left = (5 * i) * this.scale / zoomFactor + 'px';
-        } else {
-          marker.style.top = (5 * i) * this.scale / zoomFactor + 'px';
-        }
-        if (!(i % 20)) {
-          const text = marker.createChild('div', 'device-mode-ruler-text');
-          text.textContent = String(i * 5);
-          text.addEventListener('click', this.onMarkerClick.bind(this, i * 5), false);
-        }
-      }
-      if (!(i % 10)) {
-        marker.classList.add('device-mode-ruler-marker-large');
-      } else if (!(i % 5)) {
-        marker.classList.add('device-mode-ruler-marker-medium');
-      }
-    }
-
-    this.count = count;
+      const isLarge = !(i % 10);
+      const isMedium = !(i % 5);
+      const offset = i ? `${(5 * i) * this.scale / zoomFactor}px` : undefined;
+
+      // clang-format off
+      markers.push(html`
+        <div
+          class=${classMap({
+            'device-mode-ruler-marker': true,
+            'device-mode-ruler-marker-large': isLarge,
+            'device-mode-ruler-marker-medium': isMedium && !isLarge,
+          })}
+          style=${styleMap(this.horizontal ? {left: offset} : {top: offset})}>
+            ${i && !(i % 20) ?
+              html`<div class="device-mode-ruler-text" @click=${() => this.onMarkerClick(i * 5)}>${i * 5}</div>` :
+              nothing}
+        </div>
+      `);
+      // clang-format on
+    }
+
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`${markers}`, this.#contentElement);
   }
 
   private onMarkerClick(size: number): void {

package/front_end/panels/issues/IssueView.ts

@@ -33,7 +33,6 @@ import {AffectedSelectivePermissionsInterventionView} from './AffectedSelectiveP
 import {AffectedSharedArrayBufferIssueDetailsView} from './AffectedSharedArrayBufferIssueDetailsView.js';
 import {AffectedSourcesView} from './AffectedSourcesView.js';
 import {AffectedTrackingSitesView} from './AffectedTrackingSitesView.js';
-import {AttributionReportingIssueDetailsView} from './AttributionReportingIssueDetailsView.js';
 import * as Components from './components/components.js';
 import type {HiddenIssuesMenuData} from './components/HideIssuesMenu.js';
 import {CorsIssueDetailsView} from './CorsIssueDetailsView.js';
@@ -254,7 +253,6 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new CorsIssueDetailsView(this, this.#issue, 'cors-details'),
       new GenericIssueDetailsView(this, this.#issue, 'generic-details'),
       new AffectedDocumentsInQuirksModeView(this, this.#issue, 'affected-documents'),
-      new AttributionReportingIssueDetailsView(this, this.#issue, 'attribution-reporting-details'),
       new AffectedRawCookieLinesView(this, this.#issue, 'affected-raw-cookies'),
       new AffectedTrackingSitesView(this, this.#issue, 'tracking-sites-details'),
       new AffectedMetadataAllowedSitesView(this, this.#issue, 'metadata-allowed-sites-details'),

package/front_end/panels/issues/IssuesPane.ts

@@ -91,11 +91,6 @@ const UIStrings = {
    * @description Text that explains the issues panel that is shown if no issues are shown.
    */
   issuesPanelDescription: 'On this page you can find warnings from the browser.',
-  /**
-   * @description Category title for the different 'Attribution Reporting API' issues. The
-   * Attribution Reporting API is a newly proposed web API (see https://github.com/WICG/conversion-measurement-api).
-   */
-  attributionReporting: 'Attribution Reporting `API`',
   /**
    * @description Category title for the different 'Quirks Mode' issues. Quirks Mode refers
    *              to the legacy browser modes that displays web content according to outdated
@@ -149,8 +144,6 @@ class IssueCategoryView extends UI.TreeOutline.TreeElement {
         return i18nString(UIStrings.lowTextContrast);
       case IssuesManager.Issue.IssueCategory.CORS:
         return i18nString(UIStrings.cors);
-      case IssuesManager.Issue.IssueCategory.ATTRIBUTION_REPORTING:
-        return i18nString(UIStrings.attributionReporting);
       case IssuesManager.Issue.IssueCategory.QUIRKS_MODE:
         return i18nString(UIStrings.quirksMode);
       case IssuesManager.Issue.IssueCategory.GENERIC:
@@ -271,7 +264,7 @@ export class IssuesPane extends UI.Widget.VBox {
     });
     groupByKindSettingCheckbox.setVisible(true);
 
-    const thirdPartySetting = IssuesManager.Issue.getShowThirdPartyIssuesSetting();
+    const thirdPartySetting = IssuesManager.Issue.getShowThirdPartyIssuesSetting(Common.Settings.Settings.instance());
     this.#showThirdPartyCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
         thirdPartySetting, i18nString(UIStrings.includeCookieIssuesCausedBy),
         i18nString(UIStrings.includeThirdpartyCookieIssues));

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

@@ -71,8 +71,9 @@ UI.ViewManager.registerViewExtension({
   isPreviewFeature: true,
   async loadView(universe) {
     const Timeline = await loadTimelineModule();
-    const {pageResourceLoader: resourceLoader} = universe;
-    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, resourceLoader});
+    const {pageResourceLoader: resourceLoader, targetManager, isolateManager} = universe;
+    return Timeline.TimelinePanel.TimelinePanel.instance(
+        {forceNew: true, resourceLoader, targetManager, isolateManager});
   },
 });
 

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -14,11 +14,11 @@ import {Events as LmiEvents, LinearMemoryInspectorPane} from './LinearMemoryInsp
 
 const UIStrings = {
   /**
-   * @description Error message that shows up in the console if a buffer to be opened in the linear memory inspector cannot be found.
+   * @description Error message that shows up in the console if a buffer to be opened in the Memory inspector panel cannot be found.
    */
-  couldNotOpenLinearMemory: 'Could not open linear memory inspector: failed locating buffer.',
+  couldNotOpenLinearMemory: 'Could not open Memory inspector: buffer not found.',
   /**
-   * @description A context menu item in the Scope View of the Sources Panel
+   * @description A context menu item in the Scope view of the Sources panel.
    */
   openInMemoryInspectorPanel: 'Open in Memory inspector panel',
 } as const;

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -15,17 +15,17 @@ import {type LazyUint8Array, LinearMemoryInspectorController} from './LinearMemo
 
 const UIStrings = {
   /**
-   * @description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
-   *             Inspection hereby refers to viewing, navigating and understanding the memory through this tool.
+   * @description Label in the Memory inspector panel that serves as a placeholder if no inspections are open (i.e., nothing to see here).
+   *             Inspection here refers to viewing, navigating, and understanding the memory through this panel.
    */
   noOpenInspections: 'No open inspections',
   /**
-   * @description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
-   *             Inspection hereby refers to viewing, navigating and understanding the memory through this tool.
+   * @description Label in the Memory inspector panel that serves as a placeholder if no inspections are open (i.e., nothing to see here).
+   *             Inspection here refers to viewing, navigating, and understanding the memory through this panel.
    */
   memoryInspectorExplanation: 'On this page you can inspect binary data.',
   /**
-   * @description Label in the Linear Memory inspector tool for a link.
+   * @description Label in the Memory inspector panel for a link.
    */
   learnMore: 'Learn more',
 } as const;

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

@@ -14,13 +14,13 @@ import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over an inspected variable's button in the Linear Memory Highlight Chip List.
-   * Clicking the button changes the displayed slice of computer memory in the Linear Memory inspector to contain the inspected variable's bytes.
+   * @description Tooltip text that appears when hovering over an inspected variable's button in the highlight chip list in the Memory inspector panel.
+   * Clicking the button changes the displayed slice of computer memory in the Memory inspector panel to contain the inspected variable's bytes.
    */
   jumpToAddress: 'Jump to this memory',
   /**
-   * @description Tooltip text that appears when hovering over an inspected variable's delete button in the Linear Memory Highlight Chip List.
-   * Clicking the delete button stops highlighting the variable's memory in the Linear Memory inspector.
+   * @description Tooltip text that appears when hovering over an inspected variable's delete button in the highlight chip list in the Memory inspector panel.
+   * Clicking the delete button stops highlighting the variable's memory in the Memory inspector panel.
    * 'Memory' is a slice of bytes in the computer memory.
    */
   deleteHighlight: 'Stop highlighting this memory',

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

@@ -32,11 +32,11 @@ import {
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over an invalid address in the address line in the Linear memory inspector
+   * @description Tooltip text that appears when hovering over an invalid address in the address line in the Memory inspector panel.
    * @example {0x00000000} PH1
    * @example {0x00400000} PH2
    */
-  addressHasToBeANumberBetweenSAnd: 'Address has to be a number between {PH1} and {PH2}',
+  addressHasToBeANumberBetweenSAnd: 'Address must be a number between {PH1} and {PH2}',
 } as const;
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/LinearMemoryInspector.ts', UIStrings);

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

@@ -173,23 +173,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 =