devtools-tracing 1.1.1 → 1.2.0

package/lib/front_end/models/trace/Styles.ts

@@ -1,1138 +0,0 @@
-// Copyright 2023 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
-
-import * as Handlers from './handlers/handlers.js';
-import * as Helpers from './helpers/helpers.js';
-import * as Types from './types/types.js';
-
-const UIStrings = {
-  /**
-   * @description Category in the Summary view of the Performance panel to indicate time spent to load resources
-   */
-  loading: 'Loading',
-  /**
-   * @description Text in Timeline for the Experience title
-   */
-  experience: 'Experience',
-  /**
-   * @description Category in the Summary view of the Performance panel to indicate time spent in script execution
-   */
-  scripting: 'Scripting',
-  /**
-   * @description Category in the Summary view of the Performance panel to indicate time spent in rendering the web page
-   */
-  rendering: 'Rendering',
-  /**
-   * @description Category in the Summary view of the Performance panel to indicate time spent to visually represent the web page
-   */
-  painting: 'Painting',
-  /**
-   * @description Event category in the Performance panel for time spent in the GPU
-   */
-  gpu: 'GPU',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  async: 'Async',
-  /**
-   * @description Category in the Summary view of the Performance panel to indicate time spent in the rest of the system
-   */
-  system: 'System',
-  /**
-   * @description Category in the Summary view of the Performance panel to indicate idle time
-   */
-  idle: 'Idle',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  task: 'Task',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  consoleTaskRun: 'Run console task',
-  /**
-   * @description Text for other types of items
-   */
-  other: 'Other',
-  /**
-   * @description Text that refers to the animation of the web page
-   */
-  animation: 'Animation',
-  /**
-   * @description Text that refers to some events
-   */
-  event: 'Event',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  requestMainThreadFrame: 'Request main thread frame',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  frameStart: 'Frame start',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  onMessage: 'On message',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  schedulePostMessage: 'Schedule postMessage',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  messaging: 'Messaging',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  frameStartMainThread: 'Frame start (main thread)',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  drawFrame: 'Draw frame',
-  /**
-   * @description Noun for an event in the Performance panel. This marks time
-   * spent in an operation that only happens when the profiler is active.
-   */
-  profilingOverhead: 'Profiling overhead',
-  /**
-   * @description The process the browser uses to determine a target element for a
-   *pointer event. Typically, this is determined by considering the pointer's
-   *location and also the visual layout of elements on the screen.
-   */
-  hitTest: 'Hit test',
-  /**
-   * @description Noun for an event in the Performance panel. The browser has decided
-   *that the styles for some elements need to be recalculated and scheduled that
-   *recalculation process at some time in the future.
-   */
-  scheduleStyleRecalculation: 'Schedule style recalculation',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  recalculateStyle: 'Recalculate style',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  invalidateLayout: 'Invalidate Layout',
-  /**
-   * @description Noun for an event in the Performance panel. Layerize is a step
-   *where we calculate which layers to create.
-   */
-  layerize: 'Layerize',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  layout: 'Layout',
-  /**
-   * @description Noun for an event in the Performance panel. Paint setup is a
-   *step before the 'Paint' event. A paint event is when the browser draws pixels
-   *to the screen. This step is the setup beforehand.
-   */
-  paintSetup: 'Paint setup',
-  /**
-   * @description Noun for a paint event in the Performance panel, where an image
-   *was being painted. A paint event is when the browser draws pixels to the
-   *screen, in this case specifically for an image in a website.
-   */
-  paintImage: 'Paint image',
-  /**
-   * @description Noun for an event in the Performance panel. Pre-paint is a
-   *step before the 'Paint' event. A paint event is when the browser records the
-   *instructions for drawing the page. This step is the setup beforehand.
-   */
-  prePaint: 'Pre-paint',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  updateLayer: 'Update layer',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  updateLayerTree: 'Update layer tree',
-  /**
-   * @description Noun for a paint event in the Performance panel. A paint event is when the browser draws pixels to the screen.
-   */
-  paint: 'Paint',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  rasterizePaint: 'Rasterize paint',
-  /**
-   * @description The action to scroll
-   */
-  scroll: 'Scroll',
-  /**
-   * @description Noun for an event in the Performance panel. Commit is a step
-   *where we send (also known as "commit") layers to the compositor thread. This
-   *step follows the "Layerize" step which is what calculates which layers to
-   *create.
-   */
-  commit: 'Commit',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  compositeLayers: 'Composite layers',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  computeIntersections: 'Compute intersections',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  parseHtml: 'Parse HTML',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  parseStylesheet: 'Parse stylesheet',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  installTimer: 'Install timer',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  removeTimer: 'Remove timer',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  timerFired: 'Timer fired',
-  /**
-   * @description Text for an event. Shown in the timeline in the Performance panel.
-   * XHR refers to XmlHttpRequest, a Web API. This particular Web API has a property
-   * named 'readyState' (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState). When
-   * the 'readyState' property changes the text is shown.
-   */
-  xhrReadyStateChange: '`XHR` `readyState` change',
-  /**
-   * @description Text for an event. Shown in the timeline in the Performance panel.
-   * XHR refers to XmlHttpRequest, a Web API. (see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
-   * The text is shown when a XmlHttpRequest load event happens on the inspected page.
-   */
-  xhrLoad: '`XHR` load',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  compileScript: 'Compile script',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  cacheScript: 'Cache script code',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  compileCode: 'Compile code',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  optimizeCode: 'Optimize code',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  evaluateScript: 'Evaluate script',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  compileModule: 'Compile module',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  cacheModule: 'Cache module code',
-  /**
-   * @description Text for an event. Shown in the timeline in the Performance panel.
-   * "Module" refers to JavaScript modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
-   * JavaScript modules are a way to organize JavaScript code.
-   * "Evaluate" is the phase when the JavaScript code of a module is executed.
-   */
-  evaluateModule: 'Evaluate module',
-  /**
-   * @description Noun indicating that a compile task (type: streaming) happened.
-   */
-  streamingCompileTask: 'Streaming compile task',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  waitingForNetwork: 'Waiting for network',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  parseAndCompile: 'Parse and compile',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel.
-   * "Code Cache" refers to JavaScript bytecode cache: https://v8.dev/blog/code-caching-for-devs
-   * "Deserialize" refers to the process of reading the code cache.
-   */
-  deserializeCodeCache: 'Deserialize code cache',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  streamingWasmResponse: 'Streaming Wasm response',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  compiledWasmModule: 'Compiled Wasm module',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  cachedWasmModule: 'Cached Wasm module',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  wasmModuleCacheHit: 'Wasm module cache hit',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  wasmModuleCacheInvalid: 'Wasm module cache invalid',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  frameStartedLoading: 'Frame started loading',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  onloadEvent: 'Onload event',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  domcontentloadedEvent: 'DOMContentLoaded event',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  firstPaint: 'First Paint',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  firstContentfulPaint: 'First Contentful Paint',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  largestContentfulPaint: 'Largest Contentful Paint',
-  /**
-   * @description Text for timestamps of items
-   */
-  timestamp: 'Timestamp',
-  /**
-   * @description Noun for a 'time' event that happens in the Console (a tool in
-   * DevTools). The user can trigger console time events from their code, and
-   * they will show up in the Performance panel. Time events are used to measure
-   * the duration of something, e.g. the user will emit two time events at the
-   * start and end of some interesting task.
-   */
-  consoleTime: 'Console time',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  userTiming: 'User timing',
-  /**
-   * @description Name for an event shown in the Performance panel. When a network
-   * request is about to be sent by the browser, the time is recorded and DevTools
-   * is notified that a network request will be sent momentarily.
-   */
-  willSendRequest: 'Will send request',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  sendRequest: 'Send request',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  receiveResponse: 'Receive response',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  finishLoading: 'Finish loading',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  receiveData: 'Receive data',
-  /**
-   * @description Event category in the Performance panel for time spent to execute microtasks in JavaScript
-   */
-  runMicrotasks: 'Run microtasks',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  functionCall: 'Function call',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  gcEvent: 'GC event',
-  /**
-   * @description Event category in the Performance panel for time spent to perform a full Garbage Collection pass
-   */
-  majorGc: 'Major GC',
-  /**
-   * @description Event category in the Performance panel for time spent to perform a quick Garbage Collection pass
-   */
-  minorGc: 'Minor GC',
-  /**
-   * @description Text for the request animation frame event
-   */
-  requestAnimationFrame: 'Request animation frame',
-  /**
-   * @description Text to cancel the animation frame
-   */
-  cancelAnimationFrame: 'Cancel animation frame',
-  /**
-   * @description Text for the event that an animation frame is fired
-   */
-  animationFrameFired: 'Animation frame fired',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  requestIdleCallback: 'Request idle callback',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  cancelIdleCallback: 'Cancel idle callback',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  fireIdleCallback: 'Fire idle callback',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  createWebsocket: 'Create WebSocket',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  sendWebsocketHandshake: 'Send WebSocket handshake',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  receiveWebsocketHandshake: 'Receive WebSocket handshake',
-  /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
-   */
-  wsMessageReceived: 'Receive WebSocket message',
-  /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
-   */
-  wsMessageSent: 'Send WebSocket message',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  destroyWebsocket: 'Destroy WebSocket',
-  /**
-   * @description Event category in the Performance panel for time spent in the embedder of the WebView
-   */
-  embedderCallback: 'Embedder callback',
-  /**
-   * @description Event category in the Performance panel for time spent decoding an image
-   */
-  imageDecode: 'Image decode',
-  /**
-   * @description Event category in the Performance panel for time spent to perform Garbage Collection for the Document Object Model
-   */
-  domGc: 'DOM GC',
-  /**
-   * @description Event category in the Performance panel for time spent to perform Garbage Collection for C++: https://chromium.googlesource.com/v8/v8/+/main/include/cppgc/README.md
-   */
-  cppGc: 'CPP GC',
-  /**
-   * @description Event category in the Performance panel for time spent to perform encryption
-   */
-  encrypt: 'Encrypt',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  encryptReply: 'Encrypt reply',
-  /**
-   * @description Event category in the Performance panel for time spent to perform decryption
-   */
-  decrypt: 'Decrypt',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  decryptReply: 'Decrypt reply',
-  /**
-   * @description Noun phrase meaning 'the browser was preparing the digest'.
-   * Digest: https://developer.mozilla.org/en-US/docs/Glossary/Digest
-   */
-  digest: 'Digest',
-  /**
-   * @description Noun phrase meaning 'the browser was preparing the digest
-   *reply'. Digest: https://developer.mozilla.org/en-US/docs/Glossary/Digest
-   */
-  digestReply: 'Digest reply',
-  /**
-   * @description The 'sign' stage of a web crypto event. Shown when displaying what the website was doing at a particular point in time.
-   */
-  sign: 'Sign',
-  /**
-   * @description Noun phrase for an event of the Web Crypto API. The event is recorded when the signing process is concluded.
-   * Signature: https://developer.mozilla.org/en-US/docs/Glossary/Signature/Security
-   */
-  signReply: 'Sign reply',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  verify: 'Verify',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  verifyReply: 'Verify reply',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel
-   */
-  asyncTask: 'Async task',
-  /**
-   * @description Text in Timeline for Layout Shift records
-   */
-  layoutShift: 'Layout shift',
-  /**
-   * @description Text in Timeline for Layout Shift records
-   */
-  layoutShiftCluster: 'Layout shift cluster',
-  /**
-   * @description Text in Timeline for an Event Timing record
-   */
-  eventTiming: 'Event timing',
-  /**
-   * @description Event category in the Performance panel for JavaScript nodes in CPUProfile
-   */
-  jsFrame: 'JS frame',
-  /**
-   * @description Text in UIDevtools Utils of the Performance panel
-   */
-  rasterizing: 'Rasterizing',
-  /**
-   * @description Text in UIDevtools Utils of the Performance panel
-   */
-  drawing: 'Drawing',
-  /**
-   * @description Label for an event in the Performance panel indicating that a
-   * callback function has been scheduled to run at a later time using the
-   * postTask API.
-   */
-  schedulePostTaskCallback: 'Schedule postTask',
-  /**
-   * @description Label for an event in the Performance panel indicating that a
-   * callback function that was scheduled to run using the postTask API was
-   * fired (invoked).
-   */
-  runPostTaskCallback: 'Fire postTask',
-  /**
-   * @description Label for an event in the Performance panel indicating that a
-   * callback function that was scheduled to run at a later time using the
-   * postTask API was cancelled, so will no longer run.
-   */
-  abortPostTaskCallback: 'Cancel postTask',
-} as const;
-
-export enum EventCategory {
-  DRAWING = 'drawing',
-  RASTERIZING = 'rasterizing',
-  LAYOUT = 'layout',
-  LOADING = 'loading',
-  EXPERIENCE = 'experience',
-  SCRIPTING = 'scripting',
-  MESSAGING = 'messaging',
-  RENDERING = 'rendering',
-  PAINTING = 'painting',
-  GPU = 'gpu',
-  ASYNC = 'async',
-  OTHER = 'other',
-  IDLE = 'idle',
-}
-
-let mainEventCategories: EventCategory[];
-
-const str_ = i18n.i18n.registerUIStrings('models/trace/Styles.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class TimelineRecordStyle {
-  title: string;
-  category: TimelineCategory;
-  hidden: boolean;
-
-  constructor(title: string, category: TimelineCategory, hidden: boolean|undefined = false) {
-    this.title = title;
-    this.category = category;
-    this.hidden = hidden;
-  }
-}
-export class TimelineCategory {
-  name: EventCategory;
-  title: Platform.UIString.LocalizedString;
-  visible: boolean;
-  #hidden?: boolean;
-  #cssVariable: `--app-color-${string}`;
-
-  constructor(
-      name: EventCategory, title: Platform.UIString.LocalizedString, visible: boolean,
-      cssVariable: `--app-color-${string}`) {
-    this.name = name;
-    this.title = title;
-    this.visible = visible;
-    this.#cssVariable = cssVariable;
-    this.hidden = false;
-  }
-
-  get hidden(): boolean {
-    return Boolean(this.#hidden);
-  }
-
-  get cssVariable(): string {
-    return this.#cssVariable;
-  }
-
-  getCSSValue(): string {
-    return `var(${this.#cssVariable})`;
-  }
-
-  set hidden(hidden: boolean) {
-    this.#hidden = hidden;
-  }
-}
-
-export type CategoryPalette = Record<EventCategory, TimelineCategory>;
-
-type EventStylesMap = Partial<Record<Types.Events.Name, TimelineRecordStyle>>;
-
-/**
- * This object defines the styles for the categories used in the
- * timeline (loading, rendering, scripting, etc.).
- */
-let categoryStyles: CategoryPalette|null;
-
-/**
- * This map defines the styles for events shown in the panel. This
- * includes its color (which on the event's category, the label it's
- * displayed with and flag to know weather it's visible in the flamechart
- * or not).
- * The thread appenders use this map to determine if an event should be
- * shown in the flame chart. If an event is not in the map, then it
- * won't be shown, but it also won't be shown if it's marked as "hidden"
- * in its styles.
- *
- * The map is also used in other places, like the event's details view.
- */
-let eventStylesMap: EventStylesMap|null;
-
-export function getEventStyle(eventName: Types.Events.Name): TimelineRecordStyle|undefined {
-  return maybeInitSylesMap()[eventName];
-}
-
-export function stringIsEventCategory(it: string): it is EventCategory {
-  return (Object.values(EventCategory) as string[]).includes(it);
-}
-
-export function getCategoryStyles(): CategoryPalette {
-  if (categoryStyles) {
-    return categoryStyles;
-  }
-  categoryStyles = {
-    loading: new TimelineCategory(EventCategory.LOADING, i18nString(UIStrings.loading), true, '--app-color-loading'),
-    experience: new TimelineCategory(
-        EventCategory.EXPERIENCE, i18nString(UIStrings.experience), false, '--app-color-rendering'),
-    messaging:
-        new TimelineCategory(EventCategory.MESSAGING, i18nString(UIStrings.messaging), true, '--app-color-messaging'),
-    scripting:
-        new TimelineCategory(EventCategory.SCRIPTING, i18nString(UIStrings.scripting), true, '--app-color-scripting'),
-    rendering:
-        new TimelineCategory(EventCategory.RENDERING, i18nString(UIStrings.rendering), true, '--app-color-rendering'),
-    painting:
-        new TimelineCategory(EventCategory.PAINTING, i18nString(UIStrings.painting), true, '--app-color-painting'),
-    gpu: new TimelineCategory(EventCategory.GPU, i18nString(UIStrings.gpu), false, '--app-color-painting'),
-    async: new TimelineCategory(EventCategory.ASYNC, i18nString(UIStrings.async), false, '--app-color-async'),
-    other: new TimelineCategory(EventCategory.OTHER, i18nString(UIStrings.system), false, '--app-color-system'),
-    idle: new TimelineCategory(EventCategory.IDLE, i18nString(UIStrings.idle), false, '--app-color-idle'),
-    layout: new TimelineCategory(EventCategory.LAYOUT, i18nString(UIStrings.layout), false, '--app-color-loading'),
-    rasterizing: new TimelineCategory(
-        EventCategory.RASTERIZING, i18nString(UIStrings.rasterizing), false, '--app-color-scripting'),
-    drawing: new TimelineCategory(EventCategory.DRAWING, i18nString(UIStrings.drawing), false, '--app-color-rendering'),
-  };
-  return categoryStyles;
-}
-
-export function maybeInitSylesMap(): EventStylesMap {
-  if (eventStylesMap) {
-    return eventStylesMap;
-  }
-  const defaultCategoryStyles = getCategoryStyles();
-
-  eventStylesMap = {
-    [Types.Events.Name.RUN_TASK]: new TimelineRecordStyle(i18nString(UIStrings.task), defaultCategoryStyles.other),
-
-    [Types.Events.Name.PROFILE_CALL]:
-        new TimelineRecordStyle(i18nString(UIStrings.jsFrame), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.JS_SAMPLE]:
-        new TimelineRecordStyle(Types.Events.Name.JS_SAMPLE, defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.PROGRAM]: new TimelineRecordStyle(i18nString(UIStrings.other), defaultCategoryStyles.other),
-
-    [Types.Events.Name.START_PROFILING]:
-        new TimelineRecordStyle(i18nString(UIStrings.profilingOverhead), defaultCategoryStyles.other),
-
-    [Types.Events.Name.ANIMATION]:
-        new TimelineRecordStyle(i18nString(UIStrings.animation), defaultCategoryStyles.rendering),
-
-    [Types.Events.Name.EVENT_DISPATCH]:
-        new TimelineRecordStyle(i18nString(UIStrings.event), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.REQUEST_MAIN_THREAD_FRAME]: new TimelineRecordStyle(
-        i18nString(UIStrings.requestMainThreadFrame),
-        defaultCategoryStyles.rendering,
-        true,
-        ),
-
-    [Types.Events.Name.BEGIN_FRAME]: new TimelineRecordStyle(
-        i18nString(UIStrings.frameStart),
-        defaultCategoryStyles.rendering,
-        true,
-        ),
-
-    [Types.Events.Name.BEGIN_MAIN_THREAD_FRAME]: new TimelineRecordStyle(
-        i18nString(UIStrings.frameStartMainThread),
-        defaultCategoryStyles.rendering,
-        true,
-        ),
-
-    [Types.Events.Name.DRAW_FRAME]: new TimelineRecordStyle(
-        i18nString(UIStrings.drawFrame),
-        defaultCategoryStyles.rendering,
-        true,
-        ),
-
-    [Types.Events.Name.HIT_TEST]:
-        new TimelineRecordStyle(i18nString(UIStrings.hitTest), defaultCategoryStyles.rendering),
-
-    [Types.Events.Name.SCHEDULE_STYLE_RECALCULATION]: new TimelineRecordStyle(
-        i18nString(UIStrings.scheduleStyleRecalculation),
-        defaultCategoryStyles.rendering,
-        ),
-
-    [Types.Events.Name.RECALC_STYLE]:
-        new TimelineRecordStyle(i18nString(UIStrings.recalculateStyle), defaultCategoryStyles.rendering),
-
-    [Types.Events.Name.INVALIDATE_LAYOUT]: new TimelineRecordStyle(
-        i18nString(UIStrings.invalidateLayout),
-        defaultCategoryStyles.rendering,
-        true,
-        ),
-
-    [Types.Events.Name.LAYERIZE]:
-        new TimelineRecordStyle(i18nString(UIStrings.layerize), defaultCategoryStyles.rendering),
-
-    [Types.Events.Name.LAYOUT]: new TimelineRecordStyle(i18nString(UIStrings.layout), defaultCategoryStyles.rendering),
-
-    [Types.Events.Name.PAINT_SETUP]:
-        new TimelineRecordStyle(i18nString(UIStrings.paintSetup), defaultCategoryStyles.painting),
-
-    [Types.Events.Name.PAINT_IMAGE]: new TimelineRecordStyle(
-        i18nString(UIStrings.paintImage),
-        defaultCategoryStyles.painting,
-        true,
-        ),
-
-    [Types.Events.Name.UPDATE_LAYER]: new TimelineRecordStyle(
-        i18nString(UIStrings.updateLayer),
-        defaultCategoryStyles.painting,
-        true,
-        ),
-
-    [Types.Events.Name.UPDATE_LAYER_TREE]:
-        new TimelineRecordStyle(i18nString(UIStrings.updateLayerTree), defaultCategoryStyles.rendering),
-
-    [Types.Events.Name.PAINT]: new TimelineRecordStyle(i18nString(UIStrings.paint), defaultCategoryStyles.painting),
-
-    [Types.Events.Name.PRE_PAINT]:
-        new TimelineRecordStyle(i18nString(UIStrings.prePaint), defaultCategoryStyles.rendering),
-
-    [Types.Events.Name.RASTER_TASK]:
-        new TimelineRecordStyle(i18nString(UIStrings.rasterizePaint), defaultCategoryStyles.painting),
-
-    [Types.Events.Name.SCROLL_LAYER]:
-        new TimelineRecordStyle(i18nString(UIStrings.scroll), defaultCategoryStyles.rendering),
-
-    [Types.Events.Name.COMMIT]: new TimelineRecordStyle(i18nString(UIStrings.commit), defaultCategoryStyles.painting),
-
-    [Types.Events.Name.COMPOSITE_LAYERS]:
-        new TimelineRecordStyle(i18nString(UIStrings.compositeLayers), defaultCategoryStyles.painting),
-
-    [Types.Events.Name.COMPUTE_INTERSECTION]: new TimelineRecordStyle(
-        i18nString(UIStrings.computeIntersections),
-        defaultCategoryStyles.rendering,
-        ),
-
-    [Types.Events.Name.PARSE_HTML]:
-        new TimelineRecordStyle(i18nString(UIStrings.parseHtml), defaultCategoryStyles.loading),
-
-    [Types.Events.Name.PARSE_AUTHOR_STYLE_SHEET]:
-        new TimelineRecordStyle(i18nString(UIStrings.parseStylesheet), defaultCategoryStyles.loading),
-
-    [Types.Events.Name.TIMER_INSTALL]:
-        new TimelineRecordStyle(i18nString(UIStrings.installTimer), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.TIMER_REMOVE]:
-        new TimelineRecordStyle(i18nString(UIStrings.removeTimer), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.TIMER_FIRE]:
-        new TimelineRecordStyle(i18nString(UIStrings.timerFired), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.XHR_READY_STATE_CHANGED]: new TimelineRecordStyle(
-        i18nString(UIStrings.xhrReadyStateChange),
-        defaultCategoryStyles.scripting,
-        ),
-
-    [Types.Events.Name.XHR_LOAD]:
-        new TimelineRecordStyle(i18nString(UIStrings.xhrLoad), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.COMPILE]:
-        new TimelineRecordStyle(i18nString(UIStrings.compileScript), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CACHE_SCRIPT]:
-        new TimelineRecordStyle(i18nString(UIStrings.cacheScript), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.COMPILE_CODE]:
-        new TimelineRecordStyle(i18nString(UIStrings.compileCode), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.OPTIMIZE_CODE]:
-        new TimelineRecordStyle(i18nString(UIStrings.optimizeCode), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.EVALUATE_SCRIPT]:
-        new TimelineRecordStyle(i18nString(UIStrings.evaluateScript), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.COMPILE_MODULE]:
-        new TimelineRecordStyle(i18nString(UIStrings.compileModule), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CACHE_MODULE]:
-        new TimelineRecordStyle(i18nString(UIStrings.cacheModule), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.EVALUATE_MODULE]:
-        new TimelineRecordStyle(i18nString(UIStrings.evaluateModule), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.STREAMING_COMPILE_SCRIPT]:
-        new TimelineRecordStyle(i18nString(UIStrings.streamingCompileTask), defaultCategoryStyles.other),
-
-    [Types.Events.Name.STREAMING_COMPILE_SCRIPT_WAITING]:
-        new TimelineRecordStyle(i18nString(UIStrings.waitingForNetwork), defaultCategoryStyles.idle),
-
-    [Types.Events.Name.STREAMING_COMPILE_SCRIPT_PARSING]:
-        new TimelineRecordStyle(i18nString(UIStrings.parseAndCompile), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.BACKGROUND_DESERIALIZE]: new TimelineRecordStyle(
-        i18nString(UIStrings.deserializeCodeCache),
-        defaultCategoryStyles.scripting,
-        ),
-
-    [Types.Events.Name.FINALIZE_DESERIALIZATION]:
-        new TimelineRecordStyle(i18nString(UIStrings.profilingOverhead), defaultCategoryStyles.other),
-
-    [Types.Events.Name.WASM_STREAM_FROM_RESPONSE_CALLBACK]: new TimelineRecordStyle(
-        i18nString(UIStrings.streamingWasmResponse),
-        defaultCategoryStyles.scripting,
-        ),
-
-    [Types.Events.Name.WASM_COMPILED_MODULE]:
-        new TimelineRecordStyle(i18nString(UIStrings.compiledWasmModule), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.WASM_CACHED_MODULE]:
-        new TimelineRecordStyle(i18nString(UIStrings.cachedWasmModule), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.WASM_MODULE_CACHE_HIT]:
-        new TimelineRecordStyle(i18nString(UIStrings.wasmModuleCacheHit), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.WASM_MODULE_CACHE_INVALID]: new TimelineRecordStyle(
-        i18nString(UIStrings.wasmModuleCacheInvalid),
-        defaultCategoryStyles.scripting,
-        ),
-
-    [Types.Events.Name.FRAME_STARTED_LOADING]: new TimelineRecordStyle(
-        i18nString(UIStrings.frameStartedLoading),
-        defaultCategoryStyles.loading,
-        true,
-        ),
-
-    [Types.Events.Name.MARK_LOAD]: new TimelineRecordStyle(
-        i18nString(UIStrings.onloadEvent),
-        defaultCategoryStyles.scripting,
-        true,
-        ),
-
-    [Types.Events.Name.MARK_DOM_CONTENT]: new TimelineRecordStyle(
-        i18nString(UIStrings.domcontentloadedEvent),
-        defaultCategoryStyles.scripting,
-        true,
-        ),
-
-    [Types.Events.Name.MARK_FIRST_PAINT]: new TimelineRecordStyle(
-        i18nString(UIStrings.firstPaint),
-        defaultCategoryStyles.painting,
-        true,
-        ),
-
-    [Types.Events.Name.MARK_FCP]: new TimelineRecordStyle(
-        i18nString(UIStrings.firstContentfulPaint),
-        defaultCategoryStyles.rendering,
-        true,
-        ),
-
-    [Types.Events.Name.MARK_LCP_CANDIDATE]: new TimelineRecordStyle(
-        i18nString(UIStrings.largestContentfulPaint),
-        defaultCategoryStyles.rendering,
-        true,
-        ),
-
-    [Types.Events.Name.TIME_STAMP]:
-        new TimelineRecordStyle(i18nString(UIStrings.timestamp), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CONSOLE_TIME]:
-        new TimelineRecordStyle(i18nString(UIStrings.consoleTime), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.USER_TIMING]:
-        new TimelineRecordStyle(i18nString(UIStrings.userTiming), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.RESOURCE_WILL_SEND_REQUEST]:
-        new TimelineRecordStyle(i18nString(UIStrings.willSendRequest), defaultCategoryStyles.loading),
-
-    [Types.Events.Name.RESOURCE_SEND_REQUEST]:
-        new TimelineRecordStyle(i18nString(UIStrings.sendRequest), defaultCategoryStyles.loading),
-
-    [Types.Events.Name.RESOURCE_RECEIVE_RESPONSE]:
-        new TimelineRecordStyle(i18nString(UIStrings.receiveResponse), defaultCategoryStyles.loading),
-
-    [Types.Events.Name.RESOURCE_FINISH]:
-        new TimelineRecordStyle(i18nString(UIStrings.finishLoading), defaultCategoryStyles.loading),
-
-    [Types.Events.Name.RESOURCE_RECEIVE_DATA]:
-        new TimelineRecordStyle(i18nString(UIStrings.receiveData), defaultCategoryStyles.loading),
-
-    [Types.Events.Name.RUN_MICROTASKS]:
-        new TimelineRecordStyle(i18nString(UIStrings.runMicrotasks), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.FUNCTION_CALL]:
-        new TimelineRecordStyle(i18nString(UIStrings.functionCall), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.GC]: new TimelineRecordStyle(i18nString(UIStrings.gcEvent), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.MAJOR_GC]:
-        new TimelineRecordStyle(i18nString(UIStrings.majorGc), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.MINOR_GC]:
-        new TimelineRecordStyle(i18nString(UIStrings.minorGc), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CPPGC_SWEEP]:
-        new TimelineRecordStyle(i18nString(UIStrings.cppGc), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.REQUEST_ANIMATION_FRAME]: new TimelineRecordStyle(
-        i18nString(UIStrings.requestAnimationFrame),
-        defaultCategoryStyles.scripting,
-        ),
-
-    [Types.Events.Name.CANCEL_ANIMATION_FRAME]: new TimelineRecordStyle(
-        i18nString(UIStrings.cancelAnimationFrame),
-        defaultCategoryStyles.scripting,
-        ),
-
-    [Types.Events.Name.FIRE_ANIMATION_FRAME]: new TimelineRecordStyle(
-        i18nString(UIStrings.animationFrameFired),
-        defaultCategoryStyles.scripting,
-        ),
-
-    [Types.Events.Name.REQUEST_IDLE_CALLBACK]: new TimelineRecordStyle(
-        i18nString(UIStrings.requestIdleCallback),
-        defaultCategoryStyles.scripting,
-        ),
-
-    [Types.Events.Name.CANCEL_IDLE_CALLBACK]:
-        new TimelineRecordStyle(i18nString(UIStrings.cancelIdleCallback), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.FIRE_IDLE_CALLBACK]:
-        new TimelineRecordStyle(i18nString(UIStrings.fireIdleCallback), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.WEB_SOCKET_CREATE]:
-        new TimelineRecordStyle(i18nString(UIStrings.createWebsocket), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.WEB_SOCKET_SEND_HANDSHAKE_REQUEST]: new TimelineRecordStyle(
-        i18nString(UIStrings.sendWebsocketHandshake),
-        defaultCategoryStyles.scripting,
-        ),
-
-    [Types.Events.Name.WEB_SOCKET_RECEIVE_HANDSHAKE_REQUEST]: new TimelineRecordStyle(
-        i18nString(UIStrings.receiveWebsocketHandshake),
-        defaultCategoryStyles.scripting,
-        ),
-
-    [Types.Events.Name.WEB_SOCKET_DESTROY]:
-        new TimelineRecordStyle(i18nString(UIStrings.destroyWebsocket), defaultCategoryStyles.scripting),
-    [Types.Events.Name.WEB_SOCKET_SEND]: new TimelineRecordStyle(
-        i18nString(UIStrings.wsMessageSent),
-        defaultCategoryStyles.scripting,
-        ),
-    [Types.Events.Name.WEB_SOCKET_RECEIVE]: new TimelineRecordStyle(
-        i18nString(UIStrings.wsMessageReceived),
-        defaultCategoryStyles.scripting,
-        ),
-
-    [Types.Events.Name.EMBEDDER_CALLBACK]:
-        new TimelineRecordStyle(i18nString(UIStrings.embedderCallback), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.DECODE_IMAGE]:
-        new TimelineRecordStyle(i18nString(UIStrings.imageDecode), defaultCategoryStyles.painting),
-
-    [Types.Events.Name.GPU_TASK]: new TimelineRecordStyle(i18nString(UIStrings.gpu), defaultCategoryStyles.gpu),
-
-    [Types.Events.Name.GC_COLLECT_GARBARGE]:
-        new TimelineRecordStyle(i18nString(UIStrings.domGc), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CRYPTO_DO_ENCRYPT]:
-        new TimelineRecordStyle(i18nString(UIStrings.encrypt), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CRYPTO_DO_ENCRYPT_REPLY]:
-        new TimelineRecordStyle(i18nString(UIStrings.encryptReply), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CRYPTO_DO_DECRYPT]:
-        new TimelineRecordStyle(i18nString(UIStrings.decrypt), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CRYPTO_DO_DECRYPT_REPLY]:
-        new TimelineRecordStyle(i18nString(UIStrings.decryptReply), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CRYPTO_DO_DIGEST]:
-        new TimelineRecordStyle(i18nString(UIStrings.digest), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CRYPTO_DO_DIGEST_REPLY]:
-        new TimelineRecordStyle(i18nString(UIStrings.digestReply), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CRYPTO_DO_SIGN]:
-        new TimelineRecordStyle(i18nString(UIStrings.sign), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CRYPTO_DO_SIGN_REPLY]:
-        new TimelineRecordStyle(i18nString(UIStrings.signReply), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CRYPTO_DO_VERIFY]:
-        new TimelineRecordStyle(i18nString(UIStrings.verify), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.CRYPTO_DO_VERIFY_REPLY]:
-        new TimelineRecordStyle(i18nString(UIStrings.verifyReply), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.ASYNC_TASK]:
-        new TimelineRecordStyle(i18nString(UIStrings.asyncTask), defaultCategoryStyles.async),
-
-    [Types.Events.Name.LAYOUT_SHIFT]: new TimelineRecordStyle(
-        i18nString(UIStrings.layoutShift), defaultCategoryStyles.experience,
-        /* Mark LayoutShifts as hidden; in the timeline we render
-        * SyntheticLayoutShifts so those are the ones visible to the user */
-        true),
-
-    [Types.Events.Name.SYNTHETIC_LAYOUT_SHIFT]:
-        new TimelineRecordStyle(i18nString(UIStrings.layoutShift), defaultCategoryStyles.experience),
-
-    [Types.Events.Name.SYNTHETIC_LAYOUT_SHIFT_CLUSTER]:
-        new TimelineRecordStyle(i18nString(UIStrings.layoutShiftCluster), defaultCategoryStyles.experience),
-
-    [Types.Events.Name.EVENT_TIMING]:
-        new TimelineRecordStyle(i18nString(UIStrings.eventTiming), defaultCategoryStyles.experience),
-
-    [Types.Events.Name.HANDLE_POST_MESSAGE]:
-        new TimelineRecordStyle(i18nString(UIStrings.onMessage), defaultCategoryStyles.messaging),
-
-    [Types.Events.Name.SCHEDULE_POST_MESSAGE]:
-        new TimelineRecordStyle(i18nString(UIStrings.schedulePostMessage), defaultCategoryStyles.messaging),
-
-    [Types.Events.Name.SCHEDULE_POST_TASK_CALLBACK]:
-        new TimelineRecordStyle(i18nString(UIStrings.schedulePostTaskCallback), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.RUN_POST_TASK_CALLBACK]:
-        new TimelineRecordStyle(i18nString(UIStrings.runPostTaskCallback), defaultCategoryStyles.scripting),
-
-    [Types.Events.Name.ABORT_POST_TASK_CALLBACK]:
-        new TimelineRecordStyle(i18nString(UIStrings.abortPostTaskCallback), defaultCategoryStyles.scripting),
-    [Types.Events.Name.V8_CONSOLE_RUN_TASK]:
-        new TimelineRecordStyle(i18nString(UIStrings.consoleTaskRun), defaultCategoryStyles.scripting),
-  };
-
-  // TODO(crbug.com/410884528): remove assertion after deduped eventStylesMap for VISIBLE_TRACE_EVENT_TYPES.
-  const visibleEventStyles =
-      Object.entries(eventStylesMap).filter(([, style]) => style.hidden === false).map(([
-                                                                                         key,
-                                                                                       ]) => key);
-  const visibleTraceEventsComplete = visibleEventStyles.every(eventType => {
-    return Helpers.Trace.VISIBLE_TRACE_EVENT_TYPES.has(eventType as Types.Events.Name);
-  });
-
-  const eventStylesMapKeys = Object.keys(eventStylesMap) as Types.Events.Name[];
-  const eventStylesComplete = Array.from(Helpers.Trace.VISIBLE_TRACE_EVENT_TYPES).every(eventType => {
-    return eventStylesMapKeys.includes(eventType);
-  });
-
-  if (!visibleTraceEventsComplete || !eventStylesComplete) {
-    throw new Error('eventStylesMap and VISIBLE_TRACE_EVENT_TYPES are out of sync!');
-  }
-  return eventStylesMap;
-}
-
-export function setEventStylesMap(eventStyles: EventStylesMap): void {
-  eventStylesMap = eventStyles;
-}
-
-export function setCategories(cats: CategoryPalette): void {
-  categoryStyles = cats;
-}
-
-export function visibleTypes(): string[] {
-  const eventStyles = maybeInitSylesMap();
-  const result = [];
-  for (const name in eventStyles) {
-    // Typescript cannot infer that `name` is a key of eventStyles
-    const nameAsKey = name as keyof typeof eventStyles;
-    if (!eventStyles[nameAsKey]?.hidden) {
-      result.push(name);
-    }
-  }
-  return result;
-}
-
-export function getTimelineMainEventCategories(): EventCategory[] {
-  if (mainEventCategories) {
-    return mainEventCategories;
-  }
-  mainEventCategories = [
-    EventCategory.IDLE,
-    EventCategory.LOADING,
-    EventCategory.PAINTING,
-    EventCategory.RENDERING,
-    EventCategory.SCRIPTING,
-    EventCategory.OTHER,
-  ];
-  return mainEventCategories;
-}
-
-export function setTimelineMainEventCategories(categories: EventCategory[]): void {
-  mainEventCategories = categories;
-}
-
-export function markerDetailsForEvent(event: Types.Events.Event): {
-  color: string,
-  title: string,
-} {
-  let title = '';
-  let color = 'var(--color-text-primary)';
-  if (Types.Events.isFirstContentfulPaint(event)) {
-    color = 'var(--sys-color-green-bright)';
-    title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.FCP;
-  }
-  if (Types.Events.isLargestContentfulPaintCandidate(event)) {
-    color = 'var(--sys-color-green)';
-    title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP;
-  }
-  if (Types.Events.isNavigationStart(event)) {
-    color = 'var(--color-text-primary)';
-    title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.NAV;
-  }
-  if (Types.Events.isMarkDOMContent(event)) {
-    color = 'var(--color-text-disabled)';
-    title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.DCL;
-  }
-  if (Types.Events.isMarkLoad(event)) {
-    color = 'var(--color-text-disabled)';
-    title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.L;
-  }
-  return {color, title};
-}