WIP traced value support

Author: squarewave

package.json

@@ -82,6 +82,7 @@
     "common-tags": "^1.8.2",
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.44.0",
+    "devtools-reps": "^0.24.0",
     "escape-string-regexp": "^4.0.0",
     "gecko-profiler-demangle": "^0.3.3",
     "idb": "^8.0.3",
@@ -190,7 +191,7 @@
       "jsx"
     ],
     "transformIgnorePatterns": [
-      "/node_modules/(?!(query-string|decode-uri-component|split-on-first|filter-obj|@fetch-mock/jest|fetch-mock)/)"
+      "/node_modules/(?!(query-string|decode-uri-component|split-on-first|filter-obj|@fetch-mock/jest|fetch-mock|devtools-reps)/)"
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ftl)$": "<rootDir>/src/test/fixtures/mocks/file-mock.js",

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.js

@@ -21,6 +21,7 @@ import {
   typeof changeMouseTimePosition as ChangeMouseTimePosition,
 } from '../../actions/profile-view';
 import { mapCategoryColorNameToStackChartStyles } from '../../utils/colors';
+import { ValueSummaryReader } from '../../utils/value-summaries';
 import { TooltipCallNode } from '../tooltip/CallNode';
 import { TooltipMarker } from '../tooltip/Marker';
 
@@ -101,6 +102,7 @@ const TEXT_CSS_PIXELS_OFFSET_TOP = 11;
 const FONT_SIZE = 10;
 const BORDER_OPACITY = 0.4;
 
+
 class StackChartCanvasImpl extends React.PureComponent<Props> {
   _textMeasurement: null | TextMeasurement;
   _textMeasurementCssToDeviceScale: number = 1;
@@ -601,13 +603,22 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
       );
     }
 
+
     const callNodeIndex = timing.callNode[stackTimingIndex];
     if (callNodeIndex === undefined) {
       return null;
     }
     const duration =
       timing.end[stackTimingIndex] - timing.start[stackTimingIndex];
 
+    let argumentSummaries = undefined;
+    if (timing.argumentValues) {
+      const argumentValues = timing.argumentValues[stackTimingIndex];
+      if (argumentValues != -1) {
+        argumentSummaries = ValueSummaryReader.getArgumentSummaries(thread.tracedValuesBuffer, thread.tracedObjectShapes, argumentValues);
+      }
+    }
+
     return (
       <TooltipCallNode
         thread={thread}
@@ -621,6 +632,7 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
         callTreeSummaryStrategy="timing"
         durationText={formatMilliseconds(duration)}
         displayStackType={displayStackType}
+        argumentValues={argumentSummaries}
       />
     );
   };

src/components/tooltip/CallNode.js

@@ -32,6 +32,13 @@ import type {
 } 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 +136,7 @@ type Props = {|
   +timings?: TimingsForPath,
   +callTreeSummaryStrategy: CallTreeSummaryStrategy,
   +displayStackType: boolean,
+  +argumentValues?: Array<{...}>,
 |};
 
 /**
@@ -358,6 +366,7 @@ export class TooltipCallNode extends React.PureComponent<Props> {
       thread,
       durationText,
       categories,
+      argumentValues,
       displayData,
       timings,
       callTreeSummaryStrategy,
@@ -423,6 +432,25 @@ export class TooltipCallNode extends React.PureComponent<Props> {
       ];
     }
 
+    let argumentsElement = null;
+    if (argumentValues) {
+      if (argumentValues.length == 0) {
+        argumentsElement = <div className="arguments">No arguments.</div>;
+      } else {
+        let 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) {
@@ -539,6 +567,7 @@ export class TooltipCallNode extends React.PureComponent<Props> {
             {resource}
           </div>
           {this._renderCategoryTimings(timings)}
+          {argumentsElement}
         </div>
       </div>
     );

src/components/tooltip/Tooltip.css

@@ -145,3 +145,12 @@
 .sidebar .tooltipDetailSeparator {
   display: none;
 }
+
+.argumentsLabel {
+  /* match tooltips label, without being aligned to the right */
+  color: var(--grey-50);
+}
+.arguments > span {
+  display: block;
+  border-bottom: 1px solid var(--grey-40);
+}

src/index.js

@@ -15,6 +15,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';
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';

src/profile-logic/process-profile.js

@@ -1027,6 +1027,10 @@ function _processSamples(geckoSamples: GeckoSampleStruct): RawSamplesTable {
     }
   }
 
+  if (geckoSamples.argumentValues) {
+    samples.argumentValues = geckoSamples.argumentValues;
+  }
+
   if (geckoSamples.eventDelay) {
     samples.eventDelay = geckoSamples.eventDelay;
   } else if (geckoSamples.responsiveness) {
@@ -1266,6 +1270,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.js

@@ -1640,6 +1640,13 @@ export function filterThreadSamplesToRange(
     );
   }
 
