[ios] make manual fallback buttons larger and with touch highlight

Bug: 907082,907001
Change-Id: I30d4a9f0a1463f3b500cefc255b4335bde790b37
Reviewed-on: https://chromium-review.googlesource.com/c/1348109Reviewed-by: Javier Ernesto Flores Robles <javierrobles@chromium.org>
Commit-Queue: David Jean <djean@chromium.org>
Cr-Commit-Position: refs/heads/master@{#610637}

ios/chrome/browser/ui/autofill/manual_fill/BUILD.gn

@@ -88,6 +88,8 @@ source_set("manual_fill_ui") {
     "manual_fill_address_cell.mm",
     "manual_fill_card_cell.h",
     "manual_fill_card_cell.mm",
+    "manual_fill_cell_button.h",
+    "manual_fill_cell_button.mm",
     "manual_fill_cell_utils.h",
     "manual_fill_cell_utils.mm",
     "manual_fill_content_delegate.h",

ios/chrome/browser/ui/autofill/manual_fill/manual_fill_address_cell.mm

@@ -48,18 +48,12 @@
 namespace {
 
 // Left and right margins of the cell content.
-static const CGFloat sideMargins = 16;
-
-// Margin left and right of multiple buttons on same line.
-static const CGFloat InnerMarginWidth = 16.0;
+static const CGFloat SideMargins = 16;
 
 }  // namespace
 
 @interface ManualFillAddressCell ()
 
-// The separator gray line.
-@property(nonatomic, strong) UIView* grayLine;
-
 // The label with the line1 -- line2.
 @property(nonatomic, strong) UILabel* addressLabel;
 
@@ -158,6 +152,7 @@ static const CGFloat InnerMarginWidth = 16.0;
   self.delegate = delegate;
 
   NSMutableArray<UIView*>* verticalLeadViews = [[NSMutableArray alloc] init];
+  UIView* guide = self.contentView;
 
   // Top label, summary of line 1 and 2.
   NSMutableAttributedString* attributedString =
@@ -232,8 +227,8 @@ static const CGFloat InnerMarginWidth = 16.0;
     self.lastNameButton.hidden = YES;
   }
 
-  self.nameLineConstraints = HorizontalConstraintsForViewsOnGuideWithShift(
-      nameLineViews, self.grayLine, -InnerMarginWidth);
+  self.nameLineConstraints =
+      HorizontalConstraintsForViewsOnGuideWithShift(nameLineViews, guide, 0);
 
   if (nameLineViews.count) {
     [verticalLeadViews addObject:nameLineViews.firstObject];
@@ -283,8 +278,8 @@ static const CGFloat InnerMarginWidth = 16.0;
     self.cityButton.hidden = YES;
   }
 
-  self.zipCityLineConstraints = HorizontalConstraintsForViewsOnGuideWithShift(
-      zipCityLineViews, self.grayLine, -InnerMarginWidth);
+  self.zipCityLineConstraints =
+      HorizontalConstraintsForViewsOnGuideWithShift(zipCityLineViews, guide, 0);
   if (zipCityLineViews.count) {
     [verticalLeadViews addObject:zipCityLineViews.firstObject];
   }
@@ -317,8 +312,8 @@ static const CGFloat InnerMarginWidth = 16.0;
   }
 
   self.stateCountryLineConstraints =
-      HorizontalConstraintsForViewsOnGuideWithShift(
-          stateCountryLineViews, self.grayLine, -InnerMarginWidth);
+      HorizontalConstraintsForViewsOnGuideWithShift(stateCountryLineViews,
+                                                    guide, 0);
   if (stateCountryLineViews.count) {
     [verticalLeadViews addObject:stateCountryLineViews.firstObject];
   }
