Inject log to easily identify modern CDP backend (#42383)

Summary:
Pull Request resolved: #42383

Changelog: [Internal]

During development / experimental rollout of the modern CDP backend, it can be helpful to have a user-visible message that makes it clear that the new backend is in use. Here, we add one using the [`Log.entryAdded`](https://chromedevtools.github.io/devtools-protocol/tot/Log/#type-LogEntry) CDP event. We also add some styling using [ANSI escape sequences](https://developer.chrome.com/docs/devtools/console/format-style#style-ansi) to make the message stand out from normal application logs.

We could have used [`Runtime.consoleAPICalled`](https://chromedevtools.github.io/devtools-protocol/tot/Runtime/#event-consoleAPICalled) instead, but:

1. `Runtime.consoleAPICalled` requires an `executionContextId` which is not available at the `Page` level (it is a concept that's managed closer to the instance/VM), and it's slightly cleaner if we don't have to send a fake context ID.
2. It's slightly easier to follow the CDP dispatching logic / grep for relevant code if we use `Log` for "system logs" (from the Page) and reserve `Runtime` for real application logs from the instance/VM.

NOTE: We'll probably want to remove this before the stable release.

Reviewed By: huntie

Differential Revision: D52894171

fbshipit-source-id: 3208e01f2ee31acef2e8cd58767f40ad724c9a39

Author: motiz88

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

@@ -9,12 +9,48 @@
 #include <folly/json.h>
 #include <jsinspector-modern/PageAgent.h>
 
+#include <chrono>
+
+using namespace std::chrono;
+using namespace std::literals::string_view_literals;
+
 namespace facebook::react::jsinspector_modern {
 
+#define ANSI_WEIGHT_BOLD "\x1B[1m"
+#define ANSI_WEIGHT_RESET "\x1B[22m"
+#define ANSI_STYLE_ITALIC "\x1B[3m"
+#define ANSI_STYLE_RESET "\x1B[23m"
+#define ANSI_COLOR_BG_YELLOW "\x1B[48;2;253;247;231m"
+
+static constexpr auto kModernCDPBackendNotice =
+    ANSI_COLOR_BG_YELLOW ANSI_WEIGHT_BOLD
+    "NOTE:" ANSI_WEIGHT_RESET " You are using the " ANSI_STYLE_ITALIC
+    "modern" ANSI_STYLE_RESET " CDP backend for React Native (PageTarget)."sv;
+
 PageAgent::PageAgent(FrontendChannel frontendChannel)
     : frontendChannel_(frontendChannel) {}
 
 void PageAgent::handleRequest(const cdp::PreparsedRequest& req) {
+  if (req.method == "Log.enable") {
+    // Send an "OK" response.
+    frontendChannel_(
+        folly::toJson(folly::dynamic::object("id", req.id)("result", nullptr)));
+
+    // Send a log entry identifying the modern CDP backend.
+    frontendChannel_(
+        folly::toJson(folly::dynamic::object("method", "Log.entryAdded")(
+            "params",
+            folly::dynamic::object(
+                "entry",
+                folly::dynamic::object(
+                    "timestamp",
+                    duration_cast<milliseconds>(
+                        system_clock::now().time_since_epoch())
+                        .count())("source", "other")(
+                    "level", "info")("text", kModernCDPBackendNotice)))));
+
+    return;
+  }
   folly::dynamic res = folly::dynamic::object("id", req.id)(
       "error",
       folly::dynamic::object("code", -32601)(

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

@@ -102,4 +102,25 @@ TEST_F(PageTargetProtocolTest, MalformedJson) {
   toPage_->sendMessage("{");
 }
 
+TEST_F(PageTargetProtocolTest, InjectLogToIdentifyBackend) {
+  InSequence s;
+
+  EXPECT_CALL(fromPage(), onMessage(JsonEq(R"({
+                                               "id": 1,
+                                               "result": null
+                                             })")))
+      .RetiresOnSaturation();
+
+  EXPECT_CALL(
+      fromPage(),
+      onMessage(JsonParsed(AllOf(
+          AtJsonPtr("/method", "Log.entryAdded"),
+          AtJsonPtr("/params/entry", Not(IsEmpty()))))))
+      .RetiresOnSaturation();
+  toPage_->sendMessage(R"({
+                           "id": 1,
+                           "method": "Log.enable"
+                         })");
+}
+
 } // namespace facebook::react::jsinspector_modern