Display traced values in Stack Chart view

jest.config.js

@@ -18,10 +18,14 @@ module.exports = {
  '!src/types/libdef/**',
  ],
 
+ transform: {
+ '\\.([jt]sx?|mjs)$': 'babel-jest',
+ },
+
  // Transform ESM modules to CommonJS for Jest
  // These packages ship as pure ESM and need to be transformed by Babel
  transformIgnorePatterns: [
- '/node_modules/(?!(query-string|decode-uri-component|iongraph-web|split-on-first|filter-obj|fetch-mock)/)',
+ '/node_modules/(?!(query-string|decode-uri-component|iongraph-web|split-on-first|filter-obj|fetch-mock|devtools-reps)/)',
  ],
 
  // Mock static assets (images, CSS, etc.)

package.json

@@ -82,6 +82,7 @@
  "common-tags": "^1.8.2",
  "copy-to-clipboard": "^3.3.3",
  "core-js": "^3.47.0",
+ "devtools-reps": "^0.27.3",
  "escape-string-regexp": "^4.0.0",
  "gecko-profiler-demangle": "^0.4.0",
  "idb": "^8.0.3",

res/css/global.css

@@ -47,6 +47,18 @@
  --wide-splitter-hover-color: #bbb;
  --wide-splitter-pressed-color: #aaa;
 
+ /* Colors for DevTools Reps */
+ --number-color: #058b00;
+ --string-color: #dd00a9;
+ --null-color: #5c5c5f;
+ --object-color: #0074e8;
+ --caption-color: #0074e8;
+ --location-color: #5c5c5f;
+ --source-link-color: #0060df;
+ --node-color: #003eaa;
+ --reference-color: #0074e8;
+ --comment-node-color: #5c5c5f;
+
  color: var(--base-foreground-color);
 }
 

src/components/stack-chart/Canvas.tsx

@@ -18,6 +18,7 @@ import {
  getForegroundColor,
  getBackgroundColor,
 } from '../../utils/colors';
+import { ValueSummaryReader } from 'devtools-reps';
 import { TooltipCallNode } from '../tooltip/CallNode';
 import { TooltipMarker } from '../tooltip/Marker';
 
@@ -623,6 +624,27 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
  timelineUnit === 'bytes'
  ? formatBytes(duration)
  : formatMilliseconds(duration);
+ let argumentSummaries = undefined;
+ if (timing.argumentValues) {
+ const argumentValuesIndex = timing.argumentValues[stackTimingIndex];
+ if (
+ argumentValuesIndex !== -1 &&
+ thread.tracedValuesBuffer &&
+ thread.tracedObjectShapes
+ ) {
+ const argSummaries = ValueSummaryReader.getArgumentSummaries(
+ thread.tracedValuesBuffer,
+ thread.tracedObjectShapes,
+ argumentValuesIndex
+ );
+ // The API maybe needs work - getArgumentSummaries can return a string indicating
+ // that the argument summaries for a given call were missing (this can happen if they
+ // were overwritten in the underlying ring buffer)
+ if (typeof argSummaries !== 'string') {
+ argumentSummaries = argSummaries;
+ }
+ }
+ }
 
  return (
  <TooltipCallNode
@@ -637,6 +659,7 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
  callTreeSummaryStrategy="timing"
  durationText={durationText}
  displayStackType={displayStackType}
+ argumentValues={argumentSummaries}
  />
  );
  };

src/components/tooltip/CallNode.tsx

@@ -31,6 +31,8 @@ import type {
  OneCategoryBreakdown,
 } from 'firefox-profiler/profile-logic/profile-data';
 import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
+import { REPS, MODE } from 'devtools-reps';
+const { Rep } = REPS;
 
 import './CallNode.css';
 import classNames from 'classnames';
@@ -129,6 +131,7 @@ type Props = {
  readonly timings?: TimingsForPath;
  readonly callTreeSummaryStrategy: CallTreeSummaryStrategy;
  readonly displayStackType: boolean;
+ readonly argumentValues?: Array<object>;
 };
 
 /**
@@ -358,6 +361,7 @@ export class TooltipCallNode extends React.PureComponent<Props> {
  thread,
  durationText,
  categories,
+ argumentValues,
  displayData,
  timings,
  callTreeSummaryStrategy,
@@ -426,6 +430,33 @@ export class TooltipCallNode extends React.PureComponent<Props> {
  ];
  }
 
+ let argumentsElement = null;
+ if (argumentValues) {
+ if (argumentValues.length === 0) {
+ argumentsElement = (
+ <div className="tooltipArguments">No arguments.</div>
+ );
+ } else {
+ const argumentValuesEl = [];
+ for (const previewObject of argumentValues) {
+ argumentValuesEl.push(
+ Rep({
+ object: previewObject,
+ mode: MODE.LONG,
+ })
+ );
+ }
+ argumentsElement = [
+ <div className="tooltipLabel" key="arguments">
+ Arguments:
+ </div>,
+ <div className="tooltipArguments" key="argumentsVal">
+ {argumentValuesEl}
+ </div>,
+ ];
+ }
+ }
+
  // Finding current frame and parent frame URL(if there is).
  let pageAndParentPageURL;
  if (innerWindowIDToPageMap) {
@@ -540,6 +571,7 @@ export class TooltipCallNode extends React.PureComponent<Props> {
  {pageAndParentPageURL}
  {fileName}
  {resource}
+ {argumentsElement}
  </div>
  {this._renderCategoryTimings(timings)}
  </div>

src/components/tooltip/Tooltip.css

@@ -177,3 +177,20 @@
 .sidebar .tooltipDetailSeparator {
  display: none;
 }
+
+.tooltipArgumentsLabel {
+ /* match tooltips label, without being aligned to the right */
+ color: var(--grey-50);
+}
+
+.tooltipArguments > span {
+ display: block;
+}
+
+.tooltipArguments > span:nth-child(odd) {
+ background-color: rgb(0 0 0 / 0.05);
+}
+
+.tooltipArguments {
+ text-indent: 1em hanging;
+}

