Switch from single Complete event to a pair of Async Nestable events (#48906)

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

# Changelog: [Internal]

It looks like on `Chrome` side, Complete events (`ph="X"`) are only used for Renderer-related events.

For user-land events with duration (non-instant events), there is a [set of supported types](https://github.com/ChromeDevTools/devtools-frontend/blob/99a9104ae974f8caa63927e356800f6762cdbf25/front_end/models/trace/types/TraceEvents.ts#L62-L65), which don't include `"X"`.

Later, pair of such events will form a [performance measure event](https://github.com/ChromeDevTools/devtools-frontend/blob/99a9104ae974f8caa63927e356800f6762cdbf25/front_end/models/trace/types/TraceEvents.ts#L2256-L2258).

Reviewed By: huntie

Differential Revision: D68564754

fbshipit-source-id: dac87ab06c47925a70e03f43f0628364217a06a2

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

@@ -34,6 +34,7 @@ bool PerformanceTracer::startTracing() {
   if (tracing_) {
     return false;
   }
+
   tracing_ = true;
   return true;
 }
@@ -43,6 +44,8 @@ bool PerformanceTracer::stopTracing() {
   if (!tracing_) {
     return false;
   }
+
+  performanceMeasureCount_ = 0;
   tracing_ = false;
   return true;
 }
@@ -158,14 +161,24 @@ void PerformanceTracer::reportMeasure(
     }
   }
 
+  ++performanceMeasureCount_;
   buffer_.push_back(TraceEvent{
+      .id = performanceMeasureCount_,
       .name = std::string(name),
       .cat = "blink.user_timing",
-      .ph = 'X',
+      .ph = 'b',
       .ts = start,
       .pid = PID, // FIXME: This should be the real process ID.
       .tid = threadId, // FIXME: This should be the real thread ID.
-      .dur = duration,
+  });
+  buffer_.push_back(TraceEvent{
+      .id = performanceMeasureCount_,
+      .name = std::string(name),
+      .cat = "blink.user_timing",
+      .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.
   });
 }
 

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

@@ -76,6 +76,7 @@ class PerformanceTracer {
   folly::dynamic serializeTraceEvent(TraceEvent event) const;
 
   bool tracing_{false};
+  uint32_t performanceMeasureCount_{0};
   std::unordered_map<std::string, uint64_t> customTrackIdMap_;
   std::vector<TraceEvent> buffer_;
   std::mutex mutex_;