chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as ThemeSupport from '../../../../ui/legacy/theme_support/theme_support.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -150,7 +151,7 @@ export class EntryLabelOverlay extends HTMLElement {
     // We do not want to create multi-line labels.
     // Therefore, if the new key is `Enter` key, treat it
     // as the end of the label input and blur the input field.
-    if (event.key === 'Enter' || event.key === 'Escape') {
+    if (event.key === Platform.KeyboardUtilities.ENTER_KEY || event.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
       // Note that we do not stop the event propagating here; this is on
       // purpose because we need it to bubble up into TimelineFlameChartView's
       // handler. That updates the state and deals with the keydown.

package/front_end/panels/timeline/overlays/components/TimeRangeOverlay.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
@@ -236,7 +237,7 @@ export class TimeRangeOverlay extends HTMLElement {
     // as the end of the label input and blur the input field.
     // If the text field is empty when `Enter` or `Escape` are pressed,
     // dispatch an event to remove the time range.
-    if (event.key === 'Enter' || event.key === 'Escape') {
+    if (event.key === Platform.KeyboardUtilities.ENTER_KEY || event.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
       // In DevTools, the `Escape` button will by default toggle the console
       // drawer, which we don't want here, so we need to call
       // `stopPropagation()`.

package/front_end/panels/timeline/overlays/components/TimespanBreakdownOverlay.test.ts

@@ -10,7 +10,6 @@ import {
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as Components from './components.js';
-const coordinator = RenderCoordinator.RenderCoordinator.RenderCoordinator.instance();
 
 describeWithEnvironment('TimespanBreakdownOverlay', () => {
   it('renders the sections with the labels and time', async () => {
@@ -29,7 +28,7 @@ describeWithEnvironment('TimespanBreakdownOverlay', () => {
       },
     ];
     component.sections = sections;
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isOk(component.shadowRoot);
 
     const sectionElems =

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

@@ -320,7 +320,7 @@ Common.Settings.registerSettingExtension({
   storageType: Common.Settings.SettingStorageType.SYNCED,
   settingName: 'annotations-hidden',
   settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
+  defaultValue: false,
 });
 
 Common.Linkifier.registerLinkifier({

package/front_end/panels/timeline/timeline.ts

@@ -12,7 +12,6 @@ import * as CountersGraph from './CountersGraph.js';
 import * as EntriesFilter from './EntriesFilter.js';
 import * as EventsSerializer from './EventsSerializer.js';
 import * as EventsTimelineTreeView from './EventsTimelineTreeView.js';
-import * as ExtensionDataGatherer from './ExtensionDataGatherer.js';
 import * as ExtensionTrackAppender from './ExtensionTrackAppender.js';
 import * as FreshRecording from './FreshRecording.js';
 import * as GPUTrackAppender from './GPUTrackAppender.js';
@@ -57,7 +56,6 @@ export {
   EntriesFilter,
   EventsSerializer,
   EventsTimelineTreeView,
-  ExtensionDataGatherer,
   ExtensionTrackAppender,
   FreshRecording,
   GPUTrackAppender,

package/front_end/panels/timeline/timelineFlameChartView.css

@@ -6,10 +6,7 @@
 
 .timeline-overlays-container {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   /* Ensure it appears on top of everything */
   z-index: 200;
   pointer-events: none;
@@ -50,8 +47,16 @@
   }
 }
 
+.overlay-type-ENTRY_SELECTED {
+  /* Ensure ENTRY_SELECTED overlays are always displayed on top of ENTRY_OUTLINE overlays */
+  z-index: 1;
+}
+
 .overlay-type-ENTRY_OUTLINE {
   background-color: transparent;
+  border-width: 1px;
+  /* Ensure ENTRY_SELECTED overlays are always displayed on top of ENTRY_OUTLINE overlays */
+  z-index: 0;
 
   &.outline-reason-ERROR {
     border-color: var(--sys-color-error-bright);
@@ -74,7 +79,7 @@
       transparent var(--red-stripe-width),
       transparent var(--white-stripe-width)
     );
-  border: 2px solid var(--sys-color-error-bright);
+  border: 1px solid var(--sys-color-error-bright);
 
   &.cut-off-bottom {
     border-bottom: none;
@@ -137,3 +142,37 @@
   bottom: 0;
   height: 100px;
 }
+
+.overlay-type-TIMINGS_MARKER {
+  bottom: 0;
+  width: 1px;
+  pointer-events: auto;
+}
+
+.marker-title {
+  display: flex;
+  justify-content: center;
+  width: var(--sys-size-13);
+  font-size: var(--sys-typescale-body4-size);
+  color: var(--sys-color-base);
+
+  &:hover {
+    cursor: default;
+    transition: opacity 0.2s ease;
+  }
+}
+
+.markers {
+  position: fixed;
+  display: flex;
+  bottom: 0;
+  width: 100%;
+}
+
+.overlay-popover span {
+  margin-right: var(--sys-size-3);
+}
+
+.overlay-popover span.overlay-popover-time {
+  color: var(--sys-color-green);
+}

package/front_end/panels/timeline/timelineFlamechartPopover.css

@@ -16,19 +16,29 @@
   margin-right: 5px;
 }
 
-.timeline-flamechart-popover span.timeline-info-network-time {
+.timeline-flamechart-popover span.popoverinfo-network-time {
   color: var(--sys-color-primary);
 }
 
-.timeline-flamechart-popover span.timeline-info-time {
+.timeline-flamechart-popover span.popoverinfo-time {
   color: var(--sys-color-green);
 }
 
-.timeline-flamechart-popover span.timeline-info-warning {
+.timeline-flamechart-popover span.popoverinfo-warning {
   color: var(--sys-color-error);
 }
 
-.timeline-flamechart-popover span.timeline-info-warning * {
+.timeline-flamechart-popover span.popoverinfo-url-path,
+.timeline-flamechart-popover span.popoverinfo-url-origin {
+  color: var(--sys-color-token-subtle);
+  font-size: 11px;
+}
+
+.timeline-flamechart-popover span.popoverinfo-url-origin {
+  font-style: italic;
+}
+
+.timeline-flamechart-popover span.popoverinfo-warning * {
   color: inherit;
 }
 
@@ -39,8 +49,8 @@
 }
 
 .layout-shift-viz-rect {
-  outline: 1px solid color-mix(in sRGB, var(--color-background-inverted) 20%, var(--app-color-rendering));
-  background-color: color-mix(in sRGB, var(--color-background-inverted-opacity-0) 50%, var(--app-color-rendering-children));
+  outline: 1px solid color-mix(in srgb, var(--color-background-inverted) 20%, var(--app-color-rendering));
+  background-color: color-mix(in srgb, var(--color-background-inverted-opacity-0) 50%, var(--app-color-rendering-children));
   position: absolute;
   z-index: 100;
 }

package/front_end/panels/timeline/timelineHistoryManager.css

@@ -19,7 +19,7 @@
   padding: 6px 10px;
   position: relative;
 
-  .time {
+  .metadata {
     margin-left: 3px;
   }
 
@@ -42,8 +42,12 @@
   height: 100%;
 }
 
+.text-details {
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
 .text-details > span {
-  flex: 1 0;
   padding-left: var(--sys-size-5);
   padding-right: var(--sys-size-5);
 }
@@ -52,7 +56,7 @@
   font: var(--sys-typescale-body4-medium);
 }
 
-.text-details span.time {
+.text-details .metadata {
   color: var(--sys-color-token-subtle);
   font: var(--sys-typescale-body4-regular);
   text-align: right;

package/front_end/panels/timeline/timelinePanel.css

@@ -137,6 +137,7 @@
 
 #memory-graphs-container .timeline-memory-header::after {
   content: "";
+  /* stylelint-disable-next-line custom-property-pattern */
   background-image: var(--image-file-toolbarResizerVertical);
   background-repeat: no-repeat;
   background-position: right center, center;
@@ -234,8 +235,7 @@
   display: inline-block;
   user-select: text;
   text-overflow: ellipsis;
-  overflow: hidden;
-  padding: 0 3px;
+  overflow: visible;
 }
 
 .timeline-details-warning .timeline-details-view-row-value {
@@ -319,6 +319,7 @@
 
   100% {
     opacity: 0%;
+    /* stylelint-disable-next-line custom-property-pattern */
     transform: translateY(var(--to-Y)) translateX(var(--to-X)) rotate(var(--rotation));
   }
 }
@@ -548,8 +549,7 @@
 }
 
 .timeline-details-view-body > div {
-  overflow-y: hidden;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .timeline-details-chip-title > div {

package/front_end/panels/timeline/timelineStatusDialog.css

@@ -20,6 +20,7 @@
   min-height: auto;
   display: flex;
   align-items: baseline;
+  font-variant-numeric: tabular-nums;
 }
 
 .status-dialog-line .label {

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

@@ -39,7 +39,7 @@ describeWithEnvironment('AnimationsTrackAppender', function() {
 
   describe('appendTrackAtLevel', function() {
     it('creates a flamechart group for the Animations track', function() {
-      assert.strictEqual(flameChartData.groups.length, 1);
+      assert.lengthOf(flameChartData.groups, 1);
       assert.strictEqual(flameChartData.groups[0].name, 'Animations');
     });
 

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

@@ -49,12 +49,6 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
           ...parsedTrace.UserTimings.timestampEvents,
           ...parsedTrace.UserTimings.performanceMarks,
           ...parsedTrace.UserTimings.performanceMeasures,
-          ...parsedTrace.PageLoadMetrics.allMarkerEvents.toSorted((m1, m2) => {
-            // These get sorted based on the metric so we have to replicate
-            // that for this assertion.
-            return Timeline.TimingsTrackAppender.SORT_ORDER_PAGE_LOAD_MARKERS[m1.name] -
-                Timeline.TimingsTrackAppender.SORT_ORDER_PAGE_LOAD_MARKERS[m2.name];
-          }),
         ].sort((a, b) => a.ts - b.ts);
         assert.deepEqual(timingsTrackEvents, allTimingEvents);
       });
@@ -90,16 +84,16 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
         await initTrackAppender(this, 'lcp-images-rasterizer.json.gz');
         const rasterTracks = tracksAppender.threadAppenders().filter(
             threadAppender => threadAppender.threadType === Trace.Handlers.Threads.ThreadType.RASTERIZER);
-        assert.strictEqual(rasterTracks.length, 2);
+        assert.lengthOf(rasterTracks, 2);
 
         const raster1Events = tracksAppender.eventsInTrack(rasterTracks[0]);
-        assert.strictEqual(raster1Events.length, 6);
+        assert.lengthOf(raster1Events, 6);
         assert.isTrue(Trace.Helpers.TreeHelpers.canBuildTreesFromEvents(raster1Events));
         const raster1TreeEvents = tracksAppender.eventsForTreeView(rasterTracks[0]);
         assert.deepEqual(raster1TreeEvents, raster1Events);
 
         const raster2Events = tracksAppender.eventsInTrack(rasterTracks[1]);
-        assert.strictEqual(raster2Events.length, 1);
+        assert.lengthOf(raster2Events, 1);
         assert.isTrue(Trace.Helpers.TreeHelpers.canBuildTreesFromEvents(raster2Events));
         const raster2TreeEvents = tracksAppender.eventsForTreeView(rasterTracks[1]);
         assert.deepEqual(raster2TreeEvents, raster2Events);
@@ -118,12 +112,6 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
           ...parsedTrace.UserTimings.timestampEvents,
           ...parsedTrace.UserTimings.performanceMarks,
           ...parsedTrace.UserTimings.performanceMeasures,
-          ...parsedTrace.PageLoadMetrics.allMarkerEvents.toSorted((m1, m2) => {
-            // These get sorted based on the metric so we have to replicate
-            // that for this assertion.
-            return Timeline.TimingsTrackAppender.SORT_ORDER_PAGE_LOAD_MARKERS[m1.name] -
-                Timeline.TimingsTrackAppender.SORT_ORDER_PAGE_LOAD_MARKERS[m2.name];
-          }),
         ].sort((a, b) => a.ts - b.ts);
         assert.deepEqual(timingsGroupEvents, allTimingEvents);
       });
@@ -138,7 +126,7 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
     });
   });
 
-  describe('highlightedEntryInfo', () => {
+  describe('popoverInfo', () => {
     it('shows the correct warning for a long task when hovered', async function() {
       await initTrackAppender(this, 'simple-js-program.json.gz');
       const events = parsedTrace.Renderer?.allTraceEntries;
@@ -149,7 +137,7 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
       if (!longTask) {
         throw new Error('Could not find long task');
       }
-      const info = tracksAppender.highlightedEntryInfo(longTask, 2);
+      const info = tracksAppender.popoverInfo(longTask, 2);
       assert.strictEqual(info.warningElements?.length, 1);
       const warning = info.warningElements?.[0];
       if (!(warning instanceof HTMLSpanElement)) {
@@ -169,7 +157,7 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
       if (!recalcStyles) {
         throw new Error('Could not find recalc styles');
       }
-      const info = tracksAppender.highlightedEntryInfo(recalcStyles, 2);
+      const info = tracksAppender.popoverInfo(recalcStyles, 2);
       assert.strictEqual(info.warningElements?.length, 1);
       const warning = info.warningElements?.[0];
       if (!(warning instanceof HTMLSpanElement)) {
@@ -189,7 +177,7 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
       if (!layout) {
         throw new Error('Could not find layout');
       }
-      const info = tracksAppender.highlightedEntryInfo(layout, 2);
+      const info = tracksAppender.popoverInfo(layout, 2);
       assert.strictEqual(info.warningElements?.length, 1);
       const warning = info.warningElements?.[0];
       if (!(warning instanceof HTMLSpanElement)) {
@@ -217,7 +205,7 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
       if (!idleCallback) {
         throw new Error('Could not find idle callback');
       }
-      const info = tracksAppender.highlightedEntryInfo(idleCallback, 2);
+      const info = tracksAppender.popoverInfo(idleCallback, 2);
       assert.strictEqual(info.warningElements?.length, 1);
       const warning = info.warningElements?.[0];
       if (!(warning instanceof HTMLSpanElement)) {
@@ -230,12 +218,10 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
   it('can return the group for a given level', async () => {
     await initTrackAppender(this, 'web-dev-with-commit.json.gz');
     // The order of these groups might seem odd, but it's based on the setup in
-    // the initTrackAppender function which does Timings, GPU and then threads.
+    // the initTrackAppender function which does GPU and then threads.
     const groupForLevel0 = tracksAppender.groupForLevel(0);
-    assert.strictEqual(groupForLevel0?.name, 'Timings');
+    assert.strictEqual(groupForLevel0?.name, 'GPU');
     const groupForLevel1 = tracksAppender.groupForLevel(1);
-    assert.strictEqual(groupForLevel1?.name, 'GPU');
-    const groupForLevel2 = tracksAppender.groupForLevel(2);
-    assert.strictEqual(groupForLevel2?.name, 'Main — https://web.dev/');
+    assert.strictEqual(groupForLevel1?.name, 'Main — https://web.dev/');
   });
 });

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import { // eslint-disable-line rulesdir/es_modules_import
+import { // eslint-disable-line rulesdir/es-modules-import
   createTraceExtensionDataFromTestInput,
   type ExtensionTestData,
 } from '../../../models/trace/handlers/ExtensionTraceDataHandler.test.js';
@@ -18,7 +18,6 @@ function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData, parsedTrace: Trace.Handlers.Types.ParsedTrace,
     entryData: Trace.Types.Events.Event[], entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[]):
     Timeline.ExtensionTrackAppender.ExtensionTrackAppender[] {
-  Timeline.ExtensionDataGatherer.ExtensionDataGatherer.instance().modelChanged(parsedTrace);
   const compatibilityTracksAppender = new Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender(
       flameChartData, parsedTrace, entryData, entryTypeByLevel);
 
@@ -34,7 +33,6 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
   let entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
 
   beforeEach(async function() {
-    Timeline.ExtensionDataGatherer.ExtensionDataGatherer.removeInstance();
     ({parsedTrace} = await TraceLoader.traceEngine(this, 'extension-tracks-and-marks.json.gz'));
     extensionTrackAppenders = initTrackAppender(flameChartData, parsedTrace, entryData, entryTypeByLevel);
     let level = 0;
@@ -51,7 +49,7 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
 
   describe('appendTrackAtLevel', function() {
     it('creates flamechart groups for the Extension tracks properly', function() {
-      assert.strictEqual(flameChartData.groups.length, 3);
+      assert.lengthOf(flameChartData.groups, 3);
       assert.strictEqual(flameChartData.groups[0].name, 'A track group — Custom track');
       assert.strictEqual(flameChartData.groups[0].startLevel, 0);
       assert.strictEqual(flameChartData.groups[0].style.nestingLevel, 0);
@@ -117,7 +115,6 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
          ] as ExtensionTestData[];
          const traceExtensionData = await createTraceExtensionDataFromTestInput(extensionData);
          const testParsedTrace = getBaseTraceParseModelData({ExtensionTraceData: traceExtensionData});
-         Timeline.ExtensionDataGatherer.ExtensionDataGatherer.removeInstance();
          entryData = [];
          flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
          entryTypeByLevel = [];
@@ -205,7 +202,6 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
 
   describe('toggling', function() {
     it('Does not append extension data when the configuration is set to disabled', async function() {
-      Timeline.ExtensionDataGatherer.ExtensionDataGatherer.removeInstance();
       entryData = [];
       flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
       entryTypeByLevel = [];
@@ -216,19 +212,36 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
       extensionTrackAppenders.forEach(appender => {
         level = appender.appendTrackAtLevel(level);
       });
-      assert.strictEqual(flameChartData.groups.length, 0);
+      assert.lengthOf(flameChartData.groups, 0);
       Timeline.TimelinePanel.TimelinePanel.extensionDataVisibilitySetting().set(true);
     });
   });
 
-  describe('highlightedEntryInfo', function() {
-    it('returns the info for an entry correctly', function() {
+  describe('titleForEvent', function() {
+    it('returns the title for an entry correctly', function() {
       const allExtensionTrackEntries =
           parsedTrace.ExtensionTraceData.extensionTrackData.map(track => Object.values(track.entriesByTrack)).flat(2);
-      const highlightedEntryInfo = extensionTrackAppenders[0].highlightedEntryInfo(allExtensionTrackEntries[0]);
+      const title = extensionTrackAppenders[0].titleForEvent(allExtensionTrackEntries[0]);
+      assert.strictEqual(title, 'An extension measurement');
+    });
+  });
+
+  describe('setPopoverInfo', function() {
+    it('build the tooltip content for an entry correctly', function() {
+      const info: Timeline.CompatibilityTracksAppender.PopoverInfo = {
+        title: 'title',
+        formattedTime: 'time',
+        warningElements: [],
+        additionalElements: [],
+        url: null,
+      };
+      const allExtensionTrackEntries =
+          parsedTrace.ExtensionTraceData.extensionTrackData.map(track => Object.values(track.entriesByTrack)).flat(2);
+      extensionTrackAppenders[0].setPopoverInfo(allExtensionTrackEntries[0], info);
+      assert.strictEqual(info.title, 'A hint if needed');
       // The i18n encodes spaces using the u00A0 unicode character.
-      assert.strictEqual(highlightedEntryInfo.formattedTime, '1.00\u00A0s');
-      assert.strictEqual(highlightedEntryInfo.title, 'A hint if needed');
+      assert.strictEqual(info.formattedTime, '1.00\u00A0s');
+      assert.isUndefined(info.additionalElements?.at(0)?.nodeName);
     });
   });
 });

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

@@ -50,7 +50,7 @@ describeWithEnvironment('GPUTrackAppender', function() {
     });
 
     it('creates a flamechart group for the GPU track', () => {
-      assert.strictEqual(flameChartData.groups.length, 1);
+      assert.lengthOf(flameChartData.groups, 1);
       assert.strictEqual(flameChartData.groups[0].name, 'GPU');
     });
 

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

@@ -47,7 +47,7 @@ describeWithEnvironment('InteractionsTrackAppender', function() {
     it('marks all levels used by the track with the `TrackAppender` type', async function() {
       const {entryTypeByLevel} = await renderTrackAppender(this, 'slow-interaction-button-click.json.gz');
       // All events fit on the top level
-      assert.strictEqual(entryTypeByLevel.length, 1);
+      assert.lengthOf(entryTypeByLevel, 1);
       assert.deepEqual(entryTypeByLevel, [
         Timeline.TimelineFlameChartDataProvider.EntryType.TRACK_APPENDER,
       ]);
@@ -56,7 +56,7 @@ describeWithEnvironment('InteractionsTrackAppender', function() {
     it('takes over no levels if there are no interactions', async function() {
       // animation trace has no interactions in it.
       const {entryTypeByLevel} = await renderTrackAppender(this, 'animation.json.gz');
-      assert.strictEqual(entryTypeByLevel.length, 0);
+      assert.lengthOf(entryTypeByLevel, 0);
     });
 
     it('only shows the top level interactions', async function() {
@@ -66,7 +66,7 @@ describeWithEnvironment('InteractionsTrackAppender', function() {
 
     it('creates a flamechart group', async function() {
       const {flameChartData} = await renderTrackAppender(this, 'slow-interaction-button-click.json.gz');
-      assert.strictEqual(flameChartData.groups.length, 1);
+      assert.lengthOf(flameChartData.groups, 1);
       assert.strictEqual(flameChartData.groups[0].name, 'Interactions');
     });
 

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

@@ -44,7 +44,7 @@ describeWithEnvironment('LayoutShiftsTrackAppender', function() {
   it('marks all levels used by the track with the TrackAppender type', async function() {
     const {entryTypeByLevel} = await renderTrackAppender(this, 'cls-single-frame.json.gz');
     // Only one row of layout shifts.
-    assert.strictEqual(entryTypeByLevel.length, 1);
+    assert.lengthOf(entryTypeByLevel, 1);
     assert.deepEqual(entryTypeByLevel, [
       Timeline.TimelineFlameChartDataProvider.EntryType.TRACK_APPENDER,
     ]);
@@ -58,7 +58,7 @@ describeWithEnvironment('LayoutShiftsTrackAppender', function() {
 
   it('creates a flamechart group', async function() {
     const {flameChartData} = await renderTrackAppender(this, 'cls-single-frame.json.gz');
-    assert.strictEqual(flameChartData.groups.length, 1);
+    assert.lengthOf(flameChartData.groups, 1);
     assert.strictEqual(flameChartData.groups[0].name, 'Layout shifts');
   });
 
@@ -84,9 +84,18 @@ describeWithEnvironment('LayoutShiftsTrackAppender', function() {
     const {layoutShiftsTrackAppender, parsedTrace} = await renderTrackAppender(this, 'cls-no-nav.json.gz');
     const shifts = parsedTrace.LayoutShifts.clusters.flatMap(c => c.events);
     await layoutShiftsTrackAppender.preloadScreenshots(shifts);
-    const info = layoutShiftsTrackAppender.highlightedEntryInfo(shifts[3]);
+
+    const info: Timeline.CompatibilityTracksAppender.PopoverInfo = {
+      title: 'title',
+      formattedTime: 'time',
+      warningElements: [],
+      additionalElements: [],
+      url: null,
+    };
+
+    layoutShiftsTrackAppender.setPopoverInfo(shifts[3], info);
     assert.strictEqual(info.title, 'Layout shift');
     assert.strictEqual(info.formattedTime, '0.0197');
-    assert.strictEqual(info.additionalElement?.nodeName, 'DIV');
+    assert.strictEqual(info.additionalElements?.at(0)?.nodeName, 'DIV');
   });
 });

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

@@ -27,7 +27,7 @@ describeWithEnvironment('NetworkTrackAppender', function() {
 
   describe('appendTrackAtLevel', function() {
     it('creates a flamechart group for the Network track', function() {
-      assert.strictEqual(flameChartData.groups.length, 1);
+      assert.lengthOf(flameChartData.groups, 1);
       assert.strictEqual(flameChartData.groups[0].name, 'Network');
     });
 

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

@@ -44,12 +44,12 @@ describeWithEnvironment('ServerTimingsTrackAppender', function() {
 
   describe('appendTrackAtLevel', function() {
     it('creates a flamechart group for the Server timings track', function() {
-      assert.strictEqual(flameChartData.groups.length, 1);
+      assert.lengthOf(flameChartData.groups, 1);
       assert.strictEqual(flameChartData.groups[0].name, 'Server Timings — https://node-server-tan.vercel.app');
     });
 
     it('Adds a description to server timings tracks', function() {
-      assert.strictEqual(flameChartData.groups.length, 1);
+      assert.lengthOf(flameChartData.groups, 1);
       assert.strictEqual(
           flameChartData.groups[0].description,
           'This track contains timings taken from Server-Timing network response headers. Their respective start times are only estimated and may not be accurate.');
@@ -113,13 +113,4 @@ describeWithEnvironment('ServerTimingsTrackAppender', function() {
       }
     });
   });
-
-  describe('highlightedEntryInfo', function() {
-    it('returns the info for an entry correctly', function() {
-      const serverTimings = parsedTrace.ServerTimings.serverTimings;
-      const highlightedEntryInfo = serverTimingsTrackAppender.highlightedEntryInfo(serverTimings[0]);
-      // The i18n encodes spaces using the u00A0 unicode character.
-      assert.strictEqual(highlightedEntryInfo.formattedTime, '1.00\u00A0s');
-    });
-  });
 });