@paulirish/trace_engine 0.0.58 → 0.0.60

package/models/trace/helpers/Trace.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Chromium Authors. All rights reserved.
+// 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 Platform from '../../../core/platform/platform.js';
@@ -24,7 +24,7 @@ export function stackTraceInEvent(event) {
     if (event.args?.stackTrace) {
         return event.args.stackTrace;
     }
-    if (Types.Events.isUpdateLayoutTree(event)) {
+    if (Types.Events.isRecalcStyle(event)) {
         return event.args.beginData?.stackTrace || null;
     }
     if (Types.Events.isLayout(event)) {
@@ -69,8 +69,10 @@ export function extractOriginFromTrace(firstNavigationURL) {
     }
     return null;
 }
-// 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.
+/**
+ * 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.
+ **/
 export function addEventToProcessThread(event, eventsInProcessThread) {
     const { tid, pid } = event;
     let eventsInThread = eventsInProcessThread.get(pid);
@@ -85,25 +87,32 @@ export function addEventToProcessThread(event, eventsInProcessThread) {
     eventsInThread.set(event.tid, events);
     eventsInProcessThread.set(event.pid, eventsInThread);
 }
-export function eventTimeComparator(a, b) {
-    const aBeginTime = a.ts;
-    const bBeginTime = b.ts;
+export function compareBeginAndEnd(aBeginTime, bBeginTime, aEndTime, bEndTime) {
     if (aBeginTime < bBeginTime) {
         return -1;
     }
     if (aBeginTime > bBeginTime) {
         return 1;
     }
-    const aDuration = a.dur ?? 0;
-    const bDuration = b.dur ?? 0;
-    const aEndTime = aBeginTime + aDuration;
-    const bEndTime = bBeginTime + bDuration;
     if (aEndTime > bEndTime) {
         return -1;
     }
     if (aEndTime < bEndTime) {
         return 1;
     }
+    return 0;
+}
+export function eventTimeComparator(a, b) {
+    const aBeginTime = a.ts;
+    const bBeginTime = b.ts;
+    const aDuration = a.dur ?? 0;
+    const bDuration = b.dur ?? 0;
+    const aEndTime = aBeginTime + aDuration;
+    const bEndTime = bBeginTime + bDuration;
+    const timeDifference = compareBeginAndEnd(aBeginTime, bBeginTime, aEndTime, bEndTime);
+    if (timeDifference) {
+        return timeDifference;
+    }
     // If times are equal, prioritize profile calls over trace events,
     // since an exactly equal timestamp with a trace event is likely
     // indicates that the SamplesIntegrator meant to parent the trace
@@ -152,6 +161,29 @@ export function mergeEventsInOrder(eventsArray1, eventsArray2) {
     }
     return result;
 }
+export function parseDevtoolsDetails(timingDetail, key) {
+    try {
+        // Attempt to parse the detail as an object that might be coming from a
+        // DevTools Perf extension.
+        // Wrapped in a try-catch because timingDetail might either:
+        // 1. Not be `json.parse`-able (it should, but just in case...)
+        // 2. Not be an object - in which case the `in` check will error.
+        // If we hit either of these cases, we just ignore this mark and move on.
+        const detailObj = JSON.parse(timingDetail);
+        if (!(key in detailObj)) {
+            return null;
+        }
+        if (!Types.Extensions.isValidExtensionPayload(detailObj[key])) {
+            return null;
+        }
+        return detailObj[key];
+    }
+    catch {
+        // No need to worry about this error, just discard this event and don't
+        // treat it as having any useful information for the purposes of extensions.
+        return null;
+    }
+}
 export function getNavigationForTraceEvent(event, eventFrameId, navigationsByFrameId) {
     const navigations = navigationsByFrameId.get(eventFrameId);
     if (!navigations || eventFrameId === '') {
@@ -211,52 +243,109 @@ export function makeProfileCall(node, profileId, sampleIndex, ts, pid, tid) {
     };
 }
 /**
- * Matches beginning events with PairableAsyncEnd and PairableAsyncInstant (ASYNC_NESTABLE_INSTANT)
- * if provided, though currently only coming from Animations. Traces may contain multiple instant events so we need to
- * account for that.
+ * Matches beginning events with PairableAsyncEnd and PairableAsyncInstant
+ * if provided. Traces may contain multiple instant events so we need to
+ * account for that. Additionally we have seen cases where we might only have a
+ * begin event & instant event(s), with no end event. So we account for that
+ * situation also.
+ *
+ * You might also like to read the models/trace/README.md which has some
+ * documentation on trace IDs. This is important as Perfetto will reuse trace
+ * IDs when emitting events (if they do not overlap). This means it's not as
+ * simple as grouping events by IDs. Instead, we group begin & instant events
+ * by ID as we find them. When we find end events, we then pop any matching
+ * begin/instant events off the stack and group those. That way, if we meet the
+ * same ID later on it doesn't cause us collisions.
  *
- * @returns Map of the animation's ID to it's matching events.
+ * @returns An array of all the matched event groups, along with their ID. Note
+ * that two event groups can have the same ID if they were non-overlapping
+ * events. You cannot rely on ID being unique across a trace. The returned set
+ * of groups are NOT SORTED in any order.
  */
-export function matchEvents(unpairedEvents) {
+function matchEvents(unpairedEvents) {
+    sortTraceEventsInPlace(unpairedEvents);
     // map to store begin and end of the event
-    const matchedPairs = new Map();
-    // looking for start and end
+    const matches = [];
+    const beginEventsById = new Map();
+    const instantEventsById = new Map();
     for (const event of unpairedEvents) {
-        const syntheticId = getSyntheticId(event);
-        if (syntheticId === undefined) {
+        const id = getSyntheticId(event);
+        if (id === undefined) {
             continue;
         }
-        // Create a synthetic id to prevent collisions across categories.
-        // Console timings can be dispatched with the same id, so use the
-        // event name as well to generate unique ids.
-        const otherEventsWithID = Platform.MapUtilities.getWithDefault(matchedPairs, syntheticId, () => {
-            return { begin: null, end: null, instant: [] };
-        });
-        const isStartEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_START;
-        const isEndEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_END;
-        const isInstantEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_INSTANT;
-        if (isStartEvent) {
-            otherEventsWithID.begin = event;
-        }
-        else if (isEndEvent) {
-            otherEventsWithID.end = event;
-        }
-        else if (isInstantEvent) {
-            if (!otherEventsWithID.instant) {
-                otherEventsWithID.instant = [];
+        if (Types.Events.isPairableAsyncBegin(event)) {
+            const existingEvents = beginEventsById.get(id) ?? [];
+            existingEvents.push(event);
+            beginEventsById.set(id, existingEvents);
+        }
+        else if (Types.Events.isPairableAsyncInstant(event)) {
+            const existingEvents = instantEventsById.get(id) ?? [];
+            existingEvents.push(event);
+            instantEventsById.set(id, existingEvents);
+        }
+        else if (Types.Events.isPairableAsyncEnd(event)) {
+            // Find matching begin event by ID
+            const beginEventsWithMatchingId = beginEventsById.get(id) ?? [];
+            const beginEvent = beginEventsWithMatchingId.pop();
+            if (!beginEvent) {
+                continue;
             }
-            otherEventsWithID.instant.push(event);
+            const instantEventsWithMatchingId = instantEventsById.get(id) ?? [];
+            // Find all instant events after the begin event ts.
+            const instantEventsForThisGroup = [];
+            while (instantEventsWithMatchingId.length > 0) {
+                if (instantEventsWithMatchingId[0].ts >= beginEvent.ts) {
+                    const event = instantEventsWithMatchingId.pop();
+                    if (event) {
+                        instantEventsForThisGroup.push(event);
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+            const matchingGroup = {
+                begin: beginEvent,
+                end: event,
+                instant: instantEventsForThisGroup,
+                syntheticId: id,
+            };
+            matches.push(matchingGroup);
+        }
+    }
+    // At this point we know we have paired up all the Begin & End & Instant
+    // events. But it is possible to see only begin & instant events with the
+    // same ID, and no end event. So now we do a second pass through our begin
+    // events to find any that did not have an end event. If we find some
+    // instant events for the begin event, we create a new group.
+    // Also, because there were no end events, we know that the IDs will be
+    // unique now; e.g. each key in the map should have no more than one item in
+    // it.
+    for (const [id, beginEvents] of beginEventsById) {
+        const beginEvent = beginEvents.pop();
+        if (!beginEvent) {
+            continue;
+        }
+        const matchingInstantEvents = instantEventsById.get(id);
+        if (matchingInstantEvents?.length) {
+            matches.push({
+                syntheticId: id,
+                begin: beginEvent,
+                end: null,
+                instant: matchingInstantEvents,
+            });
         }
     }
-    return matchedPairs;
+    return matches;
 }
-function getSyntheticId(event) {
+export function getSyntheticId(event) {
     const id = extractId(event);
     return id && `${event.cat}:${id}:${event.name}`;
 }
-export function createSortedSyntheticEvents(matchedPairs, syntheticEventCallback) {
+function createSortedSyntheticEvents(matchedPairs) {
     const syntheticEvents = [];
-    for (const [id, eventsTriplet] of matchedPairs.entries()) {
+    for (const eventsTriplet of matchedPairs) {
+        const id = eventsTriplet.syntheticId;
         const beginEvent = eventsTriplet.begin;
         const endEvent = eventsTriplet.end;
         const instantEvents = eventsTriplet.instant;
@@ -304,14 +393,19 @@ export function createSortedSyntheticEvents(matchedPairs, syntheticEventCallback
             // crbug.com/1472375
             continue;
         }
-        syntheticEventCallback?.(event);
         syntheticEvents.push(event);
     }
-    return syntheticEvents.sort((a, b) => a.ts - b.ts);
+    sortTraceEventsInPlace(syntheticEvents);
+    return syntheticEvents;
 }
-export function createMatchedSortedSyntheticEvents(unpairedAsyncEvents, syntheticEventCallback) {
+/**
+ * Groups up sets of async events into synthetic events.
+ * @param unpairedAsyncEvents the raw array of begin, end and async instant
+ * events. These MUST be sorted in timestamp ASC order.
+ */
+export function createMatchedSortedSyntheticEvents(unpairedAsyncEvents) {
     const matchedPairs = matchEvents(unpairedAsyncEvents);
-    const syntheticEvents = createSortedSyntheticEvents(matchedPairs, syntheticEventCallback);
+    const syntheticEvents = createSortedSyntheticEvents(matchedPairs);
     return syntheticEvents;
 }
 /**
@@ -367,23 +461,45 @@ export function getZeroIndexedStackTraceInEventPayload(event) {
     if (!stack) {
         return null;
     }
-    return stack.map(callFrame => {
-        switch (event.name) {
-            case Types.Events.Name.SCHEDULE_STYLE_RECALCULATION:
-            case Types.Events.Name.INVALIDATE_LAYOUT:
-            case Types.Events.Name.FUNCTION_CALL:
-            case Types.Events.Name.LAYOUT:
-            case Types.Events.Name.UPDATE_LAYOUT_TREE: {
-                return makeZeroBasedCallFrame(callFrame);
+    switch (event.name) {
+        case Types.Events.Name.SCHEDULE_STYLE_RECALCULATION:
+        case Types.Events.Name.INVALIDATE_LAYOUT:
+        case Types.Events.Name.FUNCTION_CALL:
+        case Types.Events.Name.LAYOUT:
+        case Types.Events.Name.RECALC_STYLE: {
+            return stack.map(makeZeroBasedCallFrame);
+        }
+        default: {
+            if (Types.Events.isUserTiming(event) || Types.Extensions.isSyntheticExtensionEntry(event)) {
+                return stack.map(makeZeroBasedCallFrame);
             }
-            default: {
-                if (Types.Events.isUserTiming(event) || Types.Extensions.isSyntheticExtensionEntry(event)) {
-                    return makeZeroBasedCallFrame(callFrame);
-                }
+            return stack;
+        }
+    }
+}
+/**
+ * Same as getZeroIndexedStackTraceInEventPayload, but only returns the top call frame.
+ */
+export function getStackTraceTopCallFrameInEventPayload(event) {
+    const stack = stackTraceInEvent(event);
+    if (!stack || stack.length === 0) {
+        return null;
+    }
+    switch (event.name) {
+        case Types.Events.Name.SCHEDULE_STYLE_RECALCULATION:
+        case Types.Events.Name.INVALIDATE_LAYOUT:
+        case Types.Events.Name.FUNCTION_CALL:
+        case Types.Events.Name.LAYOUT:
+        case Types.Events.Name.RECALC_STYLE: {
+            return makeZeroBasedCallFrame(stack[0]);
+        }
+        default: {
+            if (Types.Events.isUserTiming(event) || Types.Extensions.isSyntheticExtensionEntry(event)) {
+                return makeZeroBasedCallFrame(stack[0]);
             }
+            return stack[0];
         }
-        return callFrame;
-    });
+    }
 }
 /**
  * Given a 1-based call frame creates a 0-based one.
@@ -421,7 +537,7 @@ function getRawLineAndColumnNumbersForEvent(event) {
     return { lineNumber, columnNumber };
 }
 export function frameIDForEvent(event) {
-    // There are a few events (for example UpdateLayoutTree, ParseHTML) that have
+    // There are a few events (for example RecalcStyle, ParseHTML) that have
     // the frame stored in args.beginData
     // Rather than list them all we just check for the presence of the field, so
     // we are robust against future trace events also doing this.
@@ -443,6 +559,9 @@ const DevToolsTimelineEventCategory = 'disabled-by-default-devtools.timeline';
 export function isTopLevelEvent(event) {
     return event.cat.includes(DevToolsTimelineEventCategory) && event.name === Types.Events.Name.RUN_TASK;
 }
+export function isExtensionUrl(url) {
+    return url.startsWith('extensions:') || url.startsWith('chrome-extension:');
+}
 function topLevelEventIndexEndingAfter(events, time) {
     let index = Platform.ArrayUtilities.upperBound(events, time, (time, event) => time - event.ts) - 1;
     while (index > 0 && !isTopLevelEvent(events[index])) {
@@ -450,12 +569,12 @@ function topLevelEventIndexEndingAfter(events, time) {
     }
     return Math.max(index, 0);
 }
-export function findUpdateLayoutTreeEvents(events, startTime, endTime) {
+export function findRecalcStyleEvents(events, startTime, endTime) {
     const foundEvents = [];
     const startEventIndex = topLevelEventIndexEndingAfter(events, startTime);
     for (let i = startEventIndex; i < events.length; i++) {
         const event = events[i];
-        if (!Types.Events.isUpdateLayoutTree(event)) {
+        if (!Types.Events.isRecalcStyle(event)) {
             continue;
         }
         if (event.ts >= (endTime || Infinity)) {
@@ -586,8 +705,10 @@ export function extractSampleTraceId(event) {
     }
     return event.args?.sampleTraceId ?? event.args?.data?.sampleTraceId ?? null;
 }
-// This exactly matches EntryStyles.visibleTypes. See the runtime verification in maybeInitSylesMap.
-// TODO(crbug.com/410884528)
+/**
+ * This exactly matches Trace.Styles.visibleTypes. See the runtime verification in maybeInitStylesMap.
+ * TODO(crbug.com/410884528)
+ **/
 export const VISIBLE_TRACE_EVENT_TYPES = new Set([
     Types.Events.Name.ABORT_POST_TASK_CALLBACK,
     Types.Events.Name.ANIMATION,
@@ -669,7 +790,7 @@ export const VISIBLE_TRACE_EVENT_TYPES = new Set([
     Types.Events.Name.TIMER_INSTALL,
     Types.Events.Name.TIMER_REMOVE,
     Types.Events.Name.UPDATE_LAYER_TREE,
-    Types.Events.Name.UPDATE_LAYOUT_TREE,
+    Types.Events.Name.RECALC_STYLE,
     Types.Events.Name.USER_TIMING,
     Types.Events.Name.V8_CONSOLE_RUN_TASK,
     Types.Events.Name.WASM_CACHED_MODULE,