chrome-devtools-mcp-for-extension 0.5.0

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/EnhancedTracesParser.js

@@ -0,0 +1,350 @@
+// 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 Common from '../common/common.js';
+import { UserVisibleError } from '../platform/platform.js';
+export class EnhancedTracesParser {
+    #trace;
+    #scriptRundownEvents = [];
+    #scriptToV8Context = new Map();
+    #scriptToFrame = new Map();
+    #scriptToScriptSource = new Map();
+    #largeScriptToScriptSource = new Map();
+    #scriptToSourceLength = new Map();
+    #targets = [];
+    #executionContexts = [];
+    #scripts = [];
+    static enhancedTraceVersion = 1;
+    constructor(trace) {
+        this.#trace = trace;
+        // Initialize with the trace provided.
+        try {
+            this.parseEnhancedTrace();
+        }
+        catch (e) {
+            throw new UserVisibleError.UserVisibleError(e);
+        }
+    }
+    parseEnhancedTrace() {
+        for (const event of this.#trace.traceEvents) {
+            if (this.isTracingStartedInBrowser(event)) {
+                // constructs all targets by devtools.timeline TracingStartedInBrowser
+                const data = event.args?.data;
+                for (const frame of data.frames) {
+                    if (frame.url === 'about:blank') {
+                        continue;
+                    }
+                    const frameId = frame.frame;
+                    if (!this.#targets.find(target => target.targetId === frameId)) {
+                        const frameType = frame.isOutermostMainFrame ? 'page' : 'iframe';
+                        this.#targets.push({
+                            targetId: frameId,
+                            type: frameType,
+                            pid: frame.processId,
+                            url: frame.url,
+                        });
+                    }
+                }
+            }
+            else if (this.isFunctionCallEvent(event)) {
+                // constructs all script to frame mapping with devtools.timeline FunctionCall
+                const data = event.args?.data;
+                if (data.isolate) {
+                    this.#scriptToFrame.set(this.getScriptIsolateId(data.isolate, data.scriptId), data.frame);
+                }
+            }
+            else if (this.isRundownScriptCompiled(event)) {
+                // Set up script to v8 context mapping
+                const data = event.args?.data;
+                this.#scriptToV8Context.set(this.getScriptIsolateId(data.isolate, data.scriptId), data.v8context);
+                this.#scriptToFrame.set(this.getScriptIsolateId(data.isolate, data.scriptId), data.frame);
+                // All the targets should've been added by the TracingStartedInBrowser event, but just in case we're missing some there
+                const frameId = data.frame;
+                if (!this.#targets.find(target => target.targetId === frameId)) {
+                    this.#targets.push({
+                        targetId: frameId,
+                        type: data.frameType,
+                        isolate: String(data.isolate),
+                        pid: event.pid,
+                        url: data.url,
+                    });
+                }
+                // Add execution context, need to put back execution context id with info from other traces
+                if (!this.#executionContexts.find(executionContext => executionContext.v8Context === data.v8context)) {
+                    this.#executionContexts.push({
+                        id: -1,
+                        origin: data.origin,
+                        v8Context: data.v8context,
+                        auxData: {
+                            frameId: data.frame,
+                            isDefault: data.isDefault,
+                            type: data.contextType,
+                        },
+                        isolate: String(data.isolate),
+                        name: data.origin,
+                        uniqueId: `${data.v8context}-${data.isolate}`,
+                    });
+                }
+            }
+            else if (this.isRundownScript(event)) {
+                this.#scriptRundownEvents.push(event);
+                const data = event.args.data;
+                // Add script
+                if (!this.#scripts.find(script => script.scriptId === String(data.scriptId) && script.isolate === String(data.isolate))) {
+                    this.#scripts.push({
+                        scriptId: String(data.scriptId),
+                        isolate: String(data.isolate),
+                        buildId: '',
+                        executionContextId: data.executionContextId,
+                        startLine: data.startLine ?? 0,
+                        startColumn: data.startColumn ?? 0,
+                        endLine: data.endLine ?? 0,
+                        endColumn: data.endColumn ?? 0,
+                        hash: data.hash ?? '',
+                        isModule: data.isModule,
+                        url: data.url ?? '',
+                        hasSourceURL: data.hasSourceUrl,
+                        sourceURL: data.sourceUrl ?? '',
+                        sourceMapURL: data.sourceMapUrl,
+                        pid: event.pid,
+                    });
+                }
+            }
+            else if (this.isRundownScriptSource(event)) {
+                // Set up script to source text and length mapping
+                const data = event.args.data;
+                const scriptIsolateId = this.getScriptIsolateId(data.isolate, data.scriptId);
+                if ('splitIndex' in data && 'splitCount' in data) {
+                    if (!this.#largeScriptToScriptSource.has(scriptIsolateId)) {
+                        this.#largeScriptToScriptSource.set(scriptIsolateId, new Array(data.splitCount).fill(''));
+                    }
+                    const splittedSource = this.#largeScriptToScriptSource.get(scriptIsolateId);
+                    if (splittedSource && data.sourceText) {
+                        splittedSource[data.splitIndex] = data.sourceText;
+                    }
+                }
+                else {
+                    if (data.sourceText) {
+                        this.#scriptToScriptSource.set(scriptIsolateId, data.sourceText);
+                    }
+                    if (data.length) {
+                        this.#scriptToSourceLength.set(scriptIsolateId, data.length);
+                    }
+                }
+            }
+        }
+    }
+    data() {
+        // Put back execution context id
+        const v8ContextToExecutionContextId = new Map();
+        this.#scriptRundownEvents.forEach(scriptRundownEvent => {
+            const data = scriptRundownEvent.args.data;
+            const v8Context = this.#scriptToV8Context.get(this.getScriptIsolateId(data.isolate, data.scriptId));
+            if (v8Context) {
+                v8ContextToExecutionContextId.set(v8Context, data.executionContextId);
+            }
+        });
+        this.#executionContexts.forEach(executionContext => {
+            if (executionContext.v8Context) {
+                const id = v8ContextToExecutionContextId.get(executionContext.v8Context);
+                if (id) {
+                    executionContext.id = id;
+                }
+            }
+        });
+        // Put back script source text and length
+        this.#scripts.forEach(script => {
+            const scriptIsolateId = this.getScriptIsolateId(script.isolate, script.scriptId);
+            if (this.#scriptToScriptSource.has(scriptIsolateId)) {
+                script.sourceText = this.#scriptToScriptSource.get(scriptIsolateId);
+                script.length = this.#scriptToSourceLength.get(scriptIsolateId);
+            }
+            else if (this.#largeScriptToScriptSource.has(scriptIsolateId)) {
+                const splittedSources = this.#largeScriptToScriptSource.get(scriptIsolateId);
+                if (splittedSources) {
+                    script.sourceText = splittedSources.join('');
+                    script.length = script.sourceText.length;
+                }
+            }
+            // put in the aux data
+            const linkedExecutionContext = this.#executionContexts.find(context => context.id === script.executionContextId && context.isolate === script.isolate);
+            if (linkedExecutionContext) {
+                script.executionContextAuxData = linkedExecutionContext.auxData;
+                // If a script successfully mapped to an execution context and aux data, link script to frame
+                if (script.executionContextAuxData?.frameId) {
+                    this.#scriptToFrame.set(scriptIsolateId, script.executionContextAuxData?.frameId);
+                }
+            }
+        });
+        for (const script of this.#scripts) {
+            // Resolve the source map from the provided metadata.
+            // If no map is found for a given source map url, no source map is passed to the debugger model.
+            // Encoded as a data url so that the debugger model makes no network request.
+            // NOTE: consider passing directly as object and hacking `parsedScriptSource` in DebuggerModel.ts to handle
+            // this fake event. Would avoid a lot of wasteful (de)serialization. Maybe add SDK.Script.hydratedSourceMap.
+            this.resolveSourceMap(script);
+        }
+        return this.groupContextsAndScriptsUnderTarget(this.#targets, this.#executionContexts, this.#scripts);
+    }
+    resolveSourceMap(script) {
+        if (script.sourceMapURL?.startsWith('data:')) {
+            return;
+        }
+        const sourceMap = this.getSourceMapFromMetadata(script);
+        if (!sourceMap) {
+            return;
+        }
+        // Note: this encoding + re-parsing overhead cost ~10ms per 1MB of JSON on my
+        // Mac M1 Pro.
+        // See https://crrev.com/c/6490409/comments/f294c12a_69781e24
+        const payload = encodeURIComponent(JSON.stringify(sourceMap));
+        script.sourceMapURL = `data:application/json;charset=utf-8,${payload}`;
+    }
+    getSourceMapFromMetadata(script) {
+        const { hasSourceURL, sourceURL, url, sourceMapURL, isolate, scriptId } = script;
+        if (!sourceMapURL || !this.#trace.metadata.sourceMaps) {
+            return;
+        }
+        const frame = this.#scriptToFrame.get(this.getScriptIsolateId(isolate, scriptId));
+        if (!frame) {
+            return;
+        }
+        const target = this.#targets.find(t => t.targetId === frame);
+        if (!target) {
+            return;
+        }
+        let resolvedSourceUrl = url;
+        if (hasSourceURL && sourceURL) {
+            const targetUrl = target.url;
+            resolvedSourceUrl = Common.ParsedURL.ParsedURL.completeURL(targetUrl, sourceURL) ?? sourceURL;
+        }
+        // Resolve the source map url. The value given by v8 may be relative, so resolve it here.
+        // This process should match the one in `SourceMapManager.attachSourceMap`.
+        const resolvedSourceMapUrl = Common.ParsedURL.ParsedURL.completeURL(resolvedSourceUrl, sourceMapURL);
+        if (!resolvedSourceMapUrl) {
+            return;
+        }
+        const { sourceMap } = this.#trace.metadata.sourceMaps.find(m => m.sourceMapUrl === resolvedSourceMapUrl) ?? {};
+        return sourceMap;
+    }
+    getScriptIsolateId(isolate, scriptId) {
+        return `${scriptId}@${isolate}`;
+    }
+    getExecutionContextIsolateId(isolate, executionContextId) {
+        return `${executionContextId}@${isolate}`;
+    }
+    isTraceEvent(event) {
+        return 'cat' in event && 'pid' in event && 'args' in event &&
+            'data' in event.args;
+    }
+    isRundownScriptCompiled(event) {
+        return this.isTraceEvent(event) && event.cat === 'disabled-by-default-devtools.target-rundown';
+    }
+    isRundownScript(event) {
+        return this.isTraceEvent(event) && event.cat === 'disabled-by-default-devtools.v8-source-rundown';
+    }
+    isRundownScriptSource(event) {
+        return this.isTraceEvent(event) && event.cat === 'disabled-by-default-devtools.v8-source-rundown-sources';
+    }
+    isTracingStartedInBrowser(event) {
+        return this.isTraceEvent(event) && event.cat === 'disabled-by-default-devtools.timeline' &&
+            event.name === 'TracingStartedInBrowser';
+    }
+    isFunctionCallEvent(event) {
+        return this.isTraceEvent(event) && event.cat === 'devtools.timeline' && event.name === 'FunctionCall';
+    }
+    groupContextsAndScriptsUnderTarget(targets, executionContexts, scripts) {
+        const data = [];
+        const targetIds = new Set();
+        const targetToExecutionContexts = new Map();
+        // We want to keep track of how each execution context is linked to targets so we may use this
+        // information to link scripts with no target to a target
+        const executionContextIsolateToTarget = new Map();
+        const targetToScripts = new Map();
+        const orphanScripts = [];
+        // Initialize all the mapping needed
+        for (const target of targets) {
+            targetIds.add(target.targetId);
+            targetToExecutionContexts.set(target.targetId, []);
+            targetToScripts.set(target.targetId, []);
+        }
+        // Put all of the known execution contexts under respective targets
+        for (const executionContext of executionContexts) {
+            const frameId = executionContext.auxData?.frameId;
+            if (frameId && targetIds.has(frameId)) {
+                targetToExecutionContexts.get(frameId)?.push(executionContext);
+                executionContextIsolateToTarget.set(this.getExecutionContextIsolateId(executionContext.isolate, executionContext.id), frameId);
+            }
+            else {
+                console.error('Execution context can\'t be linked to a target', executionContext);
+            }
+        }
+        // Put all of the scripts under respective targets with collected information
+        for (const script of scripts) {
+            const scriptExecutionContextIsolateId = this.getExecutionContextIsolateId(script.isolate, script.executionContextId);
+            const scriptFrameId = script.executionContextAuxData?.frameId;
+            if (script.executionContextAuxData?.frameId && targetIds.has(scriptFrameId)) {
+                targetToScripts.get(scriptFrameId)?.push(script);
+                executionContextIsolateToTarget.set(scriptExecutionContextIsolateId, scriptFrameId);
+            }
+            else if (this.#scriptToFrame.has(this.getScriptIsolateId(script.isolate, script.scriptId))) {
+                const targetId = this.#scriptToFrame.get(this.getScriptIsolateId(script.isolate, script.scriptId));
+                if (targetId) {
+                    targetToScripts.get(targetId)?.push(script);
+                    executionContextIsolateToTarget.set(scriptExecutionContextIsolateId, targetId);
+                }
+            }
+            else {
+                // These scripts are not linked to any target
+                orphanScripts.push(script);
+            }
+        }
+        // If a script is not linked to a target, use executionContext@isolate to link to a target
+        // Using PID is the last resort
+        for (const orphanScript of orphanScripts) {
+            const orphanScriptExecutionContextIsolateId = this.getExecutionContextIsolateId(orphanScript.isolate, orphanScript.executionContextId);
+            const frameId = executionContextIsolateToTarget.get(orphanScriptExecutionContextIsolateId);
+            if (frameId) {
+                // Found a link via execution context, use it.
+                targetToScripts.get(frameId)?.push(orphanScript);
+            }
+            else if (orphanScript.pid) {
+                const target = targets.find(target => target.pid === orphanScript.pid);
+                if (target) {
+                    targetToScripts.get(target.targetId)?.push(orphanScript);
+                }
+            }
+            else {
+                console.error('Script can\'t be linked to any target', orphanScript);
+            }
+        }
+        // Now all the scripts are linked to a target, we want to make sure all the scripts are pointing to a valid
+        // execution context. If not, we will create an artificial execution context for the script
+        for (const target of targets) {
+            const targetId = target.targetId;
+            const executionContexts = targetToExecutionContexts.get(targetId) || [];
+            const scripts = targetToScripts.get(targetId) || [];
+            for (const script of scripts) {
+                if (!executionContexts.find(context => context.id === script.executionContextId)) {
+                    const artificialContext = {
+                        id: script.executionContextId,
+                        origin: '',
+                        v8Context: '',
+                        name: '',
+                        auxData: {
+                            frameId: targetId,
+                            isDefault: false,
+                            type: 'type',
+                        },
+                        isolate: script.isolate,
+                        uniqueId: `${targetId}-${script.isolate}`,
+                    };
+                    executionContexts.push(artificialContext);
+                }
+            }
+            // Finally, we put all the information into the data structure we want to return as.
+            data.push({ target, executionContexts, scripts });
+        }
+        return data;
+    }
+}

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/EventBreakpointsModel.js

