chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

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', () => {

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

@@ -38,6 +38,17 @@ describeWithEnvironment('TimingTrackAppender', function() {
     entryTypeByLevel = [];
   });
 
+  function getMockInfo(event?: Trace.Types.Events.Event) {
+    const defaultInfo: Timeline.CompatibilityTracksAppender.PopoverInfo = {
+      title: event ? timingsTrackAppender.titleForEvent(event) : 'title',
+      formattedTime: event ? Timeline.AppenderUtils.getFormattedTime(event.dur) : 'time',
+      warningElements: [],
+      additionalElements: [],
+      url: null,
+    };
+    return defaultInfo;
+  }
+
   describe('appendTrackAtLevel', () => {
     it('marks all levels used by the track with the `TrackAppender` type', () => {
       // 8 levels should be taken:
@@ -208,12 +219,12 @@ describeWithEnvironment('TimingTrackAppender', function() {
     });
   });
 
-  describe('highlightedEntryInfo', () => {
+  describe('popoverInfo', () => {
     it('shows the time of the mark, not the duration, if the event is a performance mark', () => {
       const firstMark = parsedTrace.UserTimings.performanceMarks[0];
-      const highlightedEntryInfo = timingsTrackAppender.highlightedEntryInfo(firstMark);
-      assert.deepEqual(highlightedEntryInfo, {
-        title: '[mark]: myMark',
+      const popoverInfo = getMockInfo(firstMark);
+      timingsTrackAppender.setPopoverInfo(firstMark, popoverInfo);
+      assert.deepInclude(popoverInfo, {
         formattedTime: '1.12\u00A0s',
       });
     });
@@ -221,11 +232,10 @@ describeWithEnvironment('TimingTrackAppender', function() {
     it('shows the time of the mark for an LCP event', () => {
       const largestContentfulPaint = parsedTrace.PageLoadMetrics.allMarkerEvents.find(
           marker => marker.name === 'largestContentfulPaint::Candidate');
-      if (!largestContentfulPaint) {
-        throw new Error('Could not find LCP event');
-      }
-      const highlightedEntryInfo = timingsTrackAppender.highlightedEntryInfo(largestContentfulPaint);
-      assert.deepEqual(highlightedEntryInfo, {
+      assert.exists(largestContentfulPaint);
+      const popoverInfo = getMockInfo(largestContentfulPaint);
+      timingsTrackAppender.setPopoverInfo(largestContentfulPaint, popoverInfo);
+      assert.deepInclude(popoverInfo, {
         title: 'LCP',
         formattedTime: '2.42\u00A0s',
       });
@@ -234,11 +244,10 @@ describeWithEnvironment('TimingTrackAppender', function() {
     it('shows the time of the mark for an FCP event', () => {
       const firstContentfulPaint =
           parsedTrace.PageLoadMetrics.allMarkerEvents.find(marker => marker.name === 'firstContentfulPaint');
-      if (!firstContentfulPaint) {
-        throw new Error('Could not find FCP event');
-      }
-      const highlightedEntryInfo = timingsTrackAppender.highlightedEntryInfo(firstContentfulPaint);
-      assert.deepEqual(highlightedEntryInfo, {
+      assert.exists(firstContentfulPaint);
+      const popoverInfo = getMockInfo(firstContentfulPaint);
+      timingsTrackAppender.setPopoverInfo(firstContentfulPaint, popoverInfo);
+      assert.deepInclude(popoverInfo, {
         title: 'FCP',
         formattedTime: '2.42\u00A0s',
       });
@@ -246,11 +255,10 @@ describeWithEnvironment('TimingTrackAppender', function() {
 
     it('shows the time of the mark for a DCL event', () => {
       const dclEvent = parsedTrace.PageLoadMetrics.allMarkerEvents.find(marker => marker.name === 'MarkDOMContent');
-      if (!dclEvent) {
-        throw new Error('Could not find DCL event');
-      }
-      const highlightedEntryInfo = timingsTrackAppender.highlightedEntryInfo(dclEvent);
-      assert.deepEqual(highlightedEntryInfo, {
+      assert.exists(dclEvent);
+      const popoverInfo = getMockInfo(dclEvent);
+      timingsTrackAppender.setPopoverInfo(dclEvent, popoverInfo);
+      assert.deepInclude(popoverInfo, {
         title: 'DCL',
         formattedTime: '2.42\u00A0s',
       });
@@ -258,26 +266,29 @@ describeWithEnvironment('TimingTrackAppender', function() {
 
     it('shows the time of a console.timestamp event in the hover info', () => {
       const timestampEvent = parsedTrace.UserTimings.timestampEvents[0];
-      const highlightedEntryInfo = timingsTrackAppender.highlightedEntryInfo(timestampEvent);
+      const popoverInfo = getMockInfo(timestampEvent);
+      timingsTrackAppender.setPopoverInfo(timestampEvent, popoverInfo);
 
-      assert.deepEqual(highlightedEntryInfo, {
+      assert.deepInclude(popoverInfo, {
         title: 'TimeStamp: a timestamp',
         formattedTime: '615.25\u00A0ms',
       });
     });
 
     it('returns the info for a performance.measure calls correctly', () => {
-      const performanceMeasures = parsedTrace.UserTimings.performanceMeasures;
-      const highlightedEntryInfo = timingsTrackAppender.highlightedEntryInfo(performanceMeasures[0]);
+      const performanceMeasure = parsedTrace.UserTimings.performanceMeasures[0];
+      const popoverInfo = getMockInfo(performanceMeasure);
+      timingsTrackAppender.setPopoverInfo(performanceMeasure, popoverInfo);
       // The i18n encodes spaces using the u00A0 unicode character.
-      assert.strictEqual(highlightedEntryInfo.formattedTime, ('500.07\u00A0ms'));
+      assert.strictEqual(popoverInfo.formattedTime, ('500.07\u00A0ms'));
     });
 
     it('returns the info for a console.time calls correctly', () => {
-      const consoleTimings = parsedTrace.UserTimings.consoleTimings;
-      const highlightedEntryInfo = timingsTrackAppender.highlightedEntryInfo(consoleTimings[0]);
+      const consoleTiming = parsedTrace.UserTimings.consoleTimings[0];
+      const popoverInfo = getMockInfo(consoleTiming);
+      timingsTrackAppender.setPopoverInfo(consoleTiming, popoverInfo);
       // The i18n encodes spaces using the u00A0 unicode character.
-      assert.strictEqual(highlightedEntryInfo.formattedTime, ('1.60\u00A0s'));
+      assert.strictEqual(popoverInfo.formattedTime, ('1.60\u00A0s'));
     });
   });
 
@@ -328,8 +339,10 @@ describeWithEnvironment('TimingTrackAppender', function() {
 
     it('returns the correct color and title for extension markers', function() {
       const extensionMarkers = parsedTrace.ExtensionTraceData.extensionMarkers;
+      assert.lengthOf(extensionMarkers, 1);
       for (const event of extensionMarkers) {
-        assert.strictEqual(timingsTrackAppender.titleForEvent(event), event.name);
+        // tooltipText is supplied, so the title should be that.
+        assert.notStrictEqual(timingsTrackAppender.titleForEvent(event), event.name);
         if (event.args.color === 'error') {
           // "error" color category is mapped to --ref-palette-error50
           // which is faked out to 10, 10, 10
@@ -366,8 +379,9 @@ describeWithEnvironment('TimingTrackAppender', function() {
       const extensionMarker = parsedTrace.ExtensionTraceData.extensionMarkers.at(0);
       assert.isOk(extensionMarker, 'did not find any extension markers');
 
-      const highlightedEntryInfo = timingsTrackAppender.highlightedEntryInfo(extensionMarker);
-      assert.strictEqual(highlightedEntryInfo.title, 'A mark');
+      const popoverInfo = getMockInfo(extensionMarker);
+      timingsTrackAppender.setPopoverInfo(extensionMarker, popoverInfo);
+      assert.strictEqual(popoverInfo.title, 'A mark');
     });
     describe('toggling', function() {
       it('Does not append extension data when the configuration is set to disabled', async function() {

package/front_end/panels/timeline/utils/AICallTree.test.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 Trace from '../../../models/trace/trace.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 
@@ -77,4 +78,108 @@ self: 0.2
     const fibCallCount = lines.filter(line => line.includes('fibonacci')).length;
     assert.isTrue(fibCallCount > 10);
   });
+
+  it('AITreeFilter includes the right items in the tree', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'two-workers.json.gz');
+    const mainEvents = parsedTrace.Renderer.allTraceEntries;
+
+    // A very small 'get storage' event. It's 6µs long
+    const tinyEvent = mainEvents.find(event => event.ts === 107350149168);
+    if (!tinyEvent) {
+      throw new Error('Could not find expected event.');
+    }
+    const tinyStr = Utils.AICallTree.AICallTree.from(tinyEvent, mainEvents, parsedTrace).serialize();
+    assert.strictEqual(tinyStr.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
+Node: 1 – Task
+Node: 2 – Parse HTML
+Node: 3 – Evaluate script
+Node: 4 – (anonymous)
+Node: 5 – get storage`.trim());
+    assert.include(tinyStr, 'get storage');
+
+    // An evaluateScript that has 3 'Compile code' children
+    const evaluateEvent = mainEvents.find(event => event.ts === 107350147808);
+    if (!evaluateEvent) {
+      throw new Error('Could not find expected event.');
+    }
+    const treeStr = Utils.AICallTree.AICallTree.from(evaluateEvent, mainEvents, parsedTrace).serialize();
+    assert.strictEqual(treeStr.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
+Node: 1 – Task
+Node: 2 – Parse HTML
+Node: 3 – Evaluate script
+Node: 4 – Compile script
+Node: 5 – (anonymous)
+Node: 6 – H.la`.trim());
+    assert.notInclude(treeStr, 'Compile code');
+
+    // An Compile code event within the evaluateEvent call tree
+    const compileEvent = mainEvents.find(event => event.ts === 107350148218);
+    if (!compileEvent) {
+      throw new Error('Could not find expected event.');
+    }
+    const compileStr = Utils.AICallTree.AICallTree.from(compileEvent, mainEvents, parsedTrace).serialize();
+    assert.strictEqual(compileStr.split('\n').filter(l => l.startsWith('Node:')).join('\n'), `
+Node: 1 – Task
+Node: 2 – Parse HTML
+Node: 3 – Evaluate script
+Node: 4 – (anonymous)
+Node: 5 – Compile code`.trim());
+    assert.include(compileStr, 'Compile code');
+  });
+});
+
+describe('AITreeFilter', () => {
+  const makeEvent = (
+                        name: string,
+                        ts: number,
+                        dur: number,
+                        ): Trace.Types.Events.Event => ({
+    name,
+    cat: 'disabled-by-default-devtools.timeline',
+    ph: Trace.Types.Events.Phase.COMPLETE,
+    ts: Trace.Types.Timing.MicroSeconds(ts),
+    dur: Trace.Types.Timing.MicroSeconds(dur),
+    pid: Trace.Types.Events.ProcessID(1),
+    tid: Trace.Types.Events.ThreadID(4),
+    args: {},
+  });
+
+  it('always includes the selected event', () => {
+    const selectedEvent = makeEvent('selected', 0, 100);
+    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+    assert.strictEqual(filter.accept(selectedEvent), true);
+  });
+
+  it('includes events that are long enough', () => {
+    const selectedEvent = makeEvent('selected', 0, 100);
+    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+
+    assert.strictEqual(filter.accept(makeEvent('short', 0, 1)), true);
+    assert.strictEqual(filter.accept(makeEvent('short', 0, 0.6)), true);
+    assert.strictEqual(filter.accept(makeEvent('long', 0, 101)), true);
+    assert.strictEqual(filter.accept(makeEvent('long', 0, 200)), true);
+    assert.strictEqual(filter.accept(makeEvent('long', 0, 1000)), true);
+  });
+
+  it('excludes events that are too short', () => {
+    const selectedEvent = makeEvent('selected', 0, 100);
+    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+
+    assert.strictEqual(filter.accept(makeEvent('short', 0, 0)), false);
+    assert.strictEqual(filter.accept(makeEvent('short', 0, 0.1)), false);
+    assert.strictEqual(filter.accept(makeEvent('short', 0, 0.4)), false);
+  });
+
+  it('excludes COMPILE_CODE nodes if non-selected', () => {
+    const selectedEvent = makeEvent('selected', 0, 100);
+    const compileCodeEvent = makeEvent(Trace.Types.Events.Name.COMPILE_CODE, 0, 100);
+    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+    assert.strictEqual(filter.accept(compileCodeEvent), false);
+  });
+
+  it('includes COMPILE_CODE nodes if selected', () => {
+    const selectedEvent = makeEvent(Trace.Types.Events.Name.COMPILE_CODE, 0, 100);
+    const filter = new Utils.AICallTree.AITreeFilter(selectedEvent);
+    assert.strictEqual(filter.accept(selectedEvent), true);
+  });
 });

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

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as TimelineModel from '../../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../../models/trace/trace.js';
 
 import {nameForEntry} from './EntryName.js';
@@ -11,8 +10,7 @@ import {SourceMapsResolver} from './SourceMapsResolver.js';
 
 /** Iterates from a node down through its descendents. If the callback returns true, the loop stops. */
 function depthFirstWalk(
-    nodes: MapIterator<TimelineModel.TimelineProfileTree.Node>,
-    callback: (arg0: TimelineModel.TimelineProfileTree.Node) => void|true): void {
+    nodes: MapIterator<Trace.Extras.TraceTree.Node>, callback: (arg0: Trace.Extras.TraceTree.Node) => void|true): void {
   for (const node of nodes) {
     if (callback?.(node)) {
       break;
@@ -23,8 +21,8 @@ function depthFirstWalk(
 
 export class AICallTree {
   constructor(
-      public selectedNode: TimelineModel.TimelineProfileTree.Node,
-      public rootNode: TimelineModel.TimelineProfileTree.TopDownRootNode,
+      public selectedNode: Trace.Extras.TraceTree.Node,
+      public rootNode: Trace.Extras.TraceTree.TopDownRootNode,
       // TODO: see if we can avoid passing around this entire thing.
       public parsedTrace: Trace.Handlers.Types.ParsedTrace,
   ) {
@@ -33,25 +31,25 @@ export class AICallTree {
   static from(
       selectedEvent: Trace.Types.Events.Event, events: Trace.Types.Events.Event[],
       parsedTrace: Trace.Handlers.Types.ParsedTrace): AICallTree {
-    const timings = Trace.Helpers.Timing.eventTimingsMilliSeconds(selectedEvent);
-    const selectedEventBounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
-        Trace.Helpers.Timing.millisecondsToMicroseconds(timings.startTime),
-        Trace.Helpers.Timing.millisecondsToMicroseconds(timings.endTime));
+    const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(selectedEvent);
 
+    const selectedEventBounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+        Trace.Helpers.Timing.millisecondsToMicroseconds(startTime),
+        Trace.Helpers.Timing.millisecondsToMicroseconds(endTime));
     const threadEvents = parsedTrace.Renderer.processes.get(selectedEvent.pid)?.threads.get(selectedEvent.tid)?.entries;
     if (!threadEvents) {
       throw new Error('Cannot locate thread');
     }
     const overlappingEvents = threadEvents.filter(e => Trace.Helpers.Timing.eventIsInBounds(e, selectedEventBounds));
 
-    const visibleEventsFilter = new TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter(visibleTypes());
-    const customFilter = new AITreeFilter(timings.duration);
+    const visibleEventsFilter = new Trace.Extras.TraceFilter.VisibleEventsFilter(visibleTypes());
+    const customFilter = new AITreeFilter(selectedEvent);
     // Build a tree bounded by the selected event's timestamps, and our other filters applied
-    const rootNode = new TimelineModel.TimelineProfileTree.TopDownRootNode(
-        overlappingEvents, [visibleEventsFilter, customFilter], timings.startTime, timings.endTime, false, null);
+    const rootNode = new Trace.Extras.TraceTree.TopDownRootNode(
+        overlappingEvents, [visibleEventsFilter, customFilter], startTime, endTime, false, null, true);
 
     // Walk the tree to find selectedNode
-    let selectedNode: TimelineModel.TimelineProfileTree.Node|null = null;
+    let selectedNode: Trace.Extras.TraceTree.Node|null = null;
     depthFirstWalk([rootNode].values(), node => {
       if (node.event === selectedEvent) {
         selectedNode = node;
@@ -70,7 +68,7 @@ export class AICallTree {
 
   /** Define precisely how the call tree is serialized. Typically called from within `DrJonesPerformanceAgent` */
   serialize(): string {
-    const nodeToIdMap = new Map<TimelineModel.TimelineProfileTree.Node, number>();
+    const nodeToIdMap = new Map<Trace.Extras.TraceTree.Node, number>();
     // Keep a map of URLs. We'll output a LUT to keep size down.
     const allUrls: string[] = [];
 
@@ -90,9 +88,9 @@ export class AICallTree {
 
   /* This custom YAML-like format with an adjacency list for children is 35% more token efficient than JSON */
   static stringifyNode(
-      node: TimelineModel.TimelineProfileTree.Node, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-      selectedNode: TimelineModel.TimelineProfileTree.Node,
-      nodeToIdMap: Map<TimelineModel.TimelineProfileTree.Node, number>, allUrls: string[]): string {
+      node: Trace.Extras.TraceTree.Node, parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      selectedNode: Trace.Extras.TraceTree.Node, nodeToIdMap: Map<Trace.Extras.TraceTree.Node, number>,
+      allUrls: string[]): string {
     const event = node.event;
     if (!event) {
       throw new Error('Event required');
@@ -105,7 +103,7 @@ export class AICallTree {
 
     // Identifier string includes an id and name:
     //   eg "[13] Parse HTML" or "[45] parseCPUProfileFormatFromFile"
-    const getIdentifier = (node: TimelineModel.TimelineProfileTree.Node): string => {
+    const getIdentifier = (node: Trace.Extras.TraceTree.Node): string => {
       if (!node.event || typeof node.id !== 'string') {
         throw new Error('ok');
       }
@@ -147,16 +145,19 @@ export class AICallTree {
   }
 }
 
-export class AITreeFilter extends TimelineModel.TimelineModelFilter.TimelineModelFilter {
+export class AITreeFilter extends Trace.Extras.TraceFilter.TraceFilter {
   #minDuration: Trace.Types.Timing.MicroSeconds;
-  constructor(eventDuration: Trace.Types.Timing.MilliSeconds) {
+  #selectedEvent: Trace.Types.Events.Event;
+  constructor(selectedEvent: Trace.Types.Events.Event) {
     super();
     // The larger the selected event is, the less small ones matter. We'll exclude items under ½% of the selected event's size
-    // We'll always exclude items under 0.15ms of total time.
-    const minDurationMs = Math.max(Trace.Types.Timing.MilliSeconds(0.15), eventDuration * 0.005);
-    this.#minDuration = Trace.Helpers.Timing.millisecondsToMicroseconds(Trace.Types.Timing.MilliSeconds(minDurationMs));
+    this.#minDuration = Trace.Types.Timing.MicroSeconds((selectedEvent.dur ?? 1) * 0.005);
+    this.#selectedEvent = selectedEvent;
   }
   accept(event: Trace.Types.Events.Event): boolean {
+    if (event === this.#selectedEvent) {
+      return true;
+    }
     if (event.name === Trace.Types.Events.Name.COMPILE_CODE) {
       return false;
     }

package/front_end/panels/timeline/utils/EntryName.ts

@@ -4,7 +4,6 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
 import * as Trace from '../../../models/trace/trace.js';
 
 import {getEventStyle} from './EntryStyles.js';
@@ -81,7 +80,7 @@ export function nameForEntry(
     const parsedURL = new Common.ParsedURL.ParsedURL(entry.args.data.url);
     const text =
         parsedURL.isValid ? `${parsedURL.displayName} (${parsedURL.host})` : entry.args.data.url || 'Network request';
-    return Platform.StringUtilities.trimEndWithMaxLength(text, 40);
+    return text;
   }
 
   if (Trace.Types.Events.isWebSocketCreate(entry)) {

package/front_end/panels/timeline/utils/Helpers.ts

@@ -2,7 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/markdown_view/markdown_view.js';
+
+import type * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as Marked from '../../../third_party/marked/marked.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+const {html} = LitHtml;
 
 function createTrimmedUrlSearch(url: URL): string {
   const maxSearchValueLength = 8;
@@ -91,3 +98,15 @@ export function shortenUrl(url: URL, maxChars = 20): string {
 
   return shortenedUrl;
 }
+
+/**
+ * Returns a rendered MarkdownView component.
+ *
+ * This should only be used for markdown that is guaranteed to be valid,
+ * and not contain any user-generated content.
+ */
+export function md(markdown: Common.UIString.LocalizedString): LitHtml.TemplateResult {
+  const tokens = Marked.Marked.lexer(markdown);
+  const data = {tokens};
+  return html`<devtools-markdown-view .data=${data}></devtools-markdown-view>`;
+}