[RPP] Use user timing name as flamechart entry title for extension data

Instead of the tooltip text.

This behavior was accidentally flipped in [1] and the tooltip text was
used as the title of the event, resulting in the attached bug.

[1] https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6007341/8/front_end/panels/timeline/ExtensionTrackAppender.ts

Fixed: 384480570
Change-Id: Ie1f6d93bbe5afc964f6b5c16bb9856dcdf259cb5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6098154
Auto-Submit: Andres Olivares <[email protected]>
Reviewed-by: Nancy Li <[email protected]>
Commit-Queue: Nancy Li <[email protected]>

Author: and-oli

front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -5,9 +5,10 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
+import {buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
+  type PopoverInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -99,9 +100,13 @@ export class ExtensionTrackAppender implements TrackAppender {
   }
 
   titleForEvent(event: Trace.Types.Events.Event): string {
-    if (Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText) {
-      return event.args.tooltipText;
-    }
     return event.name;
   }
+
+  setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
+    info.title = Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText ?
+        event.args.tooltipText :
+        this.titleForEvent(event);
+    info.formattedTime = getFormattedTime(event.dur);
+  }
 }

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

@@ -162,7 +162,7 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
       const allExtensionTrackEntries =
           parsedTrace.ExtensionTraceData.extensionTrackData.map(track => Object.values(track.entriesByTrack)).flat(2);
       for (const event of allExtensionTrackEntries) {
-        assert.notStrictEqual(extensionTrackAppenders[0].titleForEvent(event), event.name);
+        assert.strictEqual(extensionTrackAppenders[0].titleForEvent(event), event.name);
         if (event.args.color === 'tertiary') {
           // "tertiary" color category is mapped to --ref-palette-green70
           // which is faked out to 10, 10, 10
@@ -222,8 +222,26 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
       const allExtensionTrackEntries =
           parsedTrace.ExtensionTraceData.extensionTrackData.map(track => Object.values(track.entriesByTrack)).flat(2);
       const title = extensionTrackAppenders[0].titleForEvent(allExtensionTrackEntries[0]);
+      assert.strictEqual(title, 'An extension measurement');
+    });
+  });
+
+  describe('setPopoverInfo', function() {
+    it('build the tooltip content for an entry correctly', function() {
+      const info: Timeline.CompatibilityTracksAppender.PopoverInfo = {
+        title: 'title',
+        formattedTime: 'time',
+        warningElements: [],
+        additionalElements: [],
+        url: null,
+      };
+      const allExtensionTrackEntries =
+          parsedTrace.ExtensionTraceData.extensionTrackData.map(track => Object.values(track.entriesByTrack)).flat(2);
+      extensionTrackAppenders[0].setPopoverInfo(allExtensionTrackEntries[0], info);
+      assert.strictEqual(info.title, 'A hint if needed');
       // The i18n encodes spaces using the u00A0 unicode character.
-      assert.strictEqual(title, 'A hint if needed');
+      assert.strictEqual(info.formattedTime, '1.00\u00A0s');
+      assert.strictEqual(info.additionalElements?.at(0)?.nodeName, undefined);
     });
   });
 });