chrome-devtools-frontend 1.0.1703574 → 1.0.1705227

package/front_end/third_party/puppeteer/package/src/api/ElementHandle.ts

@@ -7,7 +7,7 @@
 import type {Protocol} from 'devtools-protocol';
 
 import type {Frame} from '../api/Frame.js';
-import type {Logger} from '../common/Debug.js';
+import {DEBUG_PREFIXES, type Logger} from '../common/Debug.js';
 import {getQueryHandlerAndSelector} from '../common/GetQueryHandler.js';
 import {LazyArg} from '../common/LazyArg.js';
 import type {
@@ -830,20 +830,25 @@ export abstract class ElementHandle<
     this: ElementHandle<Element>,
     target: Point | ElementHandle<Element>,
   ): Promise<Protocol.Input.DragData | void> {
-    await this.scrollIntoViewIfNeeded();
     const page = this.frame.page();
     if (page.isDragInterceptionEnabled()) {
+      await this.scrollIntoViewIfNeeded();
       const source = await this.clickablePoint();
       if (target instanceof ElementHandle) {
         target = await target.clickablePoint();
       }
       return await page.mouse.drag(source, target);
     }
+    // The button is down either because an earlier `drag()` pressed it, or
+    // because this call is about to.
+    let isMouseDown = page._isDragging;
     try {
+      await this.scrollIntoViewIfNeeded();
       if (!page._isDragging) {
         page._isDragging = true;
         await this.hover();
         await page.mouse.down();
+        isMouseDown = true;
       }
       if (target instanceof ElementHandle) {
         await target.hover();
@@ -852,6 +857,14 @@ export abstract class ElementHandle<
       }
     } catch (error) {
       page._isDragging = false;
+      if (isMouseDown) {
+        // `drop()` is the only thing that releases the button and it will never
+        // run now, so without this the button stays pressed for the rest of the
+        // session. It must not mask the error that got us here.
+        await page.mouse.up().catch(error => {
+          this.logger(DEBUG_PREFIXES.error)?.(error);
+        });
+      }
       throw error;
     }
   }

package/front_end/third_party/puppeteer/package/src/cdp/Accessibility.ts

@@ -627,7 +627,16 @@ class AXNode {
         // Since Text nodes are not elements, we want to
         // return a handle to the parent element for them.
         return (await handle.evaluateHandle(node => {
-          return node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+          if (node.nodeType !== Node.TEXT_NODE) {
+            return node;
+          }
+          // A text node placed directly in a shadow root has no parent
+          // element, so fall back to the shadow host.
+          return (
+            node.parentElement ??
+            (node.parentNode as ShadowRoot | null)?.host ??
+            null
+          );
         })) as ElementHandle<Element>;
       },
       backendNodeId: this.payload.backendDOMNodeId,

package/front_end/third_party/puppeteer/package/src/common/Debug.ts

@@ -109,9 +109,6 @@ export const debug: Logger = (prefix): LoggerFunction | undefined => {
     }
 
     return (...logArgs: unknown[]) => {
-      if (captureLogs) {
-        capturedLogs.push(prefix + logArgs);
-      }
       (nodeDebug as LoggerFunction)(...logArgs);
     };
   }
@@ -142,27 +139,3 @@ export const debug: Logger = (prefix): LoggerFunction | undefined => {
     console.log(`${prefix}:`, ...logArgs);
   };
 };
-
-/**
- * @internal
- */
-let capturedLogs: string[] = [];
-/**
- * @internal
- */
-let captureLogs = false;
-
-/**
- * @internal
- */
-export function setLogCapture(value: boolean): void {
-  capturedLogs = [];
-  captureLogs = value;
-}
-
-/**
- * @internal
- */
-export function getCapturedLogs(): string[] {
-  return capturedLogs;
-}

package/front_end/third_party/puppeteer/package/src/node/BrowserLauncher.ts

@@ -3,7 +3,7 @@
  * Copyright 2017 Google Inc.
  * SPDX-License-Identifier: Apache-2.0
  */
-import {accessSync, constants, existsSync} from 'node:fs';
+import {accessSync, constants, existsSync, rmSync} from 'node:fs';
 import {tmpdir} from 'node:os';
 import {join} from 'node:path';
 
