feat(engine): add tooltips for performance timings (#4541)

Co-authored-by: Will Harney <[email protected]>

packages/@lwc/engine-core/src/framework/profiler.ts

@@ -47,7 +47,28 @@ const operationIdNameMapping = [
  'errorCallback',
  'lwc-hydrate',
  'lwc-rehydrate',
-] as const;
+] as const satisfies Record<OperationId, string>;
+
+const operationTooltipMapping = [
+ // constructor
+ 'component constructor()',
+ // render
+ 'component render() and virtual DOM rendered',
+ // patch
+ 'component DOM rendered',
+ // connectedCallback
+ 'component connectedCallback()',
+ // renderedCallback
+ 'component renderedCallback()',
+ // disconnectedCallback
+ 'component disconnectedCallback()',
+ // errorCallback
+ 'component errorCallback()',
+ // lwc-hydrate
+ 'component first rendered',
+ // lwc-rehydrate
+ 'component re-rendered',
+] as const satisfies Record<OperationId, string>;
 
 // Even if all the browser the engine supports implements the UserTiming API, we need to guard the measure APIs.
 // JSDom (used in Jest) for example doesn't implement the UserTiming APIs.
@@ -82,6 +103,7 @@ const end = !isUserTimingSupported
  | 'tertiary-dark'
  | 'error';
  properties?: [string, string][];
+ tooltipText?: string;
  }
  ) => {
  performance.measure(measureName, {
@@ -124,6 +146,10 @@ function getProperties(vm: VM<any, any>): [string, string][] {
  ];
 }
 
+function getTooltipText(measureName: string, opId: OperationId) {
+ return `${measureName} - ${operationTooltipMapping[opId]}`;
+}
+
 /** Indicates if operations should be logged via the User Timing API. */
 const isMeasureEnabled = process.env.NODE_ENV !== 'production';
 
@@ -172,6 +198,7 @@ export function logOperationEnd(opId: OperationId, vm: VM) {
  const measureName = getMeasureName(opId, vm);
  end(measureName, markName, {
  properties: getProperties(vm),
+ tooltipText: getTooltipText(measureName, opId),
  color: opId === OperationId.Render ? 'primary' : 'secondary',
  });
  }
@@ -208,6 +235,7 @@ export function logGlobalOperationEnd(opId: GlobalOperationId) {
  const opName = getOperationName(opId);
  const markName = opName;
  end(opName, markName, {
+ tooltipText: getTooltipText(opName, opId),
  color: 'tertiary',
  });
  }
@@ -223,6 +251,7 @@ export function logGlobalOperationEndWithVM(opId: GlobalOperationId, vm: VM) {
  const markName = getMarkName(opId, vm);
  end(opName, markName, {
  properties: getProperties(vm),
+ tooltipText: getTooltipText(opName, opId),
  color: 'tertiary',
  });
  }