chrome-devtools-frontend
Version:
Chrome DevTools UI
444 lines (393 loc) • 16.6 kB
text/typescript
// Copyright 2022 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import * as Platform from '../../../core/platform/platform.js';
import * as Helpers from '../helpers/helpers.js';
import {data as metaHandlerData} from './MetaHandler.js';
import {KnownEventName, KNOWN_EVENTS, type TraceEventHandlerName, HandlerState} from './types.js';
import * as Types from '../types/types.js';
const processes = new Map<Types.TraceEvents.ProcessID, RendererProcess>();
const traceEventToNode = new Map<RendererTraceEvent, RendererEventNode>();
const allRendererEvents: RendererTraceEvent[] = [];
let nodeIdCount = 0;
const makeRendererEventNodeId = (): RendererEventNodeId => (++nodeIdCount) as RendererEventNodeId;
let handlerState = HandlerState.UNINITIALIZED;
const makeRendererProcess = (): RendererProcess => ({
url: null,
isOnMainFrame: false,
threads: new Map(),
});
const makeRendererThread = (): RendererThread => ({
name: null,
events: [],
});
const makeEmptyRendererEventTree = (): RendererEventTree => ({
nodes: new Map(),
roots: new Set(),
maxDepth: 0,
});
const makeEmptyRendererEventNode = (event: RendererTraceEvent, id: RendererEventNodeId): RendererEventNode => ({
event,
id,
parentId: null,
childrenIds: new Set(),
depth: 0,
});
const getOrCreateRendererProcess =
(processes: Map<Types.TraceEvents.ProcessID, RendererProcess>, pid: Types.TraceEvents.ProcessID):
RendererProcess => {
return Platform.MapUtilities.getWithDefault(processes, pid, makeRendererProcess);
};
const getOrCreateRendererThread = (process: RendererProcess, tid: Types.TraceEvents.ThreadID): RendererThread => {
return Platform.MapUtilities.getWithDefault(process.threads, tid, makeRendererThread);
};
export function reset(): void {
processes.clear();
traceEventToNode.clear();
allRendererEvents.length = 0;
nodeIdCount = -1;
handlerState = HandlerState.UNINITIALIZED;
}
export function initialize(): void {
if (handlerState !== HandlerState.UNINITIALIZED) {
throw new Error('Renderer Handler was not reset');
}
handlerState = HandlerState.INITIALIZED;
}
export function handleEvent(event: Types.TraceEvents.TraceEventData): void {
if (handlerState !== HandlerState.INITIALIZED) {
throw new Error('Renderer Handler is not initialized');
}
if (Types.TraceEvents.isTraceEventInstant(event) || Types.TraceEvents.isTraceEventComplete(event)) {
const process = getOrCreateRendererProcess(processes, event.pid);
const thread = getOrCreateRendererThread(process, event.tid);
thread.events.push(event);
allRendererEvents.push(event);
}
}
export async function finalize(): Promise<void> {
if (handlerState !== HandlerState.INITIALIZED) {
throw new Error('Renderer Handler is not initialized');
}
const {mainFrameId, rendererProcessesByFrame, threadsInProcess} = metaHandlerData();
assignMeta(processes, mainFrameId, rendererProcessesByFrame, threadsInProcess);
sanitizeProcesses(processes);
buildHierarchy(processes, {filter: KNOWN_EVENTS});
sanitizeThreads(processes);
handlerState = HandlerState.FINALIZED;
}
export function data(): RendererHandlerData {
if (handlerState !== HandlerState.FINALIZED) {
throw new Error('Renderer Handler is not finalized');
}
return {
processes: new Map(processes),
traceEventToNode: new Map(traceEventToNode),
allRendererEvents: [...allRendererEvents],
};
}
/**
* Steps through all the renderer processes we've located so far in the meta
* handler, obtaining their URL, checking whether they are the main frame, and
* collecting each one of their threads' name. This meta handler's data is
* assigned to the renderer handler's data.
*/
export function assignMeta(
processes: Map<Types.TraceEvents.ProcessID, RendererProcess>, mainFrameId: string,
rendererProcessesByFrame: Map<string, Map<Types.TraceEvents.ProcessID, {frame: Types.TraceEvents.TraceFrame}>>,
threadsInProcess:
Map<Types.TraceEvents.ProcessID, Map<Types.TraceEvents.ThreadID, Types.TraceEvents.TraceEventThreadName>>):
void {
assignOrigin(processes, mainFrameId, rendererProcessesByFrame);
assignIsMainFrame(processes, mainFrameId, rendererProcessesByFrame);
assignThreadName(processes, rendererProcessesByFrame, threadsInProcess);
}
/**
* Assigns origins to all threads in all processes.
* @see assignMeta
*/
export function assignOrigin(
processes: Map<Types.TraceEvents.ProcessID, RendererProcess>, mainFrameId: string,
rendererProcessesByFrame: Map<string, Map<Types.TraceEvents.ProcessID, {frame: Types.TraceEvents.TraceFrame}>>):
void {
for (const [frameId, renderProcessesByPid] of rendererProcessesByFrame) {
for (const [pid, processInfo] of renderProcessesByPid) {
const process = getOrCreateRendererProcess(processes, pid);
// Sometimes a single process is responsible with rendering multiple
// frames at the same time. For example, see https://crbug.com/1334563.
// When this happens, we'd still like to assign a single url per process
// so: 1) use the first frame rendered by this process as the url source
// and 2) if there's a more "important" frame found, us its url instead.
if (process.url === null /* first frame */ || frameId === mainFrameId /* more important frame */) {
// If we are here, it's because we care about this process and the URL. But before we store it, we check if it is a valid URL by trying to create a URL object. If it isn't, we won't set it, and this process will be filtered out later.
try {
new URL(processInfo.frame.url);
process.url = processInfo.frame.url;
} catch (e) {
process.url = null;
}
}
}
}
}
/**
* Assigns whether or not a thread is the main frame to all threads in all processes.
* @see assignMeta
*/
export function assignIsMainFrame(
processes: Map<Types.TraceEvents.ProcessID, RendererProcess>, mainFrameId: string,
rendererProcessesByFrame: Map<string, Map<Types.TraceEvents.ProcessID, {frame: Types.TraceEvents.TraceFrame}>>):
void {
for (const [frameId, renderProcessesByPid] of rendererProcessesByFrame) {
for (const [pid] of renderProcessesByPid) {
const process = getOrCreateRendererProcess(processes, pid);
// We have this go in one direction; once a renderer has been flagged as
// being on the main frame, we don't unset it to false if were to show up
// in a subframe. Equally, if we already saw this renderer in a subframe,
// but it becomes the main frame, the flag would get updated.
if (frameId === mainFrameId) {
process.isOnMainFrame = true;
}
}
}
}
/**
* Assigns the thread name to all threads in all processes.
* @see assignMeta
*/
export function assignThreadName(
processes: Map<Types.TraceEvents.ProcessID, RendererProcess>,
rendererProcessesByFrame: Map<string, Map<Types.TraceEvents.ProcessID, {frame: Types.TraceEvents.TraceFrame}>>,
threadsInProcess:
Map<Types.TraceEvents.ProcessID, Map<Types.TraceEvents.ThreadID, Types.TraceEvents.TraceEventThreadName>>):
void {
for (const [, renderProcessesByPid] of rendererProcessesByFrame) {
for (const [pid] of renderProcessesByPid) {
const process = getOrCreateRendererProcess(processes, pid);
for (const [tid, threadInfo] of threadsInProcess.get(pid) ?? []) {
const thread = getOrCreateRendererThread(process, tid);
thread.name = threadInfo?.args.name ?? `${tid}`;
}
}
}
}
/**
* Removes unneeded trace data opportunistically stored while handling events.
* This currently does the following:
* - Deletes processes with an unkonwn origin.
*/
export function sanitizeProcesses(processes: Map<Types.TraceEvents.ProcessID, RendererProcess>): void {
for (const [pid, process] of processes) {
// If the process had no url, or if it had a malformed url that could not be
// parsed for some reason, or if it's an "about:" origin, delete it.
// This is done because we don't really care about processes for which we
// can't provide actionable insights to the user (e.g. about:blank pages).
if (process.url === null) {
processes.delete(pid);
continue;
}
const asUrl = new URL(process.url);
if (asUrl.protocol === 'about:') {
processes.delete(pid);
}
}
}
/**
* Removes unneeded trace data opportunistically stored while handling events.
* This currently does the following:
* - Deletes threads with no roots.
*/
export function sanitizeThreads(processes: Map<Types.TraceEvents.ProcessID, RendererProcess>): void {
for (const [, process] of processes) {
for (const [tid, thread] of process.threads) {
// If the thread has no roots, also delete it. Otherwise, there's going to
// be space taken, even though nothing is rendered in the track manager.
if (!thread.tree?.roots.size) {
process.threads.delete(tid);
}
}
}
}
/**
* Creates a hierarchical structure from the trace events. Each thread in each
* process will contribute to their own individual hierarchy.
*
* The trace data comes in as a contiguous array of events, against which we
* make a couple of assumptions:
*
* 1. Events are temporally-ordered in terms of start time (though they're
* not necessarily ordered as such in the data stream).
* 2. If event B's start and end times are within event A's time boundaries
* we assume that A is the parent of B.
*
* Therefore we expect to reformulate something like:
*
* [ Task A ][ Task B ][ Task C ][ Task D ][ Task E ]
*
* Into something hierarchically-arranged like below:
*
* |------------- Task A -------------||-- Task E --|
* |-- Task B --||-- Task D --|
* |- Task C -|
*/
export function buildHierarchy(
processes: Map<Types.TraceEvents.ProcessID, RendererProcess>,
options: {filter: {has: (name: KnownEventName) => boolean}}): void {
for (const [, process] of processes) {
for (const [, thread] of process.threads) {
// Step 1. Massage the data.
Helpers.Trace.sortTraceEventsInPlace(thread.events);
// Step 2. Build the tree.
thread.tree = treify(thread.events, options);
}
}
}
/**
* Builds a hierarchy of the trace events in a particular thread of a
* particular process, assuming that they're sorted, by iterating through all of
* the events in order.
*
* The approach is analogous to how a parser would be implemented. A stack
* maintains local context. A scanner peeks and pops from the data stream.
* Various "tokens" (events) are treated as "whitespace" (ignored).
*
* The tree starts out empty and is populated as the hierarchy is built. The
* nodes are also assumed to be created empty, with no known parent or children.
*
* Complexity: O(n), where n = number of events
*/
export function treify(
events: RendererTraceEvent[], options: {filter: {has: (name: KnownEventName) => boolean}}): RendererEventTree {
const stack = [];
// Reset the node id counter for every new renderer.
nodeIdCount = -1;
const tree = makeEmptyRendererEventTree();
for (let i = 0; i < events.length; i++) {
const event = events[i];
// If the current event should not be part of the tree, then simply proceed
// with the next event.
if (!options.filter.has(event.name as KnownEventName)) {
continue;
}
const duration = event.dur || 0;
const nodeId = makeRendererEventNodeId();
const node = makeEmptyRendererEventNode(event, nodeId);
// If the parent stack is empty, then the current event is a root. Create a
// node for it, mark it as a root, then proceed with the next event.
if (stack.length === 0) {
tree.nodes.set(nodeId, node);
tree.roots.add(nodeId);
event.selfTime = Types.Timing.MicroSeconds(duration);
stack.push(node);
tree.maxDepth = Math.max(tree.maxDepth, stack.length);
traceEventToNode.set(event, node);
continue;
}
const parentNode = stack.at(-1);
if (parentNode === undefined) {
throw new Error('Impossible: no parent node found in the stack');
}
const parentEvent = parentNode.event;
const begin = event.ts;
const parentBegin = parentEvent.ts;
const parentDuration = parentEvent.dur || 0;
const end = begin + duration;
const parentEnd = parentBegin + parentDuration;
// Check the relationship between the parent event at the top of the stack,
// and the current event being processed. There are only 4 distinct
// possiblities, only 2 of them actually valid, given the assumed sorting:
// 1. Current event starts before the parent event, ends whenever. (invalid)
// 2. Current event starts after the parent event, ends whenever. (valid)
// 3. Current event starts during the parent event, ends after. (invalid)
// 4. Current event starts and ends during the parent event. (valid)
// 1. If the current event starts before the parent event, then the data is
// not sorted properly, messed up some way, or this logic is incomplete.
const startsBeforeParent = begin < parentBegin;
if (startsBeforeParent) {
throw new Error('Impossible: current event starts before the parent event');
}
// 2. If the current event starts after the parent event, then it's a new
// parent. Pop, then handle current event again.
const startsAfterParent = begin >= parentEnd;
if (startsAfterParent) {
stack.pop();
i--;
// The last created node has been discarded, so discard this id.
nodeIdCount--;
continue;
}
// 3. If the current event starts during the parent event, but ends after
// it, then the data is messed up some way.
const endsAfterParent = end > parentEnd;
if (endsAfterParent) {
throw new Error('Impossible: current event starts during the parent event');
}
// 4. The only remaining case is the common case, where the current event is
// contained within the parent event. Create a node for the current
// event, establish the parent/child relationship, then proceed with the
// next event.
tree.nodes.set(nodeId, node);
node.depth = stack.length;
node.parentId = parentNode.id;
parentNode.childrenIds.add(nodeId);
event.selfTime = Types.Timing.MicroSeconds(duration);
if (parentEvent.selfTime !== undefined) {
parentEvent.selfTime = Types.Timing.MicroSeconds(parentEvent.selfTime - (event.dur || 0));
}
stack.push(node);
tree.maxDepth = Math.max(tree.maxDepth, stack.length);
traceEventToNode.set(event, node);
}
return tree;
}
export const FORCED_LAYOUT_EVENT_NAMES = new Set([
KnownEventName.Layout,
]);
export const FORCED_RECALC_STYLE_EVENTS = new Set([
KnownEventName.RecalculateStyles,
KnownEventName.UpdateLayoutTree,
]);
export function deps(): TraceEventHandlerName[] {
return ['Meta', 'Samples'];
}
export interface RendererHandlerData {
processes: Map<Types.TraceEvents.ProcessID, RendererProcess>;
traceEventToNode: Map<RendererTraceEvent, RendererEventNode>;
allRendererEvents: RendererTraceEvent[];
}
export interface RendererProcess {
// In an ideal world this would be modelled as a URL, but URLs cannot be sent
// between the main thread and workers, so we have to store it as a string.
url: string|null;
isOnMainFrame: boolean;
threads: Map<Types.TraceEvents.ThreadID, RendererThread>;
}
export interface RendererThread {
name: string|null;
events: RendererTraceEvent[];
tree?: RendererEventTree;
}
interface RendererEventData {
selfTime: Types.Timing.MicroSeconds;
initiator: RendererTraceEvent;
parent?: RendererTraceEvent;
hotFunctionsStackTraces: Types.TraceEvents.TraceEventCallFrame[][];
}
export type RendererTraceEvent = Types.TraceEvents.TraceEventRendererData&Partial<RendererEventData>;
export interface RendererEventTree {
nodes: Map<RendererEventNodeId, RendererEventNode>;
roots: Set<RendererEventNodeId>;
maxDepth: number;
}
export interface RendererEventNode {
event: RendererTraceEvent;
depth: number;
id: RendererEventNodeId;
parentId?: RendererEventNodeId|null;
childrenIds: Set<RendererEventNodeId>;
}
class RendererEventNodeIdTag {
/* eslint-disable-next-line no-unused-private-class-members */
readonly #tag: (symbol|undefined);
}
export type RendererEventNodeId = number&RendererEventNodeIdTag;