Allow to filter sheet and rule benchmarks to only include some rules

src/css.ts

@@ -64,7 +64,7 @@ export async function extractSourceMap(
 
 export async function collectRules(
   styles: HTMLStyleElement[],
-  options: { skipPattern?: RegExp }
+  options: { skipPattern?: RegExp; includePattern?: RegExp }
 ): Promise<IRuleData[]> {
   let j = 0;
   const allRules: IRuleData[] = [];
@@ -88,6 +88,12 @@ export async function collectRules(
       ) {
         continue;
       }
+      if (
+        options.includePattern &&
+        rule.selectorText.match(options.includePattern) == null
+      ) {
+        continue;
+      }
       allRules.push({
         rule: rule,
         selector: rule.selectorText,

src/schema/benchmark-rule-group.json

@@ -30,6 +30,11 @@
       "type": "integer",
       "minimum": 0,
       "default": 5
+    },
+    "includePattern": {
+      "title": "Regular expression to filter rules to include",
+      "type": "string",
+      "default": ""
     }
   }
 }

src/schema/benchmark-rule-usage.json

@@ -17,6 +17,11 @@
       "title": "Regular expression to filter out classes used for rule discovery",
       "type": "string",
       "default": "(fa-|jp-icon|Icon|lm-Widget|lm-mod-|jp-mod-|p-mod-|p-Widget)"
+    },
+    "includePattern": {
+      "title": "Regular expression to filter rules to include",
+      "type": "string",
+      "default": ""
     }
   }
 }

src/schema/benchmark-rule.json

@@ -12,6 +12,11 @@
       "title": "Regular expression to filter out rules",
       "type": "string",
       "default": "(fa-|Icon|bp3|mod-hidden)"
+    },
+    "includePattern": {
+      "title": "Regular expression to filter rules to include",
+      "type": "string",
+      "default": ""
     }
   }
 }

src/schema/benchmark-sheet.json

@@ -0,0 +1,17 @@
+{
+  "title": "Style Sheet Benchmark Options",
+  "type": "object",
+  "properties": {
+    "repeats": {
+      "title": "Number of repeats",
+      "type": "integer",
+      "minimum": 1,
+      "default": 5
+    },
+    "includePattern": {
+      "title": "Regular expression to filter sheets to benchmark",
+      "type": "string",
+      "default": ""
+    }
+  }
+}

src/styleBenchmarks.tsx

