[iOS][Alert] Add style for actions

Improves the style of the actions to be like the UX mocks.

Bug: 951358, 951300
Change-Id: I535fd2ba711321d782d1ff0c5bb41781523aef88
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1578745
Commit-Queue: Javier Ernesto Flores Robles <javierrobles@chromium.org>
Reviewed-by: Kurt Horimoto <kkhorimoto@chromium.org>
Reviewed-by: Mark Cogan <marq@chromium.org>
Cr-Commit-Position: refs/heads/master@{#653552}

ios/chrome/browser/ui/alert_view_controller/BUILD.gn

@@ -8,6 +8,8 @@ source_set("alert_view_controller") {
     "alert_view_controller.mm",
   ]
   deps = [
+    "//ios/chrome/browser/ui/elements",
+    "//ios/chrome/browser/ui/util",
     "//ios/chrome/common/ui_util",
   ]
   libs = [ "UIKit.framework" ]

ios/chrome/browser/ui/alert_view_controller/alert_view_controller.h

@@ -15,8 +15,12 @@
 // The title for this action.
 @property(nonatomic, readonly) NSString* title;
 
+// The style for this action. Matches UIAlertAction style.
+@property(nonatomic, readonly) UIAlertActionStyle style;
+
 // Initializes an action with |title| and |handler|.
 + (instancetype)actionWithTitle:(NSString*)title
+                          style:(UIAlertActionStyle)style
                         handler:(void (^)(AlertAction* action))handler;
 
 @end

ios/chrome/browser/ui/alert_view_controller/alert_view_controller.mm

@@ -4,6 +4,8 @@
 
 #import "ios/chrome/browser/ui/alert_view_controller/alert_view_controller.h"
 
+#import "ios/chrome/browser/ui/elements/gray_highlight_button.h"
+#import "ios/chrome/browser/ui/util/uikit_ui_util.h"
 #import "ios/chrome/common/ui_util/constraints_ui_util.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
@@ -36,12 +38,21 @@ constexpr CGFloat kMessageInsetTop = 4;
 constexpr CGFloat kMessageInsetLeading = 20;
 constexpr CGFloat kMessageInsetBottom = 20;
 constexpr CGFloat kMessageInsetTrailing = 20;
+constexpr CGFloat kButtonInsetTop = 20;
+constexpr CGFloat kButtonInsetLeading = 20;
+constexpr CGFloat kButtonInsetBottom = 20;
+constexpr CGFloat kButtonInsetTrailing = 20;
+
+// Colors for the action buttons.
+constexpr int kButtonTextDefaultColor = 0x0579ff;
+constexpr int kButtonTextDestructiveColor = 0xdf322f;
 
 }  // namespace
 
 @interface AlertAction ()
 
 @property(nonatomic, readwrite) NSString* title;
+@property(nonatomic, readwrite) UIAlertActionStyle style;
 
 // The unique identifier for the actions created.
 @property(nonatomic) NSInteger uniqueIdentifier;
@@ -54,12 +65,14 @@ constexpr CGFloat kMessageInsetTrailing = 20;
 @implementation AlertAction
 
 + (instancetype)actionWithTitle:(NSString*)title
+                          style:(UIAlertActionStyle)style
                         handler:(void (^)(AlertAction* action))handler {
   AlertAction* action = [[AlertAction alloc] init];
   static NSInteger actionIdentifier = 0;
   action.uniqueIdentifier = ++actionIdentifier;
   action.title = title;
   action.handler = handler;
+  action.style = style;
   return action;
 }
 
@@ -102,6 +115,7 @@ constexpr CGFloat kMessageInsetTrailing = 20;
       [[UIColor blackColor] colorWithAlphaComponent:kBackgroundAlpha];
 
   self.contentView = [[UIView alloc] init];
+  self.contentView.clipsToBounds = YES;
   self.contentView.backgroundColor = [UIColor whiteColor];
   self.contentView.layer.cornerRadius = kCornerRadius;
   self.contentView.layer.shadowOffset =
