chrome-devtools-frontend 1.0.1703574 → 1.0.1704172

package/front_end/ui/comments/CommentAnchorResolver.ts

@@ -662,15 +662,57 @@ function isClippingOverflow(overflow: string): boolean {
   return overflow === 'hidden' || overflow === 'auto' || overflow === 'scroll' || overflow === 'clip';
 }
 
+interface ClippingAncestor {
+  element: Element;
+  clipsX: boolean;
+  clipsY: boolean;
+}
+
+let clippingAncestorsCache = new WeakMap<Element, ClippingAncestor[]>();
+
+/**
+ * Clears the cached clipping ancestor chains for elements.
+ * Called when DOM mutations or comment rematches occur.
+ */
+export function clearClippingAncestorsCache(): void {
+  clippingAncestorsCache = new WeakMap<Element, ClippingAncestor[]>();
+}
+
+function getClippingAncestors(element: Element, doc: Document, win: Window): ClippingAncestor[] {
+  const cached = clippingAncestorsCache.get(element);
+  if (cached && cached.every(item => item.element.isConnected)) {
+    return cached;
+  }
+
+  const ancestors: ClippingAncestor[] = [];
+  let current = element.parentElementOrShadowHost();
+  while (current && current !== doc.documentElement && current !== doc.body) {
+    const style = win.getComputedStyle(current);
+    const clipsX = isClippingOverflow(style.overflowX);
+    const clipsY = isClippingOverflow(style.overflowY);
+    if (clipsX || clipsY) {
+      ancestors.push({element: current, clipsX, clipsY});
+    }
+    current = current.parentElementOrShadowHost();
+  }
+  clippingAncestorsCache.set(element, ancestors);
+  return ancestors;
+}
+
 /**
  * Computes the visible viewport-relative bounding box of an element after clipping against
  * all ancestor scroll/overflow containers and viewport boundaries across shadow DOM roots.
  *
  * @param element The source DOM element.
  * @param targetRect Optional explicit bounding box (e.g. for sub-lines or custom targets).
+ * @param rectCache Optional per-frame cache of element bounding client rects to avoid redundant queries.
  * @returns The clipped viewport-relative rectangle or null if the element is completely clipped out of view or invisible.
  */
-export function computeVisibleRect(element: Element, targetRect?: DOMRect): VisibleRect|null {
+export function computeVisibleRect(
+    element: Element,
+    targetRect?: DOMRect,
+    rectCache?: Map<Element, DOMRect>,
+    ): VisibleRect|null {
   if (!element.isConnected) {
     return null;
   }
@@ -702,29 +744,25 @@ export function computeVisibleRect(element: Element, targetRect?: DOMRect): Visi
     return null;
   }
 
-  let current = element.parentElementOrShadowHost();
-  while (current && current !== doc.documentElement && current !== doc.body) {
-    const style = win.getComputedStyle(current);
-    const clipsX = isClippingOverflow(style.overflowX);
-    const clipsY = isClippingOverflow(style.overflowY);
-
-    if (clipsX || clipsY) {
-      const parentRect = current.getBoundingClientRect();
-      if (clipsX) {
-        visibleLeft = Math.max(visibleLeft, parentRect.left);
-        visibleRight = Math.min(visibleRight, parentRect.right);
-      }
-      if (clipsY) {
-        visibleTop = Math.max(visibleTop, parentRect.top);
-        visibleBottom = Math.min(visibleBottom, parentRect.bottom);
-      }
-
-      if (visibleLeft >= visibleRight || visibleTop >= visibleBottom) {
-        return null;
-      }
+  const clippingAncestors = getClippingAncestors(element, doc, win);
+  for (const {element: ancestor, clipsX, clipsY} of clippingAncestors) {
+    let parentRect = rectCache?.get(ancestor);
+    if (!parentRect) {
+      parentRect = ancestor.getBoundingClientRect();
+      rectCache?.set(ancestor, parentRect);
+    }
+    if (clipsX) {
+      visibleLeft = Math.max(visibleLeft, parentRect.left);
+      visibleRight = Math.min(visibleRight, parentRect.right);
+    }
+    if (clipsY) {
+      visibleTop = Math.max(visibleTop, parentRect.top);
+      visibleBottom = Math.min(visibleBottom, parentRect.bottom);
     }
 
-    current = current.parentElementOrShadowHost();
+    if (visibleLeft >= visibleRight || visibleTop >= visibleBottom) {
+      return null;
+    }
   }
 
   const width = visibleRight - visibleLeft;

package/front_end/ui/comments/CommentOverlayManager.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as CommentManager from '../../models/comment_manager/comment_manager.js';
 
 import {
+  clearClippingAncestorsCache,
   closestAcrossShadow,
   COMMENT_THREAD_UI_SELECTOR,
   type CommentAnchorSignature,
@@ -69,6 +70,7 @@ export interface EventTypes {
   [Events.POSITIONS_UPDATED]: {
     pins: PinPositionData[],
     highlights: HighlightRectData[],
+    isRealtimeSync?: boolean,
   };
   [Events.HOVER_HIGHLIGHT_CHANGED]: HoverHighlightData|null;
 }
@@ -113,11 +115,13 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
   #scrollListener?: (event: Event) => void;
   #scrollTarget?: EventTarget;
   #scrollRafId?: number;
+  #observedScrollRoots = new Set<ShadowRoot>();
 
   #devToolsResizeObserver?: ResizeObserver;
-  #resizeRafId?: number;
+  #resizeObservedElements = new WeakSet<Element>();
 
   #mutationObserver?: MutationObserver;
+  #mutationRafId?: number;
   #rematchTimeoutId?: ReturnType<typeof setTimeout>;
   #cursorElement: HTMLElement|null = null;
   #isCreatingComment = false;
@@ -162,7 +166,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
   #getIntersectionObserver(): IntersectionObserver {
     if (!this.#intersectionObserver) {
       this.#intersectionObserver = new IntersectionObserver(() => {
-        this.#updatePositions();
+        this.#updatePositions(true);
       });
     }
     return this.#intersectionObserver;
@@ -287,6 +291,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
       const observer = this.#getIntersectionObserver();
       observer.observe(anchorElement);
       this.#observedThreads.add(anchorElement);
+      this.#trackElementAncestors(anchorElement);
     }
 
     this.#updatePositions();
@@ -294,6 +299,25 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     return thread;
   }
 