@@ -14,23 +14,23 @@ import {
 import { renderBlockResult } from './ui';
 import { IBenchmark, IScenario } from './tokens';
 
-import benchmarkOptionsSchema from './schema/benchmark-base.json';
 import benchmarkRuleOptionsSchema from './schema/benchmark-rule.json';
 import benchmarkRuleGroupOptionsSchema from './schema/benchmark-rule-group.json';
 import benchmarkRuleUsageOptionsSchema from './schema/benchmark-rule-usage.json';
+import benchmarkSheetOptionsSchema from './schema/benchmark-sheet.json';
 
-import type { BenchmarkOptions } from './types';
 import type { StyleRuleBenchmarkOptions } from './types';
 import type { StyleRuleGroupBenchmarkOptions } from './types';
 import type { StyleRuleUsageOptions } from './types';
+import type { StyleSheetBenchmarkOptions } from './types';
 
-interface IStylesheetResult extends ITimeMeasurement {
+export interface IStylesheetResult extends ITimeMeasurement {
   content: string | null;
   source: string | null;
   stylesheetIndex: number;
 }
 
-interface IRuleResult extends ITimeMeasurement, IRuleDescription {
+export interface IRuleResult extends ITimeMeasurement, IRuleDescription {
   // no-op
 }
 
@@ -96,6 +96,9 @@ export const styleRuleUsageBenchmark: IBenchmark<ITimingOutcome<IRuleResult>> =
       const skipPattern = options.skipPattern
         ? new RegExp(options.skipPattern, 'g')
         : undefined;
+      const includePattern = options.includePattern
+        ? new RegExp(options.includePattern, 'g')
+        : undefined;
       const excludePattern = options.excludeMatchPattern
         ? new RegExp(options.excludeMatchPattern, 'g')
         : undefined;
@@ -151,7 +154,10 @@ export const styleRuleUsageBenchmark: IBenchmark<ITimingOutcome<IRuleResult>> =
       // Find relevant style rules.
       const results: IRuleResult[] = [];
       const styles = [...document.querySelectorAll('style')];
-      const allRules = await collectRules(styles, { skipPattern });
+      const allRules = await collectRules(styles, {
+        skipPattern,
+        includePattern
+      });
       const relevantRules = new Set<IRuleData>();
       for (const rule of allRules) {
         for (const className of relevantClassNames) {
@@ -281,10 +287,10 @@ export const styleSheetsBenchmark: IBenchmark<
 > = {
   id: 'style-sheet',
   name: 'Style Sheets',
-  configSchema: benchmarkOptionsSchema as JSONSchema7,
+  configSchema: benchmarkSheetOptionsSchema as JSONSchema7,
   run: async (
     scenario: IScenario,
-    options: BenchmarkOptions = {},
+    options: StyleSheetBenchmarkOptions = {},
     progress,
     stopSignal
   ): Promise<ITimingOutcome<IStylesheetResult>> => {
@@ -304,6 +310,9 @@ export const styleSheetsBenchmark: IBenchmark<
     const results: IStylesheetResult[] = [];
     let j = 0;
     let sheetIndex = 0;
+    const includePattern = options.includePattern
+      ? new RegExp(options.includePattern, 'g')
+      : undefined;
     const stylesWithSheets = styles.filter(style => style.sheet);
     if (stylesWithSheets.length !== styles.length) {
       console.log(
@@ -314,6 +323,8 @@ export const styleSheetsBenchmark: IBenchmark<
         'total)'
       );
     }
+    const total = stylesWithSheets.length;
+
     for (const style of styles) {
       if (stop) {
         break;
@@ -322,29 +333,40 @@ export const styleSheetsBenchmark: IBenchmark<
       const sheet = style.sheet;
       // Always increment the sheet index.
       sheetIndex++;
+
       if (!sheet) {
         continue;
       }
 
       // Only increment the loop control variable if style included in denominator.
-      progress?.emit({ percentage: (100 * j) / stylesWithSheets.length });
+      progress?.emit({ percentage: (100 * j) / total });
       j++;
 
+      // Extract CSS map
+      const cssMap = await extractSourceMap(style.textContent);
+      const source = cssMap != null ? cssMap.sources[0] : null;
+
+      if (includePattern) {
+        if (source === null) {
+          continue;
+        }
+        if (source.match(includePattern) == null) {
+          continue;
+        }
+      }
+
       // Benchmark the style.
       sheet.disabled = true;
       await layoutReady();
       const measurements = await benchmark(scenario, n, true);
       await layoutReady();
       sheet.disabled = false;
 
-      // Extract CSS map
-      const cssMap = await extractSourceMap(style.textContent);
-
       // Store result.
       results.push({
         ...measurements,
         content: style.textContent,
-        source: cssMap != null ? cssMap.sources[0] : null,
+        source: source,
         stylesheetIndex: sheetIndex
       });
     }
@@ -382,6 +404,9 @@ export const styleRuleBenchmark: IBenchmark<ITimingOutcome<IRuleResult>> = {
     const skipPattern = options.skipPattern
       ? new RegExp(options.skipPattern, 'g')
       : undefined;
+    const includePattern = options.includePattern
+      ? new RegExp(options.includePattern, 'g')
+      : undefined;
     const start = Date.now();
     if (scenario.setupSuite) {
       await scenario.setupSuite();
@@ -390,7 +415,7 @@ export const styleRuleBenchmark: IBenchmark<ITimingOutcome<IRuleResult>> = {
     const reference = await benchmark(scenario, n * 2, true);
     console.log('Reference for', scenario.name, 'is:', reference);
     const results: IRuleResult[] = [];
-    const rules = await collectRules(styles, { skipPattern });
+    const rules = await collectRules(styles, { skipPattern, includePattern });
     for (let i = 0; i < rules.length; i++) {
       if (stop) {
         break;
@@ -464,6 +489,9 @@ export const styleRuleGroupBenchmark: IBenchmark<
     const skipPattern = options.skipPattern
       ? new RegExp(options.skipPattern, 'g')
       : undefined;
+    const includePattern = options.includePattern
+      ? new RegExp(options.includePattern, 'g')
+      : undefined;
     const maxBlocks = options.maxBlocks || 5;
     const minBlocks = options.minBlocks || 2;
     const start = Date.now();
@@ -488,7 +516,10 @@ export const styleRuleGroupBenchmark: IBenchmark<
       if (randomization !== 0) {
         styles = shuffled(styles);
       }
-      const allRules = await collectRules(styles, { skipPattern });
+      const allRules = await collectRules(styles, {
+        skipPattern,
+        includePattern
+      });
       console.log(
         `Collected ${allRules.length} rules, randomization: ${randomization}`
       );

src/types/_benchmark-rule-group.ts

@@ -10,12 +10,14 @@ export type RegularExpressionToFilterOutRules = string;
 export type BlockSizeToStartWith = number;
 export type MaximalBlockSize = number;
 export type NumberOfSheetRandomizations = number;
+export type RegularExpressionToFilterRulesToInclude = string;
 
 export interface StyleRuleGroupBenchmarkOptions {
   repeats?: NumberOfRepeats;
   skipPattern?: RegularExpressionToFilterOutRules;
   minBlocks?: BlockSizeToStartWith;
   maxBlocks?: MaximalBlockSize;
   sheetRandomizations?: NumberOfSheetRandomizations;
+  includePattern?: RegularExpressionToFilterRulesToInclude;
   [k: string]: any;
 }

src/types/_benchmark-rule-usage.ts

@@ -8,10 +8,12 @@
 export type NumberOfRepeats = number;
 export type RegularExpressionToFilterOutRules = string;
 export type RegularExpressionToFilterOutClassesUsedForRuleDiscovery = string;
+export type RegularExpressionToFilterRulesToInclude = string;
 
 export interface StyleRuleUsageOptions {
   repeats?: NumberOfRepeats;
   skipPattern?: RegularExpressionToFilterOutRules;
   excludeMatchPattern?: RegularExpressionToFilterOutClassesUsedForRuleDiscovery;
+  includePattern?: RegularExpressionToFilterRulesToInclude;
   [k: string]: any;
 }

src/types/_benchmark-rule.ts

@@ -7,9 +7,11 @@
 
 export type NumberOfRepeats = number;
 export type RegularExpressionToFilterOutRules = string;
+export type RegularExpressionToFilterRulesToInclude = string;
 
 export interface StyleRuleBenchmarkOptions {
   repeats?: NumberOfRepeats;
   skipPattern?: RegularExpressionToFilterOutRules;
+  includePattern?: RegularExpressionToFilterRulesToInclude;
   [k: string]: any;
 }

src/types/_benchmark-sheet.ts

@@ -0,0 +1,15 @@
+/* tslint:disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export type NumberOfRepeats = number;
+export type RegularExpressionToFilterSheetsToBenchmark = string;
+
+export interface StyleSheetBenchmarkOptions {
+  repeats?: NumberOfRepeats;
+  includePattern?: RegularExpressionToFilterSheetsToBenchmark;
+  [k: string]: any;
+}

src/types/index.ts

@@ -2,6 +2,7 @@ export type { BenchmarkOptions } from './_benchmark-base';
 export type { StyleRuleBenchmarkOptions } from './_benchmark-rule';
 export type { StyleRuleGroupBenchmarkOptions } from './_benchmark-rule-group';
 export type { StyleRuleUsageOptions } from './_benchmark-rule-usage';
+export type { StyleSheetBenchmarkOptions } from './_benchmark-sheet';
 export type { ProfileBenchmarkOptions } from './_benchmark-profile';
 export type { ExecutionTimeBenchmarkOptions } from './_benchmark-execution';