disable "Open Debugger" menu item if the bundler is disconnected (#42876

)

Summary:
Pull Request resolved: #42876

Changelog:
[Android][Fixed] Disable the "Open Debugger" item from dev menu if the bundler is disconnected

# Existing
In our dev menu, the "Open Debugger" menu item is shown even if the packager isn't connected.

{F1451833462}

# In this PR
The "Open Debugger" menu item is disabled when the packager is disconnected with the message "Connect to the bundler to debug JavaScript"

{F1451834019}

# Reference
* There are existing checks, but they're async. We don't need the check to be accurate; and we don't want to delay the dev menu from opening
    * [isMetroRunning()](https://github.com/facebook/react-native/blob/db066acfe3994787d706ad082ce718a91b8249f5/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostImpl.java#L1013-L1027)
    * [isPackagerRunning(…)](https://github.com/facebook/react-native/blob/db066acfe3994787d706ad082ce718a91b8249f5/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.java#L798-L805)
* Also on iOS: D53354110

Reviewed By: hoxyq

Differential Revision: D53428914

fbshipit-source-id: 3e70d7fec9fc8fc63a8519c5385a91775febce9a

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

@@ -23,8 +23,11 @@
 import android.util.Pair;
 import android.view.Gravity;
 import android.view.View;
+import android.view.ViewGroup;
+import android.widget.ArrayAdapter;
 import android.widget.EditText;
 import android.widget.LinearLayout;
+import android.widget.ListAdapter;
 import android.widget.TextView;
 import android.widget.Toast;
 import androidx.annotation.Nullable;
@@ -63,10 +66,12 @@
 import java.net.MalformedURLException;
 import java.net.URL;
 import java.util.ArrayList;
+import java.util.HashSet;
 import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Locale;
 import java.util.Map;
+import java.util.Set;
 
 public abstract class DevSupportManagerBase implements DevSupportManager {
 
@@ -104,6 +109,7 @@ public interface CallbackWithBundleLoader {
   private boolean mIsReceiverRegistered = false;
   private boolean mIsShakeDetectorStarted = false;
   private boolean mIsDevSupportEnabled = false;
+  private boolean mIsPackagerConnected;
   private @Nullable final RedBoxHandler mRedBoxHandler;
   private @Nullable String mLastErrorTitle;
   private @Nullable StackFrame[] mLastErrorStack;
@@ -340,6 +346,7 @@ public void showDevOptionsDialog() {
       return;
     }
     LinkedHashMap<String, DevOptionHandler> options = new LinkedHashMap<>();
+    Set<String> disabledItemKeys = new HashSet<>();
     /* register standard options */
     options.put(
         mApplicationContext.getString(R.string.catalyst_reload),
@@ -369,8 +376,15 @@ public void onOptionSelected() {
 
     if (mDevSettings.isDeviceDebugEnabled() && !mDevSettings.isRemoteJSDebugEnabled()) {
       // On-device JS debugging (CDP). Render action to open debugger frontend.
+      boolean isConnected = mIsPackagerConnected;
+      String debuggerItemString =
+          mApplicationContext.getString(
+              isConnected ? R.string.catalyst_debug_open : R.string.catalyst_debug_open_disabled);
+      if (!isConnected) {
+        disabledItemKeys.add(debuggerItemString);
+      }
       options.put(
-          mApplicationContext.getString(R.string.catalyst_debug_open),
+          debuggerItemString,
           () ->
               mDevServerHelper.openDebugger(
                   mCurrentContext,
@@ -505,11 +519,33 @@ public void onOptionSelected() {
       header.addView(jsExecutorLabel);
     }
 
+    ListAdapter adapter =
+        new ArrayAdapter<String>(
+            context, android.R.layout.simple_list_item_1, options.keySet().toArray(new String[0])) {
+          @Override
+          public boolean areAllItemsEnabled() {
+            return false;
+          }
+
+          @Override
+          public boolean isEnabled(int position) {
+            return !disabledItemKeys.contains(getItem(position));
+          }
+
+          @Override
+          public View getView(int position, @Nullable View convertView, ViewGroup parent) {
+            View view = super.getView(position, convertView, parent);
+            view.setEnabled(isEnabled(position));
+
+            return view;
+          }
+        };
+
     mDevOptionsDialog =
         new AlertDialog.Builder(context)
             .setCustomTitle(header)
-            .setItems(
-                options.keySet().toArray(new String[0]),
+            .setAdapter(
+                adapter,
                 (dialog, which) -> {
                   optionHandlers[which].onOptionSelected();
                   mDevOptionsDialog = null;
@@ -1022,12 +1058,12 @@ private void reload() {
           new PackagerCommandListener() {
             @Override
             public void onPackagerConnected() {
-              // No-op
+              mIsPackagerConnected = true;
             }
 
             @Override
             public void onPackagerDisconnected() {
-              // No-op
+              mIsPackagerConnected = false;
             }
 
             @Override

packages/react-native/ReactAndroid/src/main/res/devsupport/values/strings.xml

@@ -5,6 +5,7 @@
   <string name="catalyst_change_bundle_location" project="catalyst" translatable="false">Change Bundle Location</string>
   <string name="catalyst_open_debugger_error" project="catalyst" translatable="false">Failed to open debugger. Please check that the dev server is running and reload the app.</string>
   <string name="catalyst_debug_open" project="catalyst" translatable="false">Open Debugger</string>
+  <string name="catalyst_debug_open_disabled" project="catalyst" translatable="false">Connect to the bundler to debug JavaScript</string>
   <string name="catalyst_debug_connecting" project="catalyst" translatable="false">Connecting to debugger...</string>
   <string name="catalyst_debug_error" project="catalyst" translatable="false">Failed to connect to debugger!</string>
   <string name="catalyst_hot_reloading" project="catalyst" translatable="false">Enable Fast Refresh</string>