[iOS][AF] Update icons and new design

This CL updates the accessory bar to the newest icons and design.
Currently behind the AutofillManualFallback feature flag.

[Current: https://drive.google.com/file/d/1x60dQkNt0B88Srlo0v-vNyNXHDs_nu_F/view?usp=sharing]
[New: https://drive.google.com/file/d/1Sf_WMeI83g-viW6x065hZXO3PUXcgBj0/view?usp=sharing]

Bug: 845472
Cq-Include-Trybots: luci.chromium.try:ios-simulator-cronet;luci.chromium.try:ios-simulator-full-configs
Change-Id: I4a97a254a1e8c9918c1db23ddfcfb93faf734aec
Reviewed-on: https://chromium-review.googlesource.com/c/1289679
Commit-Queue: Javier Ernesto Flores Robles <javierrobles@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#600984}

ios/chrome/browser/autofill/form_input_accessory_view.mm

@@ -8,7 +8,9 @@
 
 #include "base/i18n/rtl.h"
 #include "base/logging.h"
+#include "components/autofill/core/common/autofill_features.h"
 #import "ios/chrome/browser/autofill/form_input_accessory_view_delegate.h"
+#import "ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.h"
 #import "ios/chrome/browser/ui/image_util/image_util.h"
 #include "ios/chrome/browser/ui/ui_util.h"
 #import "ios/chrome/common/ui_util/constraints_ui_util.h"
@@ -33,6 +35,24 @@ const CGFloat kNavigationAreaSeparatorShadowWidth = 2;
 // The width of the navigation area / custom view separator asset.
 const CGFloat kNavigationAreaSeparatorWidth = 1;
 
+// The width for the white gradient UIImageView.
+constexpr CGFloat ManualFillGradientWidth = 44;
+
+// The margin for the white gradient UIImageView.
+constexpr CGFloat ManualFillGradientMargin = 14;
+
+// The spacing between the items in the navigation view.
+constexpr CGFloat ManualFillNavigationItemSpacing = 4;
+
+// The left content inset for the close button.
+constexpr CGFloat ManualFillCloseButtonLeftInset = 7;
+
+// The right content inset for the close button.
+constexpr CGFloat ManualFillCloseButtonRightInset = 15;
+
+// The height for the top and bottom sepparator lines.
+constexpr CGFloat ManualFillSeparatorHeight = 0.5;
+
 }  // namespace
 
 @interface FormInputAccessoryView ()
@@ -81,39 +101,86 @@ const CGFloat kNavigationAreaSeparatorWidth = 1;
   UIView* customViewContainer = [[UIView alloc] init];
   customViewContainer.translatesAutoresizingMaskIntoConstraints = NO;
   [self addSubview:customViewContainer];
-  UIView* navView = [[UIView alloc] init];
-  navView.translatesAutoresizingMaskIntoConstraints = NO;
-  [self addSubview:navView];
 
   [customViewContainer addSubview:customView];
   customView.translatesAutoresizingMaskIntoConstraints = NO;
   AddSameConstraints(customViewContainer, customView);
 
-  UIView* navViewContent =
+  UIView* navigationView =
       [self viewForNavigationButtonsUsingDelegate:delegate];
-  [navView addSubview:navViewContent];
+  navigationView.translatesAutoresizingMaskIntoConstraints = NO;
+  [self addSubview:navigationView];
+
+  id<LayoutGuideProvider> layoutGuide = SafeAreaLayoutGuideForView(self);
+  [NSLayoutConstraint activateConstraints:@[
+    [customViewContainer.topAnchor
+        constraintEqualToAnchor:layoutGuide.topAnchor],
+    [customViewContainer.bottomAnchor
+        constraintEqualToAnchor:layoutGuide.bottomAnchor],
+    [customViewContainer.leadingAnchor
+        constraintEqualToAnchor:layoutGuide.leadingAnchor],
+    [navigationView.trailingAnchor
+        constraintEqualToAnchor:layoutGuide.trailingAnchor],
+    [navigationView.topAnchor constraintEqualToAnchor:layoutGuide.topAnchor],
+    [navigationView.bottomAnchor
+        constraintEqualToAnchor:layoutGuide.bottomAnchor],
+  ]];
+
+  if (autofill::features::IsPasswordManualFallbackEnabled()) {
+    self.backgroundColor = UIColor.whiteColor;
+
+    UIImage* gradientImage = [[UIImage imageNamed:@"mf_gradient"]
+        resizableImageWithCapInsets:UIEdgeInsetsZero
+                       resizingMode:UIImageResizingModeStretch];
+    UIImageView* gradientView =
+        [[UIImageView alloc] initWithImage:gradientImage];
+    gradientView.translatesAutoresizingMaskIntoConstraints = NO;
+    [self insertSubview:gradientView belowSubview:navigationView];
+
+    UIView* topGrayLine = [[UIView alloc] init];
+    topGrayLine.backgroundColor = UIColor.cr_manualFillSeparatorColor;
+    topGrayLine.translatesAutoresizingMaskIntoConstraints = NO;
+    [self addSubview:topGrayLine];
+
+    UIView* bottomGrayLine = [[UIView alloc] init];
+    bottomGrayLine.backgroundColor = UIColor.cr_manualFillSeparatorColor;
+    bottomGrayLine.translatesAutoresizingMaskIntoConstraints = NO;
+    [self addSubview:bottomGrayLine];
 
-    AddSameConstraints(navView, navViewContent);
-
-    [[self class] addBackgroundImageInView:self
-                             withImageName:@"autofill_keyboard_background"];
-
-    id<LayoutGuideProvider> layoutGuide = SafeAreaLayoutGuideForView(self);
     [NSLayoutConstraint activateConstraints:@[
-      [customViewContainer.topAnchor
-          constraintEqualToAnchor:layoutGuide.topAnchor],
-      [customViewContainer.bottomAnchor
-          constraintEqualToAnchor:layoutGuide.bottomAnchor],
-      [customViewContainer.leadingAnchor
-          constraintEqualToAnchor:layoutGuide.leadingAnchor],
+      [topGrayLine.topAnchor constraintEqualToAnchor:self.topAnchor],
+      [topGrayLine.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
+      [topGrayLine.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
+      [topGrayLine.heightAnchor
+          constraintEqualToConstant:ManualFillSeparatorHeight],
+
+      [bottomGrayLine.bottomAnchor constraintEqualToAnchor:self.bottomAnchor],
+      [bottomGrayLine.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
+      [bottomGrayLine.trailingAnchor
+          constraintEqualToAnchor:self.trailingAnchor],
+      [bottomGrayLine.heightAnchor
+          constraintEqualToConstant:ManualFillSeparatorHeight],
+
+      [gradientView.topAnchor constraintEqualToAnchor:navigationView.topAnchor],
+      [gradientView.bottomAnchor
+          constraintEqualToAnchor:navigationView.bottomAnchor],
+      [gradientView.widthAnchor
+          constraintEqualToConstant:ManualFillGradientWidth],
+      [gradientView.trailingAnchor
+          constraintEqualToAnchor:navigationView.leadingAnchor
+                         constant:ManualFillGradientMargin],
+
       [customViewContainer.trailingAnchor
-          constraintEqualToAnchor:navView.leadingAnchor
-                         constant:kNavigationAreaSeparatorShadowWidth],
-      [navView.trailingAnchor
-          constraintEqualToAnchor:layoutGuide.trailingAnchor],
-      [navView.topAnchor constraintEqualToAnchor:layoutGuide.topAnchor],
-      [navView.bottomAnchor constraintEqualToAnchor:layoutGuide.bottomAnchor],
+          constraintEqualToAnchor:navigationView.leadingAnchor],
     ]];
+  } else {
+    [[self class] addBackgroundImageInView:self
+                             withImageName:@"autofill_keyboard_background"];
+    [customViewContainer.trailingAnchor
+        constraintEqualToAnchor:navigationView.leadingAnchor
+                       constant:kNavigationAreaSeparatorShadowWidth]
+        .active = YES;
+  }
 }
 
 #pragma mark -
@@ -133,6 +200,56 @@ UIImage* ButtonImage(NSString* name) {
 
 - (UIView*)viewForNavigationButtonsUsingDelegate:
     (id<FormInputAccessoryViewDelegate>)delegate {
+  if (autofill::features::IsPasswordManualFallbackEnabled()) {
+    UIButton* previousButton = [UIButton buttonWithType:UIButtonTypeSystem];
+    [previousButton setImage:[UIImage imageNamed:@"mf_arrow_up"]
+                    forState:UIControlStateNormal];
+    previousButton.tintColor = UIColor.cr_manualFillTintColor;
+    [previousButton addTarget:delegate
+                       action:@selector(selectPreviousElementWithButtonPress)
+             forControlEvents:UIControlEventTouchUpInside];
+    previousButton.enabled = NO;
+    NSString* previousButtonAccessibilityLabel =
+        l10n_util::GetNSString(IDS_IOS_AUTOFILL_ACCNAME_PREVIOUS_FIELD);
+    [previousButton setAccessibilityLabel:previousButtonAccessibilityLabel];
+
+    UIButton* nextButton = [UIButton buttonWithType:UIButtonTypeSystem];
+    [nextButton setImage:[UIImage imageNamed:@"mf_arrow_down"]
+                forState:UIControlStateNormal];
+    nextButton.tintColor = UIColor.cr_manualFillTintColor;
+    [nextButton addTarget:delegate
+                   action:@selector(selectNextElementWithButtonPress)
+         forControlEvents:UIControlEventTouchUpInside];
+    nextButton.enabled = NO;
+    NSString* nextButtonAccessibilityLabel =
+        l10n_util::GetNSString(IDS_IOS_AUTOFILL_ACCNAME_NEXT_FIELD);
+    [nextButton setAccessibilityLabel:nextButtonAccessibilityLabel];
+
+    UIButton* closeButton = [UIButton buttonWithType:UIButtonTypeSystem];
+    NSString* title = l10n_util::GetNSString(IDS_IOS_AUTOFILL_INPUT_BAR_DONE);
+    [closeButton setTitle:title forState:UIControlStateNormal];
+    closeButton.tintColor = UIColor.cr_manualFillTintColor;
+    [closeButton addTarget:delegate
+                    action:@selector(closeKeyboardWithButtonPress)
+          forControlEvents:UIControlEventTouchUpInside];
+    closeButton.contentEdgeInsets = UIEdgeInsetsMake(
+        0, ManualFillCloseButtonLeftInset, 0, ManualFillCloseButtonRightInset);
+    NSString* closeButtonAccessibilityLabel =
+        l10n_util::GetNSString(IDS_IOS_AUTOFILL_ACCNAME_HIDE_KEYBOARD);
+    [closeButton setAccessibilityLabel:closeButtonAccessibilityLabel];
+
+    [delegate fetchPreviousAndNextElementsPresenceWithCompletionHandler:^(
+                  BOOL hasPreviousElement, BOOL hasNextElement) {
+      previousButton.enabled = hasPreviousElement;
+      nextButton.enabled = hasNextElement;
+    }];
+
+    UIStackView* navigationView = [[UIStackView alloc]
+        initWithArrangedSubviews:@[ previousButton, nextButton, closeButton ]];
+    navigationView.spacing = ManualFillNavigationItemSpacing;
+    return navigationView;
+  }
+
   UIView* navView = [[UIView alloc] init];
   navView.translatesAutoresizingMaskIntoConstraints = NO;
 

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

@@ -69,14 +69,16 @@ source_set("manual_fill_ui") {
     "//ios/chrome/app/strings:ios_strings_grit",
     "//ios/chrome/browser/autofill/manual_fill:manual_fill",
     "//ios/chrome/browser/ui/autofill/manual_fill/resources:addresses",
+    "//ios/chrome/browser/ui/autofill/manual_fill/resources:mf_arrow_down",
+    "//ios/chrome/browser/ui/autofill/manual_fill/resources:mf_arrow_up",
+    "//ios/chrome/browser/ui/autofill/manual_fill/resources:mf_gradient",
+    "//ios/chrome/browser/ui/autofill/manual_fill/resources:mf_keyboard",
     "//ios/chrome/browser/ui/list_model:list_model",
     "//ios/chrome/browser/ui/table_view:styler",
     "//ios/chrome/browser/ui/table_view:table_view",
     "//ios/chrome/common/ui_util:ui_util",
     "//net:net",
-    "//third_party/material_design_icons:ic_account_circle",
     "//third_party/material_design_icons:ic_credit_card",
-    "//third_party/material_design_icons:ic_keyboard",
     "//third_party/material_design_icons:ic_vpn_key",
     "//ui/base:base",
   ]

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

@@ -26,6 +26,16 @@ NSString* const AccessoryCreditCardAccessibilityIdentifier =
 
 }  // namespace manual_fill
 
+namespace {
+
+// The inset on the left before the icons start.
+constexpr CGFloat ManualFillIconsLeftInset = 10;
+
+// The inset on the right after the icons end.
+constexpr CGFloat ManualFillIconsRightInset = 24;
+
+}  // namespace
+
 static NSTimeInterval MFAnimationDuration = 0.20;
 
 @interface ManualFillAccessoryViewController ()
@@ -67,7 +77,7 @@ static NSTimeInterval MFAnimationDuration = 0.20;
 
   if (!IsIPadIdiom()) {
     self.keyboardButton = [UIButton buttonWithType:UIButtonTypeSystem];
-    UIImage* keyboardImage = [UIImage imageNamed:@"ic_keyboard"];
+    UIImage* keyboardImage = [UIImage imageNamed:@"mf_keyboard"];
     [self.keyboardButton setImage:keyboardImage forState:UIControlStateNormal];
     self.keyboardButton.tintColor = tintColor;
     self.keyboardButton.translatesAutoresizingMaskIntoConstraints = NO;
@@ -132,9 +142,10 @@ static NSTimeInterval MFAnimationDuration = 0.20;
     // Horizontal constraints.
     [stackView.leadingAnchor
         constraintEqualToAnchor:safeAreaLayoutGuide.leadingAnchor
-                       constant:10],
-    [stackView.trailingAnchor
-        constraintEqualToAnchor:safeAreaLayoutGuide.trailingAnchor],
+                       constant:ManualFillIconsLeftInset],
+    [safeAreaLayoutGuide.trailingAnchor
+        constraintEqualToAnchor:stackView.trailingAnchor
+                       constant:ManualFillIconsRightInset],
   ]];
   self.keyboardButton.hidden = YES;
   self.keyboardButton.alpha = 0.0;

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

@@ -12,3 +12,37 @@ imageset("addresses") {
     "addresses.imageset/addresses@3x.png",
   ]
 }
