chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -944,13 +944,20 @@ export class Overlays extends EventTarget {
         return;
       }
 
+      const fromEntryParams = this.#positionEntryBorderOutlineType(entriesToConnect.entryFrom, entryFromWrapper);
+
+      if (!fromEntryParams) {
+        // Something went wrong, we should always have parameters for the 'from' entry
+        return;
+      }
+
       const {
         entryHeight: fromEntryHeight,
         entryWidth: fromEntryWidth,
         cutOffHeight: fromCutOffHeight = 0,
         x: fromEntryX,
         y: fromEntryY,
-      } = this.#positionEntryBorderOutlineType(entriesToConnect.entryFrom, entryFromWrapper) || {};
+      } = fromEntryParams;
 
       const entryFromVisibility = this.entryIsVisibleOnChart(entryFrom) && !fromEntryInCollapsedTrack;
       const entryToVisibility = entryTo ? this.entryIsVisibleOnChart(entryTo) && !toEntryInCollapsedTrack : false;
@@ -972,36 +979,38 @@ export class Overlays extends EventTarget {
         toEntryVisibility: entryToVisibility,
       };
 
-      if (fromEntryHeight && fromEntryWidth && fromEntryX && fromEntryY) {
-        component.fromEntryCoordinateAndDimentions =
-            {x: fromEntryX, y: yPixelForFromArrow, length: fromEntryWidth, height: fromEntryHeight - fromCutOffHeight};
-      }
+      component.fromEntryCoordinateAndDimentions =
+          {x: fromEntryX, y: yPixelForFromArrow, length: fromEntryWidth, height: fromEntryHeight - fromCutOffHeight};
 
-      const entryToWrapper = component.entryToWrapper();
       // If entryTo exists, pass the coordinates and dimentions of the entry that the arrow snaps to.
       // If it does not, the event tracking mouse coordinates updates 'to coordinates' so the arrow follows the mouse instead.
