Define serializers for frame timings as part of HostTargetTracingProfile (facebook#54681)

Summary:
Pull Request resolved: facebook#54681

# Changelog: [Internal]

Now when Frame Timings are part of the whole `HostTargetTracingProfile`, we need to define how these will be serialized into chunks of `Tracing.dataCollected` messages.

Reviewed By: sbuggay

Differential Revision: D87373810

fbshipit-source-id: dd4e9ce6c691e92710d9c3c66f7d134f3fba1ddd

Author: hoxyq

packages/react-native/ReactCommon/jsinspector-modern/tests/TracingTest.cpp

@@ -76,4 +76,23 @@ TEST_F(TracingTest, RecordsFrameTimings) {
   EXPECT_EQ(tracingProfile.frameTimings[0].id, frameTimingSequence.id);
 }
 
+TEST_F(TracingTest, EmitsRecordedFrameTimingSequences) {
+  InSequence s;
+
+  startTracing();
+  auto now = HighResTimeStamp::now();
+  page_->recordFrameTimings(
+      tracing::FrameTimingSequence(
+          1, // id
+          11, // threadId
+          now,
+          now + HighResDuration::fromNanoseconds(10),
+          now + HighResDuration::fromNanoseconds(50)));
+
+  auto allTraceEvents = endTracingAndCollectEvents();
+  EXPECT_THAT(allTraceEvents, Contains(AtJsonPtr("/name", "BeginFrame")));
+  EXPECT_THAT(allTraceEvents, Contains(AtJsonPtr("/name", "Commit")));
+  EXPECT_THAT(allTraceEvents, Contains(AtJsonPtr("/name", "DrawFrame")));
+}
+
 } // namespace facebook::react::jsinspector_modern

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

@@ -7,6 +7,7 @@
 
 #include "HostTracingProfileSerializer.h"
 #include "RuntimeSamplingProfileTraceEventSerializer.h"
+#include "TraceEventGenerator.h"
 #include "TraceEventSerializer.h"
 
 namespace facebook::react::jsinspector_modern::tracing {
@@ -20,13 +21,26 @@ folly::dynamic generateNewChunk(uint16_t chunkSize) {
   return chunk;
 }
 
+/**
+ * Hardcoded layer tree ID for all recorded frames.
+ * https://chromedevtools.github.io/devtools-protocol/tot/LayerTree/
+ */
+constexpr int FALLBACK_LAYER_TREE_ID = 1;
+
 } // namespace
 
 /* static */ void HostTracingProfileSerializer::emitAsDataCollectedChunks(
     HostTracingProfile&& hostTracingProfile,
     const std::function<void(folly::dynamic&&)>& chunkCallback,
-    uint16_t performanceTraceEventsChunkSize,
+    uint16_t traceEventsChunkSize,
     uint16_t profileTraceEventsChunkSize) {
+  emitFrameTimings(
+      std::move(hostTracingProfile.frameTimings),
+      hostTracingProfile.processId,
+      hostTracingProfile.startTime,
+      chunkCallback,
+      traceEventsChunkSize);
+
   auto instancesProfiles =
       std::move(hostTracingProfile.instanceTracingProfiles);
   IdGenerator profileIdGenerator;
@@ -35,7 +49,7 @@ folly::dynamic generateNewChunk(uint16_t chunkSize) {
     emitPerformanceTraceEvents(
         std::move(instanceProfile.performanceTraceEvents),
         chunkCallback,
-        performanceTraceEventsChunkSize);
+        traceEventsChunkSize);
   }
 
   RuntimeSamplingProfileTraceEventSerializer::serializeAndDispatch(
@@ -66,4 +80,52 @@ folly::dynamic generateNewChunk(uint16_t chunkSize) {
   }
 }
 
+/* static */ void HostTracingProfileSerializer::emitFrameTimings(
+    std::vector<FrameTimingSequence>&& frameTimings,
+    ProcessId processId,
+    HighResTimeStamp recordingStartTimestamp,
+    const std::function<void(folly::dynamic&& chunk)>& chunkCallback,
+    uint16_t chunkSize) {
+  if (frameTimings.empty()) {
+    return;
+  }
+
+  folly::dynamic chunk = generateNewChunk(chunkSize);
+  auto setLayerTreeIdEvent = TraceEventGenerator::createSetLayerTreeIdEvent(
+      "", // Hardcoded frame name for the default (and only) layer.
+      FALLBACK_LAYER_TREE_ID,
+      processId,
+      frameTimings.front().threadId,
+      recordingStartTimestamp);
+  chunk.push_back(
+      TraceEventSerializer::serialize(std::move(setLayerTreeIdEvent)));
+
+  for (const auto& frameTimingSequence : frameTimings) {
+    if (chunk.size() >= chunkSize) {
+      chunkCallback(std::move(chunk));
+      chunk = generateNewChunk(chunkSize);
+    }
+
+    auto [beginDrawingEvent, commitEvent, endDrawingEvent] =
+        TraceEventGenerator::createFrameTimingsEvents(
+            frameTimingSequence.id,
+            FALLBACK_LAYER_TREE_ID,
+            frameTimingSequence.beginDrawingTimestamp,
+            frameTimingSequence.commitTimestamp,
+            frameTimingSequence.endDrawingTimestamp,
+            processId,
+            frameTimingSequence.threadId);
+
+    chunk.push_back(
+        TraceEventSerializer::serialize(std::move(beginDrawingEvent)));
+    chunk.push_back(TraceEventSerializer::serialize(std::move(commitEvent)));
+    chunk.push_back(
+        TraceEventSerializer::serialize(std::move(endDrawingEvent)));
+  }
+
+  if (!chunk.empty()) {
+    chunkCallback(std::move(chunk));
+  }
+}
+
 } // namespace facebook::react::jsinspector_modern::tracing

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

@@ -7,6 +7,7 @@
 
 #pragma once
 
+#include "FrameTimingSequence.h"
 #include "HostTracingProfile.h"
 #include "TraceEvent.h"
 
@@ -23,20 +24,27 @@ class HostTracingProfileSerializer {
  public:
   /**
    * Transforms the profile into a sequence of serialized Trace Events, which
-   * is split in chunks of sizes \p performanceTraceEventsChunkSize or
+   * is split in chunks of sizes \p traceEventsChunkSize or
    * \p profileTraceEventsChunkSize, depending on type, and sent with \p
    * chunkCallback.
    */
   static void emitAsDataCollectedChunks(
       HostTracingProfile &&hostTracingProfile,
       const std::function<void(folly::dynamic &&chunk)> &chunkCallback,
-      uint16_t performanceTraceEventsChunkSize,
+      uint16_t traceEventsChunkSize,
       uint16_t profileTraceEventsChunkSize);
 
   static void emitPerformanceTraceEvents(
       std::vector<TraceEvent> &&events,
       const std::function<void(folly::dynamic &&chunk)> &chunkCallback,
       uint16_t chunkSize);
+
+  static void emitFrameTimings(
+      std::vector<FrameTimingSequence> &&frameTimings,
+      ProcessId processId,
+      HighResTimeStamp recordingStartTimestamp,
+      const std::function<void(folly::dynamic &&chunk)> &chunkCallback,
+      uint16_t chunkSize);
 };
 
 } // namespace facebook::react::jsinspector_modern::tracing