From dbdb509f26d7cfde42c5fd7d8983f2c1b21af80c Mon Sep 17 00:00:00 2001 From: Monte Thakkar Date: Tue, 15 Jan 2019 06:24:02 -0800 Subject: [PATCH] Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ----------
orginal redbox_v2_ios
original_android redbox_v2_android
Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb --- RNTester/RNTester/Info.plist | 2 + React/Modules/RCTRedBox.m | 78 +++++++++++++------ .../drawable/redbox_top_border_background.xml | 17 ++++ .../devsupport/layout/redbox_item_frame.xml | 2 +- .../devsupport/layout/redbox_item_title.xml | 1 + .../res/devsupport/layout/redbox_view.xml | 3 +- .../main/res/devsupport/values/strings.xml | 2 +- 7 files changed, 79 insertions(+), 26 deletions(-) create mode 100644 ReactAndroid/src/main/res/devsupport/drawable/redbox_top_border_background.xml diff --git a/RNTester/RNTester/Info.plist b/RNTester/RNTester/Info.plist index 828b7b591e8..13573d49b86 100644 --- a/RNTester/RNTester/Info.plist +++ b/RNTester/RNTester/Info.plist @@ -2,6 +2,8 @@ + UIStatusBarStyle + UIStatusBarStyleBlackTranslucent CFBundleDevelopmentRegion en CFBundleExecutable diff --git a/React/Modules/RCTRedBox.m b/React/Modules/RCTRedBox.m index f44f4fd0245..b7a3433e46c 100644 --- a/React/Modules/RCTRedBox.m +++ b/React/Modules/RCTRedBox.m @@ -47,7 +47,7 @@ #else self.windowLevel = UIWindowLevelStatusBar - 1; #endif - self.backgroundColor = [UIColor colorWithRed:0.8 green:0 blue:0 alpha:1]; + self.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1]; self.hidden = YES; UIViewController *rootController = [UIViewController new]; @@ -58,7 +58,7 @@ const CGFloat buttonHeight = 60; CGRect detailsFrame = rootView.bounds; - detailsFrame.size.height -= buttonHeight; + detailsFrame.size.height -= buttonHeight + [self bottomSafeViewHeight]; _stackTraceTableView = [[UITableView alloc] initWithFrame:detailsFrame style:UITableViewStylePlain]; _stackTraceTableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; @@ -73,10 +73,10 @@ [rootView addSubview:_stackTraceTableView]; #if TARGET_OS_SIMULATOR - NSString *reloadText = @"Reload JS (\u2318R)"; - NSString *dismissText = @"Dismiss (ESC)"; - NSString *copyText = @"Copy (\u2325\u2318C)"; - NSString *extraText = @"Extra Info (\u2318E)"; + NSString *reloadText = @"Reload\n(\u2318R)"; + NSString *dismissText = @"Dismiss\n(ESC)"; + NSString *copyText = @"Copy\n(\u2325\u2318C)"; + NSString *extraText = @"Extra Info\n(\u2318E)"; #else NSString *reloadText = @"Reload JS"; NSString *dismissText = @"Dismiss"; @@ -88,53 +88,85 @@ dismissButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleRightMargin; dismissButton.accessibilityIdentifier = @"redbox-dismiss"; dismissButton.titleLabel.font = [UIFont systemFontOfSize:13]; + dismissButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping; + dismissButton.titleLabel.textAlignment = NSTextAlignmentCenter; + dismissButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1]; [dismissButton setTitle:dismissText forState:UIControlStateNormal]; - [dismissButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateNormal]; - [dismissButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted]; + [dismissButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; + [dismissButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted]; [dismissButton addTarget:self action:@selector(dismiss) forControlEvents:UIControlEventTouchUpInside]; UIButton *reloadButton = [UIButton buttonWithType:UIButtonTypeCustom]; reloadButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin; reloadButton.accessibilityIdentifier = @"redbox-reload"; reloadButton.titleLabel.font = [UIFont systemFontOfSize:13]; - + reloadButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping; + reloadButton.titleLabel.textAlignment = NSTextAlignmentCenter; + reloadButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1]; [reloadButton setTitle:reloadText forState:UIControlStateNormal]; - [reloadButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateNormal]; - [reloadButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted]; + [reloadButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; + [reloadButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted]; [reloadButton addTarget:self action:@selector(reload) forControlEvents:UIControlEventTouchUpInside]; UIButton *copyButton = [UIButton buttonWithType:UIButtonTypeCustom]; copyButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin; copyButton.accessibilityIdentifier = @"redbox-copy"; copyButton.titleLabel.font = [UIFont systemFontOfSize:13]; + copyButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping; + copyButton.titleLabel.textAlignment = NSTextAlignmentCenter; + copyButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1]; [copyButton setTitle:copyText forState:UIControlStateNormal]; - [copyButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateNormal]; - [copyButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted]; + [copyButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; + [copyButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted]; [copyButton addTarget:self action:@selector(copyStack) forControlEvents:UIControlEventTouchUpInside]; UIButton *extraButton = [UIButton buttonWithType:UIButtonTypeCustom]; extraButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin; extraButton.accessibilityIdentifier = @"redbox-extra"; extraButton.titleLabel.font = [UIFont systemFontOfSize:13]; + extraButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping; + extraButton.titleLabel.textAlignment = NSTextAlignmentCenter; + extraButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1]; [extraButton setTitle:extraText forState:UIControlStateNormal]; - [extraButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateNormal]; - [extraButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted]; + [extraButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; + [extraButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted]; [extraButton addTarget:self action:@selector(showExtraDataViewController) forControlEvents:UIControlEventTouchUpInside]; CGFloat buttonWidth = self.bounds.size.width / 4; - dismissButton.frame = CGRectMake(0, self.bounds.size.height - buttonHeight, buttonWidth, buttonHeight); - reloadButton.frame = CGRectMake(buttonWidth, self.bounds.size.height - buttonHeight, buttonWidth, buttonHeight); - copyButton.frame = CGRectMake(buttonWidth * 2, self.bounds.size.height - buttonHeight, buttonWidth, buttonHeight); - extraButton.frame = CGRectMake(buttonWidth * 3, self.bounds.size.height - buttonHeight, buttonWidth, buttonHeight); + CGFloat bottomButtonHeight = self.bounds.size.height - buttonHeight - [self bottomSafeViewHeight]; + + dismissButton.frame = CGRectMake(0, bottomButtonHeight, buttonWidth, buttonHeight); + reloadButton.frame = CGRectMake(buttonWidth, bottomButtonHeight, buttonWidth, buttonHeight); + copyButton.frame = CGRectMake(buttonWidth * 2, bottomButtonHeight, buttonWidth, buttonHeight); + extraButton.frame = CGRectMake(buttonWidth * 3, bottomButtonHeight, buttonWidth, buttonHeight); + + UIView *topBorder = [[UIView alloc] initWithFrame:CGRectMake(0, bottomButtonHeight + 1, rootView.frame.size.width, 1)]; + topBorder.backgroundColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0]; [rootView addSubview:dismissButton]; [rootView addSubview:reloadButton]; [rootView addSubview:copyButton]; [rootView addSubview:extraButton]; + [rootView addSubview:topBorder]; + + UIView *bottomSafeView = [UIView new]; + bottomSafeView.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1]; + bottomSafeView.frame = CGRectMake(0, self.bounds.size.height - [self bottomSafeViewHeight], self.bounds.size.width, [self bottomSafeViewHeight]); + + [rootView addSubview:bottomSafeView]; } return self; } +- (NSInteger)bottomSafeViewHeight +{ + if (@available(iOS 11.0, *)) { + return [UIApplication sharedApplication].delegate.window.safeAreaInsets.bottom; + } else { + return 0; + } +} + RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder) - (void)dealloc @@ -247,14 +279,14 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder) - (UITableViewCell *)reuseCell:(UITableViewCell *)cell forErrorMessage:(NSString *)message { if (!cell) { - cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"msg-cell"]; + cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"msg-cell"]; cell.textLabel.accessibilityIdentifier = @"redbox-error"; cell.textLabel.textColor = [UIColor whiteColor]; cell.textLabel.font = [UIFont boldSystemFontOfSize:16]; cell.textLabel.lineBreakMode = NSLineBreakByWordWrapping; cell.textLabel.numberOfLines = 0; cell.detailTextLabel.textColor = [UIColor whiteColor]; - cell.backgroundColor = [UIColor clearColor]; + cell.backgroundColor = [UIColor colorWithRed:0.82 green:0.10 blue:0.15 alpha:1.0]; cell.selectionStyle = UITableViewCellSelectionStyleNone; } @@ -267,11 +299,11 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder) { if (!cell) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"]; - cell.textLabel.textColor = [UIColor colorWithWhite:1 alpha:0.9]; + cell.textLabel.textColor = [UIColor whiteColor]; cell.textLabel.font = [UIFont fontWithName:@"Menlo-Regular" size:14]; cell.textLabel.lineBreakMode = NSLineBreakByCharWrapping; cell.textLabel.numberOfLines = 2; - cell.detailTextLabel.textColor = [UIColor colorWithWhite:1 alpha:0.7]; + cell.detailTextLabel.textColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0]; cell.detailTextLabel.font = [UIFont fontWithName:@"Menlo-Regular" size:11]; cell.detailTextLabel.lineBreakMode = NSLineBreakByTruncatingMiddle; cell.backgroundColor = [UIColor clearColor]; diff --git a/ReactAndroid/src/main/res/devsupport/drawable/redbox_top_border_background.xml b/ReactAndroid/src/main/res/devsupport/drawable/redbox_top_border_background.xml new file mode 100644 index 00000000000..32e4bbd5644 --- /dev/null +++ b/ReactAndroid/src/main/res/devsupport/drawable/redbox_top_border_background.xml @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + diff --git a/ReactAndroid/src/main/res/devsupport/layout/redbox_item_frame.xml b/ReactAndroid/src/main/res/devsupport/layout/redbox_item_frame.xml index ad23cbf4749..98d808082e4 100644 --- a/ReactAndroid/src/main/res/devsupport/layout/redbox_item_frame.xml +++ b/ReactAndroid/src/main/res/devsupport/layout/redbox_item_frame.xml @@ -19,7 +19,7 @@ android:id="@+id/rn_frame_file" android:layout_width="match_parent" android:layout_height="wrap_content" - android:textColor="#E6B8B8" + android:textColor="#B3B3B3" android:textSize="12sp" android:fontFamily="monospace" /> diff --git a/ReactAndroid/src/main/res/devsupport/layout/redbox_item_title.xml b/ReactAndroid/src/main/res/devsupport/layout/redbox_item_title.xml index 8091fb4d325..97360378c4e 100644 --- a/ReactAndroid/src/main/res/devsupport/layout/redbox_item_title.xml +++ b/ReactAndroid/src/main/res/devsupport/layout/redbox_item_title.xml @@ -7,4 +7,5 @@ android:textColor="@android:color/white" android:textSize="16sp" android:textStyle="bold" + android:background="#D01926" /> diff --git a/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml b/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml index 832ac4fb877..6f23319ecba 100644 --- a/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml +++ b/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml @@ -3,7 +3,7 @@ android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" - android:background="#E80000" + android:background="#1A1A1A" >