+  #trackElementAncestors(element: Element): void {
+    if (!this.#devToolsResizeObserver || !this.#scrollListener) {
+      return;
+    }
+    let current: Element|null = element;
+    while (current) {
+      if (this.#resizeObservedElements.has(current)) {
+        break;
+      }
+      this.#devToolsResizeObserver.observe(current);
+      this.#resizeObservedElements.add(current);
+      if (current.parentNode instanceof ShadowRoot && !this.#observedScrollRoots.has(current.parentNode)) {
+        current.parentNode.addEventListener('scroll', this.#scrollListener, {capture: true, passive: true});
+        this.#observedScrollRoots.add(current.parentNode);
+      }
+      current = current.parentElementOrShadowHost();
+    }
+  }
+
   #resolveAnchor(element: Element, options?: {clientX: number, clientY: number}):
       {anchor: CommentAnchorSignature, anchorElement: Element}|null {
     let anchorElement: Element|null = null;
@@ -355,6 +379,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
    * during batch rematching, and cleans up unobserved IntersectionObserver nodes in O(N) time.
    */
   #rematchAllComments(root: Document|Element = document): void {
+    clearClippingAncestorsCache();
     const jslogElements = deepQuerySelectorAll(root, '[jslog]');
     const oldElements = new Set<Element>();
     const newElements = new Set<Element>();
@@ -392,13 +417,14 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.#updatePositions();
   }
 
-  #updatePositions(): void {
+  #updatePositions(isRealtimeSync = false): void {
     const scrollX = window.scrollX;
     const scrollY = window.scrollY;
 
     const newPins: PinPositionData[] = [];
     const newHighlights: HighlightRectData[] = [];
     const elementPinCounts = new Map<Element, number>();
+    const rectCache = new Map<Element, DOMRect>();
 
     for (const thread of this.#commentManager.getCommentThreads()) {
       // Non-DOM anchors have their positions managed by their respective panels,
@@ -423,8 +449,9 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
         observer.observe(el);
         this.#observedThreads.add(el);
       }
+      this.#trackElementAncestors(el);
 
-      const visibleRect = computeVisibleRect(el);
+      const visibleRect = computeVisibleRect(el, undefined, rectCache);
       if (!visibleRect) {
         continue;
       }
@@ -458,6 +485,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.dispatchEventToListeners(Events.POSITIONS_UPDATED, {
       pins: newPins,
       highlights: newHighlights,
+      isRealtimeSync,
     });
   }
 
@@ -492,6 +520,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.#installScrollListener(scrollTarget);
     this.#installResizeObserver(resizeTarget);
     this.#installMutationObserver(root);