@@ -194,23 +208,53 @@ constexpr CGFloat kMessageInsetTrailing = 20;
 
   self.buttonAlertActionsDictionary = [[NSMutableDictionary alloc] init];
   for (AlertAction* action in self.actions) {
-    UIButton* button = [UIButton buttonWithType:UIButtonTypeSystem];
+    GrayHighlightButton* button = [[GrayHighlightButton alloc] init];
+    UIFont* font = nil;
+    UIColor* textColor = nil;
+    if (action.style == UIAlertActionStyleDefault) {
+      font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+      textColor = UIColorFromRGB(kButtonTextDefaultColor);
+    } else if (action.style == UIAlertActionStyleCancel) {
+      font = [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
+      textColor = UIColorFromRGB(kButtonTextDefaultColor);
+    } else {  // Style is UIAlertActionStyleDestructive
+      font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+      textColor = UIColorFromRGB(kButtonTextDestructiveColor);
+    }
+    [button.titleLabel setFont:font];
+    [button setTitleColor:textColor forState:UIControlStateNormal];
     [button setTitle:action.title forState:UIControlStateNormal];
+
     button.contentHorizontalAlignment =
         UIControlContentHorizontalAlignmentCenter;
     [button addTarget:self
                   action:@selector(didSelectActionForButton:)
         forControlEvents:UIControlEventTouchUpInside];
     button.translatesAutoresizingMaskIntoConstraints = NO;
-    [self.contentView addSubview:button];
-
-    [NSLayoutConstraint activateConstraints:@[
-      [button.trailingAnchor
-          constraintEqualToAnchor:self.contentView.trailingAnchor],
-      [button.leadingAnchor
-          constraintEqualToAnchor:self.contentView.leadingAnchor],
-    ]];
-    [stackView addArrangedSubview:button];
+    button.contentEdgeInsets =
+        UIEdgeInsetsMake(kButtonInsetTop, kButtonInsetLeading,
+                         kButtonInsetBottom, kButtonInsetTrailing);
+
+    UIView* hairline = [[UIView alloc] init];
+    hairline.backgroundColor = [UIColor lightGrayColor];
+    hairline.translatesAutoresizingMaskIntoConstraints = NO;
+
+    UIView* buttonContainer = [[UIView alloc] init];
+    [buttonContainer addSubview:button];
+    [buttonContainer addSubview:hairline];
+    buttonContainer.translatesAutoresizingMaskIntoConstraints = NO;
+    [stackView addArrangedSubview:buttonContainer];
+
+    CGFloat pixelHeight = 1.0 / [UIScreen mainScreen].scale;
+    [hairline.heightAnchor constraintEqualToConstant:pixelHeight].active = YES;
+    AddSameConstraintsToSides(
+        hairline, buttonContainer,
+        (LayoutSides::kTrailing | LayoutSides::kTop | LayoutSides::kLeading));
+
+    AddSameConstraints(button, buttonContainer);
+    AddSameConstraintsToSides(buttonContainer, self.contentView,
+                              LayoutSides::kTrailing | LayoutSides::kLeading);
+
     button.tag = action.uniqueIdentifier;
     self.buttonAlertActionsDictionary[@(action.uniqueIdentifier)] = action;
   }

ios/showcase/alert/sc_alert_coordinator.mm

@@ -12,6 +12,7 @@
 
 @interface SCAlertCoordinator ()
 @property(nonatomic, strong) UIViewController* containerViewController;
+@property(nonatomic, strong) UISwitch* blockAlertSwitch;
 @end
 
 @implementation SCAlertCoordinator
@@ -50,17 +51,31 @@
                  action:@selector(showHTTPAuth)
        forControlEvents:UIControlEventTouchUpInside];
 
