@mcp-b/chrome-devtools-mcp 1.1.0 → 1.1.1

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/FramesHandler.js

@@ -0,0 +1,485 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as Platform from '../../../core/platform/platform.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+import { data as auctionWorkletsData } from './AuctionWorkletsHandler.js';
+import { data as layerTreeHandlerData } from './LayerTreeHandler.js';
+import { data as metaHandlerData } from './MetaHandler.js';
+import { data as rendererHandlerData } from './RendererHandler.js';
+import * as Threads from './Threads.js';
+/**
+ * IMPORTANT: this handler is slightly different to the rest. This is because
+ * it is an adaptation of the TimelineFrameModel that has been used in DevTools
+ * for many years. Rather than re-implement all the logic from scratch, instead
+ * this handler gathers up the events and instantitates the class in the
+ * finalize() method. Once the class has parsed all events, it is used to then
+ * return the array of frames.
+ *
+ * In time we expect to migrate this code to a more "typical" handler.
+ */
+let model = null;
+let relevantFrameEvents = [];
+function isFrameEvent(event) {
+    return (Types.Events.isSetLayerId(event) || Types.Events.isBeginFrame(event) || Types.Events.isDroppedFrame(event) ||
+        Types.Events.isRequestMainThreadFrame(event) || Types.Events.isBeginMainThreadFrame(event) ||
+        Types.Events.isNeedsBeginFrameChanged(event) ||
+        // Note that "Commit" is the replacement for "CompositeLayers" so in a trace
+        // we wouldn't expect to see a combination of these. All "new" trace
+        // recordings use "Commit", but we can easily support "CompositeLayers" too
+        // to not break older traces being imported.
+        Types.Events.isCommit(event) || Types.Events.isCompositeLayers(event) ||
+        Types.Events.isActivateLayerTree(event) || Types.Events.isDrawFrame(event));
+}
+function entryIsTopLevel(entry) {
+    const devtoolsTimelineCategory = 'disabled-by-default-devtools.timeline';
+    return entry.name === "RunTask" /* Types.Events.Name.RUN_TASK */ && entry.cat.includes(devtoolsTimelineCategory);
+}
+const MAIN_FRAME_MARKERS = new Set([
+    "ScheduleStyleRecalculation" /* Types.Events.Name.SCHEDULE_STYLE_RECALCULATION */,
+    "InvalidateLayout" /* Types.Events.Name.INVALIDATE_LAYOUT */,
+    "BeginMainThreadFrame" /* Types.Events.Name.BEGIN_MAIN_THREAD_FRAME */,
+    "ScrollLayer" /* Types.Events.Name.SCROLL_LAYER */,
+]);
+export function reset() {
+    model = null;
+    relevantFrameEvents = [];
+}
+export function handleEvent(event) {
+    // This might seem like a wide set of events to filter for, but these are all
+    // the types of events that we care about in the TimelineFrameModel class at
+    // the bottom of this file. Previously we would take a copy of an array of
+    // all trace events, but on a few test traces, this set of filtered events
+    // accounts for about 10% of the total events, so it's a big performance win
+    // to deal with a much smaller subset of the data.
+    if (isFrameEvent(event) || Types.Events.isLayerTreeHostImplSnapshot(event) || entryIsTopLevel(event) ||
+        MAIN_FRAME_MARKERS.has(event.name) || Types.Events.isPaint(event)) {
+        relevantFrameEvents.push(event);
+    }
+}
+export async function finalize() {
+    // We have to sort the events by timestamp, because the model code expects to
+    // process events in order.
+    Helpers.Trace.sortTraceEventsInPlace(relevantFrameEvents);
+    const modelForTrace = new TimelineFrameModel(relevantFrameEvents, rendererHandlerData(), auctionWorkletsData(), metaHandlerData(), layerTreeHandlerData());
+    model = modelForTrace;
+}
+export function data() {
+    return {
+        frames: model?.frames() ?? [],
+        framesById: model?.framesById() ?? {},
+    };
+}
+export function deps() {
+    return ['Meta', 'Renderer', 'AuctionWorklets', 'LayerTree'];
+}
+export class TimelineFrameModel {
+    #frames = [];
+    #frameById = {};
+    #beginFrameQueue = new TimelineFrameBeginFrameQueue();
+    #lastFrame = null;
+    #mainFrameCommitted = false;
+    #mainFrameRequested = false;
+    #lastLayerTree = null;
+    #framePendingActivation = null;
+    #framePendingCommit = null;
+    #lastBeginFrame = null;
+    #lastNeedsBeginFrame = null;
+    #lastTaskBeginTime = null;
+    #layerTreeId = null;
+    #activeProcessId = null;
+    #activeThreadId = null;
+    #layerTreeData;
+    constructor(allEvents, rendererData, auctionWorkletsData, metaData, layerTreeData) {
+        // We only care about getting threads from the Renderer, not Samples,
+        // because Frames don't exist in a CPU Profile (which won't have Renderer
+        // threads.)
+        const mainThreads = Threads.threadsInRenderer(rendererData, auctionWorkletsData).filter(thread => {
+            return thread.type === "MAIN_THREAD" /* Threads.ThreadType.MAIN_THREAD */ && thread.processIsOnMainFrame;
+        });
+        const threadData = mainThreads.map(thread => {
+            return {
+                tid: thread.tid,
+                pid: thread.pid,
+                startTime: thread.entries[0].ts,
+            };
+        });
+        this.#layerTreeData = layerTreeData;
+        this.#addTraceEvents(allEvents, threadData, metaData.mainFrameId);
+    }
+    framesById() {
+        return this.#frameById;
+    }
+    frames() {
+        return this.#frames;
+    }
+    #handleBeginFrame(startTime, seqId) {
+        if (!this.#lastFrame) {
+            this.#startFrame(startTime, seqId);
+        }
+        this.#lastBeginFrame = startTime;
+        this.#beginFrameQueue.addFrameIfNotExists(seqId, startTime, false, false);
+    }
+    #handleDroppedFrame(startTime, seqId, isPartial) {
+        if (!this.#lastFrame) {
+            this.#startFrame(startTime, seqId);
+        }
+        // This line handles the case where no BeginFrame event is issued for
+        // the dropped frame. In this situation, add a BeginFrame to the queue
+        // as if it actually occurred.
+        this.#beginFrameQueue.addFrameIfNotExists(seqId, startTime, true, isPartial);
+        this.#beginFrameQueue.setDropped(seqId, true);
+        this.#beginFrameQueue.setPartial(seqId, isPartial);
+    }
+    #handleDrawFrame(startTime, seqId) {
+        if (!this.#lastFrame) {
+            this.#startFrame(startTime, seqId);
+            return;
+        }
+        // - if it wasn't drawn, it didn't happen!
+        // - only show frames that either did not wait for the main thread frame or had one committed.
+        if (this.#mainFrameCommitted || !this.#mainFrameRequested) {
+            if (this.#lastNeedsBeginFrame) {
+                const idleTimeEnd = this.#framePendingActivation ? this.#framePendingActivation.triggerTime :
+                    (this.#lastBeginFrame || this.#lastNeedsBeginFrame);
+                if (idleTimeEnd > this.#lastFrame.startTime) {
+                    this.#lastFrame.idle = true;
+                    this.#lastBeginFrame = null;
+                }
+                this.#lastNeedsBeginFrame = null;
+            }
+            const framesToVisualize = this.#beginFrameQueue.processPendingBeginFramesOnDrawFrame(seqId);
+            // Visualize the current frame and all pending frames before it.
+            for (const frame of framesToVisualize) {
+                const isLastFrameIdle = this.#lastFrame.idle;
+                // If |frame| is the first frame after an idle period, the CPU time
+                // will be logged ("committed") under |frame| if applicable.
+                this.#startFrame(frame.startTime, seqId);
+                if (isLastFrameIdle && this.#framePendingActivation) {
+                    this.#commitPendingFrame();
+                }
+                if (frame.isDropped) {
+                    this.#lastFrame.dropped = true;
+                }
+                if (frame.isPartial) {
+                    this.#lastFrame.isPartial = true;
+                }
+            }
+        }
+        this.#mainFrameCommitted = false;
+    }
+    #handleActivateLayerTree() {
+        if (!this.#lastFrame) {
+            return;
+        }
+        if (this.#framePendingActivation && !this.#lastNeedsBeginFrame) {
+            this.#commitPendingFrame();
+        }
+    }
+    #handleRequestMainThreadFrame() {
+        if (!this.#lastFrame) {
+            return;
+        }
+        this.#mainFrameRequested = true;
+    }
+    #handleCommit() {
+        if (!this.#framePendingCommit) {
+            return;
+        }
+        this.#framePendingActivation = this.#framePendingCommit;
+        this.#framePendingCommit = null;
+        this.#mainFrameRequested = false;
+        this.#mainFrameCommitted = true;
+    }
+    #handleLayerTreeSnapshot(layerTree) {
+        this.#lastLayerTree = layerTree;
+    }
+    #handleNeedFrameChanged(startTime, needsBeginFrame) {
+        if (needsBeginFrame) {
+            this.#lastNeedsBeginFrame = startTime;
+        }
+    }
+    #startFrame(startTime, seqId) {
+        if (this.#lastFrame) {
+            this.#flushFrame(this.#lastFrame, startTime);
+        }
+        this.#lastFrame =
+            new TimelineFrame(seqId, startTime, Types.Timing.Micro(startTime - metaHandlerData().traceBounds.min));
+    }
+    #flushFrame(frame, endTime) {
+        frame.setLayerTree(this.#lastLayerTree);
+        frame.setEndTime(endTime);
+        if (this.#lastLayerTree) {
+            this.#lastLayerTree.paints = frame.paints;
+        }
+        const lastFrame = this.#frames[this.#frames.length - 1];
+        if (this.#frames.length && lastFrame &&
+            (frame.startTime !== lastFrame.endTime || frame.startTime > frame.endTime)) {
+            console.assert(false, `Inconsistent frame time for frame ${this.#frames.length} (${frame.startTime} - ${frame.endTime})`);
+        }
+        const newFramesLength = this.#frames.push(frame);
+        frame.setIndex(newFramesLength - 1);
+        if (typeof frame.mainFrameId === 'number') {
+            this.#frameById[frame.mainFrameId] = frame;
+        }
+    }
+    #commitPendingFrame() {
+        if (!this.#framePendingActivation || !this.#lastFrame) {
+            return;
+        }
+        this.#lastFrame.paints = this.#framePendingActivation.paints;
+        this.#lastFrame.mainFrameId = this.#framePendingActivation.mainFrameId;
+        this.#framePendingActivation = null;
+    }
+    #addTraceEvents(events, threadData, mainFrameId) {
+        let j = 0;
+        this.#activeThreadId = threadData.length && threadData[0].tid || null;
+        this.#activeProcessId = threadData.length && threadData[0].pid || null;
+        for (let i = 0; i < events.length; ++i) {
+            while (j + 1 < threadData.length && threadData[j + 1].startTime <= events[i].ts) {
+                this.#activeThreadId = threadData[++j].tid;
+                this.#activeProcessId = threadData[j].pid;
+            }
+            this.#addTraceEvent(events[i], mainFrameId);
+        }
+        this.#activeThreadId = null;
+        this.#activeProcessId = null;
+    }
+    #addTraceEvent(event, mainFrameId) {
+        if (Types.Events.isSetLayerId(event) && event.args.data.frame === mainFrameId) {
+            this.#layerTreeId = event.args.data.layerTreeId;
+        }
+        else if (Types.Events.isLayerTreeHostImplSnapshot(event) && Number(event.id) === this.#layerTreeId) {
+            this.#handleLayerTreeSnapshot({
+                entry: event,
+                paints: [],
+            });
+        }
+        else {
+            if (isFrameEvent(event)) {
+                this.#processCompositorEvents(event);
+            }
+            // Make sure we only use events from the main thread: we check the PID as
+            // well in case two processes have a thread with the same TID.
+            if (event.tid === this.#activeThreadId && event.pid === this.#activeProcessId) {
+                this.#addMainThreadTraceEvent(event);
+            }
+        }
+    }
+    #processCompositorEvents(entry) {
+        if (entry.args['layerTreeId'] !== this.#layerTreeId) {
+            return;
+        }
+        if (Types.Events.isBeginFrame(entry)) {
+            this.#handleBeginFrame(entry.ts, entry.args['frameSeqId']);
+        }
+        else if (Types.Events.isDrawFrame(entry)) {
+            this.#handleDrawFrame(entry.ts, entry.args['frameSeqId']);
+        }
+        else if (Types.Events.isActivateLayerTree(entry)) {
+            this.#handleActivateLayerTree();
+        }
+        else if (Types.Events.isRequestMainThreadFrame(entry)) {
+            this.#handleRequestMainThreadFrame();
+        }
+        else if (Types.Events.isNeedsBeginFrameChanged(entry)) {
+            // needsBeginFrame property will either be 0 or 1, which represents
+            // true/false in this case, hence the Boolean() wrapper.
+            this.#handleNeedFrameChanged(entry.ts, entry.args['data'] && Boolean(entry.args['data']['needsBeginFrame']));
+        }
+        else if (Types.Events.isDroppedFrame(entry)) {
+            this.#handleDroppedFrame(entry.ts, entry.args['frameSeqId'], Boolean(entry.args['hasPartialUpdate']));
+        }
+    }
+    #addMainThreadTraceEvent(entry) {
+        if (entryIsTopLevel(entry)) {
+            this.#lastTaskBeginTime = entry.ts;
+        }
+        if (!this.#framePendingCommit && MAIN_FRAME_MARKERS.has(entry.name)) {
+            this.#framePendingCommit = new PendingFrame(this.#lastTaskBeginTime || entry.ts);
+        }
+        if (!this.#framePendingCommit) {
+            return;
+        }
+        if (Types.Events.isBeginMainThreadFrame(entry) && entry.args.data.frameId) {
+            this.#framePendingCommit.mainFrameId = entry.args.data.frameId;
+        }
+        if (Types.Events.isPaint(entry)) {
+            const snapshot = this.#layerTreeData.paintsToSnapshots.get(entry);
+            if (snapshot) {
+                this.#framePendingCommit.paints.push(new LayerPaintEvent(entry, snapshot));
+            }
+        }
+        // Commit will be replacing CompositeLayers but CompositeLayers is kept
+        // around for backwards compatibility.
+        if ((Types.Events.isCompositeLayers(entry) || Types.Events.isCommit(entry)) &&
+            entry.args['layerTreeId'] === this.#layerTreeId) {
+            this.#handleCommit();
+        }
+    }
+}
+/**
+ * Legacy class that represents TimelineFrames that was ported from the old SDK.
+ * This class is purposefully not exported as it breaks the abstraction that
+ * every event shown on the timeline is a trace event. Instead, we use the Type
+ * LegacyTimelineFrame to represent frames in the codebase. These do implement
+ * the right interface to be treated just like they were a trace event.
+ */
+class TimelineFrame {
+    // These fields exist to satisfy the base Event type which all
+    // "trace events" must implement. They aren't used, but doing this means we
+    // can pass `TimelineFrame` instances into places that expect
+    // Types.Events.Event.
+    cat = 'devtools.legacy_frame';
+    name = 'frame';
+    ph = "X" /* Types.Events.Phase.COMPLETE */;
+    ts;
+    pid = Types.Events.ProcessID(-1);
+    tid = Types.Events.ThreadID(-1);
+    index = -1;
+    startTime;
+    startTimeOffset;
+    endTime;
+    duration;
+    idle;
+    dropped;
+    isPartial;
+    layerTree;
+    paints;
+    mainFrameId;
+    seqId;
+    constructor(seqId, startTime, startTimeOffset) {
+        this.seqId = seqId;
+        this.startTime = startTime;
+        this.ts = startTime;
+        this.startTimeOffset = startTimeOffset;
+        this.endTime = this.startTime;
+        this.duration = Types.Timing.Micro(0);
+        this.idle = false;
+        this.dropped = false;
+        this.isPartial = false;
+        this.layerTree = null;
+        this.paints = [];
+        this.mainFrameId = undefined;
+    }
+    setIndex(i) {
+        this.index = i;
+    }
+    setEndTime(endTime) {
+        this.endTime = endTime;
+        this.duration = Types.Timing.Micro(this.endTime - this.startTime);
+    }
+    setLayerTree(layerTree) {
+        this.layerTree = layerTree;
+    }
+    /**
+     * Fake the `dur` field to meet the expected value given that we pretend
+     * these TimelineFrame classes are trace events across the codebase.
+     */
+    get dur() {
+        return this.duration;
+    }
+}
+export class LayerPaintEvent {
+    #event;
+    #snapshot;
+    constructor(event, snapshot) {
+        this.#event = event;
+        this.#snapshot = snapshot;
+    }
+    layerId() {
+        return this.#event.args.data.layerId;
+    }
+    event() {
+        return this.#event;
+    }
+    picture() {
+        const rect = this.#snapshot.args.snapshot.params?.layer_rect;
+        const pictureData = this.#snapshot.args.snapshot.skp64;
+        return rect && pictureData ? { rect, serializedPicture: pictureData } : null;
+    }
+}
+export class PendingFrame {
+    paints;
+    mainFrameId;
+    triggerTime;
+    constructor(triggerTime) {
+        this.paints = [];
+        this.mainFrameId = undefined;
+        this.triggerTime = triggerTime;
+    }
+}
+/** The parameters of an impl-side BeginFrame. **/
+class BeginFrameInfo {
+    seqId;
+    startTime;
+    isDropped;
+    isPartial;
+    constructor(seqId, startTime, isDropped, isPartial) {
+        this.seqId = seqId;
+        this.startTime = startTime;
+        this.isDropped = isDropped;
+        this.isPartial = isPartial;
+    }
+}
+/**
+ * A queue of BeginFrames pending visualization.
+ * BeginFrames are added into this queue as they occur; later when their
+ * corresponding DrawFrames occur (or lack thereof), the BeginFrames are removed
+ * from the queue and their timestamps are used for visualization.
+ **/
+export class TimelineFrameBeginFrameQueue {
+    queueFrames = [];
+    // Maps frameSeqId to BeginFrameInfo.
+    mapFrames = {};
+    // Add a BeginFrame to the queue, if it does not already exit.
+    addFrameIfNotExists(seqId, startTime, isDropped, isPartial) {
+        if (!(seqId in this.mapFrames)) {
+            this.mapFrames[seqId] = new BeginFrameInfo(seqId, startTime, isDropped, isPartial);
+            this.queueFrames.push(seqId);
+        }
+    }
+    // Set a BeginFrame in queue as dropped.
+    setDropped(seqId, isDropped) {
+        if (seqId in this.mapFrames) {
+            this.mapFrames[seqId].isDropped = isDropped;
+        }
+    }
+    setPartial(seqId, isPartial) {
+        if (seqId in this.mapFrames) {
+            this.mapFrames[seqId].isPartial = isPartial;
+        }
+    }
+    processPendingBeginFramesOnDrawFrame(seqId) {
+        const framesToVisualize = [];
+        // Do not visualize this frame in the rare case where the current DrawFrame
+        // does not have a corresponding BeginFrame.
+        if (seqId in this.mapFrames) {
+            // Pop all BeginFrames before the current frame, and add only the dropped
+            // ones in |frames_to_visualize|.
+            // Non-dropped frames popped here are BeginFrames that are never
+            // drawn (but not considered dropped either for some reason).
+            // Those frames do not require an proactive visualization effort and will
+            // be naturally presented as continuationss of other frames.
+            while (this.queueFrames[0] !== seqId) {
+                const currentSeqId = this.queueFrames[0];
+                if (this.mapFrames[currentSeqId].isDropped) {
+                    framesToVisualize.push(this.mapFrames[currentSeqId]);
+                }
+                delete this.mapFrames[currentSeqId];
+                this.queueFrames.shift();
+            }
+            // Pop the BeginFrame associated with the current DrawFrame.
+            framesToVisualize.push(this.mapFrames[seqId]);
+            delete this.mapFrames[seqId];
+            this.queueFrames.shift();
+        }
+        return framesToVisualize;
+    }
+}
+export function framesWithinWindow(frames, startTime, endTime) {
+    const firstFrame = Platform.ArrayUtilities.lowerBound(frames, startTime || 0, (time, frame) => time - frame.endTime);
+    const lastFrame = Platform.ArrayUtilities.lowerBound(frames, endTime || Infinity, (time, frame) => time - frame.startTime);
+    return frames.slice(firstFrame, lastFrame);
+}

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/GPUHandler.js