src/index.tsx

@@ -13,6 +13,7 @@ import '../res/css/global.css';
 import '../res/css/categories.css';
 import '../res/css/network.css';
 import 'react-splitter-layout/lib/index.css';
+import 'devtools-reps/reps.css';
 
 // React imported for JSX in Root component
 import { createRoot } from 'react-dom/client';

src/profile-logic/process-profile.ts

@@ -1015,6 +1015,10 @@ function _processSamples(geckoSamples: GeckoSampleStruct): RawSamplesTable {
  }
  }
 
+ if ('argumentValues' in geckoSamples) {
+ samples.argumentValues = geckoSamples.argumentValues;
+ }
+
  if ('eventDelay' in geckoSamples) {
  samples.eventDelay = geckoSamples.eventDelay;
  } else if ('responsiveness' in geckoSamples) {
@@ -1255,6 +1259,14 @@ function _processThread(
  newThread.nativeAllocations = nativeAllocations;
  }
 
+ if (thread.tracedValues) {
+ newThread.tracedValuesBuffer = thread.tracedValues;
+ }
+
+ if (thread.tracedObjectShapes) {
+ newThread.tracedObjectShapes = thread.tracedObjectShapes;
+ }
+
  function processJsTracer() {
  // Optionally extract the JS Tracer information, if they exist.
  const { jsTracerEvents } = thread;

src/profile-logic/profile-data.ts

@@ -1882,6 +1882,13 @@ export function filterThreadSamplesToRange(
  );
  }
 
+ if (samples.argumentValues) {
+ newSamples.argumentValues = samples.argumentValues.slice(
+ beginSampleIndex,
+ endSampleIndex
+ );
+ }
+
  if (samples.threadId) {
  newSamples.threadId = samples.threadId.slice(
  beginSampleIndex,
@@ -2008,6 +2015,13 @@ export function filterRawThreadSamplesToRange(
  );
  }
 
+ if (samples.argumentValues) {
+ newSamples.argumentValues = samples.argumentValues.slice(
+ beginSampleIndex,
+ endSampleIndex
+ );
+ }
+
  if (samples.threadId) {
  newSamples.threadId = samples.threadId.slice(
  beginSampleIndex,
@@ -2114,6 +2128,9 @@ export function filterCounterSamplesToRange(
  number: samples.number
  ? samples.number.slice(beginSampleIndex, endSampleIndex)
  : undefined,
+ argumentValues: samples.argumentValues
+ ? samples.argumentValues.slice(beginSampleIndex, endSampleIndex)
+ : undefined,
  };
 
  return newCounter;
@@ -2438,6 +2455,7 @@ export function computeSamplesTableFromRawSamplesTable(
  const {
  responsiveness,
  eventDelay,
+ argumentValues,
  stack,
  weight,
  weightType,
@@ -2459,6 +2477,7 @@ export function computeSamplesTableFromRawSamplesTable(
  // These fields are copied from the raw samples table:
  responsiveness,
  eventDelay,
+ argumentValues,
  stack,
  weight,
  weightType,
@@ -2479,7 +2498,8 @@ export function createThreadFromDerivedTables(
  samples: SamplesTable,
  stackTable: StackTable,
  stringTable: StringTable,
- sources: SourceTable
+ sources: SourceTable,
+ tracedValuesBuffer: ArrayBuffer | undefined
 ): Thread {
  const {
  processType,
@@ -2506,6 +2526,7 @@ export function createThreadFromDerivedTables(
  jsTracer,
  isPrivateBrowsing,
  userContextId,
+ tracedObjectShapes,
  } = rawThread;
 
  const thread: Thread = {
@@ -2534,12 +2555,14 @@ export function createThreadFromDerivedTables(
  jsTracer,
  isPrivateBrowsing,
  userContextId,
+ tracedObjectShapes,
 
  // These fields are derived:
  samples,
  stackTable,
  stringTable,
  sources,
+ tracedValuesBuffer,
  };
  return thread;
 }

src/profile-logic/sanitize.ts

@@ -411,6 +411,9 @@ function sanitizeThreadPII(
  delete newThread['eTLD+1'];
  }
 
+ delete newThread.tracedValuesBuffer;
+ delete newThread.tracedObjectShapes;
+
  if (windowIdFromPrivateBrowsing.size > 0) {
  // In this block, we'll remove everything related to frame table entries
  // that have a innerWindowID with a isPrivateBrowsing flag.