chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

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

@@ -277,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);
 }
@@ -292,11 +297,6 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
   margin-top: 8px;
 }
 
-.environment-recs-title {
-  margin-top: 12px;
-  font-weight: var(--ref-typeface-weight-medium);
-}
-
 .environment-recs-list {
   margin: 0;
   padding-left: 20px;

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.ts

@@ -344,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;
@@ -1418,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;
       }

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/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)) {

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

@@ -165,7 +165,7 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
       const allExtensionTrackEntries =
           parsedTrace.ExtensionTraceData.extensionTrackData.map(track => Object.values(track.entriesByTrack)).flat(2);
       for (const event of allExtensionTrackEntries) {
-        assert.strictEqual(extensionTrackAppenders[0].titleForEvent(event), event.name);
+        assert.notStrictEqual(extensionTrackAppenders[0].titleForEvent(event), event.name);
         if (event.args.color === 'tertiary') {
           // "tertiary" color category is mapped to --ref-palette-green70
           // which is faked out to 10, 10, 10
@@ -221,14 +221,13 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
     });
   });
 
-  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]);
       // 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(title, 'A hint if needed');
     });
   });
 });

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

@@ -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/ServerTimingsTrackAppender.test.ts

@@ -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');
-    });
-  });
 });

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

@@ -23,35 +23,20 @@ function initTrackAppender(
     parsedTrace: Trace.Handlers.Types.ParsedTrace,
     entryData: Trace.Types.Events.Event[],
     entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
-    ): Timeline.ThreadAppender.ThreadAppender[] {
+    ): {
+  threadAppenders: Timeline.ThreadAppender.ThreadAppender[],
+  compatibilityTracksAppender: Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender,
+} {
   setupIgnoreListManagerEnvironment();
   const compatibilityTracksAppender = new Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender(
       flameChartData, parsedTrace, entryData, entryTypeByLevel);
-  return compatibilityTracksAppender.threadAppenders();
+  return {threadAppenders: compatibilityTracksAppender.threadAppenders(), compatibilityTracksAppender};
 }
