RPP: Put URL into flamechart popover if appropriate

To speed up identification/attribution of JS functions in particular.

Also normalize naming on 'popover', reducing usage of "highlightedEntryInfo".

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

Author: paulirish

front_end/models/trace/extras/URLForEntry.ts

@@ -7,12 +7,13 @@ import type * as Handlers from '../handlers/handlers.js';
 import * as Types from '../types/types.js';
 
 /**
- * Use this helper whenever resolving an URL's source mapping is not an
- * option. For example when processing non-ui data. Otherwise use the
- * helper SourceMapsResolver::resolvedURLForEntry
+ * INSTEAD, you probably want `SourceMapsResolver.resolvedURLForEntry()`!
+ * If an URL will be displayed in the UI, it's likely you should NOT use `getNonResolved`.
  *
- * If an URL will be displayed in the UI, it's likely you should not use
- * this helper and prefer the other option instead.
+ * Use `getNonResolved` method whenever resolving an URL's source mapping is not an
+ * option. For example when processing non-ui data.
+ *
+ * TODO: migrate existing uses of this over to resolvedURLForEntry.
  */
 
 export function getNonResolved(

front_end/panels/media/TickingFlameChart.ts

@@ -493,7 +493,7 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
     return false;
   }
 
-  prepareHighlightedEntryInfo(index: number): Element|null {
+  preparePopoverElement(index: number): Element|null {
     const element = document.createElement('div');
     (this.eventMap.get(index) as Event).decorate(element);
     return element;

front_end/panels/profiler/HeapProfileView.ts

@@ -675,28 +675,28 @@ export class HeapFlameChartDataProvider extends ProfileFlameChartDataProvider {
     return this.timelineDataInternal;
   }
 
-  override prepareHighlightedEntryInfo(entryIndex: number): Element|null {
+  override preparePopoverElement(entryIndex: number): Element|null {
     const node = this.entryNodes[entryIndex];
     if (!node) {
       return null;
     }
-    const entryInfo: {
+    const popoverInfo: {
       title: string,
       value: string,
     }[] = [];
-    function pushEntryInfoRow(title: string, value: string): void {
-      entryInfo.push({title, value});
+    function pushRow(title: string, value: string): void {
+      popoverInfo.push({title, value});
     }
-    pushEntryInfoRow(i18nString(UIStrings.name), UI.UIUtils.beautifyFunctionName(node.functionName));
-    pushEntryInfoRow(i18nString(UIStrings.selfSize), i18n.ByteUtilities.bytesToString(node.self));
-    pushEntryInfoRow(i18nString(UIStrings.totalSize), i18n.ByteUtilities.bytesToString(node.total));
+    pushRow(i18nString(UIStrings.name), UI.UIUtils.beautifyFunctionName(node.functionName));
+    pushRow(i18nString(UIStrings.selfSize), i18n.ByteUtilities.bytesToString(node.self));
+    pushRow(i18nString(UIStrings.totalSize), i18n.ByteUtilities.bytesToString(node.total));
     const linkifier = new Components.Linkifier.Linkifier();
     const link = linkifier.maybeLinkifyConsoleCallFrame(
         this.heapProfilerModel ? this.heapProfilerModel.target() : null, node.callFrame);
     if (link) {
-      pushEntryInfoRow(i18nString(UIStrings.url), (link.textContent as string));
+      pushRow(i18nString(UIStrings.url), (link.textContent as string));
     }
     linkifier.dispose();
-    return ProfileView.buildPopoverTable(entryInfo);
+    return ProfileView.buildPopoverTable(popoverInfo);
   }
 }

front_end/panels/profiler/ProfileFlameChartDataProvider.ts

@@ -93,7 +93,7 @@ export class ProfileFlameChartDataProvider implements PerfUI.FlameChart.FlameCha
     throw 'Not implemented.';
   }
 
-  prepareHighlightedEntryInfo(_entryIndex: number): Element|null {
+  preparePopoverElement(_entryIndex: number): Element|null {
     throw 'Not implemented.';
   }
 

front_end/panels/profiler/ProfileView.ts

@@ -223,12 +223,12 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
     this.linkifierInternal = new Components.Linkifier.Linkifier(maxLinkLength);
   }
 
-  static buildPopoverTable(entryInfo: {
+  static buildPopoverTable(popoverInfo: {
     title: string,
     value: string,
   }[]): Element {
     const table = document.createElement('table');
-    for (const entry of entryInfo) {
+    for (const entry of popoverInfo) {
       const row = table.createChild('tr');
       row.createChild('td').textContent = entry.title;
       row.createChild('td').textContent = entry.value;

front_end/panels/timeline/AnimationsTrackAppender.ts

@@ -7,10 +7,9 @@ import * as Trace from '../../models/trace/trace.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {addDecorationToEvent, buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
+import {addDecorationToEvent, buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -75,9 +74,4 @@ export class AnimationsTrackAppender implements TrackAppender {
     const {displayName} = event.args.data.beginEvent.args.data;
     return displayName || event.name;
   }
-
-  highlightedEntryInfo(event: Trace.Types.Events.SyntheticAnimationPair): HighlightedEntryInfo {
-    const title = this.titleForEvent(event);
-    return {title, formattedTime: getFormattedTime(event.dur)};
-  }
 }

front_end/panels/timeline/AppenderUtils.ts

@@ -81,7 +81,7 @@ export function buildTrackHeader(
  * Returns the time info shown when an event is hovered in the timeline.
  * @param totalTime the total time of the hovered event.
  * @param selfTime the self time of the hovered event.
- * @returns the formatted time string for highlightedEntryInfo
+ * @returns the formatted time string for popoverInfo
  */
 export function getFormattedTime(
     totalTime?: Trace.Types.Timing.MicroSeconds, selfTime?: Trace.Types.Timing.MicroSeconds): string {

front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
 import type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -25,11 +26,12 @@ import {
 import {TimingsTrackAppender} from './TimingsTrackAppender.js';
 import * as TimelineUtils from './utils/utils.js';
 
-export type HighlightedEntryInfo = {
+export type PopoverInfo = {
   title: string,
   formattedTime: string,
-  warningElements?: HTMLSpanElement[],
-  additionalElement?: HTMLElement,
+  url: string|null,
+  warningElements: HTMLSpanElement[],
+  additionalElements: HTMLElement[],
 };
 
 let showPostMessageEvents: boolean|undefined;
@@ -124,9 +126,9 @@ export interface TrackAppender {
    */
   titleForEvent?(event: Trace.Types.Events.Event): string;
   /**
-   * Returns the info shown when an event in the timeline is hovered.
+   * Updates the standard popover (AKA tooltip) some appender specific details.
    */
-  highlightedEntryInfo?(event: Trace.Types.Events.Event): Partial<HighlightedEntryInfo>;
+  setPopoverInfo?(event: Trace.Types.Events.Event, info: PopoverInfo): void;
   /**
    * Returns the a callback function to draw an event to overrides the normal rectangle draw operation.
    */
@@ -645,47 +647,42 @@ export class CompatibilityTracksAppender {
   /**
    * Returns the info shown when an event in the timeline is hovered.
    */
-  highlightedEntryInfo(event: Trace.Types.Events.Event, level: number): HighlightedEntryInfo {
+  popoverInfo(event: Trace.Types.Events.Event, level: number): PopoverInfo {
     const track = this.#trackForLevel.get(level);
     if (!track) {
       throw new Error('Track not found for level');
     }
 
-    // Add any warnings information to the tooltip. Done here to avoid duplicating this call in every appender.
-    // By doing this here, we ensure that any warnings that are
-    // added to the WarningsHandler are automatically used and added
-    // to the tooltip.
-    const warningElements: HTMLSpanElement[] =
-        TimelineComponents.DetailsView.buildWarningElementsForEvent(event, this.#parsedTrace);
-
-    let title = this.titleForEvent(event, level);
-    let formattedTime = getFormattedTime(event.dur);
-    let additionalElement;
-
-    // If the track defines a custom highlight, call it and use its values.
-    if (track.highlightedEntryInfo) {
-      const {
-        title: customTitle,
-        formattedTime: customFormattedTime,
-        warningElements: extraWarningElements,
-        additionalElement: element,
-      } = track.highlightedEntryInfo(event);
-      if (customTitle) {
-        title = customTitle;
-      }
-      if (customFormattedTime) {
-        formattedTime = customFormattedTime;
-      }
-      if (extraWarningElements) {
-        warningElements.push(...extraWarningElements);
-      }
-      additionalElement = element;
-    }
-    return {
-      title,
-      formattedTime,
-      warningElements,
-      additionalElement,
+    // Defaults here, though tracks may chose to redefine title/formattedTime
+    const info: PopoverInfo = {
+      title: this.titleForEvent(event, level),
+      formattedTime: getFormattedTime(event.dur),
+      warningElements: TimelineComponents.DetailsView.buildWarningElementsForEvent(event, this.#parsedTrace),
+      additionalElements: [],
+      url: null,
     };
+
+    // If the track defines its own popoverInfo(), it'll update values within
+    if (track.setPopoverInfo) {
+      track.setPopoverInfo(event, info);
+    }
+
+    // If there's a url associated, add into additionalElements
+    const url = URL.parse(
+        info.url ?? TimelineUtils.SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(this.#parsedTrace, event) ??
+        '');
+    if (url) {
+      const MAX_PATH_LENGTH = 45;
+      const MAX_ORIGIN_LENGTH = 30;
+      const path = Platform.StringUtilities.trimMiddle(url.href.replace(url.origin, ''), MAX_PATH_LENGTH);
+      const origin =
+          Platform.StringUtilities.trimEndWithMaxLength(url.origin.replace('https://', ''), MAX_ORIGIN_LENGTH);
+      const urlElems = document.createElement('div');
+      urlElems.createChild('span', 'popoverinfo-url-path').textContent = path;
+      urlElems.createChild('span', 'popoverinfo-url-origin').textContent = `(${origin})`;
+      info.additionalElements.push(urlElems);
+    }
+
+    return info;
   }
 }

front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -5,10 +5,9 @@ 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, getFormattedTime} from './AppenderUtils.js';
+import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -100,17 +99,9 @@ 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;
   }
-
-  /**
-   * Returns the info shown when an event added by this appender
-   * is hovered in the timeline.
-   */
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
-    const title = Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText ?
-        event.args.tooltipText :
-        this.titleForEvent(event);
-    return {title, formattedTime: getFormattedTime(event.dur)};
-  }
 }

front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -9,7 +9,7 @@ import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
+  type PopoverInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -148,12 +148,11 @@ export class InteractionsTrackAppender implements TrackAppender {
     return this.#colorGenerator.colorForID(idForColorGeneration);
   }
 
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
+  setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
     if (Trace.Types.Events.isSyntheticInteraction(event)) {
       const breakdown = new Components.InteractionBreakdown.InteractionBreakdown();
       breakdown.entry = event;
-      return {title: '', formattedTime: '', additionalElement: breakdown};
+      info.additionalElements.push(breakdown);
     }
-    return {title: '', formattedTime: ''};
   }
 }