// Copyright 2021 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /* * Copyright (C) 2013 Google Inc. All rights reserved. * Copyright (C) 2012 Intel Inc. All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are * met: * * * Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * * Redistributions in binary form must reproduce the above * copyright notice, this list of conditions and the following disclaimer * in the documentation and/or other materials provided with the * distribution. * * Neither the name of Google Inc. nor the names of its * contributors may be used to endorse or promote products derived from * this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ import * as Common from '../../core/common/common.js'; import * as i18n from '../../core/i18n/i18n.js'; import * as Platform from '../../core/platform/platform.js'; import * as SDK from '../../core/sdk/sdk.js'; import * as Bindings from '../../models/bindings/bindings.js'; import * as TimelineModel from '../../models/timeline_model/timeline_model.js'; import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js'; import * as Components from '../../ui/legacy/components/utils/utils.js'; import * as UI from '../../ui/legacy/legacy.js'; import type * as Protocol from '../../generated/protocol.js'; import invalidationsTreeStyles from './invalidationsTree.css.js'; // eslint-disable-next-line rulesdir/es_modules_import import imagePreviewStyles from '../../ui/legacy/components/utils/imagePreview.css.js'; import {CLSRect} from './CLSLinkifier.js'; import {TimelinePanel, TimelineSelection} from './TimelinePanel.js'; const UIStrings = { /** *@description Text in Timeline UIUtils of the Performance panel *@example {node1} PH1 *@example {node2} PH2 */ sAndS: '{PH1} and {PH2}', /** *@description Text in Timeline UIUtils of the Performance panel *@example {node1} PH1 *@example {node2} PH2 */ sAndSOther: '{PH1}, {PH2}, and 1 other', /** *@description Text in Timeline UIUtils of the Performance panel */ task: '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 */ frameStartMainThread: 'Frame Start (main thread)', /** *@description Text in Timeline UIUtils of the Performance panel */ drawFrame: 'Draw Frame', /** *@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 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 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` Ready State Change', /** * @description Text for an event. Shown in the timeline in the Perforamnce 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 Perforamnce 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 */ 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 Event category in the Performance panel for time spent to execute JavaScript */ jsFrame: 'JS Frame', /** *@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 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 resize an image */ imageResize: 'Image Resize', /** *@description Event category in the Performance panel for time spent in the GPU */ gpu: 'GPU', /** *@description Text in Timeline UIUtils of the Performance panel */ inputLatency: 'Input Latency', /** *@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 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 UIUtils of the Performance panel */ keyCharacter: 'Key — Character', /** *@description Text in Timeline UIUtils of the Performance panel */ keyDown: 'Key Down', /** *@description Noun for the end keyboard key event in the Performance panel. 'Up' refers to the keyboard key bouncing back up after being pushed down. */ keyUp: 'Key Up', /** *@description Noun for a mouse click event in the Performance panel. */ click: 'Click', /** *@description Text in Timeline UIUtils of the Performance panel */ contextMenu: 'Context Menu', /** *@description Noun for the start of a mouse event in the Performance panel. Down refers to the button on the mouse being pressed down. */ mouseDown: 'Mouse Down', /** *@description Noun for a mouse move event in the Performance panel. */ mouseMove: 'Mouse Move', /** *@description Noun for the end of a mouse event in the Performance panel. Up refers to the button on the mouse being released. */ mouseUp: 'Mouse Up', /** *@description Text in Timeline UIUtils of the Performance panel */ mouseWheel: 'Mouse Wheel', /** *@description Noun for the beginning of a mouse scroll wheel event in the Performance panel. */ scrollBegin: 'Scroll Begin', /** *@description Text in Timeline UIUtils of the Performance panel */ scrollEnd: 'Scroll End', /** *@description Noun for an update of a mouse scroll wheel event in the Performance panel. */ scrollUpdate: 'Scroll Update', /** *@description Noun for the beginning of a fling gesture event in the Performance panel. */ flingStart: 'Fling Start', /** *@description Noun for the end of a fling gesture event in the Performance panel. */ flingHalt: 'Fling Halt', /** *@description Noun for a tap event (tap on a touch screen device) in the Performance panel. */ tap: 'Tap', /** *@description Noun for the end of a tap event (tap on a touch screen device) in the Performance panel. */ tapHalt: 'Tap Halt', /** *@description Noun for the start of a tap event (tap on a touch screen device) in the Performance panel. */ tapBegin: 'Tap Begin', /** *@description Noun for the beginning of a tap gesture event in the Performance *panel. 'Down' refers to the start (downward tap direction), as opposed to up *(finger leaving the touch surface). */ tapDown: 'Tap Down', /** * @description Noun for the cancelation of an input touch event in the Performance panel. * For example this can happen when the user touches the surface with too many fingers. * This is opposed to a "Touch End" event, where the user lifts the finger from the surface. */ touchCancel: 'Touch Cancel', /** *@description Noun for the end of an input touch event in the Performance panel. */ touchEnd: 'Touch End', /** *@description Noun for an input touch event in the Performance panel. */ touchMove: 'Touch Move', /** *@description Noun for the start of an input touch event in the Performance panel. */ touchStart: 'Touch Start', /** *@description Noun for the beginning of a pinch gesture event in the Performance panel. */ pinchBegin: 'Pinch Begin', /** *@description Text in Timeline UIUtils of the Performance panel */ pinchEnd: 'Pinch End', /** *@description Text in Timeline UIUtils of the Performance panel */ pinchUpdate: 'Pinch Update', /** *@description Text in Timeline UIUtils of the Performance panel */ compile: 'Compile', /** *@description Text to parse something */ parse: 'Parse', /** *@description Text with two placeholders separated by a colon *@example {Node removed} PH1 *@example {div#id1} PH2 */ sS: '{PH1}: {PH2}', /** *@description Label of a field in a timeline. A Network response refers to the act of acknowledging a network request. Should not be confused with answer. */ response: 'Response', /** *@description Text in Timeline UIUtils of the Performance panel */ fling: 'Fling', /** *@description Text in Timeline UIUtils of the Performance panel */ drag: 'Drag', /** *@description Text in Timeline UIUtils of the Performance panel */ uncategorized: 'Uncategorized', /** *@description Details text in Timeline UIUtils of the Performance panel *@example {30 MB} PH1 */ sCollected: '{PH1} collected', /** *@description Details text in Timeline UIUtils of the Performance panel *@example {https://example.com} PH1 *@example {2} PH2 *@example {4} PH3 */ sSs: '{PH1} [{PH2}…{PH3}]', /** *@description Details text in Timeline UIUtils of the Performance panel *@example {https://example.com} PH1 *@example {2} PH2 */ sSSquareBrackets: '{PH1} [{PH2}…]', /** *@description Text that is usually a hyperlink to more documentation */ learnMore: 'Learn more', /** *@description Text in Timeline UIUtils of the Performance panel */ compilationCacheStatus: 'Compilation cache status', /** *@description Text in Timeline UIUtils of the Performance panel */ compilationCacheSize: 'Compilation cache size', /** *@description Text in Timeline UIUtils of the Performance panel */ scriptLoadedFromCache: 'script loaded from cache', /** *@description Text in Timeline UIUtils of the Performance panel */ failedToLoadScriptFromCache: 'failed to load script from cache', /** *@description Text in Timeline UIUtils of the Performance panel */ scriptNotEligible: 'script not eligible', /** *@description Text for the total time of something */ totalTime: 'Total Time', /** *@description Time of a single activity, as opposed to the total time */ selfTime: 'Self Time', /** *@description Label in the summary view in the Performance panel for a number which indicates how much managed memory has been reclaimed by performing Garbage Collection */ collected: 'Collected', /** *@description Text for a programming function */ function: 'Function', /** *@description Text in Timeline UIUtils of the Performance panel */ timerId: 'Timer ID', /** *@description Text in Timeline UIUtils of the Performance panel */ timeout: 'Timeout', /** *@description Text in Timeline UIUtils of the Performance panel */ repeats: 'Repeats', /** *@description Text in Timeline UIUtils of the Performance panel */ callbackId: 'Callback ID', /** *@description Text that refers to the resources of the web page */ resource: 'Resource', /** *@description Text that refers to the network request method */ requestMethod: 'Request Method', /** *@description Status code of an event */ statusCode: 'Status Code', /** *@description Text in Timeline UIUtils of the Performance panel */ mimeTypeCaps: 'MIME Type', /** *@description Text to show the priority of an item */ priority: 'Priority', /** *@description Text in Timeline UIUtils of the Performance panel */ encodedData: 'Encoded Data', /** *@description Text in Timeline UIUtils of the Performance panel */ sBytes: '{n, plural, =1 {# Byte} other {# Bytes}}', /** *@description Text in Timeline UIUtils of the Performance panel */ decodedBody: 'Decoded Body', /** *@description Text for a module, the programming concept */ module: 'Module', /** *@description Label for a group of JavaScript files */ script: 'Script', /** *@description Text in Timeline UIUtils of the Performance panel */ streamed: 'Streamed', /** *@description Text in Timeline UIUtils of the Performance panel */ eagerCompile: 'Compiling all functions eagerly', /** *@description Text in Timeline UIUtils of the Performance panel */ url: 'Url', /** *@description Text in Timeline UIUtils of the Performance panel */ producedCacheSize: 'Produced Cache Size', /** *@description Text in Timeline UIUtils of the Performance panel */ consumedCacheSize: 'Consumed Cache Size', /** *@description Title for a group of cities */ location: 'Location', /** *@description Text in Timeline UIUtils of the Performance panel *@example {2} PH1 *@example {2} PH2 */ sSCurlyBrackets: '({PH1}, {PH2})', /** *@description Text in Timeline UIUtils of the Performance panel */ dimensions: 'Dimensions', /** *@description Text in Timeline UIUtils of the Performance panel *@example {2} PH1 *@example {2} PH2 */ sSDimensions: '{PH1} × {PH2}', /** *@description Related node label in Timeline UIUtils of the Performance panel */ layerRoot: 'Layer Root', /** *@description Related node label in Timeline UIUtils of the Performance panel */ ownerElement: 'Owner Element', /** *@description Text in Timeline UIUtils of the Performance panel */ imageUrl: 'Image URL', /** *@description Text in Timeline UIUtils of the Performance panel */ stylesheetUrl: 'Stylesheet URL', /** *@description Text in Timeline UIUtils of the Performance panel */ elementsAffected: 'Elements Affected', /** *@description Text in Timeline UIUtils of the Performance panel */ nodesThatNeedLayout: 'Nodes That Need Layout', /** *@description Text in Timeline UIUtils of the Performance panel *@example {2} PH1 *@example {10} PH2 */ sOfS: '{PH1} of {PH2}', /** *@description Related node label in Timeline UIUtils of the Performance panel */ layoutRoot: 'Layout root', /** *@description Text in Timeline UIUtils of the Performance panel */ message: 'Message', /** *@description Text in Timeline UIUtils of the Performance panel */ websocketProtocol: 'WebSocket Protocol', /** *@description Text in Timeline UIUtils of the Performance panel */ callbackFunction: 'Callback Function', /** *@description The current state of an item */ state: 'State', /** *@description Text in Timeline UIUtils of the Performance panel */ range: 'Range', /** *@description Text in Timeline UIUtils of the Performance panel */ allottedTime: 'Allotted Time', /** *@description Text in Timeline UIUtils of the Performance panel */ invokedByTimeout: 'Invoked by Timeout', /** *@description Text that refers to some types */ type: 'Type', /** *@description Text for the size of something */ size: 'Size', /** *@description Text for the details of something */ details: 'Details', /** *@description Title in Timeline for Cumulative Layout Shifts */ cumulativeLayoutShifts: 'Cumulative Layout Shifts', /** *@description Text for the link to the evolved CLS website */ evolvedClsLink: 'evolved', /** *@description Warning in Timeline that CLS can cause a poor user experience. It contains a link to inform developers about the recent changes to how CLS is measured. The new CLS metric is said to have evolved from the previous version. *@example {Link to web.dev/metrics} PH1 *@example {Link to web.dev/evolving-cls which will always have the text 'evolved'} PH2 */ sCLSInformation: '{PH1} can result in poor user experiences. It has recently {PH2}.', /** *@description Text to indicate an item is a warning */ warning: 'Warning', /** *@description Title for the Timeline CLS Score */ score: 'Score', /** *@description Text in Timeline for the cumulative CLS score */ cumulativeScore: 'Cumulative Score', /** *@description Text in Timeline for the current CLS score */ currentClusterScore: 'Current Cluster Score', /** *@description Text in Timeline for the current CLS cluster */ currentClusterId: 'Current Cluster ID', /** *@description Text in Timeline for whether input happened recently */ hadRecentInput: 'Had recent input', /** *@description Text in Timeline indicating that input has happened recently */ yes: 'Yes', /** *@description Text in Timeline indicating that input has not happened recently */ no: 'No', /** *@description Label for Cumulative Layout records, indicating where they moved from */ movedFrom: 'Moved from', /** *@description Label for Cumulative Layout records, indicating where they moved to */ movedTo: 'Moved to', /** *@description Text in Timeline UIUtils of the Performance panel */ timeWaitingForMainThread: 'Time Waiting for Main Thread', /** *@description Text in Timeline UIUtils of the Performance panel */ relatedNode: 'Related Node', /** *@description Text for previewing items */ preview: 'Preview', /** *@description Text in Timeline UIUtils of the Performance panel */ aggregatedTime: 'Aggregated Time', /** *@description Text in Timeline UIUtils of the Performance panel */ networkRequest: 'Network request', /** *@description Text in Timeline UIUtils of the Performance panel */ loadFromCache: 'load from cache', /** *@description Text in Timeline UIUtils of the Performance panel */ networkTransfer: 'network transfer', /** *@description Text in Timeline UIUtils of the Performance panel *@example {1ms} PH1 *@example {network transfer} PH2 *@example {1ms} PH3 */ SSSResourceLoading: ' ({PH1} {PH2} + {PH3} resource loading)', /** *@description Text for the duration of something */ duration: 'Duration', /** *@description Text in Timeline UIUtils of the Performance panel */ mimeType: 'Mime Type', /** *@description Text in Timeline UIUtils of the Performance panel */ FromMemoryCache: ' (from memory cache)', /** *@description Text in Timeline UIUtils of the Performance panel */ FromCache: ' (from cache)', /** *@description Label for a network request indicating that it was a HTTP2 server push instead of a regular network request, in the Performance panel */ FromPush: ' (from push)', /** *@description Text in Timeline UIUtils of the Performance panel */ FromServiceWorker: ' (from `service worker`)', /** *@description Text for the initiator of something */ initiator: 'Initiator', /** *@description Call site stack label in Timeline UIUtils of the Performance panel */ timerInstalled: 'Timer Installed', /** *@description Call site stack label in Timeline UIUtils of the Performance panel */ animationFrameRequested: 'Animation Frame Requested', /** *@description Call site stack label in Timeline UIUtils of the Performance panel */ idleCallbackRequested: 'Idle Callback Requested', /** *@description Stack label in Timeline UIUtils of the Performance panel */ recalculationForced: 'Recalculation Forced', /** *@description Call site stack label in Timeline UIUtils of the Performance panel */ firstLayoutInvalidation: 'First Layout Invalidation', /** *@description Stack label in Timeline UIUtils of the Performance panel */ layoutForced: 'Layout Forced', /** *@description Text in Timeline UIUtils of the Performance panel */ callStacks: 'Call Stacks', /** *@description Text for the execution stack trace */ stackTrace: 'Stack Trace', /** *@description Text in Timeline UIUtils of the Performance panel */ invalidations: 'Invalidations', /** * @description Text in Timeline UIUtils of the Performance panel. Phrase is followed by a number of milliseconds. * Some events or tasks might have been only started, but have not ended yet. Such events or tasks are considered * "pending". */ pendingFor: 'Pending for', /** *@description Text for revealing an item in its destination */ reveal: 'Reveal', /** *@description Noun label for a stack trace which indicates the first time some condition was invalidated. */ firstInvalidated: 'First Invalidated', /** *@description Title in Timeline UIUtils of the Performance panel */ styleInvalidations: 'Style Invalidations', /** *@description Title in Timeline UIUtils of the Performance panel */ layoutInvalidations: 'Layout Invalidations', /** *@description Title in Timeline UIUtils of the Performance panel */ otherInvalidations: 'Other Invalidations', /** *@description Title of the paint profiler, old name of the performance pane */ paintProfiler: 'Paint Profiler', /** *@description Text in Timeline Flame Chart View of the Performance panel *@example {Frame} PH1 *@example {10ms} PH2 */ sAtS: '{PH1} at {PH2}', /** *@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 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 *@example {blink.console} PH1 */ sSelf: '{PH1} (self)', /** *@description Text in Timeline UIUtils of the Performance panel *@example {blink.console} PH1 */ sChildren: '{PH1} (children)', /** *@description Text in Timeline UIUtils of the Performance panel */ timeSpentInRendering: 'Time spent in rendering', /** *@description Text for a rendering frame */ frame: 'Frame', /** *@description Text in Timeline UIUtils of the Performance panel */ cpuTime: 'CPU time', /** *@description Text in Timeline UIUtils of the Performance panel */ layerTree: 'Layer tree', /** *@description Text in Timeline UIUtils of the Performance panel */ show: 'Show', /** *@description Text in Timeline UIUtils of the Performance panel *@example {10ms} PH1 *@example {10ms} PH2 */ sAtSParentheses: '{PH1} (at {PH2})', /** *@description Text that only contain a placeholder *@example {100ms (at 200ms)} PH1 */ emptyPlaceholder: '{PH1}', // eslint-disable-line rulesdir/l10n_no_locked_or_placeholder_only_phrase /** *@description Text in Timeline UIUtils of the Performance panel */ jank: 'jank', /** *@description Text in Timeline UIUtils of the Performance panel *@example {Took 3ms} PH1 *@example {jank} PH2 */ sLongFrameTimesAreAnIndicationOf: '{PH1}. Long frame times are an indication of {PH2}', /** *@description Text in Timeline UIUtils of the Performance panel */ forcedReflow: 'Forced reflow', /** *@description Text in Timeline UIUtils of the Performance panel *@example {Forced reflow} PH1 */ sIsALikelyPerformanceBottleneck: '{PH1} is a likely performance bottleneck.', /** *@description Span text content in Timeline UIUtils of the Performance panel *@example {10ms} PH1 */ idleCallbackExecutionExtended: 'Idle callback execution extended beyond deadline by {PH1}', /** *@description Span text content in Timeline UIUtils of the Performance panel *@example {10ms} PH1 */ handlerTookS: 'Handler took {PH1}', /** *@description Warning to the user in the Performance panel that an input handler, which was run multiple times, took too long. Placeholder text is time in ms. *@example {20ms} PH1 */ recurringHandlerTookS: 'Recurring handler took {PH1}', /** *@description Text in Timeline UIUtils of the Performance panel */ longTask: 'Long task', /** *@description Text in Timeline UIUtils of the Performance panel *@example {task} PH1 *@example {10ms} PH2 */ sTookS: '{PH1} took {PH2}.', /** *@description Text that indicates something is not optimized */ notOptimized: 'Not optimized', /** *@description Text that starts with a colon and includes a placeholder *@example {3.0} PH1 */ emptyPlaceholderColon: ': {PH1}', /** *@description Text in Timeline UIUtils of the Performance panel */ unknownCause: 'Unknown cause', /** *@description Text in Timeline UIUtils of the Performance panel *@example {Unkown reason} PH1 *@example {node1} PH2 */ sForS: '{PH1} for {PH2}', /** *@description Text in Timeline UIUtils of the Performance panel *@example {StyleInvalidator for element} PH1 *@example {Stack trace: function line} PH2 */ sSDot: '{PH1}. {PH2}', /** *@description Text in Object Properties Section */ unknown: 'unknown', /** *@description Text of a DOM element in Timeline UIUtils of the Performance panel */ stackTraceColon: 'Stack trace:', /** *@description Text in Timeline UIUtils of the Performance panel */ nodes: 'Nodes:', /** *@description Text in Timeline UIUtils of the Performance panel */ node: 'Node:', /** *@description Text of a DOM element in Timeline UIUtils of the Performance panel *@example {id2} PH1 *@example {a, b} PH2 */ changedIdToSs: '(changed id to "{PH1}"{PH2})', /** *@description Text of a DOM element in Timeline UIUtils of the Performance panel *@example {class-name2} PH1 *@example {a, b} PH2 */ changedClassToSs: '(changed class to "{PH1}"{PH2})', /** *@description Text of a DOM element in Timeline UIUtils of the Performance panel *@example {attribute-name} PH1 *@example {a, b} PH2 */ changedAttributeToSs: '(changed attribute to "{PH1}"{PH2})', /** *@description Text of a DOM element in Timeline UIUtils of the Performance panel *@example {after} PH1 *@example {a, b} PH2 */ changedPesudoToSs: '(changed pseudo to "{PH1}"{PH2})', /** *@description Text of a DOM element in Timeline UIUtils of the Performance panel *@example {part} PH1 *@example {a, b} PH2 */ changedSs: '(changed "{PH1}"{PH2})', /** *@description Text in Timeline UIUtils of the Performance panel *@example {node1} PH1 *@example {node2} PH2 *@example {2} PH3 */ sSAndSOthers: '{PH1}, {PH2}, and {PH3} others', /** *@description Text of a DOM element in Timeline UIUtils of the Performance panel */ UnknownNode: '[ unknown node ]', }; const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineUIUtils.ts', UIStrings); const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); let eventStylesMap: EventStylesMap; let inputEventToDisplayName: Map; let interactionPhaseStylesMap: Map; let categories: { [x: string]: TimelineCategory, }; let eventCategories: string[]; let eventDispatchDesciptors: EventDispatchTypeDescriptor[]; let colorGenerator: Common.Color.Generator; const requestPreviewElements = new WeakMap(); interface EventStylesMap { [x: string]: TimelineRecordStyle; } export class TimelineUIUtils { private static initEventStyles(): EventStylesMap { if (eventStylesMap) { return eventStylesMap; } const type = TimelineModel.TimelineModel.RecordType; const categories = TimelineUIUtils.categories(); const rendering = categories['rendering']; const scripting = categories['scripting']; const loading = categories['loading']; const experience = categories['experience']; const painting = categories['painting']; const other = categories['other']; const idle = categories['idle']; const eventStyles: EventStylesMap = {}; eventStyles[type.Task] = new TimelineRecordStyle(i18nString(UIStrings.task), other); eventStyles[type.Program] = new TimelineRecordStyle(i18nString(UIStrings.other), other); eventStyles[type.Animation] = new TimelineRecordStyle(i18nString(UIStrings.animation), rendering); eventStyles[type.EventDispatch] = new TimelineRecordStyle(i18nString(UIStrings.event), scripting); eventStyles[type.RequestMainThreadFrame] = new TimelineRecordStyle(i18nString(UIStrings.requestMainThreadFrame), rendering, true); eventStyles[type.BeginFrame] = new TimelineRecordStyle(i18nString(UIStrings.frameStart), rendering, true); eventStyles[type.BeginMainThreadFrame] = new TimelineRecordStyle(i18nString(UIStrings.frameStartMainThread), rendering, true); eventStyles[type.DrawFrame] = new TimelineRecordStyle(i18nString(UIStrings.drawFrame), rendering, true); eventStyles[type.HitTest] = new TimelineRecordStyle(i18nString(UIStrings.hitTest), rendering); eventStyles[type.ScheduleStyleRecalculation] = new TimelineRecordStyle(i18nString(UIStrings.scheduleStyleRecalculation), rendering); eventStyles[type.RecalculateStyles] = new TimelineRecordStyle(i18nString(UIStrings.recalculateStyle), rendering); eventStyles[type.UpdateLayoutTree] = new TimelineRecordStyle(i18nString(UIStrings.recalculateStyle), rendering); eventStyles[type.InvalidateLayout] = new TimelineRecordStyle(i18nString(UIStrings.invalidateLayout), rendering, true); eventStyles[type.Layout] = new TimelineRecordStyle(i18nString(UIStrings.layout), rendering); eventStyles[type.PaintSetup] = new TimelineRecordStyle(i18nString(UIStrings.paintSetup), painting); eventStyles[type.PaintImage] = new TimelineRecordStyle(i18nString(UIStrings.paintImage), painting, true); eventStyles[type.UpdateLayer] = new TimelineRecordStyle(i18nString(UIStrings.updateLayer), painting, true); eventStyles[type.UpdateLayerTree] = new TimelineRecordStyle(i18nString(UIStrings.updateLayerTree), rendering); eventStyles[type.Paint] = new TimelineRecordStyle(i18nString(UIStrings.paint), painting); eventStyles[type.PrePaint] = new TimelineRecordStyle(i18nString(UIStrings.prePaint), rendering); eventStyles[type.RasterTask] = new TimelineRecordStyle(i18nString(UIStrings.rasterizePaint), painting); eventStyles[type.ScrollLayer] = new TimelineRecordStyle(i18nString(UIStrings.scroll), rendering); eventStyles[type.CompositeLayers] = new TimelineRecordStyle(i18nString(UIStrings.compositeLayers), painting); eventStyles[type.ComputeIntersections] = new TimelineRecordStyle(i18nString(UIStrings.computeIntersections), rendering); eventStyles[type.ParseHTML] = new TimelineRecordStyle(i18nString(UIStrings.parseHtml), loading); eventStyles[type.ParseAuthorStyleSheet] = new TimelineRecordStyle(i18nString(UIStrings.parseStylesheet), loading); eventStyles[type.TimerInstall] = new TimelineRecordStyle(i18nString(UIStrings.installTimer), scripting); eventStyles[type.TimerRemove] = new TimelineRecordStyle(i18nString(UIStrings.removeTimer), scripting); eventStyles[type.TimerFire] = new TimelineRecordStyle(i18nString(UIStrings.timerFired), scripting); eventStyles[type.XHRReadyStateChange] = new TimelineRecordStyle(i18nString(UIStrings.xhrReadyStateChange), scripting); eventStyles[type.XHRLoad] = new TimelineRecordStyle(i18nString(UIStrings.xhrLoad), scripting); eventStyles[type.CompileScript] = new TimelineRecordStyle(i18nString(UIStrings.compileScript), scripting); eventStyles[type.CacheScript] = new TimelineRecordStyle(i18nString(UIStrings.cacheScript), scripting); eventStyles[type.CompileCode] = new TimelineRecordStyle(i18nString(UIStrings.compileCode), scripting); eventStyles[type.OptimizeCode] = new TimelineRecordStyle(i18nString(UIStrings.optimizeCode), scripting); eventStyles[type.EvaluateScript] = new TimelineRecordStyle(i18nString(UIStrings.evaluateScript), scripting); eventStyles[type.CompileModule] = new TimelineRecordStyle(i18nString(UIStrings.compileModule), scripting); eventStyles[type.CacheModule] = new TimelineRecordStyle(i18nString(UIStrings.cacheModule), scripting); eventStyles[type.EvaluateModule] = new TimelineRecordStyle(i18nString(UIStrings.evaluateModule), scripting); eventStyles[type.StreamingCompileScript] = new TimelineRecordStyle(i18nString(UIStrings.streamingCompileTask), other); eventStyles[type.StreamingCompileScriptWaiting] = new TimelineRecordStyle(i18nString(UIStrings.waitingForNetwork), idle); eventStyles[type.StreamingCompileScriptParsing] = new TimelineRecordStyle(i18nString(UIStrings.parseAndCompile), scripting); eventStyles[type.WasmStreamFromResponseCallback] = new TimelineRecordStyle(i18nString(UIStrings.streamingWasmResponse), scripting); eventStyles[type.WasmCompiledModule] = new TimelineRecordStyle(i18nString(UIStrings.compiledWasmModule), scripting); eventStyles[type.WasmCachedModule] = new TimelineRecordStyle(i18nString(UIStrings.cachedWasmModule), scripting); eventStyles[type.WasmModuleCacheHit] = new TimelineRecordStyle(i18nString(UIStrings.wasmModuleCacheHit), scripting); eventStyles[type.WasmModuleCacheInvalid] = new TimelineRecordStyle(i18nString(UIStrings.wasmModuleCacheInvalid), scripting); eventStyles[type.FrameStartedLoading] = new TimelineRecordStyle(i18nString(UIStrings.frameStartedLoading), loading, true); eventStyles[type.MarkLoad] = new TimelineRecordStyle(i18nString(UIStrings.onloadEvent), scripting, true); eventStyles[type.MarkDOMContent] = new TimelineRecordStyle(i18nString(UIStrings.domcontentloadedEvent), scripting, true); eventStyles[type.MarkFirstPaint] = new TimelineRecordStyle(i18nString(UIStrings.firstPaint), painting, true); eventStyles[type.MarkFCP] = new TimelineRecordStyle(i18nString(UIStrings.firstContentfulPaint), rendering, true); eventStyles[type.MarkLCPCandidate] = new TimelineRecordStyle(i18nString(UIStrings.largestContentfulPaint), rendering, true); eventStyles[type.TimeStamp] = new TimelineRecordStyle(i18nString(UIStrings.timestamp), scripting); eventStyles[type.ConsoleTime] = new TimelineRecordStyle(i18nString(UIStrings.consoleTime), scripting); eventStyles[type.UserTiming] = new TimelineRecordStyle(i18nString(UIStrings.userTiming), scripting); eventStyles[type.ResourceWillSendRequest] = new TimelineRecordStyle(i18nString(UIStrings.willSendRequest), loading); eventStyles[type.ResourceSendRequest] = new TimelineRecordStyle(i18nString(UIStrings.sendRequest), loading); eventStyles[type.ResourceReceiveResponse] = new TimelineRecordStyle(i18nString(UIStrings.receiveResponse), loading); eventStyles[type.ResourceFinish] = new TimelineRecordStyle(i18nString(UIStrings.finishLoading), loading); eventStyles[type.ResourceReceivedData] = new TimelineRecordStyle(i18nString(UIStrings.receiveData), loading); eventStyles[type.RunMicrotasks] = new TimelineRecordStyle(i18nString(UIStrings.runMicrotasks), scripting); eventStyles[type.FunctionCall] = new TimelineRecordStyle(i18nString(UIStrings.functionCall), scripting); eventStyles[type.GCEvent] = new TimelineRecordStyle(i18nString(UIStrings.gcEvent), scripting); eventStyles[type.MajorGC] = new TimelineRecordStyle(i18nString(UIStrings.majorGc), scripting); eventStyles[type.MinorGC] = new TimelineRecordStyle(i18nString(UIStrings.minorGc), scripting); eventStyles[type.JSFrame] = new TimelineRecordStyle(i18nString(UIStrings.jsFrame), scripting); eventStyles[type.RequestAnimationFrame] = new TimelineRecordStyle(i18nString(UIStrings.requestAnimationFrame), scripting); eventStyles[type.CancelAnimationFrame] = new TimelineRecordStyle(i18nString(UIStrings.cancelAnimationFrame), scripting); eventStyles[type.FireAnimationFrame] = new TimelineRecordStyle(i18nString(UIStrings.animationFrameFired), scripting); eventStyles[type.RequestIdleCallback] = new TimelineRecordStyle(i18nString(UIStrings.requestIdleCallback), scripting); eventStyles[type.CancelIdleCallback] = new TimelineRecordStyle(i18nString(UIStrings.cancelIdleCallback), scripting); eventStyles[type.FireIdleCallback] = new TimelineRecordStyle(i18nString(UIStrings.fireIdleCallback), scripting); eventStyles[type.WebSocketCreate] = new TimelineRecordStyle(i18nString(UIStrings.createWebsocket), scripting); eventStyles[type.WebSocketSendHandshakeRequest] = new TimelineRecordStyle(i18nString(UIStrings.sendWebsocketHandshake), scripting); eventStyles[type.WebSocketReceiveHandshakeResponse] = new TimelineRecordStyle(i18nString(UIStrings.receiveWebsocketHandshake), scripting); eventStyles[type.WebSocketDestroy] = new TimelineRecordStyle(i18nString(UIStrings.destroyWebsocket), scripting); eventStyles[type.EmbedderCallback] = new TimelineRecordStyle(i18nString(UIStrings.embedderCallback), scripting); eventStyles[type.DecodeImage] = new TimelineRecordStyle(i18nString(UIStrings.imageDecode), painting); eventStyles[type.ResizeImage] = new TimelineRecordStyle(i18nString(UIStrings.imageResize), painting); eventStyles[type.GPUTask] = new TimelineRecordStyle(i18nString(UIStrings.gpu), categories['gpu']); eventStyles[type.LatencyInfo] = new TimelineRecordStyle(i18nString(UIStrings.inputLatency), scripting); eventStyles[type.GCCollectGarbage] = new TimelineRecordStyle(i18nString(UIStrings.domGc), scripting); eventStyles[type.CryptoDoEncrypt] = new TimelineRecordStyle(i18nString(UIStrings.encrypt), scripting); eventStyles[type.CryptoDoEncryptReply] = new TimelineRecordStyle(i18nString(UIStrings.encryptReply), scripting); eventStyles[type.CryptoDoDecrypt] = new TimelineRecordStyle(i18nString(UIStrings.decrypt), scripting); eventStyles[type.CryptoDoDecryptReply] = new TimelineRecordStyle(i18nString(UIStrings.decryptReply), scripting); eventStyles[type.CryptoDoDigest] = new TimelineRecordStyle(i18nString(UIStrings.digest), scripting); eventStyles[type.CryptoDoDigestReply] = new TimelineRecordStyle(i18nString(UIStrings.digestReply), scripting); eventStyles[type.CryptoDoSign] = new TimelineRecordStyle(i18nString(UIStrings.sign), scripting); eventStyles[type.CryptoDoSignReply] = new TimelineRecordStyle(i18nString(UIStrings.signReply), scripting); eventStyles[type.CryptoDoVerify] = new TimelineRecordStyle(i18nString(UIStrings.verify), scripting); eventStyles[type.CryptoDoVerifyReply] = new TimelineRecordStyle(i18nString(UIStrings.verifyReply), scripting); eventStyles[type.AsyncTask] = new TimelineRecordStyle(i18nString(UIStrings.asyncTask), categories['async']); eventStyles[type.LayoutShift] = new TimelineRecordStyle(i18nString(UIStrings.layoutShift), experience); eventStylesMap = eventStyles; return eventStyles; } // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration // eslint-disable-next-line @typescript-eslint/no-explicit-any static setEventStylesMap(eventStyles: any): void { eventStylesMap = eventStyles; } static inputEventDisplayName(inputEventType: TimelineModel.TimelineIRModel.InputEvents): string|null { if (!inputEventToDisplayName) { const inputEvent = TimelineModel.TimelineIRModel.InputEvents; inputEventToDisplayName = new Map([ [inputEvent.Char, i18nString(UIStrings.keyCharacter)], [inputEvent.KeyDown, i18nString(UIStrings.keyDown)], [inputEvent.KeyDownRaw, i18nString(UIStrings.keyDown)], [inputEvent.KeyUp, i18nString(UIStrings.keyUp)], [inputEvent.Click, i18nString(UIStrings.click)], [inputEvent.ContextMenu, i18nString(UIStrings.contextMenu)], [inputEvent.MouseDown, i18nString(UIStrings.mouseDown)], [inputEvent.MouseMove, i18nString(UIStrings.mouseMove)], [inputEvent.MouseUp, i18nString(UIStrings.mouseUp)], [inputEvent.MouseWheel, i18nString(UIStrings.mouseWheel)], [inputEvent.ScrollBegin, i18nString(UIStrings.scrollBegin)], [inputEvent.ScrollEnd, i18nString(UIStrings.scrollEnd)], [inputEvent.ScrollUpdate, i18nString(UIStrings.scrollUpdate)], [inputEvent.FlingStart, i18nString(UIStrings.flingStart)], [inputEvent.FlingCancel, i18nString(UIStrings.flingHalt)], [inputEvent.Tap, i18nString(UIStrings.tap)], [inputEvent.TapCancel, i18nString(UIStrings.tapHalt)], [inputEvent.ShowPress, i18nString(UIStrings.tapBegin)], [inputEvent.TapDown, i18nString(UIStrings.tapDown)], [inputEvent.TouchCancel, i18nString(UIStrings.touchCancel)], [inputEvent.TouchEnd, i18nString(UIStrings.touchEnd)], [inputEvent.TouchMove, i18nString(UIStrings.touchMove)], [inputEvent.TouchStart, i18nString(UIStrings.touchStart)], [inputEvent.PinchBegin, i18nString(UIStrings.pinchBegin)], [inputEvent.PinchEnd, i18nString(UIStrings.pinchEnd)], [inputEvent.PinchUpdate, i18nString(UIStrings.pinchUpdate)], ]); } return inputEventToDisplayName.get(inputEventType) || null; } static frameDisplayName(frame: Protocol.Runtime.CallFrame): string { if (!TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.isNativeRuntimeFrame(frame)) { return UI.UIUtils.beautifyFunctionName(frame.functionName); } const nativeGroup = TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.nativeGroup(frame.functionName); const groups = TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.NativeGroups; switch (nativeGroup) { case groups.Compile: return i18nString(UIStrings.compile); case groups.Parse: return i18nString(UIStrings.parse); } return frame.functionName; } static testContentMatching(traceEvent: SDK.TracingModel.Event, regExp: RegExp): boolean { const title = TimelineUIUtils.eventStyle(traceEvent).title; const tokens = [title]; const url = TimelineModel.TimelineModel.TimelineData.forEvent(traceEvent).url; if (url) { tokens.push(url); } appendObjectProperties(traceEvent.args, 2); return regExp.test(tokens.join('|')); // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration // eslint-disable-next-line @typescript-eslint/no-explicit-any function appendObjectProperties(object: any, depth: number): void { if (!depth) { return; } for (const key in object) { const value = object[key]; const type = typeof value; if (type === 'string') { tokens.push(value); } else if (type === 'number') { tokens.push(String(value)); } else if (type === 'object') { appendObjectProperties(value, depth - 1); } } } } static eventURL(event: SDK.TracingModel.Event): Platform.DevToolsPath.UrlString|null { const data = event.args['data'] || event.args['beginData']; const url = data && data.url; if (url) { return url; } const stackTrace = data && data['stackTrace']; const frame = stackTrace && stackTrace.length && stackTrace[0] || TimelineModel.TimelineModel.TimelineData.forEvent(event).topFrame(); return frame && frame.url as Platform.DevToolsPath.UrlString || null; } static eventStyle(event: SDK.TracingModel.Event): TimelineRecordStyle { const eventStyles = TimelineUIUtils.initEventStyles(); if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.Console) || event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming)) { return new TimelineRecordStyle(event.name, TimelineUIUtils.categories()['scripting']); } if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.LatencyInfo)) { /** @const */ const prefix = 'InputLatency::'; const inputEventType = event.name.startsWith(prefix) ? event.name.substr(prefix.length) : event.name; const displayName = TimelineUIUtils.inputEventDisplayName((inputEventType as TimelineModel.TimelineIRModel.InputEvents)); return new TimelineRecordStyle(displayName || inputEventType, TimelineUIUtils.categories()['scripting']); } let result: TimelineRecordStyle = eventStyles[event.name]; if (!result) { result = new TimelineRecordStyle(event.name, TimelineUIUtils.categories()['other'], true); eventStyles[event.name] = result; } return result; } static eventColor(event: SDK.TracingModel.Event): string { if (event.name === TimelineModel.TimelineModel.RecordType.JSFrame) { const frame = event.args['data']; if (TimelineUIUtils.isUserFrame(frame)) { return TimelineUIUtils.colorForId(frame.url); } } const color = TimelineUIUtils.eventStyle(event).category.color; // This event is considered idle time but still rendered as a scripting event here // to connect the StreamingCompileScriptParsing events it belongs to. if (event.name === TimelineModel.TimelineModel.RecordType.StreamingCompileScriptWaiting) { const color = Common.Color.Color.parse(TimelineUIUtils.categories().scripting.color); if (!color) { throw new Error('Unable to parse color from TimelineUIUtils.categories().scripting.color'); } return color.setAlpha(0.3).asString(null) as string; } return color; } static eventColorByProduct( model: TimelineModel.TimelineModel.TimelineModelImpl, urlToColorCache: Map, event: SDK.TracingModel.Event): string { const url = TimelineUIUtils.eventURL(event) || Platform.DevToolsPath.EmptyUrlString; let color = urlToColorCache.get(url); if (color) { return color; } const defaultColor = '#f2ecdc'; const parsedURL = Common.ParsedURL.ParsedURL.fromString(url); if (!parsedURL) { return defaultColor; } const name = parsedURL.host; const rootFrames = model.rootFrames(); if (rootFrames.some(pageFrame => new Common.ParsedURL.ParsedURL(pageFrame.url).host === name)) { color = defaultColor; } if (!color) { color = defaultColor; } urlToColorCache.set(url, color); return color; } static eventTitle(event: SDK.TracingModel.Event): string { const recordType = TimelineModel.TimelineModel.RecordType; const eventData = event.args['data']; if (event.name === recordType.JSFrame) { return TimelineUIUtils.frameDisplayName(eventData); } const title = TimelineUIUtils.eventStyle(event).title; if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.Console)) { return title; } if (event.name === recordType.TimeStamp) { return i18nString(UIStrings.sS, {PH1: title, PH2: eventData['message']}); } if (event.name === recordType.Animation && eventData && eventData['name']) { return i18nString(UIStrings.sS, {PH1: title, PH2: eventData['name']}); } if (event.name === recordType.EventDispatch && eventData && eventData['type']) { return i18nString(UIStrings.sS, {PH1: title, PH2: eventData['type']}); } return title; } private static interactionPhaseStyles(): Map { let map: Map|Map = interactionPhaseStylesMap; if (!map) { map = new Map([ [TimelineModel.TimelineIRModel.Phases.Idle, {color: 'white', label: 'Idle'}], [ TimelineModel.TimelineIRModel.Phases.Response, {color: 'hsl(43, 83%, 64%)', label: i18nString(UIStrings.response)}, ], [ TimelineModel.TimelineIRModel.Phases.Scroll, {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.scroll)}, ], [TimelineModel.TimelineIRModel.Phases.Fling, {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.fling)}], [TimelineModel.TimelineIRModel.Phases.Drag, {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.drag)}], [ TimelineModel.TimelineIRModel.Phases.Animation, {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.animation)}, ], [ TimelineModel.TimelineIRModel.Phases.Uncategorized, {color: 'hsl(0, 0%, 87%)', label: i18nString(UIStrings.uncategorized)}, ], ]); interactionPhaseStylesMap = map; } return map; } static interactionPhaseColor(phase: TimelineModel.TimelineIRModel.Phases): string { const interactionPhase = TimelineUIUtils.interactionPhaseStyles().get(phase); if (!interactionPhase) { throw new Error(`Unknown phase ${phase}`); } return interactionPhase.color; } static interactionPhaseLabel(phase: TimelineModel.TimelineIRModel.Phases): string { const interactionPhase = TimelineUIUtils.interactionPhaseStyles().get(phase); if (!interactionPhase) { throw new Error(`Unknown phase ${phase}`); } return interactionPhase.label; } static isUserFrame(frame: Protocol.Runtime.CallFrame): boolean { return frame.scriptId !== '0' && !(frame.url && frame.url.startsWith('native ')); } static networkRequestCategory(request: TimelineModel.TimelineModel.NetworkRequest): NetworkCategory { const categories = NetworkCategory; switch (request.mimeType) { case 'text/html': return categories.HTML; case 'application/javascript': case 'application/x-javascript': case 'text/javascript': return categories.Script; case 'text/css': return categories.Style; case 'audio/ogg': case 'image/gif': case 'image/jpeg': case 'image/png': case 'image/svg+xml': case 'image/webp': case 'image/x-icon': case 'font/opentype': case 'font/woff2': case 'application/font-woff': return categories.Media; default: return categories.Other; } } static networkCategoryColor(category: NetworkCategory): string { const categories = NetworkCategory; switch (category) { case categories.HTML: return 'hsl(214, 67%, 66%)'; case categories.Script: return 'hsl(43, 83%, 64%)'; case categories.Style: return 'hsl(256, 67%, 70%)'; case categories.Media: return 'hsl(109, 33%, 55%)'; default: return 'hsl(0, 0%, 70%)'; } } static async buildDetailsTextForTraceEvent(event: SDK.TracingModel.Event): Promise { const recordType = TimelineModel.TimelineModel.RecordType; let detailsText; const eventData = event.args['data']; switch (event.name) { case recordType.GCEvent: case recordType.MajorGC: case recordType.MinorGC: { const delta = event.args['usedHeapSizeBefore'] - event.args['usedHeapSizeAfter']; detailsText = i18nString(UIStrings.sCollected, {PH1: Platform.NumberUtilities.bytesToString(delta)}); break; } case recordType.FunctionCall: if (eventData && eventData['url'] && eventData['lineNumber'] !== undefined && eventData['columnNumber'] !== undefined) { detailsText = eventData.url + ':' + (eventData.lineNumber + 1) + ':' + (eventData.columnNumber + 1); } break; case recordType.JSFrame: detailsText = TimelineUIUtils.frameDisplayName(eventData); break; case recordType.EventDispatch: detailsText = eventData ? eventData['type'] : null; break; case recordType.Paint: { const width = TimelineUIUtils.quadWidth(eventData.clip); const height = TimelineUIUtils.quadHeight(eventData.clip); if (width && height) { detailsText = i18nString(UIStrings.sSDimensions, {PH1: width, PH2: height}); } break; } case recordType.ParseHTML: { const startLine = event.args['beginData']['startLine']; const endLine = event.args['endData'] && event.args['endData']['endLine']; const url = Bindings.ResourceUtils.displayNameForURL(event.args['beginData']['url']); if (endLine >= 0) { detailsText = i18nString(UIStrings.sSs, {PH1: url, PH2: startLine + 1, PH3: endLine + 1}); } else { detailsText = i18nString(UIStrings.sSSquareBrackets, {PH1: url, PH2: startLine + 1}); } break; } case recordType.CompileModule: case recordType.CacheModule: detailsText = Bindings.ResourceUtils.displayNameForURL(event.args['fileName']); break; case recordType.CompileScript: case recordType.CacheScript: case recordType.EvaluateScript: { const url = eventData && eventData['url']; if (url) { detailsText = Bindings.ResourceUtils.displayNameForURL(url) + ':' + (eventData['lineNumber'] + 1); } break; } case recordType.WasmCompiledModule: case recordType.WasmModuleCacheHit: { const url = event.args['url']; if (url) { detailsText = Bindings.ResourceUtils.displayNameForURL(url); } break; } case recordType.StreamingCompileScript: case recordType.XHRReadyStateChange: case recordType.XHRLoad: { const url = eventData['url']; if (url) { detailsText = Bindings.ResourceUtils.displayNameForURL(url); } break; } case recordType.TimeStamp: detailsText = eventData['message']; break; case recordType.WebSocketCreate: case recordType.WebSocketSendHandshakeRequest: case recordType.WebSocketReceiveHandshakeResponse: case recordType.WebSocketDestroy: case recordType.ResourceWillSendRequest: case recordType.ResourceSendRequest: case recordType.ResourceReceivedData: case recordType.ResourceReceiveResponse: case recordType.ResourceFinish: case recordType.PaintImage: case recordType.DecodeImage: case recordType.ResizeImage: case recordType.DecodeLazyPixelRef: { const url = TimelineModel.TimelineModel.TimelineData.forEvent(event).url; if (url) { detailsText = Bindings.ResourceUtils.displayNameForURL(url); } break; } case recordType.EmbedderCallback: detailsText = eventData['callbackName']; break; case recordType.Animation: detailsText = eventData && eventData['name']; break; case recordType.AsyncTask: detailsText = eventData ? eventData['name'] : null; break; default: if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.Console)) { detailsText = null; } else { detailsText = await linkifyTopCallFrameAsText(); } break; } return detailsText; async function linkifyTopCallFrameAsText(): Promise { const frame = TimelineModel.TimelineModel.TimelineData.forEvent(event).topFrame(); if (!frame) { return null; } return frame.url + ':' + (frame.lineNumber + 1) + ':' + (frame.columnNumber + 1); } } static async buildDetailsNodeForTraceEvent( event: SDK.TracingModel.Event, target: SDK.Target.Target|null, linkifier: Components.Linkifier.Linkifier): Promise { const recordType = TimelineModel.TimelineModel.RecordType; let details: HTMLElement|HTMLSpanElement|(Element | null)|Text|null = null; let detailsText; const eventData = event.args['data']; switch (event.name) { case recordType.GCEvent: case recordType.MajorGC: case recordType.MinorGC: case recordType.EventDispatch: case recordType.Paint: case recordType.Animation: case recordType.EmbedderCallback: case recordType.ParseHTML: case recordType.WasmStreamFromResponseCallback: case recordType.WasmCompiledModule: case recordType.WasmModuleCacheHit: case recordType.WasmCachedModule: case recordType.WasmModuleCacheInvalid: case recordType.WebSocketCreate: case recordType.WebSocketSendHandshakeRequest: case recordType.WebSocketReceiveHandshakeResponse: case recordType.WebSocketDestroy: { detailsText = await TimelineUIUtils.buildDetailsTextForTraceEvent(event); break; } case recordType.PaintImage: case recordType.DecodeImage: case recordType.ResizeImage: case recordType.DecodeLazyPixelRef: case recordType.XHRReadyStateChange: case recordType.XHRLoad: case recordType.ResourceWillSendRequest: case recordType.ResourceSendRequest: case recordType.ResourceReceivedData: case recordType.ResourceReceiveResponse: case recordType.ResourceFinish: { const url = TimelineModel.TimelineModel.TimelineData.forEvent(event).url; if (url) { const options = { tabStop: true, showColumnNumber: false, inlineFrameIndex: 0, }; details = Components.Linkifier.Linkifier.linkifyURL(url, options); } break; } case recordType.FunctionCall: case recordType.JSFrame: { details = document.createElement('span'); UI.UIUtils.createTextChild(details, TimelineUIUtils.frameDisplayName(eventData)); const location = linkifyLocation( eventData['scriptId'], eventData['url'], eventData['lineNumber'], eventData['columnNumber']); if (location) { UI.UIUtils.createTextChild(details, ' @ '); details.appendChild(location); } break; } case recordType.CompileModule: case recordType.CacheModule: { details = linkifyLocation(null, event.args['fileName'], 0, 0); break; } case recordType.CompileScript: case recordType.CacheScript: case recordType.EvaluateScript: { const url = eventData['url']; if (url) { details = linkifyLocation(null, url, eventData['lineNumber'], 0); } break; } case recordType.StreamingCompileScript: { const url = eventData['url']; if (url) { details = linkifyLocation(null, url, 0, 0); } break; } default: { if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.Console)) { detailsText = null; } else { details = linkifyTopCallFrame(); } break; } } if (!details && detailsText) { details = document.createTextNode(detailsText); } return details; function linkifyLocation( scriptId: Protocol.Runtime.ScriptId|null, url: string, lineNumber: number, columnNumber?: number): Element| null { const options = {columnNumber, showColumnNumber: true, inlineFrameIndex: 0, className: 'timeline-details', tabStop: true}; return linkifier.linkifyScriptLocation( target, scriptId, url as Platform.DevToolsPath.UrlString, lineNumber, options); } function linkifyTopCallFrame(): Element|null { const frame = TimelineModel.TimelineModel.TimelineData.forEvent(event).topFrame(); return frame ? linkifier.maybeLinkifyConsoleCallFrame( target, frame, {className: 'timeline-details', tabStop: true, inlineFrameIndex: 0, showColumnNumber: true}) : null; } } static buildDetailsNodeForPerformanceEvent(event: SDK.TracingModel.Event): Element { let link = 'https://web.dev/user-centric-performance-metrics/'; let name = 'page performance metrics'; const recordType = TimelineModel.TimelineModel.RecordType; switch (event.name) { case recordType.MarkLCPCandidate: link = 'https://web.dev/lcp/'; name = 'largest contentful paint'; break; case recordType.MarkFCP: link = 'https://web.dev/first-contentful-paint/'; name = 'first contentful paint'; break; default: break; } return UI.Fragment.html`
${UI.XLink.XLink.create(link, i18nString(UIStrings.learnMore))} about ${name}.
`; } // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration // eslint-disable-next-line @typescript-eslint/no-explicit-any static buildConsumeCacheDetails(eventData: any, contentHelper: TimelineDetailsContentHelper): void { if ('consumedCacheSize' in eventData) { contentHelper.appendTextRow( i18nString(UIStrings.compilationCacheStatus), i18nString(UIStrings.scriptLoadedFromCache)); contentHelper.appendTextRow( i18nString(UIStrings.compilationCacheSize), Platform.NumberUtilities.bytesToString(eventData['consumedCacheSize'])); } else if (eventData && 'cacheRejected' in eventData && eventData['cacheRejected']) { // Version mismatch or similar. contentHelper.appendTextRow( i18nString(UIStrings.compilationCacheStatus), i18nString(UIStrings.failedToLoadScriptFromCache)); } else { contentHelper.appendTextRow( i18nString(UIStrings.compilationCacheStatus), i18nString(UIStrings.scriptNotEligible)); } } static async buildTraceEventDetails( event: SDK.TracingModel.Event, model: TimelineModel.TimelineModel.TimelineModelImpl, linkifier: Components.Linkifier.Linkifier, detailed: boolean): Promise { const maybeTarget = model.targetByEvent(event); let relatedNodesMap: (Map|null)|null = null; if (maybeTarget) { const target = (maybeTarget as SDK.Target.Target); // @ts-ignore TODO(crbug.com/1011811): Remove symbol usage. if (typeof event[previewElementSymbol] === 'undefined') { let previewElement: (Element|null)|null = null; const url = TimelineModel.TimelineModel.TimelineData.forEvent(event).url; if (url) { previewElement = await Components.ImagePreview.ImagePreview.build(target, url, false, { imageAltText: Components.ImagePreview.ImagePreview.defaultAltTextForImageURL(url), precomputedFeatures: undefined, }); } else if (TimelineModel.TimelineModel.TimelineData.forEvent(event).picture) { previewElement = await TimelineUIUtils.buildPicturePreviewContent(event, target); } // @ts-ignore TODO(crbug.com/1011811): Remove symbol usage. event[previewElementSymbol] = previewElement; } const nodeIdsToResolve = new Set(); const timelineData = TimelineModel.TimelineModel.TimelineData.forEvent(event); if (timelineData.backendNodeIds) { for (let i = 0; i < timelineData.backendNodeIds.length; ++i) { nodeIdsToResolve.add(timelineData.backendNodeIds[i]); } } const invalidationTrackingEvents = TimelineModel.TimelineModel.InvalidationTracker.invalidationEventsFor(event); if (invalidationTrackingEvents) { TimelineUIUtils.collectInvalidationNodeIds(nodeIdsToResolve, invalidationTrackingEvents); } if (nodeIdsToResolve.size) { const domModel = target.model(SDK.DOMModel.DOMModel); if (domModel) { relatedNodesMap = await domModel.pushNodesByBackendIdsToFrontend(nodeIdsToResolve); } } } const recordTypes = TimelineModel.TimelineModel.RecordType; if (event.name === recordTypes.LayoutShift) { // Ensure that there are no pie charts or extended info for layout shifts. detailed = false; } // This message may vary per event.name; let relatedNodeLabel; const contentHelper = new TimelineDetailsContentHelper(model.targetByEvent(event), linkifier); const color = model.isMarkerEvent(event) ? TimelineUIUtils.markerStyleForEvent(event).color : TimelineUIUtils.eventStyle(event).category.color; contentHelper.addSection(TimelineUIUtils.eventTitle(event), color); const eventData = event.args['data']; const timelineData = TimelineModel.TimelineModel.TimelineData.forEvent(event); const initiator = timelineData.initiator(); let url: Platform.DevToolsPath.UrlString|null = null; if (timelineData.warning) { contentHelper.appendWarningRow(event); } if (event.name === recordTypes.JSFrame && eventData['deoptReason']) { contentHelper.appendWarningRow(event, TimelineModel.TimelineModel.TimelineModelImpl.WarningType.V8Deopt); } if (detailed && !Number.isNaN(event.duration || 0)) { contentHelper.appendTextRow( i18nString(UIStrings.totalTime), i18n.TimeUtilities.millisToString(event.duration || 0, true)); contentHelper.appendTextRow( i18nString(UIStrings.selfTime), i18n.TimeUtilities.millisToString(event.selfTime, true)); } if (model.isGenericTrace()) { for (const key in event.args) { try { contentHelper.appendTextRow(key, JSON.stringify(event.args[key])); } catch (e) { contentHelper.appendTextRow(key, `<${typeof event.args[key]}>`); } } return contentHelper.fragment; } switch (event.name) { case recordTypes.GCEvent: case recordTypes.MajorGC: case recordTypes.MinorGC: { const delta = event.args['usedHeapSizeBefore'] - event.args['usedHeapSizeAfter']; contentHelper.appendTextRow(i18nString(UIStrings.collected), Platform.NumberUtilities.bytesToString(delta)); break; } case recordTypes.JSFrame: case recordTypes.FunctionCall: { const detailsNode = await TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.targetByEvent(event), linkifier); if (detailsNode) { contentHelper.appendElementRow(i18nString(UIStrings.function), detailsNode); } break; } case recordTypes.TimerFire: case recordTypes.TimerInstall: case recordTypes.TimerRemove: { contentHelper.appendTextRow(i18nString(UIStrings.timerId), eventData['timerId']); if (event.name === recordTypes.TimerInstall) { contentHelper.appendTextRow( i18nString(UIStrings.timeout), i18n.TimeUtilities.millisToString(eventData['timeout'])); contentHelper.appendTextRow(i18nString(UIStrings.repeats), !eventData['singleShot']); } break; } case recordTypes.FireAnimationFrame: { contentHelper.appendTextRow(i18nString(UIStrings.callbackId), eventData['id']); break; } case recordTypes.ResourceWillSendRequest: case recordTypes.ResourceSendRequest: case recordTypes.ResourceReceiveResponse: case recordTypes.ResourceReceivedData: case recordTypes.ResourceFinish: { url = timelineData.url; if (url) { const options = { tabStop: true, showColumnNumber: false, inlineFrameIndex: 0, }; contentHelper.appendElementRow( i18nString(UIStrings.resource), Components.Linkifier.Linkifier.linkifyURL(url, options)); } if (eventData['requestMethod']) { contentHelper.appendTextRow(i18nString(UIStrings.requestMethod), eventData['requestMethod']); } if (typeof eventData['statusCode'] === 'number') { contentHelper.appendTextRow(i18nString(UIStrings.statusCode), eventData['statusCode']); } if (eventData['mimeType']) { contentHelper.appendTextRow(i18nString(UIStrings.mimeTypeCaps), eventData['mimeType']); } if ('priority' in eventData) { const priority = PerfUI.NetworkPriorities.uiLabelForNetworkPriority(eventData['priority']); contentHelper.appendTextRow(i18nString(UIStrings.priority), priority); } if (eventData['encodedDataLength']) { contentHelper.appendTextRow( i18nString(UIStrings.encodedData), i18nString(UIStrings.sBytes, {n: eventData['encodedDataLength']})); } if (eventData['decodedBodyLength']) { contentHelper.appendTextRow( i18nString(UIStrings.decodedBody), i18nString(UIStrings.sBytes, {n: eventData['decodedBodyLength']})); } break; } case recordTypes.CompileModule: { contentHelper.appendLocationRow(i18nString(UIStrings.module), event.args['fileName'], 0); break; } case recordTypes.CompileScript: { url = eventData && eventData['url'] as Platform.DevToolsPath.UrlString; if (url) { contentHelper.appendLocationRow( i18nString(UIStrings.script), url, eventData['lineNumber'], eventData['columnNumber']); } const isEager = eventData['eager'] ?? false; if (isEager) { contentHelper.appendTextRow(i18nString(UIStrings.eagerCompile), true); } const isStreamed = eventData['streamed']; contentHelper.appendTextRow( i18nString(UIStrings.streamed), isStreamed + (isStreamed ? '' : `: ${eventData['notStreamedReason']}`)); TimelineUIUtils.buildConsumeCacheDetails(eventData, contentHelper); break; } case recordTypes.CacheModule: { url = eventData && eventData['url'] as Platform.DevToolsPath.UrlString; contentHelper.appendTextRow( i18nString(UIStrings.compilationCacheSize), Platform.NumberUtilities.bytesToString(eventData['producedCacheSize'])); break; } case recordTypes.CacheScript: { url = eventData && eventData['url'] as Platform.DevToolsPath.UrlString; if (url) { contentHelper.appendLocationRow( i18nString(UIStrings.script), url, eventData['lineNumber'], eventData['columnNumber']); } contentHelper.appendTextRow( i18nString(UIStrings.compilationCacheSize), Platform.NumberUtilities.bytesToString(eventData['producedCacheSize'])); break; } case recordTypes.EvaluateScript: { url = eventData && eventData['url'] as Platform.DevToolsPath.UrlString; if (url) { contentHelper.appendLocationRow( i18nString(UIStrings.script), url, eventData['lineNumber'], eventData['columnNumber']); } break; } case recordTypes.WasmStreamFromResponseCallback: case recordTypes.WasmCompiledModule: case recordTypes.WasmCachedModule: case recordTypes.WasmModuleCacheHit: case recordTypes.WasmModuleCacheInvalid: { if (eventData) { url = event.args['url'] as Platform.DevToolsPath.UrlString; if (url) { contentHelper.appendTextRow(i18nString(UIStrings.url), url); } const producedCachedSize = event.args['producedCachedSize']; if (producedCachedSize) { contentHelper.appendTextRow(i18nString(UIStrings.producedCacheSize), producedCachedSize); } const consumedCachedSize = event.args['consumedCachedSize']; if (consumedCachedSize) { contentHelper.appendTextRow(i18nString(UIStrings.consumedCacheSize), consumedCachedSize); } } break; } // @ts-ignore Fall-through intended. case recordTypes.Paint: { const clip = eventData['clip']; contentHelper.appendTextRow( i18nString(UIStrings.location), i18nString(UIStrings.sSCurlyBrackets, {PH1: clip[0], PH2: clip[1]})); const clipWidth = TimelineUIUtils.quadWidth(clip); const clipHeight = TimelineUIUtils.quadHeight(clip); contentHelper.appendTextRow( i18nString(UIStrings.dimensions), i18nString(UIStrings.sSDimensions, {PH1: clipWidth, PH2: clipHeight})); } case recordTypes.PaintSetup: case recordTypes.Rasterize: case recordTypes.ScrollLayer: { relatedNodeLabel = i18nString(UIStrings.layerRoot); break; } case recordTypes.PaintImage: case recordTypes.DecodeLazyPixelRef: case recordTypes.DecodeImage: case recordTypes.ResizeImage: case recordTypes.DrawLazyPixelRef: { relatedNodeLabel = i18nString(UIStrings.ownerElement); url = timelineData.url; if (url) { const options = { tabStop: true, showColumnNumber: false, inlineFrameIndex: 0, }; contentHelper.appendElementRow( i18nString(UIStrings.imageUrl), Components.Linkifier.Linkifier.linkifyURL(url, options)); } break; } case recordTypes.ParseAuthorStyleSheet: { url = eventData['styleSheetUrl'] as Platform.DevToolsPath.UrlString; if (url) { const options = { tabStop: true, showColumnNumber: false, inlineFrameIndex: 0, }; contentHelper.appendElementRow( i18nString(UIStrings.stylesheetUrl), Components.Linkifier.Linkifier.linkifyURL(url, options)); } break; } case recordTypes.UpdateLayoutTree: // We don't want to see default details. case recordTypes.RecalculateStyles: { contentHelper.appendTextRow(i18nString(UIStrings.elementsAffected), event.args['elementCount']); break; } case recordTypes.Layout: { const beginData = event.args['beginData']; contentHelper.appendTextRow( i18nString(UIStrings.nodesThatNeedLayout), i18nString(UIStrings.sOfS, {PH1: beginData['dirtyObjects'], PH2: beginData['totalObjects']})); relatedNodeLabel = i18nString(UIStrings.layoutRoot); break; } case recordTypes.ConsoleTime: { contentHelper.appendTextRow(i18nString(UIStrings.message), event.name); break; } case recordTypes.WebSocketCreate: case recordTypes.WebSocketSendHandshakeRequest: case recordTypes.WebSocketReceiveHandshakeResponse: case recordTypes.WebSocketDestroy: { const initiatorData = initiator ? initiator.args['data'] : eventData; if (typeof initiatorData['webSocketURL'] !== 'undefined') { contentHelper.appendTextRow(i18n.i18n.lockedString('URL'), initiatorData['webSocketURL']); } if (typeof initiatorData['webSocketProtocol'] !== 'undefined') { contentHelper.appendTextRow(i18nString(UIStrings.websocketProtocol), initiatorData['webSocketProtocol']); } if (typeof eventData['message'] !== 'undefined') { contentHelper.appendTextRow(i18nString(UIStrings.message), eventData['message']); } break; } case recordTypes.EmbedderCallback: { contentHelper.appendTextRow(i18nString(UIStrings.callbackFunction), eventData['callbackName']); break; } case recordTypes.Animation: { if (event.phase === SDK.TracingModel.Phase.NestableAsyncInstant) { contentHelper.appendTextRow(i18nString(UIStrings.state), eventData['state']); } break; } case recordTypes.ParseHTML: { const beginData = event.args['beginData']; const startLine = beginData['startLine'] - 1; const endLine = event.args['endData'] ? event.args['endData']['endLine'] - 1 : undefined; url = beginData['url']; if (url) { contentHelper.appendLocationRange(i18nString(UIStrings.range), url, startLine, endLine); } break; } // @ts-ignore Fall-through intended. case recordTypes.FireIdleCallback: { contentHelper.appendTextRow( i18nString(UIStrings.allottedTime), i18n.TimeUtilities.millisToString(eventData['allottedMilliseconds'])); contentHelper.appendTextRow(i18nString(UIStrings.invokedByTimeout), eventData['timedOut']); } case recordTypes.RequestIdleCallback: case recordTypes.CancelIdleCallback: { contentHelper.appendTextRow(i18nString(UIStrings.callbackId), eventData['id']); break; } case recordTypes.EventDispatch: { contentHelper.appendTextRow(i18nString(UIStrings.type), eventData['type']); break; } // @ts-ignore Fall-through intended. case recordTypes.MarkLCPCandidate: { contentHelper.appendTextRow(i18nString(UIStrings.type), String(eventData['type'])); contentHelper.appendTextRow(i18nString(UIStrings.size), String(eventData['size'])); } case recordTypes.MarkFirstPaint: case recordTypes.MarkFCP: case recordTypes.MarkLoad: case recordTypes.MarkDOMContent: { let eventTime: number = event.startTime - model.minimumRecordTime(); // Find the appropriate navStart based on the navigation ID. const {navigationId} = event.args.data; if (navigationId) { const navStartTime = model.navStartTimes().get(navigationId); if (navStartTime) { eventTime = event.startTime - navStartTime.startTime; } } contentHelper.appendTextRow( i18nString(UIStrings.timestamp), i18n.TimeUtilities.preciseMillisToString(eventTime, 1)); contentHelper.appendElementRow( i18nString(UIStrings.details), TimelineUIUtils.buildDetailsNodeForPerformanceEvent(event)); break; } case recordTypes.LayoutShift: { const warning = document.createElement('span'); const clsLink = UI.XLink.XLink.create('https://web.dev/cls/', i18nString(UIStrings.cumulativeLayoutShifts)); const evolvedClsLink = UI.XLink.XLink.create('https://web.dev/evolving-cls/', i18nString(UIStrings.evolvedClsLink)); warning.appendChild( i18n.i18n.getFormatLocalizedString(str_, UIStrings.sCLSInformation, {PH1: clsLink, PH2: evolvedClsLink})); contentHelper.appendElementRow(i18nString(UIStrings.warning), warning, true); contentHelper.appendTextRow(i18nString(UIStrings.score), eventData['score'].toPrecision(4)); contentHelper.appendTextRow( i18nString(UIStrings.cumulativeScore), eventData['cumulative_score'].toPrecision(4)); if ('_current_cluster_id' in eventData) { contentHelper.appendTextRow(i18nString(UIStrings.currentClusterId), eventData['_current_cluster_id']); } if ('_current_cluster_score' in eventData) { contentHelper.appendTextRow( i18nString(UIStrings.currentClusterScore), eventData['_current_cluster_score'].toPrecision(4)); } contentHelper.appendTextRow( i18nString(UIStrings.hadRecentInput), eventData['had_recent_input'] ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)); for (const impactedNode of eventData['impacted_nodes']) { const oldRect = new CLSRect(impactedNode['old_rect']); const newRect = new CLSRect(impactedNode['new_rect']); const linkedOldRect = await Common.Linkifier.Linkifier.linkify(oldRect); const linkedNewRect = await Common.Linkifier.Linkifier.linkify(newRect); contentHelper.appendElementRow(i18nString(UIStrings.movedFrom), linkedOldRect); contentHelper.appendElementRow(i18nString(UIStrings.movedTo), linkedNewRect); } break; } default: { const detailsNode = await TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.targetByEvent(event), linkifier); if (detailsNode) { contentHelper.appendElementRow(i18nString(UIStrings.details), detailsNode); } break; } } if (timelineData.timeWaitingForMainThread) { contentHelper.appendTextRow( i18nString(UIStrings.timeWaitingForMainThread), i18n.TimeUtilities.millisToString(timelineData.timeWaitingForMainThread, true)); } for (let i = 0; i < timelineData.backendNodeIds.length; ++i) { const relatedNode = relatedNodesMap && relatedNodesMap.get(timelineData.backendNodeIds[i]); if (relatedNode) { const nodeSpan = await Common.Linkifier.Linkifier.linkify(relatedNode); contentHelper.appendElementRow(relatedNodeLabel || i18nString(UIStrings.relatedNode), nodeSpan); } } // @ts-ignore TODO(crbug.com/1011811): Remove symbol usage. if (event[previewElementSymbol]) { contentHelper.addSection(i18nString(UIStrings.preview)); // @ts-ignore TODO(crbug.com/1011811): Remove symbol usage. contentHelper.appendElementRow('', event[previewElementSymbol]); } if (initiator || timelineData.stackTraceForSelfOrInitiator() || TimelineModel.TimelineModel.InvalidationTracker.invalidationEventsFor(event)) { TimelineUIUtils.generateCauses(event, model.targetByEvent(event), relatedNodesMap, contentHelper); } const stats: { [x: string]: number, } = {}; const showPieChart = detailed && TimelineUIUtils.aggregatedStatsForTraceEvent(stats, model, event); if (showPieChart) { contentHelper.addSection(i18nString(UIStrings.aggregatedTime)); const pieChart = TimelineUIUtils.generatePieChart(stats, TimelineUIUtils.eventStyle(event).category, event.selfTime); contentHelper.appendElementRow('', pieChart); } return contentHelper.fragment; } static statsForTimeRange(events: SDK.TracingModel.Event[], startTime: number, endTime: number): { [x: string]: number, } { if (!events.length) { return {'idle': endTime - startTime}; } buildRangeStatsCacheIfNeeded(events); const aggregatedStats = subtractStats(aggregatedStatsAtTime(endTime), aggregatedStatsAtTime(startTime)); const aggregatedTotal = Object.values(aggregatedStats).reduce((a, b) => a + b, 0); aggregatedStats['idle'] = Math.max(0, endTime - startTime - aggregatedTotal); return aggregatedStats; function aggregatedStatsAtTime(time: number): { [x: string]: number, } { const stats: { [x: string]: number, } = {}; // @ts-ignore TODO(crbug.com/1011811): Remove symbol usage. const cache = events[categoryBreakdownCacheSymbol]; for (const category in cache) { const categoryCache = cache[category]; const index = Platform.ArrayUtilities.upperBound(categoryCache.time, time, Platform.ArrayUtilities.DEFAULT_COMPARATOR); let value; if (index === 0) { value = 0; } else if (index === categoryCache.time.length) { value = categoryCache.value[categoryCache.value.length - 1]; } else { const t0 = categoryCache.time[index - 1]; const t1 = categoryCache.time[index]; const v0 = categoryCache.value[index - 1]; const v1 = categoryCache.value[index]; value = v0 + (v1 - v0) * (time - t0) / (t1 - t0); } stats[category] = value; } return stats; } function subtractStats( a: { [x: string]: number, }, b: { [x: string]: number, }): { [x: string]: number, } { const result = Object.assign({}, a); for (const key in b) { result[key] -= b[key]; } return result; } function buildRangeStatsCacheIfNeeded(events: SDK.TracingModel.Event[]): void { // @ts-ignore TODO(crbug.com/1011811): Remove symbol usage. if (events[categoryBreakdownCacheSymbol]) { return; } // aggeregatedStats is a map by categories. For each category there's an array // containing sorted time points which records accumulated value of the category. const aggregatedStats: { [x: string]: { time: number[], value: number[], }, } = {}; const categoryStack: string[] = []; let lastTime = 0; TimelineModel.TimelineModel.TimelineModelImpl.forEachEvent( events, onStartEvent, onEndEvent, undefined, undefined, undefined, filterForStats()); function filterForStats(): (arg0: SDK.TracingModel.Event) => boolean { const visibleEventsFilter = TimelineUIUtils.visibleEventsFilter(); return (event: SDK.TracingModel.Event): boolean => visibleEventsFilter.accept(event) || SDK.TracingModel.TracingModel.isTopLevelEvent(event); } function updateCategory(category: string, time: number): void { let statsArrays: { time: number[], value: number[], } = aggregatedStats[category]; if (!statsArrays) { statsArrays = {time: [], value: []}; aggregatedStats[category] = statsArrays; } if (statsArrays.time.length && statsArrays.time[statsArrays.time.length - 1] === time || lastTime > time) { return; } const lastValue = statsArrays.value.length > 0 ? statsArrays.value[statsArrays.value.length - 1] : 0; statsArrays.value.push(lastValue + time - lastTime); statsArrays.time.push(time); } function categoryChange(from: string|null, to: string|null, time: number): void { if (from) { updateCategory(from, time); } lastTime = time; if (to) { updateCategory(to, time); } } function onStartEvent(e: SDK.TracingModel.Event): void { const category = TimelineUIUtils.eventStyle(e).category.name; const parentCategory = categoryStack.length ? categoryStack[categoryStack.length - 1] : null; if (category !== parentCategory) { categoryChange(parentCategory || null, category, e.startTime); } categoryStack.push(category); } function onEndEvent(e: SDK.TracingModel.Event): void { const category = categoryStack.pop(); const parentCategory = categoryStack.length ? categoryStack[categoryStack.length - 1] : null; if (category !== parentCategory) { categoryChange(category || null, parentCategory || null, e.endTime || 0); } } const obj = (events as Object); // @ts-ignore TODO(crbug.com/1011811): Remove symbol usage. obj[categoryBreakdownCacheSymbol] = aggregatedStats; } } static async buildNetworkRequestDetails( request: TimelineModel.TimelineModel.NetworkRequest, model: TimelineModel.TimelineModel.TimelineModelImpl, linkifier: Components.Linkifier.Linkifier): Promise { const target = model.targetByEvent(request.children[0]); const contentHelper = new TimelineDetailsContentHelper(target, linkifier); const category = TimelineUIUtils.networkRequestCategory(request); const color = TimelineUIUtils.networkCategoryColor(category); contentHelper.addSection(i18nString(UIStrings.networkRequest), color); if (request.url) { const options = { tabStop: true, showColumnNumber: false, inlineFrameIndex: 0, }; contentHelper.appendElementRow( i18n.i18n.lockedString('URL'), Components.Linkifier.Linkifier.linkifyURL(request.url, options)); } // The time from queueing the request until resource processing is finished. const fullDuration = request.endTime - (request.getStartTime() || -Infinity); if (isFinite(fullDuration)) { let textRow = i18n.TimeUtilities.millisToString(fullDuration, true); // The time from queueing the request until the download is finished. This // corresponds to the total time reported for the request in the network tab. const networkDuration = (request.finishTime || request.getStartTime()) - request.getStartTime(); // The time it takes to make the resource available to the renderer process. const processingDuration = request.endTime - (request.finishTime || 0); if (isFinite(networkDuration) && isFinite(processingDuration)) { const networkDurationStr = i18n.TimeUtilities.millisToString(networkDuration, true); const processingDurationStr = i18n.TimeUtilities.millisToString(processingDuration, true); const cacheOrNetworkLabel = request.cached() ? i18nString(UIStrings.loadFromCache) : i18nString(UIStrings.networkTransfer); textRow += i18nString( UIStrings.SSSResourceLoading, {PH1: networkDurationStr, PH2: cacheOrNetworkLabel, PH3: processingDurationStr}); } contentHelper.appendTextRow(i18nString(UIStrings.duration), textRow); } if (request.requestMethod) { contentHelper.appendTextRow(i18nString(UIStrings.requestMethod), request.requestMethod); } if (typeof request.priority === 'string') { const priority = PerfUI.NetworkPriorities.uiLabelForNetworkPriority((request.priority as Protocol.Network.ResourcePriority)); contentHelper.appendTextRow(i18nString(UIStrings.priority), priority); } if (request.mimeType) { contentHelper.appendTextRow(i18nString(UIStrings.mimeType), request.mimeType); } let lengthText = ''; if (request.memoryCached()) { lengthText += i18nString(UIStrings.FromMemoryCache); } else if (request.cached()) { lengthText += i18nString(UIStrings.FromCache); } else if (request.timing && request.timing.pushStart) { lengthText += i18nString(UIStrings.FromPush); } if (request.fromServiceWorker) { lengthText += i18nString(UIStrings.FromServiceWorker); } if (request.encodedDataLength || !lengthText) { lengthText = `${Platform.NumberUtilities.bytesToString(request.encodedDataLength)}${lengthText}`; } contentHelper.appendTextRow(i18nString(UIStrings.encodedData), lengthText); if (request.decodedBodyLength) { contentHelper.appendTextRow( i18nString(UIStrings.decodedBody), Platform.NumberUtilities.bytesToString(request.decodedBodyLength)); } const title = i18nString(UIStrings.initiator); const sendRequest = request.children[0]; const topFrame = TimelineModel.TimelineModel.TimelineData.forEvent(sendRequest).topFrame(); if (topFrame) { const link = linkifier.maybeLinkifyConsoleCallFrame( target, topFrame, {tabStop: true, inlineFrameIndex: 0, showColumnNumber: true}); if (link) { contentHelper.appendElementRow(title, link); } } else { const initiator = TimelineModel.TimelineModel.TimelineData.forEvent(sendRequest).initiator(); if (initiator) { const initiatorURL = TimelineModel.TimelineModel.TimelineData.forEvent(initiator).url; if (initiatorURL) { const link = linkifier.maybeLinkifyScriptLocation(target, null, initiatorURL, 0, {tabStop: true, inlineFrameIndex: 0}); if (link) { contentHelper.appendElementRow(title, link); } } } } if (!requestPreviewElements.get(request) && request.url && target) { const previewElement = (await Components.ImagePreview.ImagePreview.build(target, request.url, false, { imageAltText: Components.ImagePreview.ImagePreview.defaultAltTextForImageURL(request.url), precomputedFeatures: undefined, }) as HTMLImageElement); requestPreviewElements.set(request, previewElement); } const requestPreviewElement = requestPreviewElements.get(request); if (requestPreviewElement) { contentHelper.appendElementRow(i18nString(UIStrings.preview), requestPreviewElement); } return contentHelper.fragment; } static stackTraceFromCallFrames(callFrames: Protocol.Runtime.CallFrame[]): Protocol.Runtime.StackTrace { return {callFrames: callFrames} as Protocol.Runtime.StackTrace; } private static generateCauses( event: SDK.TracingModel.Event, target: SDK.Target.Target|null, relatedNodesMap: Map|null, contentHelper: TimelineDetailsContentHelper): void { const recordTypes = TimelineModel.TimelineModel.RecordType; let callSiteStackLabel; let stackLabel; switch (event.name) { case recordTypes.TimerFire: callSiteStackLabel = i18nString(UIStrings.timerInstalled); break; case recordTypes.FireAnimationFrame: callSiteStackLabel = i18nString(UIStrings.animationFrameRequested); break; case recordTypes.FireIdleCallback: callSiteStackLabel = i18nString(UIStrings.idleCallbackRequested); break; case recordTypes.UpdateLayoutTree: case recordTypes.RecalculateStyles: stackLabel = i18nString(UIStrings.recalculationForced); break; case recordTypes.Layout: callSiteStackLabel = i18nString(UIStrings.firstLayoutInvalidation); stackLabel = i18nString(UIStrings.layoutForced); break; } const timelineData = TimelineModel.TimelineModel.TimelineData.forEvent(event); // Direct cause. if (timelineData.stackTrace && timelineData.stackTrace.length) { contentHelper.addSection(i18nString(UIStrings.callStacks)); contentHelper.appendStackTrace( stackLabel || i18nString(UIStrings.stackTrace), TimelineUIUtils.stackTraceFromCallFrames(timelineData.stackTrace)); } const initiator = TimelineModel.TimelineModel.TimelineData.forEvent(event).initiator(); // Indirect causes. if (TimelineModel.TimelineModel.InvalidationTracker.invalidationEventsFor(event) && target) { // Full invalidation tracking (experimental). contentHelper.addSection(i18nString(UIStrings.invalidations)); TimelineUIUtils.generateInvalidations(event, target, relatedNodesMap, contentHelper); } else if (initiator) { // Partial invalidation tracking. const delay = event.startTime - initiator.startTime; contentHelper.appendTextRow(i18nString(UIStrings.pendingFor), i18n.TimeUtilities.preciseMillisToString(delay, 1)); const link = document.createElement('span'); link.classList.add('devtools-link'); UI.ARIAUtils.markAsLink(link); link.tabIndex = 0; link.textContent = i18nString(UIStrings.reveal); link.addEventListener('click', () => { TimelinePanel.instance().select(TimelineSelection.fromTraceEvent((initiator as SDK.TracingModel.Event))); }); link.addEventListener('keydown', event => { if (event.key === 'Enter') { TimelinePanel.instance().select(TimelineSelection.fromTraceEvent((initiator as SDK.TracingModel.Event))); event.consume(true); } }); contentHelper.appendElementRow(i18nString(UIStrings.initiator), link); const initiatorStackTrace = TimelineModel.TimelineModel.TimelineData.forEvent(initiator).stackTrace; if (initiatorStackTrace) { contentHelper.appendStackTrace( callSiteStackLabel || i18nString(UIStrings.firstInvalidated), TimelineUIUtils.stackTraceFromCallFrames(initiatorStackTrace)); } } } private static generateInvalidations( event: SDK.TracingModel.Event, target: SDK.Target.Target, relatedNodesMap: Map|null, contentHelper: TimelineDetailsContentHelper): void { const invalidationTrackingEvents = TimelineModel.TimelineModel.InvalidationTracker.invalidationEventsFor(event); if (!invalidationTrackingEvents) { return; } const invalidations: { [x: string]: TimelineModel.TimelineModel.InvalidationTrackingEvent[], } = {}; for (const invalidation of invalidationTrackingEvents) { if (!invalidations[invalidation.type]) { invalidations[invalidation.type] = []; } invalidations[invalidation.type].push(invalidation); } Object.keys(invalidations).forEach(function(type) { TimelineUIUtils.generateInvalidationsForType(type, target, invalidations[type], relatedNodesMap, contentHelper); }); } private static generateInvalidationsForType( type: string, target: SDK.Target.Target, invalidations: TimelineModel.TimelineModel.InvalidationTrackingEvent[], relatedNodesMap: Map|null, contentHelper: TimelineDetailsContentHelper): void { let title; switch (type) { case TimelineModel.TimelineModel.RecordType.StyleRecalcInvalidationTracking: title = i18nString(UIStrings.styleInvalidations); break; case TimelineModel.TimelineModel.RecordType.LayoutInvalidationTracking: title = i18nString(UIStrings.layoutInvalidations); break; default: title = i18nString(UIStrings.otherInvalidations); break; } const invalidationsTreeOutline = new UI.TreeOutline.TreeOutlineInShadow(); invalidationsTreeOutline.registerCSSFiles([invalidationsTreeStyles]); invalidationsTreeOutline.element.classList.add('invalidations-tree'); const invalidationGroups = groupInvalidationsByCause(invalidations); invalidationGroups.forEach(function(group) { const groupElement = new InvalidationsGroupElement(target, relatedNodesMap, contentHelper, group); invalidationsTreeOutline.appendChild(groupElement); }); contentHelper.appendElementRow(title, invalidationsTreeOutline.element, false, true); function groupInvalidationsByCause(invalidations: TimelineModel.TimelineModel.InvalidationTrackingEvent[]): TimelineModel.TimelineModel.InvalidationTrackingEvent[][] { const causeToInvalidationMap = new Map(); for (let index = 0; index < invalidations.length; index++) { const invalidation = invalidations[index]; let causeKey = ''; if (invalidation.cause.reason) { causeKey += invalidation.cause.reason + '.'; } if (invalidation.cause.stackTrace) { invalidation.cause.stackTrace.forEach(function(stackFrame) { causeKey += stackFrame['functionName'] + '.'; causeKey += stackFrame['scriptId'] + '.'; causeKey += stackFrame['url'] + '.'; causeKey += stackFrame['lineNumber'] + '.'; causeKey += stackFrame['columnNumber'] + '.'; }); } const causeToInvalidation = causeToInvalidationMap.get(causeKey); if (causeToInvalidation) { causeToInvalidation.push(invalidation); } else { causeToInvalidationMap.set(causeKey, [invalidation]); } } return [...causeToInvalidationMap.values()]; } } private static collectInvalidationNodeIds( nodeIds: Set, invalidations: TimelineModel.TimelineModel.InvalidationTrackingEvent[]): void { Platform.SetUtilities.addAll(nodeIds, invalidations.map(invalidation => invalidation.nodeId).filter(id => id)); } private static aggregatedStatsForTraceEvent( total: { [x: string]: number, }, model: TimelineModel.TimelineModel.TimelineModelImpl, event: SDK.TracingModel.Event): boolean { const events = model.inspectedTargetEvents(); function eventComparator(startTime: number, e: SDK.TracingModel.Event): number { return startTime - e.startTime; } const index = Platform.ArrayUtilities.binaryIndexOf(events, event.startTime, eventComparator); // Not a main thread event? if (index < 0) { return false; } let hasChildren = false; const endTime = event.endTime; if (endTime) { for (let i = index; i < events.length; i++) { const nextEvent = events[i]; if (nextEvent.startTime >= endTime) { break; } if (!nextEvent.selfTime) { continue; } if (nextEvent.thread !== event.thread) { continue; } if (i > index) { hasChildren = true; } const categoryName = TimelineUIUtils.eventStyle(nextEvent).category.name; total[categoryName] = (total[categoryName] || 0) + nextEvent.selfTime; } } if (SDK.TracingModel.TracingModel.isAsyncPhase(event.phase)) { if (event.endTime) { let aggregatedTotal = 0; for (const categoryName in total) { aggregatedTotal += total[categoryName]; } total['idle'] = Math.max(0, event.endTime - event.startTime - aggregatedTotal); } return false; } return hasChildren; } static async buildPicturePreviewContent(event: SDK.TracingModel.Event, target: SDK.Target.Target): Promise { const snapshotWithRect = await new TimelineModel.TimelineFrameModel.LayerPaintEvent(event, target).snapshotPromise(); if (!snapshotWithRect) { return null; } const imageURLPromise = snapshotWithRect.snapshot.replay(); snapshotWithRect.snapshot.release(); const imageURL = await imageURLPromise as Platform.DevToolsPath.UrlString; if (!imageURL) { return null; } const stylesContainer = document.createElement('div'); const shadowRoot = stylesContainer.attachShadow({mode: 'open'}); shadowRoot.adoptedStyleSheets = [imagePreviewStyles]; const container = shadowRoot.createChild('div') as HTMLDivElement; container.classList.add('image-preview-container', 'vbox', 'link'); const img = (container.createChild('img') as HTMLImageElement); img.src = imageURL; img.alt = Components.ImagePreview.ImagePreview.defaultAltTextForImageURL(imageURL); const paintProfilerButton = container.createChild('a'); paintProfilerButton.textContent = i18nString(UIStrings.paintProfiler); UI.ARIAUtils.markAsLink(container); container.tabIndex = 0; container.addEventListener( 'click', () => TimelinePanel.instance().select(TimelineSelection.fromTraceEvent(event)), false); container.addEventListener('keydown', keyEvent => { if (keyEvent.key === 'Enter') { TimelinePanel.instance().select(TimelineSelection.fromTraceEvent(event)); keyEvent.consume(true); } }); return stylesContainer; } static createEventDivider(event: SDK.TracingModel.Event, zeroTime: number): Element { const eventDivider = document.createElement('div'); eventDivider.classList.add('resources-event-divider'); const startTime = i18n.TimeUtilities.millisToString(event.startTime - zeroTime); UI.Tooltip.Tooltip.install( eventDivider, i18nString(UIStrings.sAtS, {PH1: TimelineUIUtils.eventTitle(event), PH2: startTime})); const style = TimelineUIUtils.markerStyleForEvent(event); if (style.tall) { eventDivider.style.backgroundColor = style.color; } return eventDivider; } private static visibleTypes(): string[] { const eventStyles = TimelineUIUtils.initEventStyles(); const result = []; for (const name in eventStyles) { if (!eventStyles[name].hidden) { result.push(name); } } return result; } static visibleEventsFilter(): TimelineModel.TimelineModelFilter.TimelineModelFilter { return new TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter(TimelineUIUtils.visibleTypes()); } static categories(): { [x: string]: TimelineCategory, } { if (categories) { return categories; } categories = { loading: new TimelineCategory( 'loading', i18nString(UIStrings.loading), true, 'hsl(214, 67%, 74%)', 'hsl(214, 67%, 66%)'), experience: new TimelineCategory( 'experience', i18nString(UIStrings.experience), false, 'hsl(5, 80%, 74%)', 'hsl(5, 80%, 66%)'), scripting: new TimelineCategory( 'scripting', i18nString(UIStrings.scripting), true, 'hsl(43, 83%, 72%)', 'hsl(43, 83%, 64%) '), rendering: new TimelineCategory( 'rendering', i18nString(UIStrings.rendering), true, 'hsl(256, 67%, 76%)', 'hsl(256, 67%, 70%)'), painting: new TimelineCategory( 'painting', i18nString(UIStrings.painting), true, 'hsl(109, 33%, 64%)', 'hsl(109, 33%, 55%)'), gpu: new TimelineCategory('gpu', i18nString(UIStrings.gpu), false, 'hsl(109, 33%, 64%)', 'hsl(109, 33%, 55%)'), async: new TimelineCategory('async', i18nString(UIStrings.async), false, 'hsl(0, 100%, 50%)', 'hsl(0, 100%, 40%)'), other: new TimelineCategory('other', i18nString(UIStrings.system), false, 'hsl(0, 0%, 87%)', 'hsl(0, 0%, 79%)'), idle: new TimelineCategory('idle', i18nString(UIStrings.idle), false, 'hsl(0, 0%, 98%)', 'hsl(0, 0%, 98%)'), }; return categories; } static setCategories(cats: { [x: string]: TimelineCategory, }): void { categories = cats; } static getTimelineMainEventCategories(): string[] { if (eventCategories) { return eventCategories; } eventCategories = ['idle', 'loading', 'painting', 'rendering', 'scripting', 'other']; return eventCategories; } static setTimelineMainEventCategories(categories: string[]): void { eventCategories = categories; } static generatePieChart( aggregatedStats: { [x: string]: number, }, selfCategory?: TimelineCategory, selfTime?: number): Element { let total = 0; for (const categoryName in aggregatedStats) { total += aggregatedStats[categoryName]; } const element = document.createElement('div'); element.classList.add('timeline-details-view-pie-chart-wrapper'); element.classList.add('hbox'); const pieChart = new PerfUI.PieChart.PieChart(); const slices: { value: number, color: string, title: string, }[] = []; function appendLegendRow(name: string, title: string, value: number, color: string): void { if (!value) { return; } slices.push({value, color, title}); } // In case of self time, first add self, then children of the same category. if (selfCategory) { if (selfTime) { appendLegendRow( selfCategory.name, i18nString(UIStrings.sSelf, {PH1: selfCategory.title}), selfTime, selfCategory.color); } // Children of the same category. const categoryTime = aggregatedStats[selfCategory.name]; const value = categoryTime - (selfTime || 0); if (value > 0) { appendLegendRow( selfCategory.name, i18nString(UIStrings.sChildren, {PH1: selfCategory.title}), value, selfCategory.childColor); } } // Add other categories. for (const categoryName in TimelineUIUtils.categories()) { const category = TimelineUIUtils.categories()[categoryName]; if (category === selfCategory) { continue; } appendLegendRow(category.name, category.title, aggregatedStats[category.name], category.childColor); } pieChart.data = { chartName: i18nString(UIStrings.timeSpentInRendering), size: 110, formatter: (value: number): string => i18n.TimeUtilities.preciseMillisToString(value), showLegend: true, total, slices, }; const pieChartContainer = element.createChild('div', 'vbox'); pieChartContainer.appendChild(pieChart); return element; } static generateDetailsContentForFrame( frame: TimelineModel.TimelineFrameModel.TimelineFrame, filmStripFrame: SDK.FilmStripModel.Frame|null): DocumentFragment { const contentHelper = new TimelineDetailsContentHelper(null, null); contentHelper.addSection(i18nString(UIStrings.frame)); const duration = TimelineUIUtils.frameDuration(frame); contentHelper.appendElementRow(i18nString(UIStrings.duration), duration, frame.hasWarnings()); contentHelper.appendTextRow(i18nString(UIStrings.cpuTime), i18n.TimeUtilities.millisToString(frame.cpuTime, true)); if (filmStripFrame) { const filmStripPreview = document.createElement('div'); filmStripPreview.classList.add('timeline-filmstrip-preview'); void filmStripFrame.imageDataPromise() .then(data => UI.UIUtils.loadImageFromData(data)) .then(image => image && filmStripPreview.appendChild(image)); contentHelper.appendElementRow('', filmStripPreview); filmStripPreview.addEventListener('click', frameClicked.bind(null, filmStripFrame), false); } if (frame.layerTree) { contentHelper.appendElementRow( i18nString(UIStrings.layerTree), Components.Linkifier.Linkifier.linkifyRevealable(frame.layerTree, i18nString(UIStrings.show))); } function frameClicked(filmStripFrame: SDK.FilmStripModel.Frame): void { new PerfUI.FilmStripView.Dialog(filmStripFrame, 0); } return contentHelper.fragment; } static frameDuration(frame: TimelineModel.TimelineFrameModel.TimelineFrame): Element { const durationText = i18nString(UIStrings.sAtSParentheses, { PH1: i18n.TimeUtilities.millisToString(frame.endTime - frame.startTime, true), PH2: i18n.TimeUtilities.millisToString(frame.startTimeOffset, true), }); if (!frame.hasWarnings()) { return i18n.i18n.getFormatLocalizedString(str_, UIStrings.emptyPlaceholder, {PH1: durationText}); } const link = UI.XLink.XLink.create( 'https://developers.google.com/web/fundamentals/performance/rendering/', i18nString(UIStrings.jank)); return i18n.i18n.getFormatLocalizedString( str_, UIStrings.sLongFrameTimesAreAnIndicationOf, {PH1: durationText, PH2: link}); } static createFillStyle( context: CanvasRenderingContext2D, width: number, height: number, color0: string, color1: string, color2: string): CanvasGradient { const gradient = context.createLinearGradient(0, 0, width, height); gradient.addColorStop(0, color0); gradient.addColorStop(0.25, color1); gradient.addColorStop(0.75, color1); gradient.addColorStop(1, color2); return gradient; } static quadWidth(quad: number[]): number { return Math.round(Math.sqrt(Math.pow(quad[0] - quad[2], 2) + Math.pow(quad[1] - quad[3], 2))); } static quadHeight(quad: number[]): number { return Math.round(Math.sqrt(Math.pow(quad[0] - quad[6], 2) + Math.pow(quad[1] - quad[7], 2))); } static eventDispatchDesciptors(): EventDispatchTypeDescriptor[] { if (eventDispatchDesciptors) { return eventDispatchDesciptors; } const lightOrange = 'hsl(40,100%,80%)'; const orange = 'hsl(40,100%,50%)'; const green = 'hsl(90,100%,40%)'; const purple = 'hsl(256,100%,75%)'; eventDispatchDesciptors = [ new EventDispatchTypeDescriptor( 1, lightOrange, ['mousemove', 'mouseenter', 'mouseleave', 'mouseout', 'mouseover']), new EventDispatchTypeDescriptor( 1, lightOrange, ['pointerover', 'pointerout', 'pointerenter', 'pointerleave', 'pointermove']), new EventDispatchTypeDescriptor(2, green, ['wheel']), new EventDispatchTypeDescriptor(3, orange, ['click', 'mousedown', 'mouseup']), new EventDispatchTypeDescriptor(3, orange, ['touchstart', 'touchend', 'touchmove', 'touchcancel']), new EventDispatchTypeDescriptor( 3, orange, ['pointerdown', 'pointerup', 'pointercancel', 'gotpointercapture', 'lostpointercapture']), new EventDispatchTypeDescriptor(3, purple, ['keydown', 'keyup', 'keypress']), ]; return eventDispatchDesciptors; } static markerShortTitle(event: SDK.TracingModel.Event): string|null { const recordTypes = TimelineModel.TimelineModel.RecordType; switch (event.name) { case recordTypes.MarkDOMContent: return i18n.i18n.lockedString('DCL'); case recordTypes.MarkLoad: return i18n.i18n.lockedString('L'); case recordTypes.MarkFirstPaint: return i18n.i18n.lockedString('FP'); case recordTypes.MarkFCP: return i18n.i18n.lockedString('FCP'); case recordTypes.MarkLCPCandidate: return i18n.i18n.lockedString('LCP'); } return null; } static markerStyleForEvent(event: SDK.TracingModel.Event): TimelineMarkerStyle { const tallMarkerDashStyle = [6, 4]; const title = TimelineUIUtils.eventTitle(event); const recordTypes = TimelineModel.TimelineModel.RecordType; if (event.name !== recordTypes.NavigationStart && (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.Console) || event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming))) { return { title: title, dashStyle: tallMarkerDashStyle, lineWidth: 0.5, color: event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming) ? 'purple' : 'orange', tall: false, lowPriority: false, }; } let tall = false; let color = 'grey'; switch (event.name) { case recordTypes.NavigationStart: color = '#FF9800'; tall = true; break; case recordTypes.FrameStartedLoading: color = 'green'; tall = true; break; case recordTypes.MarkDOMContent: color = '#0867CB'; tall = true; break; case recordTypes.MarkLoad: color = '#B31412'; tall = true; break; case recordTypes.MarkFirstPaint: color = '#228847'; tall = true; break; case recordTypes.MarkFCP: color = '#1A6937'; tall = true; break; case recordTypes.MarkLCPCandidate: color = '#1A3422'; tall = true; break; case recordTypes.TimeStamp: color = 'orange'; break; } return { title: title, dashStyle: tallMarkerDashStyle, lineWidth: 0.5, color: color, tall: tall, lowPriority: false, }; } static markerStyleForFrame(): TimelineMarkerStyle { return { title: i18nString(UIStrings.frame), color: 'rgba(100, 100, 100, 0.4)', lineWidth: 3, dashStyle: [3], tall: true, lowPriority: true, }; } static colorForId(id: string): string { if (!colorGenerator) { colorGenerator = new Common.Color.Generator({min: 30, max: 330, count: undefined}, {min: 50, max: 80, count: 3}, 85); colorGenerator.setColorForID('', '#f2ecdc'); } return colorGenerator.colorForID(id); } static eventWarning(event: SDK.TracingModel.Event, warningType?: string): Element|null { const timelineData = TimelineModel.TimelineModel.TimelineData.forEvent(event); const warning = warningType || timelineData.warning; if (!warning) { return null; } const warnings = TimelineModel.TimelineModel.TimelineModelImpl.WarningType; const span = document.createElement('span'); const eventData = event.args['data']; switch (warning) { case warnings.ForcedStyle: case warnings.ForcedLayout: { const forcedReflowLink = UI.XLink.XLink.create( 'https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts', i18nString(UIStrings.forcedReflow)); span.appendChild(i18n.i18n.getFormatLocalizedString( str_, UIStrings.sIsALikelyPerformanceBottleneck, {PH1: forcedReflowLink})); break; } case warnings.IdleDeadlineExceeded: { const exceededMs = i18n.TimeUtilities.millisToString((event.duration || 0) - eventData['allottedMilliseconds'], true); span.textContent = i18nString(UIStrings.idleCallbackExecutionExtended, {PH1: exceededMs}); break; } case warnings.LongHandler: { span.textContent = i18nString(UIStrings.handlerTookS, {PH1: i18n.TimeUtilities.millisToString((event.duration || 0), true)}); break; } case warnings.LongRecurringHandler: { span.textContent = i18nString( UIStrings.recurringHandlerTookS, {PH1: i18n.TimeUtilities.millisToString((event.duration || 0), true)}); break; } case warnings.LongTask: { const longTaskLink = UI.XLink.XLink.create('https://web.dev/rail/#goals-and-guidelines', i18nString(UIStrings.longTask)); span.appendChild(i18n.i18n.getFormatLocalizedString( str_, UIStrings.sTookS, {PH1: longTaskLink, PH2: i18n.TimeUtilities.millisToString((event.duration || 0), true)})); break; } case warnings.V8Deopt: { span.appendChild(UI.XLink.XLink.create( 'https://github.com/GoogleChrome/devtools-docs/issues/53', i18nString(UIStrings.notOptimized))); UI.UIUtils.createTextChild(span, i18nString(UIStrings.emptyPlaceholderColon, {PH1: eventData['deoptReason']})); break; } default: { console.assert(false, 'Unhandled TimelineModel.WarningType'); } } return span; } // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration // eslint-disable-next-line @typescript-eslint/no-explicit-any static displayNameForFrame(frame: TimelineModel.TimelineModel.PageFrame, trimAt?: number): any { const url = frame.url; if (!trimAt) { trimAt = 30; } return url.startsWith('about:') ? `"${Platform.StringUtilities.trimMiddle(frame.name, trimAt)}"` : frame.url.trimEnd(trimAt); } } 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; } } // TODO(crbug.com/1167717): Make this a const enum again // eslint-disable-next-line rulesdir/const_enum export enum NetworkCategory { HTML = 'HTML', Script = 'Script', Style = 'Style', Media = 'Media', Other = 'Other', } export const aggregatedStatsKey = Symbol('aggregatedStats'); export class InvalidationsGroupElement extends UI.TreeOutline.TreeElement { toggleOnClick: boolean; private readonly relatedNodesMap: Map|null; private readonly contentHelper: TimelineDetailsContentHelper; private readonly invalidations: TimelineModel.TimelineModel.InvalidationTrackingEvent[]; constructor( target: SDK.Target.Target, relatedNodesMap: Map|null, contentHelper: TimelineDetailsContentHelper, invalidations: TimelineModel.TimelineModel.InvalidationTrackingEvent[]) { super('', true); this.listItemElement.classList.add('header'); this.selectable = false; this.toggleOnClick = true; this.relatedNodesMap = relatedNodesMap; this.contentHelper = contentHelper; this.invalidations = invalidations; this.title = this.createTitle(target); } private createTitle(target: SDK.Target.Target): Element { const first = this.invalidations[0]; const reason = first.cause.reason || i18nString(UIStrings.unknownCause); const topFrame = first.cause.stackTrace && first.cause.stackTrace[0]; const truncatedNodesElement = this.getTruncatedNodesElement(this.invalidations); if (truncatedNodesElement === null) { return i18n.i18n.getFormatLocalizedString(str_, UIStrings.emptyPlaceholder, {PH1: reason}); } const title = i18n.i18n.getFormatLocalizedString(str_, UIStrings.sForS, {PH1: reason, PH2: truncatedNodesElement}); if (topFrame && this.contentHelper.linkifier()) { const stack = document.createElement('span'); stack.classList.add('monospace'); const completeTitle = i18n.i18n.getFormatLocalizedString(str_, UIStrings.sSDot, {PH1: title, PH2: stack}); stack.createChild('span').textContent = TimelineUIUtils.frameDisplayName(topFrame); const linkifier = this.contentHelper.linkifier(); if (linkifier) { const link = linkifier.maybeLinkifyConsoleCallFrame(target, topFrame, {showColumnNumber: true, inlineFrameIndex: 0}); if (link) { // Linkifier is using a workaround with the 'zero width space' (\u200b). // TODO(szuend): Remove once the Linkifier is no longer using the workaround. if (!link.textContent || link.textContent === '\u200b') { link.textContent = i18nString(UIStrings.unknown); } stack.createChild('span').textContent = ' @ '; stack.createChild('span').appendChild(link); } } return completeTitle; } return title; } async onpopulate(): Promise { const content = document.createElement('div'); content.classList.add('content'); const first = this.invalidations[0]; if (first.cause.stackTrace) { const stack = content.createChild('div'); UI.UIUtils.createTextChild(stack, i18nString(UIStrings.stackTraceColon)); this.contentHelper.createChildStackTraceElement( stack, TimelineUIUtils.stackTraceFromCallFrames(first.cause.stackTrace)); } UI.UIUtils.createTextChild( content, this.invalidations.length !== 1 ? i18nString(UIStrings.nodes) : i18nString(UIStrings.node)); const nodeList = content.createChild('div', 'node-list'); let firstNode = true; for (let i = 0; i < this.invalidations.length; i++) { const invalidation = this.invalidations[i]; const invalidationNode = this.createInvalidationNode(invalidation, true); if (invalidationNode) { if (!firstNode) { UI.UIUtils.createTextChild(nodeList, ', '); } firstNode = false; nodeList.appendChild(invalidationNode); const extraData = invalidation.extraData ? ', ' + invalidation.extraData : ''; if (invalidation.changedId) { UI.UIUtils.createTextChild( nodeList, i18nString(UIStrings.changedIdToSs, {PH1: invalidation.changedId, PH2: extraData})); } else if (invalidation.changedClass) { UI.UIUtils.createTextChild( nodeList, i18nString(UIStrings.changedClassToSs, {PH1: invalidation.changedClass, PH2: extraData})); } else if (invalidation.changedAttribute) { UI.UIUtils.createTextChild( nodeList, i18nString(UIStrings.changedAttributeToSs, {PH1: invalidation.changedAttribute, PH2: extraData})); } else if (invalidation.changedPseudo) { UI.UIUtils.createTextChild( nodeList, i18nString(UIStrings.changedPesudoToSs, {PH1: invalidation.changedPseudo, PH2: extraData})); } else if (invalidation.selectorPart) { UI.UIUtils.createTextChild( nodeList, i18nString(UIStrings.changedSs, {PH1: invalidation.selectorPart, extraData})); } } } const contentTreeElement = new UI.TreeOutline.TreeElement(content, false); contentTreeElement.selectable = false; this.appendChild(contentTreeElement); } private getTruncatedNodesElement(invalidations: TimelineModel.TimelineModel.InvalidationTrackingEvent[]): Element |null { const invalidationNodes = []; const invalidationNodeIdMap: { [x: number]: boolean, } = {}; for (let i = 0; i < invalidations.length; i++) { const invalidation = invalidations[i]; const invalidationNode = this.createInvalidationNode(invalidation, false); invalidationNode.addEventListener( 'click', (evt: Event) => evt.consume(), false); if (invalidationNode && invalidation.nodeId && !invalidationNodeIdMap[invalidation.nodeId]) { invalidationNodes.push(invalidationNode); invalidationNodeIdMap[invalidation.nodeId] = true; } } if (invalidationNodes.length === 1) { const node = invalidationNodes[0]; if (node instanceof HTMLSpanElement) { return node; } return null; } if (invalidationNodes.length === 2) { return i18n.i18n.getFormatLocalizedString( str_, UIStrings.sAndS, {PH1: invalidationNodes[0], PH2: invalidationNodes[1]}); } if (invalidationNodes.length === 3) { return i18n.i18n.getFormatLocalizedString( str_, UIStrings.sAndSOther, {PH1: invalidationNodes[0], PH2: invalidationNodes[1]}); } if (invalidationNodes.length >= 4) { return i18n.i18n.getFormatLocalizedString( str_, UIStrings.sSAndSOthers, {PH1: invalidationNodes[0], PH2: invalidationNodes[1], PH3: String(invalidationNodes.length - 2)}); } return null; } private createInvalidationNode( invalidation: TimelineModel.TimelineModel.InvalidationTrackingEvent, showUnknownNodes: boolean): HTMLSpanElement |Text { const node = (invalidation.nodeId && this.relatedNodesMap) ? this.relatedNodesMap.get(invalidation.nodeId) : null; if (node) { const nodeSpan = document.createElement('span'); void Common.Linkifier.Linkifier.linkify(node).then(link => nodeSpan.appendChild(link)); return nodeSpan; } if (invalidation.nodeName) { const nodeSpan = document.createElement('span'); nodeSpan.textContent = invalidation.nodeName; return nodeSpan; } if (showUnknownNodes) { const nodeSpan = document.createElement('span'); return UI.UIUtils.createTextChild(nodeSpan, i18nString(UIStrings.UnknownNode)); } throw new Error('Unable to create invalidation node'); } } export const previewElementSymbol = Symbol('previewElement'); export class EventDispatchTypeDescriptor { priority: number; color: string; eventTypes: string[]; constructor(priority: number, color: string, eventTypes: string[]) { this.priority = priority; this.color = color; this.eventTypes = eventTypes; } } export class TimelineCategory { name: string; title: string; visible: boolean; childColor: string; color: string; private hiddenInternal?: boolean; constructor(name: string, title: string, visible: boolean, childColor: string, color: string) { this.name = name; this.title = title; this.visible = visible; this.childColor = childColor; this.color = color; this.hidden = false; } get hidden(): boolean { return Boolean(this.hiddenInternal); } set hidden(hidden: boolean) { this.hiddenInternal = hidden; } } export class TimelineDetailsContentHelper { fragment: DocumentFragment; private linkifierInternal: Components.Linkifier.Linkifier|null; private target: SDK.Target.Target|null; element: HTMLDivElement; private tableElement: HTMLElement; constructor(target: SDK.Target.Target|null, linkifier: Components.Linkifier.Linkifier|null) { this.fragment = document.createDocumentFragment(); this.linkifierInternal = linkifier; this.target = target; this.element = document.createElement('div'); this.element.classList.add('timeline-details-view-block'); this.tableElement = this.element.createChild('div', 'vbox timeline-details-chip-body'); this.fragment.appendChild(this.element); } addSection(title: string, swatchColor?: string): void { if (!this.tableElement.hasChildNodes()) { this.element.removeChildren(); } else { this.element = document.createElement('div'); this.element.classList.add('timeline-details-view-block'); this.fragment.appendChild(this.element); } if (title) { const titleElement = this.element.createChild('div', 'timeline-details-chip-title'); if (swatchColor) { titleElement.createChild('div').style.backgroundColor = swatchColor; } UI.UIUtils.createTextChild(titleElement, title); } this.tableElement = this.element.createChild('div', 'vbox timeline-details-chip-body'); this.fragment.appendChild(this.element); } linkifier(): Components.Linkifier.Linkifier|null { return this.linkifierInternal; } appendTextRow(title: string, value: string|number|boolean): void { const rowElement = this.tableElement.createChild('div', 'timeline-details-view-row'); rowElement.createChild('div', 'timeline-details-view-row-title').textContent = title; rowElement.createChild('div', 'timeline-details-view-row-value').textContent = value.toString(); } appendElementRow(title: string, content: string|Node, isWarning?: boolean, isStacked?: boolean): void { const rowElement = this.tableElement.createChild('div', 'timeline-details-view-row'); if (isWarning) { rowElement.classList.add('timeline-details-warning'); } if (isStacked) { rowElement.classList.add('timeline-details-stack-values'); } const titleElement = rowElement.createChild('div', 'timeline-details-view-row-title'); titleElement.textContent = title; const valueElement = rowElement.createChild('div', 'timeline-details-view-row-value'); if (content instanceof Node) { valueElement.appendChild(content); } else { UI.UIUtils.createTextChild(valueElement, content || ''); } } appendLocationRow(title: string, url: string, startLine: number, startColumn?: number): void { if (!this.linkifierInternal || !this.target) { return; } const options = { tabStop: true, columnNumber: startColumn, showColumnNumber: true, inlineFrameIndex: 0, }; const link = this.linkifierInternal.maybeLinkifyScriptLocation( this.target, null, url as Platform.DevToolsPath.UrlString, startLine, options); if (!link) { return; } this.appendElementRow(title, link); } appendLocationRange(title: string, url: Platform.DevToolsPath.UrlString, startLine: number, endLine?: number): void { if (!this.linkifierInternal || !this.target) { return; } const locationContent = document.createElement('span'); const link = this.linkifierInternal.maybeLinkifyScriptLocation( this.target, null, url, startLine, {tabStop: true, inlineFrameIndex: 0}); if (!link) { return; } locationContent.appendChild(link); UI.UIUtils.createTextChild( locationContent, Platform.StringUtilities.sprintf(' [%s…%s]', startLine + 1, (endLine || 0) + 1 || '')); this.appendElementRow(title, locationContent); } appendStackTrace(title: string, stackTrace: Protocol.Runtime.StackTrace): void { if (!this.linkifierInternal || !this.target) { return; } const rowElement = this.tableElement.createChild('div', 'timeline-details-view-row'); rowElement.createChild('div', 'timeline-details-view-row-title').textContent = title; this.createChildStackTraceElement(rowElement, stackTrace); } createChildStackTraceElement(parentElement: Element, stackTrace: Protocol.Runtime.StackTrace): void { if (!this.linkifierInternal || !this.target) { return; } parentElement.classList.add('timeline-details-stack-values'); const stackTraceElement = parentElement.createChild('div', 'timeline-details-view-row-value timeline-details-view-row-stack-trace'); const callFrameContents = Components.JSPresentationUtils.buildStackTracePreviewContents( this.target, this.linkifierInternal, {stackTrace, tabStops: true}); stackTraceElement.appendChild(callFrameContents.element); } appendWarningRow(event: SDK.TracingModel.Event, warningType?: string): void { const warning = TimelineUIUtils.eventWarning(event, warningType); if (warning) { this.appendElementRow(i18nString(UIStrings.warning), warning, true); } } } export const categoryBreakdownCacheSymbol = Symbol('categoryBreakdownCache'); export interface TimelineMarkerStyle { title: string; color: string; lineWidth: number; dashStyle: number[]; tall: boolean; lowPriority: boolean; } export function assignLayoutShiftsToClusters(layoutShifts: readonly SDK.TracingModel.Event[]): void { const gapTimeInMs = 1000; const limitTimeInMs = 5000; let firstTimestamp = Number.NEGATIVE_INFINITY; let previousTimestamp = Number.NEGATIVE_INFINITY; let currentClusterId = 0; let currentClusterScore = 0; let currentCluster = new Set(); for (const event of layoutShifts) { if (event.args['data']['had_recent_input'] || event.args['data']['weighted_score_delta'] === undefined) { continue; } if (event.startTime - firstTimestamp > limitTimeInMs || event.startTime - previousTimestamp > gapTimeInMs) { // This means the event does not fit into the current session/cluster, so we need to start a new cluster. firstTimestamp = event.startTime; // Update all the layout shifts we found in this cluster to associate them with the cluster. for (const layoutShift of currentCluster) { layoutShift.args['data']['_current_cluster_score'] = currentClusterScore; layoutShift.args['data']['_current_cluster_id'] = currentClusterId; } // Increment the cluster ID and reset the data. currentClusterId += 1; currentClusterScore = 0; currentCluster = new Set(); } // Store the timestamp of the previous layout shift. previousTimestamp = event.startTime; // Update the score of the current cluster and store this event in that cluster currentClusterScore += event.args['data']['weighted_score_delta']; currentCluster.add(event); } // The last cluster we find may not get closed out - so if not, update all the shifts that we associate with it. for (const layoutShift of currentCluster) { layoutShift.args['data']['_current_cluster_score'] = currentClusterScore; layoutShift.args['data']['_current_cluster_id'] = currentClusterId; } }