Display tracer argument values via DevTool's Reps components

package.json

@@ -60,14 +60,14 @@
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-rust": "^6.0.1",
     "@codemirror/language": "^6.10.8",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.36.2",
+    "@codemirror/state": "^6.5.0",
+    "@codemirror/view": "^6.36.1",
     "@firefox-devtools/react-contextmenu": "^5.2.0",
     "@fluent/bundle": "^0.18.0",
     "@fluent/langneg": "^0.7.0",
     "@fluent/react": "^0.15.2",
     "@lezer/highlight": "^1.2.1",
-    "@tgwf/co2": "^0.16.6",
+    "@tgwf/co2": "^0.16.4",
     "array-move": "^3.0.1",
     "array-range": "^1.0.1",
     "clamp": "^1.0.1",
@@ -77,9 +77,9 @@
     "core-js": "^3.40.0",
     "escape-string-regexp": "^4.0.0",
     "gecko-profiler-demangle": "^0.3.3",
-    "idb": "^8.0.2",
+    "idb": "^8.0.0",
     "jszip": "^3.10.1",
-    "long": "^5.3.0",
+    "long": "^5.2.3",
     "memoize-immutable": "^3.0.0",
     "memoize-one": "^6.0.0",
     "minimist": "^1.2.8",
@@ -90,7 +90,9 @@
     "query-string": "^9.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-intersection-observer": "^9.15.1",
+    "react-dom-factories": "^1.0.2",
+    "react-intersection-observer": "^9.14.1",
+    "prop-types": "^15.8.1",
     "react-redux": "^9.2.0",
     "react-splitter-layout": "^4.0.0",
     "react-transition-group": "^4.4.5",
@@ -104,23 +106,22 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.26.4",
-    "@babel/core": "^7.26.7",
-    "@babel/eslint-parser": "^7.26.8",
+    "@babel/core": "^7.26.0",
+    "@babel/eslint-parser": "^7.25.9",
     "@babel/eslint-plugin": "^7.25.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.26.7",
+    "@babel/preset-env": "^7.26.0",
     "@babel/preset-flow": "^7.25.9",
     "@babel/preset-react": "^7.26.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.1.0",
     "alex": "^11.0.1",
     "autoprefixer": "^10.4.20",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-module-resolver": "^5.0.2",
-    "browserslist": "^4.24.4",
-    "caniuse-lite": "^1.0.30001699",
+    "browserslist": "^4.24.3",
     "circular-dependency-plugin": "^5.2.1",
     "codecov": "^3.8.3",
     "copy-webpack-plugin": "^12.0.2",
@@ -133,10 +134,10 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jest": "^28.10.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jest-formatting": "^3.1.0",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-testing-library": "^7.1.1",
     "espree": "^10.3.0",
     "fake-indexeddb": "^6.0.0",
@@ -158,13 +159,13 @@
     "node-fetch": "^2.6.11",
     "npm-run-all2": "^7.0.2",
     "open": "^10.1.0",
-    "postcss": "^8.5.2",
+    "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
-    "prettier": "^3.5.1",
+    "prettier": "^3.4.2",
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.10",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.14.1",
+    "stylelint": "^16.12.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^37.0.0",
     "webpack": "^5.97.1",

src/components/stack-chart/Canvas.js

@@ -20,6 +20,7 @@ import {
   typeof changeMouseTimePosition as ChangeMouseTimePosition,
 } from '../../actions/profile-view';
 import { mapCategoryColorNameToStackChartStyles } from '../../utils/colors';
+import { getArgvSummaries } from '../../utils/value-summaries';
 import { TooltipCallNode } from '../tooltip/CallNode';
 import { TooltipMarker } from '../tooltip/Marker';
 
@@ -97,6 +98,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;
@@ -466,12 +468,18 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
       );
     }
 
+
     const callNodeIndex = timing.callNode[stackTimingIndex];
     if (callNodeIndex === undefined) {
       return null;
     }
     const duration =
       timing.end[stackTimingIndex] - timing.start[stackTimingIndex];
+    const argv = timing.argv[stackTimingIndex];
+    let argvSummaries = undefined;
+    if (argv != -1) {
+      argvSummaries = getArgvSummaries(thread, argv);
+    }
 
     return (
       <TooltipCallNode
@@ -486,6 +494,7 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
         callTreeSummaryStrategy="timing"
         durationText={formatMilliseconds(duration)}
         displayStackType={displayStackType}
+        argv={JSON.stringify(argvSummaries, null, 2) || null}
       />
     );
   };

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 'firefox-profiler/components/shared/reps/index'
+const { Rep } = REPS;
+
+
 import './CallNode.css';
 import classNames from 'classnames';
 
