Display traced values in Stack Chart view

jest.config.js

@@ -15,10 +15,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

@@ -78,6 +78,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

@@ -29,3 +29,17 @@
 .colored-border.ellipsis {
   opacity: 0;
 }
+
+/* Colors for DevTools Reps */
+:root {
+  --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;
+}

src/components/stack-chart/Canvas.tsx

@@ -17,6 +17,7 @@ import type {
 
 type ChangeMouseTimePosition = typeof changeMouseTimePosition;
 import { mapCategoryColorNameToStackChartStyles } from '../../utils/colors';
+import { ValueSummaryReader } from 'devtools-reps';
 import { TooltipCallNode } from '../tooltip/CallNode';
 import { TooltipMarker } from '../tooltip/Marker';
 
@@ -624,6 +625,17 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
       timelineUnit === 'bytes'
         ? formatBytes(duration)
         : formatMilliseconds(duration);
+    let argumentSummaries = undefined;
+    if (timing.argumentValues) {
+      const argumentValues = timing.argumentValues[stackTimingIndex];
+      if (argumentValues !== -1) {
+        argumentSummaries = ValueSummaryReader.getArgumentSummaries(
+          thread.tracedValuesBuffer as ArrayBuffer,
+          thread.tracedObjectShapes as Array<string[] | null>,
+          argumentValues
+        );
+      }
+    }
 
     return (
       <TooltipCallNode
@@ -638,6 +650,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,29 @@ export class TooltipCallNode extends React.PureComponent<Props> {
       ];
     }
 
+    let argumentsElement = null;
+    if (argumentValues) {
+      if (argumentValues.length === 0) {
+        argumentsElement = <div className="arguments">No arguments.</div>;
+      } else {
+        const argumentValuesEl = [];
+        for (const previewObject of argumentValues) {
+          argumentValuesEl.push(
+            Rep({
+              object: previewObject,
+              mode: MODE.LONG,
+            })
+          );
+        }
+        argumentsElement = (
+          <div className="arguments">
+            <div className="argumentsLabel">Arguments</div>
+            {argumentValuesEl}
+          </div>
+        );
+      }
+    }
+
     // Finding current frame and parent frame URL(if there is).
     let pageAndParentPageURL;
     if (innerWindowIDToPageMap) {
@@ -542,6 +569,7 @@ export class TooltipCallNode extends React.PureComponent<Props> {
             {resource}
           </div>
           {this._renderCategoryTimings(timings)}
+          {argumentsElement}
         </div>
       </div>
     );

src/components/tooltip/Tooltip.css

@@ -156,3 +156,17 @@
 .sidebar .tooltipDetailSeparator {
   display: none;
 }
+
+.argumentsLabel {
+  /* match tooltips label, without being aligned to the right */
+  color: var(--grey-50);
+}
+
+.arguments > span {
+  display: block;
+  padding: 0.25em;
+}
+
+.arguments > span:nth-child(odd) {
+  background-color: rgb(0 0 0 / 0.05);
+}

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

@@ -1011,6 +1011,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) {
@@ -1251,6 +1255,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

@@ -1732,6 +1732,13 @@ export function filterThreadSamplesToRange(
     );
   }
 
+  if (samples.argumentValues) {
+    newSamples.argumentValues = samples.argumentValues.slice(
+      beginSampleIndex,
+      endSampleIndex
+    );
+  }
+
   if (samples.threadId) {
     newSamples.threadId = samples.threadId.slice(
       beginSampleIndex,
@@ -1858,6 +1865,13 @@ export function filterRawThreadSamplesToRange(
     );
   }
 
+  if (samples.argumentValues) {
+    newSamples.argumentValues = samples.argumentValues.slice(
+      beginSampleIndex,
+      endSampleIndex
+    );
+  }
+
   if (samples.threadId) {
     newSamples.threadId = samples.threadId.slice(
       beginSampleIndex,
@@ -1964,6 +1978,9 @@ export function filterCounterSamplesToRange(
     number: samples.number
       ? samples.number.slice(beginSampleIndex, endSampleIndex)
       : undefined,
+    argumentValues: samples.argumentValues
+      ? samples.argumentValues.slice(beginSampleIndex, endSampleIndex)
+      : undefined,
   };
 
   return newCounter;
@@ -2288,6 +2305,7 @@ export function computeSamplesTableFromRawSamplesTable(
   const {
     responsiveness,
     eventDelay,
+    argumentValues,
     stack,
     weight,
     weightType,
@@ -2309,6 +2327,7 @@ export function computeSamplesTableFromRawSamplesTable(
     // These fields are copied from the raw samples table:
     responsiveness,
     eventDelay,
+    argumentValues,
     stack,
     weight,
     weightType,
@@ -2329,7 +2348,8 @@ export function createThreadFromDerivedTables(
   samples: SamplesTable,
   stackTable: StackTable,
   stringTable: StringTable,
-  sources: SourceTable
+  sources: SourceTable,
+  tracedValuesBuffer: ArrayBuffer | undefined
 ): Thread {
   const {
     processType,
@@ -2356,6 +2376,7 @@ export function createThreadFromDerivedTables(
     jsTracer,
     isPrivateBrowsing,
     userContextId,
+    tracedObjectShapes,
   } = rawThread;
 
   const thread: Thread = {
@@ -2384,12 +2405,14 @@ export function createThreadFromDerivedTables(
     jsTracer,
     isPrivateBrowsing,
     userContextId,
+    tracedObjectShapes,
 
     // These fields are derived:
     samples,
     stackTable,
     stringTable,
     sources,
+    tracedValuesBuffer,
   };
   return thread;
 }

src/profile-logic/stack-timing.ts

@@ -87,6 +87,7 @@ export type StackTiming = {
   sameWidthsStart: number[];
   sameWidthsEnd: number[];
   callNode: IndexIntoCallNodeTable[];
+  argumentValues?: number[];
   length: number;
 };
 
@@ -115,14 +116,20 @@ export function getStackTimingByDepth(
   } = callNodeTable;
   const stackTimingByDepth: StackTimingByDepth = Array.from(
     { length: maxDepthPlusOne },
-    (): StackTiming => ({
-      start: [],
-      end: [],
-      sameWidthsStart: [],
-      sameWidthsEnd: [],
-      callNode: [],
-      length: 0,
-    })
+    (): StackTiming => {
+      const shape: StackTiming = {
+        start: [],
+        end: [],
+        sameWidthsStart: [],
+        sameWidthsEnd: [],
+        callNode: [],
+        length: 0,
+      };
+      if ('argumentValues' in samples) {
+        shape.argumentValues = [];
+      }
+      return shape;
+    }
   );
 
   const sameWidthsIndexToTimestampMap: SameWidthsIndexToTimestampMap = [];
@@ -154,6 +161,7 @@ export function getStackTimingByDepth(
   let deepestOpenBoxDepth = -1;
   const openBoxStartTimeByDepth = new Float64Array(maxDepthPlusOne);
   const openBoxStartTickByDepth = new Float64Array(maxDepthPlusOne);
+  const openBoxArgsByDepth = new Int32Array(maxDepthPlusOne);
 
   let currentStackTick = 0;
   for (let sampleIndex = 0; sampleIndex < samples.length; sampleIndex++) {
@@ -162,6 +170,14 @@ export function getStackTimingByDepth(
       continue;
     }
 
+    let sampleArgs: number = -1;
+    if ('argumentValues' in samples && samples.argumentValues !== undefined) {
+      const val = samples.argumentValues[sampleIndex];
+      if (val !== null) {
+        sampleArgs = val;
+      }
+    }
+
     const sampleTime = samples.time[sampleIndex];
 
     // Phase 1: Commit open boxes which are not shared by the current call node,
@@ -193,6 +209,10 @@ export function getStackTimingByDepth(
       stackTimingForThisDepth.sameWidthsStart[index] = startStackTick;
       stackTimingForThisDepth.sameWidthsEnd[index] = currentStackTick;
       stackTimingForThisDepth.callNode[index] = deepestOpenBoxCallNodeIndex;
+      if (stackTimingForThisDepth.argumentValues) {
+        stackTimingForThisDepth.argumentValues[index] =
+          openBoxArgsByDepth[deepestOpenBoxDepth];
+      }
       deepestOpenBoxCallNodeIndex =
         callNodeTablePrefixColumn[deepestOpenBoxCallNodeIndex];
       deepestOpenBoxDepth--;
@@ -208,6 +228,12 @@ export function getStackTimingByDepth(
         deepestOpenBoxDepth++;
         openBoxStartTimeByDepth[deepestOpenBoxDepth] = sampleTime;
         openBoxStartTickByDepth[deepestOpenBoxDepth] = currentStackTick;
+        if (
+          'argumentValues' in samples &&
+          samples.argumentValues !== undefined
+        ) {
+          openBoxArgsByDepth[deepestOpenBoxDepth] = sampleArgs;
+        }
       }
     }
 
@@ -229,6 +255,10 @@ export function getStackTimingByDepth(
     stackTimingForThisDepth.sameWidthsStart[index] = startStackTick;
     stackTimingForThisDepth.sameWidthsEnd[index] = currentStackTick;
     stackTimingForThisDepth.callNode[index] = deepestOpenBoxCallNodeIndex;
+    if (stackTimingForThisDepth.argumentValues) {
+      stackTimingForThisDepth.argumentValues[index] =
+        openBoxArgsByDepth[deepestOpenBoxDepth];
+    }
     deepestOpenBoxCallNodeIndex =
       callNodeTablePrefixColumn[deepestOpenBoxCallNodeIndex];
     deepestOpenBoxDepth--;