+    this.#updatePositions();
   }
 
   /**
@@ -499,6 +528,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
    */
   stop(): void {
     document.body.style.cursor = '';
+    clearClippingAncestorsCache();
     this.clearDraftThreads();
     this.#removeClickListener();
     this.#removeScrollListener();
@@ -693,22 +723,36 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
   #installScrollListener(target: EventTarget = window): void {
     this.#removeScrollListener();
     this.#scrollTarget = target;
+    let needsTrailingUpdate = false;
     this.#scrollListener = (): void => {
       this.#clearHover();
-      if (this.#scrollRafId !== undefined) {
-        cancelAnimationFrame(this.#scrollRafId);
+      if (this.#scrollRafId === undefined) {
+        // Leading-edge synchronous update so pins and highlights move immediately in the current frame.
+        this.#updatePositions(true);
+        needsTrailingUpdate = false;
+        this.#scrollRafId = requestAnimationFrame(() => {
+          this.#scrollRafId = undefined;
+          if (needsTrailingUpdate) {
+            needsTrailingUpdate = false;
+            this.#updatePositions(true);
+          }
+        });
+      } else {
+        needsTrailingUpdate = true;
       }
-      this.#scrollRafId = requestAnimationFrame(() => {
-        this.#scrollRafId = undefined;
-        this.#updatePositions();
-      });
     };
     target.addEventListener('scroll', this.#scrollListener, {capture: true, passive: true});
   }
 
   #removeScrollListener(): void {
-    if (this.#scrollTarget && this.#scrollListener) {
-      this.#scrollTarget.removeEventListener('scroll', this.#scrollListener, {capture: true});
+    if (this.#scrollListener) {
+      if (this.#scrollTarget) {
+        this.#scrollTarget.removeEventListener('scroll', this.#scrollListener, {capture: true});
+      }
+      for (const root of this.#observedScrollRoots) {
+        root.removeEventListener('scroll', this.#scrollListener, {capture: true});
+      }
+      this.#observedScrollRoots.clear();
       this.#scrollListener = undefined;
       this.#scrollTarget = undefined;
     }
@@ -729,15 +773,10 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.#removeResizeObserver();
     this.#devToolsResizeObserver = new ResizeObserver(() => {
       this.#clearHover();
-      if (this.#resizeRafId !== undefined) {
-        cancelAnimationFrame(this.#resizeRafId);
-      }
-      this.#resizeRafId = requestAnimationFrame(() => {
-        this.#resizeRafId = undefined;
-        this.#updatePositions();
-      });
+      this.#updatePositions(true);
     });
     this.#devToolsResizeObserver.observe(element);
+    this.#resizeObservedElements.add(element);
   }
 
   #removeResizeObserver(): void {
@@ -745,16 +784,19 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
       this.#devToolsResizeObserver.disconnect();
       this.#devToolsResizeObserver = undefined;
     }
-    if (this.#resizeRafId !== undefined) {
-      cancelAnimationFrame(this.#resizeRafId);
-      this.#resizeRafId = undefined;
-    }
+    this.#resizeObservedElements = new WeakSet();
   }
 
   /**
    * Debounces rematching of comments across dynamic DOM updates.
    */
   #scheduleRematch(root: Document|Element = document): void {
+    if (this.#mutationRafId === undefined) {
+      this.#mutationRafId = requestAnimationFrame(() => {
+        this.#mutationRafId = undefined;
+        this.#updatePositions(true);
+      });
+    }
     if (this.#rematchTimeoutId) {
       clearTimeout(this.#rematchTimeoutId);
     }
@@ -774,8 +816,15 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
    */
   #installMutationObserver(root: Document|Element = document): void {
     this.#removeMutationObserver();
-    this.#mutationObserver = new MutationObserver(() => {
-      this.#scheduleRematch(root);
+    this.#mutationObserver = new MutationObserver(records => {
+      const hasExternalMutation = records.some(record => {
+        const target = record.target;
+        const element = target instanceof Element ? target : target.parentElement;
+        return !(element && element.closest('.comments-overlay-container'));
+      });
+      if (hasExternalMutation) {
+        this.#scheduleRematch(root);
+      }
     });
     const targetNode = root instanceof Document ? (root.body || root.documentElement) : root;
     this.#mutationObserver.observe(targetNode, {
@@ -797,6 +846,10 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
       this.#mutationObserver.disconnect();
       this.#mutationObserver = undefined;
     }
