RPP: move EntryName & EntryStyles into models/trace

And also rename the module to `Name` and `Styles`.

I don't think in the purist sense these belong in models/trace but we
need them in a place where the AI model can depend on them without
importing UI; and this enables that. It also starts to break down the
timeline/utils which has become a bit of a dumping ground.

Bypass-Check-License: not new files, just moved existing files
Bug: 443001453
Change-Id: I9405287b446196c45a7c9c33e4f0f8e36bee2efc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6943294
Reviewed-by: Connor Clark <cjamcl@chromium.org>
Commit-Queue: Paul Irish <paulirish@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Irish <paulirish@chromium.org>

Author: paulirish

config/gni/devtools_grd_files.gni

@@ -1168,7 +1168,9 @@ grd_files_unbundled_sources = [
   "front_end/models/trace/EventsSerializer.js",
   "front_end/models/trace/LanternComputationData.js",
   "front_end/models/trace/ModelImpl.js",
+  "front_end/models/trace/Name.js",
   "front_end/models/trace/Processor.js",
+  "front_end/models/trace/Styles.js",
   "front_end/models/trace/extras/FilmStrip.js",
   "front_end/models/trace/extras/MainThreadActivity.js",
   "front_end/models/trace/extras/ScriptDuplication.js",
@@ -2064,9 +2066,7 @@ grd_files_unbundled_sources = [
   "front_end/panels/timeline/timelineTreeView.css.js",
   "front_end/panels/timeline/utils/AICallTree.js",
   "front_end/panels/timeline/utils/AIContext.js",
-  "front_end/panels/timeline/utils/EntryName.js",
   "front_end/panels/timeline/utils/EntryNodes.js",
-  "front_end/panels/timeline/utils/EntryStyles.js",
   "front_end/panels/timeline/utils/FreshRecording.js",
   "front_end/panels/timeline/utils/Helpers.js",
   "front_end/panels/timeline/utils/IgnoreList.js",

front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -297,7 +297,7 @@ export class PerformanceTraceContext extends ConversationContext<TimelineUtils.A
       if (!event) {
         return 'unknown';
       }
-      return TimelineUtils.EntryName.nameForEntry(event);
+      return Trace.Name.forEntry(event);
     }
 
     Platform.assertNever(focus, 'Unknown agent focus');

front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -154,7 +154,7 @@ export class PerformanceTraceFormatter {
         frame = Trace.Helpers.Trace.getStackTraceTopCallFrameInEventPayload(event);
       }
 
-      let source = TimelineUtils.EntryName.nameForEntry(event);
+      let source = Trace.Name.forEntry(event);
       if (frame?.url) {
         source += ` (url: ${frame.url}`;
         if (frame.lineNumber !== -1) {
@@ -282,9 +282,8 @@ export class PerformanceTraceFormatter {
       // Limit to 5, because some insights (namely ThirdParties) can have a huge
       // number of related events. Mostly, insights probably don't have more than
       // 5.
-      const eventsString = events.slice(0, 5)
-                               .map(e => TimelineUtils.EntryName.nameForEntry(e) + ' ' + this.serializeEvent(e))
-                               .join(', ');
+      const eventsString =
+          events.slice(0, 5).map(e => Trace.Name.forEntry(e) + ' ' + this.serializeEvent(e)).join(', ');
       results.push(`- ${insightKey}: ${eventsString}`);
     }
     return results.join('\n');

front_end/models/trace/BUILD.gn

@@ -13,7 +13,9 @@ devtools_module("trace") {
     "EventsSerializer.ts",
     "LanternComputationData.ts",
     "ModelImpl.ts",
+    "Name.ts",
     "Processor.ts",
+    "Styles.ts",
   ]
 
   deps = [
@@ -75,6 +77,7 @@ ts_library("unittests") {
     "EntityMapper.test.ts",
     "EventsSerializer.test.ts",
     "ModelImpl.test.ts",
+    "Name.test.ts",
     "Processor.test.ts",
   ]
 

…/panels/timeline/utils/EntryName.test.ts front_end/models/trace/Name.test.tsfront_end/panels/timeline/utils/EntryName.test.ts renamed to front_end/models/trace/Name.test.ts front_end/panels/timeline/utils/EntryName.test.ts renamed to front_end/models/trace/Name.test.ts

@@ -2,28 +2,27 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as CPUProfile from '../../../models/cpu_profile/cpu_profile.js';
-import * as Trace from '../../../models/trace/trace.js';
-import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
-import {allThreadEntriesInTrace, getMainThread} from '../../../testing/TraceHelpers.js';
-import {TraceLoader} from '../../../testing/TraceLoader.js';
+import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {allThreadEntriesInTrace, getMainThread} from '../../testing/TraceHelpers.js';
+import {TraceLoader} from '../../testing/TraceLoader.js';
 
-import * as Utils from './utils.js';
+import * as Trace from './trace.js';
 
 describeWithEnvironment('EntryName', () => {
   it('uses the URL for the name of a network request', async function() {
     const parsedTrace = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const request = parsedTrace.data.NetworkRequests.byTime.at(0);
     assert.isOk(request);
-    const name = Utils.EntryName.nameForEntry(request);
+    const name = Trace.Name.forEntry(request);
     assert.strictEqual(name, 'web.dev/ (web.dev)');
   });
 
   it('uses "Frame" for timeline frames', async function() {
     const parsedTrace = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const frame = parsedTrace.data.Frames.frames.at(0);
     assert.isOk(frame);
-    const name = Utils.EntryName.nameForEntry(frame);
+    const name = Trace.Name.forEntry(frame);
     assert.strictEqual(name, 'Frame');
   });
 
@@ -33,22 +32,22 @@ describeWithEnvironment('EntryName', () => {
       return Trace.Types.Events.isDispatch(event) && event.args.data.type === 'click';
     });
     assert.isOk(clickEvent);
-    const name = Utils.EntryName.nameForEntry(clickEvent);
+    const name = Trace.Name.forEntry(clickEvent);
     assert.strictEqual(name, 'Event: click');
   });
 
   it('correctly titles layout shifts', async function() {
     const parsedTrace = await TraceLoader.traceEngine(this, 'cls-single-frame.json.gz');
     const shifts = parsedTrace.data.LayoutShifts.clusters.flatMap(c => c.events);
-    const title = Utils.EntryName.nameForEntry(shifts[0]);
+    const title = Trace.Name.forEntry(shifts[0]);
     assert.strictEqual(title, 'Layout shift');
   });
 
   it('correctly titles animation events', async function() {
     const parsedTrace = await TraceLoader.traceEngine(this, 'animation.json.gz');
     const animation = parsedTrace.data.Animations.animations.at(0);
     assert.isOk(animation);
-    const title = Utils.EntryName.nameForEntry(animation);
+    const title = Trace.Name.forEntry(animation);
     assert.strictEqual(title, 'Animation');
   });
 
@@ -57,7 +56,7 @@ describeWithEnvironment('EntryName', () => {
     const entry = allThreadEntriesInTrace(parsedTrace).find(e => e.name === Trace.Types.Events.Name.RUN_TASK);
     assert.isOk(entry);
 
-    const name = Utils.EntryName.nameForEntry(entry, parsedTrace);
+    const name = Trace.Name.forEntry(entry, parsedTrace);
     assert.strictEqual(name, 'Task');
   });
 
@@ -74,7 +73,7 @@ describeWithEnvironment('EntryName', () => {
       }
     }
     assert.isOk(createEvent);
-    const name = Utils.EntryName.nameForEntry(createEvent, parsedTrace);
+    const name = Trace.Name.forEntry(createEvent, parsedTrace);
     assert.strictEqual(name, 'WebSocket opened: wss://echo.websocket.org/');
   });
 
@@ -83,23 +82,23 @@ describeWithEnvironment('EntryName', () => {
       name: Trace.Types.Events.Name.WEB_SOCKET_DESTROY,
     } as unknown as Trace.Types.Events.WebSocketDestroy;
 
-    const name = Utils.EntryName.nameForEntry(fakeDestroyEvent);
+    const name = Trace.Name.forEntry(fakeDestroyEvent);
     assert.strictEqual(name, 'WebSocket closed');
   });
 
   it('returns a custom name for pointer interactions', async function() {
     const parsedTrace = await TraceLoader.traceEngine(this, 'slow-interaction-button-click.json.gz');
     const firstInteraction = parsedTrace.data.UserInteractions.interactionEvents.at(0);
     assert.isOk(firstInteraction);
-    const name = Utils.EntryName.nameForEntry(firstInteraction);
+    const name = Trace.Name.forEntry(firstInteraction);
     assert.strictEqual(name, 'Pointer');
   });
 
   it('returns a custom name for keyboard interactions', async function() {
     const parsedTrace = await TraceLoader.traceEngine(this, 'slow-interaction-keydown.json.gz');
     const keydownInteraction = parsedTrace.data.UserInteractions.interactionEvents.find(e => e.type === 'keydown');
     assert.isOk(keydownInteraction);
-    const name = Utils.EntryName.nameForEntry(keydownInteraction);
+    const name = Trace.Name.forEntry(keydownInteraction);
     assert.strictEqual(name, 'Keyboard');
   });
 
@@ -110,7 +109,7 @@ describeWithEnvironment('EntryName', () => {
     const firstInteraction = {...parsedTrace.data.UserInteractions.interactionEvents[0]};
     firstInteraction.type = 'unknown';
 
-    const name = Utils.EntryName.nameForEntry(firstInteraction);
+    const name = Trace.Name.forEntry(firstInteraction);
     assert.strictEqual(name, 'Other');
   });
 
@@ -123,7 +122,7 @@ describeWithEnvironment('EntryName', () => {
       // reset this to avoid impacting other tests.
       const originalProfileNodeName = profileNode.functionName;
       profileNode.setFunctionName('testing-profile-name');
-      const name = Utils.EntryName.nameForEntry(entry, parsedTrace);
+      const name = Trace.Name.forEntry(entry, parsedTrace);
       assert.strictEqual(name, 'testing-profile-name');
       profileNode.setFunctionName(originalProfileNodeName);
     });
@@ -136,7 +135,7 @@ describeWithEnvironment('EntryName', () => {
       // reset this to avoid impacting other tests.
       const originalProfileNodeName = profileNode.functionName;
       profileNode.setFunctionName('');
-      const name = Utils.EntryName.nameForEntry(entry, parsedTrace);
+      const name = Trace.Name.forEntry(entry, parsedTrace);
       assert.strictEqual(name, 'performConcurrentWorkOnRoot');
       profileNode.setFunctionName(originalProfileNodeName);
     });

…t_end/panels/timeline/utils/EntryName.ts front_end/models/trace/Name.tsfront_end/panels/timeline/utils/EntryName.ts renamed to front_end/models/trace/Name.ts front_end/panels/timeline/utils/EntryName.ts renamed to front_end/models/trace/Name.ts

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../../core/common/common.js';
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Trace from '../../../models/trace/trace.js';
+import * as Common from '../../core/common/common.js';
+import * as i18n from '../../core/i18n/i18n.js';
 
-import {getEventStyle} from './EntryStyles.js';
+import * as Handlers from './handlers/handlers.js';
+import type {ParsedTrace} from './ModelImpl.js';
+import {getEventStyle} from './Styles.js';
+import * as Types from './types/types.js';
 
 const UIStrings = {
   /**
@@ -41,7 +43,7 @@ const UIStrings = {
   layoutShift: 'Layout shift',
 } as const;
 
-const str_ = i18n.i18n.registerUIStrings('panels/timeline/utils/EntryName.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('models/trace/Name.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 /**
@@ -53,14 +55,14 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
  * custom name is found, we will fallback to the `name` property in the trace
  * entry.
  */
-export function nameForEntry(
-    entry: Trace.Types.Events.Event,
-    parsedTrace?: Trace.TraceModel.ParsedTrace,
+export function forEntry(
+    entry: Types.Events.Event,
+    parsedTrace?: ParsedTrace,
     ): string {
-  if (Trace.Types.Events.isProfileCall(entry)) {
+  if (Types.Events.isProfileCall(entry)) {
     if (parsedTrace) {
       const potentialCallName =
-          Trace.Handlers.ModelHandlers.Samples.getProfileCallFunctionName(parsedTrace.data.Samples, entry);
+          Handlers.ModelHandlers.Samples.getProfileCallFunctionName(parsedTrace.data.Samples, entry);
       // We need this extra check because the call name could be the empty
       // string. If it is, we want to fallback.
       if (potentialCallName) {
@@ -70,54 +72,54 @@ export function nameForEntry(
     return entry.callFrame.functionName || i18nString(UIStrings.anonymous);
   }
 
-  if (Trace.Types.Events.isLegacyTimelineFrame(entry)) {
+  if (Types.Events.isLegacyTimelineFrame(entry)) {
     return i18n.i18n.lockedString(UIStrings.frame);
   }
 
-  if (Trace.Types.Events.isDispatch(entry)) {
+  if (Types.Events.isDispatch(entry)) {
     // EventDispatch represent user actions such as clicks, so in this case
     // rather than show the event title (which is always just "Event"), we
     // add the type ("click") to help the user understand the event.
     return i18nString(UIStrings.eventDispatchS, {PH1: entry.args.data.type});
   }
-  if (Trace.Types.Events.isSyntheticNetworkRequest(entry)) {
+  if (Types.Events.isSyntheticNetworkRequest(entry)) {
     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 text;
   }
 
-  if (Trace.Types.Events.isWebSocketCreate(entry)) {
+  if (Types.Events.isWebSocketCreate(entry)) {
     if (entry.args.data.url) {
       return i18nString(UIStrings.wsConnectionOpenedWithUrl, {PH1: entry.args.data.url});
     }
 
     return i18nString(UIStrings.wsConnectionOpened);
   }
 
-  if (Trace.Types.Events.isWebSocketDestroy(entry)) {
+  if (Types.Events.isWebSocketDestroy(entry)) {
     return i18nString(UIStrings.wsConnectionClosed);
   }
 
-  if (Trace.Types.Events.isSyntheticInteraction(entry)) {
+  if (Types.Events.isSyntheticInteraction(entry)) {
     return nameForInteractionEvent(entry);
   }
 
-  if (Trace.Types.Events.isSyntheticLayoutShift(entry)) {
+  if (Types.Events.isSyntheticLayoutShift(entry)) {
     return i18nString(UIStrings.layoutShift);
   }
 
-  if (Trace.Types.Events.isSyntheticAnimation(entry) && entry.args.data.beginEvent.args.data.displayName) {
+  if (Types.Events.isSyntheticAnimation(entry) && entry.args.data.beginEvent.args.data.displayName) {
     return entry.args.data.beginEvent.args.data.displayName;
   }
 
-  const eventStyleCustomName = getEventStyle(entry.name as Trace.Types.Events.Name)?.title;
+  const eventStyleCustomName = getEventStyle(entry.name as Types.Events.Name)?.title;
 
   return eventStyleCustomName || entry.name;
 }
 
-function nameForInteractionEvent(event: Trace.Types.Events.SyntheticInteractionPair): string {
-  const category = Trace.Handlers.ModelHandlers.UserInteractions.categoryOfInteraction(event);
+function nameForInteractionEvent(event: Types.Events.SyntheticInteractionPair): string {
+  const category = Handlers.ModelHandlers.UserInteractions.categoryOfInteraction(event);
   // Because we hide nested interactions, we do not want to show the
   // specific type of the interaction that was not hidden, so instead we
   // show just the category of that interaction.