chrome-devtools-frontend 1.0.1702515 → 1.0.1704172

package/front_end/panels/common/CommentsOverlayWidget.ts

@@ -55,59 +55,67 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
         <div
           class="comment-hover-highlight"
           style=${styleMap({
-            top: `${input.hoverHighlight.top}px`,
-            left: `${input.hoverHighlight.left}px`,
+            transform: `translate3d(${input.hoverHighlight.left}px, ${input.hoverHighlight.top}px, 0)`,
             width: `${input.hoverHighlight.width}px`,
             height: `${input.hoverHighlight.height}px`,
           })}>
         </div>
       ` : nothing}
-      ${input.highlights.map(h => h.visible ? html`
-        <div
-          class="comment-anchor-highlight"
-          style=${styleMap({
-            top: `${h.top}px`,
-            left: `${h.left}px`,
-            width: `${h.width}px`,
-            height: `${h.height}px`,
-          })}>
-        </div>
-      ` : nothing)}
-      ${input.pins.map(p => p.visible ? html`
-        <div
-          class="comment-pin"
-          style=${styleMap({
-            top: `${p.top}px`,
-            left: `${p.left}px`,
-          })}
-          @click=${() => input.onPinClick(p.id)}>
-          <div class="comment-cursor">${p.index}</div>
-        </div>
-      ` : nothing)}
-      ${input.activePin && input.activeThread ? repeat(
-        [{pin: input.activePin, thread: input.activeThread}],
-        item => item.thread.id,
-        item => html`
+      ${repeat(
+        input.highlights.filter(h => h.visible),
+        h => h.id,
+        h => html`
           <div
-            class="comment-popup-widget"
+            class="comment-anchor-highlight"
             style=${styleMap({
-              top: `${Math.min(
-                Math.max(POPUP_MARGIN, item.pin.top + PIN_HEIGHT),
-                Math.max(POPUP_MARGIN, target.clientHeight - POPUP_HEIGHT),
-              )}px`,
-              left: `${Math.min(
-                Math.max(POPUP_MARGIN, item.pin.left),
-                Math.max(POPUP_MARGIN, target.clientWidth - POPUP_WIDTH - POPUP_MARGIN),
-              )}px`,
+              transform: `translate3d(${h.left}px, ${h.top}px, 0)`,
+              width: `${h.width}px`,
+              height: `${h.height}px`,
             })}>
-            ${UI.Widget.widget(CommentThreadWidget, {
-              title: input.title,
-              comments: [...item.thread.comments],
-              onAddComment: input.onAddComment,
-              onClose: input.onCloseCommentThread,
+          </div>
+        `,
+      )}
+      ${repeat(
+        input.pins.filter(p => p.visible),
+        p => p.id,
+        p => html`
+          <div
+            class="comment-pin"
+            style=${styleMap({
+              transform: `translate3d(${p.left}px, ${p.top}px, 0)`,
             })}
+            @click=${() => input.onPinClick(p.id)}>
+            <div class="comment-cursor">${p.index}</div>
           </div>
         `,
+      )}
+      ${input.activePin && input.activeThread ? repeat(
+        [{pin: input.activePin, thread: input.activeThread}],
+        item => item.thread.id,
+        item => {
+          const popupTop = Math.min(
+            Math.max(POPUP_MARGIN, item.pin.top + PIN_HEIGHT),
+            Math.max(POPUP_MARGIN, target.clientHeight - POPUP_HEIGHT),
+          );
+          const popupLeft = Math.min(
+            Math.max(POPUP_MARGIN, item.pin.left),
+            Math.max(POPUP_MARGIN, target.clientWidth - POPUP_WIDTH - POPUP_MARGIN),
+          );
+          return html`
+            <div
+              class="comment-popup-widget"
+              style=${styleMap({
+                transform: `translate3d(${popupLeft}px, ${popupTop}px, 0)`,
+              })}>
+              ${UI.Widget.widget(CommentThreadWidget, {
+                title: input.title,
+                comments: [...item.thread.comments],
+                onAddComment: input.onAddComment,
+                onClose: input.onCloseCommentThread,
+              })}
+            </div>
+          `;
+        },
       ) : nothing}
     </div>
   `, target);
@@ -160,12 +168,12 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     this.#commentOverlayManager.start();
     this.#commentOverlayManager.addEventListener(
         Comments.CommentOverlayManager.Events.POSITIONS_UPDATED,
-        this.#onStateChanged,
+        this.#onPositionsUpdated,
         this,
     );
     this.#commentOverlayManager.addEventListener(
         Comments.CommentOverlayManager.Events.HOVER_HIGHLIGHT_CHANGED,
-        this.#onStateChanged,
+        this.#onHoverHighlightChanged,
         this,
     );
 
@@ -197,12 +205,12 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     this.#commentOverlayManager.stop();
     this.#commentOverlayManager.removeEventListener(
         Comments.CommentOverlayManager.Events.POSITIONS_UPDATED,
-        this.#onStateChanged,
+        this.#onPositionsUpdated,
         this,
     );
     this.#commentOverlayManager.removeEventListener(
         Comments.CommentOverlayManager.Events.HOVER_HIGHLIGHT_CHANGED,
-        this.#onStateChanged,
+        this.#onHoverHighlightChanged,
         this,
     );
 
@@ -257,16 +265,60 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  #onStateChanged(): void {
+  #syncActiveThreadFromManager(): void {
     const draftThread = this.#commentManager.getCommentThreads().find(t => t.status === 'DRAFT');
     if (draftThread) {
       this.#setActiveThreadId(draftThread.id);
     } else if (this.#activeThreadId && !this.#commentManager.getCommentThread(this.#activeThreadId)) {
       this.#setActiveThreadId(null);
     }
+  }
+
+  #onPositionsUpdated(
+      event: Common.EventTarget.EventTargetEvent<
+          Comments.CommentOverlayManager.EventTypes[Comments.CommentOverlayManager.Events.POSITIONS_UPDATED]>,
+      ): void {
+    this.#syncActiveThreadFromManager();
+    if (event.data.isRealtimeSync && this.isShowing() && this.#trySynchronousRender()) {
+      return;
+    }
+    this.requestUpdate();
+  }
+
+  #onHoverHighlightChanged(): void {
+    this.#syncActiveThreadFromManager();
+    if (this.isShowing() && this.#trySynchronousRender()) {
+      return;
+    }
+    this.requestUpdate();
+  }
+
+  #onStateChanged(): void {
+    this.#syncActiveThreadFromManager();
     this.requestUpdate();
   }
 
+  #trySynchronousRender(): boolean {
+    if (!this.#commentManager.isAgentAttached()) {
+      this.#renderDisconnectedView();
+      return true;
+    }
+    const activeThread =
+        this.#activeThreadId ? this.#commentManager.getCommentThread(this.#activeThreadId) ?? null : null;
+    const anchor = activeThread?.anchor ?? null;
+    if (anchor === null) {
+      this.#cachedTitleAnchor = null;
+      this.#cachedTitle = {text: ''};
+      this.#renderWithTitle(activeThread, this.#cachedTitle);
+      return true;
+    }
+    if (anchor === this.#cachedTitleAnchor) {
+      this.#renderWithTitle(activeThread, this.#cachedTitle);
+      return true;
+    }
+    return false;
+  }
+
   async #getOrComputeTitle(anchor: CommentManager.CommentManager.CommentAnchorSignature|null): Promise<Title> {
     if (anchor === this.#cachedTitleAnchor) {
       return this.#cachedTitle;
@@ -333,32 +385,29 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     }
   };
 
-  override async performUpdate(signal?: AbortSignal): Promise<void> {
-    if (!this.#commentManager.isAgentAttached()) {
-      this.#view(
-          {
-            pins: [],
-            highlights: [],
-            hoverHighlight: null,
-            commentMode: false,
-            onPinClick: this.#handlePinClick,
-            activeThread: null,
-            activePin: null,
-            title: {text: ''},
-            onAddComment: () => {},
-            onCloseCommentThread: this.#handleCloseCommentThread,
-          },
-          undefined,
-          this.contentElement,
-      );
-      return;
-    }
-
-    const activeThread =
-        this.#activeThreadId ? this.#commentManager.getCommentThread(this.#activeThreadId) ?? null : null;
-    const title = await this.#getOrComputeTitle(activeThread?.anchor ?? null);
-    signal?.throwIfAborted();
+  #renderDisconnectedView(): void {
+    this.#view(
+        {
+          pins: [],
+          highlights: [],
+          hoverHighlight: null,
+          commentMode: false,
+          onPinClick: this.#handlePinClick,
+          activeThread: null,
+          activePin: null,
+          title: {text: ''},
+          onAddComment: () => {},
+          onCloseCommentThread: this.#handleCloseCommentThread,
+        },
+        undefined,
+        this.contentElement,
+    );
+  }
 
+  #renderWithTitle(
+      activeThread: CommentManager.CommentManager.CommentThread|null,
+      title: Title,
+      ): void {
     const pins = this.#commentOverlayManager.getPinPositions();
     const highlights = this.#commentOverlayManager.getHighlightRects();
     const activePin = this.#activeThreadId ? pins.find(p => p.id === this.#activeThreadId) ?? null : null;
@@ -391,6 +440,30 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     };
     this.#view(viewInput, undefined, this.contentElement);
   }
+
+  override async performUpdate(signal?: AbortSignal): Promise<void> {
+    if (!this.#commentManager.isAgentAttached()) {
+      this.#renderDisconnectedView();
+      return;
+    }
+
+    const activeThread =
+        this.#activeThreadId ? this.#commentManager.getCommentThread(this.#activeThreadId) ?? null : null;
+    const anchor = activeThread?.anchor ?? null;
+    let title: Title;
+    if (anchor === null) {
+      this.#cachedTitleAnchor = null;
+      this.#cachedTitle = {text: ''};
+      title = this.#cachedTitle;
+    } else if (anchor === this.#cachedTitleAnchor) {
+      title = this.#cachedTitle;
+    } else {
+      title = await this.#getOrComputeTitle(anchor);
+      signal?.throwIfAborted();
+    }
+
+    this.#renderWithTitle(activeThread, title);
+  }
 }
 
 let widgetInstance: CommentsOverlayWidget|null = null;

package/front_end/panels/common/CommentsStatusBarPill.ts

@@ -4,16 +4,24 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as CommentManager from '../../models/comment_manager/comment_manager.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import commentsStatusBarPillStyles from './commentsStatusBarPill.css.js';
+
 const UIStrings = {
   /**
    * @description Button text for the comments status bar pill showing the number of open comments.
    * @example {2} PH1
    */
   commentsCount: 'Comments ({PH1})',
+  /**
+   * @description Button text for sending all draft comments to the agent in the comments status bar pill.
+   * @example {2} PH1
+   */
+  sendToAgentCount: 'Send to agent ({PH1})',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/common/CommentsStatusBarPill.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -23,22 +31,38 @@ const {html, render} = Lit;
 export interface ViewInput {
   threads: CommentManager.CommentManager.CommentThread[];
   onPillClick: () => void;
+  onSendToAgentClick?: () => void;
   disabled?: boolean;
 }
 
 export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  const unsentCount = input.threads.filter(thread => thread.status === 'ACTIVE').length;
+  const tooltip = input.threads.flatMap(thread => thread.comments.map(comment => comment.text)).join('\n');
   // clang-format off
   render(html`
