RPP: Move EntryStyles,EntryName into Utils

Necessary to avoid circular dependencies

Bug:370436840
Change-Id: Iaba0389055620e633d1b610dae5dded269dbba57
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5967893
Auto-Submit: Paul Irish <[email protected]>
Commit-Queue: Connor Clark <[email protected]>
Reviewed-by: Connor Clark <[email protected]>

Author: paulirish

config/gni/devtools_grd_files.gni

@@ -1799,8 +1799,6 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/BreadcrumbsUI.js",
   "front_end/panels/timeline/components/CPUThrottlingSelector.js",
   "front_end/panels/timeline/components/DetailsView.js",
-  "front_end/panels/timeline/components/EntryName.js",
-  "front_end/panels/timeline/components/EntryStyles.js",
   "front_end/panels/timeline/components/FieldSettingsDialog.js",
   "front_end/panels/timeline/components/InteractionBreakdown.js",
   "front_end/panels/timeline/components/LayoutShiftDetails.js",
@@ -1867,6 +1865,8 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/timelinePaintProfiler.css.js",
   "front_end/panels/timeline/timelinePanel.css.js",
   "front_end/panels/timeline/timelineStatusDialog.css.js",
+  "front_end/panels/timeline/utils/EntryName.js",
+  "front_end/panels/timeline/utils/EntryStyles.js",
   "front_end/panels/timeline/utils/Helpers.js",
   "front_end/panels/timeline/utils/IgnoreList.js",
   "front_end/panels/timeline/utils/ImageCache.js",

front_end/models/trace/handlers/BUILD.gn

@@ -98,7 +98,7 @@ ts_library("unittests") {
     "../../../generated",
     "../../../models/trace:bundle",
     "../../../panels/timeline:bundle",
-    "../../../panels/timeline/components:bundle",
+    "../../../panels/timeline/utils:bundle",
     "../../../testing",
   ]
 }

front_end/models/trace/handlers/RendererHandler.test.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Components from '../../../panels/timeline/components/components.js';
+import * as Utils from '../../../panels/timeline/utils/utils.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {
   getAllNodes,
