@paulirish/trace_engine 0.0.57 → 0.0.58

package/models/trace/types/Overlays.d.ts

@@ -1,3 +1,4 @@
+// import type * as UI from '../../../ui/legacy/legacy.js';
 // import type * as Lit from '../../../ui/lit/lit.js';
 import type { EntriesLinkState } from './File.js';
 import type { Micro, TraceWindowMicro } from './Timing.js';
@@ -104,7 +105,11 @@ export interface TimingsMarkerFieldResult {
     value: Micro;
     pageScope: 'url' | 'origin';
 }
+export interface BottomInfoBar {
+    type: 'BOTTOM_INFO_BAR';
+    infobar: any;
+}
 /**
  * All supported overlay types.
  */
-export type Overlay = EntrySelected | EntryOutline | TimeRangeLabel | EntryLabel | EntriesLink | TimespanBreakdown | TimestampMarker | CandyStripedTimeRange | TimingsMarker;
+export type Overlay = EntrySelected | EntryOutline | TimeRangeLabel | EntryLabel | EntriesLink | TimespanBreakdown | TimestampMarker | CandyStripedTimeRange | TimingsMarker | BottomInfoBar;

package/models/trace/types/Overlays.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlays.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/types/Overlays.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B","sourcesContent":["// Copyright 2025 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Lit from '../../../ui/lit/lit.js';\n\nimport type {EntriesLinkState} from './File.js';\nimport type {Micro, TraceWindowMicro} from './Timing.js';\nimport type {Event, LegacyTimelineFrame, PageLoadEvent} from './TraceEvents.js';\n\n/**\n * Represents which flamechart an entry is rendered in.\n * We need to know this because when we place an overlay for an entry we need\n * to adjust its Y value if it's in the main chart which is drawn below the\n * network chart\n */\nexport type EntryChartLocation = 'main'|'network';\n\n/**\n * You can add overlays to trace events, but also right now frames are drawn on\n * the timeline but they are not trace events, so we need to allow for that.\n * In the future when the frames track has been migrated to be powered by\n * animation frames (crbug.com/345144583), we can remove the requirement to\n * support TimelineFrame instances (which themselves will be removed from the\n * codebase.)\n */\nexport type OverlayEntry = Event|LegacyTimelineFrame;\n\n/**\n * Represents when a user has selected an entry in the timeline\n */\nexport interface EntrySelected {\n  type: 'ENTRY_SELECTED';\n  entry: OverlayEntry;\n}\n\n/**\n * Drawn around an entry when we want to highlight it to the user.\n */\nexport interface EntryOutline {\n  type: 'ENTRY_OUTLINE';\n  entry: OverlayEntry;\n  outlineReason: 'ERROR'|'INFO';\n}\n\n/**\n * Represents an object created when a user creates a label for an entry in the timeline.\n */\nexport interface EntryLabel {\n  type: 'ENTRY_LABEL';\n  entry: OverlayEntry;\n  label: string;\n}\n\nexport interface EntriesLink {\n  type: 'ENTRIES_LINK';\n  state: EntriesLinkState;\n  entryFrom: OverlayEntry;\n  entryTo?: OverlayEntry;\n}\n\n/**\n * Represents a time range on the trace. Also used when the user shift+clicks\n * and drags to create a time range.\n */\nexport interface TimeRangeLabel {\n  type: 'TIME_RANGE';\n  bounds: TraceWindowMicro;\n  label: string;\n  showDuration: boolean;\n}\n\n/**\n * Used to highlight with a red-candy stripe a time range. It takes an entry\n * because this entry is the row that will be used to place the candy stripe,\n * and its height will be set to the height of that row.\n */\nexport interface CandyStripedTimeRange {\n  type: 'CANDY_STRIPED_TIME_RANGE';\n  bounds: TraceWindowMicro;\n  entry: Event;\n}\n\n/**\n * An EntryBreakdown, or section, that makes up a TimespanBreakdown.\n */\nexport interface TimespanBreakdownEntryBreakdown {\n  bounds: TraceWindowMicro;\n  label: string|Lit.LitTemplate;\n  showDuration: boolean;\n}\n\n/**\n * Represents a timespan on a trace broken down into parts. Each part has a label to it.\n * If an entry is defined, the breakdown will be vertically positioned based on it.\n */\nexport interface TimespanBreakdown {\n  type: 'TIMESPAN_BREAKDOWN';\n  sections: TimespanBreakdownEntryBreakdown[];\n  entry?: Event;\n  renderLocation?: 'BOTTOM_OF_TIMELINE'|'BELOW_EVENT'|'ABOVE_EVENT';\n}\n\nexport interface TimestampMarker {\n  type: 'TIMESTAMP_MARKER';\n  timestamp: Micro;\n}\n\n/**\n * Represents a timings marker. This has a line that runs up the whole canvas.\n * We can hold an array of entries, in the case we want to hold more than one with the same timestamp.\n * The adjusted timestamp being the timestamp for the event adjusted by closest navigation.\n */\nexport interface TimingsMarker {\n  type: 'TIMINGS_MARKER';\n  entries: PageLoadEvent[];\n  entryToFieldResult: Map<PageLoadEvent, TimingsMarkerFieldResult>;\n  adjustedTimestamp: Micro;\n}\n\nexport interface TimingsMarkerFieldResult {\n  value: Micro;\n  pageScope: 'url'|'origin';\n}\n\n/**\n * All supported overlay types.\n */\nexport type Overlay = EntrySelected|EntryOutline|TimeRangeLabel|EntryLabel|EntriesLink|TimespanBreakdown|\n    TimestampMarker|CandyStripedTimeRange|TimingsMarker;\n"]}
+{"version":3,"file":"Overlays.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/types/Overlays.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B","sourcesContent":["// Copyright 2025 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as UI from '../../../ui/legacy/legacy.js';\nimport type * as Lit from '../../../ui/lit/lit.js';\n\nimport type {EntriesLinkState} from './File.js';\nimport type {Micro, TraceWindowMicro} from './Timing.js';\nimport type {Event, LegacyTimelineFrame, PageLoadEvent} from './TraceEvents.js';\n\n/**\n * Represents which flamechart an entry is rendered in.\n * We need to know this because when we place an overlay for an entry we need\n * to adjust its Y value if it's in the main chart which is drawn below the\n * network chart\n */\nexport type EntryChartLocation = 'main'|'network';\n\n/**\n * You can add overlays to trace events, but also right now frames are drawn on\n * the timeline but they are not trace events, so we need to allow for that.\n * In the future when the frames track has been migrated to be powered by\n * animation frames (crbug.com/345144583), we can remove the requirement to\n * support TimelineFrame instances (which themselves will be removed from the\n * codebase.)\n */\nexport type OverlayEntry = Event|LegacyTimelineFrame;\n\n/**\n * Represents when a user has selected an entry in the timeline\n */\nexport interface EntrySelected {\n  type: 'ENTRY_SELECTED';\n  entry: OverlayEntry;\n}\n\n/**\n * Drawn around an entry when we want to highlight it to the user.\n */\nexport interface EntryOutline {\n  type: 'ENTRY_OUTLINE';\n  entry: OverlayEntry;\n  outlineReason: 'ERROR'|'INFO';\n}\n\n/**\n * Represents an object created when a user creates a label for an entry in the timeline.\n */\nexport interface EntryLabel {\n  type: 'ENTRY_LABEL';\n  entry: OverlayEntry;\n  label: string;\n}\n\nexport interface EntriesLink {\n  type: 'ENTRIES_LINK';\n  state: EntriesLinkState;\n  entryFrom: OverlayEntry;\n  entryTo?: OverlayEntry;\n}\n\n/**\n * Represents a time range on the trace. Also used when the user shift+clicks\n * and drags to create a time range.\n */\nexport interface TimeRangeLabel {\n  type: 'TIME_RANGE';\n  bounds: TraceWindowMicro;\n  label: string;\n  showDuration: boolean;\n}\n\n/**\n * Used to highlight with a red-candy stripe a time range. It takes an entry\n * because this entry is the row that will be used to place the candy stripe,\n * and its height will be set to the height of that row.\n */\nexport interface CandyStripedTimeRange {\n  type: 'CANDY_STRIPED_TIME_RANGE';\n  bounds: TraceWindowMicro;\n  entry: Event;\n}\n\n/**\n * An EntryBreakdown, or section, that makes up a TimespanBreakdown.\n */\nexport interface TimespanBreakdownEntryBreakdown {\n  bounds: TraceWindowMicro;\n  label: string|Lit.LitTemplate;\n  showDuration: boolean;\n}\n\n/**\n * Represents a timespan on a trace broken down into parts. Each part has a label to it.\n * If an entry is defined, the breakdown will be vertically positioned based on it.\n */\nexport interface TimespanBreakdown {\n  type: 'TIMESPAN_BREAKDOWN';\n  sections: TimespanBreakdownEntryBreakdown[];\n  entry?: Event;\n  renderLocation?: 'BOTTOM_OF_TIMELINE'|'BELOW_EVENT'|'ABOVE_EVENT';\n}\n\nexport interface TimestampMarker {\n  type: 'TIMESTAMP_MARKER';\n  timestamp: Micro;\n}\n\n/**\n * Represents a timings marker. This has a line that runs up the whole canvas.\n * We can hold an array of entries, in the case we want to hold more than one with the same timestamp.\n * The adjusted timestamp being the timestamp for the event adjusted by closest navigation.\n */\nexport interface TimingsMarker {\n  type: 'TIMINGS_MARKER';\n  entries: PageLoadEvent[];\n  entryToFieldResult: Map<PageLoadEvent, TimingsMarkerFieldResult>;\n  adjustedTimestamp: Micro;\n}\n\nexport interface TimingsMarkerFieldResult {\n  value: Micro;\n  pageScope: 'url'|'origin';\n}\n\nexport interface BottomInfoBar {\n  type: 'BOTTOM_INFO_BAR';\n  infobar: UI.Infobar.Infobar;\n}\n\n/**\n * All supported overlay types.\n */\nexport type Overlay = EntrySelected|EntryOutline|TimeRangeLabel|EntryLabel|EntriesLink|TimespanBreakdown|\n    TimestampMarker|CandyStripedTimeRange|TimingsMarker|BottomInfoBar;\n"]}