@@ -333,21 +328,21 @@ static const CGFloat InnerMarginWidth = 16.0;
 - (void)createViewHierarchy {
   self.selectionStyle = UITableViewCellSelectionStyleNone;
 
-  self.grayLine = [[UIView alloc] init];
-  self.grayLine.backgroundColor = [UIColor colorWithWhite:0.88 alpha:1];
-  self.grayLine.translatesAutoresizingMaskIntoConstraints = NO;
-  [self.contentView addSubview:self.grayLine];
+  UIView* grayLine = [[UIView alloc] init];
+  grayLine.backgroundColor = [UIColor colorWithWhite:0.88 alpha:1];
+  grayLine.translatesAutoresizingMaskIntoConstraints = NO;
+  [self.contentView addSubview:grayLine];
+
+  UIView* guide = self.contentView;
 
   self.addressLabel = CreateLabel();
   [self.contentView addSubview:self.addressLabel];
-  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.addressLabel ],
-                                                self.grayLine, 0);
+  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.addressLabel ], guide,
+                                                SideMargins);
 
   self.firstNameButton = CreateButtonWithSelectorAndTarget(
       @selector(userDidTapAddressInfo:), self);
   [self.contentView addSubview:self.firstNameButton];
-  HorizontalConstraintsMarginForButtonWithWidth(self.firstNameButton,
-                                                InnerMarginWidth);
 
   self.middleNameSeparatorLabel = CreateLabel();
   self.middleNameSeparatorLabel.text = @"·";
@@ -356,8 +351,6 @@ static const CGFloat InnerMarginWidth = 16.0;
   self.middleNameButton = CreateButtonWithSelectorAndTarget(
       @selector(userDidTapAddressInfo:), self);
   [self.contentView addSubview:self.middleNameButton];
-  HorizontalConstraintsMarginForButtonWithWidth(self.middleNameButton,
-                                                InnerMarginWidth);
 
   self.lastNameSeparatorLabel = CreateLabel();
   self.lastNameSeparatorLabel.text = @"·";
@@ -366,8 +359,6 @@ static const CGFloat InnerMarginWidth = 16.0;
   self.lastNameButton = CreateButtonWithSelectorAndTarget(
       @selector(userDidTapAddressInfo:), self);
   [self.contentView addSubview:self.lastNameButton];
-  HorizontalConstraintsMarginForButtonWithWidth(self.lastNameButton,
-                                                InnerMarginWidth);
 
   SyncBaselinesForViewsOnView(
       @[
@@ -379,20 +370,18 @@ static const CGFloat InnerMarginWidth = 16.0;
   self.line1Button = CreateButtonWithSelectorAndTarget(
       @selector(userDidTapAddressInfo:), self);
   [self.contentView addSubview:self.line1Button];
-  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.line1Button ],
-                                                self.grayLine, 0);
+  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.line1Button ], guide,
+                                                0);
 
   self.line2Button = CreateButtonWithSelectorAndTarget(
       @selector(userDidTapAddressInfo:), self);
   [self.contentView addSubview:self.line2Button];
-  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.line2Button ],
-                                                self.grayLine, 0);
+  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.line2Button ], guide,
+                                                0);
 
   self.zipButton = CreateButtonWithSelectorAndTarget(
       @selector(userDidTapAddressInfo:), self);
   [self.contentView addSubview:self.zipButton];
-  HorizontalConstraintsMarginForButtonWithWidth(self.zipButton,
-                                                InnerMarginWidth);
 
   self.citySeparatorLabel = CreateLabel();
   self.citySeparatorLabel.text = @"·";
@@ -401,8 +390,6 @@ static const CGFloat InnerMarginWidth = 16.0;
   self.cityButton = CreateButtonWithSelectorAndTarget(
       @selector(userDidTapAddressInfo:), self);
   [self.contentView addSubview:self.cityButton];
-  HorizontalConstraintsMarginForButtonWithWidth(self.cityButton,
-                                                InnerMarginWidth);
 
   SyncBaselinesForViewsOnView(@[ self.citySeparatorLabel, self.cityButton ],
                               self.zipButton);
@@ -410,8 +397,6 @@ static const CGFloat InnerMarginWidth = 16.0;
   self.stateButton = CreateButtonWithSelectorAndTarget(
       @selector(userDidTapAddressInfo:), self);
   [self.contentView addSubview:self.stateButton];
-  HorizontalConstraintsMarginForButtonWithWidth(self.stateButton,
-                                                InnerMarginWidth);
 
   self.countrySeparatorLabel = CreateLabel();
   self.countrySeparatorLabel.text = @"·";
