chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -38,7 +38,6 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {CompatibilityTracksAppender, type DrawOverride, type TrackAppenderName} from './CompatibilityTracksAppender.js';
-import {ExtensionDataGatherer} from './ExtensionDataGatherer.js';
 import {initiatorsDataToDraw} from './Initiators.js';
 import {ModificationsManager} from './ModificationsManager.js';
 import {ThreadAppender} from './ThreadAppender.js';
@@ -109,24 +108,17 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     PerfUI.FlameChart.FlameChartDataProvider {
   private droppedFramePatternCanvas: HTMLCanvasElement;
   private partialFramePatternCanvas: HTMLCanvasElement;
-  private timelineDataInternal: PerfUI.FlameChart.FlameChartTimelineData|null;
-  private currentLevel: number;
-
-  // The Performance and the Timeline models are expected to be
-  // deprecated in favor of using parsedTrace (new RPP engine) only
-  // as part of the work in crbug.com/1386091. For this reason they
-  // have the "legacy" prefix on their name.
-  private compatibilityTracksAppender: CompatibilityTracksAppender|null;
-  private parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+  private timelineDataInternal: PerfUI.FlameChart.FlameChartTimelineData|null = null;
+  private currentLevel = 0;
+
+  private compatibilityTracksAppender: CompatibilityTracksAppender|null = null;
+  private parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
   private isCpuProfile = false;
 
-  private minimumBoundaryInternal: number;
-  private timeSpan: number;
-  private readonly headerLevel1: PerfUI.FlameChart.GroupStyle;
-  private readonly headerLevel2: PerfUI.FlameChart.GroupStyle;
-  private readonly staticHeader: PerfUI.FlameChart.GroupStyle;
-  private framesHeader: PerfUI.FlameChart.GroupStyle;
-  private readonly screenshotsHeader: PerfUI.FlameChart.GroupStyle;
+  #minimumBoundary: number = 0;
+  private timeSpan: number = 0;
+  private readonly framesGroupStyle: PerfUI.FlameChart.GroupStyle;
+  private readonly screenshotsGroupStyle: PerfUI.FlameChart.GroupStyle;
 
   // Contains all the entries that are DRAWN onto the track. Entries that have
   // been hidden - either by a user action, or because they aren't visible at
@@ -139,42 +131,31 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   // Trace.Types.Events.Event directly. See crrev.com/c/5973695 for details.
   private entryData: Trace.Types.Events.Event[] = [];
 
-  private entryTypeByLevel!: EntryType[];
-  private entryIndexToTitle!: string[];
-  private lastInitiatorEntry!: number;
+  private entryTypeByLevel: EntryType[] = [];
+  private entryIndexToTitle: string[] = [];
+  private lastInitiatorEntry: number = -1;
   private lastInitiatorsData: PerfUI.FlameChart.FlameChartInitiatorData[] = [];
-  private lastSelection?: Selection;
-  #font: string;
+
+  private lastSelection: Selection|null = null;
+  readonly #font = `${PerfUI.Font.DEFAULT_FONT_SIZE} ${PerfUI.Font.getFontFamilyForCanvas()}`;
   #eventIndexByEvent: WeakMap<Trace.Types.Events.Event, number|null> = new WeakMap();
 
   constructor() {
     super();
     this.reset();
-    this.#font = `${PerfUI.Font.DEFAULT_FONT_SIZE} ${PerfUI.Font.getFontFamilyForCanvas()}`;
+
     this.droppedFramePatternCanvas = document.createElement('canvas');
     this.partialFramePatternCanvas = document.createElement('canvas');
     this.preparePatternCanvas();
-    this.timelineDataInternal = null;
-    this.currentLevel = 0;
-    this.compatibilityTracksAppender = null;
-    this.parsedTrace = null;
-    this.minimumBoundaryInternal = 0;
-    this.timeSpan = 0;
 
-    this.headerLevel1 = this.buildGroupStyle({shareHeaderLine: false});
-    this.headerLevel2 = this.buildGroupStyle({padding: 2, nestingLevel: 1, collapsible: false});
-    this.staticHeader = this.buildGroupStyle({collapsible: false});
-    this.framesHeader = this.buildGroupStyle({useFirstLineForOverview: true});
-    this.screenshotsHeader =
+    this.framesGroupStyle = this.buildGroupStyle({useFirstLineForOverview: true});
+    this.screenshotsGroupStyle =
         this.buildGroupStyle({useFirstLineForOverview: true, nestingLevel: 1, collapsible: false, itemsHeight: 150});
 
     ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
       const headers = [
-        this.headerLevel1,
-        this.headerLevel2,
-        this.staticHeader,
-        this.framesHeader,
-        this.screenshotsHeader,
+        this.framesGroupStyle,
+        this.screenshotsGroupStyle,
       ];
       for (const header of headers) {
         header.color = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-on-surface');
@@ -184,6 +165,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 {
@@ -292,16 +289,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',
       });
@@ -310,6 +305,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) {
@@ -382,19 +382,15 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return Object.assign(defaultGroupStyle, extra);
   }
 
-  setModel(parsedTrace: Trace.Handlers.Types.ParsedTrace|null, isCpuProfile = false): void {
+  setModel(parsedTrace: Trace.Handlers.Types.ParsedTrace, isCpuProfile = false): void {
     this.reset();
     this.parsedTrace = parsedTrace;
-    ExtensionDataGatherer.instance().modelChanged(parsedTrace);
-
     this.isCpuProfile = isCpuProfile;
-    if (parsedTrace) {
-      const {traceBounds} = parsedTrace.Meta;
-      const minTime = Trace.Helpers.Timing.microSecondsToMilliseconds(traceBounds.min);
-      const maxTime = Trace.Helpers.Timing.microSecondsToMilliseconds(traceBounds.max);
-      this.minimumBoundaryInternal = minTime;
-      this.timeSpan = minTime === maxTime ? 1000 : maxTime - this.minimumBoundaryInternal;
-    }
+    const {traceBounds} = parsedTrace.Meta;
+    const minTime = Trace.Helpers.Timing.microSecondsToMilliseconds(traceBounds.min);
+    const maxTime = Trace.Helpers.Timing.microSecondsToMilliseconds(traceBounds.max);
+    this.#minimumBoundary = minTime;
+    this.timeSpan = minTime === maxTime ? 1000 : maxTime - this.#minimumBoundary;
   }
 
   /**
@@ -432,7 +428,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   /**
    * Builds the flame chart data using the track appenders
    */
-  buildFromTrackAppenders(options?: {filterThreadsByName?: string, expandedTracks?: Set<TrackAppenderName>}): void {
+  buildFromTrackAppendersForTest(options?: {filterThreadsByName?: string, expandedTracks?: Set<TrackAppenderName>}):
+      void {
     if (!this.compatibilityTracksAppender) {
       return;
     }
@@ -487,26 +484,42 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return this.#font;
   }
 
-  // resetCompatibilityTracksAppender boolean set to false does not recreate the thread appenders
-  reset(resetCompatibilityTracksAppender: boolean = true): void {
+  // Clear the cache and rebuild the timeline data
+  // This should be called when the trace file is the same but we want to rebuild the timeline date.
+  // Some possible example: when we hide/unhide an event, or the ignore list is changed etc.
+  clearTimelineDataCache(): void {
     this.currentLevel = 0;
     this.entryData = [];
     this.entryTypeByLevel = [];
     this.entryIndexToTitle = [];
     this.#eventIndexByEvent = new Map();
 
-    if (resetCompatibilityTracksAppender) {
-      this.compatibilityTracksAppender?.reset();
-      this.compatibilityTracksAppender = null;
-      this.timelineDataInternal = null;
-    } else if (!resetCompatibilityTracksAppender && this.timelineDataInternal) {
+    if (this.timelineDataInternal) {
       this.compatibilityTracksAppender?.setFlameChartDataAndEntryData(
           this.timelineDataInternal, this.entryData, this.entryTypeByLevel);
       this.compatibilityTracksAppender?.threadAppenders().forEach(
           threadAppender => threadAppender.setHeaderAppended(false));
     }
+  }
 
-    ExtensionDataGatherer.removeInstance();
+  // Reset all data other than the UI elements.
+  // This should be called when
+  // - initialized the data provider
+  // - a new trace file is coming (when `setModel()` is called)
+  // etc.
+  reset(): void {
+    this.currentLevel = 0;
+    this.entryData = [];
+    this.entryTypeByLevel = [];
+    this.entryIndexToTitle = [];
+    this.#eventIndexByEvent = new Map();
+    this.#minimumBoundary = 0;
+    this.timeSpan = 0;
+
+    this.compatibilityTracksAppender?.reset();
+    this.compatibilityTracksAppender = null;
+    this.timelineDataInternal = null;
+    this.parsedTrace = null;
   }
 
   maxStackDepth(): number {
@@ -515,20 +528,21 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
   /**
    * Builds the flame chart data using the tracks appender (which use
-   * the new trace engine) and the legacy code paths present in this
-   * file. The result built data is cached and returned.
+   * the new trace engine). The result built data is cached and returned.
    */
   timelineData(rebuild: boolean = false): PerfUI.FlameChart.FlameChartTimelineData {
-    if (this.timelineDataInternal && this.timelineDataInternal.entryLevels.length !== 0 && !rebuild) {
-      // The flame chart data is built already, so return the cached
-      // data.
+    if (!rebuild && this.timelineDataInternal && this.timelineDataInternal.entryLevels.length !== 0) {
+      // If the flame chart data is built already and we don't want to rebuild, we can return the cached data.
+      // |entryLevels.length| is used to check if the cached data is not empty (correctly built),
       return this.timelineDataInternal;
     }
 
     this.timelineDataInternal = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
 
     if (rebuild) {
-      this.reset(/* resetCompatibilityTracksAppender= */ false);
+      // This function will interact with the |compatibilityTracksAppender|, which needs the reference of
+      // |timelineDataInternal|, so make sure this is called after the correct |timelineDataInternal|.
+      this.clearTimelineDataCache();
     }
 
     this.currentLevel = 0;
@@ -630,7 +644,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   minimumBoundary(): number {
-    return this.minimumBoundaryInternal;
+    return this.#minimumBoundary;
   }
 
   totalTime(): number {
@@ -684,10 +698,10 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     const filmStrip = Trace.Extras.FilmStrip.fromParsedTrace(this.parsedTrace);
     const hasScreenshots = filmStrip.frames.length > 0;
 
-    this.framesHeader.collapsible = hasScreenshots;
+    this.framesGroupStyle.collapsible = hasScreenshots;
     const expanded = Root.Runtime.Runtime.queryParam('flamechart-force-expand') === 'frames';
 
-    this.appendHeader(i18nString(UIStrings.frames), this.framesHeader, false /* selectable */, expanded);
+    this.appendHeader(i18nString(UIStrings.frames), this.framesGroupStyle, false /* selectable */, expanded);
 
     this.entryTypeByLevel[this.currentLevel] = EntryType.FRAME;
     for (const frame of this.parsedTrace.Frames.frames) {
@@ -705,7 +719,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     if (!this.timelineDataInternal || !this.parsedTrace) {
       return;
     }
-    this.appendHeader('', this.screenshotsHeader, false /* selectable */);
+    this.appendHeader('', this.screenshotsGroupStyle, false /* selectable */);
     this.entryTypeByLevel[this.currentLevel] = EntryType.SCREENSHOT;
     let prevTimestamp: Trace.Types.Timing.MilliSeconds|undefined = undefined;
 
@@ -734,11 +748,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);
@@ -749,14 +763,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 =
@@ -765,45 +781,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, {
-      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 popoverElement = document.createElement('div');
+    const root =
+        UI.UIUtils.createShadowRootWithCoreStyles(popoverElement, {cssFile: [timelineFlamechartPopoverStyles]});
+    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],
-      delegatesFocus: undefined,
-    });
+    const root = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [timelineFlamechartPopoverStyles]});
 
     const entry = this.entryData[entryIndex] as Trace.Types.Events.Event;
     const hiddenEntriesAmount =
@@ -813,7 +819,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;
   }
@@ -900,12 +906,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) {
@@ -960,11 +966,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;
     }
 
@@ -1304,10 +1311,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.test.ts

@@ -20,7 +20,7 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
     dataProvider.setWindowTimes(minTime, maxTime);
 
     // TimelineFlameChartNetworkDataProvider only has network track, so should always be one track group.
-    assert.strictEqual(dataProvider.timelineData().groups.length, 1);
+    assert.lengthOf(dataProvider.timelineData().groups, 1);
     const networkTrackGroup = dataProvider.timelineData().groups[0];
 
     assert.deepEqual(dataProvider.minimumBoundary(), minTime);
@@ -33,7 +33,7 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
       const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(request);
       return endTime - startTime;
     });
-    assert.deepEqual(dataProvider.timelineData().entryLevels.length, 6);
+    assert.lengthOf(dataProvider.timelineData().entryLevels, 6);
     assert.deepEqual(dataProvider.timelineData().entryLevels, [0, 1, 1, 1, 1, 2]);
     assertTimestampsEqual(dataProvider.timelineData().entryStartTimes, networkEventsStartTimes);
     assertTimestampsEqual(dataProvider.timelineData().entryTotalTimes, networkEventsTotalTimes);
@@ -106,7 +106,7 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
     dataProvider.setWindowTimes(minTime, maxTime);
 
     // Network track appender won't append the network track if there is no network requests.
-    assert.strictEqual(dataProvider.timelineData().groups.length, 0);
+    assert.lengthOf(dataProvider.timelineData().groups, 0);
 
     assert.deepEqual(dataProvider.minimumBoundary(), minTime);
     assert.deepEqual(dataProvider.totalTime(), maxTime - minTime);

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -24,40 +24,47 @@ import {
 import * as TimelineUtils from './utils/utils.js';
 
 export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.FlameChartDataProvider {
-  #minimumBoundaryInternal: number;
-  #timeSpan: number;
-  #events: NetworkTrackEvent[];
-  #maxLevel: number;
-  #networkTrackAppender: NetworkTrackAppender|null;
-
-  #timelineDataInternal?: PerfUI.FlameChart.FlameChartTimelineData|null;
-  #lastSelection?: Selection;
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+  #minimumBoundary: number = 0;
+  #timeSpan: number = 0;
+  #events: NetworkTrackEvent[] = [];
+  #maxLevel: number = 0;
+  #networkTrackAppender: NetworkTrackAppender|null = null;
+
+  #timelineDataInternal: PerfUI.FlameChart.FlameChartTimelineData|null = null;
+  #lastSelection: Selection|null = null;
+  #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
   #eventIndexByEvent: Map<NetworkTrackEvent, number|null> = new Map();
   // -1 means no entry is selected.
   #lastInitiatorEntry: number = -1;
   #lastInitiatorsData: PerfUI.FlameChart.FlameChartInitiatorData[] = [];
 
   constructor() {
-    this.#minimumBoundaryInternal = 0;
+    this.reset();
+  }
+
+  // Reset all data other than the UI elements.
+  // This should be called when
+  // - initialized the data provider
+  // - a new trace file is coming (when `setModel()` is called)
+  // etc.
+  reset(): void {
+    this.#maxLevel = 0;
+    this.#minimumBoundary = 0;
     this.#timeSpan = 0;
+    this.#eventIndexByEvent.clear();
     this.#events = [];
-    this.#maxLevel = 0;
+    this.#timelineDataInternal = null;
+    this.#parsedTrace = null;
 
     this.#networkTrackAppender = null;
-    this.#parsedTrace = null;
   }
 
-  setModel(parsedTrace: Trace.Handlers.Types.ParsedTrace|null): void {
-    this.#timelineDataInternal = null;
-    this.#events = [];
+  setModel(parsedTrace: Trace.Handlers.Types.ParsedTrace): void {
+    this.reset();
     this.#parsedTrace = parsedTrace;
-    this.#eventIndexByEvent.clear();
 
-    if (this.#parsedTrace) {
-      this.setEvents(this.#parsedTrace);
-      this.#setTimingBoundsData(this.#parsedTrace);
-    }
+    this.setEvents(this.#parsedTrace);
+    this.#setTimingBoundsData(this.#parsedTrace);
   }
 
   setEvents(parsedTrace: Trace.Handlers.Types.ParsedTrace): void {
@@ -108,7 +115,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
   }
 
   minimumBoundary(): number {
-    return this.#minimumBoundaryInternal;
+    return this.#minimumBoundary;
   }
 
   totalTime(): number {
@@ -135,7 +142,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
       return;
     }
     const timelineNetworkRequest = TimelineUtils.NetworkRequest.createTimelineNetworkRequest(networkRequest);
-    const contextMenu = new UI.ContextMenu.ContextMenu(event, {useSoftMenu: true});
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.appendApplicableItems(timelineNetworkRequest);
     return contextMenu;
   }
@@ -402,14 +409,11 @@ 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');
-      const root = UI.UIUtils.createShadowRootWithCoreStyles(element, {
-        cssFile: [timelineFlamechartPopoverStyles],
-        delegatesFocus: undefined,
-      });
+      const root = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [timelineFlamechartPopoverStyles]});
 
       const contents = root.createChild('div', 'timeline-flamechart-popover');
       const infoElement = new TimelineComponents.NetworkRequestTooltip.NetworkRequestTooltip();
@@ -428,8 +432,8 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     const {traceBounds} = newParsedTrace.Meta;
     const minTime = Trace.Helpers.Timing.microSecondsToMilliseconds(traceBounds.min);
     const maxTime = Trace.Helpers.Timing.microSecondsToMilliseconds(traceBounds.max);
-    this.#minimumBoundaryInternal = minTime;
-    this.#timeSpan = minTime === maxTime ? 1000 : maxTime - this.#minimumBoundaryInternal;
+    this.#minimumBoundary = minTime;
+    this.#timeSpan = minTime === maxTime ? 1000 : maxTime - this.#minimumBoundary;
   }
 
   /**