Updated RedBox screen (#22242)

Summary:
[Re: RedBox screen is a bit scary - Discussions and Proposals](react-native-community/discussions-and-proposals#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:
----------

<div style="flex-direction: row">
<img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png">
<img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png">

</div>

<div style="flex-direction: row">
<img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png">
<img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png">

</div>
Pull Request resolved: #22242

Reviewed By: hramos

Differential Revision: D13564287

Pulled By: cpojer

fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb

RNTester/RNTester/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>UIStatusBarStyle</key>
+	<string>UIStatusBarStyleBlackTranslucent</string>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleExecutable</key>

React/Modules/RCTRedBox.m

@@ -47,7 +47,7 @@ - (instancetype)initWithFrame:(CGRect)frame
 #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 @@ - (instancetype)initWithFrame:(CGRect)frame
         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 @@ - (instancetype)initWithFrame:(CGRect)frame
         [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 @@ - (instancetype)initWithFrame:(CGRect)frame
         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 @@ - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(N
 - (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 @@ - (UITableViewCell *)reuseCell:(UITableViewCell *)cell forStackFrame:(RCTJSStack
 {
     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];

ReactAndroid/src/main/res/devsupport/drawable/redbox_top_border_background.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item>
+        <shape android:shape="rectangle" >
+            <solid android:color="#1A1A1A" />
+        </shape>
+    </item>
+
+    <item android:bottom="-2dp" android:right="-2dp" android:left="-2dp">
+        <shape>
+            <solid android:color="@android:color/transparent" />
+            <stroke
+                android:width="1dp"
+                android:color="#B3B3B3" />
+        </shape>
+    </item>
+</layer-list>

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"
     />

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"
   />

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"
     >
     <ListView
         android:id="@+id/rn_redbox_stack"
@@ -53,6 +53,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
+        android:background="@drawable/redbox_top_border_background"
         >
         <Button
             android:id="@+id/rn_redbox_dismiss_button"

ReactAndroid/src/main/res/devsupport/values/strings.xml

@@ -21,7 +21,7 @@
   <string name="catalyst_dismiss_button" project="catalyst" translatable="false">Dismiss\n(ESC)</string>
   <string name="catalyst_reload_button" project="catalyst" translatable="false">Reload\n(R,\u00A0R)</string>
   <string name="catalyst_poke_sampling_profiler" project="catalyst" translatable="false">Start/Stop Sampling Profiler</string>
-  <string name="catalyst_copy_button" project="catalyst" translatable="false">Copy</string>
+  <string name="catalyst_copy_button" project="catalyst" translatable="false">Copy\n</string>
   <string name="catalyst_report_button" project="catalyst" translatable="false">Report</string>
   <string name="catalyst_loading_from_url" project="catalyst" translatable="false">Loading from %1$s…</string>
 </resources>