chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -9,7 +9,7 @@ import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
+  type PopoverInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -148,12 +148,11 @@ export class InteractionsTrackAppender implements TrackAppender {
     return this.#colorGenerator.colorForID(idForColorGeneration);
   }
 
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
+  setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
     if (Trace.Types.Events.isSyntheticInteraction(event)) {
       const breakdown = new Components.InteractionBreakdown.InteractionBreakdown();
       breakdown.entry = event;
-      return {title: '', formattedTime: '', additionalElement: breakdown};
+      info.additionalElements.push(breakdown);
     }
-    return {title: '', formattedTime: ''};
   }
 }

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -13,7 +13,7 @@ import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
   type DrawOverride,
-  type HighlightedEntryInfo,
+  type PopoverInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -143,31 +143,25 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
     return '';
   }
 
-  /**
-   * Returns the info shown when an event added by this appender
-   * is hovered in the timeline.
-   */
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
+  setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
     const score = Trace.Types.Events.isLayoutShift(event)       ? event.args.data?.weighted_score_delta ?? 0 :
         Trace.Types.Events.isSyntheticLayoutShiftCluster(event) ? event.clusterCumulativeScore :
                                                                   -1;
-    const title = Trace.Types.Events.isLayoutShift(event)       ? i18nString(UIStrings.layoutShift) :
+    // Score isn't a duration, but the UI works anyhow.
+    info.formattedTime = score.toFixed(4);
+    info.title = Trace.Types.Events.isLayoutShift(event)        ? i18nString(UIStrings.layoutShift) :
         Trace.Types.Events.isSyntheticLayoutShiftCluster(event) ? i18nString(UIStrings.layoutShiftCluster) :
                                                                   event.name;
 
-    let additionalElement;
     if (Trace.Types.Events.isSyntheticLayoutShift(event)) {
       // Screenshots are max 500x500 naturally, but on a laptop in dock-to-right, 500px tall usually doesn't fit.
       // In the future, we may investigate a way to dynamically scale this tooltip content per available space.
       const maxSize = new UI.Geometry.Size(510, 400);
       const vizElem = LayoutShiftsTrackAppender.createShiftViz(event, this.#parsedTrace, maxSize);
       if (vizElem) {
-        additionalElement = vizElem;
+        info.additionalElements.push(vizElem);
       }
     }
-
-    // Score isn't a duration, but the UI works anyhow.
-    return {title, formattedTime: score.toFixed(4), additionalElement};
   }
 
   getDrawOverride(event: Trace.Types.Events.Event): DrawOverride|undefined {

package/front_end/panels/timeline/README.md

@@ -100,7 +100,7 @@ To remove one or some overlays, check out the `remove()` or `removeOverlaysOfTyp
 
 ### Creating a new overlay
 
-To create a new overlay, first define its type. This is done as an interface, and must contain a `type` field.
+To create a new overlay, add it in the `OverlaysImpl.ts` file, first define its type. This is done as an interface, and must contain a `type` field.
 
 All other fields are completely custom and depend on the specifics of the overlay.
 
@@ -115,6 +115,7 @@ export interface EntrySelected {
 ```
 
 Once you have done this, add the interface to the union type `TimelineOverlay`. This will likely trigger some TypeScript errors because there are some places in the code where we check we have exhaustively dealt with every possible overlay type.
+Also if you want to make this overlay a singleton, add the interface to the union type `SingletonOverlay`.
 
 When you create an overlay by default it will be created as a `div` with a class, and no contents. Sometimes this is all you need (for example, the `ENTRY_SELECTED` outline has no other HTML), but if you need more you can tell the Overlays class what DOM to create for your overlay. To do this, modify the `#createElementForNewOverlay` method. You will see examples there of how we use custom elements to build out overlays.
 

package/front_end/panels/timeline/ServerTimingsTrackAppender.ts

@@ -6,10 +6,9 @@ import * as Root from '../../core/root/root.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
+import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -90,12 +89,4 @@ export class ServerTimingsTrackAppender implements TrackAppender {
   titleForEvent(event: Trace.Types.Events.Event): string {
     return event.name;
   }
-
-  /**
-   * Returns the info shown when an event added by this appender
-   * is hovered in the timeline.
-   */
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
-    return {title: event.name, formattedTime: getFormattedTime(event.dur)};
-  }
 }