@@ -420,8 +405,6 @@ static const CGFloat InnerMarginWidth = 16.0;
   self.countryButton = CreateButtonWithSelectorAndTarget(
       @selector(userDidTapAddressInfo:), self);
   [self.contentView addSubview:self.countryButton];
-  HorizontalConstraintsMarginForButtonWithWidth(self.countryButton,
-                                                InnerMarginWidth);
 
   SyncBaselinesForViewsOnView(
       @[ self.countrySeparatorLabel, self.countryButton ], self.stateButton);
@@ -435,16 +418,15 @@ static const CGFloat InnerMarginWidth = 16.0;
 
   [NSLayoutConstraint activateConstraints:@[
     // Common vertical constraints.
-    [self.grayLine.bottomAnchor
+    [grayLine.bottomAnchor
         constraintEqualToAnchor:self.contentView.bottomAnchor],
-    [self.grayLine.heightAnchor constraintEqualToConstant:1],
+    [grayLine.heightAnchor constraintEqualToConstant:1],
 
     // Horizontal constraints.
-    [self.grayLine.leadingAnchor constraintEqualToAnchor:safeArea.leadingAnchor
-                                                constant:sideMargins],
-    [safeArea.trailingAnchor
-        constraintEqualToAnchor:self.grayLine.trailingAnchor
-                       constant:sideMargins],
+    [grayLine.leadingAnchor constraintEqualToAnchor:safeArea.leadingAnchor
+                                           constant:SideMargins],
+    [safeArea.trailingAnchor constraintEqualToAnchor:grayLine.trailingAnchor
+                                            constant:SideMargins],
   ]];
 }
 

ios/chrome/browser/ui/autofill/manual_fill/manual_fill_card_cell.mm

@@ -66,10 +66,7 @@
 namespace {
 
 // Left and right margins of the cell content.
-static const CGFloat sideMargins = 16;
-
-// Margin left and right of expiration buttons.
-static const CGFloat ExpirationMarginWidth = 16.0;
+static const CGFloat SideMargins = 16;
 
 }  // namespace
 
@@ -167,33 +164,31 @@ static const CGFloat ExpirationMarginWidth = 16.0;
   grayLine.translatesAutoresizingMaskIntoConstraints = NO;
   [self.contentView addSubview:grayLine];
 
+  UIView* guide = self.contentView;
+
   self.cardLabel = CreateLabel();
   [self.contentView addSubview:self.cardLabel];
-  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.cardLabel ], grayLine,
-                                                0);
+  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.cardLabel ], guide,
+                                                SideMargins);
 
   self.cardNumberButton =
       CreateButtonWithSelectorAndTarget(@selector(userDidTapCardNumber:), self);
   [self.contentView addSubview:self.cardNumberButton];
   HorizontalConstraintsForViewsOnGuideWithShift(@[ self.cardNumberButton ],
-                                                grayLine, 0);
+                                                guide, 0);
 
   self.cardholderButton =
       CreateButtonWithSelectorAndTarget(@selector(userDidTapCardInfo:), self);
   [self.contentView addSubview:self.cardholderButton];
   HorizontalConstraintsForViewsOnGuideWithShift(@[ self.cardholderButton ],
-                                                grayLine, 0);
+                                                guide, 0);
 
   // Expiration line.
   self.expirationMonthButton =
       CreateButtonWithSelectorAndTarget(@selector(userDidTapCardInfo:), self);
-  HorizontalConstraintsMarginForButtonWithWidth(self.expirationMonthButton,
-                                                ExpirationMarginWidth);
   [self.contentView addSubview:self.expirationMonthButton];
   self.expirationYearButton =
       CreateButtonWithSelectorAndTarget(@selector(userDidTapCardInfo:), self);
-  HorizontalConstraintsMarginForButtonWithWidth(self.expirationYearButton,
-                                                ExpirationMarginWidth);
   [self.contentView addSubview:self.expirationYearButton];
   UILabel* expirationSeparatorLabel = CreateLabel();
   expirationSeparatorLabel.text = @"/";
@@ -206,7 +201,7 @@ static const CGFloat ExpirationMarginWidth = 16.0;
         self.expirationMonthButton, expirationSeparatorLabel,
         self.expirationYearButton
       ],