-async function renderThreadAppendersFromTrace(context: Mocha.Context|Mocha.Suite, trace: string): Promise<{
-  entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[],
-  flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
-  threadAppenders: Timeline.ThreadAppender.ThreadAppender[],
-  entryData: Trace.Types.Events.Event[],
-  parsedTrace: Readonly<Trace.Handlers.Types.ParsedTrace>,
-}> {
-  const entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
-  const entryData: Trace.Types.Events.Event[] = [];
-  const flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
+
+async function renderThreadAppendersFromTrace(context: Mocha.Context|Mocha.Suite, trace: string):
+    Promise<ReturnType<typeof renderThreadAppendersFromParsedData>> {
   const {parsedTrace} = await TraceLoader.traceEngine(context, trace);
-  const threadAppenders = initTrackAppender(flameChartData, parsedTrace, entryData, entryTypeByLevel);
-  let level = 0;
-  for (const appender of threadAppenders) {
-    level = appender.appendTrackAtLevel(level);
-  }
-  return {
-    entryTypeByLevel,
-    parsedTrace,
-    flameChartData,
-    threadAppenders,
-    entryData,
-  };
+  return renderThreadAppendersFromParsedData(parsedTrace);
 }
 
 function renderThreadAppendersFromParsedData(parsedTrace: Trace.Handlers.Types.ParsedTrace): {
@@ -59,12 +44,14 @@ function renderThreadAppendersFromParsedData(parsedTrace: Trace.Handlers.Types.P
   flameChartData: PerfUI.FlameChart.FlameChartTimelineData,
   threadAppenders: Timeline.ThreadAppender.ThreadAppender[],
   entryData: Trace.Types.Events.Event[],
+  parsedTrace: Readonly<Trace.Handlers.Types.ParsedTrace>,
+  compatibilityTracksAppender: Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender,
 } {
   const entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
   const entryData: Trace.Types.Events.Event[] = [];
   const flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
-
-  const threadAppenders = initTrackAppender(flameChartData, parsedTrace, entryData, entryTypeByLevel);
+  const {threadAppenders, compatibilityTracksAppender} =
+      initTrackAppender(flameChartData, parsedTrace, entryData, entryTypeByLevel);
   let level = 0;
   for (const appender of threadAppenders) {
     level = appender.appendTrackAtLevel(level);
@@ -73,6 +60,8 @@ function renderThreadAppendersFromParsedData(parsedTrace: Trace.Handlers.Types.P
   return {
     entryTypeByLevel,
     flameChartData,
+    compatibilityTracksAppender,
+    parsedTrace,
     threadAppenders,
     entryData,
   };
@@ -268,16 +257,16 @@ describeWithEnvironment('ThreadAppender', function() {
     cpuProfileNode.setFunctionName(originalName);
   });
 
-  it('shows the correct title for a trace event when hovered', async function() {
-    const {threadAppenders, parsedTrace} = await renderThreadAppendersFromTrace(this, 'simple-js-program.json.gz');
-    const events = parsedTrace.Renderer?.allTraceEntries;
-    if (!events) {
-      throw new Error('Could not find renderer events');
-    }
-    const info = threadAppenders[0].highlightedEntryInfo(events[0]);
-    assert.strictEqual(info.title, 'Task');
-    assert.strictEqual(info.formattedTime, '0.27\u00A0ms');
-  });
+  function getDefaultInfo() {
+    const defaultInfo: Timeline.CompatibilityTracksAppender.PopoverInfo = {
+      title: 'title',
+      formattedTime: 'time',
+      warningElements: [],
+      additionalElements: [],
+      url: null,
+    };
+    return defaultInfo;
+  }
 
   it('shows self time only for events with self time above the threshold when hovered', async function() {
     const {threadAppenders, parsedTrace} = await renderThreadAppendersFromTrace(this, 'simple-js-program.json.gz');
@@ -285,14 +274,16 @@ describeWithEnvironment('ThreadAppender', function() {
     if (!events) {
       throw new Error('Could not find renderer events');
     }
-    const infoForShortEvent = threadAppenders[0].highlightedEntryInfo(events[0]);
+    const infoForShortEvent = getDefaultInfo();
+    threadAppenders[0].setPopoverInfo(events[0], infoForShortEvent);
     assert.strictEqual(infoForShortEvent.formattedTime, '0.27\u00A0ms');
 
     const longTask = events.find(e => (e.dur || 0) > 1_000_000);
     if (!longTask) {
       throw new Error('Could not find long task');
     }
-    const infoForLongEvent = threadAppenders[0].highlightedEntryInfo(longTask);
+    const infoForLongEvent = getDefaultInfo();
+    threadAppenders[0].setPopoverInfo(longTask, infoForLongEvent);
     assert.strictEqual(infoForLongEvent.formattedTime, '1.30\u00A0s (self 47\u00A0μs)');
   });
 
@@ -302,18 +293,20 @@ describeWithEnvironment('ThreadAppender', function() {
     if (!events) {
       throw new Error('Could not find renderer events');
     }
-    const infoForShortEvent = threadAppenders[0].highlightedEntryInfo(events[0]);
+    const infoForShortEvent = getDefaultInfo();
+    threadAppenders[0].setPopoverInfo(events[0], infoForShortEvent);
     assert.strictEqual(infoForShortEvent.formattedTime, '0.27\u00A0ms');
 
     const longTask = events.find(e => (e.dur || 0) > 1_000_000);
     if (!longTask) {
       throw new Error('Could not find long task');
     }
-    const infoForLongEvent = threadAppenders[0].highlightedEntryInfo(longTask);
+    const infoForLongEvent = getDefaultInfo();
+    threadAppenders[0].setPopoverInfo(longTask, infoForLongEvent);
     assert.strictEqual(infoForLongEvent.formattedTime, '1.30\u00A0s (self 47\u00A0μs)');
   });
 
-  it('shows the correct title for a profile call when hovered', async function() {
+  it('shows the right time for a profile call when hovered', async function() {
     const {threadAppenders, parsedTrace} = await renderThreadAppendersFromTrace(this, 'simple-js-program.json.gz');
     const rendererHandler = parsedTrace.Renderer;
     if (!rendererHandler) {
@@ -327,8 +320,8 @@ describeWithEnvironment('ThreadAppender', function() {
       throw new Error('Could not find renderer events');
     }
 
-    const info = threadAppenders[0].highlightedEntryInfo(profileCalls[0]);
-    assert.strictEqual(info.title, '(anonymous)');
+    const info = getDefaultInfo();
+    threadAppenders[0].setPopoverInfo(profileCalls[0], info);
     assert.strictEqual(info.formattedTime, '15\u00A0μs');
   });
   it('candy-stripes long tasks', async function() {
@@ -488,7 +481,7 @@ describeWithEnvironment('ThreadAppender', function() {
       assert.deepEqual(flameChartData.entryStartTimes, [0.1, 0.1, 0.1, 0.2]);
       assert.deepEqual(flameChartData.entryTotalTimes, [0.2, 0.1, 0.025, 0.1]);
       assert.strictEqual(threadAppenders.length, 1);
-      assert.strictEqual(threadAppenders[0].titleForEvent(callFrameB), 'On ignore list');
+      assert.strictEqual(threadAppenders[0].titleForEvent(callFrameB), 'On ignore list (\\\/bundled\\.js$)');
     });
   });
   describe('showAllEvents', () => {