Support parsing of detail arg from console.timeStamp (#54262)

Summary:
Pull Request resolved: #54262

Similar to `performance.measure()`, Chrome is adding an optional `detail` arg to `console.timeStamp`. Here we implement this for React Native, by direct passing to the `"TimeStamp"` trace event args.

[`console.timeStamp()`](https://developer.mozilla.org/en-US/docs/Web/API/console/timeStamp_static) remains an experimental, non-standard API.

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D85437162

fbshipit-source-id: 36f5f6207cf205df5a216bde95013ea9540fc082

Author: huntie

packages/polyfills/__tests__/consoleTimeStamp-itest.js

@@ -26,7 +26,9 @@ describe('console.timeStamp()', () => {
 
   it("doesn't throw when additional arguments are specified", () => {
     expect(() =>
-      console.timeStamp('label', 100, 500, 'Track', 'Group', 'error'),
+      console.timeStamp('label', 100, 500, 'Track', 'Group', 'error', {
+        tooltipText: 'Image processing failed',
+      }),
     ).not.toThrow();
   });
 

packages/react-native/ReactCommon/jsinspector-modern/RuntimeTargetConsole.cpp

@@ -467,9 +467,18 @@ void consoleTimeStamp(
     }
   }
 
+  std::optional<folly::dynamic> detail;
+  if (performanceTracer.isTracing() && argumentsCount >= 7) {
+    const jsi::Value& detailArgument = arguments[6];
+    if (detailArgument.isObject()) {
+      detail =
+          tracing::getConsoleTimeStampDetailFromObject(runtime, detailArgument);
+    }
+  }
+
   if (performanceTracer.isTracing()) {
     performanceTracer.reportTimeStamp(
-        label, start, end, trackName, trackGroup, color);
+        label, start, end, trackName, trackGroup, color, std::move(detail));
   }
 
   if (ReactPerfettoLogger::isTracing()) {

packages/react-native/ReactCommon/jsinspector-modern/tracing/ConsoleTimeStamp.cpp

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "ConsoleTimeStamp.h"
+
+namespace facebook::react::jsinspector_modern::tracing {
+
+std::optional<folly::dynamic> getConsoleTimeStampDetailFromObject(
+    jsi::Runtime& runtime,
+    const jsi::Value& detailValue) {
+  try {
+    return jsi::dynamicFromValue(runtime, detailValue);
+  } catch (jsi::JSIException&) {
+    return std::nullopt;
+  }
+}
+
+} // namespace facebook::react::jsinspector_modern::tracing

packages/react-native/ReactCommon/jsinspector-modern/tracing/ConsoleTimeStamp.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <jsi/JSIDynamic.h>
+#include <jsi/jsi.h>
 #include <react/timing/primitives.h>
 
 #include <cassert>
@@ -96,4 +98,6 @@ inline std::optional<ConsoleTimeStampColor> getConsoleTimeStampColorFromString(c
   }
 };
 
+std::optional<folly::dynamic> getConsoleTimeStampDetailFromObject(jsi::Runtime &runtime, const jsi::Value &detailValue);
+
 }; // namespace facebook::react::jsinspector_modern::tracing

packages/react-native/ReactCommon/jsinspector-modern/tracing/PerformanceTracer.cpp

@@ -213,7 +213,8 @@ void PerformanceTracer::reportTimeStamp(
     std::optional<ConsoleTimeStampEntry> end,
     std::optional<std::string> trackName,
     std::optional<std::string> trackGroup,
-    std::optional<ConsoleTimeStampColor> color) {
+    std::optional<ConsoleTimeStampColor> color,
+    std::optional<folly::dynamic> detail) {
   if (!tracingAtomic_) {
     return;
   }
@@ -231,6 +232,7 @@ void PerformanceTracer::reportTimeStamp(
           .trackName = std::move(trackName),
           .trackGroup = std::move(trackGroup),
           .color = std::move(color),
+          .detail = std::move(detail),
           .threadId = getCurrentThreadId(),
       });
 }
@@ -651,6 +653,13 @@ void PerformanceTracer::enqueueTraceEventsFromPerformanceTracerEvent(
             if (event.color) {
               data["color"] = consoleTimeStampColorToString(*event.color);
             }
+            if (event.detail) {
+              folly::dynamic devtoolsDetail = folly::dynamic::object();
+              for (const auto& [key, value] : event.detail->items()) {
+                devtoolsDetail[key] = value;
+              }
+              data["devtools"] = folly::toJson(devtoolsDetail);
+            }
 
             events.emplace_back(
                 TraceEvent{

packages/react-native/ReactCommon/jsinspector-modern/tracing/PerformanceTracer.h

@@ -96,7 +96,8 @@ class PerformanceTracer {
       std::optional<ConsoleTimeStampEntry> end = std::nullopt,
       std::optional<std::string> trackName = std::nullopt,
       std::optional<std::string> trackGroup = std::nullopt,
-      std::optional<ConsoleTimeStampColor> color = std::nullopt);
+      std::optional<ConsoleTimeStampColor> color = std::nullopt,
+      std::optional<folly::dynamic> detail = std::nullopt);
 
   /**
    * Record an Event Loop tick, which will be represented as an Event Loop task
@@ -252,6 +253,7 @@ class PerformanceTracer {
     std::optional<std::string> trackName;
     std::optional<std::string> trackGroup;
     std::optional<ConsoleTimeStampColor> color;
+    std::optional<folly::dynamic> detail;
     ThreadId threadId;
     HighResTimeStamp createdAt = HighResTimeStamp::now();
   };

packages/react-native/flow/bom.js.flow

@@ -72,6 +72,7 @@ declare var console: {
     trackName?: string,
     trackGroup?: string,
     color?: DevToolsColor,
+    detail?: {[string]: mixed},
   ): void,
 
   ...