Align paused overlay design on Android (#45942)

Summary:
Pull Request resolved: #45942

Design refinements to the paused debugger overlay on Android.

Changed:
- Visual treatment of the button (text, icon colour, spacing)
- The touch area of the button (whole unit becomes touchable to resume)
- Overlay opacity reduced
- Overlay animation removed

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D60962345

fbshipit-source-id: 3c1c480e5469e6f7700fe96305bb83c348329ea6

Author: huntie

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

@@ -9,10 +9,12 @@
 
 import android.app.Dialog;
 import android.content.Context;
+import android.graphics.drawable.ColorDrawable;
 import android.view.Gravity;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.Window;
+import android.view.WindowManager;
 import android.widget.TextView;
 import androidx.annotation.Nullable;
 import androidx.core.util.Supplier;
@@ -44,20 +46,32 @@ public void showPausedInDebuggerOverlay(
           if (context == null) {
             return;
           }
+
           View dialogView =
               LayoutInflater.from(context).inflate(R.layout.paused_in_debugger_view, null);
-          mPausedInDebuggerDialog = new Dialog(context);
+          View resumeButton = Assertions.assertNotNull(dialogView.findViewById(R.id.button));
+          resumeButton.setOnClickListener((v) -> listener.onResume());
+          TextView buttonText = Assertions.assertNotNull(dialogView.findViewById(R.id.button_text));
+          buttonText.setText(message);
+
+          mPausedInDebuggerDialog = new Dialog(context, R.style.NoAnimationDialog);
           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());
+
           Window dialogWindow = mPausedInDebuggerDialog.getWindow();
           if (dialogWindow != null) {
+            WindowManager.LayoutParams layoutParams = dialogWindow.getAttributes();
+            layoutParams.dimAmount = 0.2f;
+
+            dialogWindow.setAttributes(layoutParams);
+            dialogWindow.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
             dialogWindow.setGravity(Gravity.TOP);
+            dialogWindow.setElevation(0);
+            dialogWindow.setBackgroundDrawable(
+                new ColorDrawable(android.graphics.Color.TRANSPARENT));
             dialogWindow.setBackgroundDrawableResource(R.drawable.paused_in_debugger_background);
           }
+
           mPausedInDebuggerDialog.show();
         });
   }

packages/react-native/ReactAndroid/src/main/res/devsupport/drawable-hdpi/ic_resume.png

@@ -15,7 +15,7 @@
                     android:color="#FFFFC1"
                     />
                 <stroke
-                    android:color="#D0D0B8" android:width="2dp"
+                    android:color="#B4B49D" android:width="2dp"
                     />
                 <corners
                     android:radius="12dp"

packages/react-native/ReactAndroid/src/main/res/devsupport/drawable-mdpi/ic_resume.png

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    tools:ignore="MissingDefaultResource"
+    >
+    <solid android:color="#B3000000"/>
+</shape>

packages/react-native/ReactAndroid/src/main/res/devsupport/drawable-xhdpi/ic_resume.png

@@ -1,35 +1,36 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<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:id="@+id/button"
+    android:layout_width="wrap_content"
     android:layout_height="wrap_content"
-    android:gravity="center"
     android:layoutDirection="ltr"
     android:orientation="horizontal"
+    android:gravity="center_vertical"
+    android:background="@android:color/transparent"
+    android:clickable="true"
+    android:focusable="true"
+    android:paddingStart="17dp"
+    android:paddingEnd="11dp"
     tools:ignore="MissingDefaultResource"
     >
-
     <TextView
-        android:id="@+id/paused_text"
+        android:id="@+id/button_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:paddingStart="14dp"
         android:text=""
-        android:textColor="@android:color/black"
-        android:textSize="16sp"
+        android:textColor="#444"
+        android:textSize="16dp"
         android:textStyle="bold"
+        android:layout_marginBottom="1dp"
         />
-
-    <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"
+    <ImageView
+        android:layout_width="32dp"
+        android:layout_height="32dp"
         android:src="@drawable/ic_resume"
+        android:layout_marginStart="8dp"
+        android:layout_marginVertical="8dp"
         />
 </LinearLayout>

packages/react-native/ReactAndroid/src/main/res/devsupport/drawable-xxhdpi/ic_resume.png

@@ -36,4 +36,8 @@
     <item name="android:textColor">#dddddd</item>
     <item name="android:textSize">14sp</item>
   </style>
+  <style name="NoAnimationDialog" parent="Theme.AppCompat.Dialog">
+    <item name="android:windowEnterAnimation">@null</item>
+    <item name="android:windowExitAnimation">@null</item>
+  </style>
 </resources>