+
+imageset("mf_arrow_down") {
+  sources = [
+    "mf_arrow_down.imageset/Contents.json",
+    "mf_arrow_down.imageset/mf_arrow_down.png",
+    "mf_arrow_down.imageset/mf_arrow_down@2x.png",
+    "mf_arrow_down.imageset/mf_arrow_down@3x.png",
+  ]
+}
+
+imageset("mf_arrow_up") {
+  sources = [
+    "mf_arrow_up.imageset/Contents.json",
+    "mf_arrow_up.imageset/mf_arrow_up.png",
+    "mf_arrow_up.imageset/mf_arrow_up@2x.png",
+    "mf_arrow_up.imageset/mf_arrow_up@3x.png",
+  ]
+}
+
+imageset("mf_gradient") {
+  sources = [
+    "mf_gradient.imageset/Contents.json",
+    "mf_gradient.imageset/mf_gradient.png",
+  ]
+}
+
+imageset("mf_keyboard") {
+  sources = [
+    "mf_keyboard.imageset/Contents.json",
+    "mf_keyboard.imageset/mf_keyboard.png",
+    "mf_keyboard.imageset/mf_keyboard@2x.png",
+    "mf_keyboard.imageset/mf_keyboard@3x.png",
+  ]
+}

ios/chrome/browser/ui/autofill/manual_fill/resources/mf_arrow_down.imageset/Contents.json

