chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/timeline/components/insights/Viewport.ts

@@ -4,76 +4,54 @@
 
 import './NodeLink.js';
 
-import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Trace from '../../../../models/trace/trace.js';
+import type {ViewportInsightModel} from '../../../../models/trace/insights/Viewport.js';
+import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import {Category} from './types.js';
+import {BaseInsightComponent} from './BaseInsightComponent.js';
 
 const {html} = LitHtml;
 
-const UIStrings = {
-  /** Title of an insight that provides details about if the page's viewport is optimized for mobile viewing. */
-  title: 'Viewport not optimized for mobile',
-  /**
-   * @description Text to tell the user how a viewport meta element can improve performance. \xa0 is a non-breaking space
-   */
-  description:
-      'The page\'s viewport is not mobile-optimized, so tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/).',
-};
-
-const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Viewport.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class Viewport extends BaseInsight {
+export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-viewport`;
-  override insightCategory: Category = Category.INP;
   override internalName: string = 'viewport';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     // TODO(b/351757418): create overlay for synthetic input delay events
     return [];
   }
 
-  #render(insight: Trace.Insights.Types.InsightResults['Viewport']): LitHtml.TemplateResult {
-    const backendNodeId = insight.viewportEvent?.args.data.node_id;
+  override getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return this.model?.metricSavings?.INP ?? null;
+  }
+
+  #renderContent(): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
+    const backendNodeId = this.model.viewportEvent?.args.data.node_id;
 
     // clang-format off
     return html`
-        <div class="insights">
-            <devtools-performance-sidebar-insight .data=${{
-              title: this.userVisibleTitle,
-              description: this.description,
-              expanded: this.isActive(),
-              internalName: this.internalName,
-              estimatedSavingsTime: insight.metricSavings?.INP,
-            }}
-            @insighttoggleclick=${this.onSidebarClick}>
-              ${backendNodeId !== undefined ? html`<devtools-performance-node-link
-                .data=${{
-                  backendNodeId,
-                  options: {tooltip: insight.viewportEvent?.args.data.content},
-                }}>
-              </devtools-performance-node-link>` : LitHtml.nothing}
-            </devtools-performance-sidebar-insight>
-        </div>`;
-              // clang-format on
+      <div>
+        ${backendNodeId !== undefined ? html`<devtools-performance-node-link
+          .data=${{
+            backendNodeId,
+            options: {tooltip: this.model.viewportEvent?.args.data.content},
+          }}>
+        </devtools-performance-node-link>` : LitHtml.nothing}
+      </div>`;
+    // clang-format on
   }
 
   override render(): void {
-    const viewportInsight = Trace.Insights.Common.getInsight('Viewport', this.data.insights, this.data.insightSetKey);
-    const shouldShow = viewportInsight && viewportInsight.mobileOptimized === false;
+    if (!this.model) {
+      return;
+    }
 
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = shouldShow && matchesCategory ? this.#render(viewportInsight) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    this.renderWithContent(this.#renderContent());
   }
 }
 

package/front_end/panels/timeline/components/insights/{sidebarInsight.css → baseInsightComponent.css}

@@ -131,6 +131,15 @@ dd.dl-title {
   align-items: center;
 }
 
