Update slow path non matches and add a test case

slowPathNonMatches = (1.0 - (fastReject / (matchAttempt - matchCount)))
x 100%

When the value is zero, all selectors are fast rejected in the match
attempt. When value is 100, no selector is fast rejected in the match
attempt. The lower the better.

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

Author: Guangyue Xu

front_end/panels/timeline/TimelineSelectorStatsView.ts

@@ -36,11 +36,11 @@ const UIStrings = {
   /**
    *@description Column name and percentage of slow mach non-matches computing a style rule
    */
-  rejectPercentage: '% of slow-path non-matches',
+  slowPathNonMatches: '% of slow-path non-matches',
   /**
    *@description Tooltip description '% of slow-path non-matches'
    */
-  rejectPercentageExplanation:
+  slowPathNonMatchesExplanation:
       'The percentage of non-matching nodes (Match Attempts - Match Count) that couldn\'t be quickly ruled out by the bloom filter due to high selector complexity. Lower is better.',
   /**
    *@description Column name for count of elements that the engine attempted to match against a style rule
@@ -165,8 +165,8 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
               ${i18nString(UIStrings.matchCount)}</span>
             </th>
             <th id=${SelectorTimingsKey.RejectPercentage} weight="1" sortable hideable align="right">
-              <span title=${i18nString(UIStrings.rejectPercentageExplanation)}>${
-            i18nString(UIStrings.rejectPercentage)}</span>
+              <span title=${i18nString(UIStrings.slowPathNonMatchesExplanation)}>${
+            i18nString(UIStrings.slowPathNonMatches)}</span>
             </th>
             <th id=${SelectorTimingsKey.Selector} weight="3" sortable hideable>
               <span title=${i18nString(UIStrings.selectorExplanation)}>
@@ -179,7 +179,8 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
           </tr>
           ${input.timings.map(timing => {
           const nonMatches = timing[SelectorTimingsKey.MatchAttempts] - timing[SelectorTimingsKey.MatchCount];
-          const rejectPercentage = (nonMatches ? timing[SelectorTimingsKey.FastRejectCount] / nonMatches : 1) * 100;
+          const slowPathNonMatches =
+              (nonMatches ? 1.0 - timing[SelectorTimingsKey.FastRejectCount] / nonMatches : 0) * 100;
           const styleSheetId = timing[SelectorTimingsKey.StyleSheetId];
           const locations = timing.locations;
           const locationMessage = locations ? null :
@@ -194,8 +195,8 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
             </td>
             <td>${timing[SelectorTimingsKey.MatchAttempts]}</td>
             <td>${timing[SelectorTimingsKey.MatchCount]}</td>
-            <td data-value=${rejectPercentage}>
-              ${rejectPercentage.toFixed(1)}
+            <td data-value=${slowPathNonMatches}>
+              ${slowPathNonMatches.toFixed(1)}
             </td>
             <td title=${timing[SelectorTimingsKey.Selector]}>
              ${timing[SelectorTimingsKey.Selector]}
@@ -229,12 +230,13 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
       const tableData = [];
       const columnName = [
         i18nString(UIStrings.elapsed), i18nString(UIStrings.matchAttempts), i18nString(UIStrings.matchCount),
-        i18nString(UIStrings.rejectPercentage), i18nString(UIStrings.selector), i18nString(UIStrings.styleSheetId)
+        i18nString(UIStrings.slowPathNonMatches), i18nString(UIStrings.selector), i18nString(UIStrings.styleSheetId)
       ];
       tableData.push(columnName.join('\t'));
       for (const timing of this.#timings) {
         const nonMatches = timing[SelectorTimingsKey.MatchAttempts] - timing[SelectorTimingsKey.MatchCount];
-        const rejectPercentage = (nonMatches ? timing[SelectorTimingsKey.FastRejectCount] / nonMatches : 1) * 100;
+        const slowPathNonMatches =
+            (nonMatches ? 1.0 - timing[SelectorTimingsKey.FastRejectCount] / nonMatches : 0) * 100;
         const styleSheetId = timing[SelectorTimingsKey.StyleSheetId] as Protocol.CSS.StyleSheetId;
         let linkData = '';
         const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
@@ -252,7 +254,7 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
           timing[SelectorTimingsKey.Elapsed] / 1000.0,
           timing[SelectorTimingsKey.MatchAttempts],
           timing[SelectorTimingsKey.MatchCount],
-          rejectPercentage,
+          slowPathNonMatches,
           timing[SelectorTimingsKey.Selector],
           linkData,
         ].join('\t'));

test/e2e/helpers/datagrid-helpers.ts

@@ -29,6 +29,23 @@ export async function getDataGridRows(
   return await Promise.all(handlers.map(handler => devToolsPage.$$('td[jslog]:not(.hidden)', handler)));
 }
 
+export async function getDataGridColumnNames(
+    root?: ElementHandle<Node>,
+    devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage): Promise<String[]> {
+  const columnNames: String[] = [];
+  const dataGrid = !root ? await devToolsPage.waitFor('devtools-data-grid') : root;
+
+  const columnNodes = await dataGrid.$$('pierce/[role="columnheader"]');
+  for (const column of columnNodes) {
+    const text = await column.evaluate(x => {
+      return (x as HTMLElement).innerText || '';
+    });
+    columnNames.push(text);
+  }
+
+  return columnNames;
+}
+
 export async function getDataGrid(root?: ElementHandle, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
   const dataGrid = await devToolsPage.waitFor('devtools-data-grid', root);
   if (!dataGrid) {

test/e2e/resources/performance/BUILD.gn

@@ -18,6 +18,7 @@ copy_to_gen("performance") {
     "selectorStats/page-with-style-perf-test.html",
     "selectorStats/page-with-style.css",
     "selectorStats/page-with-style.html",
+    "selectorStats/slow-path-non-match.html",
     "timeline/treeView-test-trace.json",
     "timeline/web.dev-trace.json.gz",
     "wasm/mainWasm_profile.json",

test/e2e/resources/performance/selectorStats/slow-path-non-match.html

@@ -0,0 +1,23 @@
+<html>
+
+<head>
+    <style>
+        .parent .last-child {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div>
+        <span class="last-child">1</span>
+        <span class="last-child">2</span>
+        <span class="last-child">3</span>
+        <span class="last-child">4</span>
+    </div>
+    <span class="parent">
+      <span class="last-child">5</span>
+    </span>
+</body>
+
+</html>

test/e2e_non_hosted/performance/selector-stats-tracing_test.ts

@@ -4,7 +4,12 @@
 
 import {assert} from 'chai';
 
-import {getDataGrid, getDataGridRows, getInnerTextOfDataGridCells} from '../../e2e/helpers/datagrid-helpers.js';
+import {
+  getDataGrid,
+  getDataGridColumnNames,
+  getDataGridRows,
+  getInnerTextOfDataGridCells
+} from '../../e2e/helpers/datagrid-helpers.js';
 import {
   enableCSSSelectorStats,
   increaseTimeoutForPerfPanel,
@@ -60,6 +65,39 @@ describe('The Performance panel', function() {
        await validateSourceTabs(devToolsPage);
      });
 
+  it('Slow path non matches percentage', async ({devToolsPage, inspectedPage}) => {
+    await navigateToPerformanceTab('selectorStats/slow-path-non-match', devToolsPage, inspectedPage);
+    await enableCSSSelectorStats(devToolsPage);
+    await startRecording(devToolsPage);
+
+    // reload the test page to trigger recalc styles events
+    await inspectedPage.bringToFront();
+    await inspectedPage.reload();
+
+    await devToolsPage.bringToFront();
+    await stopRecording(devToolsPage);
+
+    await navigateToSelectorStatsTab(devToolsPage);
+
+    // Sort table by selector
+    const selectorColumnHeader = await devToolsPage.waitFor('th.selector-column');
+    await selectorColumnHeader.click();
+    await devToolsPage.timeout(100);
+
+    const dataGrid = await getDataGrid(undefined /* root*/, devToolsPage);
+    const dataGridText = await getInnerTextOfDataGridCells(
+        dataGrid, 2 /* expectedNumberOfRows */, false /* matchExactNumberOfRows */, devToolsPage);
+
+    const dataGridColumns = await getDataGridColumnNames(undefined /* root*/, devToolsPage);
+    const selectorColumnIndex = dataGridColumns.indexOf('Selector');
+    const slowPathColumnIndex = dataGridColumns.indexOf('% of slow-path non-matches');
+
+    // get the slow path non match percentage for the selector '.parent .last-child'
+    // 1st row is '(Totals for all selectors)', 2nd row is the selector '.parent .last-child'
+    assert.strictEqual(dataGridText[1][selectorColumnIndex], '.parent .last-child');
+    assert.strictEqual(dataGridText[1][slowPathColumnIndex], '0.0');
+  });
+
   it('Includes a selector stats table in recalculate style events', async ({devToolsPage, inspectedPage}) => {
     await cssSelectorStatsRecording('empty', devToolsPage, inspectedPage);