+    if (this.#mutationRafId !== undefined) {
+      cancelAnimationFrame(this.#mutationRafId);
+      this.#mutationRafId = undefined;
+    }
     if (this.#rematchTimeoutId) {
       clearTimeout(this.#rematchTimeoutId);
       this.#rematchTimeoutId = undefined;

package/front_end/ui/legacy/components/data_grid/DataGridExporter.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Platform from '../../../../core/platform/platform.js';
+
 import type {DataGridImpl} from './DataGrid.js';
 
 /**
@@ -72,18 +74,10 @@ function escapeMarkdown(val: string): string {
       .replace(/\r?\n/g, '<br>');
 }
 
+/**
+ * Escapes a string for CSV export (handling both RFC 4180 quoting and
+ * prefixing spreadsheet formula characters like `=`, `+`, `-`, `@` with `'`).
+ */
 function escapeCSV(val: string): string {
-  let needQuotes = false;
-  let escaped = val;
-  if (escaped.includes('"')) {
-    escaped = escaped.replace(/"/g, '""');
-    needQuotes = true;
-  }
-  if (escaped.includes(',') || escaped.includes('\n') || escaped.includes('\r')) {
-    needQuotes = true;
-  }
-  if (needQuotes) {
-    return `"${escaped}"`;
-  }
-  return escaped;
+  return Platform.StringUtilities.escapeCsvCell(val);
 }

package/front_end/ui/legacy/components/inline_editor/PositionAreaEditor.ts

@@ -4,6 +4,7 @@
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Lit from '../../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
 import positionAreaEditorStyles from './positionAreaEditor.css.js';
@@ -19,21 +20,9 @@ const UIStrings = {
    */
   positionAreaGrid: 'position-area grid',
   /**
-   * @description Title for the block axis section in the position-area editor.
+   * @description Title for the mode section and accessible label for the mode radio button group in the position-area editor.
    */
-  block: 'Block',
-  /**
-   * @description Title for the inline axis section in the position-area editor.
-   */
-  inline: 'Inline',
-  /**
-   * @description Accessible label for the block axis mode radio button group.
-   */
-  blockAxisMode: 'Block axis mode',
-  /**
-   * @description Accessible label for the inline axis mode radio button group.
-   */
-  inlineAxisMode: 'Inline axis mode',
+  mode: 'Mode',
   /**
    * @description Label for physical mode radio button in the position-area editor.
    */
@@ -299,14 +288,15 @@ export interface ViewInput {
   onSelectStart: (x: number, y: number) => void;
   onSelect: (x: number, y: number) => void;
   onSelectEnd: (x?: number, y?: number) => void;
-  onModeChange: (axis: Axis, mode: Mode) => void;
-  onSelfChange: (axis: Axis, self: boolean) => void;
+  onModeChange: (mode: Mode) => void;
+  onSelfChange: (self: boolean) => void;
 }
 export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const container = {
     attributes: {
       tabindex: '0',
+      jslog: `${VisualLogging.dialog('position-area-editor').parent('mapped').track({keydown: 'Enter|Escape'})}`,
     },
   };
   if (!input.area) {
@@ -486,35 +476,42 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
   const blockAxis = input.area.primaryAxis === Axis.BLOCK ? input.area.first : input.area.second;
   const inlineAxis = input.area.primaryAxis === Axis.INLINE ? input.area.first : input.area.second;
+  const currentMode = blockAxis.mode === inlineAxis.mode ? blockAxis.mode : undefined;
+  const selfDisabled = (isGeneric(blockAxis) || blockAxis.mode === Mode.PHYSICAL) &&
+      (isGeneric(inlineAxis) || inlineAxis.mode === Mode.PHYSICAL);
+  const selfIndeterminate = !isGeneric(blockAxis) && !isGeneric(inlineAxis) && blockAxis.self !== inlineAxis.self;
+  const selfChecked = !selfIndeterminate && (blockAxis.self || inlineAxis.self);
 
-  function renderModeRadioGroup(axis: Axis, currentMode: Mode): Lit.TemplateResult {
+  function renderModeRadioGroup(currentMode: Mode|undefined): Lit.TemplateResult {
     const modes = [
       {mode: Mode.PHYSICAL, label: i18nString(UIStrings.physical)},
       {mode: Mode.COORDINATE, label: i18nString(UIStrings.coordinate)},
       {mode: Mode.LOGICAL, label: i18nString(UIStrings.logical)},
       {mode: Mode.AUTO, label: i18nString(UIStrings.auto)},
     ];
-    const axisModeLabel =
-        axis === Axis.BLOCK ? i18nString(UIStrings.blockAxisMode) : i18nString(UIStrings.inlineAxisMode);
 
+    // clang-format off
     return html`
-      <fieldset class="chip-radio-group" aria-label=${axisModeLabel}>
+      <fieldset class="chip-radio-group" aria-label=${i18nString(UIStrings.mode)}>
         ${modes.map(({mode, label}) => {
-      const id = `${axis}-mode-${mode}`;
-      return html`
-            <input
-              type="radio"
-              id=${id}
-              name="${axis}-mode"
-              value=${mode}
-              .checked=${currentMode === mode}
-              @change=${() => input.onModeChange(axis, mode)}
-            >
-            <label for=${id}>${label}</label>
-          `;
-    })}
-      </fieldset>
-    `;
+          const id = `mode-${mode}`;
+          return html`
+                <input
+                  type="radio"
+                  id=${id}
+                  name="mode"
+                  value=${mode}
+                  .checked=${currentMode === mode}
+                  @change=${() => input.onModeChange(mode)}
+                >
+                <label
+                  for=${id}
+                  jslog=${VisualLogging.toggle(mode).track({click: true})}
+                >${label}</label>
+              `;
+          })}
+      </fieldset>`;
+    // clang-format on
   }
 
   // clang-format off
@@ -531,6 +528,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         aria-label=${i18nString(UIStrings.positionAreaGrid)}
         aria-description=${i18nString(UIStrings.positionAreaGridDescription)}
         aria-multiselectable="true"
+        jslog=${VisualLogging.canvas('position-area-grid').track({click: true, drag: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space'})}
         data-x-start=${x.start} data-x-end=${x.end} data-y-start=${y.start} data-y-end=${y.end}
         @pointerdown=${onPointerDown}
         @pointermove=${onPointerMove}
@@ -558,27 +556,17 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     <div class=position-area-controls>
       <div class=axis-section>
         <div class=axis-header>
-          <span class=axis-title>${i18nString(UIStrings.block)}</span>
-          <devtools-checkbox
-            .checked=${blockAxis.self}
-            ?disabled=${isGeneric(blockAxis)}
-            @change=${(e: Event) => input.onSelfChange(Axis.BLOCK, (e.target as UI.UIUtils.CheckboxLabel).checked)}>
-            <span class="self-checkbox-label source-code">self</span>
-          </devtools-checkbox>
-        </div>
-        ${renderModeRadioGroup(Axis.BLOCK, blockAxis.mode)}
-      </div>
-      <div class=axis-section>
-        <div class=axis-header>
-          <span class=axis-title>${i18nString(UIStrings.inline)}</span>
+          <span class=axis-title>${i18nString(UIStrings.mode)}</span>
           <devtools-checkbox
-            .checked=${inlineAxis.self}
-            ?disabled=${isGeneric(inlineAxis)}
-            @change=${(e: Event) => input.onSelfChange(Axis.INLINE, (e.target as UI.UIUtils.CheckboxLabel).checked)}>
+            .checked=${selfChecked}
+            .indeterminate=${selfIndeterminate}
+            ?disabled=${selfDisabled}
+            jslog=${VisualLogging.toggle('self').track({change: true})}
+            @change=${(e: Event) => input.onSelfChange((e.target as UI.UIUtils.CheckboxLabel).checked)}>
             <span class="self-checkbox-label source-code">self</span>
           </devtools-checkbox>
         </div>
-        ${renderModeRadioGroup(Axis.INLINE, inlineAxis.mode)}
+        ${renderModeRadioGroup(currentMode)}
       </div>
     </div>
     `,
@@ -725,10 +713,10 @@ export class PositionAreaEditor extends PositionAreaEditorBase {
           other.mode = mode === Mode.COORDINATE ? Mode.COORDINATE : (other.self ? Mode.COORDINATE : Mode.PHYSICAL);
         }
       } else {
+        const self = current.self || other.self;
+        current.self = !isGeneric(current) && self;
         other.mode = mode;
-        if (!isGeneric(current)) {
-          other.self = current.self;
-        }
+        other.self = !isGeneric(other) && self;
       }
     } else {
       other.mode = mode;
@@ -779,8 +767,14 @@ export class PositionAreaEditor extends PositionAreaEditorBase {
       onSelectStart: this.#startSelection.bind(this),
       onSelect: this.#select.bind(this),
       onSelectEnd: this.#finishSelection.bind(this),
-      onModeChange: this.#setAxisMode.bind(this),
-      onSelfChange: this.#setAxisSelf.bind(this),
+      onModeChange: (mode: Mode) => {
+        this.#setAxisMode(Axis.BLOCK, mode);
+        this.#setAxisMode(Axis.INLINE, mode);
+      },
+      onSelfChange: (self: boolean) => {
+        this.#setAxisSelf(Axis.BLOCK, self);
+        this.#setAxisSelf(Axis.INLINE, self);
+      },
     },
                undefined, this.contentElement);
   }