@@ -0,0 +1,125 @@
+// Copyright 2021 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import { CategorizedBreakpoint } from './CategorizedBreakpoint.js';
+import { SDKModel } from './SDKModel.js';
+import { TargetManager } from './TargetManager.js';
+export class EventBreakpointsModel extends SDKModel {
+    agent;
+    constructor(target) {
+        super(target);
+        this.agent = target.eventBreakpointsAgent();
+    }
+}
+// This implementation (as opposed to similar class in DOMDebuggerModel) is for
+// instrumentation breakpoints in targets that run JS but do not have a DOM.
+class EventListenerBreakpoint extends CategorizedBreakpoint {
+    setEnabled(enabled) {
+        if (this.enabled() === enabled) {
+            return;
+        }
+        super.setEnabled(enabled);
+        for (const model of TargetManager.instance().models(EventBreakpointsModel)) {
+            this.updateOnModel(model);
+        }
+    }
+    updateOnModel(model) {
+        if (this.enabled()) {
+            void model.agent.invoke_setInstrumentationBreakpoint({ eventName: this.name });
+        }
+        else {
+            void model.agent.invoke_removeInstrumentationBreakpoint({ eventName: this.name });
+        }
+    }
+    static instrumentationPrefix = 'instrumentation:';
+}
+let eventBreakpointManagerInstance;
+export class EventBreakpointsManager {
+    #eventListenerBreakpoints = [];
+    constructor() {
+        this.createInstrumentationBreakpoints("auction-worklet" /* Category.AUCTION_WORKLET */, [
+            "beforeBidderWorkletBiddingStart" /* InstrumentationNames.BEFORE_BIDDER_WORKLET_BIDDING_START */,
+            "beforeBidderWorkletReportingStart" /* InstrumentationNames.BEFORE_BIDDER_WORKLET_REPORTING_START */,
+            "beforeSellerWorkletScoringStart" /* InstrumentationNames.BEFORE_SELLER_WORKLET_SCORING_START */,
+            "beforeSellerWorkletReportingStart" /* InstrumentationNames.BEFORE_SELLER_WORKLET_REPORTING_START */,
+        ]);
+        this.createInstrumentationBreakpoints("animation" /* Category.ANIMATION */, [
+            "requestAnimationFrame" /* InstrumentationNames.REQUEST_ANIMATION_FRAME */,
+            "cancelAnimationFrame" /* InstrumentationNames.CANCEL_ANIMATION_FRAME */,
+            "requestAnimationFrame.callback" /* InstrumentationNames.REQUEST_ANIMATION_FRAME_CALLBACK */,
+        ]);
+        this.createInstrumentationBreakpoints("canvas" /* Category.CANVAS */, [
+            "canvasContextCreated" /* InstrumentationNames.CANVAS_CONTEXT_CREATED */,
+            "webglErrorFired" /* InstrumentationNames.WEBGL_ERROR_FIRED */,
+            "webglWarningFired" /* InstrumentationNames.WEBGL_WARNING_FIRED */,
+        ]);
+        this.createInstrumentationBreakpoints("geolocation" /* Category.GEOLOCATION */, [
+            "Geolocation.getCurrentPosition" /* InstrumentationNames.GEOLOCATION_GET_CURRENT_POSITION */,
+            "Geolocation.watchPosition" /* InstrumentationNames.GEOLOCATION_WATCH_POSITION */,
+        ]);
+        this.createInstrumentationBreakpoints("notification" /* Category.NOTIFICATION */, [
+            "Notification.requestPermission" /* InstrumentationNames.NOTIFICATION_REQUEST_PERMISSION */,
+        ]);
+        this.createInstrumentationBreakpoints("parse" /* Category.PARSE */, [
+            "Element.setInnerHTML" /* InstrumentationNames.ELEMENT_SET_INNER_HTML */,
+            "Document.write" /* InstrumentationNames.DOCUMENT_WRITE */,
+        ]);
+        this.createInstrumentationBreakpoints("script" /* Category.SCRIPT */, [
+            "scriptFirstStatement" /* InstrumentationNames.SCRIPT_FIRST_STATEMENT */,
+            "scriptBlockedByCSP" /* InstrumentationNames.SCRIPT_BLOCKED_BY_CSP */,
+        ]);
+        this.createInstrumentationBreakpoints("shared-storage-worklet" /* Category.SHARED_STORAGE_WORKLET */, [
+            "sharedStorageWorkletScriptFirstStatement" /* InstrumentationNames.SHARED_STORAGE_WORKLET_SCRIPT_FIRST_STATEMENT */,
+        ]);
+        this.createInstrumentationBreakpoints("timer" /* Category.TIMER */, [
+            "setTimeout" /* InstrumentationNames.SET_TIMEOUT */,
+            "clearTimeout" /* InstrumentationNames.CLEAR_TIMEOUT */,
+            "setTimeout.callback" /* InstrumentationNames.SET_TIMEOUT_CALLBACK */,
+            "setInterval" /* InstrumentationNames.SET_INTERVAL */,
+            "clearInterval" /* InstrumentationNames.CLEAR_INTERVAL */,
+            "setInterval.callback" /* InstrumentationNames.SET_INTERVAL_CALLBACK */,
+        ]);
+        this.createInstrumentationBreakpoints("window" /* Category.WINDOW */, [
+            "DOMWindow.close" /* InstrumentationNames.DOM_WINDOW_CLOSE */,
+        ]);
+        this.createInstrumentationBreakpoints("web-audio" /* Category.WEB_AUDIO */, [
+            "audioContextCreated" /* InstrumentationNames.AUDIO_CONTEXT_CREATED */,
+            "audioContextClosed" /* InstrumentationNames.AUDIO_CONTEXT_CLOSED */,
+            "audioContextResumed" /* InstrumentationNames.AUDIO_CONTEXT_RESUMED */,
+            "audioContextSuspended" /* InstrumentationNames.AUDIO_CONTEXT_SUSPENDED */,
+        ]);
+        TargetManager.instance().observeModels(EventBreakpointsModel, this);
+    }
+    static instance(opts = { forceNew: null }) {
+        const { forceNew } = opts;
+        if (!eventBreakpointManagerInstance || forceNew) {
+            eventBreakpointManagerInstance = new EventBreakpointsManager();
+        }
+        return eventBreakpointManagerInstance;
+    }
+    createInstrumentationBreakpoints(category, instrumentationNames) {
+        for (const instrumentationName of instrumentationNames) {
+            this.#eventListenerBreakpoints.push(new EventListenerBreakpoint(category, instrumentationName));
+        }
+    }
+    eventListenerBreakpoints() {
+        return this.#eventListenerBreakpoints.slice();
+    }
+    resolveEventListenerBreakpoint({ eventName }) {
+        if (!eventName.startsWith(EventListenerBreakpoint.instrumentationPrefix)) {
+            return null;
+        }
+        const instrumentationName = eventName.substring(EventListenerBreakpoint.instrumentationPrefix.length);
+        return this.#eventListenerBreakpoints.find(b => b.name === instrumentationName) || null;
+    }
+    modelAdded(eventBreakpointModel) {
+        for (const breakpoint of this.#eventListenerBreakpoints) {
+            if (breakpoint.enabled()) {
+                breakpoint.updateOnModel(eventBreakpointModel);
+            }
+        }
+    }
+    modelRemoved(_eventBreakpointModel) {
+    }
+}
+SDKModel.register(EventBreakpointsModel, { capabilities: 524288 /* Capability.EVENT_BREAKPOINTS */, autostart: false });

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/FrameAssociated.js

