From f9eb35a58172856fa0aaa3167445ae606be40d33 Mon Sep 17 00:00:00 2001 From: Moti Zilberman Date: Wed, 17 Apr 2024 04:05:36 -0700 Subject: [PATCH] Tweak pause overlay design, remove Step Over button (#44118) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/44118 Changelog: [Internal] TSIA - following design feedback from huntie. Reviewed By: huntie, hoxyq Differential Revision: D56191051 fbshipit-source-id: 6497a0ec6c51808410c3745ce97ed44085add0ac --- packages/react-native/React/Base/RCTBridge.mm | 35 +++++-------- .../RCTPausedInDebuggerOverlayController.h | 2 +- .../RCTPausedInDebuggerOverlayController.mm | 52 ++++--------------- .../platform/ios/ReactCommon/RCTHost.mm | 36 +++++-------- 4 files changed, 37 insertions(+), 88 deletions(-) diff --git a/packages/react-native/React/Base/RCTBridge.mm b/packages/react-native/React/Base/RCTBridge.mm index 8374e83f3bc..05660f1e809 100644 --- a/packages/react-native/React/Base/RCTBridge.mm +++ b/packages/react-native/React/Base/RCTBridge.mm @@ -211,29 +211,18 @@ class RCTBridgeHostTargetDelegate : public facebook::react::jsinspector_modern:: } else { __weak RCTBridge *bridgeWeak = bridge_; [pauseOverlayController_ showWithMessage:@(request.message.value().c_str()) - onResume:^{ - RCTAssertMainQueue(); - RCTBridge *bridgeStrong = bridgeWeak; - if (!bridgeStrong) { - return; - } - if (!bridgeStrong.inspectorTarget) { - return; - } - bridgeStrong.inspectorTarget->sendCommand(facebook::react::jsinspector_modern::HostCommand::DebuggerResume); - } - onStepOver:^{ - RCTAssertMainQueue(); - RCTBridge *bridgeStrong = bridgeWeak; - if (!bridgeStrong) { - return; - } - if (!bridgeStrong.inspectorTarget) { - return; - } - bridgeStrong.inspectorTarget->sendCommand( - facebook::react::jsinspector_modern::HostCommand::DebuggerStepOver); - }]; + onResume:^{ + RCTAssertMainQueue(); + RCTBridge *bridgeStrong = bridgeWeak; + if (!bridgeStrong) { + return; + } + if (!bridgeStrong.inspectorTarget) { + return; + } + bridgeStrong.inspectorTarget->sendCommand( + facebook::react::jsinspector_modern::HostCommand::DebuggerResume); + }]; } } diff --git a/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.h b/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.h index e0ef8c9ed7e..dd2e24c5ee0 100644 --- a/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.h +++ b/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.h @@ -9,7 +9,7 @@ @interface RCTPausedInDebuggerOverlayController : NSObject -- (void)showWithMessage:(NSString *)message onResume:(void (^)(void))onResume onStepOver:(void (^)(void))onStepOver; +- (void)showWithMessage:(NSString *)message onResume:(void (^)(void))onResume; - (void)hide; @end diff --git a/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.mm b/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.mm index a500ff7730e..b3f39547db3 100644 --- a/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.mm +++ b/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.mm @@ -11,7 +11,6 @@ @interface RCTPausedInDebuggerViewController : UIViewController @property (nonatomic, copy) void (^onResume)(void); -@property (nonatomic, copy) void (^onStepOver)(void); @property (nonatomic, strong) NSString *message; @end @@ -41,7 +40,7 @@ messageLabel.text = self.message; messageLabel.textAlignment = NSTextAlignmentCenter; messageLabel.numberOfLines = 0; - messageLabel.font = [UIFont boldSystemFontOfSize:14]; + messageLabel.font = [UIFont boldSystemFontOfSize:16]; messageLabel.textColor = [UIColor blackColor]; messageLabel.translatesAutoresizingMaskIntoConstraints = NO; UIView *messageContainer = [[UIView alloc] init]; @@ -49,8 +48,8 @@ [NSLayoutConstraint activateConstraints:@[ [messageLabel.topAnchor constraintEqualToAnchor:messageContainer.topAnchor], [messageLabel.bottomAnchor constraintEqualToAnchor:messageContainer.bottomAnchor], - [messageLabel.leadingAnchor constraintEqualToAnchor:messageContainer.leadingAnchor constant:12], - [messageLabel.trailingAnchor constraintEqualToAnchor:messageContainer.trailingAnchor constant:-12] + [messageLabel.leadingAnchor constraintEqualToAnchor:messageContainer.leadingAnchor constant:14], + [messageLabel.trailingAnchor constraintEqualToAnchor:messageContainer.trailingAnchor], ]]; UIButton *resumeButton = [UIButton buttonWithType:UIButtonTypeCustom]; @@ -62,46 +61,23 @@ [resumeButton.heightAnchor constraintEqualToConstant:48], ]]; - UIView *divider1 = [[UIView alloc] init]; - divider1.backgroundColor = [UIColor colorWithRed:0.79 green:0.79 blue:0.79 alpha:1]; - divider1.translatesAutoresizingMaskIntoConstraints = NO; - [NSLayoutConstraint activateConstraints:@[ - [divider1.widthAnchor constraintEqualToConstant:1.0], - [divider1.heightAnchor constraintEqualToConstant:48.0], - ]]; - - UIButton *stepOverButton = [UIButton buttonWithType:UIButtonTypeCustom]; - [stepOverButton setImage:[UIImage systemImageNamed:@"hand.point.up.left.and.text.fill"] - forState:UIControlStateNormal]; - [stepOverButton addTarget:self action:@selector(stepOverButtonTapped) forControlEvents:UIControlEventTouchUpInside]; - [NSLayoutConstraint activateConstraints:@[ - [stepOverButton.widthAnchor constraintEqualToConstant:48], - [stepOverButton.heightAnchor constraintEqualToConstant:48], - ]]; - - UIView *divider2 = [[UIView alloc] init]; - divider2.backgroundColor = [UIColor colorWithRed:0.79 green:0.79 blue:0.79 alpha:1]; - divider2.translatesAutoresizingMaskIntoConstraints = NO; - [NSLayoutConstraint activateConstraints:@[ - [divider2.widthAnchor constraintEqualToConstant:1.0], - [divider2.heightAnchor constraintEqualToConstant:48.0], - ]]; - - UIStackView *stackView = [[UIStackView alloc] - initWithArrangedSubviews:@[ messageContainer, divider1, resumeButton, divider2, stepOverButton ]]; + UIStackView *stackView = [[UIStackView alloc] initWithArrangedSubviews:@[ messageContainer, resumeButton ]]; + stackView.backgroundColor = [UIColor colorWithRed:1 green:1 blue:0.757 alpha:1]; + stackView.layer.cornerRadius = 12; + stackView.layer.borderWidth = 2; + stackView.layer.borderColor = [UIColor colorWithRed:0.816 green:0.816 blue:0.723 alpha:1].CGColor; + stackView.translatesAutoresizingMaskIntoConstraints = NO; stackView.axis = UILayoutConstraintAxisHorizontal; stackView.distribution = UIStackViewDistributionFill; stackView.alignment = UIStackViewAlignmentCenter; [self.view addSubview:stackView]; - stackView.translatesAutoresizingMaskIntoConstraints = NO; [NSLayoutConstraint activateConstraints:@[ - [stackView.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor constant:10], + [stackView.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor constant:12], [stackView.centerXAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.centerXAnchor], ]]; - stackView.backgroundColor = [UIColor colorWithRed:1 green:1 blue:0.76 alpha:1]; stackView.semanticContentAttribute = UISemanticContentAttributeForceLeftToRight; } @@ -109,11 +85,6 @@ { self.onResume(); } - -- (void)stepOverButtonTapped -{ - self.onStepOver(); -} @end @implementation RCTPausedInDebuggerOverlayController @@ -132,7 +103,7 @@ return _alertWindow; } -- (void)showWithMessage:(NSString *)message onResume:(void (^)(void))onResume onStepOver:(void (^)(void))onStepOver +- (void)showWithMessage:(NSString *)message onResume:(void (^)(void))onResume { [self hide]; @@ -140,7 +111,6 @@ view.modalPresentationStyle = UIModalPresentationOverFullScreen; view.message = message; view.onResume = onResume; - view.onStepOver = onStepOver; [self.alertWindow makeKeyAndVisible]; [self.alertWindow.rootViewController presentViewController:view animated:NO completion:nil]; } diff --git a/packages/react-native/ReactCommon/react/runtime/platform/ios/ReactCommon/RCTHost.mm b/packages/react-native/ReactCommon/react/runtime/platform/ios/ReactCommon/RCTHost.mm index 4ee884205a0..da00e6805ef 100644 --- a/packages/react-native/ReactCommon/react/runtime/platform/ios/ReactCommon/RCTHost.mm +++ b/packages/react-native/ReactCommon/react/runtime/platform/ios/ReactCommon/RCTHost.mm @@ -53,29 +53,19 @@ class RCTHostHostTargetDelegate : public facebook::react::jsinspector_modern::Ho [pauseOverlayController_ hide]; } else { __weak RCTHost *hostWeak = host_; - [pauseOverlayController_ showWithMessage:@(request.message.value().c_str()) - onResume:^{ - RCTAssertMainQueue(); - RCTHost *hostStrong = hostWeak; - if (!hostStrong) { - return; - } - if (!hostStrong.inspectorTarget) { - return; - } - hostStrong.inspectorTarget->sendCommand(jsinspector_modern::HostCommand::DebuggerResume); - } - onStepOver:^{ - RCTAssertMainQueue(); - RCTHost *hostStrong = hostWeak; - if (!hostStrong) { - return; - } - if (!hostStrong.inspectorTarget) { - return; - } - hostStrong.inspectorTarget->sendCommand(jsinspector_modern::HostCommand::DebuggerStepOver); - }]; + [pauseOverlayController_ + showWithMessage:@(request.message.value().c_str()) + onResume:^{ + RCTAssertMainQueue(); + RCTHost *hostStrong = hostWeak; + if (!hostStrong) { + return; + } + if (!hostStrong.inspectorTarget) { + return; + } + hostStrong.inspectorTarget->sendCommand(jsinspector_modern::HostCommand::DebuggerResume); + }]; } }