chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/third_party/web-vitals/package/dist/modules/attribution/onLCP.d.ts

@@ -1,4 +1,4 @@
-import type { LCPMetricWithAttribution, AttributionReportOpts } from '../types.js';
+import type { LCPMetricWithAttribution, LCPAttributionReportOpts } from '../types.js';
 /**
  * Calculates the [LCP](https://web.dev/articles/lcp) value for the current page and
  * calls the `callback` function once the value is ready (along with the
@@ -10,4 +10,4 @@ import type { LCPMetricWithAttribution, AttributionReportOpts } from '../types.j
  * performance entry is dispatched, or once the final value of the metric has
  * been determined.
  */
-export declare const onLCP: (onReport: (metric: LCPMetricWithAttribution) => void, opts?: AttributionReportOpts) => void;
+export declare const onLCP: (onReport: (metric: LCPMetricWithAttribution) => void, opts?: LCPAttributionReportOpts) => void;

package/front_end/third_party/web-vitals/package/dist/modules/attribution/onLCP.js

@@ -18,7 +18,27 @@ import { getSelector } from '../lib/getSelector.js';
 import { initUnique } from '../lib/initUnique.js';
 import { LCPEntryManager } from '../lib/LCPEntryManager.js';
 import { checkSoftNavsEnabled } from '../lib/softNavs.js';
+import { observe } from '../lib/observe.js';
 import { onLCP as unattributedOnLCP } from '../onLCP.js';