@@ -129,6 +136,7 @@ type Props = {|
   +timings?: TimingsForPath,
   +callTreeSummaryStrategy: CallTreeSummaryStrategy,
   +displayStackType: boolean,
+  +argv?: string | null,
 |};
 
 /**
@@ -358,6 +366,7 @@ export class TooltipCallNode extends React.PureComponent<Props> {
       thread,
       durationText,
       categories,
+      argv,
       displayData,
       timings,
       callTreeSummaryStrategy,
@@ -423,6 +432,27 @@ export class TooltipCallNode extends React.PureComponent<Props> {
       ];
     }
 
+    let argumentsElement = null;
+    if (argv) {
+      const argPreviews = JSON.parse(argv);
+      if (argPreviews.length == 0) {
+        argumentsElement = <div className="arguments">No argument.</div>;
+      } else {
+        let argvEl = [];
+        for(const previewObject of argPreviews) {
+          argvEl.push(Rep({
+            object: previewObject,
+            mode: MODE.LONG,
+          }));
+        }
+        // Use .theme-light in order to apply css variables from DevTool's variables.css
+        argumentsElement = <div className="arguments theme-light">
+         <div className="argumentsLabel">Arguments</div>
+         {argvEl}
+        </div>;
+      }
+    }
+
     // Finding current frame and parent frame URL(if there is).
     let pageAndParentPageURL;
     if (innerWindowIDToPageMap) {
@@ -539,6 +569,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/profile-logic/data-structures.js

@@ -89,6 +89,7 @@ export function getEmptySamplesTableWithEventDelay(): RawSamplesTable {
     eventDelay: [],
     stack: [],
     time: [],
+    argv: [],
     length: 0,
   };
 }
@@ -109,6 +110,7 @@ export function getEmptySamplesTableWithResponsiveness(): SamplesTable {
     responsiveness: [],
     stack: [],
     time: [],
+    argv: [],
     length: 0,
   };
 }

src/profile-logic/process-profile.js

@@ -967,6 +967,10 @@ function _processSamples(geckoSamples: GeckoSampleStruct): RawSamplesTable {
     }
   }
 
+  if (geckoSamples.argv) {
+    samples.argv = geckoSamples.argv;
+  }
+
   if (geckoSamples.eventDelay) {
     samples.eventDelay = geckoSamples.eventDelay;
   } else if (geckoSamples.responsiveness) {
@@ -1204,6 +1208,14 @@ function _processThread(
     newThread.nativeAllocations = nativeAllocations;
   }
 
+  if (thread.values) {
+    newThread.argvBuffer = thread.values;
+  }
+
+  if (thread.shapes) {
+    newThread.shapes = thread.shapes;
+  }
+
   function processJsTracer() {
     // Optionally extract the JS Tracer information, if they exist.
     const { jsTracerEvents } = thread;

src/profile-logic/profile-data.js

@@ -1757,6 +1757,13 @@ export function filterThreadSamplesToRange(
     );
   }
 
+  if (samples.argv) {
+    newSamples.argv = samples.argv.slice(
+      beginSampleIndex,
+      endSampleIndex
+    );
+  }
+
   if (samples.threadId) {
     newSamples.threadId = samples.threadId.slice(
       beginSampleIndex,
@@ -1883,6 +1890,13 @@ export function filterRawThreadSamplesToRange(
     );
   }
 
+  if (samples.argv) {
+    newSamples.argv = samples.argv.slice(
+      beginSampleIndex,
+      endSampleIndex
+    );
+  }
+
   if (samples.threadId) {
     newSamples.threadId = samples.threadId.slice(
       beginSampleIndex,
@@ -1989,6 +2003,9 @@ export function filterCounterSamplesToRange(
     number: samples.number
       ? samples.number.slice(beginSampleIndex, endSampleIndex)
       : undefined,
+    argv: samples.argv
+      ? samples.argv.slice(beginSampleIndex, endSampleIndex)
+      : undefined,
   };
 
   return newCounter;
@@ -2337,6 +2354,7 @@ export function computeSamplesTableFromRawSamplesTable(
   const {
     responsiveness,
     eventDelay,
+    argv,
     stack,
     weight,
     weightType,
@@ -2363,6 +2381,7 @@ export function computeSamplesTableFromRawSamplesTable(
     // These fields are copied from the raw samples table:
     responsiveness,
     eventDelay,
+    argv,
     stack,
     weight,
     weightType,
@@ -2382,7 +2401,8 @@ export function createThreadFromDerivedTables(
   rawThread: RawThread,
   samples: SamplesTable,
   stackTable: StackTable,
-  stringTable: StringTable
+  stringTable: StringTable,
+  argvBuffer: ArrayBuffer | null,
 ): Thread {
   const {
     processType,
@@ -2409,6 +2429,7 @@ export function createThreadFromDerivedTables(
     jsTracer,
     isPrivateBrowsing,
     userContextId,
+    shapes,
   } = rawThread;
 
   const thread: Thread = {
@@ -2437,11 +2458,13 @@ export function createThreadFromDerivedTables(
     jsTracer,
     isPrivateBrowsing,
     userContextId,
+    shapes,
 
     // These fields are derived:
     samples,
     stackTable,
     stringTable,
+    argvBuffer: argvBuffer || undefined
   };
   return thread;
 }