-      grayLine, -ExpirationMarginWidth);
+      guide, 0);
 
   VerticalConstraintsSpacingForViewsInContainer(
       @[
@@ -225,9 +220,9 @@ static const CGFloat ExpirationMarginWidth = 16.0;
 
     // Horizontal constraints.
     [grayLine.leadingAnchor constraintEqualToAnchor:safeArea.leadingAnchor
-                                           constant:sideMargins],
+                                           constant:SideMargins],
     [safeArea.trailingAnchor constraintEqualToAnchor:grayLine.trailingAnchor
-                                            constant:sideMargins],
+                                            constant:SideMargins],
   ]];
 }
 

ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_button.h

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_MANUAL_FILL_CELL_BUTTON_H_
+#define IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_MANUAL_FILL_CELL_BUTTON_H_
+
+#import <UIKit/UIKit.h>
+
+// Buttons with a darker background in highlighted state.
+@interface ManualFillCellButton : UIButton
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_MANUAL_FILL_CELL_BUTTON_H_

ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_button.mm

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#import "ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_button.h"
+
+#import "ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+@implementation ManualFillCellButton
+
+- (void)setHighlighted:(BOOL)highlighted {
+  [super setHighlighted:highlighted];
+  auto animations = ^{
+    CGFloat alpha = highlighted ? 0.07 : 0;
+    self.backgroundColor = [UIColor colorWithWhite:0 alpha:alpha];
+  };
+  [UIView animateWithDuration:0.1
+                        delay:0
+                      options:UIViewAnimationOptionBeginFromCurrentState
+                   animations:animations
+                   completion:nil];
+}
+
+@end

ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.h

@@ -11,11 +11,6 @@
 // |target|.
 UIButton* CreateButtonWithSelectorAndTarget(SEL action, id target);
 
-// Creates horizontal constraints for given |button| based on given |width| on
-// both sides.
-void HorizontalConstraintsMarginForButtonWithWidth(UIButton* button,
-                                                   CGFloat width);
-
 // Sets vertical constraints on firstBaselineAnchor for the button or label rows
 // in |views| inside |container| starting at its topAnchor. Returns the applied
 // constrainst to allow caller to deactivate them later.

ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.mm

@@ -6,6 +6,7 @@
 
 #include "base/strings/sys_string_conversions.h"
 #include "base/strings/utf_string_conversions.h"
+#import "ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_button.h"
 #import "ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.h"
 #import "ios/chrome/common/ui_util/constraints_ui_util.h"
 #include "ios/chrome/grit/ios_strings.h"
@@ -26,34 +27,33 @@ static const CGFloat MiddleSystemSpacingMultiplier = 1.83;
 // The multiplier for the base system spacing at the bottom margin.
 static const CGFloat BottomSystemSpacingMultiplier = 2.26;
 
