From 7fbccdea22993b56988685174492583b16dc69db 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 828b7b591..13573d49b 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 f44f4fd02..b7a3433e4 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 000000000..32e4bbd56 --- /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 ad23cbf47..98d808082 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 8091fb4d3..97360378c 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 832ac4fb8..6f23319ec 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" >