Style pause overlay to be similar to Chrome's (#44081)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44081

Changelog: [Internal]

Migrates the Fusebox "pause in debugger" on Android from `AlertDialog` to a custom dialog, with a look and feel based closely on the equivalent Chrome feature. I've adapted the layout slightly to be mobile-appropriate (touch target sizes etc) and drawn new icon assets that are effectively hand-upscaled versions of the Chrome ones.

Reviewed By: hoxyq

Differential Revision: D56105051

fbshipit-source-id: 42d7472c8dd8f842c0dbd82c12eba102bcf59b87

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

@@ -10,6 +10,7 @@ package com.facebook.react.devsupport;
 import android.app.Activity;
 import android.app.ActivityManager;
 import android.app.AlertDialog;
+import android.app.Dialog;
 import android.content.BroadcastReceiver;
 import android.content.Context;
 import android.content.DialogInterface;
@@ -22,8 +23,10 @@ import android.hardware.SensorManager;
 import android.os.Build;
 import android.util.Pair;
 import android.view.Gravity;
+import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.Window;
 import android.widget.ArrayAdapter;
 import android.widget.EditText;
 import android.widget.LinearLayout;
@@ -1165,7 +1168,7 @@ public abstract class DevSupportManagerBase implements DevSupportManager {
         mCurrentContext, mApplicationContext.getString(R.string.catalyst_open_debugger_error));
   }
 
-  private @Nullable AlertDialog mPausedInDebuggerDialog;
+  private @Nullable Dialog mPausedInDebuggerDialog;
 
   @Override
   public void showPausedInDebuggerOverlay(
@@ -1179,15 +1182,22 @@ public abstract class DevSupportManagerBase implements DevSupportManager {
           if (context == null || context.isFinishing()) {
             return;
           }
-          mPausedInDebuggerDialog =
-              new AlertDialog.Builder(context)
-                  .setMessage(message)
-                  .setCancelable(false)
-                  .setNeutralButton(
-                      "Step Over", (DialogInterface dialog, int id) -> listener.onStepOver())
-                  .setPositiveButton(
-                      "Resume", (DialogInterface dialog, int id) -> listener.onResume())
-                  .create();
+          View dialogView =
+              LayoutInflater.from(context).inflate(R.layout.paused_in_debugger_view, null);
+          mPausedInDebuggerDialog = new Dialog(context);
+          mPausedInDebuggerDialog.setContentView(dialogView);
+          mPausedInDebuggerDialog.setCancelable(false);
+          TextView pausedText = Assertions.assertNotNull(dialogView.findViewById(R.id.paused_text));
+          pausedText.setText(message);
+          View resumeButton = Assertions.assertNotNull(dialogView.findViewById(R.id.resume_button));
+          resumeButton.setOnClickListener((v) -> listener.onResume());
+          View stepOverButton =
+              Assertions.assertNotNull(dialogView.findViewById(R.id.step_over_button));
+          stepOverButton.setOnClickListener((v) -> listener.onStepOver());
+          Window dialogWindow = mPausedInDebuggerDialog.getWindow();
+          if (dialogWindow != null) {
+            dialogWindow.setGravity(Gravity.TOP);
+          }
           mPausedInDebuggerDialog.show();
         });
   }

packages/react-native/ReactAndroid/src/main/res/devsupport/drawable/ripple_effect.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:color="#33000000"
+    tools:ignore="MissingDefaultResource"
+    >
+    <item android:id="@android:id/mask">
+        <color android:color="@android:color/white" />
+    </item>
+</ripple>

packages/react-native/ReactAndroid/src/main/res/devsupport/layout/paused_in_debugger_view.xml

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/layout"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:background="#ffffc1"
+    android:divider="#cacaca"
+    android:gravity="center"
+    android:layoutDirection="ltr"
+    android:orientation="horizontal"
+    android:showDividers="middle"
+    tools:ignore="MissingDefaultResource"
+    >
+
+    <TextView
+        android:id="@+id/paused_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:paddingHorizontal="12dp"
+        android:text=""
+        android:textColor="@android:color/black"
+        android:textSize="14sp"
+        android:textStyle="bold"
+        app:autoSizeTextType="uniform"
+        />
+
+    <ImageButton
+        android:id="@+id/resume_button"
+        android:layout_width="48dp"
+        android:layout_height="48dp"
+        android:background="@drawable/ripple_effect"
+        android:clickable="true"
+        android:focusable="true"
+        android:paddingVertical="8dp"
+        android:src="@drawable/ic_resume"
+        />
+
+    <ImageButton
+        android:id="@+id/step_over_button"
+        android:layout_width="48dp"
+        android:layout_height="48dp"
+        android:background="@drawable/ripple_effect"
+        android:clickable="true"
+        android:focusable="true"
+        android:paddingVertical="8dp"
+        android:src="@drawable/ic_step_over"
+        />
+</LinearLayout>