chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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

@@ -150,9 +150,7 @@ describeWithEnvironment('Overlays', () => {
     // Set the visible window to be the entire trace.
     overlays.updateVisibleWindow(parsedTrace.Meta.traceBounds);
 
-    // Find an event on the main chart that is not a frame (you cannot add overlays to frames)
     const event = charts.mainProvider.eventByIndex?.(50);
-    assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
     assert.isOk(event);
     const yPixel = overlays.yPixelForEventOnChart(event);
     // The Y offset for the main chart is 233px, but we add 208px on (200px for the
@@ -197,9 +195,7 @@ describeWithEnvironment('Overlays', () => {
     // Set the visible window to be the entire trace.
     overlays.updateVisibleWindow(parsedTrace.Meta.traceBounds);
 
-    // Find an event on the main chart that is not a frame (you cannot add overlays to frames)
     const event = charts.mainProvider.eventByIndex?.(50);
-    assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
     assert.isOk(event);
     const yPixel = overlays.yPixelForEventOnChart(event);
     // The Y offset for the main chart is 233px, but we add 34px on (the height
@@ -321,7 +317,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       overlays.add({
         type: 'ENTRY_SELECTED',
@@ -390,7 +385,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       overlays.add({
         type: 'ENTRY_LABEL',
@@ -404,15 +398,15 @@ describeWithEnvironment('Overlays', () => {
       assert.isOk(overlayDOM);
     });
 
-    it('only renders one CURSOR_TIMESTAMP_MARKER as it is a singleton', async function() {
+    it('only renders one TIMESTAMP_MARKER as it is a singleton', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
       const {overlays, container} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       overlays.add({
-        type: 'CURSOR_TIMESTAMP_MARKER',
+        type: 'TIMESTAMP_MARKER',
         timestamp: parsedTrace.Meta.traceBounds.min,
       });
       overlays.add({
-        type: 'CURSOR_TIMESTAMP_MARKER',
+        type: 'TIMESTAMP_MARKER',
         timestamp: parsedTrace.Meta.traceBounds.max,
       });
       await overlays.update();
@@ -424,7 +418,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       overlays.add({
         type: 'ENTRY_LABEL',
@@ -452,7 +445,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       // Create an entry label overlay
       overlays.add({
@@ -493,7 +485,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       // Create a time range overlay with an empty label
       overlays.add({
@@ -534,7 +525,6 @@ describeWithEnvironment('Overlays', () => {
          const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
          const event = charts.mainProvider.eventByIndex?.(50);
          assert.isOk(event);
-         assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
          // Create a time range overlay with a label
          overlays.add({
@@ -574,7 +564,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       Timeline.ModificationsManager.ModificationsManager.activeManager()?.createAnnotation({
         type: 'TIME_RANGE',
@@ -767,7 +756,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       const selectedOverlay = overlays.add({
         type: 'ENTRY_SELECTED',
@@ -786,7 +774,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const timelineFrame = charts.mainProvider.eventByIndex?.(5);
       assert.isOk(timelineFrame);
-      assert.instanceOf(timelineFrame, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       overlays.add({
         type: 'ENTRY_SELECTED',
@@ -804,14 +791,12 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       overlays.add({
         type: 'ENTRY_SELECTED',
         entry: event,
       });
 
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
       const existingOverlays = overlays.overlaysForEntry(event);
       assert.deepEqual(existingOverlays, [{
                          type: 'ENTRY_SELECTED',
@@ -825,7 +810,6 @@ describeWithEnvironment('Overlays', () => {
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
 
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
       overlays.add({
         type: 'ENTRY_SELECTED',
         entry: event,
@@ -995,8 +979,8 @@ describeWithEnvironment('Overlays', () => {
     });
 
     it('defines a log for cursor timestamp marker', () => {
-      const overlay: Overlays.Overlays.CursorTimestampMarker = {
-        type: 'CURSOR_TIMESTAMP_MARKER',
+      const overlay: Overlays.Overlays.TimestampMarker = {
+        type: 'TIMESTAMP_MARKER',
         timestamp: 1_000 as Trace.Types.Timing.MicroSeconds,
       };
       const context = Overlays.Overlays.jsLogContext(overlay);

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

@@ -155,7 +155,7 @@ function traceWindowForOverlay(overlay: TimelineOverlay): Trace.Types.Timing.Tra
       }
       break;
     }
-    case 'CURSOR_TIMESTAMP_MARKER': {
+    case 'TIMESTAMP_MARKER': {
       overlayMinBounds.push(overlay.timestamp);
       break;
     }
@@ -212,7 +212,8 @@ export function entriesForOverlay(overlay: TimelineOverlay): readonly OverlayEnt
       }
       break;
     }
-    case 'CURSOR_TIMESTAMP_MARKER': {
+    case 'TIMESTAMP_MARKER': {
+      // This overlay type isn't associated to any entry, so just break here.
       break;
     }
     case 'CANDY_STRIPED_TIME_RANGE': {
@@ -255,8 +256,8 @@ export interface TimespanBreakdown {
   renderLocation?: 'BOTTOM_OF_TIMELINE'|'BELOW_EVENT'|'ABOVE_EVENT';
 }
 
-export interface CursorTimestampMarker {
-  type: 'CURSOR_TIMESTAMP_MARKER';
+export interface TimestampMarker {
+  type: 'TIMESTAMP_MARKER';
   timestamp: Trace.Types.Timing.MicroSeconds;
 }
 
@@ -264,7 +265,7 @@ export interface CursorTimestampMarker {
  * All supported overlay types.
  */
 export type TimelineOverlay = EntrySelected|EntryOutline|TimeRangeLabel|EntryLabel|EntriesLink|TimespanBreakdown|
-    CursorTimestampMarker|CandyStripedTimeRange;
+    TimestampMarker|CandyStripedTimeRange;
 
 export interface TimelineOverlaySetOptions {
   updateTraceWindow: boolean;
@@ -275,9 +276,9 @@ export interface TimelineOverlaySetOptions {
  * exist at any given time. If one exists and the add() method is called, the
  * new overlay will replace the existing one.
  */
-type SingletonOverlay = EntrySelected|CursorTimestampMarker;
+type SingletonOverlay = EntrySelected|TimestampMarker;
 export function overlayIsSingleton(overlay: TimelineOverlay): overlay is SingletonOverlay {
-  return overlay.type === 'CURSOR_TIMESTAMP_MARKER' || overlay.type === 'ENTRY_SELECTED';
+  return overlay.type === 'TIMESTAMP_MARKER' || overlay.type === 'ENTRY_SELECTED';
 }
 
 /**
@@ -790,7 +791,7 @@ export class Overlays extends EventTarget {
         break;
       }
 
-      case 'CURSOR_TIMESTAMP_MARKER': {
+      case 'TIMESTAMP_MARKER': {
         const {visibleWindow} = this.#dimensions.trace;
         // Only update the position if the timestamp of this marker is within
         // the visible bounds.
@@ -827,7 +828,7 @@ export class Overlays extends EventTarget {
     }
   }
 
-  #positionTimestampMarker(overlay: CursorTimestampMarker, element: HTMLElement): void {
+  #positionTimestampMarker(overlay: TimestampMarker, element: HTMLElement): void {
     // Because we are adjusting the x position, we can use either chart here.
     const x = this.#xPixelForMicroSeconds('main', overlay.timestamp);
     element.style.left = `${x}px`;
@@ -944,13 +945,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 +980,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 +1108,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 +1206,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 +1243,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`;
@@ -1444,7 +1471,7 @@ export class Overlays extends EventTarget {
         }
         break;
       }
-      case 'CURSOR_TIMESTAMP_MARKER':
+      case 'TIMESTAMP_MARKER':
         break;
       case 'CANDY_STRIPED_TIME_RANGE':
         break;
@@ -1478,7 +1505,7 @@ export class Overlays extends EventTarget {
         component?.checkSectionLabelPositioning();
         break;
       }
-      case 'CURSOR_TIMESTAMP_MARKER':
+      case 'TIMESTAMP_MARKER':
         break;
       case 'CANDY_STRIPED_TIME_RANGE':
         break;
@@ -1804,7 +1831,7 @@ export function jsLogContext(overlay: TimelineOverlay): string|null {
     case 'TIMESPAN_BREAKDOWN': {
       return 'timeline.overlays.timespan-breakdown';
     }
-    case 'CURSOR_TIMESTAMP_MARKER': {
+    case 'TIMESTAMP_MARKER': {
       return 'timeline.overlays.cursor-timestamp-marker';
     }
     case 'CANDY_STRIPED_TIME_RANGE': {

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 {
@@ -95,7 +111,7 @@
   }
 }
 
-.overlay-type-CURSOR_TIMESTAMP_MARKER {
+.overlay-type-TIMESTAMP_MARKER {
   top: 0;
   bottom: 0;
   width: 2px;

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[] = [];