+      const entryToWrapper = component.entryToWrapper();
+
       if (entryTo && entryToWrapper) {
+        const toEntryParams = this.#positionEntryBorderOutlineType(entryTo, entryToWrapper);
+
+        if (!toEntryParams) {
+          // Something went wrong, we should have those parameters if 'to' entry exists
+          return;
+        }
         const {
           entryHeight: toEntryHeight,
           entryWidth: toEntryWidth,
           cutOffHeight: toCutOffHeight = 0,
           x: toEntryX,
           y: toEntryY,
-        } = this.#positionEntryBorderOutlineType(entryTo, entryToWrapper) || {};
-
-        if (toEntryHeight && toEntryX) {
-          // If the 'to' entry is visible, set the entry Y as an arrow coordinate to point ot. If not, get the canvas edge coordate to point the arrow to.
-          const yPixelForToArrow =
-              ((this.entryIsVisibleOnChart(entryTo)) ? toEntryY : this.#yCoordinateForNotVisibleEntry(entryTo)) ?? 0;
-
-          component.toEntryCoordinateAndDimentions = {
-            x: toEntryX,
-            y: yPixelForToArrow,
-            length: toEntryWidth,
-            height: toEntryHeight - toCutOffHeight,
-          };
-        }
+        } = toEntryParams;
+
+        // If the 'to' entry is visible, set the entry Y as an arrow coordinate to point to. If not, get the canvas edge coordate to point the arrow to.
+        const yPixelForToArrow =
+            this.entryIsVisibleOnChart(entryTo) ? toEntryY : this.#yCoordinateForNotVisibleEntry(entryTo) ?? 0;
 
+        component.toEntryCoordinateAndDimentions = {
+          x: toEntryX,
+          y: yPixelForToArrow,
+          length: toEntryWidth,
+          height: toEntryHeight - toCutOffHeight,
+        };
       } else if (this.#lastMouseOffsetX && this.#lastMouseOffsetY) {
         // The second coordinate for in progress link gets updated on mousemove
         this.#entriesLinkInProgress = overlay;
@@ -1098,7 +1107,7 @@ export class Overlays extends EventTarget {
     const {entryHeight, entryWidth, cutOffHeight = 0, x, y} =
         this.#positionEntryBorderOutlineType(overlay.entry, entryWrapper) || {};
 
-    if (!entryHeight || !entryWidth || !x || !y) {
+    if (!entryHeight || !entryWidth || x === null || !y) {
       return null;
     }
 
@@ -1196,8 +1205,10 @@ export class Overlays extends EventTarget {
     const chartName = chartForEntry(entry);
     let x = this.xPixelForEventStartOnChart(entry);
     let y = this.yPixelForEventOnChart(entry);
+    const chartWidth = (chartName === 'main') ? this.#dimensions.charts.main?.widthPixels :
+                                                this.#dimensions.charts.network?.widthPixels;
 
-    if (x === null || y === null) {
+    if (x === null || y === null || !chartWidth) {
       return null;
     }
 
@@ -1231,6 +1242,21 @@ export class Overlays extends EventTarget {
       widthPixels = customPos.width;
     }
 
+    // Calculate the visible overlay width by substracting the entry width that is outside of the flamechart width
+    const cutOffRight = (x + widthPixels > chartWidth) ? (x + widthPixels) - chartWidth : null;
+    const cutOffLeft = (x < 0) ? Math.abs(x) : null;
+    element.classList.toggle('cut-off-right', cutOffRight !== null);
+
+    if (cutOffRight) {
+      widthPixels = widthPixels - cutOffRight;
+    }
+
+    if (cutOffLeft) {
+      // If the entry is cut off from the left, move its beginning to the left most part of the flamechart
+      x = 0;
+      widthPixels = widthPixels - cutOffLeft;
+    }
+
     // The entry selected overlay is always at least 2px wide.
     const finalWidth = Math.max(2, widthPixels);
     element.style.width = `${finalWidth}px`;

package/front_end/panels/timeline/overlays/components/entriesLinkOverlay.css

@@ -24,6 +24,14 @@
   &.cut-off-bottom {
     border-bottom: none;
   }
+
+  &.cut-off-right {
+    border-right: none;
+  }
+
+  &.cut-off-left {
+    border-left: none;
+  }
 }
 
 .entry-is-not-source {

package/front_end/panels/timeline/overlays/components/entryLabelOverlay.css

@@ -35,4 +35,20 @@
 .entry-highlight-wrapper {
   box-sizing: border-box;
   border: 2px solid var(--sys-color-on-surface);
+
+  &.cut-off-top {
+    border-top: none;
+  }
+
+  &.cut-off-bottom {
+    border-bottom: none;
+  }
+
+  &.cut-off-right {
+    border-right: none;
+  }
+
+  &.cut-off-left {
+    border-left: none;
+  }
 }

package/front_end/panels/timeline/timeline-meta.ts

@@ -355,3 +355,14 @@ Common.Revealer.registerRevealer({
     return new Timeline.TimelinePanel.TraceRevealer();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return [SDK.TraceObject.RevealableEvent];
+  },
+  destination: Common.Revealer.RevealerDestination.TIMELINE_PANEL,
+  async loadRevealer() {
+    const Timeline = await loadTimelineModule();
+    return new Timeline.TimelinePanel.EventRevealer();
+  },
+});

package/front_end/panels/timeline/timelineFlameChartView.css

@@ -40,6 +40,14 @@
   &.cut-off-bottom {
     border-bottom: none;
   }
+
+  &.cut-off-right {
+    border-right: none;
+  }
+
+  &.cut-off-left {
+    border-left: none;
+  }
 }
 
 .overlay-type-ENTRY_OUTLINE {
@@ -75,6 +83,14 @@
   &.cut-off-top {
     border-top: none;
   }
+
+  &.cut-off-right {
+    border-right: none;
+  }
+
+  &.cut-off-left {
+    border-left: none;
+  }
 }
 
 .overlay-type-ENTRIES_LINK {

package/front_end/panels/timeline/track_appenders/AnimationsTrackAppender.test.ts

@@ -11,8 +11,7 @@ import * as Timeline from '../timeline.js';
 
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
-    entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[]):
+    entryData: Trace.Types.Events.Event[], entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[]):
     Timeline.AnimationsTrackAppender.AnimationsTrackAppender {
   const compatibilityTracksAppender = new Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender(
       flameChartData, parsedTrace, entryData, entryTypeByLevel);
@@ -22,7 +21,7 @@ function initTrackAppender(
 describeWithEnvironment('AnimationsTrackAppender', function() {
   let parsedTrace: Trace.Handlers.Types.ParsedTrace;
   let animationsTrackAppender: Timeline.AnimationsTrackAppender.AnimationsTrackAppender;
-  let entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  let entryData: Trace.Types.Events.Event[] = [];
   let flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
   let entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
 

package/front_end/panels/timeline/track_appenders/AppenderUtils.test.ts

@@ -37,10 +37,6 @@ describeWithEnvironment('AppenderUtils', () => {
   });
 
   describe('buildTrackHeader', () => {
-    const legends: PerfUI.FlameChart.Legend[] = [{
-      color: 'yellow',
-      category: 'test',
-    }];
     const trackHeader = {
       startLevel: 0,
       name: 'Header Name',
@@ -48,7 +44,6 @@ describeWithEnvironment('AppenderUtils', () => {
       selectable: true,
       expanded: true,
       showStackContextMenu: true,
-      legends,
       jslogContext: 'animations',
     } as PerfUI.FlameChart.Group;
 
@@ -56,7 +51,7 @@ describeWithEnvironment('AppenderUtils', () => {
       const builtHeader = Timeline.AppenderUtils.buildTrackHeader(
           Timeline.CompatibilityTracksAppender.VisualLoggingTrackName.ANIMATIONS,
           /* startLevel= */ 0, 'Header Name', Timeline.AppenderUtils.buildGroupStyle(), /* selectable= */ true,
-          /* expanded= */ true, /* showStackContextMenu= */ true, legends);
+          /* expanded= */ true, /* showStackContextMenu= */ true);
       assert.deepEqual(builtHeader, trackHeader);
     });
   });

package/front_end/panels/timeline/track_appenders/CompatibilityTracksAppender.test.ts

@@ -12,7 +12,7 @@ import * as Timeline from '../timeline.js';
 describeWithEnvironment('CompatibilityTracksAppender', function() {
   let parsedTrace: Trace.Handlers.Types.ParsedTrace;
   let tracksAppender: Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender;
-  let entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  let entryData: Trace.Types.Events.Event[] = [];
   let flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
   let entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
 

package/front_end/panels/timeline/track_appenders/ExtensionTrackAppender.test.ts

@@ -16,8 +16,7 @@ import * as Timeline from '../timeline.js';
 
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
-    entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[]):
+    entryData: Trace.Types.Events.Event[], entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[]):
     Timeline.ExtensionTrackAppender.ExtensionTrackAppender[] {
   Timeline.ExtensionDataGatherer.ExtensionDataGatherer.instance().modelChanged(parsedTrace);
   const compatibilityTracksAppender = new Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender(
@@ -30,7 +29,7 @@ function initTrackAppender(
 describeWithEnvironment('ExtensionTrackAppender', function() {
   let parsedTrace: Trace.Handlers.Types.ParsedTrace;
   let extensionTrackAppenders: Timeline.ExtensionTrackAppender.ExtensionTrackAppender[];
-  let entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  let entryData: Trace.Types.Events.Event[] = [];
   let flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
   let entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
 
@@ -147,8 +146,8 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
       styleElement.id = 'fake-perf-panel-colors';
       styleElement.textContent = `
         :root {
-          --ref-palette-primary70: rgb(4 4 4);
-          --ref-palette-tertiary70: rgb(10 10 10);
+          --ref-palette-blue70: rgb(4 4 4);
+          --ref-palette-green70: rgb(10 10 10);
         }
       `;
       document.documentElement.appendChild(styleElement);
@@ -168,12 +167,12 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
       for (const event of allExtensionTrackEntries) {
         assert.strictEqual(extensionTrackAppenders[0].titleForEvent(event), event.name);
         if (event.args.color === 'tertiary') {
-          // "tertiary" color category is mapped to --ref-palette-tertiary70
+          // "tertiary" color category is mapped to --ref-palette-green70
           // which is faked out to 10, 10, 10
           assert.strictEqual(extensionTrackAppenders[0].colorForEvent(event), 'rgb(10 10 10)');
         } else {
           // Unknown colors are mapped to "primary" by default, and
-          // "primary" color category is mapped to --ref-palette-primary70
+          // "primary" color category is mapped to --ref-palette-blue70
           // which is faked out to 4, 4, 4
           assert.strictEqual(extensionTrackAppenders[0].colorForEvent(event), 'rgb(4 4 4)');
         }
@@ -197,7 +196,7 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
         },
         cat: 'devtools.extension',
       } as unknown as Trace.Types.Events.Event;
-      // "primary" color category is mapped to --ref-palette-primary70
+      // "primary" color category is mapped to --ref-palette-blue70
       // which is faked out to 4, 4, 4
       assert.strictEqual(extensionTrackAppenders[0].colorForEvent(mockExtensionEntryNoColor), 'rgb(4 4 4)');
       assert.strictEqual(extensionTrackAppenders[0].colorForEvent(mockExtensionEntryUnknownColor), 'rgb(4 4 4)');

package/front_end/panels/timeline/track_appenders/GPUTrackAppender.test.ts

@@ -12,7 +12,7 @@ import * as Timeline from '../timeline.js';
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
     parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+    entryData: Trace.Types.Events.Event[],
     entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
     ): Timeline.GPUTrackAppender.GPUTrackAppender {
   const compatibilityTracksAppender = new Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender(
@@ -23,7 +23,7 @@ function initTrackAppender(
 describeWithEnvironment('GPUTrackAppender', function() {
   let parsedTrace: Trace.Handlers.Types.ParsedTrace;
   let gpuTrackAppender: Timeline.GPUTrackAppender.GPUTrackAppender;
-  let entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  let entryData: Trace.Types.Events.Event[] = [];
   let flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
   let entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
 

package/front_end/panels/timeline/track_appenders/InteractionsTrackAppender.test.ts

@@ -11,7 +11,7 @@ import * as Timeline from '../timeline.js';
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
     parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+    entryData: Trace.Types.Events.Event[],
     entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
     ): Timeline.InteractionsTrackAppender.InteractionsTrackAppender {
   const compatibilityTracksAppender = new Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender(
@@ -24,11 +24,11 @@ describeWithEnvironment('InteractionsTrackAppender', function() {
     entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
     interactionsTrackAppender: Timeline.InteractionsTrackAppender.InteractionsTrackAppender,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+    entryData: Trace.Types.Events.Event[],
     parsedTrace: Readonly<Trace.Handlers.Types.ParsedTrace>,
   }> {
     const entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
-    const entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+    const entryData: Trace.Types.Events.Event[] = [];
     const flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
     const {parsedTrace} = await TraceLoader.traceEngine(context, trace);
     const interactionsTrackAppender = initTrackAppender(flameChartData, parsedTrace, entryData, entryTypeByLevel);

package/front_end/panels/timeline/track_appenders/LayoutShiftsTrackAppender.test.ts

@@ -10,8 +10,7 @@ import * as Timeline from '../timeline.js';
 
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
-    entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[]):
+    entryData: Trace.Types.Events.Event[], entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[]):
     Timeline.LayoutShiftsTrackAppender.LayoutShiftsTrackAppender {
   const compatibilityTracksAppender = new Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender(
       flameChartData, parsedTrace, entryData, entryTypeByLevel);
@@ -23,11 +22,11 @@ describeWithEnvironment('LayoutShiftsTrackAppender', function() {
     entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
     layoutShiftsTrackAppender: Timeline.LayoutShiftsTrackAppender.LayoutShiftsTrackAppender,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+    entryData: Trace.Types.Events.Event[],
     parsedTrace: Readonly<Trace.Handlers.Types.ParsedTrace>,
   }> {
     const entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
-    const entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+    const entryData: Trace.Types.Events.Event[] = [];
     const flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
     const {parsedTrace} = await TraceLoader.traceEngine(context, trace);
     const layoutShiftsTrackAppender = initTrackAppender(flameChartData, parsedTrace, entryData, entryTypeByLevel);

package/front_end/panels/timeline/track_appenders/ServerTimingsTrackAppender.test.ts

@@ -12,8 +12,7 @@ import * as Timeline from '../timeline.js';
 
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
-    entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[]):
+    entryData: Trace.Types.Events.Event[], entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[]):
     Timeline.ServerTimingsTrackAppender.ServerTimingsTrackAppender {
   const compatibilityTracksAppender = new Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender(
       flameChartData, parsedTrace, entryData, entryTypeByLevel);
@@ -23,7 +22,7 @@ function initTrackAppender(
 describeWithEnvironment('ServerTimingsTrackAppender', function() {
   let parsedTrace: Trace.Handlers.Types.ParsedTrace;
   let serverTimingsTrackAppender: Timeline.ServerTimingsTrackAppender.ServerTimingsTrackAppender;
-  let entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  let entryData: Trace.Types.Events.Event[] = [];
   let flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
   let entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
 

package/front_end/panels/timeline/track_appenders/ThreadAppender.test.ts

@@ -21,7 +21,7 @@ import * as Timeline from '../timeline.js';
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
     parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+    entryData: Trace.Types.Events.Event[],
     entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
     ): Timeline.ThreadAppender.ThreadAppender[] {
   setupIgnoreListManagerEnvironment();
@@ -33,11 +33,11 @@ async function renderThreadAppendersFromTrace(context: Mocha.Context|Mocha.Suite
   entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
   flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
   threadAppenders: Timeline.ThreadAppender.ThreadAppender[],
-  entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+  entryData: Trace.Types.Events.Event[],
   parsedTrace: Readonly<Trace.Handlers.Types.ParsedTrace>,
 }> {
   const entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
-  const entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  const entryData: Trace.Types.Events.Event[] = [];
   const flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
   const {parsedTrace} = await TraceLoader.traceEngine(context, trace);
   const threadAppenders = initTrackAppender(flameChartData, parsedTrace, entryData, entryTypeByLevel);
@@ -58,10 +58,10 @@ function renderThreadAppendersFromParsedData(parsedTrace: Trace.Handlers.Types.P
   entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
   flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
   threadAppenders: Timeline.ThreadAppender.ThreadAppender[],
-  entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+  entryData: Trace.Types.Events.Event[],
 } {
   const entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
-  const entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  const entryData: Trace.Types.Events.Event[] = [];
   const flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
 
   const threadAppenders = initTrackAppender(flameChartData, parsedTrace, entryData, entryTypeByLevel);
@@ -477,11 +477,6 @@ describeWithEnvironment('ThreadAppender', function() {
       ignoreListManager.ignoreListURL(SCRIPT_TO_IGNORE);
       const {entryData, flameChartData, threadAppenders} = renderThreadAppendersFromParsedData(mockParsedTrace);
       const entryDataNames = entryData.map(entry => {
-        const regularEvent =
-            Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider.timelineEntryIsTraceEvent(entry);
-        if (!regularEvent) {
-          return 'Unknown type';
-        }
         if (Trace.Types.Events.isProfileCall(entry)) {
           return entry.callFrame.functionName;
         }

package/front_end/panels/timeline/track_appenders/TimingsTrackAppender.test.ts

@@ -12,7 +12,7 @@ import * as Timeline from '../timeline.js';
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
     parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
+    entryData: Trace.Types.Events.Event[],
     entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
     ): Timeline.TimingsTrackAppender.TimingsTrackAppender {
   Timeline.ExtensionDataGatherer.ExtensionDataGatherer.instance().modelChanged(parsedTrace);
@@ -24,7 +24,7 @@ function initTrackAppender(
 describeWithEnvironment('TimingTrackAppender', function() {
   let parsedTrace: Trace.Handlers.Types.ParsedTrace;
   let timingsTrackAppender: Timeline.TimingsTrackAppender.TimingsTrackAppender;
-  let entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  let entryData: Trace.Types.Events.Event[] = [];
   let flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
   let entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
   beforeEach(async function() {
@@ -298,7 +298,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
       styleElement.id = 'fake-perf-panel-colors';
       styleElement.textContent = `
         :root {
-          --ref-palette-primary70: rgb(4 4 4);
+          --ref-palette-blue70: rgb(4 4 4);
           --ref-palette-error60: rgb(10 10 10);
         }
       `;
@@ -336,7 +336,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
           assert.strictEqual(timingsTrackAppender.colorForEvent(event), 'rgb(10 10 10)');
         } else {
           // Unknown colors are mapped to "primary" by default, and
-          // "primary" color category is mapped to --ref-palette-primary70
+          // "primary" color category is mapped to --ref-palette-blue70
           // which is faked out to 4, 4, 4
           assert.strictEqual(timingsTrackAppender.colorForEvent(event), 'rgb(4 4 4)');
         }
@@ -357,7 +357,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
         },
         cat: 'devtools.extension',
       } as unknown as Trace.Types.Events.Event;
-      // "primary" color category is mapped to --ref-palette-primary70
+      // "primary" color category is mapped to --ref-palette-blue70
       // which is faked out to 4, 4, 4
       assert.strictEqual(timingsTrackAppender.colorForEvent(mockExtensionEntryNoColor), 'rgb(4 4 4)');
       assert.strictEqual(timingsTrackAppender.colorForEvent(mockExtensionEntryUnknownColor), 'rgb(4 4 4)');

package/front_end/panels/timeline/utils/AICallTree.test.ts

@@ -0,0 +1,80 @@
+// Copyright 2024 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 {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
+
+import * as Utils from './utils.js';
+
+describeWithEnvironment('AICallTree', () => {
+  it('serializes a simple tree', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-outermost-frames.json.gz');
+    const mainEvents = parsedTrace.Renderer.allTraceEntries;
+    // A function '_ds.q.ns'. Has a very small tree by default.
+    const selectedEvent = mainEvents.find(event => event.ts === 465457308823);
+    if (!selectedEvent) {
+      throw new Error('Could not find expected event.');
+    }
+    const callTree = Utils.AICallTree.AICallTree.from(selectedEvent, mainEvents, parsedTrace);
+    const expectedData = '\n' +
+        `
+
+# All URL #s:
+
+  * 0: https://www.gstatic.com/devrel-devsite/prod/vafe2e13ca17bb026e70df42a2ead1c8192750e86a12923a88eda839025dabf95/js/devsite_app_module.js
+
+# Call tree:
+
+Node: 1 – Task
+dur: 0.2
+Children:
+  * 2 – Timer fired
+
+Node: 2 – Timer fired
+dur: 0.2
+Children:
+  * 3 – Function call
+
+Node: 3 – Function call
+dur: 0.2
+URL #: 0
+Children:
+  * 4 – _ds.q.ns
+
+Node: 4 – _ds.q.ns
+Selected: true
+dur: 0.2
+URL #: 0
+Children:
+  * 5 – clearTimeout
+
+Node: 5 – clearTimeout
+dur: 0.2
+self: 0
+Children:
+  * 6 – Recalculate style
+
+Node: 6 – Recalculate style
+dur: 0.2
+self: 0.2
+`.trim();
+    assert.strictEqual(callTree.serialize(), expectedData);
+  });
+
+  it('serializes a tree with lots of recursion', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'one-second-interaction.json.gz');
+    const mainEvents = parsedTrace.Renderer.allTraceEntries;
+    const selectedEvent = mainEvents.find(event => event.ts === 141251951589);
+    if (!selectedEvent) {
+      throw new Error('Could not find expected event.');
+    }
+    const callTree = Utils.AICallTree.AICallTree.from(selectedEvent, mainEvents, parsedTrace);
+
+    // We don't need to validate the whole tree, just that it has recursion
+    const treeStr = callTree.serialize();
+    const lines = treeStr.split('\n');
+    const fibCallCount = lines.filter(line => line.includes('fibonacci')).length;
+    assert.isTrue(fibCallCount > 10);
+  });
+});