-  UIStackView* stack = [[UIStackView alloc] initWithArrangedSubviews:@[
-    alertButton, promptButton, confirmButton, authButton
+  UILabel* blockAlertsLabel = [[UILabel alloc] init];
+  blockAlertsLabel.text = @"Show \"Block Alerts Button\"";
+
+  self.blockAlertSwitch = [[UISwitch alloc] init];
+
+  UIStackView* switchStack = [[UIStackView alloc]
+      initWithArrangedSubviews:@[ self.blockAlertSwitch, blockAlertsLabel ]];
+  switchStack.axis = UILayoutConstraintAxisHorizontal;
+  switchStack.spacing = 16;
+  switchStack.translatesAutoresizingMaskIntoConstraints = NO;
+
+  UIStackView* verticalStack = [[UIStackView alloc] initWithArrangedSubviews:@[
+    alertButton, promptButton, confirmButton, authButton, switchStack
   ]];
-  stack.axis = UILayoutConstraintAxisVertical;
-  stack.spacing = 30;
-  stack.translatesAutoresizingMaskIntoConstraints = NO;
-  [containerView addSubview:stack];
+  verticalStack.axis = UILayoutConstraintAxisVertical;
+  verticalStack.spacing = 30;
+  verticalStack.translatesAutoresizingMaskIntoConstraints = NO;
+  verticalStack.distribution = UIStackViewDistributionFillEqually;
+  [containerView addSubview:verticalStack];
 
   [NSLayoutConstraint activateConstraints:@[
-    [stack.centerXAnchor constraintEqualToAnchor:containerView.centerXAnchor],
-    [stack.centerYAnchor constraintEqualToAnchor:containerView.centerYAnchor],
+    [verticalStack.centerXAnchor
+        constraintEqualToAnchor:containerView.centerXAnchor],
+    [verticalStack.centerYAnchor
+        constraintEqualToAnchor:containerView.centerYAnchor],
   ]];
   [self.baseViewController pushViewController:self.containerViewController
                                      animated:YES];
@@ -73,6 +88,7 @@
   __weak __typeof(self) weakSelf = self;
   AlertAction* action =
       [AlertAction actionWithTitle:@"OK"
+                             style:UIAlertActionStyleDefault
                            handler:^(AlertAction* action) {
                              [weakSelf.containerViewController
                                  dismissViewControllerAnimated:YES
@@ -92,6 +108,7 @@
   __weak __typeof(self) weakSelf = self;
   AlertAction* OKAction =
       [AlertAction actionWithTitle:@"OK"
+                             style:UIAlertActionStyleDefault
                            handler:^(AlertAction* action) {
                              [weakSelf.containerViewController
                                  dismissViewControllerAnimated:YES
@@ -100,6 +117,7 @@
   [alert addAction:OKAction];
   AlertAction* cancelAction =
       [AlertAction actionWithTitle:@"Cancel"
+                             style:UIAlertActionStyleCancel
                            handler:^(AlertAction* action) {
                              [weakSelf.containerViewController
                                  dismissViewControllerAnimated:YES
@@ -116,6 +134,7 @@
   __weak __typeof(self) weakSelf = self;
   AlertAction* OKAction =
       [AlertAction actionWithTitle:@"OK"
+                             style:UIAlertActionStyleDefault
                            handler:^(AlertAction* action) {
                              [weakSelf.containerViewController
                                  dismissViewControllerAnimated:YES
@@ -124,6 +143,7 @@
   [alert addAction:OKAction];
   AlertAction* cancelAction =
       [AlertAction actionWithTitle:@"Cancel"
+                             style:UIAlertActionStyleCancel
                            handler:^(AlertAction* action) {
                              [weakSelf.containerViewController
                                  dismissViewControllerAnimated:YES
@@ -148,6 +168,7 @@
   __weak __typeof(self) weakSelf = self;
   AlertAction* OKAction =
       [AlertAction actionWithTitle:@"Sign In"
+                             style:UIAlertActionStyleDefault
                            handler:^(AlertAction* action) {
                              [weakSelf.containerViewController
                                  dismissViewControllerAnimated:YES
@@ -156,6 +177,7 @@
   [alert addAction:OKAction];
   AlertAction* cancelAction =
       [AlertAction actionWithTitle:@"Cancel"
+                             style:UIAlertActionStyleCancel
                            handler:^(AlertAction* action) {
                              [weakSelf.containerViewController
                                  dismissViewControllerAnimated:YES
@@ -166,6 +188,18 @@
 }
 
 - (void)presentAlertViewController:(AlertViewController*)alertViewController {
+  if (self.blockAlertSwitch.isOn) {
+    __weak __typeof(self) weakSelf = self;
+    AlertAction* blockAction =
+        [AlertAction actionWithTitle:@"Block Dialogs"
+                               style:UIAlertActionStyleDestructive
+                             handler:^(AlertAction* action) {
+                               [weakSelf.containerViewController
+                                   dismissViewControllerAnimated:YES
+                                                      completion:nil];
+                             }];
+    [alertViewController addAction:blockAction];
+  }
   alertViewController.modalTransitionStyle =
       UIModalTransitionStyleCrossDissolve;
   alertViewController.modalPresentationStyle =