@@ -0,0 +1,4 @@
+// Copyright 2020 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+export {};

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/FrameManager.js

@@ -0,0 +1,199 @@
+// Copyright 2020 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 Common from '../common/common.js';
+import { Events as ResourceTreeModelEvents, ResourceTreeModel } from './ResourceTreeModel.js';
+import { TargetManager } from './TargetManager.js';
+let frameManagerInstance = null;
+/**
+ * The FrameManager is a central storage for all #frames. It collects #frames from all
+ * ResourceTreeModel-instances (one per target), so that #frames can be found by id
+ * without needing to know their target.
+ */
+export class FrameManager extends Common.ObjectWrapper.ObjectWrapper {
+    #eventListeners = new WeakMap();
+    // Maps frameIds to #frames and a count of how many ResourceTreeModels contain this frame.
+    // (OOPIFs are usually first attached to a new target and then detached from their old target,
+    // therefore being contained in 2 models for a short period of time.)
+    #frames = new Map();
+    #framesForTarget = new Map();
+    #outermostFrame = null;
+    #transferringFramesDataCache = new Map();
+    #awaitedFrames = new Map();
+    constructor() {
+        super();
+        TargetManager.instance().observeModels(ResourceTreeModel, this);
+    }
+    static instance({ forceNew } = { forceNew: false }) {
+        if (!frameManagerInstance || forceNew) {
+            frameManagerInstance = new FrameManager();
+        }
+        return frameManagerInstance;
+    }
+    static removeInstance() {
+        frameManagerInstance = null;
+    }
+    modelAdded(resourceTreeModel) {
+        const addListener = resourceTreeModel.addEventListener(ResourceTreeModelEvents.FrameAdded, this.frameAdded, this);
+        const detachListener = resourceTreeModel.addEventListener(ResourceTreeModelEvents.FrameDetached, this.frameDetached, this);
+        const navigatedListener = resourceTreeModel.addEventListener(ResourceTreeModelEvents.FrameNavigated, this.frameNavigated, this);
+        const resourceAddedListener = resourceTreeModel.addEventListener(ResourceTreeModelEvents.ResourceAdded, this.resourceAdded, this);
+        this.#eventListeners.set(resourceTreeModel, [addListener, detachListener, navigatedListener, resourceAddedListener]);
+        this.#framesForTarget.set(resourceTreeModel.target().id(), new Set());
+    }
+    modelRemoved(resourceTreeModel) {
+        const listeners = this.#eventListeners.get(resourceTreeModel);
+        if (listeners) {
+            Common.EventTarget.removeEventListeners(listeners);
+        }
+        // Iterate over this model's #frames and decrease their count or remove them.
+        // (The ResourceTreeModel does not send FrameDetached events when a model
+        // is removed.)
+        const frameSet = this.#framesForTarget.get(resourceTreeModel.target().id());
+        if (frameSet) {
+            for (const frameId of frameSet) {
+                this.decreaseOrRemoveFrame(frameId);
+            }
+        }
+        this.#framesForTarget.delete(resourceTreeModel.target().id());
+    }
+    frameAdded(event) {
+        const frame = event.data;
+        const frameData = this.#frames.get(frame.id);
+        // If the frame is already in the map, increase its count, otherwise add it to the map.
+        if (frameData) {
+            // In order to not lose the following attributes of a frame during
+            // an OOPIF transfer we need to copy them to the new frame
+            frame.setCreationStackTrace(frameData.frame.getCreationStackTraceData());
+            this.#frames.set(frame.id, { frame, count: frameData.count + 1 });
+        }
+        else {
+            // If the transferring frame's detached event is received before its frame added
+            // event in the new target, the frame's cached attributes are reassigned.
+            const cachedFrameAttributes = this.#transferringFramesDataCache.get(frame.id);
+            if (cachedFrameAttributes?.creationStackTrace && cachedFrameAttributes?.creationStackTraceTarget) {
+                frame.setCreationStackTrace({
+                    creationStackTrace: cachedFrameAttributes.creationStackTrace,
+                    creationStackTraceTarget: cachedFrameAttributes.creationStackTraceTarget,
+                });
+            }
+            this.#frames.set(frame.id, { frame, count: 1 });
+            this.#transferringFramesDataCache.delete(frame.id);
+        }
+        this.resetOutermostFrame();
+        // Add the frameId to the the targetId's set of frameIds.
+        const frameSet = this.#framesForTarget.get(frame.resourceTreeModel().target().id());
+        if (frameSet) {
+            frameSet.add(frame.id);
+        }
+        this.dispatchEventToListeners("FrameAddedToTarget" /* Events.FRAME_ADDED_TO_TARGET */, { frame });
+        this.resolveAwaitedFrame(frame);
+    }
+    frameDetached(event) {
+        const { frame, isSwap } = event.data;
+        // Decrease the frame's count or remove it entirely from the map.
+        this.decreaseOrRemoveFrame(frame.id);
+        // If the transferring frame's detached event is received before its frame
+        // added event in the new target, we persist some attributes of the frame here
+        // so that later on the frame added event in the new target they can be reassigned.
+        if (isSwap && !this.#frames.get(frame.id)) {
+            const traceData = frame.getCreationStackTraceData();
+            const cachedFrameAttributes = {
+                ...(traceData.creationStackTrace && { creationStackTrace: traceData.creationStackTrace }),
+                ...(traceData.creationStackTrace && { creationStackTraceTarget: traceData.creationStackTraceTarget }),
+            };
+            this.#transferringFramesDataCache.set(frame.id, cachedFrameAttributes);
+        }
+        // Remove the frameId from the target's set of frameIds.
+        const frameSet = this.#framesForTarget.get(frame.resourceTreeModel().target().id());
+        if (frameSet) {
+            frameSet.delete(frame.id);
+        }
+    }
+    frameNavigated(event) {
+        const frame = event.data;
+        this.dispatchEventToListeners("FrameNavigated" /* Events.FRAME_NAVIGATED */, { frame });
+        if (frame.isOutermostFrame()) {
+            this.dispatchEventToListeners("OutermostFrameNavigated" /* Events.OUTERMOST_FRAME_NAVIGATED */, { frame });
+        }
+    }
+    resourceAdded(event) {
+        this.dispatchEventToListeners("ResourceAdded" /* Events.RESOURCE_ADDED */, { resource: event.data });
+    }
+    decreaseOrRemoveFrame(frameId) {
+        const frameData = this.#frames.get(frameId);
+        if (frameData) {
+            if (frameData.count === 1) {
+                this.#frames.delete(frameId);
+                this.resetOutermostFrame();
+                this.dispatchEventToListeners("FrameRemoved" /* Events.FRAME_REMOVED */, { frameId });
+            }
+            else {
+                frameData.count--;
+            }
+        }
+    }
+    /**
+     * Looks for the outermost frame in `#frames` and sets `#outermostFrame` accordingly.
+     *
+     * Important: This method needs to be called everytime `#frames` is updated.
+     */
+    resetOutermostFrame() {
+        const outermostFrames = this.getAllFrames().filter(frame => frame.isOutermostFrame());
+        this.#outermostFrame = outermostFrames.length > 0 ? outermostFrames[0] : null;
+    }
+    /**
+     * Returns the ResourceTreeFrame with a given frameId.
+     * When a frame is being detached a new ResourceTreeFrame but with the same
+     * frameId is created. Consequently getFrame() will return a different
+     * ResourceTreeFrame after detachment. Callers of getFrame() should therefore
+     * immediately use the function return value and not store it for later use.
+     */
+    getFrame(frameId) {
+        const frameData = this.#frames.get(frameId);
+        if (frameData) {
+            return frameData.frame;
+        }
+        return null;
+    }
+    getAllFrames() {
+        return Array.from(this.#frames.values(), frameData => frameData.frame);
+    }
+    getOutermostFrame() {
+        return this.#outermostFrame;
+    }
+    async getOrWaitForFrame(frameId, notInTarget) {
+        const frame = this.getFrame(frameId);
+        if (frame && (!notInTarget || notInTarget !== frame.resourceTreeModel().target())) {
+            return frame;
+        }
+        return await new Promise(resolve => {
+            const waiting = this.#awaitedFrames.get(frameId);
+            if (waiting) {
+                waiting.push({ notInTarget, resolve });
+            }
+            else {
+                this.#awaitedFrames.set(frameId, [{ notInTarget, resolve }]);
+            }
+        });
+    }
+    resolveAwaitedFrame(frame) {
+        const waiting = this.#awaitedFrames.get(frame.id);
+        if (!waiting) {
+            return;
+        }
+        const newWaiting = waiting.filter(({ notInTarget, resolve }) => {
+            if (!notInTarget || notInTarget !== frame.resourceTreeModel().target()) {
+                resolve(frame);
+                return false;
+            }
+            return true;
+        });
+        if (newWaiting.length > 0) {
+            this.#awaitedFrames.set(frame.id, newWaiting);
+        }
+        else {
+            this.#awaitedFrames.delete(frame.id);
+        }
+    }
+}