chrome-devtools-frontend 1.0.1703574 → 1.0.1704172

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -14,76 +14,75 @@ import openedWindowDetailsViewStyles from './openedWindowDetailsView.css.js';
 
 const UIStrings = {
   /**
-   * @description Text in Timeline indicating that input has happened recently
+   * @description Text indicating that the opened window has access to its opener.
    */
   yes: 'Yes',
   /**
-   * @description Text in Timeline indicating that input has not happened recently
+   * @description Text indicating that the opened window does not have access to its opener.
    */
   no: 'No',
   /**
-   * @description Title for a link to the Elements panel
+   * @description Tooltip for the button to reveal the opener frame DOM node in the Elements panel.
    */
   clickToOpenInElementsPanel: 'Click to open in Elements panel',
   /**
-   * @description Name of a network resource type
+   * @description Section header for document details in the opened window details view and worker details view.
    */
   document: 'Document',
   /**
-   * @description Text for web URLs
+   * @description Field label for the URL in the opened window details view and worker details view.
    */
   url: 'URL',
   /**
-   * @description Title of the 'Security' tool
+   * @description Section header for security information in the opened window details view.
    */
   security: 'Security',
   /**
-   * @description Label for link to Opener Frame in Detail View for Opened Window
+   * @description Field label for the link to the opener frame in the opened window details view.
    */
-  openerFrame: 'Opener Frame',
+  openerFrame: 'Opener frame',
   /**
-   * @description Label in opened window's details view whether window has access to its opener
+   * @description Field label indicating whether the opened window has access to its opener in the opened window details view.
    */
   accessToOpener: 'Access to opener',
   /**
-   * @description Description for the 'Access to Opener' field
+   * @description Tooltip explaining whether the opened window has access to its opener in the opened window details view.
    */
   showsWhetherTheOpenedWindowIs: 'Shows whether the opened window is able to access its opener and vice versa',
   /**
-   * @description Text in Frames View of the Application panel
+   * @description Fallback title for an opened window without a title in the opened window details view.
    */
   windowWithoutTitle: 'Window without title',
   /**
-   * @description Label suffix in the Application Panel Frames section for windows which are already closed
+   * @description Suffix for the title of an opened window that has been closed in the opened window details view.
    */
   closed: 'closed',
   /**
-   * @description Default name for worker
+   * @description Fallback title for a worker in the worker details view.
    */
   worker: 'worker',
   /**
-   * @description Text that refers to some types
+   * @description Field label for the worker type in the worker details view.
    */
   type: 'Type',
   /**
-   * @description Section header in the Frame Details view
+   * @description Section header for security and isolation in the worker details view.
    */
-  securityIsolation: 'Security & Isolation',
+  securityIsolation: 'Security & isolation',
   /**
-   * @description Row title in the Frame Details view
+   * @description Field label for the Cross-Origin Embedder Policy in the worker details view.
    */
   crossoriginEmbedderPolicy: 'Cross-Origin Embedder Policy',
   /**
-   * @description Label for worker type: web worker
+   * @description Value for dedicated Web Worker type in the worker details view.
    */
   webWorker: 'Web Worker',
   /**
-   * @description Text for an unspecified service worker response source
+   * @description Value for an unknown worker type in the worker details view.
    */
   unknown: 'Unknown',
   /**
-   * @description This label specifies the server endpoints to which the server is reporting errors
-   *and warnings through the Report-to API. Following this label will be the URL of the server.
+   * @description Prefix for the reporting endpoint in the security & isolation section of the worker details view.
    */
   reportingTo: 'reporting to',
 } as const;

package/front_end/panels/application/PreloadingTreeElement.ts

@@ -14,15 +14,15 @@ import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Label for the speculative loads tree item in the sidebar of the Application panel.
    */
   speculativeLoads: 'Speculative loads',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Label for the rules child tree item under speculative loads in the sidebar of the Application panel.
    */
   rules: 'Rules',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Label for the speculations child tree item under speculative loads in the sidebar of the Application panel.
    */
   speculations: 'Speculations',
 } as const;

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/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/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/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 => {