feat: Implement RCTPausedInDebuggerOverlayController (#2586)

Author: Saadnajmi

packages/react-native/React/CoreModules/RCTDevLoadingView.mm

@@ -130,7 +130,7 @@ - (void)showMessage:(NSString *)message color:(RCTUIColor *)color backgroundColo
     self->_window.rootViewController = [UIViewController new];
 #else // [macOS
     self->_window = [[NSWindow alloc] initWithContentRect:NSMakeRect(0, 0, 375, 20)
-                                               styleMask:NSWindowStyleMaskBorderless
+                                               styleMask:NSWindowStyleMaskBorderless | NSWindowStyleMaskFullSizeContentView
                                                  backing:NSBackingStoreBuffered
                                                    defer:YES];
     [self->_window setIdentifier:sRCTDevLoadingViewWindowIdentifier];

packages/react-native/React/CoreModules/RCTLogBoxView.mm

@@ -79,7 +79,10 @@ - (instancetype)initWithWindow:(RCTPlatformWindow *)window surfacePresenter:(id<
 #if !TARGET_OS_OSX // [macOS]
   self = [super initWithWindowScene:window.windowScene];
 #else // [macOS
-  self = [super initWithContentRect:NSMakeRect(0, 0, 600, 800) styleMask:NSWindowStyleMaskTitled backing:NSBackingStoreBuffered defer:YES];
+  self = [super initWithContentRect:NSMakeRect(0, 0, 600, 800)  
+                          styleMask:NSWindowStyleMaskBorderless | NSWindowStyleMaskFullSizeContentView  
+                            backing:NSBackingStoreBuffered  
+                              defer:YES];  
   _window = window;
 #endif // macOS]
 

packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.mm

@@ -16,19 +16,17 @@ @interface RCTPausedInDebuggerViewController : UIViewController
 @end
 
 @interface RCTPausedInDebuggerOverlayController ()
-#if !TARGET_OS_OSX // [macOS]
 
-@property (nonatomic, strong) UIWindow *alertWindow;
+@property (nonatomic, strong) RCTPlatformWindow *alertWindow; // [macOS]
 
-#endif // [macOS];
 @end
 
 @implementation RCTPausedInDebuggerViewController
-#if !TARGET_OS_OSX // [macOS]
 - (void)viewDidLoad
 {
   [super viewDidLoad];
 
+#if !TARGET_OS_OSX // [macOS]
   UIView *dimmingView = [[UIView alloc] init];
   dimmingView.translatesAutoresizingMaskIntoConstraints = NO;
   dimmingView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.2];
@@ -39,15 +37,18 @@ - (void)viewDidLoad
     [dimmingView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
     [dimmingView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor]
   ]];
-
-  UILabel *messageLabel = [[UILabel alloc] init];
+#endif // [macOS]
+  
+  RCTUILabel *messageLabel = [[RCTUILabel alloc] init]; // [macOS]
   messageLabel.text = self.message;
   messageLabel.textAlignment = NSTextAlignmentCenter;
+#if !TARGET_OS_OSX // [macOS]
   messageLabel.numberOfLines = 0;
+#endif // [macOS]
   messageLabel.font = [UIFont boldSystemFontOfSize:16];
-  messageLabel.textColor = [UIColor blackColor];
+  messageLabel.textColor = [RCTUIColor blackColor]; // [macOS]
   messageLabel.translatesAutoresizingMaskIntoConstraints = NO;
-  UIView *messageContainer = [[UIView alloc] init];
+  RCTUIView *messageContainer = [[RCTUIView alloc] init]; // [macOS]
   [messageContainer addSubview:messageLabel];
   [NSLayoutConstraint activateConstraints:@[
     [messageLabel.topAnchor constraintEqualToAnchor:messageContainer.topAnchor constant:-1],
@@ -56,6 +57,7 @@ - (void)viewDidLoad
     [messageLabel.trailingAnchor constraintEqualToAnchor:messageContainer.trailingAnchor],
   ]];
 
+#if !TARGET_OS_OSX // [macOS]
   UIButton *resumeButton = [UIButton buttonWithType:UIButtonTypeCustom];
   [resumeButton setImage:[UIImage systemImageNamed:@"forward.frame.fill"] forState:UIControlStateNormal];
   resumeButton.tintColor = [UIColor colorWithRed:0.37 green:0.37 blue:0.37 alpha:1];
@@ -65,11 +67,21 @@ - (void)viewDidLoad
   };
 
   resumeButton.enabled = NO;
+#else // [macOS
+  NSButton *resumeButton = [[NSButton alloc] init];
+  [resumeButton setImage:[NSImage imageWithSystemSymbolName:@"forward.frame.fill" accessibilityDescription:@"Resume"]];
+  resumeButton.bordered = NO;
+  resumeButton.target = self;
+  resumeButton.action = @selector(handleResume:);
+  resumeButton.contentTintColor = [NSColor colorWithRed:0.37 green:0.37 blue:0.37 alpha:1];
+#endif // macOS]
+  
   [NSLayoutConstraint activateConstraints:@[
     [resumeButton.widthAnchor constraintEqualToConstant:48],
     [resumeButton.heightAnchor constraintEqualToConstant:46],
   ]];
 
+#if !TARGET_OS_OSX // [macOS]
   UIStackView *stackView = [[UIStackView alloc] initWithArrangedSubviews:@[ messageContainer, resumeButton ]];
   stackView.backgroundColor = [UIColor colorWithRed:1 green:1 blue:0.757 alpha:1];
   stackView.layer.cornerRadius = 12;