+.image-ref {
+  display: inline-flex;
+  align-items: center;
+
+  &:not(:empty) {
+    padding-top: var(--sys-size-5);
+  }
+}
+
 .element-img {
   width: var(--sys-size-13);
   height: var(--sys-size-13);
@@ -194,16 +203,7 @@ ul.insight-icon-results {
   color: var(--sys-color-state-disabled);
 }
 
-.lcp-element {
-  display: inline-flex;
-  align-items: center;
-}
-
 .insight-results:not(:last-child) {
   border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   padding-bottom: var(--sys-size-5);
 }
-
-.lcp-element:not(:empty) {
-  padding: inherit;
-}

package/front_end/panels/timeline/components/insights/insights.ts

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as BaseInsightComponent from './BaseInsightComponent.js';
 import * as CLSCulprits from './CLSCulprits.js';
 import * as DocumentLatency from './DocumentLatency.js';
 import * as EventRef from './EventRef.js';
 import * as FontDisplay from './FontDisplay.js';
 import * as Helpers from './Helpers.js';
+import * as ImageDelivery from './ImageDelivery.js';
 import * as InteractionToNextPaint from './InteractionToNextPaint.js';
 import * as LCPDiscovery from './LCPDiscovery.js';
 import * as LCPPhases from './LCPPhases.js';
@@ -20,11 +22,13 @@ import * as Types from './types.js';
 import * as Viewport from './Viewport.js';
 
 export {
+  BaseInsightComponent,
   CLSCulprits,
   DocumentLatency,
   EventRef,
   FontDisplay,
   Helpers,
+  ImageDelivery,
   InteractionToNextPaint,
   LCPDiscovery,
   LCPPhases,

package/front_end/panels/timeline/components/insights/types.ts

@@ -4,13 +4,6 @@
 
 import type * as Overlays from '../../overlays/overlays.js';
 
-export enum Category {
-  ALL = 'All',
-  INP = 'INP',
-  LCP = 'LCP',
-  CLS = 'CLS',
-}
-
 export interface ActiveInsight {
   name: string;
   insightSetKey: string;

package/front_end/panels/timeline/components/liveMetricsView.css

@@ -73,11 +73,6 @@
   margin-bottom: 10px;
 }
 
-.section-title-help {
-  height: var(--sys-typescale-headline4-line-height);
-  vertical-align: top;
-}
-
 .settings-card {
   border-radius: var(--sys-shape-corner-small);
   padding: 14px 16px 16px;
@@ -135,6 +130,10 @@
   min-width: 0;
 }
 
+.local-field-link {
+  margin-top: 8px;
+}
+
 .logs-section {
   margin-top: 24px;
   display: flex;
@@ -278,6 +277,11 @@
   margin-bottom: 12px;
 }
 
+.field-data-warning {
+  margin-top: 4px;
+  color: var(--color-error-text);
+}
+
 .collection-period-range {
   font-weight: var(--ref-typeface-weight-medium);
 }
@@ -293,18 +297,6 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
   margin-top: 8px;
 }
 
-.setting-hint {
-  margin-left: 6px;
-  vertical-align: bottom;
-  height: 18px;
-  width: 18px;
-}
-
-.environment-recs-title {
-  margin-top: 12px;
-  font-weight: var(--ref-typeface-weight-medium);
-}
-
 .environment-recs-list {
   margin: 0;
   padding-left: 20px;
@@ -336,7 +328,7 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
 
 .phase-table {
   border-top: 1px solid var(--sys-color-divider);
-  padding: 7px 0;
+  padding: 7px 4px;
   margin-left: var(--phase-table-margin);
 }
 

package/front_end/panels/timeline/components/metricCard.css

@@ -10,9 +10,15 @@
   background-color: var(--sys-color-surface3);
   height: 100%;
   box-sizing: border-box;
+
+  &:not(:hover) .title-help {
+    visibility: hidden;
+  }
 }
 
 .title {
+  display: flex;
+  justify-content: space-between;
   font-size: var(--sys-typescale-headline5-size);
   line-height: var(--sys-typescale-headline5-line-height);
   font-weight: var(--ref-typeface-weight-medium);
@@ -20,6 +26,11 @@
   margin-bottom: 6px;
 }
 
+.title-help {
+  height: var(--sys-typescale-headline5-line-height);
+  margin-left: 4px;
+}
+
 .metric-values-section {
   position: relative;
   display: flex;

package/front_end/panels/timeline/components/sidebarInsightsTab.css

@@ -49,8 +49,8 @@
     details:first-child & {
       border-top: 1px solid var(--sys-color-divider);
     }
-    }
   }