package/front_end/panels/timeline/ThreadAppender.ts

@@ -19,7 +19,7 @@ import {
 import {
   type CompatibilityTracksAppender,
   entryIsVisibleInTimeline,
-  type HighlightedEntryInfo,
+  type PopoverInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -29,10 +29,11 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description Text shown for an entry in the flame chart that is ignored because it matches
+   * @description Text shown for an entry in the flame chart that is ignored because it matches
    * a predefined ignore list.
+   * @example {/analytics\.js$} rule
    */
-  onIgnoreList: 'On ignore list',
+  onIgnoreList: 'On ignore list ({rule})',
   /**
    * @description Refers to the "Main frame", meaning the top level frame. See https://www.w3.org/TR/html401/present/frames.html
    * @example{example.com} PH1
@@ -571,26 +572,22 @@ export class ThreadAppender implements TrackAppender {
    */
   titleForEvent(entry: Trace.Types.Events.Event): string {
     if (Utils.IgnoreList.isIgnoreListedEntry(entry)) {
-      return i18nString(UIStrings.onIgnoreList);
+      const rule = Utils.IgnoreList.getIgnoredReasonString(entry);
+      return i18nString(UIStrings.onIgnoreList, {rule});
     }
     return Utils.EntryName.nameForEntry(entry, this.#parsedTrace);
   }
 
-  /**
-   * Returns the info shown when an event added by this appender
-   * is hovered in the timeline.
-   */
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
-    let title = this.titleForEvent(event);
+  setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
     if (Trace.Types.Events.isParseHTML(event)) {
       const startLine = event.args['beginData']['startLine'];
       const endLine = event.args['endData'] && event.args['endData']['endLine'];
       const eventURL = event.args['beginData']['url'] as Platform.DevToolsPath.UrlString;
       const url = Bindings.ResourceUtils.displayNameForURL(eventURL);
       const range = (endLine !== -1 || endLine === startLine) ? `${startLine}...${endLine}` : startLine;
-      title += ` - ${url} [${range}]`;
+      info.title += ` - ${url} [${range}]`;
     }
     const selfTime = this.#parsedTrace.Renderer.entryToNode.get(event)?.selfTime;
-    return {title, formattedTime: getFormattedTime(event.dur, selfTime)};
+    info.formattedTime = getFormattedTime(event.dur, selfTime);
   }
 }

package/front_end/panels/timeline/TimelineController.ts

@@ -8,7 +8,6 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Extensions from '../../models/extensions/extensions.js';
 import * as LiveMetrics from '../../models/live-metrics/live-metrics.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 
 const UIStrings = {
@@ -144,9 +143,21 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     if (this.tracingManager) {
       this.tracingManager.stop();
     }
+    // When throttling is applied to the main renderer, it can slow down the
+    // collection of trace events once tracing has completed. Therefore we
+    // temporarily disable throttling whilst the final trace event collection
+    // takes place. Once it is done, we re-enable it (this is the existing
+    // behaviour within DevTools; the throttling settling is sticky + global).
+    const throttlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance();
+    const rateDuringRecording = throttlingManager.cpuThrottlingRate();
+    // 1 = no throttling (CPU is 1x'd)
+    throttlingManager.setCPUThrottlingRate(1);
 
     this.client.loadingStarted();
     await this.waitForTracingToStop();
+
+    // Now we re-enable throttling again to maintain the setting being persistent.
+    throttlingManager.setCPUThrottlingRate(rateDuringRecording);
     await this.allSourcesFinished();
 
     await LiveMetrics.LiveMetrics.instance().enable();
@@ -228,9 +239,8 @@ export interface Client {
   processingStarted(): void;
   loadingProgress(progress?: number): void;
   loadingComplete(
-      collectedEvents: Trace.Types.Events.Event[],
-      exclusiveFilter: TimelineModel.TimelineModelFilter.TimelineModelFilter|null, isCpuProfile: boolean,
-      recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void>;
+      collectedEvents: Trace.Types.Events.Event[], exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null,
+      isCpuProfile: boolean, recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void>;
   loadingCompleteForTest(): void;
 }
 export interface RecordingOptions {

package/front_end/panels/timeline/TimelineDetailsView.test.ts

@@ -122,7 +122,8 @@ describeWithEnvironment('TimelineDetailsView', function() {
     );
     await detailsView.setSelection(selection);
     const detailsContentElement = detailsView.getDetailsContentElementForTest();
-    const title = detailsContentElement.querySelector<HTMLElement>('.timeline-details-chip-title');
-    assert.strictEqual(title?.innerText, 'Range:  0 ms – 5.39 s');
+    const component = detailsContentElement.querySelector<HTMLElement>('devtools-performance-timeline-summary');
+    const range = component?.shadowRoot?.querySelector<HTMLElement>('.summary-range');
+    assert.strictEqual(range?.innerText, 'Range:  0 ms – 5.39 s');
   });
 });

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -27,8 +27,8 @@ import {
   type TimelineSelection,
 } from './TimelineSelection.js';
 import {TimelineSelectorStatsView} from './TimelineSelectorStatsView.js';
-import {BottomUpTimelineTreeView, CallTreeTimelineTreeView, type TimelineTreeView} from './TimelineTreeView.js';
-import {TimelineDetailsContentHelper, TimelineUIUtils} from './TimelineUIUtils.js';
+import {BottomUpTimelineTreeView, CallTreeTimelineTreeView, TimelineTreeView} from './TimelineTreeView.js';
+import {TimelineUIUtils} from './TimelineUIUtils.js';
 
 const UIStrings = {
   /**
@@ -55,12 +55,6 @@ const UIStrings = {
    *@description Title of the Layers tool
    */
   layers: 'Layers',
-  /**
-   *@description Text in Timeline Details View of the Performance panel
-   *@example {1ms} PH1
-   *@example {10ms} PH2
-   */
-  rangeSS: 'Range:  {PH1} – {PH2}',
   /**
    *@description Title of the selector stats tab
    */
@@ -68,7 +62,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class TimelineDetailsView extends UI.Widget.VBox {
+export class TimelineDetailsView extends
+    Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
   private readonly detailsLinkifier: Components.Linkifier.Linkifier;
   private tabbedPane: UI.TabbedPane.TabbedPane;
   private readonly defaultDetailsWidget: UI.Widget.VBox;
@@ -126,6 +121,12 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     this.appendTab(Tab.EventLog, i18nString(UIStrings.eventLog), eventsView);
     this.rangeDetailViews.set(Tab.EventLog, eventsView);
 
+    this.rangeDetailViews.values().forEach(view => {
+      view.addEventListener(
+          TimelineTreeView.Events.TREE_ROW_HOVERED,
+          node => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.data));
+    });
+
     this.#networkRequestDetails =
         new TimelineComponents.NetworkRequestDetails.NetworkRequestDetails(this.detailsLinkifier);
 
@@ -153,6 +154,12 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     return this.defaultDetailsContentElement;
   }
 
+  revealEventInTreeView(event: Trace.Types.Events.Event|null): void {
+    if (this.tabbedPane.visibleView instanceof TimelineTreeView) {
+      this.tabbedPane.visibleView.highlightEventInTree(event);
+    }
+  }
+
   async #onTraceBoundsChange(event: TraceBounds.TraceBounds.StateChangedEvent): Promise<void> {
     if (event.updateType === 'MINIMAP_BOUNDS') {
       // If new minimap bounds are set, we might need to update the selected entry summary because
@@ -475,14 +482,8 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     const aggregatedStats = TimelineUIUtils.statsForTimeRange(this.#selectedEvents, startTime, endTime);
     const startOffset = startTime - minBoundsMilli;
     const endOffset = endTime - minBoundsMilli;
-
-    const contentHelper = new TimelineDetailsContentHelper(null, null);
-    contentHelper.addSection(i18nString(
-        UIStrings.rangeSS,
-        {PH1: i18n.TimeUtilities.millisToString(startOffset), PH2: i18n.TimeUtilities.millisToString(endOffset)}));
-    const pieChart = TimelineUIUtils.generatePieChart(aggregatedStats);
-    contentHelper.appendElementRow('', pieChart);
-    this.setContent(contentHelper.fragment);
+    const summaryDetails = TimelineUIUtils.generateSummaryDetails(aggregatedStats, startOffset, endOffset);
+    this.setContent(summaryDetails);
 
     // Find all recalculate style events data from range
     const isSelectorStatsEnabled =

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -29,7 +29,6 @@
  */
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
@@ -516,7 +515,7 @@ export class TimelineFilmStripOverview extends TimelineEventOverview {
     if (!calculator) {
       return null;
     }
-    const timeMilliSeconds = Trace.Types.Timing.MilliSeconds(calculator.positionToTime(x));
+    const timeMilliSeconds = calculator.positionToTime(x);
     const timeMicroSeconds = Trace.Helpers.Timing.millisecondsToMicroseconds(timeMilliSeconds);
     const frame = Trace.Extras.FilmStrip.frameClosestToTimestamp(this.#filmStrip, timeMicroSeconds);
     if (frame === this.lastFrame) {
@@ -660,8 +659,8 @@ export class TimelineEventOverviewMemory extends TimelineEventOverview {
     ctx.stroke();
 
     this.heapSizeLabel.textContent = i18nString(UIStrings.sSDash, {
-      PH1: Platform.NumberUtilities.bytesToString(minUsedHeapSize),
-      PH2: Platform.NumberUtilities.bytesToString(maxUsedHeapSize),
+      PH1: i18n.ByteUtilities.bytesToString(minUsedHeapSize),
+      PH2: i18n.ByteUtilities.bytesToString(maxUsedHeapSize),
     });
   }
 }

package/front_end/panels/timeline/TimelineFilters.ts

@@ -2,12 +2,11 @@
 // 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 {TimelineUIUtils} from './TimelineUIUtils.js';
 
-export class IsLong extends TimelineModel.TimelineModelFilter.TimelineModelFilter {
+export class IsLong extends Trace.Extras.TraceFilter.TraceFilter {
   #minimumRecordDurationMilli = Trace.Types.Timing.MilliSeconds(0);
   constructor() {
     super();
@@ -23,7 +22,7 @@ export class IsLong extends TimelineModel.TimelineModelFilter.TimelineModelFilte
   }
 }
 
-export class Category extends TimelineModel.TimelineModelFilter.TimelineModelFilter {
+export class Category extends Trace.Extras.TraceFilter.TraceFilter {
   constructor() {
     super();
   }
@@ -33,7 +32,7 @@ export class Category extends TimelineModel.TimelineModelFilter.TimelineModelFil
   }
 }
 
-export class TimelineRegExp extends TimelineModel.TimelineModelFilter.TimelineModelFilter {
+export class TimelineRegExp extends Trace.Extras.TraceFilter.TraceFilter {
   private regExpInternal!: RegExp|null;
   constructor(regExp?: RegExp) {
     super();

package/front_end/panels/timeline/TimelineFlameChartDataProvider.test.ts

@@ -214,7 +214,7 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     const filter = new Timeline.TimelineFilters.TimelineRegExp(/Evaluate script/);
     const results = dataProvider.search(bounds, filter);
     assert.lengthOf(results, 12);
-    assert.deepEqual(results[0], {index: 154, startTimeMilli: 122411041.395, provider: 'main'});
+    assert.deepEqual(results[0], {index: 153, startTimeMilli: 122411041.395, provider: 'main'});
   });
 
   it('delete annotations associated with an event', async function() {

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -32,7 +32,6 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -185,6 +184,22 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     });
     Utils.ImageCache.emitter.addEventListener(
         'screenshot-loaded', () => this.dispatchEventToListeners(Events.DATA_CHANGED));
+
+    Common.Settings.Settings.instance()
+        .moduleSetting('skip-stack-frames-pattern')
+        .addChangeListener(this.#onIgnoreListChanged.bind(this));
+    Common.Settings.Settings.instance()
+        .moduleSetting('skip-content-scripts')
+        .addChangeListener(this.#onIgnoreListChanged.bind(this));
+    Common.Settings.Settings.instance()
+        .moduleSetting('automatically-ignore-list-known-third-party-scripts')
+        .addChangeListener(this.#onIgnoreListChanged.bind(this));
+    Common.Settings.Settings.instance()
+        .moduleSetting('enable-ignore-listing')
+        .addChangeListener(this.#onIgnoreListChanged.bind(this));
+    Common.Settings.Settings.instance()
+        .moduleSetting('skip-anonymous-scripts')
+        .addChangeListener(this.#onIgnoreListChanged.bind(this));
   }
 
   hasTrackConfigurationMode(): boolean {
@@ -218,8 +233,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       return;
     }
 
-    // TODO(crbug.com/368240754): Temporarily use soft menu for the shortcuts to show, till the accelerators backend CLs land.
-    const contextMenu = new UI.ContextMenu.ContextMenu(event, {useSoftMenu: true});
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
 
     // This action and its 'execute' is defined in `freestyler-meta`
     const actionIdDrJ = 'drjones.performance-panel-context';
@@ -245,7 +259,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       disabled: !possibleActions?.[PerfUI.FlameChart.FilterAction.MERGE_FUNCTION],
       jslogContext: 'hide-function',
     });
-    hideEntryOption.setShortcut('H');
     hideEntryOption.setAccelerator(UI.KeyboardShortcut.Keys.H, [UI.KeyboardShortcut.Modifiers.None]);
     hideEntryOption.setIsDevToolsPerformanceMenuItem(true);
 
@@ -255,7 +268,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       disabled: !possibleActions?.[PerfUI.FlameChart.FilterAction.COLLAPSE_FUNCTION],
       jslogContext: 'hide-children',
     });
-    hideChildrenOption.setShortcut('C');
     hideChildrenOption.setAccelerator(UI.KeyboardShortcut.Keys.C, [UI.KeyboardShortcut.Modifiers.None]);
     hideChildrenOption.setIsDevToolsPerformanceMenuItem(true);
 
@@ -266,7 +278,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
           disabled: !possibleActions?.[PerfUI.FlameChart.FilterAction.COLLAPSE_REPEATING_DESCENDANTS],
           jslogContext: 'hide-repeating-children',
         });
-    hideRepeatingChildrenOption.setShortcut('R');
     hideRepeatingChildrenOption.setAccelerator(UI.KeyboardShortcut.Keys.R, [UI.KeyboardShortcut.Modifiers.None]);
     hideRepeatingChildrenOption.setIsDevToolsPerformanceMenuItem(true);
 
@@ -276,7 +287,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       disabled: !possibleActions?.[PerfUI.FlameChart.FilterAction.RESET_CHILDREN],
       jslogContext: 'reset-children',
     });
-    resetChildrenOption.setShortcut('U');
     resetChildrenOption.setAccelerator(UI.KeyboardShortcut.Keys.U, [UI.KeyboardShortcut.Modifiers.None]);
     resetChildrenOption.setIsDevToolsPerformanceMenuItem(true);
 
@@ -298,16 +308,14 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     if (Utils.IgnoreList.isIgnoreListedEntry(entry)) {
       contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeScriptFromIgnoreList), () => {
         Bindings.IgnoreListManager.IgnoreListManager.instance().unIgnoreListURL(url);
-        this.timelineData(/* rebuild= */ true);
-        this.dispatchEventToListeners(Events.DATA_CHANGED);
+        this.#onIgnoreListChanged();
       }, {
         jslogContext: 'remove-from-ignore-list',
       });
     } else {
       contextMenu.defaultSection().appendItem(i18nString(UIStrings.addScriptToIgnoreList), () => {
         Bindings.IgnoreListManager.IgnoreListManager.instance().ignoreListURL(url);
-        this.timelineData(/* rebuild= */ true);
-        this.dispatchEventToListeners(Events.DATA_CHANGED);
+        this.#onIgnoreListChanged();
       }, {
         jslogContext: 'add-to-ignore-list',
       });
@@ -316,6 +324,11 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return contextMenu;
   }
 
+  #onIgnoreListChanged(): void {
+    this.timelineData(/* rebuild= */ true);
+    this.dispatchEventToListeners(Events.DATA_CHANGED);
+  }
+
   entryHasAnnotations(entryIndex: number): boolean {
     const event = this.eventByIndex(entryIndex);
     if (!event) {
@@ -643,9 +656,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return this.timeSpan;
   }
 
-  search(
-      visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds,
-      filter?: TimelineModel.TimelineModelFilter.TimelineModelFilter): PerfUI.FlameChart.DataProviderSearchResult[] {
+  search(visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds, filter?: Trace.Extras.TraceFilter.TraceFilter):
+      PerfUI.FlameChart.DataProviderSearchResult[] {
     const results: PerfUI.FlameChart.DataProviderSearchResult[] = [];
     this.timelineData();
     for (let i = 0; i < this.entryData.length; ++i) {
@@ -741,11 +753,11 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return this.entryTypeByLevel[level];
   }
 
-  prepareHighlightedEntryInfo(entryIndex: number): Element|null {
+  preparePopoverElement(entryIndex: number): Element|null {
     let time = '';
     let title;
     let warningElements: Element[] = [];
-    let nameSpanTimelineInfoTime = 'timeline-info-time';
+    let timeElementClassName = 'popoverinfo-time';
     const additionalContent: HTMLElement[] = [];
 
     const entryType = this.#entryTypeForIndex(entryIndex);
@@ -756,14 +768,16 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       const event = (this.entryData[entryIndex] as Trace.Types.Events.Event);
       const timelineData = (this.timelineDataInternal as PerfUI.FlameChart.FlameChartTimelineData);
       const eventLevel = timelineData.entryLevels[entryIndex];
-      const highlightedEntryInfo = this.compatibilityTracksAppender.highlightedEntryInfo(event, eventLevel);
-      title = highlightedEntryInfo.title;
-      time = highlightedEntryInfo.formattedTime;
-      warningElements = highlightedEntryInfo.warningElements || warningElements;
-      if (highlightedEntryInfo.additionalElement) {
-        additionalContent.push(highlightedEntryInfo.additionalElement);
+      const popoverInfo = this.compatibilityTracksAppender.popoverInfo(event, eventLevel);
+      title = popoverInfo.title;
+      time = popoverInfo.formattedTime;
+      warningElements = popoverInfo.warningElements || warningElements;
+      if (popoverInfo.additionalElements?.length) {
+        additionalContent.push(...popoverInfo.additionalElements);
       }
 
+      this.dispatchEventToListeners(Events.FLAME_CHART_ITEM_HOVERED, event);
+
     } else if (entryType === EntryType.FRAME) {
       const frame = (this.entryData[entryIndex] as Trace.Types.Events.LegacyTimelineFrame);
       time =
@@ -772,40 +786,35 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       if (frame.idle) {
         title = i18nString(UIStrings.idleFrame);
       } else if (frame.dropped) {
-        if (frame.isPartial) {
-          title = i18nString(UIStrings.partiallyPresentedFrame);
-        } else {
-          title = i18nString(UIStrings.droppedFrame);
-        }
-        nameSpanTimelineInfoTime = 'timeline-info-warning';
+        title = frame.isPartial ? i18nString(UIStrings.partiallyPresentedFrame) : i18nString(UIStrings.droppedFrame);
+        timeElementClassName = 'popoverinfo-warning';
       } else {
         title = i18nString(UIStrings.frame);
       }
     } else {
+      this.dispatchEventToListeners(Events.FLAME_CHART_ITEM_HOVERED, null);
       return null;
     }
 
-    const element = document.createElement('div');
-    const root = UI.UIUtils.createShadowRootWithCoreStyles(element, {
+    const popoverElement = document.createElement('div');
+    const root = UI.UIUtils.createShadowRootWithCoreStyles(popoverElement, {
       cssFile: [timelineFlamechartPopoverStyles],
       delegatesFocus: undefined,
     });
-    const contents = root.createChild('div', 'timeline-flamechart-popover');
-    contents.createChild('span', nameSpanTimelineInfoTime).textContent = time;
-    contents.createChild('span', 'timeline-info-title').textContent = title;
-    if (warningElements) {
-      for (const warningElement of warningElements) {
-        warningElement.classList.add('timeline-info-warning');
-        contents.appendChild(warningElement);
-      }
+    const popoverContents = root.createChild('div', 'timeline-flamechart-popover');
+    popoverContents.createChild('span', timeElementClassName).textContent = time;
+    popoverContents.createChild('span', 'popoverinfo-title').textContent = title;
+    for (const warningElement of warningElements) {
+      warningElement.classList.add('popoverinfo-warning');
+      popoverContents.appendChild(warningElement);
     }
     for (const elem of additionalContent) {
-      contents.appendChild(elem);
+      popoverContents.appendChild(elem);
     }
-    return element;
+    return popoverElement;
   }
 
-  prepareHighlightedHiddenEntriesArrowInfo(entryIndex: number): Element|null {
+  preparePopoverForCollapsedArrow(entryIndex: number): Element|null {
     const element = document.createElement('div');
     const root = UI.UIUtils.createShadowRootWithCoreStyles(element, {
       cssFile: [timelineFlamechartPopoverStyles],
@@ -820,7 +829,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       return null;
     }
     const contents = root.createChild('div', 'timeline-flamechart-popover');
-    contents.createChild('span', 'timeline-info-title').textContent = hiddenEntriesAmount + ' hidden';
+    contents.createChild('span', 'popoverinfo-title').textContent = hiddenEntriesAmount + ' hidden';
 
     return element;
   }
@@ -907,12 +916,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
   private drawFrame(
       entryIndex: number, context: CanvasRenderingContext2D, barX: number, barY: number, barWidth: number,
-      barHeight: number): void {
+      barHeight: number, transformColor: (color: string) => string): void {
     const hPadding = 1;
     const frame = this.entryData[entryIndex] as Trace.Types.Events.LegacyTimelineFrame;
     barX += hPadding;
     barWidth -= 2 * hPadding;
-    context.fillStyle = this.entryColor(entryIndex);
+    context.fillStyle = transformColor(this.entryColor(entryIndex));
 
     if (frame.dropped) {
       if (frame.isPartial) {
@@ -967,11 +976,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
   decorateEntry(
       entryIndex: number, context: CanvasRenderingContext2D, text: string|null, barX: number, barY: number,
-      barWidth: number, barHeight: number, unclippedBarX: number, timeToPixelRatio: number): boolean {
+      barWidth: number, barHeight: number, unclippedBarX: number, timeToPixelRatio: number,
+      transformColor: (color: string) => string): boolean {
     const entryType = this.#entryTypeForIndex(entryIndex);
 
     if (entryType === EntryType.FRAME) {
-      this.drawFrame(entryIndex, context, barX, barY, barWidth, barHeight);
+      this.drawFrame(entryIndex, context, barX, barY, barWidth, barHeight, transformColor);
       return true;
     }
 
@@ -1311,10 +1321,12 @@ export const InstantEventVisibleDurationMs = Trace.Types.Timing.MilliSeconds(0.0
 
 export const enum Events {
   DATA_CHANGED = 'DataChanged',
+  FLAME_CHART_ITEM_HOVERED = 'FlameChartItemHovered',
 }
 
 export type EventTypes = {
   [Events.DATA_CHANGED]: void,
+  [Events.FLAME_CHART_ITEM_HOVERED]: Trace.Types.Events.Event|null,
 };
 
 // an entry is a trace event, they are classified into "entry types"

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -4,7 +4,6 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -403,7 +402,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     return this.#networkTrackAppender?.webSocketIdToLevel.has(levelIndex) || false;
   }
 
-  prepareHighlightedEntryInfo(index: number): Element|null {
+  preparePopoverElement(index: number): Element|null {
     const event = this.#events[index];
     if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
       const element = document.createElement('div');
@@ -489,7 +488,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
    */
   search(
       visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds,
-      filter?: TimelineModel.TimelineModelFilter.TimelineModelFilter,
+      filter?: Trace.Extras.TraceFilter.TraceFilter,
       ): PerfUI.FlameChart.DataProviderSearchResult[] {
     const results: PerfUI.FlameChart.DataProviderSearchResult[] = [];
     for (let i = 0; i < this.#events.length; i++) {