+/**
+ * Default resource buffer size to 50 to help attribute media LCPs to a URL and
+ * for subpart attribution. This can be increased for pages that request a
+ * large number of resources between the LCP resource and LCP candidates being
+ * processed, particularly for soft navigations where the browser default first
+ * 250 entries may not contain the LCP resource.
+ */
+const DEFAULT_RESOURCE_BUFFER_SIZE = 50;
+let resourceBufferSizeLimit = DEFAULT_RESOURCE_BUFFER_SIZE;
+const resourceBuffer = [];
+observe(['resource'], (entries) => {
+    for (const entry of entries) {
+        resourceBuffer.push(entry);
+        // Keep only the last resourceBufferSizeLimit entries.
+        if (resourceBuffer.length > resourceBufferSizeLimit) {
+            resourceBuffer.shift();
+        }
+    }
+});
 /**
  * Calculates the [LCP](https://web.dev/articles/lcp) value for the current page and
  * calls the `callback` function once the value is ready (along with the
@@ -36,6 +56,9 @@ export const onLCP = (onReport, opts = {}) => {
     // this function invocation and the `unattributedOnLCP()` invocation below
     // (which is passed the same `opts` object).
     opts = Object.assign({}, opts);
+    if (opts.resourceBufferSize != undefined) {
+        resourceBufferSizeLimit = opts.resourceBufferSize;
+    }
     const lcpEntryManager = initUnique(opts, LCPEntryManager);
     const lcpTargetMap = new WeakMap();
     if (checkSoftNavsEnabled(opts)) {
@@ -64,10 +87,14 @@ export const onLCP = (onReport, opts = {}) => {
         if (metric.entries.length) {
             // The `metric.entries.length` check ensures there will be an entry.
             const lcpEntry = metric.entries.at(-1);
+            // Get the Resource Timing entry checking the local buffer first
+            // Use findLast to get the latest entry in case a resource is requested
+            // multiple times (can particularly affect soft nav page views).
             const lcpResourceEntry = lcpEntry.url &&
-                performance
-                    .getEntriesByType('resource')
-                    .find((e) => e.name === lcpEntry.url);
+                (resourceBuffer.findLast((e) => e.name === lcpEntry.url) ||
+                    performance
+                        .getEntriesByType('resource')
+                        .findLast((e) => e.name === lcpEntry.url));
             attribution.target = lcpTargetMap.get(lcpEntry);
             attribution.lcpEntry = lcpEntry;
             // Only attribute the URL and resource entry if they exist.

package/front_end/third_party/web-vitals/package/dist/modules/lib/InteractionManager.d.ts

@@ -5,6 +5,15 @@ export interface Interaction {
     entries: PerformanceEventTiming[];
 }
 export declare class InteractionManager {
+    /**
+     * The interaction count at the start of the current navigation, so p98
+     * interaction latencies only consider interactions since then.
+     *
+     * This is per-instance rather than module state: `initUnique()` gives every
+     * `onINP()` call its own manager, and a shared counter would let whichever
+     * instance resets first hide the interactions from all the others.
+     */
+    _prevInteractionCount: number;
     /**
      * A list of longest interactions on the page (by latency) sorted so the
      * longest one is first. The list is at most MAX_INTERACTIONS_TO_CONSIDER
@@ -18,6 +27,11 @@ export declare class InteractionManager {
     _longestInteractionMap: Map<number, Interaction>;
     _onBeforeProcessingEntry?: (entry: PerformanceEventTiming) => void;
     _onAfterProcessingINPCandidate?: (interaction: Interaction) => void;
+    /**
+     * Returns the interaction count since the start of the current navigation
+     * (or the full page lifecycle if there were no soft navs / bfcache restores).
+     */
+    _getInteractionCountForNavigation(): number;
     _resetInteractions(): void;
     /**
      * Returns the estimated p98 longest interaction based on the stored

package/front_end/third_party/web-vitals/package/dist/modules/lib/InteractionManager.js

@@ -17,17 +17,16 @@ import { getInteractionCount } from './polyfills/interactionCountPolyfill.js';
 // To prevent unnecessary memory usage on pages with lots of interactions,
 // store at most 10 of the longest interactions to consider as INP candidates.
 const MAX_INTERACTIONS_TO_CONSIDER = 10;
-// Used to store the interaction count after a bfcache restore, since p98
-// interaction latencies should only consider the current navigation.
-let prevInteractionCount = 0;
-/**
- * Returns the interaction count since the last bfcache restore (or for the
- * full page lifecycle if there were no bfcache restores).
- */
-const getInteractionCountForNavigation = () => {
-    return getInteractionCount() - prevInteractionCount;
-};
 export class InteractionManager {
+    /**
+     * The interaction count at the start of the current navigation, so p98
+     * interaction latencies only consider interactions since then.
+     *
+     * This is per-instance rather than module state: `initUnique()` gives every
+     * `onINP()` call its own manager, and a shared counter would let whichever
+     * instance resets first hide the interactions from all the others.
+     */
+    _prevInteractionCount = 0;
     /**
      * A list of longest interactions on the page (by latency) sorted so the
      * longest one is first. The list is at most MAX_INTERACTIONS_TO_CONSIDER
@@ -41,8 +40,15 @@ export class InteractionManager {
     _longestInteractionMap = new Map();
     _onBeforeProcessingEntry;
     _onAfterProcessingINPCandidate;
+    /**
+     * Returns the interaction count since the start of the current navigation
+     * (or the full page lifecycle if there were no soft navs / bfcache restores).
+     */
+    _getInteractionCountForNavigation() {
+        return getInteractionCount() - this._prevInteractionCount;
+    }
     _resetInteractions() {
-        prevInteractionCount = getInteractionCount();
+        this._prevInteractionCount = getInteractionCount();
         this._longestInteractionList.length = 0;
         this._longestInteractionMap.clear();
     }
@@ -51,7 +57,7 @@ export class InteractionManager {
      * interaction candidates and the interaction count for the current page.
      */
     _estimateP98LongestInteraction(navigationType) {
-        const interactionCountForNavigation = getInteractionCountForNavigation();
+        const interactionCountForNavigation = this._getInteractionCountForNavigation();
         const candidateInteractionIndex = Math.min(this._longestInteractionList.length - 1, Math.floor(interactionCountForNavigation / 50));
         // If we have a non-zero interactionCountForNavigation but no
         // candidateInteractionIndex, then it's below the 16ms limit
@@ -79,7 +85,7 @@ export class InteractionManager {
     _processEntry(entry) {
         this._onBeforeProcessingEntry?.(entry);
         // Skip further processing for entries that cannot be INP candidates.
-        if (!(entry.interactionId || entry.entryType === 'first-input'))
+        if (!entry.interactionId)
             return;
         // The least-long of the 10 longest interactions.
         const minLongestInteraction = this._longestInteractionList.at(-1);

package/front_end/third_party/web-vitals/package/dist/modules/lib/bindReporter.d.ts

@@ -1,5 +1,5 @@
 import type { MetricType, MetricRatingThresholds } from '../types.js';
-export declare const bindReporter: <MetricName extends MetricType["name"]>(callback: (metric: Extract<MetricType, {
+export declare const bindReporter: <MetricName extends MetricType['name']>(callback: (metric: Extract<MetricType, {
     name: MetricName;
 }>) => void, metric: Extract<MetricType, {
     name: MetricName;

package/front_end/third_party/web-vitals/package/dist/modules/lib/doubleRAF.js

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 export const doubleRAF = (cb) => {
-    requestAnimationFrame(() => requestAnimationFrame(cb));
+    requestAnimationFrame(() => requestAnimationFrame(() => cb()));
 };

package/front_end/third_party/web-vitals/package/dist/modules/lib/initMetric.d.ts

@@ -1,8 +1,8 @@
 import type { MetricType } from '../types.js';
-export declare const initMetric: <MetricName extends MetricType["name"]>(name: MetricName, value?: number, navigationType?: MetricType["navigationType"], navigationId?: number, navigationInteractionId?: number, navigationURL?: string, navigationStartTime?: number) => {
+export declare const initMetric: <MetricName extends MetricType['name']>(name: MetricName, value?: number, navigationType?: MetricType['navigationType'], navigationId?: number, navigationInteractionId?: number, navigationURL?: string, navigationStartTime?: number) => {
     name: MetricName;
     value: number;
-    rating: "good";
+    rating: 'good';
     delta: number;
     entries: (Extract<import("../types.js").CLSMetric, {
         name: MetricName;
@@ -16,7 +16,7 @@ export declare const initMetric: <MetricName extends MetricType["name"]>(name: M
         name: MetricName;
     }>)["entries"];
     id: string;
-    navigationType: "reload" | "navigate" | "soft-navigation" | "back-forward" | "back-forward-cache" | "prerender" | "restore";
+    navigationType: "back-forward" | "back-forward-cache" | "navigate" | "prerender" | "reload" | "restore" | "soft-navigation";
     navigationId: number;
     navigationInteractionId: number | undefined;
     navigationURL: string | undefined;

package/front_end/third_party/web-vitals/package/dist/modules/lib/softNavs.js

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 export const checkSoftNavsEnabled = (opts) => {
-    return (PerformanceObserver.supportedEntryTypes.includes('soft-navigation') &&
+    return (
+    // Firefox has a preference to disable this, which some people use so add a guard
+    globalThis.PerformanceObserver?.supportedEntryTypes?.includes('soft-navigation') &&
         // Older implementations expose the value as an attribute rather than the
         // method. We only support the newer method as that was what was launched
         // to stable unflagged.

package/front_end/third_party/web-vitals/package/dist/modules/types/lcp.d.ts

@@ -1,4 +1,4 @@
-import type { Metric } from './base.js';
+import type { AttributionReportOpts, Metric } from './base.js';
 /**
  * An LCP-specific version of the Metric object.
  */
@@ -65,6 +65,20 @@ export interface LCPAttribution {
      */
     lcpEntry?: LargestContentfulPaint;
 }
+/**
+ * Configuration options for `onLCP`.
+ */
+export interface LCPAttributionReportOpts extends AttributionReportOpts {
+    /**
+     * The maximum number of additional Resource Timing entries to keep in the
+     * buffer, in addition to the first 250 entries available in the default
+     * buffer. This is useful to help attribute media LCPs to a URL and LCP
+     * subparts. Defaults to 50 but can be increased for pages that use a lot of
+     * resources, before LCP gets a chance to emit, particularly for soft
+     * navigations.
+     */
+    resourceBufferSize?: number;
+}
 /**
  * An LCP-specific version of the Metric object with attribution.
  */

package/front_end/third_party/web-vitals/package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-vitals",
-  "version": "6.0.0",
+  "version": "6.2.1",
   "description": "Easily measure performance metrics in JavaScript",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -90,7 +90,6 @@
     "release:alpha": "npm version prerelease --preid=alpha -m 'Release v%s' && npm publish --tag next",
     "release:beta": "npm version prerelease --preid=beta -m 'Release v%s' && npm publish --tag next",
     "release:rc": "npm version prerelease --preid=rc -m 'Release v%s' && npm publish --tag next",
-    "release:soft-navs": "npm run build && npm publish --tag soft-navs",
     "test": "npm-run-all build test:unit -p -r test:e2e test:server",
     "test:e2e": "wdio",
     "test:server": "node test/server.js",

package/front_end/third_party/web-vitals/package/src/attribution/onINP.ts

@@ -210,7 +210,7 @@ export const onINP = (
     }
 
     // Store the grouped render time for this entry for reference later.
-    if (entry.interactionId || entry.entryType === 'first-input') {
+    if (entry.interactionId) {
       entryToEntriesGroupMap.set(entry, group);
     }
 
@@ -448,7 +448,14 @@ export const onINP = (
     const firstEntry = metric.entries[0];
     const group = entryToEntriesGroupMap.get(firstEntry)!;
 
-    const processingStart = group.processingStart;
+    // `group.processingStart` is the earliest processing start across *all*
+    // events presented in this frame, which can predate this interaction's
+    // `startTime` (e.g. a long `pointerover` handler that was still running
+    // when the user clicked). Clamp so `inputDelay` is never negative.
+    const processingStart = Math.max(
+      group.processingStart,
+      firstEntry.startTime,
+    );
 
     // Due to the fact that durations can be rounded down to the nearest 8ms,
     // we have to clamp `nextPaintTime` so it doesn't appear to occur before

package/front_end/third_party/web-vitals/package/src/attribution/onLCP.ts

@@ -19,14 +19,37 @@ import {getSelector} from '../lib/getSelector.js';
 import {initUnique} from '../lib/initUnique.js';
 import {LCPEntryManager} from '../lib/LCPEntryManager.js';
 import {checkSoftNavsEnabled} from '../lib/softNavs.js';
+import {observe} from '../lib/observe.js';
 import {onLCP as unattributedOnLCP} from '../onLCP.js';
 import type {
   LCPAttribution,
   LCPMetric,
   LCPMetricWithAttribution,
-  AttributionReportOpts,
+  LCPAttributionReportOpts,
 } from '../types.js';
 
+/**
+ * Default resource buffer size to 50 to help attribute media LCPs to a URL and
+ * for subpart attribution. This can be increased for pages that request a
+ * large number of resources between the LCP resource and LCP candidates being
+ * processed, particularly for soft navigations where the browser default first
+ * 250 entries may not contain the LCP resource.
+ */
+const DEFAULT_RESOURCE_BUFFER_SIZE = 50;
+let resourceBufferSizeLimit = DEFAULT_RESOURCE_BUFFER_SIZE;
+
+const resourceBuffer: PerformanceResourceTiming[] = [];
+
+observe(['resource'], (entries) => {
+  for (const entry of entries) {
+    resourceBuffer.push(entry);
+    // Keep only the last resourceBufferSizeLimit entries.
+    if (resourceBuffer.length > resourceBufferSizeLimit) {
+      resourceBuffer.shift();
+    }
+  }
+});
+
 /**
  * Calculates the [LCP](https://web.dev/articles/lcp) value for the current page and
  * calls the `callback` function once the value is ready (along with the
@@ -40,7 +63,7 @@ import type {
  */
 export const onLCP = (
   onReport: (metric: LCPMetricWithAttribution) => void,
-  opts: AttributionReportOpts = {},
+  opts: LCPAttributionReportOpts = {},
 ) => {
   // Clone the opts object to ensure it's unique, so we can initialize a
   // single instance of the `LCPEntryManager` class that's shared only with
@@ -48,6 +71,10 @@ export const onLCP = (
   // (which is passed the same `opts` object).
   opts = Object.assign({}, opts);
 
+  if (opts.resourceBufferSize != undefined) {
+    resourceBufferSizeLimit = opts.resourceBufferSize;
+  }
+
   const lcpEntryManager = initUnique(opts, LCPEntryManager);
   const lcpTargetMap: WeakMap<LargestContentfulPaint, string> = new WeakMap();
 
@@ -81,11 +108,15 @@ export const onLCP = (
     if (metric.entries.length) {
       // The `metric.entries.length` check ensures there will be an entry.
       const lcpEntry = metric.entries.at(-1)!;
+      // Get the Resource Timing entry checking the local buffer first
+      // Use findLast to get the latest entry in case a resource is requested
+      // multiple times (can particularly affect soft nav page views).
       const lcpResourceEntry =
         lcpEntry.url &&
-        performance
-          .getEntriesByType('resource')
-          .find((e) => e.name === lcpEntry.url);
+        (resourceBuffer.findLast((e) => e.name === lcpEntry.url) ||
+          performance
+            .getEntriesByType('resource')
+            .findLast((e) => e.name === lcpEntry.url));
 
       attribution.target = lcpTargetMap.get(lcpEntry);
       attribution.lcpEntry = lcpEntry;

package/front_end/third_party/web-vitals/package/src/lib/InteractionManager.ts

@@ -31,19 +31,16 @@ export interface Interaction {
 // store at most 10 of the longest interactions to consider as INP candidates.
 const MAX_INTERACTIONS_TO_CONSIDER = 10;
 
-// Used to store the interaction count after a bfcache restore, since p98
-// interaction latencies should only consider the current navigation.
-let prevInteractionCount = 0;
-
-/**
- * Returns the interaction count since the last bfcache restore (or for the
- * full page lifecycle if there were no bfcache restores).
- */
-const getInteractionCountForNavigation = () => {
-  return getInteractionCount() - prevInteractionCount;
-};
-
 export class InteractionManager {
+  /**
+   * The interaction count at the start of the current navigation, so p98
+   * interaction latencies only consider interactions since then.
+   *
+   * This is per-instance rather than module state: `initUnique()` gives every
+   * `onINP()` call its own manager, and a shared counter would let whichever
+   * instance resets first hide the interactions from all the others.
+   */
+  _prevInteractionCount = 0;
   /**
    * A list of longest interactions on the page (by latency) sorted so the
    * longest one is first. The list is at most MAX_INTERACTIONS_TO_CONSIDER
@@ -61,8 +58,16 @@ export class InteractionManager {
 
   _onAfterProcessingINPCandidate?: (interaction: Interaction) => void;
 
+  /**
+   * Returns the interaction count since the start of the current navigation
+   * (or the full page lifecycle if there were no soft navs / bfcache restores).
+   */
+  _getInteractionCountForNavigation() {
+    return getInteractionCount() - this._prevInteractionCount;
+  }
+
   _resetInteractions() {
-    prevInteractionCount = getInteractionCount();
+    this._prevInteractionCount = getInteractionCount();
     this._longestInteractionList.length = 0;
     this._longestInteractionMap.clear();
   }
@@ -72,7 +77,8 @@ export class InteractionManager {
    * interaction candidates and the interaction count for the current page.
    */
   _estimateP98LongestInteraction(navigationType: Metric['navigationType']) {
-    const interactionCountForNavigation = getInteractionCountForNavigation();
+    const interactionCountForNavigation =
+      this._getInteractionCountForNavigation();
     const candidateInteractionIndex = Math.min(
       this._longestInteractionList.length - 1,
       Math.floor(interactionCountForNavigation / 50),
@@ -109,7 +115,7 @@ export class InteractionManager {
     this._onBeforeProcessingEntry?.(entry);
 
     // Skip further processing for entries that cannot be INP candidates.
-    if (!(entry.interactionId || entry.entryType === 'first-input')) return;
+    if (!entry.interactionId) return;
 
     // The least-long of the 10 longest interactions.
     const minLongestInteraction = this._longestInteractionList.at(-1);

package/front_end/third_party/web-vitals/package/src/lib/doubleRAF.ts

@@ -15,5 +15,5 @@
  */
 
 export const doubleRAF = (cb: () => unknown) => {
-  requestAnimationFrame(() => requestAnimationFrame(cb));
+  requestAnimationFrame(() => requestAnimationFrame(() => cb()));
 };

package/front_end/third_party/web-vitals/package/src/lib/softNavs.ts

@@ -18,7 +18,10 @@ import type {ReportOpts} from '../types.js';
 
 export const checkSoftNavsEnabled = (opts?: ReportOpts) => {
   return (
-    PerformanceObserver.supportedEntryTypes.includes('soft-navigation') &&
+    // Firefox has a preference to disable this, which some people use so add a guard
+    globalThis.PerformanceObserver?.supportedEntryTypes?.includes(
+      'soft-navigation',
+    ) &&
     // Older implementations expose the value as an attribute rather than the
     // method. We only support the newer method as that was what was launched
     // to stable unflagged.

package/front_end/third_party/web-vitals/package/src/types/lcp.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type {Metric} from './base.js';
+import type {AttributionReportOpts, Metric} from './base.js';
 
 /**
  * An LCP-specific version of the Metric object.
@@ -84,6 +84,21 @@ export interface LCPAttribution {
   lcpEntry?: LargestContentfulPaint;
 }
 
+/**
+ * Configuration options for `onLCP`.
+ */
+export interface LCPAttributionReportOpts extends AttributionReportOpts {
+  /**
+   * The maximum number of additional Resource Timing entries to keep in the
+   * buffer, in addition to the first 250 entries available in the default
+   * buffer. This is useful to help attribute media LCPs to a URL and LCP
+   * subparts. Defaults to 50 but can be increased for pages that use a lot of
+   * resources, before LCP gets a chance to emit, particularly for soft
+   * navigations.
+   */
+  resourceBufferSize?: number;
+}
+
 /**
  * An LCP-specific version of the Metric object with attribution.
  */

package/front_end/third_party/web-vitals/rebuild.sh

@@ -4,8 +4,8 @@ set -euo pipefail
 
 SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 
-VERSION=6.0.0
-GIT_SHA=67a9ddb4cf77f8d1cb2c877ccd870b9c821aa853 # web-vitals does not tag releases.
+VERSION=6.2.1
+GIT_SHA=582ee7450ca5c60a947edbfd95ad53e135ca5dde # web-vitals does not tag releases.
 
 # Note: this is just to handle updating README.chromium.
 # For the actual sources, below we checkout the repo, apply local patches, then build with tsc.
@@ -17,7 +17,7 @@ cd "$SCRIPT_DIR"
 rm -rf package/src package/dist
 
 if [ ! -d tmp-repo ]; then
-    git clone http://github.com/GoogleChrome/web-vitals tmp-repo
+    git clone https://github.com/GoogleChrome/web-vitals tmp-repo
 fi
 
 cd tmp-repo

package/front_end/ui/comments/CommentAnchorResolver.ts

@@ -10,7 +10,16 @@ export type EditorAnchorSignature = CommentManager.CommentManager.EditorAnchorSi
 export type CommentAnchorSignature = CommentManager.CommentManager.CommentAnchorSignature;
 export type CommentThread = CommentManager.CommentManager.CommentThread;
 
-const IGNORED_MINOR_CONTROLS = new Set<number>([
+const DISALLOWED_COMMENT_TARGETS = new Set<number>([
+  // Top-level containers & layout structures
+  VisualLogging.VisualElements.Panel,
+  VisualLogging.VisualElements.Drawer,
+  VisualLogging.VisualElements.Pane,
+  VisualLogging.VisualElements.Tree,
+  VisualLogging.VisualElements.PanelTabHeader,
+  VisualLogging.VisualElements.Resizer,
+  VisualLogging.VisualElements.Menu,
+  // Minor controls and toolbars
   VisualLogging.VisualElements.Action,
   VisualLogging.VisualElements.Toggle,
   VisualLogging.VisualElements.Close,
@@ -158,7 +167,8 @@ function resolveCodeMirrorLineInfo(element: Element): CodeMirrorLineInfo|null {
  * 3. Checks for domain IDs (`data-network-request-id` or `data-backend-node-id`) across shadow boundaries,
  *    returning the owning domain element.
  * 4. Escalates minor controls / sub-elements up to semantic containers (e.g., TableRow, TreeItem).
- * 5. Falls back to the nearest visual logging element if no semantic container is found.
+ * 5. Falls back to the nearest visual logging element if no semantic container is found,
+ *    excluding top-level containers and minor controls.
  *
  * @param element The source DOM element to resolve.
  * @returns The resolved semantic anchor Element, or null if unresolvable/empty/excluded.
@@ -193,7 +203,7 @@ export function resolveCommentAnchorElement(element: Element): Element|null {
             config.ve === VisualLogging.VisualElements.TreeItem) {
           return isNonEmptyItem(target) ? target : null;
         }
-        if (!fallbackCandidate && !IGNORED_MINOR_CONTROLS.has(config.ve)) {
+        if (!fallbackCandidate && !DISALLOWED_COMMENT_TARGETS.has(config.ve)) {
           fallbackCandidate = target;
         }
       } catch {
@@ -369,7 +379,8 @@ export function resolveCommentAnchor(
  * @param limit Maximum number of matching elements to return (defaults to Infinity).
  * @returns Array of matching Elements in document order.
  */
-export function deepQuerySelectorAll(root: Document|Element, selector: string, limit = Infinity): Element[] {
+// eslint-disable-next-line @typescript-eslint/no-inferrable-types
+export function deepQuerySelectorAll(root: Document|Element, selector: string, limit: number = Infinity): Element[] {
   const results: Element[] = [];
   if (limit <= 0 || Number.isNaN(limit)) {
     return results;

package/front_end/ui/comments/commentsOverlay.css

@@ -10,7 +10,8 @@
     position: fixed;
     inset: 0;
     pointer-events: none;
-    z-index: 999990;
+    /* Needs to be above regular panel widgets (e.g. flame chart at z-index 2000) but below floating glass panes (which start at z-index 3000). */
+    z-index: 2500;
     overflow: hidden;
     width: 100vw;
     height: 100vh;
@@ -20,8 +21,8 @@
     position: absolute;
     pointer-events: auto;
     cursor: pointer;
-    font-size: 24px;
-    line-height: 24px;
+    font-size: var(--sys-typescale-headline1-size);
+    line-height: var(--sys-typescale-body1-line-height);
     filter: drop-shadow(0 2px 5px rgb(0 0 0 / 35%));
     user-select: none;
     transition: transform 0.1s ease;
@@ -34,7 +35,7 @@
   .comment-anchor-highlight {
     position: absolute;
     pointer-events: none;
-    border: 2px dashed var(--sys-color-primary);
+    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;
   }
@@ -42,7 +43,7 @@
   .comment-hover-highlight {
     position: absolute;
     pointer-events: none;
-    border: 2px solid var(--sys-color-primary);
+    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;
   }

package/front_end/ui/components/adorners/Adorner.ts

@@ -39,7 +39,7 @@ export class Adorner extends HTMLElement {
     this.#render();
   }
 
-  static readonly observedAttributes = ['active', 'toggleable'];
+  static readonly observedAttributes: string[] = ['active', 'toggleable'];
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     if (oldValue === newValue) {
       return;

package/front_end/ui/components/adorners/adorner.css

@@ -15,13 +15,13 @@
 slot {
   display: inline-flex;
   box-sizing: border-box;
-  height: 14px;
+  height: var(--sys-size-7);
   line-height: 13px;
-  padding: 0 6px;
+  padding: 0 var(--sys-size-4);
   font-size: var(--override-adorner-font-size, 8.5px);
   color: var(--override-adorner-text-color, var(--sys-color-primary));
   background-color: var(--override-adorner-background-color, var(--sys-color-cdt-base-container));
-  border: 1px solid var(--override-adorner-border-color, var(--sys-color-tonal-outline));
+  border: var(--sys-size-1) solid var(--override-adorner-border-color, var(--sys-color-tonal-outline));
   border-radius: 10px;
   position: relative;
 
@@ -46,15 +46,15 @@ slot {
 }
 
 :host(:focus-visible) slot {
-  outline: 2px solid var(--sys-color-state-focus-ring);
-  outline-offset: 2px;
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: var(--sys-size-2);
   z-index: 999;
 }
 
 :host([aria-pressed="true"]) slot {
   color: var(--override-adorner-active-text-color, var(--sys-color-on-primary));
   background-color: var(--override-adorner-active-background-color, var(--sys-color-primary));
-  border: 1px solid var(--override-adorner-active-background-color, var(--sys-color-primary));
+  border: var(--sys-size-1) solid var(--override-adorner-active-background-color, var(--sys-color-primary));
 
   &:hover::after {
     background-color: var(--sys-color-state-hover-on-prominent);

package/front_end/ui/components/buttons/FloatingButton.ts

@@ -38,7 +38,7 @@ const {html, Directives: {classMap}} = Lit;
  *                      provided context.
  */
 export class FloatingButton extends HTMLElement {
-  static readonly observedAttributes = ['icon-name', 'jslogcontext', 'disabled'];
+  static readonly observedAttributes: string[] = ['icon-name', 'jslogcontext', 'disabled'];
 
   readonly #shadow = this.attachShadow({mode: 'open'});