Update modern inspector targets to directly send CDP title and description

packages/community-cli-plugin/src/commands/start/OpenDebuggerKeyboardHandler.js

@@ -18,7 +18,6 @@ type PageDescription = $ReadOnly<{
   id: string,
   title: string,
   description: string,
-  deviceName: string,
   ...
 }>;
 
@@ -53,9 +52,9 @@ export default class OpenDebuggerKeyboardHandler {
     } catch (e) {
       this.#log(
         'error',
-        'Failed to open debugger for %s on %s debug targets: %s',
+        'Failed to open debugger for %s (%s): %s',
+        target.title,
         target.description,
-        target.deviceName,
         e.message,
       );
       this.#clearTerminalMenu();
@@ -108,8 +107,8 @@ export default class OpenDebuggerKeyboardHandler {
           `Multiple debug targets available, please select:\n  ${targets
             .slice(0, 9)
             .map(
-              ({description, deviceName}, i) =>
-                `${chalk.white.inverse(` ${i + 1} `)} - "${description}" on "${deviceName}"`,
+              ({title}, i) =>
+                `${chalk.white.inverse(` ${i + 1} `)} - "${title}"`,
             )
             .join('\n  ')}`,
         );

packages/dev-middleware/src/inspector-proxy/InspectorProxy.js