@@ -0,0 +1,35 @@
+// Copyright 2022 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+import { data as metaHandlerData } from './MetaHandler.js';
+// Each thread contains events. Events indicate the thread and process IDs, which are
+// used to store the event in the correct process thread entry below.
+let eventsInProcessThread = new Map();
+let mainGPUThreadTasks = [];
+export function reset() {
+    eventsInProcessThread = new Map();
+    mainGPUThreadTasks = [];
+}
+export function handleEvent(event) {
+    if (!Types.Events.isGPUTask(event)) {
+        return;
+    }
+    Helpers.Trace.addEventToProcessThread(event, eventsInProcessThread);
+}
+export async function finalize() {
+    const { gpuProcessId, gpuThreadId } = metaHandlerData();
+    const gpuThreadsForProcess = eventsInProcessThread.get(gpuProcessId);
+    if (gpuThreadsForProcess && gpuThreadId) {
+        mainGPUThreadTasks = gpuThreadsForProcess.get(gpuThreadId) || [];
+    }
+}
+export function data() {
+    return {
+        mainGPUThreadTasks,
+    };
+}
+export function deps() {
+    return ['Meta'];
+}

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/ImagePaintingHandler.js

@@ -0,0 +1,147 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as Platform from '../../../core/platform/platform.js';
+import * as Types from '../types/types.js';
+import { data as metaHandlerData } from './MetaHandler.js';
+/**
+ * This handler is responsible for the relationships between:
+ * DecodeImage/ResizeImage, PaintImage and DrawLazyPixelRef events.
+ *
+ * When we get a DecodeImage event, we want to associate it to a PaintImage
+ * event, primarily so we can determine the NodeID of the image that was
+ * decoded.
+ * We can do this in two ways:
+ *
+ * 1. If there is a PaintImage event on the same thread, use that
+ *    (if there are multiple, use the latest one).
+ *
+ * 2. If not, we can find the DecodeLazyPixelRef event on the same thread, and
+ *    use the PaintImage event associated with it via the `LazyPixelRef` key.
+ */
+// Track paintImageEvents across threads.
+let paintImageEvents = new Map();
+let decodeLazyPixelRefEvents = new Map();
+// A DrawLazyPixelRef event will contain a numerical reference in
+// args.LazyPixelRef. As we parse each DrawLazyPixelRef, we can assign it to a
+// paint event. Later we want to look up paint events by this reference, so we
+// store them in this map.
+let paintImageByLazyPixelRef = new Map();
+// When we find events that we want to tie to a particular PaintImage event, we add them to this map.
+// These are currently only DecodeImage and ResizeImage events, but the type is
+// deliberately generic as in the future we might want to add more events that
+// have a relationship to a individual PaintImage event.
+let eventToPaintImage = new Map();
+let urlToPaintImage = new Map();
+let paintEventToCorrectedDisplaySize = new Map();
+let didCorrectForHostDpr = false;
+export function reset() {
+    paintImageEvents = new Map();
+    decodeLazyPixelRefEvents = new Map();
+    paintImageByLazyPixelRef = new Map();
+    eventToPaintImage = new Map();
+    urlToPaintImage = new Map();
+    paintEventToCorrectedDisplaySize = new Map();
+    didCorrectForHostDpr = false;
+}
+export function handleEvent(event) {
+    if (Types.Events.isPaintImage(event)) {
+        const forProcess = paintImageEvents.get(event.pid) || new Map();
+        const forThread = forProcess.get(event.tid) || [];
+        forThread.push(event);
+        forProcess.set(event.tid, forThread);
+        paintImageEvents.set(event.pid, forProcess);
+        if (event.args.data.url) {
+            const paintsForUrl = Platform.MapUtilities.getWithDefault(urlToPaintImage, event.args.data.url, () => []);
+            paintsForUrl.push(event);
+        }
+        return;
+    }
+    if (Types.Events.isDecodeLazyPixelRef(event) && typeof event.args?.LazyPixelRef !== 'undefined') {
+        // Store these because we use them to tie DecodeImage to a PaintEvent.
+        const forProcess = decodeLazyPixelRefEvents.get(event.pid) || new Map();
+        const forThread = forProcess.get(event.tid) || [];
+        forThread.push(event);
+        forProcess.set(event.tid, forThread);
+        decodeLazyPixelRefEvents.set(event.pid, forProcess);
+    }
+    // If we see a DrawLazyPixelRef event, we need to find the last PaintImage
+    // event on the thread and associate it to the LazyPixelRef that is supplied
+    // in the DrawLazyPixelRef event.
+    // This means that later on if we see a DecodeLazyPixelRef event with the
+    // same LazyPixelRef key, we can find its associated PaintImage event by
+    // looking it up.
+    if (Types.Events.isDrawLazyPixelRef(event) && typeof event.args?.LazyPixelRef !== 'undefined') {
+        const lastPaintEvent = paintImageEvents.get(event.pid)?.get(event.tid)?.at(-1);
+        if (!lastPaintEvent) {
+            return;
+        }
+        paintImageByLazyPixelRef.set(event.args.LazyPixelRef, lastPaintEvent);
+        return;
+    }
+    if (Types.Events.isDecodeImage(event)) {
+        // When we see a DecodeImage, we want to associate it to a PaintImage
+        // event. We try two approaches:
+        //
+        // 1. If the thread of the DecodeImage event has a previous PaintImage
+        // event, that is the associated event.
+        //
+        // 2. If that is false, we then look on the thread for a DecodeLazyPixelRef
+        // event. If we find that, we then look for its associated PaintImage
+        // event, which we associate via DrawLazyPixelRef events (the code block
+        // above this one)
+        //
+        // 1. Find a PaintImage event on the same thread. If we find it, that's our association done.
+        const lastPaintImageEventOnThread = paintImageEvents.get(event.pid)?.get(event.tid)?.at(-1);
+        if (lastPaintImageEventOnThread) {
+            eventToPaintImage.set(event, lastPaintImageEventOnThread);
+            return;
+        }
+        // 2. Find the last DecodeLazyPixelRef event and, if we find it, find its associated PaintImage event.
+        const lastDecodeLazyPixelRef = decodeLazyPixelRefEvents.get(event.pid)?.get(event.tid)?.at(-1);
+        if (typeof lastDecodeLazyPixelRef?.args?.LazyPixelRef === 'undefined') {
+            return;
+        }
+        const paintEvent = paintImageByLazyPixelRef.get(lastDecodeLazyPixelRef.args.LazyPixelRef);
+        if (!paintEvent) {
+            return;
+        }
+        eventToPaintImage.set(event, paintEvent);
+    }
+}
+export async function finalize(options) {
+    // Painting in Chrome never uses the emulated DPR, but instead used the host's DPR.
+    // We need to correct for that for our responsive image checks in the ImageDelivery
+    // insight.
+    // See: crbug.com/427552461 crbug.com/416580500#comment5
+    if (!options.metadata?.hostDPR) {
+        return;
+    }
+    // Note: this isn't necessarily emulated (for desktop+no DPR emulation, it's equal
+    // to host DPR).
+    const { devicePixelRatio: emulatedDpr } = metaHandlerData();
+    if (!emulatedDpr) {
+        return;
+    }
+    for (const byThread of paintImageEvents.values()) {
+        for (const paintEvents of byThread.values()) {
+            for (const paintEvent of paintEvents) {
+                const cssPixelsWidth = paintEvent.args.data.width / options.metadata.hostDPR;
+                const cssPixelsHeight = paintEvent.args.data.height / options.metadata.hostDPR;
+                const width = cssPixelsWidth * emulatedDpr;
+                const height = cssPixelsHeight * emulatedDpr;
+                paintEventToCorrectedDisplaySize.set(paintEvent, { width, height });
+            }
+        }
+    }
+    didCorrectForHostDpr = true;
+}
+export function data() {
+    return {
+        paintImageByDrawLazyPixelRef: paintImageByLazyPixelRef,
+        paintImageForEvent: eventToPaintImage,
+        paintImageEventForUrl: urlToPaintImage,
+        paintEventToCorrectedDisplaySize,
+        didCorrectForHostDpr,
+    };
+}