+  if (samples.argumentValues) {
+    newSamples.argumentValues = samples.argumentValues.slice(
+      beginSampleIndex,
+      endSampleIndex
+    );
+  }
+
   if (samples.threadId) {
     newSamples.threadId = samples.threadId.slice(
       beginSampleIndex,
@@ -1766,6 +1773,13 @@ export function filterRawThreadSamplesToRange(
     );
   }
 
+  if (samples.argumentValues) {
+    newSamples.argumentValues = samples.argumentValues.slice(
+      beginSampleIndex,
+      endSampleIndex
+    );
+  }
+
   if (samples.threadId) {
     newSamples.threadId = samples.threadId.slice(
       beginSampleIndex,
@@ -1872,6 +1886,9 @@ export function filterCounterSamplesToRange(
     number: samples.number
       ? samples.number.slice(beginSampleIndex, endSampleIndex)
       : undefined,
+    argumentValues: samples.argumentValues
+      ? samples.argumentValues.slice(beginSampleIndex, endSampleIndex)
+      : undefined,
   };
 
   return newCounter;
@@ -2196,6 +2213,7 @@ export function computeSamplesTableFromRawSamplesTable(
   const {
     responsiveness,
     eventDelay,
+    argumentValues,
     stack,
     weight,
     weightType,
@@ -2222,6 +2240,7 @@ export function computeSamplesTableFromRawSamplesTable(
     // These fields are copied from the raw samples table:
     responsiveness,
     eventDelay,
+    argumentValues,
     stack,
     weight,
     weightType,
@@ -2241,7 +2260,8 @@ export function createThreadFromDerivedTables(
   rawThread: RawThread,
   samples: SamplesTable,
   stackTable: StackTable,
-  stringTable: StringTable
+  stringTable: StringTable,
+  tracedValuesBuffer: ArrayBuffer | null,
 ): Thread {
   const {
     processType,
@@ -2268,6 +2288,7 @@ export function createThreadFromDerivedTables(
     jsTracer,
     isPrivateBrowsing,
     userContextId,
+    tracedObjectShapes,
   } = rawThread;
 
   const thread: Thread = {
@@ -2296,11 +2317,13 @@ export function createThreadFromDerivedTables(
     jsTracer,
     isPrivateBrowsing,
     userContextId,
+    tracedObjectShapes,
 
     // These fields are derived:
     samples,
     stackTable,
     stringTable,
+    tracedValuesBuffer: tracedValuesBuffer || undefined
   };
   return thread;
 }

src/profile-logic/stack-timing.js

@@ -88,6 +88,7 @@ export type StackTiming = {|
   sameWidthsStart: number[],
   sameWidthsEnd: number[],
   callNode: IndexIntoCallNodeTable[],
+  argumentValues?: number[],
   length: number,
 |};
 
@@ -114,14 +115,20 @@ export function getStackTimingByDepth(
     subtreeRangeEnd: callNodeTableSubtreeRangeEndColumn,
     depth: callNodeTableDepthColumn,
   } = callNodeTable;
-  const stackTimingByDepth = Array.from({ length: maxDepthPlusOne }, () => ({
-    start: [],
-    end: [],
-    sameWidthsStart: [],
-    sameWidthsEnd: [],
-    callNode: [],
-    length: 0,
-  }));
+  const stackTimingByDepth = Array.from({ length: maxDepthPlusOne }, () => {
+    const shape: StackTiming = {
+      start: [],
+      end: [],
+      sameWidthsStart: [],
+      sameWidthsEnd: [],
+      callNode: [],
+      length: 0,
+    };
+    if (samples.argumentValues) {
+      shape.argumentValues = [];
+    };
+    return shape;
+  });
 
   const sameWidthsIndexToTimestampMap = [];
 
@@ -152,6 +159,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++) {
@@ -160,6 +168,11 @@ export function getStackTimingByDepth(
       continue;
     }
 
+    let sampleArgs : number = -1; 
+    if (samples.argumentValues) {
+      sampleArgs = samples.argumentValues[sampleIndex] !== null ? samples.argumentValues[sampleIndex] : -1;
+    }
+
     const sampleTime = samples.time[sampleIndex];
 
     // Phase 1: Commit open boxes which are not shared by the current call node,
@@ -191,6 +204,9 @@ 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--;
@@ -206,6 +222,9 @@ export function getStackTimingByDepth(
         deepestOpenBoxDepth++;
         openBoxStartTimeByDepth[deepestOpenBoxDepth] = sampleTime;
         openBoxStartTickByDepth[deepestOpenBoxDepth] = currentStackTick;
+        if (samples.argumentValues) {
+          openBoxArgsByDepth[deepestOpenBoxDepth] = sampleArgs;
+        }
       }
     }
 
@@ -227,6 +246,9 @@ 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--;