+// Top and bottom margins for buttons.
+static const CGFloat ButtonVerticalMargin = 12;
+
+// Left and right margins of the cell content and buttons.
+static const CGFloat ButtonHorizontalMargin = 16;
+
 }  // namespace
 
 UIButton* CreateButtonWithSelectorAndTarget(SEL action, id target) {
-  UIButton* button = [UIButton buttonWithType:UIButtonTypeSystem];
+  UIButton* button = [ManualFillCellButton buttonWithType:UIButtonTypeCustom];
   [button setTitleColor:UIColor.cr_manualFillTintColor
                forState:UIControlStateNormal];
   button.translatesAutoresizingMaskIntoConstraints = NO;
   button.titleLabel.font =
       [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
   button.titleLabel.adjustsFontForContentSizeCategory = YES;
+  button.contentHorizontalAlignment =
+      UIControlContentHorizontalAlignmentLeading;
   [button addTarget:target
                 action:action
       forControlEvents:UIControlEventTouchUpInside];
+  button.contentEdgeInsets =
+      UIEdgeInsetsMake(ButtonVerticalMargin, ButtonHorizontalMargin,
+                       ButtonVerticalMargin, ButtonHorizontalMargin);
   return button;
 }
 
-void HorizontalConstraintsMarginForButtonWithWidth(UIButton* button,
-                                                   CGFloat width) {
-  [NSLayoutConstraint activateConstraints:@[
-    [button.leadingAnchor
-        constraintEqualToAnchor:button.titleLabel.leadingAnchor
-                       constant:-width],
-    [button.trailingAnchor
-        constraintEqualToAnchor:button.titleLabel.trailingAnchor
-                       constant:width],
-  ]];
-}
-
 NSArray<NSLayoutConstraint*>* VerticalConstraintsSpacingForViewsInContainer(
     NSArray<UIView*>* views,
     UIView* container) {
@@ -91,14 +91,27 @@ NSArray<NSLayoutConstraint*>* HorizontalConstraintsForViewsOnGuideWithShift(
     [horizontalConstraints
         addObject:[view.leadingAnchor constraintEqualToAnchor:previousAnchor
                                                      constant:shift]];
+    [view setContentCompressionResistancePriority:UILayoutPriorityDefaultLow
+                                          forAxis:
+                                              UILayoutConstraintAxisHorizontal];
+    [view setContentHuggingPriority:UILayoutPriorityDefaultHigh
+                            forAxis:UILayoutConstraintAxisHorizontal];
     previousAnchor = view.trailingAnchor;
     shift = 0;
   }
   if (views.count > 0) {
     [horizontalConstraints
         addObject:[views.lastObject.trailingAnchor
-                      constraintLessThanOrEqualToAnchor:guide.trailingAnchor
-                                               constant:shift]];
+                      constraintEqualToAnchor:guide.trailingAnchor
+                                     constant:shift]];
+    // Give all remaining space to the last button, as per UX.
+    [views.lastObject
+        setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh
+                                        forAxis:
+                                            UILayoutConstraintAxisHorizontal];
+    [views.lastObject
+        setContentHuggingPriority:UILayoutPriorityDefaultLow
+                          forAxis:UILayoutConstraintAxisHorizontal];
   }
   [NSLayoutConstraint activateConstraints:horizontalConstraints];
   return horizontalConstraints;

ios/chrome/browser/ui/autofill/manual_fill/manual_fill_password_cell.mm

@@ -50,7 +50,7 @@
 
 namespace {
 // Left and right margins of the cell content.
-static const CGFloat sideMargins = 16;
+static const CGFloat SideMargins = 16;
 }  // namespace
 
 @interface ManualFillPasswordCell ()
@@ -142,24 +142,26 @@ static const CGFloat sideMargins = 16;
   grayLine.translatesAutoresizingMaskIntoConstraints = NO;
   [self.contentView addSubview:grayLine];
 
+  UIView* guide = self.contentView;
+
   self.siteNameLabel = CreateLabel();
   self.siteNameLabel.translatesAutoresizingMaskIntoConstraints = NO;
   self.siteNameLabel.adjustsFontForContentSizeCategory = YES;
   [self.contentView addSubview:self.siteNameLabel];
-  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.siteNameLabel ],
-                                                grayLine, 0);
+  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.siteNameLabel ], guide,
+                                                SideMargins);
 
   self.usernameButton = CreateButtonWithSelectorAndTarget(
       @selector(userDidTapUsernameButton:), self);
   [self.contentView addSubview:self.usernameButton];
-  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.usernameButton ],
-                                                grayLine, 0);
+  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.usernameButton ], guide,
+                                                0);
 
   self.passwordButton = CreateButtonWithSelectorAndTarget(
       @selector(userDidTapPasswordButton:), self);
   [self.contentView addSubview:self.passwordButton];
-  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.passwordButton ],
-                                                grayLine, 0);
+  HorizontalConstraintsForViewsOnGuideWithShift(@[ self.passwordButton ], guide,
+                                                0);
 
   VerticalConstraintsSpacingForViewsInContainer(
       @[ self.siteNameLabel, self.usernameButton, self.passwordButton ],
@@ -175,9 +177,9 @@ static const CGFloat sideMargins = 16;
 
     // Horizontal constraints.
     [grayLine.leadingAnchor constraintEqualToAnchor:safeArea.leadingAnchor
-                                           constant:sideMargins],
+                                           constant:SideMargins],
     [safeArea.trailingAnchor constraintEqualToAnchor:grayLine.trailingAnchor
-                                            constant:sideMargins],
+                                            constant:SideMargins],
   ]];
 }