devtools-tracing 1.0.0

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

@@ -0,0 +1,1138 @@
+// 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};
+}