+    <style>${commentsStatusBarPillStyles}</style>
     ${input.threads.length <= 0 ? Lit.nothing : html`
-      <button
-        class="devtools-pill"
-        ?disabled=${input.disabled}
-        @click=${input.onPillClick}
-        jslog=${VisualLogging.action('comments-status-bar-pill').track({click: true})}>
-        ${i18nString(UIStrings.commentsCount, {PH1: input.threads.length})}
-      </button>
+      <div class="pill-container">
+        <button
+          class="devtools-pill"
+          title=${tooltip}
+          ?disabled=${input.disabled}
+          @click=${input.onPillClick}
+          jslog=${VisualLogging.action('comments-status-bar-pill').track({click: true})}>
+          ${i18nString(UIStrings.commentsCount, {PH1: input.threads.length})}
+        </button>
+        ${unsentCount > 0 ? html`
+          <devtools-button
+            .variant=${Buttons.Button.Variant.PRIMARY}
+            .disabled=${Boolean(input.disabled)}
+            .jslogContext=${'comments-send-to-agent'}
+            @click=${input.onSendToAgentClick}>
+            ${i18nString(UIStrings.sendToAgentCount, {PH1: unsentCount})}
+          </devtools-button>
+        ` : Lit.nothing}
+      </div>
     `}
   `, target);
   // clang-format on
@@ -100,9 +124,18 @@ export class CommentsStatusBarPill extends UI.Widget.Widget {
           this.#commentManager.getCommentThreads().filter(thread => thread.status !== 'DRAFT') :
           [],
       onPillClick: this.#handlePillClick,
+      onSendToAgentClick: this.#handleSendToAgentClick,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }
 
   #handlePillClick = (): void => {};
+
+  #handleSendToAgentClick = (): void => {
+    for (const thread of this.#commentManager.getCommentThreads()) {
+      if (thread.status === 'ACTIVE') {
+        thread.sendToAgent();
+      }
+    }
+  };
 }

package/front_end/panels/common/commentsOverlay.css

@@ -20,57 +20,68 @@
 
   .comment-pin {
     position: absolute;
+    top: 0;
+    left: 0;
     pointer-events: auto;
     cursor: pointer;
     user-select: none;
-    transition: transform 0.1s ease;
-    transform-origin: center center;
-      will-change: transform;
+    will-change: transform;
   }
 
-  .comment-pin:hover {
+  .comment-pin:hover .comment-cursor {
     transform: scale(1.15);
   }
 
-    .comment-cursor {
-      display: flex;
-      width: var(--sys-size-9);
-      height: var(--sys-size-9);
-      box-sizing: border-box;
-      padding: 0;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      flex-shrink: 0;
-      box-shadow: var(--sys-elevation-level2);
-      border-radius: 100px 100px 100px var(--sys-shape-corner-extra-small, 4px);
-      background: var(--sys-color-primary);
-      color: var(--sys-color-on-primary);
-      font-family: var(--default-font-family);
-      font-size: var(--sys-typescale-body5-size);
-      font-weight: var(--ref-typeface-weight-bold, 600);
-      line-height: 1;
-    }
+  .comment-cursor {
+    display: flex;
+    width: var(--sys-size-9);
+    height: var(--sys-size-9);
+    box-sizing: border-box;
+    padding: 0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    box-shadow: var(--sys-elevation-level2);
+    border-radius: 100px 100px 100px var(--sys-shape-corner-extra-small, 4px);
+    background: var(--sys-color-primary);
+    color: var(--sys-color-on-primary);
+    font-family: var(--default-font-family);
+    font-size: var(--sys-typescale-body5-size);
+    font-weight: var(--ref-typeface-weight-bold, 600);
+    line-height: 1;
+    transition: transform 0.1s ease;
+    transform-origin: center center;
+  }
 
   .comment-anchor-highlight {
     position: absolute;
+    top: 0;
+    left: 0;
     pointer-events: none;
     border: var(--sys-size-2) dashed var(--sys-color-primary);
     background-color: color-mix(in srgb, var(--sys-color-primary), transparent 90%);
     box-sizing: border-box;
+    will-change: transform;
   }
 
   .comment-hover-highlight {
     position: absolute;
+    top: 0;
+    left: 0;
     pointer-events: none;
     border: var(--sys-size-2) solid var(--sys-color-primary);
     background-color: color-mix(in srgb, var(--sys-color-primary), transparent 85%);
     box-sizing: border-box;
+    will-change: transform;
   }
 
   .comment-popup-widget {
     position: absolute;
+    top: 0;
+    left: 0;
     z-index: 2501;
     pointer-events: auto;
+    will-change: transform;
   }
 }

package/front_end/panels/common/commentsStatusBarPill.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  .pill-container {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-3);
+  }
+}

package/front_end/panels/elements/DOMTreeWidget.ts

@@ -426,6 +426,11 @@ function nodeHasVisibleChildren(node: SDK.DOMModel.DOMNode, rootDOMNode: SDK.DOM
   return Boolean(node.childNodeCount()) && !ElementsTreeWidget.canShowInlineText(node);
 }
 
+function nodeNeedsClosingTag(node: SDK.DOMModel.DOMNode, hasChildren: boolean): boolean {
+  return hasChildren && node.nodeType() === Node.ELEMENT_NODE &&
+      !ForbiddenClosingTagElements.has(node.nodeName().toLowerCase()) && !node.pseudoType();
+}
+
 function getVisibleChildren(node: SDK.DOMModel.DOMNode, showComments = true): SDK.DOMModel.DOMNode[] {
   const children: SDK.DOMModel.DOMNode[] = [];
   children.push(...ElementsTreeWidget.visibleShadowRoots(node));
@@ -778,10 +783,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
       if (node instanceof SDK.DOMModel.DOMDocument) {
         rows += countTopLayerRows(node);
       }
-      const tagName = node.nodeName().toLowerCase();
-      const needsClosingTag = node.nodeType() === Node.ELEMENT_NODE && !ForbiddenClosingTagElements.has(tagName) &&
-          !node.pseudoType() && (hasChildren || !ElementsTreeWidget.canShowInlineText(node));
-      if (needsClosingTag) {
+      if (nodeNeedsClosingTag(node, hasChildren)) {
         rows += 1;
       }
     }
@@ -827,9 +829,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
     const limit = input.expandedChildrenLimit ? input.expandedChildrenLimit(node) : InitialChildrenLimit;
     const children = allVisibleChildren.slice(0, limit);
     const remainingChildrenCount = allVisibleChildren.length - children.length;
-    const tagName = node.nodeName().toLowerCase();
-    const needsClosingTag = node.nodeType() === Node.ELEMENT_NODE && !ForbiddenClosingTagElements.has(tagName) &&
-        !node.pseudoType() && (hasChildren || !ElementsTreeWidget.canShowInlineText(node));
+    const needsClosingTag = nodeNeedsClosingTag(node, hasChildren);
 
     const on = Lit.Directive.directive(Lit.CustomDirectives.InterceptBindingDirective);
 
@@ -1461,6 +1461,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     const domModel = event.data;
     if (this.#view === DECLARATIVE_VIEW) {
       this.#selectedDOMNode = null;
+      this.#selectedClosingTag = false;
       this.#expandedNodes.clear();
       this.#currentHighlightedNode = null;
       this.#updateRecords.clear();
@@ -1679,9 +1680,6 @@ export class DOMTreeWidget extends UI.Widget.Widget {
            !getVisibleChildren(node.parentNode, this.#showComments).includes(node))) {
         node = node.parentNode;
       }
-      const isSameNode = this.#selectedDOMNode === node && this.#selectedClosingTag === Boolean(isClosingTag);
-      this.#selectedDOMNode = node;
-      this.#selectedClosingTag = Boolean(isClosingTag);
       if (node) {
         const ancestors: SDK.DOMModel.DOMNode[] = [];
         for (let current: (SDK.DOMModel.DOMNode|null) = node.parentNode; current; current = current.parentNode) {
@@ -1707,7 +1705,14 @@ export class DOMTreeWidget extends UI.Widget.Widget {
             });
           }
         }
+        if (isClosingTag && nodeHasVisibleChildren(node, this.rootDOMNode, this.maxTreeDepth, this.omitRootDOMNode)) {
+          this.#expandedNodes.add(node);
+        }
       }
+      const selectClosingTag = Boolean(isClosingTag) && Boolean(node && this.#hasClosingTag(node));
+      const isSameNode = this.#selectedDOMNode === node && this.#selectedClosingTag === selectClosingTag;
+      this.#selectedDOMNode = node;
+      this.#selectedClosingTag = selectClosingTag;
       this.#clearHighlightedNode();
       if (!isSameNode) {
         this.onSelectedNodeChanged(
@@ -2014,8 +2019,19 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     return current === this.#rootDOMNode ? selectedNode : (fallback ?? this.#rootDOMNode);
   }
 
+  #hasClosingTag(node: SDK.DOMModel.DOMNode): boolean {
+    const isEditingAsHTML = this.#multilineEditingNode === node ||
+        (this.#nodeToEdit?.node === node && Boolean(this.#nodeToEdit.isEditAsHTML));
+    if (isEditingAsHTML || !this.isNodeExpanded(node)) {
+      return false;
+    }
+    const hasChildren = nodeHasVisibleChildren(node, this.#rootDOMNode, this.#maxTreeDepth, this.omitRootDOMNode);
+    return nodeNeedsClosingTag(node, hasChildren);
+  }
+
   #validateSelectedNode(): void {
     if (!this.#selectedDOMNode) {
+      this.#selectedClosingTag = false;
       return;
     }
     const validNode = this.#findValidSelectedNode(this.#selectedDOMNode);
@@ -2026,6 +2042,8 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       this.onSelectedNodeChanged(
           {data: {node: validNode, focus: false}} as
           Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>);
+    } else if (this.#selectedClosingTag && !this.#hasClosingTag(this.#selectedDOMNode)) {
+      this.#selectedClosingTag = false;
     }
   }
 
@@ -2276,6 +2294,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       if (this.#rootDOMNode?.domModel() === domModel) {
         this.#rootDOMNode = null;
         this.#selectedDOMNode = null;
+        this.#selectedClosingTag = false;
         this.#expandedNodes.clear();
         this.#updateRecords.clear();
       }

package/front_end/panels/issues/IssueView.ts

@@ -435,7 +435,11 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     messageElement.setCollapsible(false);
     messageElement.selectable = false;
     const markdownComponent = new MarkdownView.MarkdownView.MarkdownView();
-    markdownComponent.data = {tokens: this.#description.markdown};
+    markdownComponent.data = {
+      tokens: this.#description.markdown,
+      renderer: new MarkdownView.MarkdownPlaceholderLitRenderer.MarkdownPlaceholderLitRenderer(
+          this.#description.substitutions),
+    };
     messageElement.listItemElement.appendChild(markdownComponent);
     UI.ARIAUtils.setPositionInSet(messageElement.listItemElement, 1);
     UI.ARIAUtils.setSetSize(messageElement.listItemElement, this.#description.links.length === 0 ? 2 : 3);

package/front_end/panels/network/RequestPayloadView.ts

@@ -154,11 +154,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     void contextMenu.show();
   };
 
-  const createSourceText = (text: string): TemplateResult => html`<li role=treeitem
+  const createSourceText = (text: string): TemplateResult => {
+    const copy = (): void => input.copyValue(text);
+    // clang-format off
+    return html`<li role=treeitem
       @contextmenu=${copyValueContextmenu(i18nString(UIStrings.copyPayload), () => text, 'copy-payload')}>
-        <devtools-widget class='payload-value source-code' ${widget(ShowMoreDetailsWidget, {text})}>
+        <devtools-widget class='payload-value source-code' ${widget(ShowMoreDetailsWidget, {text, copy})}>
         </devtools-widget>
       </li>`;
+    // clang-format on
+  };
 
   const createParsedParams = (params: SDK.NetworkRequest.NameValue[],
                               decodeParameters: boolean): TemplateResult[] => params.map(param => {

package/front_end/panels/network/ShowMoreDetailsWidget.ts

@@ -11,6 +11,10 @@ const UIStrings = {
    * @description Text to show more content
    */
   showMore: 'Show more',
+  /**
+   * @description Context menu item to copy the shown text to the clipboard
+   */
+  copy: 'Copy',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/ShowMoreDetailsWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -20,7 +24,7 @@ interface ViewInput {
   text: string;
   showMore: boolean;
   onToggle: () => void;
-  copy: CopyMenuItem|null;
+  copy: (() => void)|null;
 }
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 const MAX_LENGTH = 3000;
@@ -29,7 +33,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   const onContextMenuShowMore = (event: Event): void => {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     if (input.copy) {
-      contextMenu.clipboardSection().appendItem(input.copy.menuItem, input.copy.handler);
+      contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copy), input.copy, {jslogContext: 'copy'});
     }
     if (!input.showMore) {
       contextMenu.newSection().appendItem(i18nString(UIStrings.showMore), input.onToggle, {jslogContext: 'show-more'});
@@ -51,16 +55,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       target);
 };
 
-interface CopyMenuItem {
-  menuItem: UI.ContextMenu.Item;
-  handler: () => void;
-}
-
 export class ShowMoreDetailsWidget extends UI.Widget.Widget {
   readonly #view: View;
   #text = '';
   #showMore = false;
-  #copy: CopyMenuItem|null = null;
+  #copy: (() => void)|null = null;
   constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target);
     this.#view = view;
@@ -75,7 +74,11 @@ export class ShowMoreDetailsWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  set copy(copy: CopyMenuItem) {
+  get copy(): (() => void)|null {
+    return this.#copy;
+  }
+
+  set copy(copy: () => void) {
     this.#copy = copy;
     this.requestUpdate();
   }