@@ -185,9 +185,13 @@ export abstract class BrowserLauncher {
     const usePipe = launchArgs.args.includes('--remote-debugging-pipe');
 
     const onProcessExit = async () => {
-      await this.cleanUserDataDir(launchArgs.userDataDir, {
-        isTemp: launchArgs.isTempUserDataDir,
-      });
+      try {
+        await this.cleanUserDataDir(launchArgs.userDataDir, {
+          isTemp: launchArgs.isTempUserDataDir,
+        });
+      } finally {
+        removeTempUserDataDirOnExit?.();
+      }
     };
 
     if (
@@ -200,19 +204,36 @@ export abstract class BrowserLauncher {
       );
     }
 
-    const browserProcess = launch({
-      executablePath: launchArgs.executablePath,
-      args: launchArgs.args,
-      handleSIGHUP,
-      handleSIGTERM,
-      handleSIGINT,
-      dumpio,
-      env,
-      pipe: usePipe,
-      onExit: onProcessExit,
-      signal: options.signal,
-      logger: options.logger,
-    });
+    let removeTempUserDataDirOnExit: (() => void) | undefined;
+
+    let browserProcess: ReturnType<typeof launch>;
+    try {
+      browserProcess = launch({
+        executablePath: launchArgs.executablePath,
+        args: launchArgs.args,
+        handleSIGHUP,
+        handleSIGTERM,
+        handleSIGINT,
+        dumpio,
+        env,
+        pipe: usePipe,
+        onExit: onProcessExit,
+        signal: options.signal,
+        logger: options.logger,
+      });
+      // Register after @puppeteer/browsers has installed its process-exit
+      // dispatcher. That dispatcher kills the browser before this synchronous
+      // fallback removes the profile directory.
+      removeTempUserDataDirOnExit = launchArgs.isTempUserDataDir
+        ? registerProcessExitCleanup(launchArgs.userDataDir, this.#logger)
+        : undefined;
+    } catch (error) {
+      removeTempUserDataDirOnExit?.();
+      await this.cleanUserDataDir(launchArgs.userDataDir, {
+        isTemp: launchArgs.isTempUserDataDir,
+      });
+      throw error;
+    }
 
     let browser: Browser;
     let cdpConnection: Connection;
@@ -652,3 +673,61 @@ export abstract class BrowserLauncher {
     return executablePath;
   }
 }
+
+interface ProcessExitEmitter {
+  once(event: 'exit', listener: () => void): void;
+  off(event: 'exit', listener: () => void): void;
+}
+
+interface ProcessExitCleanupEntry {
+  userDataDir: string;
+  logger: Logger;
+}
+
+const processExitCleanupEntries = new WeakMap<
+  ProcessExitEmitter,
+  {entries: Set<ProcessExitCleanupEntry>; onExit: () => void}
+>();
+
+/**
+ * Registers a synchronous fallback for removing a temporary profile when the
+ * host process exits before the browser process can run its async cleanup.
+ *
+ * @internal
+ */
+export function registerProcessExitCleanup(
+  userDataDir: string,
+  logger: Logger,
+  processEmitter: ProcessExitEmitter = process,
+): () => void {
+  let cleanup = processExitCleanupEntries.get(processEmitter);
+  if (!cleanup) {
+    const entries = new Set<ProcessExitCleanupEntry>();
+    const onExit = (): void => {
+      for (const entry of entries) {
+        try {
+          rmSync(entry.userDataDir, {
+            recursive: true,
+            force: true,
+            maxRetries: 3,
+            retryDelay: 100,
+          });
+        } catch (error) {
+          entry.logger(DEBUG_PREFIXES.error)?.(error);
+        }
+      }
+    };
+    cleanup = {entries, onExit};
+    processExitCleanupEntries.set(processEmitter, cleanup);
+    processEmitter.once('exit', onExit);
+  }
+  const entry = {userDataDir, logger};
+  cleanup.entries.add(entry);
+  return () => {
+    if (!cleanup?.entries.delete(entry) || cleanup.entries.size > 0) {
+      return;
+    }
+    processEmitter.off('exit', cleanup.onExit);
+    processExitCleanupEntries.delete(processEmitter);
+  };
+}

package/front_end/third_party/puppeteer/package/src/node-env-setup.ts

@@ -52,7 +52,7 @@ async function readFile(
 
 environment.value = {
   path,
-  debuglog,
+  debuglog: environment.value.debuglog ?? debuglog,
   ScreenRecorder: environment.value.ScreenRecorder,
   followSymlinks: true,
   readFile,

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '153.0.8010.36',
-  'chrome-headless-shell': '153.0.8010.36',
-  firefox: 'stable_155.0.1',
+  chrome: '154.0.8037.57',
+  'chrome-headless-shell': '154.0.8037.57',
+  firefox: 'stable_156.0.1',
 });

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '25.11.0';
+export const packageVersion = '25.12.0';
 // x-release-please-end

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;