@@ -160,7 +160,7 @@ export default class InspectorProxy implements InspectorProxyQueries {
     return {
       id: `${deviceId}-${page.id}`,
       title: page.title,
-      description: page.app,
+      description: page.description ?? page.app,
       type: 'node',
       devtoolsFrontendUrl,
       webSocketDebuggerUrl,

packages/dev-middleware/src/inspector-proxy/types.js

@@ -53,6 +53,8 @@ export type TargetCapabilityFlags = $ReadOnly<{
 export type PageFromDevice = $ReadOnly<{
   id: string,
   title: string,
+  /** Sent from modern targets only */
+  description?: string,
   /** @deprecated This is sent from legacy targets only */
   vm?: string,
   app: string,
@@ -119,6 +121,7 @@ export type PageDescription = $ReadOnly<{
   webSocketDebuggerUrl: string,
 
   // React Native specific fields
+  /** @deprecated Prefer `title` */
   deviceName: string,
   /** @deprecated This is sent from legacy targets only */
   vm?: string,

packages/react-native/React/Inspector/RCTCxxInspectorPackagerConnection.mm

@@ -22,6 +22,7 @@
 #import "RCTCxxInspectorPackagerConnection.h"
 #import "RCTCxxInspectorPackagerConnectionDelegate.h"
 #import "RCTCxxInspectorWebSocketAdapter.h"
+#import "RCTInspectorUtils.h"
 
 using namespace facebook::react::jsinspector_modern;
 @interface RCTCxxInspectorPackagerConnection () {
@@ -36,8 +37,10 @@ @implementation RCTCxxInspectorPackagerConnection
 - (instancetype)initWithURL:(NSURL *)url
 {
   if (self = [super init]) {
+    auto metadata = [RCTInspectorUtils getHostMetadata];
     _cxxImpl = std::make_unique<InspectorPackagerConnection>(
         [url absoluteString].UTF8String,
+        metadata.deviceName.UTF8String,
         [[NSBundle mainBundle] bundleIdentifier].UTF8String,
         std::make_unique<RCTCxxInspectorPackagerConnectionDelegate>());
   }

packages/react-native/React/Inspector/RCTInspector.mm

@@ -71,7 +71,7 @@ @implementation RCTInspector
   NSMutableArray<RCTInspectorPage *> *array = [NSMutableArray arrayWithCapacity:pages.size()];
   for (size_t i = 0; i < pages.size(); i++) {
     RCTInspectorPage *pageWrapper = [[RCTInspectorPage alloc] initWithId:pages[i].id
-                                                                   title:@(pages[i].title.c_str())
+                                                                   title:@(pages[i].description.c_str())
                                                                       vm:@(pages[i].vm.c_str())];
     [array addObject:pageWrapper];
   }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/CxxInspectorPackagerConnection.java

@@ -28,12 +28,12 @@
 
   @DoNotStrip private final HybridData mHybridData;
 
-  public CxxInspectorPackagerConnection(String url, String packageName) {
-    mHybridData = initHybrid(url, packageName, new DelegateImpl());
+  public CxxInspectorPackagerConnection(String url, String deviceName, String packageName) {
+    mHybridData = initHybrid(url, deviceName, packageName, new DelegateImpl());
   }
 
   private static native HybridData initHybrid(
-      String url, String packageName, DelegateImpl delegate);
+      String url, String deviceName, String packageName, DelegateImpl delegate);
 
   public native void connect();
 

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevServerHelper.java

@@ -214,8 +214,12 @@ public void openInspectorConnection() {
       @Override
       protected Void doInBackground(Void... params) {
         if (InspectorFlags.getFuseboxEnabled()) {
+          Map<String, String> metadata =
+              AndroidInfoHelpers.getInspectorHostMetadata(mApplicationContext);
+
           mInspectorPackagerConnection =
-              new CxxInspectorPackagerConnection(getInspectorDeviceUrl(), mPackageName);
+              new CxxInspectorPackagerConnection(
+                  getInspectorDeviceUrl(), metadata.get("deviceName"), mPackageName);
         } else {
           mInspectorPackagerConnection =
               new InspectorPackagerConnection(getInspectorDeviceUrl(), mPackageName);

packages/react-native/ReactAndroid/src/main/jni/react/devsupport/JCxxInspectorPackagerConnection.cpp

@@ -15,17 +15,19 @@ namespace facebook::react::jsinspector_modern {
 
 JCxxInspectorPackagerConnection::JCxxInspectorPackagerConnection(
     const std::string& url,
+    const std::string& deviceName,
     const std::string& packageName,
     alias_ref<JDelegateImpl::javaobject> delegate)
-    : cxxImpl_(url, packageName, delegate->wrapInUniquePtr()) {}
+    : cxxImpl_(url, deviceName, packageName, delegate->wrapInUniquePtr()) {}
 
 local_ref<JCxxInspectorPackagerConnection::jhybriddata>
 JCxxInspectorPackagerConnection::initHybrid(
     alias_ref<jclass>,
     const std::string& url,
+    const std::string& deviceName,
     const std::string& packageName,
     alias_ref<JDelegateImpl::javaobject> delegate) {
-  return makeCxxInstance(url, packageName, delegate);
+  return makeCxxInstance(url, deviceName, packageName, delegate);
 }
 
 void JCxxInspectorPackagerConnection::connect() {

packages/react-native/ReactAndroid/src/main/jni/react/devsupport/JCxxInspectorPackagerConnection.h

@@ -44,12 +44,14 @@ class JCxxInspectorPackagerConnection
    */
   JCxxInspectorPackagerConnection(
       const std::string& url,
+      const std::string& deviceName,
       const std::string& packageName,
       jni::alias_ref<JDelegateImpl::javaobject> delegate);
 
   static jni::local_ref<jhybriddata> initHybrid(
       jni::alias_ref<jclass>,
       const std::string& url,
+      const std::string& deviceName,
       const std::string& packageName,
       jni::alias_ref<JDelegateImpl::javaobject> delegate);
 

packages/react-native/ReactAndroid/src/main/jni/react/jni/JInspector.cpp

@@ -85,7 +85,7 @@ jni::local_ref<jni::JArrayClass<JPage::javaobject>> JInspector::getPages() {
       inspector_->getPages();
   auto array = jni::JArrayClass<JPage::javaobject>::newArray(pages.size());
   for (size_t i = 0; i < pages.size(); i++) {
-    (*array)[i] = JPage::create(pages[i].id, pages[i].title, pages[i].vm);
+    (*array)[i] = JPage::create(pages[i].id, pages[i].description, pages[i].vm);
   }
   return array;
 }

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

@@ -37,7 +37,7 @@ namespace {
 class InspectorImpl : public IInspector {
  public:
   int addPage(
-      const std::string& title,
+      const std::string& description,
       const std::string& vm,
       ConnectFunc connectFunc,
       InspectorTargetCapabilities capabilities) override;
@@ -66,7 +66,7 @@ class InspectorImpl : public IInspector {
 
    private:
     int id_;
-    std::string title_;
+    std::string description_;
     std::string vm_;
     ConnectFunc connectFunc_;
     InspectorTargetCapabilities capabilities_;
@@ -79,20 +79,20 @@ class InspectorImpl : public IInspector {
 
 InspectorImpl::Page::Page(
     int id,
-    const std::string& title,
+    const std::string& description,
     const std::string& vm,
     ConnectFunc connectFunc,
     InspectorTargetCapabilities capabilities)
     : id_(id),
-      title_(title),
+      description_(description),
       vm_(vm),
       connectFunc_(std::move(connectFunc)),
       capabilities_(std::move(capabilities)) {}
 
 InspectorImpl::Page::operator InspectorPageDescription() const {
   return InspectorPageDescription{
       .id = id_,
-      .title = title_,
+      .description = description_,
       .vm = vm_,
       .capabilities = capabilities_,
   };
@@ -103,7 +103,7 @@ InspectorImpl::ConnectFunc InspectorImpl::Page::getConnectFunc() const {
 }
 
 int InspectorImpl::addPage(
-    const std::string& title,
+    const std::string& description,
     const std::string& vm,
     ConnectFunc connectFunc,
     InspectorTargetCapabilities capabilities) {
@@ -114,7 +114,8 @@ int InspectorImpl::addPage(
   int pageId = nextPageId_++;
   assert(pages_.count(pageId) == 0 && "Unexpected duplicate page ID");
   pages_.emplace(
-      pageId, Page{pageId, title, vm, std::move(connectFunc), capabilities});
+      pageId,
+      Page{pageId, description, vm, std::move(connectFunc), capabilities});
 
   return pageId;
 }

packages/react-native/ReactCommon/jsinspector-modern/InspectorInterfaces.h

@@ -44,7 +44,7 @@ const folly::dynamic targetCapabilitiesToDynamic(
 
 struct InspectorPageDescription {
   const int id;
-  const std::string title;
+  const std::string description;
   const std::string vm;
   const InspectorTargetCapabilities capabilities;
 };
@@ -100,7 +100,7 @@ class JSINSPECTOR_EXPORT IInspector : public IDestructible {
    * \returns the ID assigned to the new page.
    */
   virtual int addPage(
-      const std::string& title,
+      const std::string& description,
       const std::string& vm,
       ConnectFunc connectFunc,
       InspectorTargetCapabilities capabilities = {}) = 0;

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

@@ -28,21 +28,25 @@ static constexpr const char* INVALID = "<invalid>";
 std::shared_ptr<InspectorPackagerConnection::Impl>
 InspectorPackagerConnection::Impl::create(
     std::string url,
-    std::string app,
+    std::string deviceName,
+    std::string appName,
     std::unique_ptr<InspectorPackagerConnectionDelegate> delegate) {
   // No make_shared because the constructor is private
   std::shared_ptr<InspectorPackagerConnection::Impl> impl(
-      new InspectorPackagerConnection::Impl(url, app, std::move(delegate)));
+      new InspectorPackagerConnection::Impl(
+          url, deviceName, appName, std::move(delegate)));
   getInspectorInstance().registerPageStatusListener(impl);
   return impl;
 }
 
 InspectorPackagerConnection::Impl::Impl(
     std::string url,
-    std::string app,
+    std::string deviceName,
+    std::string appName,
     std::unique_ptr<InspectorPackagerConnectionDelegate> delegate)
     : url_(std::move(url)),
-      app_(std::move(app)),
+      deviceName_(std::move(deviceName)),
+      appName_(std::move(appName)),
       delegate_(std::move(delegate)) {}
 
 void InspectorPackagerConnection::Impl::handleProxyMessage(
@@ -159,8 +163,9 @@ folly::dynamic InspectorPackagerConnection::Impl::pages() {
   for (const auto& page : pages) {
     folly::dynamic pageDescription = folly::dynamic::object;
     pageDescription["id"] = std::to_string(page.id);
-    pageDescription["title"] = page.title + " [C++ connection]";
-    pageDescription["app"] = app_;
+    pageDescription["title"] = appName_ + " (" + deviceName_ + ")";
+    pageDescription["description"] = page.description + " [C++ connection]";
+    pageDescription["app"] = appName_;
     pageDescription["capabilities"] =
         targetCapabilitiesToDynamic(page.capabilities);
 
@@ -341,9 +346,10 @@ void InspectorPackagerConnection::Impl::RemoteConnection::onDisconnect() {
 
 InspectorPackagerConnection::InspectorPackagerConnection(
     std::string url,
-    std::string app,
+    std::string deviceName,
+    std::string appName,
     std::unique_ptr<InspectorPackagerConnectionDelegate> delegate)
-    : impl_(Impl::create(url, app, std::move(delegate))) {}
+    : impl_(Impl::create(url, deviceName, appName, std::move(delegate))) {}
 
 bool InspectorPackagerConnection::isConnected() const {
   return impl_->isConnected();

packages/react-native/ReactCommon/jsinspector-modern/InspectorPackagerConnection.h

@@ -33,13 +33,15 @@ class InspectorPackagerConnection {
    * Creates a new connection instance. Connections start in the disconnected
    * state; connect() should be called to establish a connection.
    * \param url The WebSocket URL where the inspector-proxy server is listening.
-   * \param app The name of the application being debugged.
+   * \param deviceName The host device name.
+   * \param appName The application name.
    * \param delegate An interface to platform-specific methods for creating a
    * WebSocket, scheduling async work, etc.
    */
   InspectorPackagerConnection(
       std::string url,
-      std::string app,
+      std::string deviceName,
+      std::string appName,
       std::unique_ptr<InspectorPackagerConnectionDelegate> delegate);
   bool isConnected() const;
   void connect();

packages/react-native/ReactCommon/jsinspector-modern/InspectorPackagerConnectionImpl.h

@@ -31,7 +31,8 @@ class InspectorPackagerConnection::Impl
    */
   static std::shared_ptr<Impl> create(
       std::string url,
-      std::string app,
+      std::string deviceName,
+      std::string appName,
       std::unique_ptr<InspectorPackagerConnectionDelegate> delegate);
 
   // InspectorPackagerConnection's public API
@@ -61,7 +62,8 @@ class InspectorPackagerConnection::Impl
 
   Impl(
       std::string url,
-      std::string app,
+      std::string deviceName,
+      std::string appName,
       std::unique_ptr<InspectorPackagerConnectionDelegate> delegate);
   Impl(const Impl&) = delete;
   Impl& operator=(const Impl&) = delete;
@@ -91,7 +93,8 @@ class InspectorPackagerConnection::Impl
   virtual void onPageRemoved(int pageId) override;
 
   const std::string url_;
-  const std::string app_;
+  const std::string deviceName_;
+  const std::string appName_;
   const std::unique_ptr<InspectorPackagerConnectionDelegate> delegate_;
 
   std::unordered_map<std::string, Session> inspectorSessions_;