Migrate to Inspector trace (#48923)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48923

# Changelog: [Internal]

Starting from this diff, React Native will emit inspector traces, the ones that will have the same UI as if it was recorded in a browser.

We are going to fake it by sending "TracingStartedInPage" event. For a corresponding logic on Chrome DevTools Frontend side, see [this](https://github.com/ChromeDevTools/devtools-frontend/blob/192673131cf3e6e0bcdb4a97bd0bd39c75f1b3c2/front_end/models/trace/handlers/MetaHandler.ts#L68-L80) as a starting point.

Because of this, custom tracks are now grouped under "Timings" track, although with a better color scheme:
- We no longer need the logic for placing tracks under arbitrary thread ids to have them grouped.
- The real support for extension tracks (custom tracks for Performance panel) will be added in the next diff.

Reviewed By: huntie

Differential Revision: D68439734

fbshipit-source-id: 8e5c525a71578375904edc6d473308eb710b5867

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

@@ -22,6 +22,12 @@ const uint64_t PID = 1000;
 /** Default/starting track ID for the "Timings" track. */
 const uint64_t USER_TIMINGS_DEFAULT_TRACK = 1000;
 
+uint64_t getUnixTimestampOfNow() {
+  return std::chrono::duration_cast<std::chrono::microseconds>(
+             std::chrono::steady_clock::now().time_since_epoch())
+      .count();
+}
+
 } // namespace
 
 PerformanceTracer& PerformanceTracer::getInstance() {
@@ -35,6 +41,16 @@ bool PerformanceTracer::startTracing() {
     return false;
   }
 
+  buffer_.push_back(TraceEvent{
+      .name = "TracingStartedInPage",
+      .cat = "disabled-by-default-devtools.timeline",
+      .ph = 'I',
+      .ts = getUnixTimestampOfNow(),
+      .pid = PID, // FIXME: This should be the real process ID.
+      .tid = 0, // FIXME: This should be the real thread ID.
+      .args = folly::dynamic::object("data", folly::dynamic::object()),
+  });
+
   tracing_ = true;
   return true;
 }
@@ -57,47 +73,9 @@ void PerformanceTracer::collectEvents(
   std::lock_guard lock(mutex_);
 
   if (buffer_.empty()) {
-    customTrackIdMap_.clear();
     return;
   }
 
-  // Register "Main" process
-  buffer_.push_back(TraceEvent{
-      .name = "process_name",
-      .cat = "__metadata",
-      .ph = 'M',
-      .ts = 0,
-      .pid = PID,
-      .tid = 0,
-      .args = folly::dynamic::object("name", "Main"),
-  });
-  // Register "Timings" track
-  // NOTE: This is a hack to make the Trace Viewer show a "Timings" track
-  // adjacent to custom tracks in our current build of Chrome DevTools.
-  // In future, we should align events exactly.
-  buffer_.push_back(TraceEvent{
-      .name = "thread_name",
-      .cat = "__metadata",
-      .ph = 'M',
-      .ts = 0,
-      .pid = PID,
-      .tid = USER_TIMINGS_DEFAULT_TRACK,
-      .args = folly::dynamic::object("name", "Timings"),
-  });
-
-  for (const auto& [trackName, trackId] : customTrackIdMap_) {
-    // Register custom tracks
-    buffer_.push_back(TraceEvent{
-        .name = "thread_name",
-        .cat = "__metadata",
-        .ph = 'M',
-        .ts = 0,
-        .pid = PID,
-        .tid = trackId,
-        .args = folly::dynamic::object("name", trackName),
-    });
-  }
-
   auto traceEvents = folly::dynamic::array();
   for (auto event : buffer_) {
     // Emit trace events
@@ -112,7 +90,6 @@ void PerformanceTracer::collectEvents(
     resultCallback(traceEvents);
   }
 
-  customTrackIdMap_.clear();
   buffer_.clear();
 }
 
@@ -145,22 +122,6 @@ void PerformanceTracer::reportMeasure(
     return;
   }
 
-  // NOTE: We synthetically create custom tracks as a hack to render them in
-  // our current build of Chrome DevTools frontend.
-  // TODO: Remove and align with web.
-  uint64_t threadId = USER_TIMINGS_DEFAULT_TRACK;
-  if (trackMetadata.has_value()) {
-    std::string trackName = trackMetadata.value().track;
-
-    if (!customTrackIdMap_.contains(trackName)) {
-      uint64_t trackId =
-          USER_TIMINGS_DEFAULT_TRACK + customTrackIdMap_.size() + 1;
-      threadId = trackId;
-
-      customTrackIdMap_.emplace(trackName, trackId);
-    }
-  }
-
   ++performanceMeasureCount_;
   buffer_.push_back(TraceEvent{
       .id = performanceMeasureCount_,
@@ -169,7 +130,8 @@ void PerformanceTracer::reportMeasure(
       .ph = 'b',
       .ts = start,
       .pid = PID, // FIXME: This should be the real process ID.
-      .tid = threadId, // FIXME: This should be the real thread ID.
+      .tid = USER_TIMINGS_DEFAULT_TRACK, // FIXME: This should be the real
+                                         // thread ID.
   });
   buffer_.push_back(TraceEvent{
       .id = performanceMeasureCount_,
@@ -178,7 +140,8 @@ void PerformanceTracer::reportMeasure(
       .ph = 'e',
       .ts = start + duration,
       .pid = PID, // FIXME: This should be the real process ID.
-      .tid = threadId, // FIXME: This should be the real thread ID.
+      .tid = USER_TIMINGS_DEFAULT_TRACK, // FIXME: This should be the real
+                                         // thread ID.
   });
 }
 

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

@@ -77,7 +77,6 @@ class PerformanceTracer {
 
   bool tracing_{false};
   uint32_t performanceMeasureCount_{0};
-  std::unordered_map<std::string, uint64_t> customTrackIdMap_;
   std::vector<TraceEvent> buffer_;
   std::mutex mutex_;
 };