chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/models/javascript_metadata/{NativeFunctions.js → NativeFunctions.ts}

@@ -5,7 +5,13 @@
 
 // clang-format off
 
-export const NativeFunctions = [
+export interface NativeFunctionValue {
+  name: string;
+  signatures: string[][];
+  receivers?: string[];
+}
+
+export const NativeFunctions: readonly NativeFunctionValue[] = [
   {
     name: "eval",
     signatures: [["x"]]
@@ -6656,7 +6662,7 @@ export const NativeFunctions = [
   },
   {
     name: "WebSocket",
-    signatures: [["url","?protocolsOrOptions"]]
+    signatures: [["url","?protocols"]]
   },
   {
     name: "WebSocketError",
@@ -7000,7 +7006,7 @@ export const NativeFunctions = [
   },
   {
     name: "install",
-    signatures: [["?install_url","?manifest_id"],["params"]],
+    signatures: [["?params"]],
     receivers: ["Navigator"]
   },
   {
@@ -7288,7 +7294,7 @@ export const NativeFunctions = [
   },
   {
     name: "RTCEncodedVideoFrame",
-    signatures: [["originalFrame","?options"]]
+    signatures: [["init"],["originalFrame","?options"]]
   },
   {
     name: "RTCError",
@@ -8564,7 +8570,21 @@ export const NativeFunctions = [
   },
   {
     name: "getElementTransform",
-    signatures: [["element","draw_transform"]]
+    signatures: [["element","draw_transform"]],
+    receivers: ["OffscreenCanvas"]
+  },
+  {
+    name: "getElementTransform",
+    signatures: [["element","?draw_transform"]],
+    receivers: ["HTMLCanvasElement"]
+  },
+  {
+    name: "updateElementGeometry",
+    signatures: [["element","?options"]]
+  },
+  {
+    name: "clearElementGeometry",
+    signatures: [["element"]]
   },
   {
     name: "NavigateEvent",
@@ -9126,10 +9146,6 @@ export const NativeFunctions = [
     name: "prependHTMLUnsafe",
     signatures: [["html","?options"]]
   },
-  {
-    name: "setCanvasTransform",
-    signatures: [["?matrix"]]
-  },
   {
     name: "matchContainer",
     signatures: [["query"]]

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -371,12 +371,18 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
           // Use our own "interactionId" rather than the Chrome/web-vitals
           // provided one, so we can group events with same start time
           // (e.g. `pointerup` and `click` are one interaction log entry)
-          interactionId: `interaction-${webVitalsEvent.entryGroupId}-${webVitalsEvent.startTime}`,
+          interactionId: webVitalsEvent.entryGroupId !== undefined && webVitalsEvent.startTime !== undefined ?
+              `interaction-${webVitalsEvent.entryGroupId}-${webVitalsEvent.startTime}` :
+              undefined,
         };
         this.#inpValue = inpEvent;
         break;
       }
       case 'InteractionEntry': {
+        if (webVitalsEvent.entryGroupId === undefined || webVitalsEvent.startTime === undefined) {
+          break;
+        }
+
         const groupInteractions =
             Platform.MapUtilities.getWithDefault(this.#interactionsByGroupId, webVitalsEvent.entryGroupId, () => []);
 
@@ -409,7 +415,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         // We can get multiple instances of the first input interaction since web-vitals.js installs
         // an extra listener for events of type `first-input`. This is a simple way to de-dupe those
         // events without adding complexity to the injected code.
-        if (!interaction.eventNames.includes(webVitalsEvent.eventName)) {
+        if (webVitalsEvent.eventName && !interaction.eventNames.includes(webVitalsEvent.eventName)) {
           interaction.eventNames.push(webVitalsEvent.eventName);
         }
 
@@ -720,7 +726,7 @@ export interface LcpValue extends MetricValue {
 
 export interface InpValue extends MetricValue {
   subparts: Spec.InpSubparts;
-  interactionId: InteractionId;
+  interactionId?: InteractionId;
 }
 
 export interface ClsValue extends MetricValue {

package/front_end/models/live-metrics/web-vitals-injected/spec/spec.ts

@@ -50,8 +50,8 @@ export interface InpChangeEvent {
   value: Trace.Types.Timing.Milli;
   interactionType: WebVitals.INPAttribution['interactionType'];
   subparts: InpSubparts;
-  startTime: number;
-  entryGroupId: InteractionEntryGroupId;
+  startTime?: number;
+  entryGroupId?: InteractionEntryGroupId;
 }
 
 // These object keys will be user visible
@@ -96,10 +96,10 @@ export interface PerformanceLongAnimationFrameTimingJSON {
 export interface InteractionEntryEvent {
   name: 'InteractionEntry';
   interactionType?: WebVitals.INPAttribution['interactionType'];
-  eventName: string;
-  entryGroupId: InteractionEntryGroupId;
-  startTime: number;
-  navigationId: number;
+  eventName?: string;
+  entryGroupId?: InteractionEntryGroupId;
+  startTime?: number;
+  navigationId?: number;
   nextPaintTime?: number;
   duration: Trace.Types.Timing.Milli;
   subparts: InpSubparts;
@@ -122,5 +122,57 @@ export interface ResetEvent {
   navigationType?: NavigationType;
 }
 
+export function limitScripts(loafs: PerformanceLongAnimationFrameTimingJSON[]):
+    PerformanceLongAnimationFrameTimingJSON[] {
+  return loafs.map(loaf => {
+    loaf.scripts = loaf.scripts.slice()
+                       .sort((a, b) => b.duration - a.duration)
+                       .slice(0, SCRIPTS_PER_LOAF_LIMIT)
+                       .sort((a, b) => a.startTime - b.startTime);
+    return loaf;
+  });
+}
+
+export function createInteractionEntryEvent(interaction: WebVitals.INPMetricWithAttribution): InteractionEntryEvent {
+  const event: InteractionEntryEvent = {
+    name: 'InteractionEntry',
+    duration: interaction.value as Trace.Types.Timing.Milli,
+    subparts: {
+      inputDelay: interaction.attribution.inputDelay as Trace.Types.Timing.Milli,
+      processingDuration: interaction.attribution.processingDuration as Trace.Types.Timing.Milli,
+      presentationDelay: interaction.attribution.presentationDelay as Trace.Types.Timing.Milli,
+    },
+    startTime: interaction.entries?.[0]?.startTime,
+    navigationId: interaction.navigationId,
+    entryGroupId: interaction.entries?.[0]?.interactionId as InteractionEntryGroupId | undefined,
+    nextPaintTime: interaction.attribution.nextPaintTime,
+    interactionType: interaction.attribution.interactionType,
+    eventName: interaction.entries?.[0]?.name,
+    // To limit the amount of events, just get the last 5 LoAFs
+    longAnimationFrameEntries: limitScripts(
+        interaction.attribution.longAnimationFrameEntries?.slice(-LOAF_LIMIT).map(loaf => loaf.toJSON()) ?? []),
+  };
+  const target = interaction.attribution.interactionTarget;
+  if (target) {
+    event.nodeIndex = Number(target);
+  }
+  return event;
+}
+
+export function createInpChangeEvent(metric: WebVitals.INPMetricWithAttribution): InpChangeEvent {
+  return {
+    name: 'INP',
+    value: metric.value as Trace.Types.Timing.Milli,
+    subparts: {
+      inputDelay: metric.attribution.inputDelay as Trace.Types.Timing.Milli,
+      processingDuration: metric.attribution.processingDuration as Trace.Types.Timing.Milli,
+      presentationDelay: metric.attribution.presentationDelay as Trace.Types.Timing.Milli,
+    },
+    startTime: metric.entries?.[0]?.startTime,
+    entryGroupId: metric.entries?.[0]?.interactionId as InteractionEntryGroupId | undefined,
+    interactionType: metric.attribution.interactionType,
+  };
+}
+
 export type WebVitalsEvent =
     LcpChangeEvent|ClsChangeEvent|InpChangeEvent|InteractionEntryEvent|LayoutShiftEvent|ResetEvent;

package/front_end/models/live-metrics/web-vitals-injected/web-vitals-injected.ts

@@ -122,29 +122,6 @@ window.getNodeForIndex = (index: number): Node|undefined => {
   return nodeList[index].deref();
 };
 
-function limitScripts(loafs: Spec.PerformanceLongAnimationFrameTimingJSON[]):
-    Spec.PerformanceLongAnimationFrameTimingJSON[] {
-  return loafs.map(loaf => {
-    const longestScripts: Spec.PerformanceScriptTimingJSON[] = [];
-    for (const script of loaf.scripts) {
-      if (longestScripts.length < Spec.SCRIPTS_PER_LOAF_LIMIT) {
-        longestScripts.push(script);
-        continue;
-      }
-
-      const shorterIndex = longestScripts.findIndex(s => s.duration < script.duration);
-      if (shorterIndex === -1) {
-        continue;
-      }
-
-      longestScripts[shorterIndex] = script;
-    }
-    longestScripts.sort((a, b) => a.startTime - b.startTime);
-    loaf.scripts = longestScripts;
-    return loaf;
-  });
-}
-
 function isPrerendered(): boolean {
   if (document.prerendering) {
     return true;
@@ -213,48 +190,11 @@ function initialize(): void {
   }, {reportAllChanges: true, reportSoftNavs: window.devToolsReportSoftNavs});
 
   function onEachInteraction(interaction: WebVitals.INPMetricWithAttribution): void {
-    // Multiple `InteractionEntry` events can be emitted for the same `uniqueInteractionId`
-    // However, it is easier to combine these entries in the DevTools client rather than in
-    // this injected code.
-    const event: Spec.InteractionEntryEvent = {
-      name: 'InteractionEntry',
-      duration: interaction.value as Trace.Types.Timing.Milli,
-      subparts: {
-        inputDelay: interaction.attribution.inputDelay as Trace.Types.Timing.Milli,
-        processingDuration: interaction.attribution.processingDuration as Trace.Types.Timing.Milli,
-        presentationDelay: interaction.attribution.presentationDelay as Trace.Types.Timing.Milli,
-      },
-      startTime: interaction.entries[0].startTime,
-      navigationId: interaction.navigationId,
-      entryGroupId: interaction.entries[0].interactionId as Spec.InteractionEntryGroupId,
-      nextPaintTime: interaction.attribution.nextPaintTime,
-      interactionType: interaction.attribution.interactionType,
-      eventName: interaction.entries[0].name,
-      // To limit the amount of events, just get the last 5 LoAFs
-      longAnimationFrameEntries: limitScripts(
-          interaction.attribution.longAnimationFrameEntries.slice(-Spec.LOAF_LIMIT).map(loaf => loaf.toJSON())),
-    };
-    const target = interaction.attribution.interactionTarget;
-    if (target) {
-      event.nodeIndex = Number(target);
-    }
-    sendEventToDevTools(event);
+    sendEventToDevTools(Spec.createInteractionEntryEvent(interaction));
   }
 
   onINP(metric => {
-    const event: Spec.InpChangeEvent = {
-      name: 'INP',
-      value: metric.value as Trace.Types.Timing.Milli,
-      subparts: {
-        inputDelay: metric.attribution.inputDelay as Trace.Types.Timing.Milli,
-        processingDuration: metric.attribution.processingDuration as Trace.Types.Timing.Milli,
-        presentationDelay: metric.attribution.presentationDelay as Trace.Types.Timing.Milli,
-      },
-      startTime: metric.entries[0].startTime,
-      entryGroupId: metric.entries[0].interactionId as Spec.InteractionEntryGroupId,
-      interactionType: metric.attribution.interactionType,
-    };
-    sendEventToDevTools(event);
+    sendEventToDevTools(Spec.createInpChangeEvent(metric));
   }, {
     reportAllChanges: true,
     durationThreshold: 0,

package/front_end/models/network_time_calculator/RequestTimeRanges.ts

@@ -25,7 +25,7 @@ export const enum RequestTimeRangeNames {
   WAITING = 'waiting',
 }
 
-export const ServiceWorkerRangeNames = new Set<RequestTimeRangeNames>([
+export const ServiceWorkerRangeNames: Set<RequestTimeRangeNames> = new Set<RequestTimeRangeNames>([
   RequestTimeRangeNames.SERVICE_WORKER,
   RequestTimeRangeNames.SERVICE_WORKER_PREPARATION,
   RequestTimeRangeNames.SERVICE_WORKER_RESPOND_WITH,
@@ -33,7 +33,7 @@ export const ServiceWorkerRangeNames = new Set<RequestTimeRangeNames>([
   RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP,
 ]);
 
-export const ConnectionSetupRangeNames = new Set<RequestTimeRangeNames>([
+export const ConnectionSetupRangeNames: Set<RequestTimeRangeNames> = new Set<RequestTimeRangeNames>([
   RequestTimeRangeNames.QUEUEING,
   RequestTimeRangeNames.BLOCKING,
   RequestTimeRangeNames.CONNECTING,

package/front_end/models/persistence/AutomaticFileSystemWorkspaceBinding.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
+import type * as SDK from '../../core/sdk/sdk.js';
 import type * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
@@ -58,6 +59,10 @@ export class FileSystem implements Workspace.Workspace.Project {
     return false;
   }
 
+  securityOrigin(): SDK.SecurityOrigin.SecurityOrigin|null {
+    return null;
+  }
+
   displayName(): string {
     const {root} = this.automaticFileSystem;
     let slash = root.lastIndexOf('/');

package/front_end/models/persistence/IsolatedFileSystem.ts

@@ -595,7 +595,7 @@ const SCRIPT_EXTENSIONS = new Set<string>([
 
 const IMAGE_EXTENSIONS = new Set<string>(['jpeg', 'jpg', 'svg', 'gif', 'webp', 'png', 'ico', 'tiff', 'tif', 'bmp']);
 
-export const BinaryExtensions = new Set<string>([
+export const BinaryExtensions: Set<string> = new Set<string>([
   // Executable extensions, roughly taken from https://en.wikipedia.org/wiki/Comparison_of_executable_file_formats
   'cmd',
   'com',

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -231,6 +231,9 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     if ((!this.#active && !ignoreInactive) || !this.#project) {
       return Platform.DevToolsPath.EmptyRawPathString;
     }
+    if (NetworkPersistenceManager.isForbiddenNetworkUrl(url)) {
+      return Platform.DevToolsPath.EmptyRawPathString;
+    }
     let initialEncodedPath = Common.ParsedURL.ParsedURL.urlWithoutHash(url.replace(/^https?:\/\//, '')) as
         Platform.DevToolsPath.EncodedPathString;
     if (initialEncodedPath.endsWith('/') && initialEncodedPath.indexOf('?') === -1) {
@@ -264,6 +267,9 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
       // encodeURI() escapes all the unsafe filename characters except '/' and '*'
       let encodedName =
           encodeURI(pathPart).replace(/[\/\*]/g, match => '%' + match[0].charCodeAt(0).toString(16).toUpperCase());
+      if (encodedName === '..') {
+        encodedName = '%2E%2E';
+      }
       if (Host.Platform.isWin()) {
         // Windows does not allow ':' and '?' in filenames
         encodedName = encodedName.replace(/[:\?]/g, match => '%' + match[0].charCodeAt(0).toString(16).toUpperCase());
@@ -302,12 +308,18 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     if (!this.#project) {
       return Platform.DevToolsPath.EmptyUrlString;
     }
-    return Common.ParsedURL.ParsedURL.concatenate(
-        (this.#project as FileSystem).fileSystemPath(), '/', this.encodedPathFromUrl(url, ignoreInactive));
+    const encodedPath = this.encodedPathFromUrl(url, ignoreInactive);
+    if (!encodedPath) {
+      return Platform.DevToolsPath.EmptyUrlString;
+    }
+    return Common.ParsedURL.ParsedURL.concatenate((this.#project as FileSystem).fileSystemPath(), '/', encodedPath);
   }
 
   getHeadersUISourceCodeFromUrl(url: Platform.DevToolsPath.UrlString): Workspace.UISourceCode.UISourceCode|null {
     const fileUrlFromRequest = this.fileUrlFromNetworkUrl(url, /* ignoreNoActive */ true);
+    if (!fileUrlFromRequest) {
+      return null;
+    }
     const folderUrlFromRequest =
         Common.ParsedURL.ParsedURL.substring(fileUrlFromRequest, 0, fileUrlFromRequest.lastIndexOf('/'));
     const headersFileUrl = Common.ParsedURL.ParsedURL.concatenate(folderUrlFromRequest, '/', HEADERS_FILENAME);
@@ -319,6 +331,9 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     let uiSourceCode = this.getHeadersUISourceCodeFromUrl(url);
     if (!uiSourceCode && this.#project) {
       const encodedFilePath = this.encodedPathFromUrl(url, /* ignoreNoActive */ true);
+      if (!encodedFilePath) {
+        return null;
+      }
       const encodedPath = Common.ParsedURL.ParsedURL.substring(encodedFilePath, 0, encodedFilePath.lastIndexOf('/'));
       uiSourceCode = await this.#project.createFile(encodedPath, HEADERS_FILENAME, '');
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.HeaderOverrideFileCreated);
@@ -435,6 +450,9 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
   }
 
   async setupAndStartLocalOverrides(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<boolean> {
+    if (!this.isUISourceCodeOverridable(uiSourceCode)) {
+      return false;
+    }
     // No overrides folder, set it up
     if (this.#shouldPromptSaveForOverridesDialog(uiSourceCode)) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.OverrideContentContextMenuSetup);
@@ -472,6 +490,10 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     }
     this.#savingForOverrides.add(uiSourceCode);
     let encodedPath = this.encodedPathFromUrl(uiSourceCode.url());
+    if (!encodedPath) {
+      this.#savingForOverrides.delete(uiSourceCode);
+      return;
+    }
     const contentDataOrError = await uiSourceCode.requestContentData();
     const {content, isEncoded} = TextUtils.ContentData.ContentData.asDeferredContent(contentDataOrError);
     const lastIndexOfSlash = encodedPath.lastIndexOf('/');
@@ -516,16 +538,22 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
   private isForbiddenFileUrl(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
     const relativePathParts = FileSystemWorkspaceBinding.relativePath(uiSourceCode);
     // Decode twice to handle paths generated on Windows OS.
-    const host = this.decodeLocalPathToUrlPath(this.decodeLocalPathToUrlPath(relativePathParts[0] || ''));
-    return host === 'chrome:' || forbiddenUrls.includes(host);
+    const host = this.decodeLocalPathToUrlPath(this.decodeLocalPathToUrlPath(relativePathParts[0] || '')).toLowerCase();
+    return ['chrome:', 'data:', 'blob:', 'javascript:', 'about:', 'mailto:', 'vbscript:'].includes(host) ||
+        forbiddenUrls.includes(host);
   }
 
   static isForbiddenNetworkUrl(urlString: Platform.DevToolsPath.UrlString): boolean {
+    const trimmedUrl = urlString.trim().toLowerCase();
+    if (trimmedUrl.startsWith('data:') || trimmedUrl.startsWith('blob:') || trimmedUrl.startsWith('javascript:') ||
+        trimmedUrl.startsWith('about:') || trimmedUrl.startsWith('mailto:') || trimmedUrl.startsWith('vbscript:')) {
+      return true;
+    }
     const url = Common.ParsedURL.ParsedURL.fromString(urlString);
     if (!url) {
       return false;
     }
-    return url.scheme === 'chrome' || forbiddenUrls.includes(url.host);
+    return !['http', 'https', 'file'].includes(url.scheme) || forbiddenUrls.includes(url.host);
   }
 
   private async onUISourceCodeAdded(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
@@ -534,7 +562,8 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
   }
 
   private canHandleNetworkUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
-    return this.#active && !Common.ParsedURL.schemeIs(uiSourceCode.url(), 'snippet:');
+    return this.#active && !Common.ParsedURL.schemeIs(uiSourceCode.url(), 'snippet:') &&
+        !NetworkPersistenceManager.isForbiddenNetworkUrl(uiSourceCode.url());
   }
 
   private async networkUISourceCodeAdded(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {

package/front_end/models/stack_trace/StackTraceImpl.ts

@@ -35,10 +35,10 @@ export class StackTraceImpl<SyncFragmentT extends FragmentImpl|DebuggableFragmen
 }
 
 export class FragmentImpl implements StackTrace.StackTrace.Fragment {
-  static readonly EMPTY_FRAGMENT = new FragmentImpl();
+  static readonly EMPTY_FRAGMENT: FragmentImpl = new FragmentImpl();
 
   readonly node?: FrameNode;
-  readonly stackTraces = new Set<AnyStackTraceImpl>();
+  readonly stackTraces: Set<AnyStackTraceImpl> = new Set<AnyStackTraceImpl>();
 
   /**
    * Fragments are deduplicated based on the node.

package/front_end/models/trace/LanternComputationData.ts

@@ -269,9 +269,8 @@ function linkInitiators(lanternRequests: NetworkRequest[]): void {
   }
 }
 
-function createNetworkRequests(
-    trace: Lantern.Types.Trace, data: Handlers.Types.HandlerData, startTime = 0,
-    endTime = Number.POSITIVE_INFINITY): NetworkRequest[] {
+function createNetworkRequests(trace: Lantern.Types.Trace, data: Handlers.Types.HandlerData, startTime = 0,
+                               endTime: number = Number.POSITIVE_INFINITY): NetworkRequest[] {
   const workerThreads = findWorkerThreads(trace);
 
   const lanternRequestsNoRedirects: NetworkRequest[] = [];

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

@@ -7,8 +7,9 @@ import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-export const stackTraceForEventInTrace =
-    new Map<Handlers.Types.HandlerData, Map<Types.Events.Event, Protocol.Runtime.StackTrace>>();
+export const stackTraceForEventInTrace:
+    Map<Handlers.Types.HandlerData, Map<Types.Events.Event, Protocol.Runtime.StackTrace>> =
+        new Map<Handlers.Types.HandlerData, Map<Types.Events.Event, Protocol.Runtime.StackTrace>>();
 
 export function clearCacheForTrace(data: Handlers.Types.HandlerData): void {
   stackTraceForEventInTrace.delete(data);

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

@@ -52,7 +52,7 @@ function collectMainThreadActivity(data: Handlers.Types.HandlerData): Types.Even
 
 export function summarizeByThirdParty(
     data: Handlers.Types.HandlerData, traceBounds: Types.Timing.TraceWindowMicro): EntitySummary[] {
-  const mainThreadEvents = collectMainThreadActivity(data).sort(Helpers.Trace.eventTimeComparator);
+  const mainThreadEvents = collectMainThreadActivity(data);
   const groupingFunction = (event: Types.Events.Event): string => {
     const entity = data.Renderer.entityMappings.entityByEvent.get(event);
     return entity?.name ?? '';
@@ -68,7 +68,7 @@ export function summarizeByThirdParty(
  */
 export function summarizeByURL(
     data: Handlers.Types.HandlerData, traceBounds: Types.Timing.TraceWindowMicro): URLSummary[] {
-  const mainThreadEvents = collectMainThreadActivity(data).sort(Helpers.Trace.eventTimeComparator);
+  const mainThreadEvents = collectMainThreadActivity(data);
   const groupingFunction = (event: Types.Events.Event): string => {
     return Handlers.Helpers.getNonResolvedURL(event, data) ?? '';
   };
@@ -140,20 +140,20 @@ function summarizeBottomUpByURL(root: TraceTree.BottomUpRootNode, data: Handlers
   return summaries;
 }
 
+// Use the same filtering as front_end/panels/timeline/TimelineTreeView.ts.
+const exclusiveNameFilter = new TraceFilter.ExclusiveNameFilter([]);
+const visibleEventsFilter = new TraceFilter.VisibleEventsFilter(
+    [...Helpers.Trace.VISIBLE_TRACE_EVENT_TYPES.values(), Types.Events.Name.SYNTHETIC_NETWORK_REQUEST]);
+
 function getBottomUpTree(
     mainThreadEvents: Types.Events.Event[], tracebounds: Types.Timing.TraceWindowMicro,
     groupingFunction: ((arg0: Types.Events.Event) => string)|null): TraceTree.BottomUpRootNode {
-  // Use the same filtering as front_end/panels/timeline/TimelineTreeView.ts.
-  const visibleEvents = Helpers.Trace.VISIBLE_TRACE_EVENT_TYPES.values().toArray();
-  const filter =
-      new TraceFilter.VisibleEventsFilter(visibleEvents.concat([Types.Events.Name.SYNTHETIC_NETWORK_REQUEST]));
-
   // The bottom up root node handles all the "in Tracebounds" checks we need for the insight.
   const startTime = Helpers.Timing.microToMilli(tracebounds.min);
   const endTime = Helpers.Timing.microToMilli(tracebounds.max);
   return new TraceTree.BottomUpRootNode(mainThreadEvents, {
-    textFilter: new TraceFilter.ExclusiveNameFilter([]),
-    filters: [filter],
+    textFilter: exclusiveNameFilter,
+    filters: [visibleEventsFilter],
     startTime,
     endTime,
     eventGroupIdCallback: groupingFunction,

package/front_end/models/trace/handlers/AsyncJSCallsHandler.ts

@@ -8,13 +8,16 @@ import * as Types from '../types/types.js';
 import {data as flowsHandlerData} from './FlowsHandler.js';
 import {data as rendererHandlerData} from './RendererHandler.js';
 
-let schedulerToRunEntryPoints = new Map<Types.Events.Event, Types.Events.Event[]>();
+let schedulerToRunEntryPoints: Map<Types.Events.Event, Types.Events.Event[]> =
+    new Map<Types.Events.Event, Types.Events.Event[]>();
 
-let taskScheduleForTaskRunEvent = new Map<Types.Events.DebuggerAsyncTaskRun, Types.Events.DebuggerAsyncTaskScheduled>();
-let asyncCallToScheduler =
+let taskScheduleForTaskRunEvent: Map<Types.Events.DebuggerAsyncTaskRun, Types.Events.DebuggerAsyncTaskScheduled> =
+    new Map<Types.Events.DebuggerAsyncTaskRun, Types.Events.DebuggerAsyncTaskScheduled>();
+let asyncCallToScheduler: Map<Types.Events.SyntheticProfileCall, {taskName: string, scheduler: Types.Events.Event}> =
     new Map<Types.Events.SyntheticProfileCall, {taskName: string, scheduler: Types.Events.Event}>();
 
-let runEntryPointToScheduler = new Map<Types.Events.Event, {taskName: string, scheduler: Types.Events.Event}>();
+let runEntryPointToScheduler: Map<Types.Events.Event, {taskName: string, scheduler: Types.Events.Event}> =
+    new Map<Types.Events.Event, {taskName: string, scheduler: Types.Events.Event}>();
 
 export function reset(): void {
   schedulerToRunEntryPoints = new Map();

package/front_end/models/trace/handlers/FramesHandler.ts

@@ -390,10 +390,10 @@ class TimelineFrame implements Types.Events.LegacyTimelineFrame {
   // Types.Events.Event.
   cat = 'devtools.legacy_frame';
   name = 'frame';
-  ph = Types.Events.Phase.COMPLETE;
+  ph: Types.Events.Phase = Types.Events.Phase.COMPLETE;
   ts: Types.Timing.Micro;
-  pid = Types.Events.ProcessID(-1);
-  tid = Types.Events.ThreadID(-1);
+  pid: Types.Events.ProcessID = Types.Events.ProcessID(-1);
+  tid: Types.Events.ThreadID = Types.Events.ThreadID(-1);
 
   index = -1;
   startTime: Types.Timing.Micro;

package/front_end/models/trace/handlers/LayoutShiftsHandler.ts

@@ -67,13 +67,13 @@ interface RemoteFont {
  * This represents the maximum #time we will allow a cluster to go before we
  * reset it.
  **/
-export const MAX_CLUSTER_DURATION = Helpers.Timing.milliToMicro(Types.Timing.Milli(5000));
+export const MAX_CLUSTER_DURATION: Types.Timing.Micro = Helpers.Timing.milliToMicro(Types.Timing.Milli(5000));
 
 /**
  * This represents the maximum #time we will allow between layout shift events
  * before considering it to be the start of a new cluster.
  **/
-export const MAX_SHIFT_TIME_DELTA = Helpers.Timing.milliToMicro(Types.Timing.Milli(1000));
+export const MAX_SHIFT_TIME_DELTA: Types.Timing.Micro = Helpers.Timing.milliToMicro(Types.Timing.Milli(1000));
 
 // Layout shifts are reported globally to the developer, irrespective of which
 // frame they originated in. However, each process does have its own individual

package/front_end/models/trace/handlers/SamplesHandler.ts

@@ -8,8 +8,10 @@ import * as CPUProfile from '../../cpu_profile/cpu_profile.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-let profilesInProcess = new Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, ProfileData>>();
-let entryToNode = new Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>();
+let profilesInProcess: Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, ProfileData>> =
+    new Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, ProfileData>>();
+let entryToNode: Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode> =
+    new Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>();
 
 // The profile head, containing its metadata like its start
 // time, comes in a "Profile" event. The sample data comes in

package/front_end/models/trace/handlers/UserInteractionsHandler.ts

@@ -16,7 +16,7 @@ import type {HandlerName} from './types.js';
 let beginCommitCompositorFrameEvents: Types.Events.BeginCommitCompositorFrame[] = [];
 let parseMetaViewportEvents: Types.Events.ParseMetaViewport[] = [];
 
-export const LONG_INTERACTION_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(200));
+export const LONG_INTERACTION_THRESHOLD: Types.Timing.Micro = Helpers.Timing.milliToMicro(Types.Timing.Milli(200));
 
 const INP_GOOD_TIMING = LONG_INTERACTION_THRESHOLD;
 const INP_MEDIUM_TIMING = Helpers.Timing.milliToMicro(Types.Timing.Milli(500));

package/front_end/models/trace/handlers/WarningsHandler.ts

@@ -42,9 +42,9 @@ let taskReflowEvents: Types.Events.Event[] = [];
  */
 let longTaskEvents: Types.Events.Event[] = [];
 
-export const FORCED_REFLOW_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(30));
+export const FORCED_REFLOW_THRESHOLD: Types.Timing.Micro = Helpers.Timing.milliToMicro(Types.Timing.Milli(30));
 
-export const LONG_MAIN_THREAD_TASK_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(50));
+export const LONG_MAIN_THREAD_TASK_THRESHOLD: Types.Timing.Micro = Helpers.Timing.milliToMicro(Types.Timing.Milli(50));
 
 export function reset(): void {
   warningsPerEvent = new Map();

package/front_end/models/trace/helpers/Network.ts

@@ -48,10 +48,10 @@ export interface CacheControl {
   'private'?: boolean;
 }
 
-export const CACHEABLE_STATUS_CODES = new Set([200, 203, 206]);
+export const CACHEABLE_STATUS_CODES: Set<number> = new Set([200, 203, 206]);
 
 /** @type {Set<LH.Crdp.Network.ResourceType>} */
-export const STATIC_RESOURCE_TYPES = new Set([
+export const STATIC_RESOURCE_TYPES: Set<Protocol.Network.ResourceType> = new Set([
   Protocol.Network.ResourceType.Font,
   Protocol.Network.ResourceType.Image,
   Protocol.Network.ResourceType.Media,
@@ -59,7 +59,7 @@ export const STATIC_RESOURCE_TYPES = new Set([
   Protocol.Network.ResourceType.Stylesheet,
 ]);
 
-export const NON_NETWORK_SCHEMES = [
+export const NON_NETWORK_SCHEMES: string[] = [
   'blob',        // @see https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
   'data',        // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
   'intent',      // @see https://developer.chrome.com/docs/multidevice/android/intents/

package/front_end/models/trace/helpers/Trace.ts

@@ -838,7 +838,7 @@ export function extractSampleTraceId(event: Types.Events.Event): number|null {
  * This exactly matches Trace.Styles.visibleTypes. See the runtime verification in maybeInitStylesMap.
  * TODO(crbug.com/410884528)
  **/
-export const VISIBLE_TRACE_EVENT_TYPES = new Set<Types.Events.Name>([
+export const VISIBLE_TRACE_EVENT_TYPES: Set<Types.Events.Name> = new Set<Types.Events.Name>([
   Types.Events.Name.ABORT_POST_TASK_CALLBACK,
   Types.Events.Name.ANIMATION,
   Types.Events.Name.ASYNC_TASK,