+}
 
 .zoom-button {
   margin-left: auto;

package/front_end/panels/timeline/components/timelineSummary.css

@@ -0,0 +1,67 @@
+/*
+ * 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.
+ */
+
+.timeline-summary {
+  font-size: var(--sys-typescale-body4-size);
+  display: flex;
+  flex-direction: column;
+  padding: var(--sys-size-4) var(--sys-size-8) var(--sys-size-4);
+  gap: var(--sys-size-5);
+  float: left;
+}
+
+.summary-range {
+  font-weight: var(--ref-typeface-weight-medium);
+}
+
+.category-summary {
+  gap: var(--sys-size-3);
+  display: flex;
+  flex-direction: column;
+}
+
+.category-row {
+  display: inline-block;
+}
+
+.category-swatch {
+  display: inline-block;
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
+  margin-right: var(--sys-size-4);
+  top: var(--sys-size-1);
+  position: relative;
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+}
+
+.category-name {
+  display: inline-block;
+}
+
+.category-value {
+  text-align: right;
+  position: relative;
+  float: right;
+  z-index: 0;
+  width: var(--sys-size-19);
+}
+
+.background-bar-container {
+  position: absolute;
+  left: var(--sys-size-3);
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.background-bar {
+  width: 100%;
+  float: right;
+  height: var(--sys-size-8);
+  background-color: var(--sys-color-surface-yellow);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-yellow-outline);
+}

package/front_end/panels/timeline/docs/flame_chart_migration.md

@@ -48,7 +48,7 @@ Migrating a track consists of taking the code in the data provider corresponding
 
 5. Move the handling of the extra features.
 
-    This is usually achieved by implementing the methods `colorForEvent`, `titleForEvent` and `highlightedEntryInfo`. Note how The implementation of these methods should be equivalent to the codepaths of the methods with the same names in the data provider related to the tracks/events being migrated. Here again we should look out for opportunities to introduce helpers to share between track appenders.
+    This is usually achieved by implementing the methods `colorForEvent`, `titleForEvent` and `popoverInfo`. Note how The implementation of these methods should be equivalent to the codepaths of the methods with the same names in the data provider related to the tracks/events being migrated. Here again we should look out for opportunities to introduce helpers to share between track appenders.
 
     Note: Queries done by the FlameChart renderer for events' extra features are passed from the data provider to the CompatibilityTracksAppender ([see example](https://source.chromium.org/chromium/_/chromium/devtools/devtools-frontend/+/3925b7d73681966c9a8c844c49c7e815ecdcff82:front_end/panels/timeline/TimelineFlameChartDataProvider.ts;l=1083)), which then [forwards](https://source.chromium.org/chromium/_/chromium/devtools/devtools-frontend/+/3925b7d73681966c9a8c844c49c7e815ecdcff82:front_end/panels/timeline/CompatibilityTracksAppender.ts;l=107) the query to the appropriate track appender using the data added when `registerTrackForLevel` was called.
 

package/front_end/panels/timeline/fixtures/traces/README.md

@@ -213,3 +213,7 @@ Contains a trace where one Layout event has 26 invalidations associated with it.
 ### scheduler-post-task
 
 Generated from the [scheduler story](https://github.com/ChromeDevTools/performance-stories/tree/main/scheduler). Contains a series of `scheduler.postTask()` calls of different priority and delay, some nested and some ending up cancelled.
+
+### image-delivery
+
+Generate from a page load [this HTML file](https://gist.github.com/adamraine/397e2bd08665f9e45f6072e446715115). Contains a series of test cases for the image delivery insight.

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

@@ -398,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();
@@ -979,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';
 }
 
 /**
@@ -343,6 +344,22 @@ export class AnnotationOverlayActionEvent extends Event {
   }
 }
 
+export class TimeRangeMouseOverEvent extends Event {
+  static readonly eventName = 'timerangemouseoverevent';
+
+  constructor(public overlay: TimeRangeLabel) {
+    super(TimeRangeMouseOverEvent.eventName, {bubbles: true});
+  }
+}
+
+export class TimeRangeMouseOutEvent extends Event {
+  static readonly eventName = 'timerangemouseoutevent';
+
+  constructor() {
+    super(TimeRangeMouseOutEvent.eventName, {bubbles: true});
+  }
+}
+
 interface EntriesLinkVisibleEntries {
   entryFrom: Trace.Types.Events.Event;
   entryTo: Trace.Types.Events.Event|undefined;
@@ -790,7 +807,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 +844,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`;
@@ -1417,6 +1434,12 @@ export class Overlays extends EventTarget {
         component.addEventListener(Components.TimeRangeOverlay.TimeRangeRemoveEvent.eventName, () => {
           this.dispatchEvent(new AnnotationOverlayActionEvent(overlay, 'Remove'));
         });
+        component.addEventListener('mouseover', () => {
+          this.dispatchEvent(new TimeRangeMouseOverEvent(overlay));
+        });
+        component.addEventListener('mouseout', () => {
+          this.dispatchEvent(new TimeRangeMouseOutEvent());
+        });
         div.appendChild(component);
         return div;
       }
@@ -1470,7 +1493,7 @@ export class Overlays extends EventTarget {
         }
         break;
       }
-      case 'CURSOR_TIMESTAMP_MARKER':
+      case 'TIMESTAMP_MARKER':
         break;
       case 'CANDY_STRIPED_TIME_RANGE':
         break;
@@ -1504,7 +1527,7 @@ export class Overlays extends EventTarget {
         component?.checkSectionLabelPositioning();
         break;
       }
-      case 'CURSOR_TIMESTAMP_MARKER':
+      case 'TIMESTAMP_MARKER':
         break;
       case 'CANDY_STRIPED_TIME_RANGE':
         break;
@@ -1830,7 +1853,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/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/timelineFlameChartView.css

@@ -111,7 +111,7 @@
   }
 }
 
-.overlay-type-CURSOR_TIMESTAMP_MARKER {
+.overlay-type-TIMESTAMP_MARKER {
   top: 0;
   bottom: 0;
   width: 2px;

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;
 }
 

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

@@ -235,7 +235,6 @@
   user-select: text;
   text-overflow: ellipsis;
   overflow: hidden;
-  padding: 0 3px;
 }
 
 .timeline-details-warning .timeline-details-view-row-value {

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

@@ -138,7 +138,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 +149,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 +169,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 +189,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 +217,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)) {