Fix inconsistencies after merging latest devtools

There are some new lint rules and events got changed around.

Author: WebCloud

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -44,21 +44,21 @@ import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
 import * as Utils from './utils/utils.js';
 
 export const enum Events {
-  TraceDataChange = 'tracedatachange',
-  TraceInsightsChange = 'traceinsightschange',
-  HightlightEventAsOvelay = 'highlighteventasoverlay',
+  TRACE_DATA_CHANGE = 'tracedatachange',
+  TRACE_INSIGHTS_CHANGE = 'traceinsightschange',
+  HIGHLIGHT_EVENT_AS_OVERLAY = 'highlighteventasoverlay',
 }
 
 export interface EventTypes {
-  [Events.TraceDataChange]: {
+  [Events.TRACE_DATA_CHANGE]: {
     traceEngineData: Trace.Handlers.Types.ParsedTrace | null,
     isCpuProfile: boolean,
   };
-  [Events.TraceInsightsChange]: {
+  [Events.TRACE_INSIGHTS_CHANGE]: {
     insights: Trace.Insights.Types.TraceInsightSets | null,
     eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap | null,
   };
-  [Events.HightlightEventAsOvelay]: {
+  [Events.HIGHLIGHT_EVENT_AS_OVERLAY]: {
     eventName: string,
     navigationId: string,
     phases: {
@@ -70,26 +70,26 @@ export interface EventTypes {
   };
 }
 
-export class TraceDataChange extends CustomEvent<EventTypes[Events.TraceDataChange]>{
-  static readonly eventName = Events.TraceDataChange;
+export class TraceDataChange extends CustomEvent<EventTypes[Events.TRACE_DATA_CHANGE]>{
+  static readonly eventName = Events.TRACE_DATA_CHANGE;
 
-  constructor(options: EventTypes[Events.TraceDataChange]) {
+  constructor(options: EventTypes[Events.TRACE_DATA_CHANGE]) {
     super(TraceDataChange.eventName, { detail: options });
   }
 }
 
-export class TraceInsightsChange extends CustomEvent<EventTypes[Events.TraceInsightsChange]>{
-  static readonly eventName = Events.TraceInsightsChange;
+export class TraceInsightsChange extends CustomEvent<EventTypes[Events.TRACE_INSIGHTS_CHANGE]>{
+  static readonly eventName = Events.TRACE_INSIGHTS_CHANGE;
 
-  constructor(options: EventTypes[Events.TraceInsightsChange]) {
+  constructor(options: EventTypes[Events.TRACE_INSIGHTS_CHANGE]) {
     super(TraceInsightsChange.eventName, { detail: options });
   }
 }
 
-export class HightlightEventAsOvelay extends CustomEvent<EventTypes[Events.HightlightEventAsOvelay]>{
-  static readonly eventName = Events.HightlightEventAsOvelay;
+export class HightlightEventAsOvelay extends CustomEvent<EventTypes[Events.HIGHLIGHT_EVENT_AS_OVERLAY]>{
+  static readonly eventName = Events.HIGHLIGHT_EVENT_AS_OVERLAY;
 
-  constructor(options: EventTypes[Events.HightlightEventAsOvelay]) {
+  constructor(options: EventTypes[Events.HIGHLIGHT_EVENT_AS_OVERLAY]) {
     super(HightlightEventAsOvelay.eventName, { detail: options });
   }
 }
@@ -1212,6 +1212,8 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       dimmer.networkChartIndices = [];
     }
     this.rebuildDataForTrace();
+
+    document.getElementById('-blink-dev-tools')?.dispatchEvent(new TraceDataChange({ traceEngineData: newParsedTrace, isCpuProfile: true }));
   }
 
   /**
@@ -1238,8 +1240,6 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.#updateFlameCharts();
     this.resizeToPreferredHeights();
     this.setMarkers(this.#parsedTrace);
-
-    document.getElementById('-blink-dev-tools')?.dispatchEvent(new TraceDataChange({ traceEngineData: newParsedTrace, isCpuProfile }));
   }
 
   setInsights(
@@ -1782,10 +1782,10 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
 
     this.searchableView.updateSearchMatchesCount(this.searchResults.length);
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
+    // if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
       this.#updateFlameChartDimmerWithIndices(
           this.#searchDimmer, mainMatches.map(m => m.index), networkMatches.map(m => m.index));
-    }
+    // }
 
     if (!shouldJump || !this.searchResults.length) {
       return;

front_end/panels/timeline/TimelinePanel.ts

@@ -599,13 +599,13 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
           }
 
           const overlays: Overlays.Overlays.TimelineOverlay[] = [];
-          for (const [entity, requests] of insight.requestsByEntity) {
+          for (const [entity, events] of insight.eventsByEntity) {
             if (entity === insight.firstPartyEntity || (filterByThirdParty && entity.name !== filterByThirdParty)) {
               continue;
             }
 
-            for (const request of requests) {
-              if (filterByTimestamp && request.ts > filterByTimestamp) {
+            for (const event of events) {
+              if (filterByTimestamp && event.ts > filterByTimestamp) {
                 continue;
               }
 
@@ -614,7 +614,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
               // from outside the component.
               overlays.push({
                 type: 'ENTRY_OUTLINE',
-                entry: request,
+                entry: event,
                 outlineReason: 'INFO',
               });
             }
@@ -681,7 +681,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
                 {
                   label: 'LCP image request',
                   bounds: Trace.Helpers.Timing.traceWindowFromMicroSeconds(entry.entry.ts, (
-                    entry.entry.ts + (entry.entry.dur || 0) as Trace.Types.Timing.MicroSeconds
+                    entry.entry.ts + (entry.entry.dur || 0) as Trace.Types.Timing.Micro
                   )),
                   showDuration: true,
                 },
@@ -2840,8 +2840,8 @@ export type EventTypes = {
     navigationId: string,
     entry: {
       entry: Trace.Types.Events.Event,
-      start: Trace.Types.Timing.MicroSeconds,
-      end: Trace.Types.Timing.MicroSeconds,
+      start: Trace.Types.Timing.Micro,
+      end: Trace.Types.Timing.Micro,
     },
   },
   [Events.HighlightEntries]: {

front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -4297,7 +4297,7 @@ export const enum Events {
   LATEST_DRAW_DIMENSIONS = 'LatestDrawDimensions',
 
   MOUSE_MOVE = 'MouseMove',
-  TimeRangeChanged = 'timerangechanged',
+  TIME_RANGE_CHANGED = 'TimeRangeChanged',
 }
 
 interface ChartDimentionchangedEventData {
@@ -4329,6 +4329,17 @@ export interface EventTypes {
     mouseEvent: MouseEvent,
     timeInMicroSeconds: Trace.Types.Timing.Micro,
   };
+  [Events.TIME_RANGE_CHANGED]: ChartDimentionchangedEventData & {
+    timelineData: FlameChartTimelineData,
+  };
+}
+
+export class TimeRangeChanged extends CustomEvent<EventTypes[Events.TIME_RANGE_CHANGED]> {
+  static readonly eventName = Events.TIME_RANGE_CHANGED;
+
+  constructor(options: EventTypes[Events.TIME_RANGE_CHANGED]) {
+    super(TimeRangeChanged.eventName, { detail: options });
+  }
 }
 
 export interface Group {