+{
+    "images": [
+        {
+            "idiom": "universal",
+            "scale": "1x",
+            "filename": "mf_arrow_down.png"
+        },
+        {
+            "idiom": "universal",
+            "scale": "2x",
+            "filename": "mf_arrow_down@2x.png"
+        },
+        {
+            "idiom": "universal",
+            "scale": "3x",
+            "filename": "mf_arrow_down@3x.png"
+        }
+    ],
+    "info": {
+        "version": 1,
+        "author": "xcode"
+    }
+}

ios/chrome/browser/ui/autofill/manual_fill/resources/mf_arrow_up.imageset/Contents.json

+{
+    "images": [
+        {
+            "idiom": "universal",
+            "scale": "1x",
+            "filename": "mf_arrow_up.png"
+        },
+        {
+            "idiom": "universal",
+            "scale": "2x",
+            "filename": "mf_arrow_up@2x.png"
+        },
+        {
+            "idiom": "universal",
+            "scale": "3x",
+            "filename": "mf_arrow_up@3x.png"
+        }
+    ],
+    "info": {
+        "version": 1,
+        "author": "xcode"
+    }
+}

ios/chrome/browser/ui/autofill/manual_fill/resources/mf_gradient.imageset/Contents.json

+{
+    "images": [
+        {
+            "idiom": "universal",
+            "scale": "1x",
+            "filename": "mf_gradient.png"
+        }
+    ],
+    "info": {
+        "version": 1,
+        "author": "xcode"
+    }
+}