@@ -192,7 +192,7 @@ describeWithEnvironment('RendererHandler', function() {
     const isLong = (event: Trace.Types.Events.Event) => Trace.Types.Events.isComplete(event) && event.dur > 1000;
     const isIncluded = (node: Trace.Helpers.TreeHelpers.TraceEntryNode, event: Trace.Types.Events.Event) =>
         (!isRoot(node) || isInstant(event) || isLong(event)) &&
-        Boolean(Components.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
+        Boolean(Utils.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
     assert.strictEqual(prettyPrint(tree, isIncluded), `
 ............
 -RunTask [2.21ms]
@@ -391,7 +391,7 @@ describeWithEnvironment('RendererHandler', function() {
       assert(false, 'Main thread has no tree of events');
     }
     const isIncluded = (_node: Trace.Helpers.TreeHelpers.TraceEntryNode, event: Trace.Types.Events.Event) =>
-        Boolean(Components.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
+        Boolean(Utils.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
     assert.strictEqual(prettyPrint(tree, isIncluded), `
 -RunTask [0.13ms]
 -RunTask [0.005ms]
@@ -934,7 +934,7 @@ describeWithEnvironment('RendererHandler', function() {
       const onlyLongTasksPredicate =
           (_node: Trace.Helpers.TreeHelpers.TraceEntryNode, event: Trace.Types.Events.Event) =>
               Boolean(event.dur && event.dur > 1000) &&
-          Boolean(Components.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
+          Boolean(Utils.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
       assert.strictEqual(prettyPrint(thread.tree, onlyLongTasksPredicate), `
 .............
 -RunTask [17.269ms]

front_end/panels/timeline/AnnotationHelpers.ts

@@ -7,9 +7,9 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 
-import * as TimelineComponents from './components/components.js';
 import type {AnnotationModifiedEvent} from './ModificationsManager.js';
 import type * as Overlays from './overlays/overlays.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -219,8 +219,8 @@ export function ariaAnnouncementForModifiedEvent(event: AnnotationModifiedEvent)
     }
     case 'UpdateLinkToEntry': {
       if (isEntriesLink(overlay) && overlay.entryFrom && overlay.entryTo) {
-        const from = TimelineComponents.EntryName.nameForEntry(overlay.entryFrom);
-        const to = TimelineComponents.EntryName.nameForEntry(overlay.entryTo);
+        const from = Utils.EntryName.nameForEntry(overlay.entryFrom);
+        const to = Utils.EntryName.nameForEntry(overlay.entryTo);
         return (i18nString(UIStrings.srEntriesLinked, {PH1: from, PH2: to}));
       }
       break;

front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -24,6 +24,7 @@ import {
   type TimelineFlameChartEntry,
 } from './TimelineFlameChartDataProvider.js';
 import {TimingsTrackAppender} from './TimingsTrackAppender.js';
+import * as TimelineUtils from './utils/utils.js';
 
 export type HighlightedEntryInfo = {
   title: string,
@@ -72,7 +73,7 @@ export function entryIsVisibleInTimeline(
 
   // Default styles are globally defined for each event name. Some
   // events are hidden by default.
-  const eventStyle = TimelineComponents.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name);
+  const eventStyle = TimelineUtils.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name);
   const eventIsTiming = Trace.Types.Events.isConsoleTime(entry) || Trace.Types.Events.isPerformanceMeasure(entry) ||
       Trace.Types.Events.isPerformanceMark(entry);
 
@@ -640,7 +641,7 @@ export class CompatibilityTracksAppender {
     if (track.titleForEvent) {
       return track.titleForEvent(event);
     }
-    return TimelineComponents.EntryName.nameForEntry(event, this.#parsedTrace);
+    return TimelineUtils.EntryName.nameForEntry(event, this.#parsedTrace);
   }
   /**
    * Returns the info shown when an event in the timeline is hovered.

front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -10,12 +10,12 @@ import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import * as Components from './components/components.js';
 import {Category, IsLong} from './TimelineFilters.js';
 import type {TimelineModeViewDelegate} from './TimelinePanel.js';
 import {TimelineSelection} from './TimelineSelection.js';
 import {TimelineTreeView} from './TimelineTreeView.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -177,15 +177,15 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     toolbar.appendToolbarItem(durationFilterUI);
 
     const categoryFiltersUI = new Map<string, UI.Toolbar.ToolbarCheckbox>();
-    const categories = Components.EntryStyles.getCategoryStyles();
+    const categories = Utils.EntryStyles.getCategoryStyles();
     for (const categoryName in categories) {
-      const category = categories[categoryName as Components.EntryStyles.EventCategory];
+      const category = categories[categoryName as Utils.EntryStyles.EventCategory];
       if (!category.visible) {
         continue;
       }
       const checkbox = new UI.Toolbar.ToolbarCheckbox(
           category.title, undefined,
-          categoriesFilterChanged.bind(this, categoryName as Components.EntryStyles.EventCategory), categoryName);
+          categoriesFilterChanged.bind(this, categoryName as Utils.EntryStyles.EventCategory), categoryName);
       checkbox.setChecked(true);
       checkbox.inputElement.style.backgroundColor = category.color;
       categoryFiltersUI.set(category.name, checkbox);
@@ -199,8 +199,8 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       this.notifyFiltersChanged();
     }
 
-    function categoriesFilterChanged(this: Filters, name: Components.EntryStyles.EventCategory): void {
-      const categories = Components.EntryStyles.getCategoryStyles();
+    function categoriesFilterChanged(this: Filters, name: Utils.EntryStyles.EventCategory): void {
+      const categories = Utils.EntryStyles.getCategoryStyles();
       const checkBox = categoryFiltersUI.get(name);
       categories[name].hidden = !checkBox || !checkBox.checked();
       this.notifyFiltersChanged();

front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -15,6 +15,7 @@ import {
   VisualLoggingTrackName,
 } from './CompatibilityTracksAppender.js';
 import * as Components from './components/components.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -138,7 +139,7 @@ export class InteractionsTrackAppender implements TrackAppender {
    * Gets the color an event added by this appender should be rendered with.
    */
   colorForEvent(event: Trace.Types.Events.Event): string {
-    let idForColorGeneration = Components.EntryName.nameForEntry(event, this.#parsedTrace);
+    let idForColorGeneration = Utils.EntryName.nameForEntry(event, this.#parsedTrace);
     if (Trace.Types.Events.isSyntheticInteraction(event)) {
       // Append the ID so that we vary the colours, ensuring that two events of
       // the same type are coloured differently.

front_end/panels/timeline/ThreadAppender.ts

@@ -24,7 +24,6 @@ import {
   type TrackAppenderName,
   VisualLoggingTrackName,
 } from './CompatibilityTracksAppender.js';
-import * as Components from './components/components.js';
 import * as ModificationsManager from './ModificationsManager.js';
 import * as Utils from './utils/utils.js';
 
@@ -552,19 +551,19 @@ export class ThreadAppender implements TrackAppender {
 
     if (Trace.Types.Events.isProfileCall(event)) {
       if (event.callFrame.functionName === '(idle)') {
-        return Components.EntryStyles.getCategoryStyles().idle.getComputedColorValue();
+        return Utils.EntryStyles.getCategoryStyles().idle.getComputedColorValue();
       }
       if (event.callFrame.scriptId === '0') {
         // If we can not match this frame to a script, return the
         // generic "scripting" color.
-        return Components.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
+        return Utils.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
       }
       // Otherwise, return a color created based on its URL.
       return this.#colorGenerator.colorForID(event.callFrame.url);
     }
     const defaultColor =
-        Components.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name)?.category.getComputedColorValue();
-    return defaultColor || Components.EntryStyles.getCategoryStyles().other.getComputedColorValue();
+        Utils.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name)?.category.getComputedColorValue();
+    return defaultColor || Utils.EntryStyles.getCategoryStyles().other.getComputedColorValue();
   }
 
   /**
@@ -574,7 +573,7 @@ export class ThreadAppender implements TrackAppender {
     if (Utils.IgnoreList.isIgnoreListedEntry(entry)) {
       return i18nString(UIStrings.onIgnoreList);
     }
-    return Components.EntryName.nameForEntry(entry, this.#parsedTrace);
+    return Utils.EntryName.nameForEntry(entry, this.#parsedTrace);
   }
 
   /**

front_end/panels/timeline/TimelineEventOverview.ts

@@ -37,7 +37,7 @@ import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import * as Components from './components/components.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -147,7 +147,7 @@ export class TimelineEventOverviewNetwork extends TimelineEventOverview {
   }
 }
 
-const categoryToIndex = new WeakMap<Components.EntryStyles.TimelineCategory, number>();
+const categoryToIndex = new WeakMap<Utils.EntryStyles.TimelineCategory, number>();
 
 export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
   private backgroundCanvas: HTMLCanvasElement;
@@ -168,16 +168,16 @@ export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
     this.#end = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds).max;
   }
 
-  #entryCategory(entry: Trace.Types.Events.Event): Components.EntryStyles.EventCategory|undefined {
+  #entryCategory(entry: Trace.Types.Events.Event): Utils.EntryStyles.EventCategory|undefined {
     // Special case: in CPU Profiles we get a lot of ProfileCalls that
     // represent Idle time. We typically represent ProfileCalls in the
     // Scripting Category, but if they represent idle time, we do not want
     // that.
     if (Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === '(idle)') {
-      return Components.EntryStyles.EventCategory.IDLE;
+      return Utils.EntryStyles.EventCategory.IDLE;
     }
-    const eventStyle = Components.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name)?.category ||
-        Components.EntryStyles.getCategoryStyles().other;
+    const eventStyle = Utils.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name)?.category ||
+        Utils.EntryStyles.getCategoryStyles().other;
     const categoryName = eventStyle.name;
     return categoryName;
   }
@@ -197,11 +197,11 @@ export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
     const timeRange = this.#end - this.#start;
     const scale = width / timeRange;
     const quantTime = quantSizePx / scale;
-    const categories = Components.EntryStyles.getCategoryStyles();
-    const categoryOrder = Components.EntryStyles.getTimelineMainEventCategories();
-    const otherIndex = categoryOrder.indexOf(Components.EntryStyles.EventCategory.OTHER);
+    const categories = Utils.EntryStyles.getCategoryStyles();
+    const categoryOrder = Utils.EntryStyles.getTimelineMainEventCategories();
+    const otherIndex = categoryOrder.indexOf(Utils.EntryStyles.EventCategory.OTHER);
     const idleIndex = 0;
-    console.assert(idleIndex === categoryOrder.indexOf(Components.EntryStyles.EventCategory.IDLE));
+    console.assert(idleIndex === categoryOrder.indexOf(Utils.EntryStyles.EventCategory.IDLE));
     for (let i = 0; i < categoryOrder.length; ++i) {
       categoryToIndex.set(categories[categoryOrder[i]], i);
     }

front_end/panels/timeline/TimelineFilters.test.ts

@@ -7,8 +7,8 @@ import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {getMainThread} from '../../testing/TraceHelpers.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
 
-import * as Components from './components/components.js';
 import * as Timeline from './timeline.js';
+import * as Utils from './utils/utils.js';
 
 describeWithEnvironment('TimelineFilters', () => {
   describe('IsLong', () => {
@@ -49,15 +49,15 @@ describeWithEnvironment('TimelineFilters', () => {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'user-timings.json.gz');
       // These events are usually visible, so make the category hidden before
       // running this test.
-      Components.EntryStyles.getCategoryStyles()['scripting'].hidden = true;
+      Utils.EntryStyles.getCategoryStyles()['scripting'].hidden = true;
 
       const userTimingEvent = parsedTrace.UserTimings.performanceMeasures.at(0);
       if (!userTimingEvent) {
         throw new Error('Could not find expected event.');
       }
       const filter = new Timeline.TimelineFilters.Category();
       assert.isFalse(filter.accept(userTimingEvent));
-      Components.EntryStyles.getCategoryStyles()['scripting'].hidden = false;
+      Utils.EntryStyles.getCategoryStyles()['scripting'].hidden = false;
     });
 
     it('returns true for a new event if it has a category that is visible', async function() {
@@ -68,7 +68,7 @@ describeWithEnvironment('TimelineFilters', () => {
       }
       const filter = new Timeline.TimelineFilters.Category();
       assert.isTrue(filter.accept(userTimingEvent));
-      Components.EntryStyles.getCategoryStyles()['scripting'].hidden = false;
+      Utils.EntryStyles.getCategoryStyles()['scripting'].hidden = false;
     });
   });
 });