package/models/trace/types/TraceEvents.d.ts

@@ -1194,8 +1194,9 @@ export interface UserTimingMeasure extends Event {
         traceId: number;
     };
 }
-/** ChromeFrameReporter args for PipelineReporter event.
-    Matching proto: https://source.chromium.org/chromium/chromium/src/+/main:third_party/perfetto/protos/perfetto/trace/track_event/chrome_frame_reporter.proto
+/**
+ * ChromeFrameReporter args for PipelineReporter event.
+ * Matching proto: https://source.chromium.org/chromium/chromium/src/+/main:third_party/perfetto/protos/perfetto/trace/track_event/chrome_frame_reporter.proto
  */
 interface ChromeFrameReporter {
     state: State;
@@ -1203,11 +1204,15 @@ interface ChromeFrameReporter {
     /** The reason is set only if |state| is not |STATE_UPDATED_ALL|. */
     reason: FrameDropReason;
     frame_source: number;
-    /**  Identifies a BeginFrameArgs (along with the source_id).
-         See comments in components/viz/common/frame_sinks/begin_frame_args.h. */
+    /**
+     * Identifies a BeginFrameArgs (along with the source_id).
+     * See comments in components/viz/common/frame_sinks/begin_frame_args.h.
+     */
     frame_sequence: number;
-    /**  If this is a dropped frame (i.e. if |state| is set to |STATE_DROPPED| or
-         |STATE_PRESENTED_PARTIAL|), then indicates whether this frame impacts smoothness. */
+    /**
+     * If this is a dropped frame (i.e. if |state| is set to |STATE_DROPPED| or
+     * |STATE_PRESENTED_PARTIAL|), then indicates whether this frame impacts smoothness.
+     */
     affects_smoothness: boolean;
     /** The type of active scroll. */
     scroll_state: ScrollState;
@@ -1217,48 +1222,66 @@ interface ChromeFrameReporter {
     has_compositor_animation: boolean;
     /** If any touch-driven UX (not scroll) is active during this frame. */
     has_smooth_input_main: boolean;
-    /**  Whether the frame contained any missing content (i.e. whether there was
-         checkerboarding in the frame). */
+    /**
+     * Whether the frame contained any missing content (i.e. whether there was
+     * checkerboarding in the frame).
+     */
     has_missing_content: boolean;
     /** The id of layer_tree_host that the frame has been produced for. */
     layer_tree_host_id: number;
     /** If total latency of PipelineReporter exceeds a certain limit. */
     has_high_latency: boolean;
-    /**  Indicate if the frame is "FORKED" (i.e. a PipelineReporter event starts at
-         the same frame sequence as another PipelineReporter) or "BACKFILL"
-         (i.e. dropped frames when there are no partial compositor updates). */
+    /**
+     *  Indicate if the frame is "FORKED" (i.e. a PipelineReporter event starts at
+     * the same frame sequence as another PipelineReporter) or "BACKFILL"
+     * (i.e. dropped frames when there are no partial compositor updates).
+     */
     frame_type: FrameType;
-    /**  The breakdown stage of PipelineReporter that is most likely accountable for
-         high latency. */
+    /**
+     * The breakdown stage of PipelineReporter that is most likely accountable for
+     * high latency.
+     */
     high_latency_contribution_stage: string[];
 }
 declare const enum State {
     /** The frame did not have any updates to present. **/
     STATE_NO_UPDATE_DESIRED = "STATE_NO_UPDATE_DESIRED",
-    /**  The frame presented all the desired updates (i.e. any updates requested
-         from both the compositor thread and main-threads were handled). **/
+    /**
+     * The frame presented all the desired updates (i.e. any updates requested
+     * from both the compositor thread and main-threads were handled). *
+     */
     STATE_PRESENTED_ALL = "STATE_PRESENTED_ALL",
-    /**  The frame was presented with some updates, but also missed some updates
-         (e.g. missed updates from the main-thread, but included updates from the
-          compositor thread). **/
+    /**
+     *  The frame was presented with some updates, but also missed some updates
+     * (e.g. missed updates from the main-thread, but included updates from the
+     * compositor thread). *
+     */
     STATE_PRESENTED_PARTIAL = "STATE_PRESENTED_PARTIAL",
-    /**  The frame was dropped, i.e. some updates were desired for the frame, but
-         was not presented. **/
+    /**
+     * The frame was dropped, i.e. some updates were desired for the frame, but
+     * was not presented. *
+     */
     STATE_DROPPED = "STATE_DROPPED"
 }
 declare const enum FrameDropReason {
     REASON_UNSPECIFIED = "REASON_UNSPECIFIED",
-    /**  Frame was dropped by the display-compositor.
-           The display-compositor may drop a frame some times (e.g. the frame missed
-          the deadline, or was blocked on surface-sync, etc.) **/
+    /**
+     *  Frame was dropped by the display-compositor.
+     * The display-compositor may drop a frame some times (e.g. the frame missed
+     * the deadline, or was blocked on surface-sync, etc.) *
+     */
     REASON_DISPLAY_COMPOSITOR = "REASON_DISPLAY_COMPOSITOR",
-    /**  Frame was dropped because of the main-thread.
-           The main-thread may cause a frame to be dropped, e.g. if the main-thread
-          is running expensive javascript, or doing a lot of layout updates, etc. **/
+    /**
+     *  Frame was dropped because of the main-thread.
+     * The main-thread may cause a frame to be dropped, e.g. if the main-thread
+     * is running expensive javascript, or doing a lot of layout updates, etc. *
+     */
     REASON_MAIN_THREAD = "REASON_MAIN_THREAD",
-    /**  Frame was dropped by the client compositor.
-           The client compositor can drop some frames too (e.g. attempting to
-           recover latency, missing the deadline, etc.). **/
+    /**
+     *  Frame was dropped by the client compositor.
+     * The client compositor can drop some frames too (e.g. attempting to
+     * recover latency, missing the deadline, etc.). *
+     */
     REASON_CLIENT_COMPOSITOR = "REASON_CLIENT_COMPOSITOR"
 }
 declare const enum ScrollState {
@@ -1788,6 +1811,7 @@ export interface FireAnimationFrame extends Complete {
         };
     };
 }
+export declare function isFireAnimationFrame(event: Event): event is FireAnimationFrame;
 export interface RequestAnimationFrame extends Instant {
     name: Name.REQUEST_ANIMATION_FRAME;
     args: Args & {
@@ -1832,6 +1856,7 @@ export interface RequestIdleCallback extends Instant {
         };
     };
 }
+export declare function isRequestIdleCallback(event: Event): event is RequestIdleCallback;
 export interface WebSocketCreate extends Instant {
     name: Name.WEB_SOCKET_CREATE;
     args: Args & {

package/models/trace/types/TraceEvents.js

@@ -248,7 +248,7 @@ export function isUpdateLayoutTree(event) {
     return event.name === Name.UPDATE_LAYOUT_TREE;
 }
 export function isLayout(event) {
-    return event.name === Name.LAYOUT;
+    return event.name === Name.LAYOUT && Boolean(event.args && 'beginData' in event.args);
 }
 export function isInvalidateLayout(event) {
     return event.name === Name.INVALIDATE_LAYOUT;
@@ -521,12 +521,18 @@ export function isDisplayListItemListSnapshot(event) {
 export function isLayerTreeHostImplSnapshot(event) {
     return event.name === Name.LAYER_TREE_HOST_IMPL_SNAPSHOT;
 }
+export function isFireAnimationFrame(event) {
+    return event.name === Name.FIRE_ANIMATION_FRAME;
+}
 export function isTimerInstall(event) {
     return event.name === Name.TIMER_INSTALL;
 }
 export function isTimerFire(event) {
     return event.name === Name.TIMER_FIRE;
 }
+export function isRequestIdleCallback(event) {
+    return event.name === Name.REQUEST_IDLE_CALLBACK;
+}
 export function isWebSocketCreate(event) {
     return event.name === Name.WEB_SOCKET_CREATE;
 }