[CustomTracks]: Move '-- Custom track' to a separate subtitle.

This change de-emphasizes the '--Custom track' part in the track names
by shrinking the font and making it italic.

Bug: 427952360
Change-Id: I7b437a3c7cf1b1cf133db72c49971c850eaa69df
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6771946
Reviewed-by: Mathias Bynens <[email protected]>
Commit-Queue: Finnur Thorarinsson <[email protected]>

Author: finnurbreki

front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -17,10 +17,9 @@ import * as Extensions from './extensions/extensions.js';
 
 const UIStrings = {
   /**
-   * @description The name of a track, which is a horizontal division of the timeline, synonym with "swimlane".
-   * @example {A track name} PH1
+   * @description The subtitle to show (by the side of the track name).
    */
-  customTrackName: '{PH1} — Custom track',
+  customTrackSubtitle: '— Custom',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/ExtensionTrackAppender.ts', UIStrings);
@@ -55,12 +54,13 @@ export class ExtensionTrackAppender implements TrackAppender {
    */
   #appendTopLevelHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
     const style = buildGroupStyle({shareHeaderLine: false, collapsible: true});
-    const headerTitle = i18nString(UIStrings.customTrackName, {PH1: this.#extensionTopLevelTrack.name});
+    const headerTitle = this.#extensionTopLevelTrack.name;
     const jsLogContext = this.#extensionTopLevelTrack.name === '🅰️ Angular' ? VisualLoggingTrackName.ANGULAR_TRACK :
                                                                              VisualLoggingTrackName.EXTENSION;
     const group = buildTrackHeader(
         jsLogContext, currentLevel, headerTitle, style,
         /* selectable= */ true, expanded);
+    group.subtitle = i18nString(UIStrings.customTrackSubtitle);
     this.#compatibilityBuilder.registerTrackForGroup(group, this);
   }
 

front_end/panels/timeline/TimelineFlameChartDataProvider.test.ts

@@ -158,26 +158,14 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'extension-tracks-and-marks.json.gz');
     const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
     dataProvider.setModel(parsedTrace, entityMapper);
-    const groupNames = dataProvider.timelineData().groups.map(g => g.name);
-    assert.deepEqual(
-        groupNames,
-        [
-          'Frames',
-          'Timings',
-          'Interactions',
-          'A track group — Custom track',
-          'Another Extension Track',
-          'An Extension Track — Custom track',
-          'TimeStamp track — Custom track',
-          'Main — http://localhost:3000/',
-          'Thread pool',
-          'Thread pool worker 1',
-          'Thread pool worker 2',
-          'Thread pool worker 3',
-          'StackSamplingProfiler',
-          'GPU',
-        ],
-    );
+    const groupNames = dataProvider.timelineData().groups.map(g => [g.name, g.subtitle]);
+    assert.deepEqual(groupNames, [
+      ['Frames', undefined], ['Timings', undefined], ['Interactions', undefined], ['A track group', '— Custom'],
+      ['Another Extension Track', undefined], ['An Extension Track', '— Custom'], ['TimeStamp track', '— Custom'],
+      ['Main — http://localhost:3000/', undefined], ['Thread pool', undefined], ['Thread pool worker 1', undefined],
+      ['Thread pool worker 2', undefined], ['Thread pool worker 3', undefined], ['StackSamplingProfiler', undefined],
+      ['GPU', undefined]
+    ]);
   });
 
   it('can return the FlameChart group for a given event', async function() {

front_end/panels/timeline/track_appenders/ExtensionTrackAppender.test.ts

@@ -51,13 +51,16 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
   describe('appendTrackAtLevel', function() {
     it('creates flamechart groups for the Extension tracks properly', function() {
       assert.lengthOf(flameChartData.groups, 4);
-      assert.strictEqual(flameChartData.groups[0].name, 'A track group — Custom track');
+      assert.strictEqual(flameChartData.groups[0].name, 'A track group');
+      assert.strictEqual(flameChartData.groups[0].subtitle, '— Custom');
       assert.strictEqual(flameChartData.groups[0].startLevel, 0);
       assert.strictEqual(flameChartData.groups[0].style.nestingLevel, 0);
       assert.strictEqual(flameChartData.groups[1].name, 'Another Extension Track');
+      assert.isUndefined(flameChartData.groups[1].subtitle);
       assert.strictEqual(flameChartData.groups[1].startLevel, 0);
       assert.strictEqual(flameChartData.groups[1].style.nestingLevel, 1);
-      assert.strictEqual(flameChartData.groups[2].name, 'An Extension Track — Custom track');
+      assert.strictEqual(flameChartData.groups[2].name, 'An Extension Track');
+      assert.strictEqual(flameChartData.groups[2].subtitle, '— Custom');
       assert.strictEqual(flameChartData.groups[2].startLevel, 1);
       assert.strictEqual(flameChartData.groups[2].style.nestingLevel, 0);
     });

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

@@ -52,6 +52,11 @@ import {type Calculator, TimelineGrid} from './TimelineGrid.js';
  */
 const KEYBOARD_FAKED_CONTEXT_MENU_DETAIL = -1;
 
+/**
+ * The adjustments needed for the subtitle font (based off of the default font).
+ */
+const SUBTITLE_FONT_SIZE_AND_STYLE = 'italic 10px';
+
 const UIStrings = {
   /**
    *@description Aria alert used to notify the user when an event has been selected because they tabbed into a group.
@@ -121,6 +126,7 @@ export const ARROW_SIDE = 8;
 const EXPANSION_ARROW_INDENT = HEADER_LEFT_PADDING + ARROW_SIDE / 2;
 const HEADER_LABEL_X_PADDING = 3;
 const HEADER_LABEL_Y_PADDING = 2;
+const PADDING_BETWEEN_TITLE_AND_SUBTITLE = 6;
 
 // The width of each of the edit mode icons.
 export const EDIT_ICON_WIDTH = 16;
@@ -310,6 +316,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   #tooltipPopoverYAdjustment = 0;
 
   #font: string;
+  #subtitleFont: string;
   #groupTreeRoot?: GroupTreeNode|null;
   #searchResultEntryIndex: number|null = null;
   #inTrackConfigEditMode = false;
@@ -328,6 +335,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       optionalConfig: OptionalFlameChartConfig = {}) {
     super(true);
     this.#font = `${DEFAULT_FONT_SIZE} ${getFontFamilyForCanvas()}`;
+    this.#subtitleFont = `${SUBTITLE_FONT_SIZE_AND_STYLE} ${getFontFamilyForCanvas()}`;
     this.registerRequiredCSS(flameChartStyles);
     this.registerRequiredCSS(UI.inspectorCommonStyles);
 
@@ -2765,6 +2773,14 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       const titleStart = iconsWidth + EXPANSION_ARROW_INDENT * (group.style.nestingLevel + 1) + ARROW_SIDE / 2 +
           HEADER_LABEL_X_PADDING;
       context.fillText(group.name, titleStart, offset + group.style.height - this.textBaseline);
+      if (group.subtitle) {
+        const titleMetrics = context.measureText(group.name);
+        context.font = this.#subtitleFont;
+        context.fillText(
+            group.subtitle, titleStart + titleMetrics.width + PADDING_BETWEEN_TITLE_AND_SUBTITLE,
+            offset + group.style.height - this.textBaseline);
+        context.font = this.#font;
+      }
       if (this.#inTrackConfigEditMode && group.hidden) {
         // Draw a strikethrough line for the hidden tracks.
         context.fillRect(
@@ -4362,6 +4378,7 @@ export interface EventTypes {
 
 export interface Group {
   name: Common.UIString.LocalizedString;
+  subtitle?: Common.UIString.LocalizedString;
   startLevel: number;
   expanded?: boolean;
   hidden?: boolean;