@@ -84,41 +96,75 @@ - (void)viewDidLoad
                                                                                       action:@selector(handleResume:)];
   [stackView addGestureRecognizer:gestureRecognizer];
   stackView.userInteractionEnabled = YES;
+#else // [macOS
+  NSStackView *stackView = [NSStackView stackViewWithViews:@[ messageContainer, resumeButton ]];
+  stackView.wantsLayer = YES;
+  stackView.layer.backgroundColor = [NSColor colorWithRed:1 green:1 blue:0.757 alpha:1].CGColor;
+  stackView.translatesAutoresizingMaskIntoConstraints = NO;
+  stackView.orientation = NSUserInterfaceLayoutOrientationHorizontal;
+  stackView.distribution = NSStackViewDistributionFill;
+  stackView.alignment = NSLayoutAttributeCenterY;
+
+  NSClickGestureRecognizer *gestureRecognizer = [[NSClickGestureRecognizer alloc] initWithTarget:self
+                                                                                         action:@selector(handleResume:)];
+  [stackView addGestureRecognizer:gestureRecognizer];
+#endif // macOS]
 
+#if !TARGET_OS_OSX
   [self.view addSubview:stackView];
 
   [NSLayoutConstraint activateConstraints:@[
     [stackView.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor constant:12],
     [stackView.centerXAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.centerXAnchor],
   ]];
+#else
+  [self setView:stackView];
+#endif 
 
+#if !TARGET_OS_OSX // [macOS]
   stackView.semanticContentAttribute = UISemanticContentAttributeForceLeftToRight;
+#else // [macOS
+  stackView.userInterfaceLayoutDirection = NSUserInterfaceLayoutDirectionLeftToRight;
+#endif // macOS]
 }
 
+#if !TARGET_OS_OSX // [macOS]
 - (void)handleResume:(UITapGestureRecognizer *)recognizer
 {
   self.onResume();
 }
-#endif // [macOS]
+#else // [macOS
+- (void)handleResume:(id)sender
+{
+  self.onResume();
+}
+#endif // macOS]
 @end
 
 @implementation RCTPausedInDebuggerOverlayController
 
-#if !TARGET_OS_OSX // [macOS]
-- (UIWindow *)alertWindow
+- (RCTPlatformWindow *)alertWindow // [macOS]
 {
   if (_alertWindow == nil) {
+#if !TARGET_OS_OSX // [macOS]
     _alertWindow = [[UIWindow alloc] initWithWindowScene:RCTKeyWindow().windowScene];
 
     if (_alertWindow) {
       _alertWindow.rootViewController = [UIViewController new];
       _alertWindow.windowLevel = UIWindowLevelAlert + 1;
     }
+#else // [macOS]
+    _alertWindow = [[NSWindow alloc] initWithContentRect:NSMakeRect(0, 0, 100, 100)
+                                               styleMask:NSWindowStyleMaskBorderless | NSWindowStyleMaskFullSizeContentView
+                                                 backing:NSBackingStoreBuffered
+                                                   defer:YES];
+    _alertWindow.backgroundColor = [NSColor clearColor];
+    _alertWindow.opaque = NO;
+#endif // macOS]
   }
 
   return _alertWindow;
 }
-#endif // [macOS]
 
 - (void)showWithMessage:(NSString *)message onResume:(void (^)(void))onResume
 {
@@ -129,9 +175,21 @@ - (void)showWithMessage:(NSString *)message onResume:(void (^)(void))onResume
   view.modalPresentationStyle = UIModalPresentationOverFullScreen;
   view.message = message;
   view.onResume = onResume;
+  
   [self.alertWindow makeKeyAndVisible];
   [self.alertWindow.rootViewController presentViewController:view animated:NO completion:nil];
-#endif // [macOS]
+#else // [macOS]
+  self.alertWindow.contentViewController = view;
+  view.message = message;
+  view.onResume = onResume;
+  
+  NSWindow *parentWindow = RCTKeyWindow();
+  if (![[parentWindow sheets] doesContain:self->_alertWindow]) {
+    [parentWindow beginSheet:self.alertWindow completionHandler:^(NSModalResponse returnCode) {
+      [self->_alertWindow orderOut:self];
+    }];
+  }
+#endif // macOS]
 }
 
 - (void)hide
@@ -140,9 +198,19 @@ - (void)hide
   [_alertWindow setHidden:YES];
 
   _alertWindow.windowScene = nil;
+#else // [macOS]
+  NSWindow *parentWindow = RCTKeyWindow();
+  if (parentWindow) {
+    for (NSWindow *sheet in [parentWindow sheets]) {
+      if (sheet == _alertWindow) {
+        [parentWindow endSheet:sheet];
+        break;
+      }
+    }
+  }
+#endif // macOS]
 
   _alertWindow = nil;
-#endif // macOS]
 }
 
 @end

packages/rn-tester/Podfile

@@ -39,8 +39,7 @@ def pods(target_name, options = {})
 
   # Hermes is now enabled by default.
   # The following line will only disable Hermes if the USE_HERMES envvar is SET to a value other than 1 (e.g. USE_HERMES=0).
-  # [macOS] Make hermes disabled by default for our fork
-  hermes_enabled = ENV['USE_HERMES'] == '1'
+  hermes_enabled = !ENV.has_key?('USE_HERMES') || ENV['USE_HERMES'] == '1'
   puts "Configuring #{target_name} with Fabric #{fabric_enabled ? "enabled" : "disabled"}.#{hermes_enabled ? " Using Hermes engine." : ""}"
 
   use_react_native!(