@yuebai008/cli/dist/cli-server/client/front_end/panels/timeline/TimelineUIUtils.js

Command line interface for rapid qg-minigame development

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 TraceEngine from"../../models/trace/trace.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 invalidationsTreeStyles from"./invalidationsTree.css.js";import imagePreviewStyles from"../../ui/legacy/components/utils/imagePreview.css.js";import{CLSRect}from"./CLSLinkifier.js";import{TimelinePanel}from"./TimelinePanel.js";import{TimelineSelection}from"./TimelineSelection.js";import{titleForInteractionEvent}from"./InteractionsTrackAppender.js";const UIStrings={sAndS:"{PH1} and {PH2}",sAndSOther:"{PH1}, {PH2}, and 1 other",task:"Task",other:"Other",animation:"Animation",event:"Event",requestMainThreadFrame:"Request Main Thread Frame",frameStart:"Frame Start",frameStartMainThread:"Frame Start (main thread)",drawFrame:"Draw Frame",profilingOverhead:"Profiling Overhead",hitTest:"Hit Test",scheduleStyleRecalculation:"Schedule Style Recalculation",recalculateStyle:"Recalculate Style",invalidateLayout:"Invalidate Layout",layerize:"Layerize",layout:"Layout",paintSetup:"Paint Setup",paintImage:"Paint Image",prePaint:"Pre-Paint",updateLayer:"Update Layer",updateLayerTree:"Update Layer Tree",initialPriority:"Initial Priority",paint:"Paint",rasterizePaint:"Rasterize Paint",scroll:"Scroll",commit:"Commit",compositeLayers:"Composite Layers",computeIntersections:"Compute Intersections",parseHtml:"Parse HTML",parseStylesheet:"Parse Stylesheet",installTimer:"Install Timer",removeTimer:"Remove Timer",timerFired:"Timer Fired",xhrReadyStateChange:"`XHR` Ready State Change",xhrLoad:"`XHR` Load",compileScript:"Compile Script",cacheScript:"Cache Script Code",compileCode:"Compile Code",optimizeCode:"Optimize Code",evaluateScript:"Evaluate Script",compileModule:"Compile Module",cacheModule:"Cache Module Code",evaluateModule:"Evaluate Module",streamingCompileTask:"Streaming Compile Task",waitingForNetwork:"Waiting for Network",parseAndCompile:"Parse and Compile",deserializeCodeCache:"Deserialize Code Cache",streamingWasmResponse:"Streaming Wasm Response",compiledWasmModule:"Compiled Wasm Module",cachedWasmModule:"Cached Wasm Module",wasmModuleCacheHit:"Wasm Module Cache Hit",wasmModuleCacheInvalid:"Wasm Module Cache Invalid",frameStartedLoading:"Frame Started Loading",onloadEvent:"Onload Event",domcontentloadedEvent:"DOMContentLoaded Event",firstPaint:"First Paint",firstContentfulPaint:"First Contentful Paint",largestContentfulPaint:"Largest Contentful Paint",timestamp:"Timestamp",consoleTime:"Console Time",userTiming:"User Timing",willSendRequest:"Will Send Request",sendRequest:"Send Request",receiveResponse:"Receive Response",finishLoading:"Finish Loading",receiveData:"Receive Data",runMicrotasks:"Run Microtasks",functionCall:"Function Call",gcEvent:"GC Event",majorGc:"Major GC",minorGc:"Minor GC",jsRoot:"JS Root",jsFrame:"JS Frame",jsIdleFrame:"JS Idle Frame",jsSystemFrame:"JS System Frame",requestAnimationFrame:"Request Animation Frame",interactionID:"ID",cancelAnimationFrame:"Cancel Animation Frame",animationFrameFired:"Animation Frame Fired",requestIdleCallback:"Request Idle Callback",cancelIdleCallback:"Cancel Idle Callback",fireIdleCallback:"Fire Idle Callback",createWebsocket:"Create WebSocket",sendWebsocketHandshake:"Send WebSocket Handshake",receiveWebsocketHandshake:"Receive WebSocket Handshake",destroyWebsocket:"Destroy WebSocket",embedderCallback:"Embedder Callback",imageDecode:"Image Decode",imageResize:"Image Resize",gpu:"GPU",domGc:"DOM GC",encrypt:"Encrypt",encryptReply:"Encrypt Reply",decrypt:"Decrypt",decryptReply:"Decrypt Reply",digest:"Digest",digestReply:"Digest Reply",sign:"Sign",signReply:"Sign Reply",verify:"Verify",verifyReply:"Verify Reply",asyncTask:"Async Task",layoutShift:"Layout Shift",eventTiming:"Event Timing",compile:"Compile",parse:"Parse",sS:"{PH1}: {PH2}",sCollected:"{PH1} collected",sSs:"{PH1} [{PH2}…{PH3}]",sSSquareBrackets:"{PH1} [{PH2}…]",learnMore:"Learn more",compilationCacheStatus:"Compilation cache status",compilationCacheSize:"Compilation cache size",compilationCacheKind:"Compilation cache kind",scriptLoadedFromCache:"script loaded from cache",failedToLoadScriptFromCache:"failed to load script from cache",scriptNotEligible:"script not eligible",totalTime:"Total Time",selfTime:"Self Time",collected:"Collected",function:"Function",timerId:"Timer ID",timeout:"Timeout",repeats:"Repeats",callbackId:"Callback ID",resource:"Resource",requestMethod:"Request Method",statusCode:"Status Code",mimeTypeCaps:"MIME Type",priority:"Priority",encodedData:"Encoded Data",sBytes:"{n, plural, =1 {# Byte} other {# Bytes}}",decodedBody:"Decoded Body",module:"Module",script:"Script",streamed:"Streamed",eagerCompile:"Compiling all functions eagerly",url:"Url",producedCacheSize:"Produced Cache Size",consumedCacheSize:"Consumed Cache Size",location:"Location",sSCurlyBrackets:"({PH1}, {PH2})",dimensions:"Dimensions",sSDimensions:"{PH1} × {PH2}",layerRoot:"Layer Root",ownerElement:"Owner Element",imageUrl:"Image URL",stylesheetUrl:"Stylesheet URL",elementsAffected:"Elements Affected",nodesThatNeedLayout:"Nodes That Need Layout",sOfS:"{PH1} of {PH2}",layoutRoot:"Layout root",message:"Message",websocketProtocol:"WebSocket Protocol",callbackFunction:"Callback Function",state:"State",range:"Range",allottedTime:"Allotted Time",invokedByTimeout:"Invoked by Timeout",type:"Type",size:"Size",details:"Details",cumulativeLayoutShifts:"Cumulative Layout Shifts",evolvedClsLink:"evolved",sCLSInformation:"{PH1} can result in poor user experiences. It has recently {PH2}.",warning:"Warning",score:"Score",cumulativeScore:"Cumulative Score",currentClusterScore:"Current Cluster Score",currentClusterId:"Current Cluster ID",hadRecentInput:"Had recent input",yes:"Yes",no:"No",movedFrom:"Moved from",movedTo:"Moved to",relatedNode:"Related Node",preview:"Preview",aggregatedTime:"Aggregated Time",networkRequest:"Network request",loadFromCache:"load from cache",networkTransfer:"network transfer",SSSResourceLoading:" ({PH1} {PH2} + {PH3} resource loading)",duration:"Duration",mimeType:"Mime Type",FromMemoryCache:" (from memory cache)",FromCache:" (from cache)",FromPush:" (from push)",FromServiceWorker:" (from `service worker`)",initiator:"Initiator",timerInstalled:"Timer Installed",animationFrameRequested:"Animation Frame Requested",idleCallbackRequested:"Idle Callback Requested",recalculationForced:"Recalculation Forced",firstLayoutInvalidation:"First Layout Invalidation",layoutForced:"Layout Forced",callStacks:"Call Stacks",stackTrace:"Stack Trace",invalidations:"Invalidations",pendingFor:"Pending for",reveal:"Reveal",firstInvalidated:"First Invalidated",styleInvalidations:"Style Invalidations",layoutInvalidations:"Layout Invalidations",otherInvalidations:"Other Invalidations",paintProfiler:"Paint Profiler",sAtS:"{PH1} at {PH2}",loading:"Loading",experience:"Experience",scripting:"Scripting",rendering:"Rendering",painting:"Painting",async:"Async",system:"System",idle:"Idle",sSelf:"{PH1} (self)",sChildren:"{PH1} (children)",timeSpentInRendering:"Time spent in rendering",frame:"Frame",cpuTime:"CPU time",layerTree:"Layer tree",show:"Show",sAtSParentheses:"{PH1} (at {PH2})",emptyPlaceholder:"{PH1}",forcedReflow:"Forced reflow",longInteractionINP:"Long interaction",sIsLikelyPoorPageResponsiveness:"{PH1} is indicating poor page responsiveness.",sIsALikelyPerformanceBottleneck:"{PH1} is a likely performance bottleneck.",idleCallbackExecutionExtended:"Idle callback execution extended beyond deadline by {PH1}",handlerTookS:"Handler took {PH1}",recurringHandlerTookS:"Recurring handler took {PH1}",longTask:"Long task",sTookS:"{PH1} took {PH2}.",notOptimized:"Not optimized",emptyPlaceholderColon:": {PH1}",unknownCause:"Unknown cause",sForS:"{PH1} for {PH2}",sSDot:"{PH1}. {PH2}",unknown:"unknown",stackTraceColon:"Stack trace:",nodes:"Nodes:",node:"Node:",changedIdToSs:'(changed id to "{PH1}"{PH2})',changedClassToSs:'(changed class to "{PH1}"{PH2})',changedAttributeToSs:'(changed attribute to "{PH1}"{PH2})',changedPesudoToSs:'(changed pseudo to "{PH1}"{PH2})',changedSs:'(changed "{PH1}"{PH2})',sSAndSOthers:"{PH1}, {PH2}, and {PH3} others",UnknownNode:"[ unknown node ]"},str_=i18n.i18n.registerUIStrings("panels/timeline/TimelineUIUtils.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let eventStylesMap,categories,eventCategories,eventDispatchDesciptors,colorGenerator;const requestPreviewElements=new WeakMap;export class TimelineUIUtils{static initEventStyles(){if(eventStylesMap)return eventStylesMap;const e=TimelineModel.TimelineModel.RecordType,i=TimelineUIUtils.categories(),t=i.rendering,n=i.scripting,r=i.loading,a=i.experience,o=i.painting,s=i.other,l=i.idle,c={};return c[e.Task]=new TimelineRecordStyle(i18nString(UIStrings.task),s),c[e.Program]=new TimelineRecordStyle(i18nString(UIStrings.other),s),c[e.StartProfiling]=new TimelineRecordStyle(UIStrings.profilingOverhead,s),c[e.Animation]=new TimelineRecordStyle(i18nString(UIStrings.animation),t),c[e.EventDispatch]=new TimelineRecordStyle(i18nString(UIStrings.event),n),c[e.RequestMainThreadFrame]=new TimelineRecordStyle(i18nString(UIStrings.requestMainThreadFrame),t,!0),c[e.BeginFrame]=new TimelineRecordStyle(i18nString(UIStrings.frameStart),t,!0),c[e.BeginMainThreadFrame]=new TimelineRecordStyle(i18nString(UIStrings.frameStartMainThread),t,!0),c[e.DrawFrame]=new TimelineRecordStyle(i18nString(UIStrings.drawFrame),t,!0),c[e.HitTest]=new TimelineRecordStyle(i18nString(UIStrings.hitTest),t),c[e.ScheduleStyleRecalculation]=new TimelineRecordStyle(i18nString(UIStrings.scheduleStyleRecalculation),t),c[e.RecalculateStyles]=new TimelineRecordStyle(i18nString(UIStrings.recalculateStyle),t),c[e.UpdateLayoutTree]=new TimelineRecordStyle(i18nString(UIStrings.recalculateStyle),t),c[e.InvalidateLayout]=new TimelineRecordStyle(i18nString(UIStrings.invalidateLayout),t,!0),c[e.Layerize]=new TimelineRecordStyle(i18nString(UIStrings.layerize),t),c[e.Layout]=new TimelineRecordStyle(i18nString(UIStrings.layout),t),c[e.PaintSetup]=new TimelineRecordStyle(i18nString(UIStrings.paintSetup),o),c[e.PaintImage]=new TimelineRecordStyle(i18nString(UIStrings.paintImage),o,!0),c[e.UpdateLayer]=new TimelineRecordStyle(i18nString(UIStrings.updateLayer),o,!0),c[e.UpdateLayerTree]=new TimelineRecordStyle(i18nString(UIStrings.updateLayerTree),t),c[e.Paint]=new TimelineRecordStyle(i18nString(UIStrings.paint),o),c[e.PrePaint]=new TimelineRecordStyle(i18nString(UIStrings.prePaint),t),c[e.RasterTask]=new TimelineRecordStyle(i18nString(UIStrings.rasterizePaint),o),c[e.ScrollLayer]=new TimelineRecordStyle(i18nString(UIStrings.scroll),t),c[e.Commit]=new TimelineRecordStyle(i18nString(UIStrings.commit),o),c[e.CompositeLayers]=new TimelineRecordStyle(i18nString(UIStrings.compositeLayers),o),c[e.ComputeIntersections]=new TimelineRecordStyle(i18nString(UIStrings.computeIntersections),t),c[e.ParseHTML]=new TimelineRecordStyle(i18nString(UIStrings.parseHtml),r),c[e.ParseAuthorStyleSheet]=new TimelineRecordStyle(i18nString(UIStrings.parseStylesheet),r),c[e.TimerInstall]=new TimelineRecordStyle(i18nString(UIStrings.installTimer),n),c[e.TimerRemove]=new TimelineRecordStyle(i18nString(UIStrings.removeTimer),n),c[e.TimerFire]=new TimelineRecordStyle(i18nString(UIStrings.timerFired),n),c[e.XHRReadyStateChange]=new TimelineRecordStyle(i18nString(UIStrings.xhrReadyStateChange),n),c[e.XHRLoad]=new TimelineRecordStyle(i18nString(UIStrings.xhrLoad),n),c[e.CompileScript]=new TimelineRecordStyle(i18nString(UIStrings.compileScript),n),c[e.CacheScript]=new TimelineRecordStyle(i18nString(UIStrings.cacheScript),n),c[e.CompileCode]=new TimelineRecordStyle(i18nString(UIStrings.compileCode),n),c[e.OptimizeCode]=new TimelineRecordStyle(i18nString(UIStrings.optimizeCode),n),c[e.EvaluateScript]=new TimelineRecordStyle(i18nString(UIStrings.evaluateScript),n),c[e.CompileModule]=new TimelineRecordStyle(i18nString(UIStrings.compileModule),n),c[e.CacheModule]=new TimelineRecordStyle(i18nString(UIStrings.cacheModule),n),c[e.EvaluateModule]=new TimelineRecordStyle(i18nString(UIStrings.evaluateModule),n),c[e.StreamingCompileScript]=new TimelineRecordStyle(i18nString(UIStrings.streamingCompileTask),s),c[e.StreamingCompileScriptWaiting]=new TimelineRecordStyle(i18nString(UIStrings.waitingForNetwork),l),c[e.StreamingCompileScriptParsing]=new TimelineRecordStyle(i18nString(UIStrings.parseAndCompile),n),c[e.BackgroundDeserialize]=new TimelineRecordStyle(i18nString(UIStrings.deserializeCodeCache),n),c[e.FinalizeDeserialization]=new TimelineRecordStyle(UIStrings.profilingOverhead,s),c[e.WasmStreamFromResponseCallback]=new TimelineRecordStyle(i18nString(UIStrings.streamingWasmResponse),n),c[e.WasmCompiledModule]=new TimelineRecordStyle(i18nString(UIStrings.compiledWasmModule),n),c[e.WasmCachedModule]=new TimelineRecordStyle(i18nString(UIStrings.cachedWasmModule),n),c[e.WasmModuleCacheHit]=new TimelineRecordStyle(i18nString(UIStrings.wasmModuleCacheHit),n),c[e.WasmModuleCacheInvalid]=new TimelineRecordStyle(i18nString(UIStrings.wasmModuleCacheInvalid),n),c[e.FrameStartedLoading]=new TimelineRecordStyle(i18nString(UIStrings.frameStartedLoading),r,!0),c[e.MarkLoad]=new TimelineRecordStyle(i18nString(UIStrings.onloadEvent),n,!0),c[e.MarkDOMContent]=new TimelineRecordStyle(i18nString(UIStrings.domcontentloadedEvent),n,!0),c[e.MarkFirstPaint]=new TimelineRecordStyle(i18nString(UIStrings.firstPaint),o,!0),c[e.MarkFCP]=new TimelineRecordStyle(i18nString(UIStrings.firstContentfulPaint),t,!0),c[e.MarkLCPCandidate]=new TimelineRecordStyle(i18nString(UIStrings.largestContentfulPaint),t,!0),c[e.TimeStamp]=new TimelineRecordStyle(i18nString(UIStrings.timestamp),n),c[e.ConsoleTime]=new TimelineRecordStyle(i18nString(UIStrings.consoleTime),n),c[e.UserTiming]=new TimelineRecordStyle(i18nString(UIStrings.userTiming),n),c[e.ResourceWillSendRequest]=new TimelineRecordStyle(i18nString(UIStrings.willSendRequest),r),c[e.ResourceSendRequest]=new TimelineRecordStyle(i18nString(UIStrings.sendRequest),r),c[e.ResourceReceiveResponse]=new TimelineRecordStyle(i18nString(UIStrings.receiveResponse),r),c[e.ResourceFinish]=new TimelineRecordStyle(i18nString(UIStrings.finishLoading),r),c[e.ResourceReceivedData]=new TimelineRecordStyle(i18nString(UIStrings.receiveData),r),c[e.RunMicrotasks]=new TimelineRecordStyle(i18nString(UIStrings.runMicrotasks),n),c[e.FunctionCall]=new TimelineRecordStyle(i18nString(UIStrings.functionCall),n),c[e.GCEvent]=new TimelineRecordStyle(i18nString(UIStrings.gcEvent),n),c[e.MajorGC]=new TimelineRecordStyle(i18nString(UIStrings.majorGc),n),c[e.MinorGC]=new TimelineRecordStyle(i18nString(UIStrings.minorGc),n),c[e.JSRoot]=new TimelineRecordStyle(i18nString(UIStrings.jsRoot),l,!0),c[e.JSFrame]=new TimelineRecordStyle(i18nString(UIStrings.jsFrame),n),c[e.JSIdleFrame]=new TimelineRecordStyle(i18nString(UIStrings.jsIdleFrame),l,!0),c[e.JSSystemFrame]=new TimelineRecordStyle(i18nString(UIStrings.jsSystemFrame),s,!0),c[e.RequestAnimationFrame]=new TimelineRecordStyle(i18nString(UIStrings.requestAnimationFrame),n),c[e.CancelAnimationFrame]=new TimelineRecordStyle(i18nString(UIStrings.cancelAnimationFrame),n),c[e.FireAnimationFrame]=new TimelineRecordStyle(i18nString(UIStrings.animationFrameFired),n),c[e.RequestIdleCallback]=new TimelineRecordStyle(i18nString(UIStrings.requestIdleCallback),n),c[e.CancelIdleCallback]=new TimelineRecordStyle(i18nString(UIStrings.cancelIdleCallback),n),c[e.FireIdleCallback]=new TimelineRecordStyle(i18nString(UIStrings.fireIdleCallback),n),c[e.WebSocketCreate]=new TimelineRecordStyle(i18nString(UIStrings.createWebsocket),n),c[e.WebSocketSendHandshakeRequest]=new TimelineRecordStyle(i18nString(UIStrings.sendWebsocketHandshake),n),c[e.WebSocketReceiveHandshakeResponse]=new TimelineRecordStyle(i18nString(UIStrings.receiveWebsocketHandshake),n),c[e.WebSocketDestroy]=new TimelineRecordStyle(i18nString(UIStrings.destroyWebsocket),n),c[e.EmbedderCallback]=new TimelineRecordStyle(i18nString(UIStrings.embedderCallback),n),c[e.DecodeImage]=new TimelineRecordStyle(i18nString(UIStrings.imageDecode),o),c[e.ResizeImage]=new TimelineRecordStyle(i18nString(UIStrings.imageResize),o),c[e.GPUTask]=new TimelineRecordStyle(i18nString(UIStrings.gpu),i.gpu),c[e.GCCollectGarbage]=new TimelineRecordStyle(i18nString(UIStrings.domGc),n),c[e.CryptoDoEncrypt]=new TimelineRecordStyle(i18nString(UIStrings.encrypt),n),c[e.CryptoDoEncryptReply]=new TimelineRecordStyle(i18nString(UIStrings.encryptReply),n),c[e.CryptoDoDecrypt]=new TimelineRecordStyle(i18nString(UIStrings.decrypt),n),c[e.CryptoDoDecryptReply]=new TimelineRecordStyle(i18nString(UIStrings.decryptReply),n),c[e.CryptoDoDigest]=new TimelineRecordStyle(i18nString(UIStrings.digest),n),c[e.CryptoDoDigestReply]=new TimelineRecordStyle(i18nString(UIStrings.digestReply),n),c[e.CryptoDoSign]=new TimelineRecordStyle(i18nString(UIStrings.sign),n),c[e.CryptoDoSignReply]=new TimelineRecordStyle(i18nString(UIStrings.signReply),n),c[e.CryptoDoVerify]=new TimelineRecordStyle(i18nString(UIStrings.verify),n),c[e.CryptoDoVerifyReply]=new TimelineRecordStyle(i18nString(UIStrings.verifyReply),n),c[e.AsyncTask]=new TimelineRecordStyle(i18nString(UIStrings.asyncTask),i.async),c[e.LayoutShift]=new TimelineRecordStyle(i18nString(UIStrings.layoutShift),a),c[e.EventTiming]=new TimelineRecordStyle(UIStrings.eventTiming,a),eventStylesMap=c,c}static setEventStylesMap(e){eventStylesMap=e}static frameDisplayName(e){if(!TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.isNativeRuntimeFrame(e))return UI.UIUtils.beautifyFunctionName(e.functionName);const i=TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.nativeGroup(e.functionName),t=TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.NativeGroups;switch(i){case t.Compile:return i18nString(UIStrings.compile);case t.Parse:return i18nString(UIStrings.parse)}return e.functionName}static testContentMatching(e,i){const t=[TimelineUIUtils.eventStyle(e).title],n=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e).url;return n&&t.push(n),function e(i,n){if(!n)return;for(const r in i){const a=i[r];"string"==typeof a?t.push(a):"number"==typeof a?t.push(String(a)):"object"==typeof a&&null!==a&&e(a,n-1)}}(e.args,2),i.test(t.join("|"))}static eventURL(e){const i=e.args.data||e.args.beginData,t=i&&i.url;if(t)return t;const n=i&&i.stackTrace,r=n&&n.length&&n[0]||TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e).topFrame();return r&&r.url||null}static eventStyle(e){const i=TimelineUIUtils.initEventStyles();if(TraceEngine.Legacy.eventHasCategory(e,TimelineModel.TimelineModel.TimelineModelImpl.Category.Console)||TraceEngine.Legacy.eventHasCategory(e,TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming))return new TimelineRecordStyle(e.name,TimelineUIUtils.categories().scripting);let t=i[e.name];return t||(t=new TimelineRecordStyle(e.name,TimelineUIUtils.categories().other,!0),i[e.name]=t),t}static eventColor(e){if(TimelineModel.TimelineModel.TimelineModelImpl.isJsFrameEvent(e)){const i=e.args.data;if(TimelineUIUtils.isUserFrame(i))return TimelineUIUtils.colorForId(i.url)}const i=TimelineUIUtils.eventStyle(e).category.color;if(e.name===TimelineModel.TimelineModel.RecordType.StreamingCompileScriptWaiting){const e=Common.Color.parse(TimelineUIUtils.categories().scripting.color);if(!e)throw new Error("Unable to parse color from TimelineUIUtils.categories().scripting.color");return e.setAlpha(.3).asString()}return i}static eventTitle(e){const i=TimelineModel.TimelineModel.RecordType,t=e.args.data;if(TimelineModel.TimelineModel.TimelineModelImpl.isJsFrameEvent(e))return TimelineUIUtils.frameDisplayName(t);if("EventTiming"===e.name){let i=null;if(e instanceof TraceEngine.Legacy.PayloadEvent?i=e.rawPayload():TraceEngine.Legacy.eventIsFromNewEngine(e)&&(i=e),i&&TraceEngine.Types.TraceEvents.isSyntheticInteractionEvent(i))return titleForInteractionEvent(i)}const n=TimelineUIUtils.eventStyle(e).title;return TraceEngine.Legacy.eventHasCategory(e,TimelineModel.TimelineModel.TimelineModelImpl.Category.Console)?n:e.name===i.TimeStamp?i18nString(UIStrings.sS,{PH1:n,PH2:t.message}):e.name===i.Animation&&t&&t.name?i18nString(UIStrings.sS,{PH1:n,PH2:t.name}):e.name===i.EventDispatch&&t&&t.type?i18nString(UIStrings.sS,{PH1:n,PH2:t.type}):n}static isUserFrame(e){return"0"!==e.scriptId&&!(e.url&&e.url.startsWith("native "))}static syntheticNetworkRequestCategory(e){const i=NetworkCategory;switch(e.args.data.mimeType){case"text/html":return i.HTML;case"application/javascript":case"application/x-javascript":case"text/javascript":return i.Script;case"text/css":return i.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 i.Media;default:return i.Other}}static networkCategoryColor(e){const i=NetworkCategory;switch(e){case i.HTML:return"hsl(214, 67%, 66%)";case i.Script:return"hsl(43, 83%, 64%)";case i.Style:return"hsl(256, 67%, 70%)";case i.Media:return"hsl(109, 33%, 55%)";default:return"hsl(0, 0%, 70%)"}}static async buildDetailsTextForTraceEvent(e){const i=TimelineModel.TimelineModel.RecordType;let t;const n=e.args.data;switch(e.name){case i.GCEvent:case i.MajorGC:case i.MinorGC:{const i=e.args.usedHeapSizeBefore-e.args.usedHeapSizeAfter;t=i18nString(UIStrings.sCollected,{PH1:Platform.NumberUtilities.bytesToString(i)});break}case i.FunctionCall:n&&n.url&&void 0!==n.lineNumber&&void 0!==n.columnNumber&&(t=n.url+":"+(n.lineNumber+1)+":"+(n.columnNumber+1));break;case i.JSRoot:case i.JSFrame:case i.JSIdleFrame:case i.JSSystemFrame:t=TimelineUIUtils.frameDisplayName(n);break;case i.EventDispatch:t=n?n.type:null;break;case i.Paint:{const e=TimelineUIUtils.quadWidth(n.clip),i=TimelineUIUtils.quadHeight(n.clip);e&&i&&(t=i18nString(UIStrings.sSDimensions,{PH1:e,PH2:i}));break}case i.ParseHTML:{const i=e.args.beginData.startLine,n=e.args.endData&&e.args.endData.endLine,r=Bindings.ResourceUtils.displayNameForURL(e.args.beginData.url);t=n>=0?i18nString(UIStrings.sSs,{PH1:r,PH2:i+1,PH3:n+1}):i18nString(UIStrings.sSSquareBrackets,{PH1:r,PH2:i+1});break}case i.CompileModule:case i.CacheModule:t=Bindings.ResourceUtils.displayNameForURL(e.args.fileName);break;case i.CompileScript:case i.CacheScript:case i.EvaluateScript:{const e=n&&n.url;e&&(t=Bindings.ResourceUtils.displayNameForURL(e)+":"+(n.lineNumber+1));break}case i.WasmCompiledModule:case i.WasmModuleCacheHit:{const i=e.args.url;i&&(t=Bindings.ResourceUtils.displayNameForURL(i));break}case i.StreamingCompileScript:case i.BackgroundDeserialize:case i.XHRReadyStateChange:case i.XHRLoad:{const e=n.url;e&&(t=Bindings.ResourceUtils.displayNameForURL(e));break}case i.TimeStamp:t=n.message;break;case i.WebSocketCreate:case i.WebSocketSendHandshakeRequest:case i.WebSocketReceiveHandshakeResponse:case i.WebSocketDestroy:case i.ResourceWillSendRequest:case i.ResourceSendRequest:case i.ResourceReceivedData:case i.ResourceReceiveResponse:case i.ResourceFinish:case i.PaintImage:case i.DecodeImage:case i.ResizeImage:case i.DecodeLazyPixelRef:{const i=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e).url;i&&(t=Bindings.ResourceUtils.displayNameForURL(i));break}case i.EmbedderCallback:t=n.callbackName;break;case i.Animation:t=n&&n.name;break;case i.AsyncTask:t=n?n.name:null;break;default:t=TraceEngine.Legacy.eventHasCategory(e,TimelineModel.TimelineModel.TimelineModelImpl.Category.Console)?null:await async function(){const i=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e).topFrame();if(!i)return null;return i.url+":"+(i.lineNumber+1)+":"+(i.columnNumber+1)}()}return t}static async buildDetailsNodeForTraceEvent(e,i,t,n=!1){const r=TimelineModel.TimelineModel.RecordType;let a,o=null;const s=e.args.data;switch(e.name){case r.GCEvent:case r.MajorGC:case r.MinorGC:case r.EventDispatch:case r.Paint:case r.Animation:case r.EmbedderCallback:case r.ParseHTML:case r.WasmStreamFromResponseCallback:case r.WasmCompiledModule:case r.WasmModuleCacheHit:case r.WasmCachedModule:case r.WasmModuleCacheInvalid:case r.WebSocketCreate:case r.WebSocketSendHandshakeRequest:case r.WebSocketReceiveHandshakeResponse:case r.WebSocketDestroy:a=await TimelineUIUtils.buildDetailsTextForTraceEvent(e);break;case r.PaintImage:case r.DecodeImage:case r.ResizeImage:case r.DecodeLazyPixelRef:case r.XHRReadyStateChange:case r.XHRLoad:case r.ResourceWillSendRequest:case r.ResourceSendRequest:case r.ResourceReceivedData:case r.ResourceReceiveResponse:case r.ResourceFinish:{const i=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e).url;if(i){const e={tabStop:!0,showColumnNumber:!1,inlineFrameIndex:0};o=Components.Linkifier.Linkifier.linkifyURL(i,e)}break}case r.JSRoot:case r.FunctionCall:case r.JSIdleFrame:case r.JSSystemFrame:case r.JSFrame:{o=document.createElement("span"),UI.UIUtils.createTextChild(o,TimelineUIUtils.frameDisplayName(s));const e=this.linkifyLocation({scriptId:s.scriptId,url:s.url,lineNumber:s.lineNumber,columnNumber:s.columnNumber,target:i,isFreshRecording:n,linkifier:t});e&&(UI.UIUtils.createTextChild(o," @ "),o.appendChild(e));break}case r.CompileModule:case r.CacheModule:o=this.linkifyLocation({scriptId:null,url:e.args.fileName,lineNumber:0,columnNumber:0,target:i,isFreshRecording:n,linkifier:t});break;case r.CompileScript:case r.CacheScript:case r.EvaluateScript:{const e=s.url;e&&(o=this.linkifyLocation({scriptId:null,url:e,lineNumber:s.lineNumber,columnNumber:0,target:i,isFreshRecording:n,linkifier:t}));break}case r.BackgroundDeserialize:case r.StreamingCompileScript:{const e=s.url;e&&(o=this.linkifyLocation({scriptId:null,url:e,lineNumber:0,columnNumber:0,target:i,isFreshRecording:n,linkifier:t}));break}default:TraceEngine.Legacy.eventHasCategory(e,TimelineModel.TimelineModel.TimelineModelImpl.Category.Console)?a=null:o=this.linkifyTopCallFrame(e,i,t,n)}return!o&&a&&(o=document.createTextNode(a)),o}static linkifyLocation(e){const{scriptId:i,url:t,lineNumber:n,columnNumber:r,isFreshRecording:a,linkifier:o,target:s}=e,l={lineNumber:n,columnNumber:r,showColumnNumber:!0,inlineFrameIndex:0,className:"timeline-details",tabStop:!0};return a?o.linkifyScriptLocation(s,i,t,n,l):Components.Linkifier.Linkifier.linkifyURL(t,l)}static linkifyTopCallFrame(e,i,t,n=!1){const r=TimelineModel.TimelineProfileTree.eventStackFrame(e);if(!r)return null;const a={className:"timeline-details",tabStop:!0,inlineFrameIndex:0,showColumnNumber:!0,columnNumber:r.columnNumber,lineNumber:r.lineNumber};return n?t.maybeLinkifyConsoleCallFrame(i,r,{showColumnNumber:!0,inlineFrameIndex:0}):Components.Linkifier.Linkifier.linkifyURL(r.url,a)}static buildDetailsNodeForPerformanceEvent(e){let i="https://web.dev/user-centric-performance-metrics/",t="page performance metrics";const n=TimelineModel.TimelineModel.RecordType;switch(e.name){case n.MarkLCPCandidate:i="https://web.dev/lcp/",t="largest contentful paint";break;case n.MarkFCP:i="https://web.dev/first-contentful-paint/",t="first contentful paint"}return UI.Fragment.html`<div>${UI.XLink.XLink.create(i,i18nString(UIStrings.learnMore))} about ${t}.</div>`}static buildConsumeCacheDetails(e,i){if("number"==typeof e.consumedCacheSize){i.appendTextRow(i18nString(UIStrings.compilationCacheStatus),i18nString(UIStrings.scriptLoadedFromCache)),i.appendTextRow(i18nString(UIStrings.compilationCacheSize),Platform.NumberUtilities.bytesToString(e.consumedCacheSize));const t=e.cacheKind;t&&i.appendTextRow(i18nString(UIStrings.compilationCacheKind),t)}else"cacheRejected"in e&&e.cacheRejected?i.appendTextRow(i18nString(UIStrings.compilationCacheStatus),i18nString(UIStrings.failedToLoadScriptFromCache)):i.appendTextRow(i18nString(UIStrings.compilationCacheStatus),i18nString(UIStrings.scriptNotEligible))}static async buildTraceEventDetails(e,i,t,n,r=null){const a=i.targetByEvent(e),{duration:o,selfTime:s}=TraceEngine.Legacy.timesForEventInMilliseconds(e);let l=null;if(a){const i=a;if(void 0===e[previewElementSymbol]){let t=null;const n=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e).url;n?t=await Components.ImagePreview.ImagePreview.build(i,n,!1,{imageAltText:Components.ImagePreview.ImagePreview.defaultAltTextForImageURL(n),precomputedFeatures:void 0}):e instanceof TraceEngine.Legacy.Event&&TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e).picture&&(t=await TimelineUIUtils.buildPicturePreviewContent(e,i)),e[previewElementSymbol]=t}const t=new Set,n=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e);if(n.backendNodeIds)for(let e=0;e<n.backendNodeIds.length;++e)t.add(n.backendNodeIds[e]);const r=e instanceof TraceEngine.Legacy.Event?TimelineModel.TimelineModel.InvalidationTracker.invalidationEventsFor(e):null;if(r&&TimelineUIUtils.collectInvalidationNodeIds(t,r),t.size){const e=i.model(SDK.DOMModel.DOMModel);e&&(l=await e.pushNodesByBackendIdsToFrontend(t))}}const c=TimelineModel.TimelineModel.RecordType;let d;e.name===c.LayoutShift&&(n=!1);const m=new TimelineDetailsContentHelper(i.targetByEvent(e),t),g=i.isMarkerEvent(e)?TimelineUIUtils.markerStyleForEvent(e).color:TimelineUIUtils.eventStyle(e).category.color;m.addSection(TimelineUIUtils.eventTitle(e),g);const S=e.args.data,p=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e),u=p.initiator();let T=null;if(p.warning&&m.appendWarningRow(e),e.name===c.JSFrame&&S.deoptReason&&m.appendWarningRow(e,TimelineModel.TimelineModel.TimelineModelImpl.WarningType.V8Deopt),r&&TraceEngine.Legacy.eventIsFromNewEngine(e)&&TraceEngine.Types.TraceEvents.isSyntheticInteractionEvent(e)&&r.UserInteractions.interactionsOverThreshold.has(e)&&m.appendWarningRow(e,TimelineModel.TimelineModel.TimelineModelImpl.WarningType.LongInteraction),n&&!Number.isNaN(o||0)&&(m.appendTextRow(i18nString(UIStrings.totalTime),i18n.TimeUtilities.millisToString(o||0,!0)),m.appendTextRow(i18nString(UIStrings.selfTime),i18n.TimeUtilities.millisToString(s,!0))),i.isGenericTrace()){for(const i in e.args)try{m.appendTextRow(i,JSON.stringify(e.args[i]))}catch(t){m.appendTextRow(i,`<${typeof e.args[i]}>`)}return m.fragment}switch(e.name){case c.GCEvent:case c.MajorGC:case c.MinorGC:{const i=e.args.usedHeapSizeBefore-e.args.usedHeapSizeAfter;m.appendTextRow(i18nString(UIStrings.collected),Platform.NumberUtilities.bytesToString(i));break}case c.JSRoot:case c.JSFrame:case c.JSIdleFrame:case c.JSSystemFrame:case c.FunctionCall:{const n=await TimelineUIUtils.buildDetailsNodeForTraceEvent(e,i.targetByEvent(e),t,i.isFreshRecording());n&&m.appendElementRow(i18nString(UIStrings.function),n);break}case c.TimerFire:case c.TimerInstall:case c.TimerRemove:m.appendTextRow(i18nString(UIStrings.timerId),S.timerId),e.name===c.TimerInstall&&(m.appendTextRow(i18nString(UIStrings.timeout),i18n.TimeUtilities.millisToString(S.timeout)),m.appendTextRow(i18nString(UIStrings.repeats),!S.singleShot));break;case c.FireAnimationFrame:m.appendTextRow(i18nString(UIStrings.callbackId),S.id);break;case c.ResourceWillSendRequest:case c.ResourceSendRequest:case c.ResourceReceiveResponse:case c.ResourceReceivedData:case c.ResourceFinish:if(T=p.url,T){const e={tabStop:!0,showColumnNumber:!1,inlineFrameIndex:0};m.appendElementRow(i18nString(UIStrings.resource),Components.Linkifier.Linkifier.linkifyURL(T,e))}if(S.requestMethod&&m.appendTextRow(i18nString(UIStrings.requestMethod),S.requestMethod),"number"==typeof S.statusCode&&m.appendTextRow(i18nString(UIStrings.statusCode),S.statusCode),S.mimeType&&m.appendTextRow(i18nString(UIStrings.mimeTypeCaps),S.mimeType),"priority"in S){const e=PerfUI.NetworkPriorities.uiLabelForNetworkPriority(S.priority);m.appendTextRow(i18nString(UIStrings.priority),e)}S.encodedDataLength&&m.appendTextRow(i18nString(UIStrings.encodedData),i18nString(UIStrings.sBytes,{n:S.encodedDataLength})),S.decodedBodyLength&&m.appendTextRow(i18nString(UIStrings.decodedBody),i18nString(UIStrings.sBytes,{n:S.decodedBodyLength}));break;case c.CompileModule:m.appendLocationRow(i18nString(UIStrings.module),e.args.fileName,0);break;case c.CompileScript:{T=S&&S.url,T&&m.appendLocationRow(i18nString(UIStrings.script),T,S.lineNumber,S.columnNumber);(S.eager??!1)&&m.appendTextRow(i18nString(UIStrings.eagerCompile),!0);const e=S.streamed;m.appendTextRow(i18nString(UIStrings.streamed),e+(e?"":`: ${S.notStreamedReason}`)),TimelineUIUtils.buildConsumeCacheDetails(S,m);break}case c.CacheModule:T=S&&S.url,m.appendTextRow(i18nString(UIStrings.compilationCacheSize),Platform.NumberUtilities.bytesToString(S.producedCacheSize));break;case c.CacheScript:T=S&&S.url,T&&m.appendLocationRow(i18nString(UIStrings.script),T,S.lineNumber,S.columnNumber),m.appendTextRow(i18nString(UIStrings.compilationCacheSize),Platform.NumberUtilities.bytesToString(S.producedCacheSize));break;case c.EvaluateScript:T=S&&S.url,T&&m.appendLocationRow(i18nString(UIStrings.script),T,S.lineNumber,S.columnNumber);break;case c.WasmStreamFromResponseCallback:case c.WasmCompiledModule:case c.WasmCachedModule:case c.WasmModuleCacheHit:case c.WasmModuleCacheInvalid:if(S){T=e.args.url,T&&m.appendTextRow(i18nString(UIStrings.url),T);const i=e.args.producedCachedSize;i&&m.appendTextRow(i18nString(UIStrings.producedCacheSize),i);const t=e.args.consumedCachedSize;t&&m.appendTextRow(i18nString(UIStrings.consumedCacheSize),t)}break;case c.Paint:{const e=S.clip;m.appendTextRow(i18nString(UIStrings.location),i18nString(UIStrings.sSCurlyBrackets,{PH1:e[0],PH2:e[1]}));const i=TimelineUIUtils.quadWidth(e),t=TimelineUIUtils.quadHeight(e);m.appendTextRow(i18nString(UIStrings.dimensions),i18nString(UIStrings.sSDimensions,{PH1:i,PH2:t}))}case c.PaintSetup:case c.Rasterize:case c.ScrollLayer:d=i18nString(UIStrings.layerRoot);break;case c.PaintImage:case c.DecodeLazyPixelRef:case c.DecodeImage:case c.ResizeImage:case c.DrawLazyPixelRef:if(d=i18nString(UIStrings.ownerElement),T=p.url,T){const e={tabStop:!0,showColumnNumber:!1,inlineFrameIndex:0};m.appendElementRow(i18nString(UIStrings.imageUrl),Components.Linkifier.Linkifier.linkifyURL(T,e))}break;case c.ParseAuthorStyleSheet:if(T=S.styleSheetUrl,T){const e={tabStop:!0,showColumnNumber:!1,inlineFrameIndex:0};m.appendElementRow(i18nString(UIStrings.stylesheetUrl),Components.Linkifier.Linkifier.linkifyURL(T,e))}break;case c.UpdateLayoutTree:case c.RecalculateStyles:m.appendTextRow(i18nString(UIStrings.elementsAffected),e.args.elementCount);break;case c.Layout:{const i=e.args.beginData;m.appendTextRow(i18nString(UIStrings.nodesThatNeedLayout),i18nString(UIStrings.sOfS,{PH1:i.dirtyObjects,PH2:i.totalObjects})),d=i18nString(UIStrings.layoutRoot);break}case c.ConsoleTime:m.appendTextRow(i18nString(UIStrings.message),e.name);break;case c.WebSocketCreate:case c.WebSocketSendHandshakeRequest:case c.WebSocketReceiveHandshakeResponse:case c.WebSocketDestroy:{const e=u?u.args.data:S;void 0!==e.webSocketURL&&m.appendTextRow(i18n.i18n.lockedString("URL"),e.webSocketURL),void 0!==e.webSocketProtocol&&m.appendTextRow(i18nString(UIStrings.websocketProtocol),e.webSocketProtocol),void 0!==S.message&&m.appendTextRow(i18nString(UIStrings.message),S.message);break}case c.EmbedderCallback:m.appendTextRow(i18nString(UIStrings.callbackFunction),S.callbackName);break;case c.Animation:"n"===TraceEngine.Legacy.phaseForEvent(e)&&m.appendTextRow(i18nString(UIStrings.state),S.state);break;case c.ParseHTML:{const i=e.args.beginData,t=i.startLine-1,n=e.args.endData?e.args.endData.endLine-1:void 0;T=i.url,T&&m.appendLocationRange(i18nString(UIStrings.range),T,t,n);break}case c.FireIdleCallback:m.appendTextRow(i18nString(UIStrings.allottedTime),i18n.TimeUtilities.millisToString(S.allottedMilliseconds)),m.appendTextRow(i18nString(UIStrings.invokedByTimeout),S.timedOut);case c.RequestIdleCallback:case c.CancelIdleCallback:m.appendTextRow(i18nString(UIStrings.callbackId),S.id);break;case c.EventDispatch:m.appendTextRow(i18nString(UIStrings.type),S.type);break;case c.MarkLCPCandidate:m.appendTextRow(i18nString(UIStrings.type),String(S.type)),m.appendTextRow(i18nString(UIStrings.size),String(S.size));case c.MarkFirstPaint:case c.MarkFCP:case c.MarkLoad:case c.MarkDOMContent:if(r&&TraceEngine.Legacy.eventIsFromNewEngine(e)){const i=timeStampForEventAdjustedForClosestNavigationIfPossible(e,r);m.appendTextRow(i18nString(UIStrings.timestamp),i18n.TimeUtilities.preciseMillisToString(i,1)),m.appendElementRow(i18nString(UIStrings.details),TimelineUIUtils.buildDetailsNodeForPerformanceEvent(e))}break;case c.EventTiming:{const n=await TimelineUIUtils.buildDetailsNodeForTraceEvent(e,i.targetByEvent(e),t,i.isFreshRecording());n&&m.appendElementRow(i18nString(UIStrings.details),n);let r=null;TraceEngine.Legacy.eventIsFromNewEngine(e)?r=e:TraceEngine.Legacy.eventHasPayload(e)&&(r=e.rawPayload()),r&&TraceEngine.Types.TraceEvents.isSyntheticInteractionEvent(r)&&m.appendTextRow(i18nString(UIStrings.interactionID),r.interactionId);break}case c.LayoutShift:{if(!TraceEngine.Legacy.eventIsFromNewEngine(e)||!TraceEngine.Types.TraceEvents.isSyntheticLayoutShift(e)){console.error("Unexpected type for LayoutShift event");break}const i=e,t=i.args.data,n=document.createElement("span"),r=UI.XLink.XLink.create("https://web.dev/cls/",i18nString(UIStrings.cumulativeLayoutShifts)),a=UI.XLink.XLink.create("https://web.dev/evolving-cls/",i18nString(UIStrings.evolvedClsLink));if(n.appendChild(i18n.i18n.getFormatLocalizedString(str_,UIStrings.sCLSInformation,{PH1:r,PH2:a})),m.appendElementRow(i18nString(UIStrings.warning),n,!0),!t)break;m.appendTextRow(i18nString(UIStrings.score),t.score.toPrecision(4)),m.appendTextRow(i18nString(UIStrings.cumulativeScore),t.cumulative_score.toPrecision(4)),m.appendTextRow(i18nString(UIStrings.currentClusterId),i.parsedData.sessionWindowData.id),m.appendTextRow(i18nString(UIStrings.currentClusterScore),i.parsedData.sessionWindowData.cumulativeWindowScore.toPrecision(4)),m.appendTextRow(i18nString(UIStrings.hadRecentInput),S.had_recent_input?i18nString(UIStrings.yes):i18nString(UIStrings.no));for(const e of S.impacted_nodes){const i=new CLSRect(e.old_rect),t=new CLSRect(e.new_rect),n=await Common.Linkifier.Linkifier.linkify(i),r=await Common.Linkifier.Linkifier.linkify(t);m.appendElementRow(i18nString(UIStrings.movedFrom),n),m.appendElementRow(i18nString(UIStrings.movedTo),r)}break}default:{const n=await TimelineUIUtils.buildDetailsNodeForTraceEvent(e,i.targetByEvent(e),t,i.isFreshRecording());n&&m.appendElementRow(i18nString(UIStrings.details),n);break}}for(let e=0;e<p.backendNodeIds.length;++e){const i=l&&l.get(p.backendNodeIds[e]);if(i){const e=await Common.Linkifier.Linkifier.linkify(i);m.appendElementRow(d||i18nString(UIStrings.relatedNode),e)}}e[previewElementSymbol]&&(m.addSection(i18nString(UIStrings.preview)),m.appendElementRow("",e[previewElementSymbol])),(u||p.stackTraceForSelfOrInitiator()||TimelineModel.TimelineModel.InvalidationTracker.invalidationEventsFor(e))&&TimelineUIUtils.generateCauses(e,i.targetByEvent(e),l,m);const y={};if(n&&TimelineUIUtils.aggregatedStatsForTraceEvent(y,i,e)){m.addSection(i18nString(UIStrings.aggregatedTime));const i=TimelineUIUtils.generatePieChart(y,TimelineUIUtils.eventStyle(e).category,s);m.appendElementRow("",i)}return m.fragment}static statsForTimeRange(e,i,t){if(!e.length)return{idle:t-i};!function(e){if(e[categoryBreakdownCacheSymbol])return;const i={},t=[];let n=0;function r(e,t){let r=i[e];if(r||(r={time:[],value:[]},i[e]=r),r.time.length&&r.time[r.time.length-1]===t||n>t)return;const a=r.value.length>0?r.value[r.value.length-1]:0;r.value.push(a+t-n),r.time.push(t)}function a(e,i,t){e&&r(e,t),n=t,i&&r(i,t)}TimelineModel.TimelineModel.TimelineModelImpl.forEachEvent(e,(function(e){const{startTime:i}=TraceEngine.Legacy.timesForEventInMilliseconds(e),n=TimelineUIUtils.eventStyle(e).category.name,r=t.length?t[t.length-1]:null;n!==r&&a(r||null,n,i),t.push(n)}),(function(e){const{endTime:i}=TraceEngine.Legacy.timesForEventInMilliseconds(e),n=t.pop(),r=t.length?t[t.length-1]:null;n!==r&&a(n||null,r||null,i||0)}),void 0,void 0,void 0,function(){const e=TimelineUIUtils.visibleEventsFilter();return i=>e.accept(i)||TraceEngine.Legacy.TracingModel.isTopLevelEvent(i)}());const o=e;o[categoryBreakdownCacheSymbol]=i}(e);const n=function(e,i){const t=Object.assign({},e);for(const e in i)t[e]-=i[e];return t}(a(t),a(i)),r=Object.values(n).reduce(((e,i)=>e+i),0);return n.idle=Math.max(0,t-i-r),n;function a(i){const t={},n=e[categoryBreakdownCacheSymbol];for(const e in n){const r=n[e],a=Platform.ArrayUtilities.upperBound(r.time,i,Platform.ArrayUtilities.DEFAULT_COMPARATOR);let o;if(0===a)o=0;else if(a===r.time.length)o=r.value[r.value.length-1];else{const e=r.time[a-1],t=r.time[a],n=r.value[a-1];o=n+(r.value[a]-n)*(i-e)/(t-e)}t[e]=o}return t}}static async buildSyntheticNetworkRequestDetails(e,i,t){const n=i.targetByEvent(e),r=new TimelineDetailsContentHelper(n,t),a=TimelineUIUtils.syntheticNetworkRequestCategory(e),o=TimelineUIUtils.networkCategoryColor(a);r.addSection(i18nString(UIStrings.networkRequest),o);r.appendElementRow(i18n.i18n.lockedString("URL"),Components.Linkifier.Linkifier.linkifyURL(e.args.data.url,{tabStop:!0,showColumnNumber:!1,inlineFrameIndex:0}));const s=e.dur;if(isFinite(s)){let i=TraceEngine.Helpers.Timing.formatMicrosecondsTime(s);const t=e.args.data.syntheticData.finishTime-e.ts,n=e.ts+e.dur-e.args.data.syntheticData.finishTime;if(isFinite(t)&&isFinite(n)){const r=TraceEngine.Helpers.Timing.formatMicrosecondsTime(t),a=TraceEngine.Helpers.Timing.formatMicrosecondsTime(n),o=e.args.data.syntheticData.isMemoryCached||e.args.data.syntheticData.isDiskCached,s=i18nString(o?UIStrings.loadFromCache:UIStrings.networkTransfer);i+=i18nString(UIStrings.SSSResourceLoading,{PH1:r,PH2:s,PH3:a})}r.appendTextRow(i18nString(UIStrings.duration),i)}if(e.args.data.requestMethod&&r.appendTextRow(i18nString(UIStrings.requestMethod),e.args.data.requestMethod),e.args.data.initialPriority){const i=PerfUI.NetworkPriorities.uiLabelForNetworkPriority(e.args.data.initialPriority);r.appendTextRow(i18nString(UIStrings.initialPriority),i)}const l=PerfUI.NetworkPriorities.uiLabelForNetworkPriority(e.args.data.priority);r.appendTextRow(i18nString(UIStrings.priority),l),e.args.data.mimeType&&r.appendTextRow(i18nString(UIStrings.mimeType),e.args.data.mimeType);let c="";e.args.data.syntheticData.isMemoryCached?c+=i18nString(UIStrings.FromMemoryCache):e.args.data.syntheticData.isDiskCached?c+=i18nString(UIStrings.FromCache):e.args.data.timing?.pushStart&&(c+=i18nString(UIStrings.FromPush)),e.args.data.fromServiceWorker&&(c+=i18nString(UIStrings.FromServiceWorker)),!e.args.data.encodedDataLength&&c||(c=`${Platform.NumberUtilities.bytesToString(e.args.data.encodedDataLength)}${c}`),r.appendTextRow(i18nString(UIStrings.encodedData),c),e.args.data.decodedBodyLength&&r.appendTextRow(i18nString(UIStrings.decodedBody),Platform.NumberUtilities.bytesToString(e.args.data.decodedBodyLength));const d=i18nString(UIStrings.initiator),m=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e).topFrame();if(m){const e=t.maybeLinkifyConsoleCallFrame(n,m,{tabStop:!0,inlineFrameIndex:0,showColumnNumber:!0});e&&r.appendElementRow(d,e)}else{const i=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e).initiator();if(i){const e=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(i).url;if(e){const i=t.maybeLinkifyScriptLocation(n,null,e,0,{tabStop:!0,inlineFrameIndex:0});i&&r.appendElementRow(d,i)}}}if(!requestPreviewElements.get(e)&&e.args.data.url&&n){const i=await Components.ImagePreview.ImagePreview.build(n,e.args.data.url,!1,{imageAltText:Components.ImagePreview.ImagePreview.defaultAltTextForImageURL(e.args.data.url),precomputedFeatures:void 0});requestPreviewElements.set(e,i)}const g=requestPreviewElements.get(e);return g&&r.appendElementRow(i18nString(UIStrings.preview),g),r.fragment}static stackTraceFromCallFrames(e){return{callFrames:e}}static generateCauses(e,i,t,n){const r=TimelineModel.TimelineModel.RecordType,{startTime:a}=TraceEngine.Legacy.timesForEventInMilliseconds(e);let o,s;switch(e.name){case r.TimerFire:o=i18nString(UIStrings.timerInstalled);break;case r.FireAnimationFrame:o=i18nString(UIStrings.animationFrameRequested);break;case r.FireIdleCallback:o=i18nString(UIStrings.idleCallbackRequested);break;case r.UpdateLayoutTree:case r.RecalculateStyles:s=i18nString(UIStrings.recalculationForced);break;case r.Layout:o=i18nString(UIStrings.firstLayoutInvalidation),s=i18nString(UIStrings.layoutForced)}const l=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e);l.stackTrace&&l.stackTrace.length&&(n.addSection(i18nString(UIStrings.callStacks)),n.appendStackTrace(s||i18nString(UIStrings.stackTrace),TimelineUIUtils.stackTraceFromCallFrames(l.stackTrace)));const c=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(e).initiator();if(e instanceof TraceEngine.Legacy.Event&&TimelineModel.TimelineModel.InvalidationTracker.invalidationEventsFor(e)&&i)n.addSection(i18nString(UIStrings.invalidations)),TimelineUIUtils.generateInvalidations(e,i,t,n);else if(c){const e=a-c.startTime;n.appendTextRow(i18nString(UIStrings.pendingFor),i18n.TimeUtilities.preciseMillisToString(e,1));const i=document.createElement("span");i.classList.add("devtools-link"),UI.ARIAUtils.markAsLink(i),i.tabIndex=0,i.textContent=i18nString(UIStrings.reveal),i.addEventListener("click",(()=>{TimelinePanel.instance().select(TimelineSelection.fromTraceEvent(c))})),i.addEventListener("keydown",(e=>{"Enter"===e.key&&(TimelinePanel.instance().select(TimelineSelection.fromTraceEvent(c)),e.consume(!0))})),n.appendElementRow(i18nString(UIStrings.initiator),i);const t=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(c).stackTrace;t&&n.appendStackTrace(o||i18nString(UIStrings.firstInvalidated),TimelineUIUtils.stackTraceFromCallFrames(t))}}static generateInvalidations(e,i,t,n){const r=TimelineModel.TimelineModel.InvalidationTracker.invalidationEventsFor(e);if(!r)return;const a={};for(const e of r)a[e.type]||(a[e.type]=[]),a[e.type].push(e);Object.keys(a).forEach((function(e){TimelineUIUtils.generateInvalidationsForType(e,i,a[e],t,n)}))}static generateInvalidationsForType(e,i,t,n,r){let a;switch(e){case TimelineModel.TimelineModel.RecordType.StyleRecalcInvalidationTracking:a=i18nString(UIStrings.styleInvalidations);break;case TimelineModel.TimelineModel.RecordType.LayoutInvalidationTracking:a=i18nString(UIStrings.layoutInvalidations);break;default:a=i18nString(UIStrings.otherInvalidations)}const o=new UI.TreeOutline.TreeOutlineInShadow;o.registerCSSFiles([invalidationsTreeStyles]),o.element.classList.add("invalidations-tree");const s=function(e){const i=new Map;for(let t=0;t<e.length;t++){const n=e[t];let r="";n.cause.reason&&(r+=n.cause.reason+"."),n.cause.stackTrace&&n.cause.stackTrace.forEach((function(e){r+=e.functionName+".",r+=e.scriptId+".",r+=e.url+".",r+=e.lineNumber+".",r+=e.columnNumber+"."}));const a=i.get(r);a?a.push(n):i.set(r,[n])}return[...i.values()]}(t);s.forEach((function(e){const t=new InvalidationsGroupElement(i,n,r,e);o.appendChild(t)})),r.appendElementRow(a,o.element,!1,!0)}static collectInvalidationNodeIds(e,i){Platform.SetUtilities.addAll(e,i.map((e=>e.nodeId)).filter((e=>e)))}static aggregatedStatsForTraceEvent(e,i,t){const n=i.inspectedTargetEvents(),{startTime:r,endTime:a}=TraceEngine.Legacy.timesForEventInMilliseconds(t);const o=Platform.ArrayUtilities.binaryIndexOf(n,r,(function(e,i){return e-i.startTime}));if(o<0)return!1;let s=!1;if(a)for(let i=o;i<n.length;i++){const r=n[i];if(r.startTime>=a)break;if(!r.selfTime)continue;if(TraceEngine.Legacy.threadIDForEvent(r)!==TraceEngine.Legacy.threadIDForEvent(t))continue;i>o&&(s=!0);const l=TimelineUIUtils.eventStyle(r).category.name;e[l]=(e[l]||0)+r.selfTime}if(TraceEngine.Types.TraceEvents.isAsyncPhase(TraceEngine.Legacy.phaseForEvent(t))){if(a){let i=0;for(const t in e)i+=e[t];e.idle=Math.max(0,a-r-i)}return!1}return s}static async buildPicturePreviewContent(e,i){const t=await new TimelineModel.TimelineFrameModel.LayerPaintEvent(e,i).snapshotPromise();if(!t)return null;const n=t.snapshot.replay();t.snapshot.release();const r=await n;if(!r)return null;const a=document.createElement("div"),o=a.attachShadow({mode:"open"});o.adoptedStyleSheets=[imagePreviewStyles];const s=o.createChild("div");s.classList.add("image-preview-container","vbox","link");const l=s.createChild("img");l.src=r,l.alt=Components.ImagePreview.ImagePreview.defaultAltTextForImageURL(r);return s.createChild("a").textContent=i18nString(UIStrings.paintProfiler),UI.ARIAUtils.markAsLink(s),s.tabIndex=0,s.addEventListener("click",(()=>TimelinePanel.instance().select(TimelineSelection.fromTraceEvent(e))),!1),s.addEventListener("keydown",(i=>{"Enter"===i.key&&(TimelinePanel.instance().select(TimelineSelection.fromTraceEvent(e)),i.consume(!0))})),a}static createEventDivider(e,i){const t=document.createElement("div");t.classList.add("resources-event-divider");const{startTime:n}=TraceEngine.Legacy.timesForEventInMilliseconds(e),r=i18n.TimeUtilities.millisToString(n-i);UI.Tooltip.Tooltip.install(t,i18nString(UIStrings.sAtS,{PH1:TimelineUIUtils.eventTitle(e),PH2:r}));const a=TimelineUIUtils.markerStyleForEvent(e);return a.tall&&(t.style.backgroundColor=a.color),t}static visibleTypes(){const e=TimelineUIUtils.initEventStyles(),i=[];for(const t in e)e[t].hidden||i.push(t);return i}static visibleEventsFilter(){return new TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter(TimelineUIUtils.visibleTypes())}static categories(){return categories||(categories={loading:new TimelineCategory("loading",i18nString(UIStrings.loading),!0,"hsl(214, 67%, 74%)","hsl(214, 67%, 66%)"),experience:new TimelineCategory("experience",i18nString(UIStrings.experience),!1,"hsl(5, 80%, 74%)","hsl(5, 80%, 66%)"),scripting:new T