Show number of CSS invalidation in DevTools performance panel

In the Selector stats table, a new column is added to display the number
of invalidated nodes for each selector.

With the information, developers can identify the CSS rules that
invalidate a large number of nodes to reduce over-invalidation, so that
they can improve long Recalculate style events by rewriting expensive
selectors.

More details can be found in this design doc:
https://docs.google.com/document/d/1K7ng5TdeyJemKqXP2I7r1IQPYz4Xb059E6d7M2B8SxY/edit?tab=t.0

Bug: 379886422
Change-Id: I57daf28191cd002624f1fbbfd843c6b009316eaf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6333633
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Guangyue Xu <[email protected]>

Author: guangyuexu

front_end/models/trace/handlers/SelectorStatsHandler.ts

@@ -2,27 +2,90 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Protocol from '../../../generated/protocol.js';
 import * as Types from '../types/types.js';
 
+interface SelectorWithStyleSheedId {
+  selector: string;
+  styleSheetId: string;
+}
+
+interface InvalidatedNode {
+  frame: string;
+  backendNodeId: Protocol.DOM.BackendNodeId;
+  type: Types.Events.InvalidationEventType;
+  selectorList: SelectorWithStyleSheedId[];
+  ts: Types.Timing.Micro;
+  tts?: Types.Timing.Micro;
+  subtree:
+      boolean;  // Indicates if the invalidation applies solely to the node (false) or extends to all its descendants (true)
+  lastUpdateLayoutTreeEventTs: Types.Timing.Micro;
+}
+
 let lastUpdateLayoutTreeEvent: Types.Events.UpdateLayoutTree|null = null;
+let lastInvalidatedNode: InvalidatedNode|null = null;
 
 const selectorDataForUpdateLayoutTree = new Map<Types.Events.UpdateLayoutTree, {
   timings: Types.Events.SelectorTiming[],
 }>();
 
