chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/models/trace/Processor.ts

@@ -52,6 +52,7 @@ declare global {
 export interface ParseOptions {
   /**
    * If the trace was just recorded on the current page, rather than an imported file.
+   * TODO(paulirish): Maybe remove. This is currently unused by the Processor and Handlers
    * @default false
    */
   isFreshRecording?: boolean;
@@ -75,9 +76,9 @@ export class TraceProcessor extends EventTarget {
     return new TraceProcessor(Handlers.ModelHandlers, Types.Configuration.defaults());
   }
 
-  static getEnabledInsightRunners(parsedTrace: Handlers.Types.ParsedTrace): Partial<Insights.Types.InsightRunnersType> {
-    const enabledInsights = {} as Insights.Types.InsightRunnersType;
-    for (const [name, insight] of Object.entries(Insights.InsightRunners)) {
+  static getEnabledInsightRunners(parsedTrace: Handlers.Types.ParsedTrace): Partial<Insights.Types.InsightModelsType> {
+    const enabledInsights = {} as Insights.Types.InsightModelsType;
+    for (const [name, insight] of Object.entries(Insights.Models)) {
       const deps = insight.deps();
       if (deps.some(dep => !parsedTrace[dep])) {
         continue;
@@ -170,7 +171,7 @@ export class TraceProcessor extends EventTarget {
     }
     try {
       this.#status = Status.PARSING;
-      await this.#computeParsedTrace(traceEvents, Boolean(options.isFreshRecording));
+      await this.#computeParsedTrace(traceEvents);
       if (this.#data && !options.isCPUProfile) {  // We do not calculate insights for CPU Profiles.
         this.#computeInsights(this.#data, traceEvents);
       }
@@ -184,7 +185,7 @@ export class TraceProcessor extends EventTarget {
   /**
    * Run all the handlers and set the result to `#data`.
    */
-  async #computeParsedTrace(traceEvents: readonly Types.Events.Event[], freshRecording: boolean): Promise<void> {
+  async #computeParsedTrace(traceEvents: readonly Types.Events.Event[]): Promise<void> {
     /**
      * We want to yield regularly to maintain responsiveness. If we yield too often, we're wasting idle time.
      * We could do this by checking `performance.now()` regularly, but it's an expensive call in such a hot loop.
@@ -202,11 +203,6 @@ export class TraceProcessor extends EventTarget {
       handler.reset();
     }
 
-    // Initialize.
-    for (const handler of sortedHandlers) {
-      handler.initialize?.(freshRecording);
-    }
-
     // Handle each event.
     for (let i = 0; i < traceEvents.length; ++i) {
       // Every so often we take a break just to render.
@@ -319,6 +315,10 @@ export class TraceProcessor extends EventTarget {
     const processedNavigation = LanternComputationData.createProcessedNavigation(parsedTrace, frameId, navigationId);
 
     const networkAnalysis = Lantern.Core.NetworkAnalyzer.analyze(requests);
+    if (!networkAnalysis) {
+      return;
+    }
+
     const simulator: Lantern.Simulation.Simulator<Types.Events.SyntheticNetworkRequest> =
         Lantern.Simulation.Simulator.createSimulator({
           // TODO(crbug.com/372674229): if devtools throttling was on, does this network analysis capture
@@ -344,8 +344,8 @@ export class TraceProcessor extends EventTarget {
 
   #computeInsightSets(
       insights: Insights.Types.TraceInsightSets, parsedTrace: Handlers.Types.ParsedTrace,
-      insightRunners: Partial<typeof Insights.InsightRunners>, context: Insights.Types.InsightSetContext): void {
-    const data = {} as Insights.Types.InsightSets['data'];
+      insightRunners: Partial<typeof Insights.Models>, context: Insights.Types.InsightSetContext): void {
+    const model = {} as Insights.Types.InsightSet['model'];
 
     for (const [name, insight] of Object.entries(insightRunners)) {
       let insightResult;
@@ -354,7 +354,7 @@ export class TraceProcessor extends EventTarget {
       } catch (err) {
         insightResult = err;
       }
-      Object.assign(data, {[name]: insightResult});
+      Object.assign(model, {[name]: insightResult});
     }
 
     let id, urlString, navigation;
@@ -382,7 +382,7 @@ export class TraceProcessor extends EventTarget {
       navigation,
       frameId: context.frameId,
       bounds: context.bounds,
-      data,
+      model,
     };
     insights.set(insightSets.id, insightSets);
   }
@@ -451,7 +451,7 @@ export class TraceProcessor extends EventTarget {
         } else if (!expectedErrors.some(err => e.message === err)) {
           // To reduce noise from tests, only print errors that are not expected to occur because a trace is
           // too old (for which there is no single check).
-          console.error(e.message);
+          console.error(e);
         }
       }
 

package/front_end/models/trace/README.md

@@ -21,7 +21,6 @@ This folder contains the new trace engine that was first implemented for the Per
 │NetworkRequestHandler│     │...many more handlers │
 │                     │     │                      │
 │     reset()         │     │                      │
-│     initialize()    │     │                      │
 │                     │     │                      │
 │     handleEvent()   │     │                      │
 │                     │     │                      │

package/front_end/models/trace/extras/ThirdParties.test.ts

@@ -0,0 +1,117 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
+import * as Trace from '../trace.js';
+
+describeWithEnvironment('ThirdParties', function() {
+  describe('Entities', function() {
+    it('correctly makes up entities', async function() {
+      const expectedEntities = new Map<string, string>([
+        ['http://localhost:8080/', 'localhost'],
+        ['https://fonts.googleapis.com/css2?family=Orelega+One&display=swap', 'googleapis.com'],
+        ['https://emp.bbci.co.uk/emp/bump-4/bump-4.js', 'bbci.co.uk'],
+        ['http://localhost:8080/blocking.js', 'localhost'],
+        ['https://fonts.gstatic.com/s/orelegaone/v1/3qTpojOggD2XtAdFb-QXZFt93kY.woff2', 'gstatic.com'],
+        ['chrome-extension://chromeextension/something/exciting.js', 'chromeextension'],
+      ]);
+
+      for (const [url, expectedEntity] of expectedEntities.entries()) {
+        const gotEntity =
+            Trace.Extras.ThirdParties.makeUpEntity(new Map<string, Trace.Extras.ThirdParties.Entity>(), url)?.name ??
+            '';
+        assert.deepEqual(gotEntity, expectedEntity);
+      }
+    });
+    it('coreectly makes up chrome extension entity', async function() {
+      const url = 'chrome-extension://chromeextension/something/exciting.js';
+      const gotEntity =
+          Trace.Extras.ThirdParties.makeUpEntity(new Map<string, Trace.Extras.ThirdParties.Entity>(), url);
+      assert.exists(gotEntity);
+
+      assert.deepEqual(gotEntity.name, 'chromeextension');
+      assert.deepEqual(gotEntity.category, 'Chrome Extension');
+      assert.deepEqual(gotEntity.homepage, 'https://chromewebstore.google.com/detail/chromeextension');
+    });
+    it('gets correct entitiesByRequest', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+      const reqs = parsedTrace.NetworkRequests.byTime;
+
+      const got = Trace.Extras.ThirdParties.getEntitiesByRequest(reqs);
+      const gotEntityByRequest = [...got.entityByRequest.entries()].map(([req, entity]) => {
+        return [req.args.data.url, entity.name];
+      });
+
+      assert.deepEqual(gotEntityByRequest, [
+        ['http://localhost:8080/', 'localhost'],
+        ['https://fonts.googleapis.com/css2?family=Orelega+One&display=swap', 'Google Fonts'],
+        ['http://localhost:8080/styles.css', 'localhost'],
+        ['http://localhost:8080/blocking.js', 'localhost'],
+        ['http://localhost:8080/module.js', 'localhost'],
+        ['https://fonts.gstatic.com/s/orelegaone/v1/3qTpojOggD2XtAdFb-QXZFt93kY.woff2', 'Google Fonts'],
+      ]);
+    });
+  });
+  describe('byTraceBounds', function() {
+    it('full trace bounds', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+      const reqs = parsedTrace.NetworkRequests.byTime;
+
+      const {entityByRequest} = Trace.Extras.ThirdParties.getSummariesAndEntitiesForTraceBounds(
+          parsedTrace, parsedTrace.Meta.traceBounds, reqs);
+
+      const gotEntityByRequest = [...entityByRequest.entries()].map(([req, entity]) => {
+        return [req.args.data.url, entity.name];
+      });
+
+      assert.deepEqual(gotEntityByRequest, [
+        ['http://localhost:8080/', 'localhost'],
+        ['https://fonts.googleapis.com/css2?family=Orelega+One&display=swap', 'Google Fonts'],
+        ['http://localhost:8080/styles.css', 'localhost'],
+        ['http://localhost:8080/blocking.js', 'localhost'],
+        ['http://localhost:8080/module.js', 'localhost'],
+        ['https://fonts.gstatic.com/s/orelegaone/v1/3qTpojOggD2XtAdFb-QXZFt93kY.woff2', 'Google Fonts'],
+      ]);
+    });
+    it('partial trace bounds', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+      const reqs = parsedTrace.NetworkRequests.byTime;
+
+      // Font requests of load-simple.json.gz begin & end before/after this bounds.
+      const min = Trace.Types.Timing.MicroSeconds(1634222300000);
+      const max = Trace.Types.Timing.MicroSeconds(1634222320000);
+      const middle = {min, max, range: Trace.Types.Timing.MicroSeconds(max - min)};
+
+      const {entityByRequest} =
+          Trace.Extras.ThirdParties.getSummariesAndEntitiesForTraceBounds(parsedTrace, middle, reqs);
+      const gotEntityByRequest = [...entityByRequest.entries()].map(([req, entity]) => {
+        return [req.args.data.url, entity.name];
+      });
+
+      // Only these localhost requests overlap traceBounds.
+      assert.deepEqual(gotEntityByRequest, [
+        ['http://localhost:8080/', 'localhost'],
+        ['http://localhost:8080/styles.css', 'localhost'],
+        ['http://localhost:8080/blocking.js', 'localhost'],
+        ['http://localhost:8080/module.js', 'localhost'],
+      ]);
+    });
+    it('no requests within trace bounds', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+      const reqs = parsedTrace.NetworkRequests.byTime;
+
+      const min = Trace.Types.Timing.MicroSeconds(1634230000000);
+      const max = Trace.Types.Timing.MicroSeconds(1634231000000);
+      const middle = {min, max, range: Trace.Types.Timing.MicroSeconds(max - min)};
+
+      const {entityByRequest} =
+          Trace.Extras.ThirdParties.getSummariesAndEntitiesForTraceBounds(parsedTrace, middle, reqs);
+      const gotEntityByRequest = [...entityByRequest.entries()].map(([req, entity]) => {
+        return [req.args.data.url, entity.name];
+      });
+      assert.deepEqual(gotEntityByRequest, []);
+    });
+  });
+});

package/front_end/models/trace/{insights/ThirdPartyWeb.ts → extras/ThirdParties.ts}

@@ -3,16 +3,11 @@
 // found in the LICENSE file.
 
 import * as ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
-import * as Extras from '../extras/extras.js';
 import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
-
-export function deps(): ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'] {
-  return ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'];
-}
+import * as URLForEntry from './URLForEntry.js';
 
 export type Entity = typeof ThirdPartyWeb.ThirdPartyWeb.entities[number];
 
@@ -21,14 +16,11 @@ export interface Summary {
   mainThreadTime: Types.Timing.MicroSeconds;
 }
 
-export type ThirdPartyWebInsightResult = InsightResult<{
-  entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Entity>,
-  requestsByEntity: Map<Entity, Types.Events.SyntheticNetworkRequest[]>,
-  summaryByRequest: Map<Types.Events.SyntheticNetworkRequest, Summary>,
-  summaryByEntity: Map<Entity, Summary>,
-  /** The entity for this navigation's URL. Any other entity is from a third party. */
-  firstPartyEntity?: Entity,
-}>;
+export interface SummaryMaps {
+  byEntity: Map<Entity, Summary>;
+  byRequest: Map<Types.Events.SyntheticNetworkRequest, Summary>;
+  requestsByEntity: Map<Entity, Types.Events.SyntheticNetworkRequest[]>;
+}
 
 /**
  * Returns the origin portion of a Chrome extension URL.
@@ -64,7 +56,7 @@ function makeUpChromeExtensionEntity(entityCache: Map<string, Entity>, url: stri
   return chromeExtensionEntity;
 }
 
-function makeUpEntity(entityCache: Map<string, Entity>, url: string): Entity|undefined {
+export function makeUpEntity(entityCache: Map<string, Entity>, url: string): Entity|undefined {
   if (url.startsWith('chrome-extension:')) {
     return makeUpChromeExtensionEntity(entityCache, url);
   }
@@ -101,13 +93,8 @@ function makeUpEntity(entityCache: Map<string, Entity>, url: string): Entity|und
   return unrecognizedEntity;
 }
 
-interface SummaryMaps {
-  byEntity: Map<Entity, Summary>;
-  byRequest: Map<Types.Events.SyntheticNetworkRequest, Summary>;
-  requestsByEntity: Map<Entity, Types.Events.SyntheticNetworkRequest[]>;
-}
-
-function getSelfTimeByUrl(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): Map<string, number> {
+function getSelfTimeByUrl(
+    parsedTrace: Handlers.Types.ParsedTrace, bounds: Types.Timing.TraceWindowMicroSeconds): Map<string, number> {
   const selfTimeByUrl = new Map<string, number>();
 
   for (const process of parsedTrace.Renderer.processes.values()) {
@@ -122,7 +109,7 @@ function getSelfTimeByUrl(parsedTrace: RequiredData<typeof deps>, context: Insig
         }
 
         for (const event of thread.entries) {
-          if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {
+          if (!Helpers.Timing.eventIsInBounds(event, bounds)) {
             continue;
           }
 
@@ -131,7 +118,7 @@ function getSelfTimeByUrl(parsedTrace: RequiredData<typeof deps>, context: Insig
             continue;
           }
 
-          const url = Extras.URLForEntry.getNonResolved(parsedTrace as Handlers.Types.ParsedTrace, event);
+          const url = URLForEntry.getNonResolved(parsedTrace as Handlers.Types.ParsedTrace, event);
           if (!url) {
             continue;
           }
@@ -145,7 +132,21 @@ function getSelfTimeByUrl(parsedTrace: RequiredData<typeof deps>, context: Insig
   return selfTimeByUrl;
 }
 
-function getSummaries(
+export function getEntitiesByRequest(requests: Types.Events.SyntheticNetworkRequest[]):
+    {entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Entity>, madeUpEntityCache: Map<string, Entity>} {
+  const entityByRequest = new Map<Types.Events.SyntheticNetworkRequest, Entity>();
+  const madeUpEntityCache = new Map<string, Entity>();
+  for (const request of requests) {
+    const url = request.args.data.url;
+    const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ?? makeUpEntity(madeUpEntityCache, url);
+    if (entity) {
+      entityByRequest.set(request, entity);
+    }
+  }
+  return {entityByRequest, madeUpEntityCache};
+}
+
+function getSummaryMap(
     requests: Types.Events.SyntheticNetworkRequest[],
     entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Entity>,
     selfTimeByUrl: Map<string, number>): SummaryMaps {
@@ -184,56 +185,23 @@ function getSummaries(
   return {byEntity, byRequest, requestsByEntity};
 }
 
-function getRelatedEvents(summaries: SummaryMaps, firstPartyEntity: Entity|undefined): Types.Events.Event[] {
-  const events = [];
-
-  for (const [entity, requests] of summaries.requestsByEntity.entries()) {
-    if (entity !== firstPartyEntity) {
-      events.push(...requests);
-    }
-  }
-
-  return events;
-}
-
-export function generateInsight(
-    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ThirdPartyWebInsightResult {
-  const networkRequests = parsedTrace.NetworkRequests.byTime.filter(event => {
-    if (!context.navigation) {
-      return false;
-    }
-
-    if (event.args.data.frame !== context.frameId) {
-      return false;
-    }
-
-    return Helpers.Timing.eventIsInBounds(event, context.bounds);
+export function getSummariesAndEntitiesForTraceBounds(
+    parsedTrace: Handlers.Types.ParsedTrace, traceBounds: Types.Timing.TraceWindowMicroSeconds,
+    networkRequests: Types.Events.SyntheticNetworkRequest[]): {
+  summaries: SummaryMaps,
+  entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Entity>,
+  madeUpEntityCache: Map<string, Entity>,
+} {
+  // Ensure we only handle requests that are within the given traceBounds.
+  const reqs = networkRequests.filter(event => {
+    return Helpers.Timing.eventIsInBounds(event, traceBounds);
   });
 
-  const entityByRequest = new Map<Types.Events.SyntheticNetworkRequest, Entity>();
-  const madeUpEntityCache = new Map<string, Entity>();
-  for (const request of networkRequests) {
-    const url = request.args.data.url;
-    const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ?? makeUpEntity(madeUpEntityCache, url);
-    if (entity) {
-      entityByRequest.set(request, entity);
-    }
-  }
+  const {entityByRequest, madeUpEntityCache} = getEntitiesByRequest(reqs);
 
-  const selfTimeByUrl = getSelfTimeByUrl(parsedTrace, context);
+  const selfTimeByUrl = getSelfTimeByUrl(parsedTrace, traceBounds);
   // TODO(crbug.com/352244718): re-work to still collect main thread activity if no request is present
-  const summaries = getSummaries(networkRequests, entityByRequest, selfTimeByUrl);
-
-  const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
-  const firstPartyEntity =
-      ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) || makeUpEntity(madeUpEntityCache, firstPartyUrl);
-
-  return {
-    relatedEvents: getRelatedEvents(summaries, firstPartyEntity),
-    entityByRequest,
-    requestsByEntity: summaries.requestsByEntity,
-    summaryByRequest: summaries.byRequest,
-    summaryByEntity: summaries.byEntity,
-    firstPartyEntity,
-  };
+  const summaries = getSummaryMap(reqs, entityByRequest, selfTimeByUrl);
+
+  return {summaries, entityByRequest, madeUpEntityCache};
 }

package/front_end/models/{timeline_model → trace/extras}/TimelineJSProfile.ts

@@ -4,19 +4,12 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import * as i18n from '../../core/i18n/i18n.js';
-import type * as Protocol from '../../generated/protocol.js';
-import * as Trace from '../trace/trace.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import * as Types from '../types/types.js';
 
-const UIStrings = {
-  /**
-   *@description Text for the name of a thread of the page
-   *@example {1} PH1
-   */
-  threadS: 'Thread {PH1}',
-};
-const str_ = i18n.i18n.registerUIStrings('models/timeline_model/TimelineJSProfile.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+// TODO(paulirish): Delete this file.
+//   - Move isNativeRuntimeFrame and nativeGroup to TraceEvents.d.ts (or TraceTree)
+//   - Move createFakeTraceFromCpuProfile to TimelineLoader
 export class TimelineJSProfileProcessor {
   static isNativeRuntimeFrame(frame: Protocol.Runtime.CallFrame): boolean {
     return frame.url === 'native V8Runtime';
@@ -32,14 +25,13 @@ export class TimelineJSProfileProcessor {
     return null;
   }
 
-  static createFakeTraceFromCpuProfile(profile: Protocol.Profiler.Profile, tid: Trace.Types.Events.ThreadID):
-      Trace.Types.Events.Event[] {
-    const events: Trace.Types.Events.Event[] = [];
+  static createFakeTraceFromCpuProfile(profile: Protocol.Profiler.Profile, tid: Types.Events.ThreadID):
+      Types.Events.Event[] {
+    const events: Types.Events.Event[] = [];
 
-    const threadName = i18nString(UIStrings.threadS, {PH1: tid});
-    appendEvent('TracingStartedInPage', {data: {sessionId: '1'}}, 0, 0, Trace.Types.Events.Phase.METADATA);
-    appendEvent(
-        Trace.Types.Events.Name.THREAD_NAME, {name: threadName}, 0, 0, Trace.Types.Events.Phase.METADATA, '__metadata');
+    const threadName = `Thread ${tid}`;
+    appendEvent('TracingStartedInPage', {data: {sessionId: '1'}}, 0, 0, Types.Events.Phase.METADATA);
+    appendEvent(Types.Events.Name.THREAD_NAME, {name: threadName}, 0, 0, Types.Events.Phase.METADATA, '__metadata');
     if (!profile) {
       return events;
     }
@@ -49,28 +41,26 @@ export class TimelineJSProfileProcessor {
     // 'JSRoot' doesn't exist in the new engine and is not the name of an actual trace event, but changing it might break other trace processing tools that rely on this, so we stick with this name.
     // TODO(crbug.com/341234884): consider removing this or clarify why it's required.
     appendEvent(
-        'JSRoot', {}, profile.startTime, profile.endTime - profile.startTime, Trace.Types.Events.Phase.COMPLETE,
-        'toplevel');
+        'JSRoot', {}, profile.startTime, profile.endTime - profile.startTime, Types.Events.Phase.COMPLETE, 'toplevel');
 
     // TODO: create a `Profile` event instead, as `cpuProfile` is legacy
-    appendEvent('CpuProfile', {data: {cpuProfile: profile}}, profile.endTime, 0, Trace.Types.Events.Phase.COMPLETE);
+    appendEvent('CpuProfile', {data: {cpuProfile: profile}}, profile.endTime, 0, Types.Events.Phase.COMPLETE);
     return events;
 
     function appendEvent(
-        name: string, args: any, ts: number, dur?: number, ph?: Trace.Types.Events.Phase,
-        cat?: string): Trace.Types.Events.Event {
-      const event: Trace.Types.Events.Event = {
+        name: string, args: any, ts: number, dur?: number, ph?: Types.Events.Phase, cat?: string): Types.Events.Event {
+      const event: Types.Events.Event = {
         cat: cat || 'disabled-by-default-devtools.timeline',
         name,
-        ph: ph || Trace.Types.Events.Phase.COMPLETE,
-        pid: Trace.Types.Events.ProcessID(1),
+        ph: ph || Types.Events.Phase.COMPLETE,
+        pid: Types.Events.ProcessID(1),
         tid,
-        ts: Trace.Types.Timing.MicroSeconds(ts),
+        ts: Types.Timing.MicroSeconds(ts),
         args,
       };
 
       if (dur) {
-        event.dur = Trace.Types.Timing.MicroSeconds(dur);
+        event.dur = Types.Timing.MicroSeconds(dur);
       }
       events.push(event);
       return event;

package/front_end/models/{timeline_model/TimelineModelFilter.test.ts → trace/extras/TraceFilter.test.ts}

@@ -2,19 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
-import {TraceLoader} from '../../testing/TraceLoader.js';
-import * as TimelineModel from '../timeline_model/timeline_model.js';
-import * as Trace from '../trace/trace.js';
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
+import * as Trace from '../trace.js';
 
-describeWithEnvironment('TimelineModelFilter', () => {
-  describe('TimelineVisibleEventsFilter', () => {
+import * as TraceFilter from './TraceFilter.js';
+
+describeWithEnvironment('TraceFilter', () => {
+  describe('VisibleEventsFilter', () => {
     it('accepts events that are set in the constructor and rejects other events', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'user-timings.json.gz');
       const userTimingEvent = (parsedTrace.UserTimings.performanceMeasures).at(0);
       assert.isOk(userTimingEvent);
 
-      const visibleFilter = new TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter([
+      const visibleFilter = new TraceFilter.VisibleEventsFilter([
         // Set an random record type to be visible - the exact type is not important for the test.
         Trace.Types.Events.Name.USER_TIMING,
       ]);
@@ -28,8 +29,7 @@ describeWithEnvironment('TimelineModelFilter', () => {
         const consoleTimingEvent = (parsedTrace.UserTimings.consoleTimings).at(0);
         assert.isOk(consoleTimingEvent);
         assert.strictEqual(
-            TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter.eventType(consoleTimingEvent),
-            Trace.Types.Events.Name.CONSOLE_TIME);
+            TraceFilter.VisibleEventsFilter.eventType(consoleTimingEvent), Trace.Types.Events.Name.CONSOLE_TIME);
       });
 
       it('returns UserTiming if the event has the blink.user_timing category', async function() {
@@ -37,8 +37,7 @@ describeWithEnvironment('TimelineModelFilter', () => {
         const userTimingEvent = (parsedTrace.UserTimings.performanceMeasures).at(0);
         assert.isOk(userTimingEvent);
         assert.strictEqual(
-            TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter.eventType(userTimingEvent),
-            Trace.Types.Events.Name.USER_TIMING);
+            TraceFilter.VisibleEventsFilter.eventType(userTimingEvent), Trace.Types.Events.Name.USER_TIMING);
       });
 
       it('returns the event name if the event is any other category', async function() {
@@ -46,8 +45,7 @@ describeWithEnvironment('TimelineModelFilter', () => {
         const layoutShiftEvent = parsedTrace.LayoutShifts.clusters.at(0)?.events.at(0);
         assert.isOk(layoutShiftEvent);
         assert.strictEqual(
-            TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter.eventType(layoutShiftEvent),
-            Trace.Types.Events.Name.LAYOUT_SHIFT);
+            TraceFilter.VisibleEventsFilter.eventType(layoutShiftEvent), Trace.Types.Events.Name.LAYOUT_SHIFT);
       });
     });
   });
@@ -58,7 +56,7 @@ describeWithEnvironment('TimelineModelFilter', () => {
       const userTimingEvent = (parsedTrace.UserTimings.performanceMeasures).at(0);
       assert.isOk(userTimingEvent);
 
-      const invisibleFilter = new TimelineModel.TimelineModelFilter.TimelineInvisibleEventsFilter([
+      const invisibleFilter = new TraceFilter.InvisibleEventsFilter([
         Trace.Types.Events.Name.USER_TIMING,
 
       ]);
@@ -70,7 +68,7 @@ describeWithEnvironment('TimelineModelFilter', () => {
       const layoutShiftEvent = parsedTrace.LayoutShifts.clusters.at(0)?.events.at(0);
       assert.isOk(layoutShiftEvent);
 
-      const invisibleFilter = new TimelineModel.TimelineModelFilter.TimelineInvisibleEventsFilter([
+      const invisibleFilter = new TraceFilter.InvisibleEventsFilter([
         Trace.Types.Events.Name.USER_TIMING,
 
       ]);
@@ -84,7 +82,7 @@ describeWithEnvironment('TimelineModelFilter', () => {
       const userTimingEvent = (parsedTrace.UserTimings.performanceMeasures).at(0);
       assert.isOk(userTimingEvent);
 
-      const filter = new TimelineModel.TimelineModelFilter.ExclusiveNameFilter([
+      const filter = new TraceFilter.ExclusiveNameFilter([
         Trace.Types.Events.Name.LAYOUT_SHIFT,
       ]);
       assert.isTrue(filter.accept(userTimingEvent));
@@ -95,7 +93,7 @@ describeWithEnvironment('TimelineModelFilter', () => {
       const layoutShiftEvent = parsedTrace.LayoutShifts.clusters.at(0)?.events.at(0);
       assert.isOk(layoutShiftEvent);
 
-      const filter = new TimelineModel.TimelineModelFilter.ExclusiveNameFilter([
+      const filter = new TraceFilter.ExclusiveNameFilter([
         Trace.Types.Events.Name.LAYOUT_SHIFT,
       ]);
       assert.isFalse(filter.accept(layoutShiftEvent));

package/front_end/models/trace/extras/TraceFilter.ts

@@ -0,0 +1,62 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Handlers from '../handlers/handlers.js';
+import * as Types from '../types/types.js';
+
+export abstract class TraceFilter {
+  abstract accept(_event: Types.Events.Event, parsedTrace?: Handlers.Types.ParsedTrace): boolean;
+}
+
+export class VisibleEventsFilter extends TraceFilter {
+  private readonly visibleTypes: Set<string>;
+  constructor(visibleTypes: string[]) {
+    super();
+    this.visibleTypes = new Set(visibleTypes);
+  }
+
+  accept(event: Types.Events.Event): boolean {
+    if (Types.Extensions.isSyntheticExtensionEntry(event)) {
+      return true;
+    }
+    return this.visibleTypes.has(VisibleEventsFilter.eventType(event));
+  }
+
+  static eventType(event: Types.Events.Event): Types.Events.Name {
+    // Any blink.console category events are treated as ConsoleTime events
+    if (event.cat.includes('blink.console')) {
+      return Types.Events.Name.CONSOLE_TIME;
+    }
+    // Any blink.user_timing egory events are treated as UserTiming events
+    if (event.cat.includes('blink.user_timing')) {
+      return Types.Events.Name.USER_TIMING;
+    }
+    return event.name as Types.Events.Name;
+  }
+}
+
+export class InvisibleEventsFilter extends TraceFilter {
+  #invisibleTypes: Set<Types.Events.Name>;
+
+  constructor(invisibleTypes: Types.Events.Name[]) {
+    super();
+    this.#invisibleTypes = new Set(invisibleTypes);
+  }
+
+  accept(event: Types.Events.Event): boolean {
+    return !this.#invisibleTypes.has(VisibleEventsFilter.eventType(event));
+  }
+}
+
+export class ExclusiveNameFilter extends TraceFilter {
+  #excludeNames: Set<Types.Events.Name>;
+  constructor(excludeNames: Types.Events.Name[]) {
+    super();
+    this.#excludeNames = new Set(excludeNames);
+  }
+
+  accept(event: Types.Events.Event): boolean {
+    return !this.#excludeNames.has(event.name as Types.Events.Name);
+  }
+}