ios/chrome/browser/ui/autofill/manual_fill/resources/mf_keyboard.imageset/Contents.json

+{
+    "images": [
+        {
+            "idiom": "universal",
+            "scale": "1x",
+            "filename": "mf_keyboard.png"
+        },
+        {
+            "idiom": "universal",
+            "scale": "2x",
+            "filename": "mf_keyboard@2x.png"
+        },
+        {
+            "idiom": "universal",
+            "scale": "3x",
+            "filename": "mf_keyboard@3x.png"
+        }
+    ],
+    "info": {
+        "version": 1,
+        "author": "xcode"
+    }
+}

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

@@ -8,8 +8,13 @@
 #import <UIKit/UIKit.h>
 
 @interface UIColor (ManualFill)
+
 // Color to set in interactable elements for manual fill (0.1, 0.45, 0.91 RGB).
 @property(class, nonatomic, readonly) UIColor* cr_manualFillTintColor;
+
+// Color for the line separators in manual fill (0.66, 0.66, 0.66 RGB).
+@property(class, nonatomic, readonly) UIColor* cr_manualFillSeparatorColor;
+
 @end
 
 #endif  // IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_UICOLOR_MANUALFILL_H_

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

@@ -16,4 +16,12 @@
   return color;
 }
 
++ (UIColor*)cr_manualFillSeparatorColor {
+  static UIColor* color = [UIColor colorWithRed:188 / 255.0
+                                          green:187 / 255.0
+                                           blue:193 / 255.0
+                                          alpha:1 / 1.0];
+  return color;
+}
+
 @end