+const invalidatedNodeList = new Array<InvalidatedNode>();
+
 export function reset(): void {
   lastUpdateLayoutTreeEvent = null;
+  lastInvalidatedNode = null;
   selectorDataForUpdateLayoutTree.clear();
+  invalidatedNodeList.length = 0;
 }
 
 export function handleEvent(event: Types.Events.Event): void {
+  if (Types.Events.isStyleRecalcInvalidationTracking(event)) {
+    /**
+     * CSS Style substree invalidation
+     * A subtree invalidation comes with two records, 1) a StyleInvalidatorInvalidationTracking
+     * event 2) following with a StyleRecalcInvalidationTracking event. List of selectors and style
+     * sheet ID information is stored in the 1st event. Subtree flag is stored in the 2nd
+     * event.
+     */
+    if (event.args.data.subtree &&
+        event.args.data.reason === Types.Events.StyleRecalcInvalidationReason.RELATED_STYLE_RULE &&
+        lastInvalidatedNode && event.args.data.nodeId === lastInvalidatedNode.backendNodeId) {
+      lastInvalidatedNode.subtree = true;
+      return;
+    }
+  }
+
   if (Types.Events.isSelectorStats(event) && lastUpdateLayoutTreeEvent && event.args.selector_stats) {
     selectorDataForUpdateLayoutTree.set(lastUpdateLayoutTreeEvent, {
       timings: event.args.selector_stats.selector_timings,
     });
     return;
   }
 
+  if (Types.Events.isStyleInvalidatorInvalidationTracking(event)) {
+    const selectorList = new Array<SelectorWithStyleSheedId>();
+    event.args.data.selectors?.forEach(selector => {
+      selectorList.push({
+        selector: selector.selector,
+        styleSheetId: selector.style_sheet_id,
+      });
+    });
+
+    if (selectorList.length > 0) {
+      lastInvalidatedNode = {
+        frame: event.args.data.frame,
+        backendNodeId: event.args.data.nodeId,
+        type: Types.Events.InvalidationEventType.StyleInvalidatorInvalidationTracking,
+        selectorList,
+        ts: event.ts,
+        tts: event.tts,
+        subtree: false,
+        lastUpdateLayoutTreeEventTs: lastUpdateLayoutTreeEvent ? lastUpdateLayoutTreeEvent.ts : Types.Timing.Micro(0),
+      };
+      invalidatedNodeList.push(lastInvalidatedNode);
+    }
+  }
+
   if (Types.Events.isUpdateLayoutTree(event)) {
     lastUpdateLayoutTreeEvent = event;
     return;
@@ -36,10 +99,12 @@ export interface SelectorStatsData {
   dataForUpdateLayoutEvent: Map<Types.Events.UpdateLayoutTree, {
     timings: Types.Events.SelectorTiming[],
   }>;
+  invalidatedNodeList: InvalidatedNode[];
 }
 
 export function data(): SelectorStatsData {
   return {
     dataForUpdateLayoutEvent: selectorDataForUpdateLayoutTree,
+    invalidatedNodeList,
   };
 }

front_end/models/trace/insights/SlowCSSSelector.test.ts

@@ -16,25 +16,14 @@ describeWithEnvironment('SelectorStatsInsights', function() {
     assert.strictEqual(insight.totalMatchAttempts, 2444);
     assert.strictEqual(insight.totalMatchCount, 465);
 
-    const topElapsedMs = insight.topElapsedMs;
-    const topMatchAttempts = insight.topMatchAttempts;
+    const topSelectorElapsedMs = insight.topSelectorElapsedMs;
+    const topSelectorMatchAttempts = insight.topSelectorMatchAttempts;
 
-    assert.lengthOf(topElapsedMs, 3);
-    assert.lengthOf(topMatchAttempts, 3);
+    assert.isNull(topSelectorElapsedMs);
+    assert.isNotNull(topSelectorMatchAttempts);
 
-    assert.strictEqual(topElapsedMs[0].selector, ':root');
-    assert.strictEqual(topElapsedMs[0]['elapsed (us)'], 14);
-    assert.strictEqual(topElapsedMs[1].selector, 'abbr[title]');
-    assert.strictEqual(topElapsedMs[1]['elapsed (us)'], 8);
-    assert.strictEqual(topElapsedMs[2].selector, 'div');
-    assert.strictEqual(topElapsedMs[2]['elapsed (us)'], 7);
-
-    assert.strictEqual(topMatchAttempts[0].selector, '.HG1dvd > *');
-    assert.strictEqual(topMatchAttempts[0].match_attempts, 169);
-    assert.strictEqual(topMatchAttempts[1].selector, '.gb_Bd > :only-child');
-    assert.strictEqual(topMatchAttempts[1].match_attempts, 169);
-    assert.strictEqual(topMatchAttempts[2].selector, 'div');
-    assert.strictEqual(topMatchAttempts[2].match_attempts, 140);
+    assert.strictEqual(topSelectorMatchAttempts.selector, '.gb_Bd > :only-child');
+    assert.strictEqual(topSelectorMatchAttempts.match_attempts, 169);
   });
 
   it('generates slow selectors by frame ID', async function() {
@@ -47,24 +36,13 @@ describeWithEnvironment('SelectorStatsInsights', function() {
     assert.strictEqual(insight.totalMatchAttempts, 32);
     assert.strictEqual(insight.totalMatchCount, 16);
 
-    const topElapsedMs = insight.topElapsedMs;
-    const topMatchAttempts = insight.topMatchAttempts;
-
-    assert.lengthOf(topElapsedMs, 3);
-    assert.lengthOf(topMatchAttempts, 3);
+    const topSelectorElapsedMs = insight.topSelectorElapsedMs;
+    const topSelectorMatchAttempts = insight.topSelectorMatchAttempts;
 
-    assert.strictEqual(topElapsedMs[0].selector, 'h1');
-    assert.strictEqual(topElapsedMs[0]['elapsed (us)'], 2);
-    assert.strictEqual(topElapsedMs[1].selector, ':root');
-    assert.strictEqual(topElapsedMs[1]['elapsed (us)'], 2);
-    assert.strictEqual(topElapsedMs[2].selector, 'iframe');
-    assert.strictEqual(topElapsedMs[2]['elapsed (us)'], 2);
+    assert.isNull(topSelectorElapsedMs);
+    assert.isNotNull(topSelectorMatchAttempts);
 
-    assert.strictEqual(topMatchAttempts[0].selector, 'iframe');
-    assert.strictEqual(topMatchAttempts[0].match_attempts, 4);
-    assert.strictEqual(topMatchAttempts[1].selector, 'html::spelling-error');
-    assert.strictEqual(topMatchAttempts[1].match_attempts, 3);
-    assert.strictEqual(topMatchAttempts[2].selector, ':root');
-    assert.strictEqual(topMatchAttempts[2].match_attempts, 3);
+    assert.strictEqual(topSelectorMatchAttempts.selector, 'iframe');
+    assert.strictEqual(topSelectorMatchAttempts.match_attempts, 4);
   });
 });

front_end/models/trace/insights/SlowCSSSelector.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Handlers from '../handlers/handlers.js';
+import type {SelectorStatsData} from '../handlers/SelectorStatsHandler.js';
 import * as Helpers from '../helpers/helpers.js';
 import {type SelectorTiming, SelectorTimingsKey} from '../types/TraceEvents.js';
 import * as Types from '../types/types.js';
@@ -52,27 +53,32 @@ export const UIStrings = {
    */
   enableSelectorData:
       'No CSS selector data was found. CSS selector stats need to be enabled in the performance panel settings.',
+  /**
+   *@description top CSS selector when ranked by elapsed time in ms
+   */
+  topSelectorElapsedTime: 'Top selector elaspsed time',
+  /**
+   *@description top CSS selector when ranked by match attempt
+   */
+  topSelectorMatchAttempt: 'Top selector match attempt',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/SlowCSSSelector.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const slowCSSSelectorThreshold = 500;  // 500us threshold for slow selectors
 
 export type SlowCSSSelectorInsightModel = InsightModel<typeof UIStrings, {
   totalElapsedMs: Types.Timing.Milli,
   totalMatchAttempts: number,
   totalMatchCount: number,
-  topElapsedMs: Types.Events.SelectorTiming[],
-  topMatchAttempts: Types.Events.SelectorTiming[],
+  topSelectorElapsedMs: Types.Events.SelectorTiming | null,
+  topSelectorMatchAttempts: Types.Events.SelectorTiming | null,
 }>;
 
-function aggregateSelectorStats(
-    data: Map<Types.Events.UpdateLayoutTree, {
-      timings: Types.Events.SelectorTiming[],
-    }>,
-    context: InsightSetContext): SelectorTiming[] {
+function aggregateSelectorStats(data: SelectorStatsData, context: InsightSetContext): SelectorTiming[] {
   const selectorMap = new Map<String, SelectorTiming>();
 
-  for (const [event, value] of data) {
+  for (const [event, value] of data.dataForUpdateLayoutEvent) {
     if (event.args.beginData?.frame !== context.frameId) {
       continue;
     }
@@ -103,8 +109,7 @@ function finalize(partialModel: PartialInsightModel<SlowCSSSelectorInsightModel>
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.ALL,
-    state: partialModel.topElapsedMs.length !== 0 && partialModel.topMatchAttempts.length !== 0 ? 'informative' :
-                                                                                                  'pass',
+    state: partialModel.topSelectorElapsedMs && partialModel.topSelectorMatchAttempts ? 'informative' : 'pass',
     ...partialModel,
   };
 }
@@ -117,7 +122,7 @@ export function generateInsight(
     throw new Error('no selector stats data');
   }
 
-  const selectorTimings = aggregateSelectorStats(selectorStatsData.dataForUpdateLayoutEvent, context);
+  const selectorTimings = aggregateSelectorStats(selectorStatsData, context);
 
   let totalElapsedUs = 0;
   let totalMatchAttempts = 0;
@@ -129,24 +134,34 @@ export function generateInsight(
     totalMatchCount += timing[SelectorTimingsKey.MatchCount];
   });
 
-  // sort by elapsed time
-  const sortByElapsedMs = selectorTimings.toSorted((a, b) => {
-    return b[SelectorTimingsKey.Elapsed] - a[SelectorTimingsKey.Elapsed];
-  });
+  let topSelectorElapsedMs: SelectorTiming|null = null;
+  let topSelectorMatchAttempts: SelectorTiming|null = null;
 
-  // sort by match attempts
-  const sortByMatchAttempts = selectorTimings.toSorted((a, b) => {
-    return b[SelectorTimingsKey.MatchAttempts] - a[SelectorTimingsKey.MatchAttempts];
-  });
+  if (selectorTimings.length > 0) {
+    // find the selector with most elapsed time
+    topSelectorElapsedMs = selectorTimings.reduce((a, b) => {
+      return a[SelectorTimingsKey.Elapsed] > b[SelectorTimingsKey.Elapsed] ? a : b;
+    });
+
+    // check if the slowest selector is slow enough to trigger insights info
+    if (topSelectorElapsedMs && topSelectorElapsedMs[SelectorTimingsKey.Elapsed] < slowCSSSelectorThreshold) {
+      topSelectorElapsedMs = null;
+    }
+
+    // find the selector with most match attempts
+    topSelectorMatchAttempts = selectorTimings.reduce((a, b) => {
+      return a[SelectorTimingsKey.MatchAttempts] > b[SelectorTimingsKey.MatchAttempts] ? a : b;
+    });
+  }
 
   return finalize({
     // TODO: should we identify UpdateLayout events as linked to this insight?
     relatedEvents: [],
     totalElapsedMs: Types.Timing.Milli(totalElapsedUs / 1000.0),
     totalMatchAttempts,
     totalMatchCount,
-    topElapsedMs: sortByElapsedMs.slice(0, 3),
-    topMatchAttempts: sortByMatchAttempts.slice(0, 3),
+    topSelectorElapsedMs,
+    topSelectorMatchAttempts,
   });
 }
 

front_end/models/trace/types/TraceEvents.ts

@@ -1205,6 +1205,7 @@ export function isScheduleStyleInvalidationTracking(event: Event): event is Sche
 
 export const enum StyleRecalcInvalidationReason {
   ANIMATION = 'Animation',
+  RELATED_STYLE_RULE = 'Related style rule',
 }
 
 export interface StyleRecalcInvalidationTracking extends Instant {
@@ -1235,6 +1236,8 @@ export interface StyleInvalidatorInvalidationTracking extends Instant {
       subtree: boolean,
       nodeName?: string,
       extraData?: string,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      selectors?: Array<{selector: string, style_sheet_id: string}>,
     },
   };
 }
@@ -1289,6 +1292,9 @@ export interface ScheduleStyleRecalculation extends Instant {
   args: Args&{
     data: {
       frame: string,
+      reason?: StyleRecalcInvalidationReason,
+      subtree?: boolean,
+      nodeId?: Protocol.DOM.BackendNodeId,
     },
   };
 }
@@ -1871,17 +1877,19 @@ export function isDecodeImage(event: Event): event is DecodeImage {
   return event.name === Name.DECODE_IMAGE;
 }
 
+export const enum InvalidationEventType {
+  StyleInvalidatorInvalidationTracking = 'StyleInvalidatorInvalidationTracking',
+  StyleRecalcInvalidationTracking = 'StyleRecalcInvalidationTracking',
+}
+
 export interface SelectorTiming {
   'elapsed (us)': number;
-
   fast_reject_count: number;
-
   match_attempts: number;
   selector: string;
-
   style_sheet_id: string;
-
   match_count: number;
+  invalidation_count: number;
 }
 
 export enum SelectorTimingsKey {
@@ -1892,6 +1900,7 @@ export enum SelectorTimingsKey {
   MatchCount = 'match_count',
   Selector = 'selector',
   StyleSheetId = 'style_sheet_id',
+  InvalidationCount = 'invalidation_count',
 }
 
 export interface SelectorStats {

front_end/panels/timeline/TimelineController.ts

@@ -131,6 +131,8 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     }
     if (options.captureSelectorStats) {
       categoriesArray.push(disabledByDefault('blink.debug'));
+      // enable invalidation nodes
+      categoriesArray.push(disabledByDefault('devtools.timeline.invalidationTracking'));
     }
 
     await LiveMetrics.LiveMetrics.instance().disable();