| // 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 in Timeline UIUtils of the Performance panel |
| */ |
| softLargestContentfulPaint: 'Soft 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: 'C++ 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.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: new TimelineRecordStyle( |
| i18nString(UIStrings.softLargestContentfulPaint), |
| 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.isAnyLargestContentfulPaintCandidate(event)) { |
| color = 'var(--sys-color-green)'; |
| title = Types.Events.isSoftLargestContentfulPaintCandidate(event) ? |
| Handlers.ModelHandlers.PageLoadMetrics.MetricName.SOFT_LCP : |
| Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP; |
| } |
| if (Types.Events.isNavigationStart(event) || Types.Events.isSoftNavigationStart(event)) { |
| color = 'var(--color-text-primary)'; |
| title = Types.Events.isSoftNavigationStart(event) ? Handlers.ModelHandlers.PageLoadMetrics.MetricName.SOFT_NAV : |
| 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}; |
| } |
