Frame screenshot event generation (#54744)

Summary:
Pull Request resolved: #54744

Adds CDP event generation for screenshots.

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D87936872

fbshipit-source-id: 91fee068e3a55c212e7df83990d7836b04efa01b

Author: sbuggay

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

@@ -95,4 +95,22 @@ TEST_F(TracingTest, EmitsRecordedFrameTimingSequences) {
   EXPECT_THAT(allTraceEvents, Contains(AtJsonPtr("/name", "DrawFrame")));
 }
 
+TEST_F(TracingTest, EmitsScreenshotEventWhenScreenshotValuePassed) {
+  InSequence s;
+
+  startTracing({tracing::Category::Screenshot});
+  auto now = HighResTimeStamp::now();
+  page_->recordFrameTimings(
+      tracing::FrameTimingSequence(
+          1, // id
+          11, // threadId
+          now,
+          now + HighResDuration::fromNanoseconds(10),
+          now + HighResDuration::fromNanoseconds(50),
+          "base64EncodedScreenshotData"));
+
+  auto allTraceEvents = endTracingAndCollectEvents();
+  EXPECT_THAT(allTraceEvents, Contains(AtJsonPtr("/name", "Screenshot")));
+}
+
 } // namespace facebook::react::jsinspector_modern

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

@@ -13,14 +13,16 @@
 
 namespace facebook::react::jsinspector_modern::tracing {
 
+using FrameSequenceId = uint64_t;
+
 /**
  * A struct representing a sequence of frame timings that happened on the Host side.
  */
 struct FrameTimingSequence {
   FrameTimingSequence() = delete;
 
   FrameTimingSequence(
-      uint64_t id,
+      FrameSequenceId id,
       ThreadId threadId,
       HighResTimeStamp beginDrawingTimestamp,
       HighResTimeStamp commitTimestamp,
@@ -38,7 +40,7 @@ struct FrameTimingSequence {
   /**
    * Unique ID of the sequence, used by Chrome DevTools Frontend to identify the events that form one sequence.
    */
-  uint64_t id;
+  FrameSequenceId id;
 
   /**
    * The ID of the native thread that is associated with the frame.

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

@@ -100,7 +100,7 @@ constexpr int FALLBACK_LAYER_TREE_ID = 1;
   chunk.push_back(
       TraceEventSerializer::serialize(std::move(setLayerTreeIdEvent)));
 
-  for (const auto& frameTimingSequence : frameTimings) {
+  for (auto&& frameTimingSequence : frameTimings) {
     if (chunk.size() >= chunkSize) {
       chunkCallback(std::move(chunk));
       chunk = generateNewChunk(chunkSize);
@@ -121,6 +121,19 @@ constexpr int FALLBACK_LAYER_TREE_ID = 1;
     chunk.push_back(TraceEventSerializer::serialize(std::move(commitEvent)));
     chunk.push_back(
         TraceEventSerializer::serialize(std::move(endDrawingEvent)));
+
+    if (frameTimingSequence.screenshot.has_value()) {
+      auto screenshotEvent = TraceEventGenerator::createScreenshotEvent(
+          frameTimingSequence.id,
+          FALLBACK_LAYER_TREE_ID,
+          std::move(frameTimingSequence.screenshot.value()),
+          frameTimingSequence.endDrawingTimestamp,
+          processId,
+          frameTimingSequence.threadId);
+
+      chunk.push_back(
+          TraceEventSerializer::serialize(std::move(screenshotEvent)));
+    }
   }
 
   if (!chunk.empty()) {

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

@@ -6,6 +6,7 @@
  */
 
 #include "TraceEventGenerator.h"
+#include "Timing.h"
 #include "TracingCategory.h"
 
 namespace facebook::react::jsinspector_modern::tracing {
@@ -77,4 +78,27 @@ TraceEventGenerator::createFrameTimingsEvents(
   return {std::move(beginEvent), std::move(commitEvent), std::move(drawEvent)};
 }
 
+/* static */ TraceEvent TraceEventGenerator::createScreenshotEvent(
+    FrameSequenceId frameSequenceId,
+    int sourceId,
+    std::string&& snapshot,
+    HighResTimeStamp expectedDisplayTime,
+    ProcessId processId,
+    ThreadId threadId) {
+  folly::dynamic args = folly::dynamic::object("snapshot", std::move(snapshot))(
+      "source_id", sourceId)("frame_sequence", frameSequenceId)(
+      "expected_display_time",
+      highResTimeStampToTracingClockTimeStamp(expectedDisplayTime));
+
+  return TraceEvent{
+      .name = "Screenshot",
+      .cat = {Category::Screenshot},
+      .ph = 'O',
+      .ts = expectedDisplayTime,
+      .pid = processId,
+      .tid = threadId,
+      .args = std::move(args),
+  };
+}
+
 }; // namespace facebook::react::jsinspector_modern::tracing

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

@@ -9,6 +9,7 @@
 
 #include "TraceEvent.h"
 
+#include <jsinspector-modern/tracing/FrameTimingSequence.h>
 #include <react/timing/primitives.h>
 
 #include <tuple>
@@ -35,13 +36,24 @@ class TraceEventGenerator {
    * Creates canonical "BeginFrame", "Commit", "DrawFrame" trace events.
    */
   static std::tuple<TraceEvent, TraceEvent, TraceEvent> createFrameTimingsEvents(
-      uint64_t sequenceId,
+      FrameSequenceId sequenceId,
       int layerTreeId,
       HighResTimeStamp beginDrawingTimestamp,
       HighResTimeStamp commitTimestamp,
       HighResTimeStamp endDrawingTimestamp,
       ProcessId processId,
       ThreadId threadId);
+
+  /**
+   * Creates canonical "Screenshot" trace event.
+   */
+  static TraceEvent createScreenshotEvent(
+      FrameSequenceId frameSequenceId,
+      int sourceId,
+      std::string &&snapshot,
+      HighResTimeStamp expectedDisplayTime,
+      ProcessId processId,
+      ThreadId threadId);
 };
 
 }; // namespace facebook::react::jsinspector_modern::tracing