[iOS][MF] Update keyboard accessory view

Adds the new icon for addresses and for keyboard.

Bug: 845472
Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet
Change-Id: I775b06b39a8f797c16669511ab8aa057bdd14133
Reviewed-on: https://chromium-review.googlesource.com/1183223Reviewed-by: Sylvain Defresne <sdefresne@chromium.org>
Commit-Queue: Javier Ernesto Flores Robles <javierrobles@chromium.org>
Cr-Commit-Position: refs/heads/master@{#585009}

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

@@ -16,9 +16,6 @@ source_set("manual_fill") {
     "//ios/chrome/browser/autofill/manual_fill:manual_fill",
     "//ios/chrome/browser/ui/autofill/manual_fill:manual_fill_ui",
     "//net:net",
-    "//third_party/material_design_icons:ic_account_circle",
-    "//third_party/material_design_icons:ic_credit_card",
-    "//third_party/material_design_icons:ic_vpn_key",
     "//url:url",
   ]
   libs = [ "UIKit.framework" ]
@@ -29,9 +26,15 @@ source_set("manual_fill_ui") {
   sources = [
     "credential.h",
     "credential.mm",
+    "manual_fill_accessory_view_controller.h",
+    "manual_fill_accessory_view_controller.mm",
   ]
   deps = [
     "//base",
+    "//ios/chrome/browser/ui/autofill/manual_fill/resources:addresses",
+    "//third_party/material_design_icons:ic_credit_card",
+    "//third_party/material_design_icons:ic_keyboard",
+    "//third_party/material_design_icons:ic_vpn_key",
   ]
   libs = [ "UIKit.framework" ]
   configs += [ "//build/config/compiler:enable_arc" ]

ios/chrome/browser/ui/autofill/manual_fill/keyboard_accessory_view.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/keyboard_accessory_view.h"
-
-#if !defined(__has_feature) || !__has_feature(objc_arc)
-#error "This file requires ARC support."
-#endif
-
-@interface ManualFillKeyboardAccessoryView ()
-
-@property(nonatomic, readonly, weak) id<ManualFillKeyboardAccessoryViewDelegate>
-    delegate;
-
-@end
-
-@implementation ManualFillKeyboardAccessoryView
-
-@synthesize delegate = _delegate;
-
-- (instancetype)initWithDelegate:
-    (id<ManualFillKeyboardAccessoryViewDelegate>)delegate {
-  self = [super initWithFrame:CGRectZero];
-  if (self) {
-    _delegate = delegate;
-    UIColor* tintColor = [UIColor colorWithRed:115.0 / 255.0
-                                         green:115.0 / 255.0
-                                          blue:115.0 / 255.0
-                                         alpha:1.0];
-
-    UIButton* passwordButton = [UIButton buttonWithType:UIButtonTypeCustom];
-    UIImage* keyImage = [UIImage imageNamed:@"ic_vpn_key"];
-    [passwordButton setImage:keyImage forState:UIControlStateNormal];
-    passwordButton.tintColor = tintColor;
-    passwordButton.translatesAutoresizingMaskIntoConstraints = NO;
-    [passwordButton addTarget:_delegate
-                       action:@selector(passwordButtonPressed)
-             forControlEvents:UIControlEventTouchUpInside];
-    [self addSubview:passwordButton];
-
-    UIButton* cardsButton = [UIButton buttonWithType:UIButtonTypeCustom];
-    UIImage* cardImage = [UIImage imageNamed:@"ic_credit_card"];
-    [cardsButton setImage:cardImage forState:UIControlStateNormal];
-    cardsButton.tintColor = tintColor;
-    cardsButton.translatesAutoresizingMaskIntoConstraints = NO;
-    [cardsButton addTarget:_delegate
-                    action:@selector(cardButtonPressed)
-          forControlEvents:UIControlEventTouchUpInside];
-    [self addSubview:cardsButton];
-
-    UIButton* accountButton = [UIButton buttonWithType:UIButtonTypeCustom];
-    UIImage* accountImage = [UIImage imageNamed:@"ic_account_circle"];
-    [accountButton setImage:accountImage forState:UIControlStateNormal];
-    accountButton.tintColor = tintColor;
-    accountButton.translatesAutoresizingMaskIntoConstraints = NO;
-    [accountButton addTarget:_delegate
-                      action:@selector(accountButtonPressed)
-            forControlEvents:UIControlEventTouchUpInside];
-    [self addSubview:accountButton];
-
-    NSLayoutXAxisAnchor* menuLeadingAnchor = self.leadingAnchor;
-    if (@available(iOS 11, *)) {
-      menuLeadingAnchor = self.safeAreaLayoutGuide.leadingAnchor;
-    }
-
-    [NSLayoutConstraint activateConstraints:@[
-      // Vertical constraints.
-      [passwordButton.heightAnchor constraintEqualToAnchor:self.heightAnchor],
-      [passwordButton.topAnchor constraintEqualToAnchor:self.topAnchor],
-
-      [cardsButton.heightAnchor constraintEqualToAnchor:self.heightAnchor],
-      [cardsButton.topAnchor constraintEqualToAnchor:self.topAnchor],
-
-      [accountButton.heightAnchor constraintEqualToAnchor:self.heightAnchor],
-      [accountButton.topAnchor constraintEqualToAnchor:self.topAnchor],
-
-      // Horizontal constraints.
-      [passwordButton.leadingAnchor constraintEqualToAnchor:menuLeadingAnchor
-                                                   constant:12],
-
-      [cardsButton.leadingAnchor
-          constraintEqualToAnchor:passwordButton.trailingAnchor
-                         constant:8],
-
-      [accountButton.leadingAnchor
-          constraintEqualToAnchor:cardsButton.trailingAnchor
-                         constant:8],
-    ]];
-  }
-
-  return self;
-}
-
-@end

ios/chrome/browser/ui/autofill/manual_fill/keyboard_accessory_view.h → ios/chrome/browser/ui/autofill/manual_fill/manual_fill_accessory_view_controller.h

@@ -2,13 +2,13 @@
 // 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_KEYBOARD_ACCESSORY_VIEW_H_
-#define IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_KEYBOARD_ACCESSORY_VIEW_H_
+#ifndef IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_MANUAL_FILL_ACCESSORY_VIEW_CONTROLLER_H_
+#define IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_MANUAL_FILL_ACCESSORY_VIEW_CONTROLLER_H_
 
 #import <UIKit/UIKit.h>
 
-// Protocol to handle user interactions in a ManualFillKeyboardAccessoryView.
-@protocol ManualFillKeyboardAccessoryViewDelegate
+// Protocol to handle user interactions in a ManualFillAccessoryViewController.
+@protocol ManualFillAccessoryViewControllerDelegate
 
 // Invoked after the user touches the `accounts` button.
 - (void)accountButtonPressed;
@@ -16,6 +16,9 @@
 // Invoked after the user touches the `credit cards` button.
 - (void)cardButtonPressed;
 
+// Invoked after the user touches the `keyboard` button.
+- (void)keyboardButtonPressed;
+
 // Invoked after the user touches the `passwords` button.
 - (void)passwordButtonPressed;
 
@@ -23,28 +26,26 @@
 
 // This view contains the icons to activate "Manual Fill". It is meant to be
 // shown above the keyboard on iPhone and above the manual fill view.
-@interface ManualFillKeyboardAccessoryView : UIView
+@interface ManualFillAccessoryViewController : UIViewController
 
 // Instances an object with the desired delegate.
 //
 // @param delegate The delegate for this object.
 // @return A fresh object with the passed delegate.
 - (instancetype)initWithDelegate:
-    (id<ManualFillKeyboardAccessoryViewDelegate>)delegate
+    (id<ManualFillAccessoryViewControllerDelegate>)delegate
     NS_DESIGNATED_INITIALIZER;
 
 // Unavailable. Use `initWithDelegate:`.
-- (instancetype)init NS_UNAVAILABLE;
-
-// Unavailable. Use `initWithDelegate:`.
+- (instancetype)initWithNibName:(NSString*)nibNameOrNil
+                         bundle:(NSBundle*)nibBundleOrNil NS_UNAVAILABLE;
 - (instancetype)initWithCoder:(NSCoder*)aDecoder NS_UNAVAILABLE;
+- (instancetype)init NS_UNAVAILABLE;
 
-// Unavailable. Use `initWithDelegate:`.
-- (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;
-
-// Unavailable. Use `initWithDelegate:`.
-- (instancetype)initWithCoder:(NSCoder*)aDecoder NS_UNAVAILABLE;
+// Resets to the original state, with the keyboard icon hidden and no icon
+// selected.
+- (void)reset;
 
 @end
 
-#endif  // IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_KEYBOARD_ACCESSORY_VIEW_H_
+#endif  // IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_MANUAL_FILL_ACCESSORY_VIEW_CONTROLLER_H_

ios/chrome/browser/ui/autofill/manual_fill/manual_fill_accessory_view_controller.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_accessory_view_controller.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
+
+static NSTimeInterval MFAnimationDuration = 0.20;
+
+@interface ManualFillAccessoryViewController ()
+
+@property(nonatomic, readonly, weak)
+    id<ManualFillAccessoryViewControllerDelegate>
+        delegate;
+
+@property(nonatomic, strong) UIButton* keyboardButton;
+@property(nonatomic, strong) UIButton* passwordButton;
+@property(nonatomic, strong) UIButton* cardsButton;
+@property(nonatomic, strong) UIButton* accountButton;
+
+@end
+
+@implementation ManualFillAccessoryViewController
+
+@synthesize delegate = _delegate;
+@synthesize keyboardButton = _keyboardButton;
+@synthesize passwordButton = _passwordButton;
+@synthesize cardsButton = _cardsButton;
+@synthesize accountButton = _accountButton;
+
+- (instancetype)initWithDelegate:
+    (id<ManualFillAccessoryViewControllerDelegate>)delegate {
+  self = [super initWithNibName:nil bundle:nil];
+  if (self) {
+    _delegate = delegate;
+  }
+  return self;
+}
+
+- (void)loadView {
+  self.view = [[UIView alloc] init];
+  self.view.translatesAutoresizingMaskIntoConstraints = NO;
+
+  UIColor* tintColor = [self activeTintColor];
+
+  self.keyboardButton = [UIButton buttonWithType:UIButtonTypeSystem];
+  UIImage* keyboardImage = [UIImage imageNamed:@"ic_keyboard"];
+  [self.keyboardButton setImage:keyboardImage forState:UIControlStateNormal];
+  self.keyboardButton.tintColor = tintColor;
+  self.keyboardButton.translatesAutoresizingMaskIntoConstraints = NO;
+  [self.keyboardButton addTarget:self
+                          action:@selector(keyboardButtonPressed)
+                forControlEvents:UIControlEventTouchUpInside];
+
+  self.passwordButton = [UIButton buttonWithType:UIButtonTypeSystem];
+  UIImage* keyImage = [UIImage imageNamed:@"ic_vpn_key"];
+  [self.passwordButton setImage:keyImage forState:UIControlStateNormal];
+  self.passwordButton.tintColor = tintColor;
+  self.passwordButton.translatesAutoresizingMaskIntoConstraints = NO;
+  [self.passwordButton addTarget:self
+                          action:@selector(passwordButtonPressed)
+                forControlEvents:UIControlEventTouchUpInside];
+
+  self.cardsButton = [UIButton buttonWithType:UIButtonTypeSystem];
+  UIImage* cardImage = [UIImage imageNamed:@"ic_credit_card"];
+  [self.cardsButton setImage:cardImage forState:UIControlStateNormal];
+  self.cardsButton.tintColor = tintColor;
+  self.cardsButton.translatesAutoresizingMaskIntoConstraints = NO;
+  [self.cardsButton addTarget:self
+                       action:@selector(cardButtonPressed)
+             forControlEvents:UIControlEventTouchUpInside];
+
+  self.accountButton = [UIButton buttonWithType:UIButtonTypeSystem];
+  UIImage* accountImage = [UIImage imageNamed:@"addresses"];
+  [self.accountButton setImage:accountImage forState:UIControlStateNormal];
+  self.accountButton.tintColor = tintColor;
+  self.accountButton.translatesAutoresizingMaskIntoConstraints = NO;
+  [self.accountButton addTarget:self
+                         action:@selector(accountButtonPressed)
+               forControlEvents:UIControlEventTouchUpInside];
+
+  NSLayoutXAxisAnchor* menuLeadingAnchor = self.view.leadingAnchor;
+  if (@available(iOS 11, *)) {
+    menuLeadingAnchor = self.view.safeAreaLayoutGuide.leadingAnchor;
+  }
+  NSLayoutXAxisAnchor* menuTrailingAnchor = self.view.trailingAnchor;
+  if (@available(iOS 11, *)) {
+    menuTrailingAnchor = self.view.safeAreaLayoutGuide.trailingAnchor;
+  }
+
+  UIStackView* stackView = [[UIStackView alloc] initWithArrangedSubviews:@[
+    self.keyboardButton, self.passwordButton, self.accountButton,
+    self.cardsButton
+  ]];
+  stackView.spacing = 10;
+  stackView.axis = UILayoutConstraintAxisHorizontal;
+  stackView.translatesAutoresizingMaskIntoConstraints = NO;
+  [self.view addSubview:stackView];
+
+  [NSLayoutConstraint activateConstraints:@[
+    // Vertical constraints.
+    [stackView.heightAnchor constraintEqualToAnchor:self.view.heightAnchor],
+    [stackView.topAnchor constraintEqualToAnchor:self.view.topAnchor],
+
+    // Horizontal constraints.
+    [stackView.leadingAnchor constraintEqualToAnchor:menuLeadingAnchor
+                                            constant:10],
+    [stackView.trailingAnchor constraintEqualToAnchor:menuTrailingAnchor],
+  ]];
+  self.keyboardButton.hidden = YES;
+  self.keyboardButton.alpha = 0.0;
+}
+
+- (void)reset {
+  [self resetTintColors];
+  self.keyboardButton.hidden = YES;
+  self.keyboardButton.alpha = 0.0;
+}
+
+// Resets the colors of all the icons to the active color.
+- (void)resetTintColors {
+  UIColor* activeTintColor = [self activeTintColor];
+  [self.accountButton setTintColor:activeTintColor];
+  [self.passwordButton setTintColor:activeTintColor];
+  [self.cardsButton setTintColor:activeTintColor];
+}
+
+- (UIColor*)activeTintColor {
+  return [UIColor.blackColor colorWithAlphaComponent:0.5];
+}
+
+- (void)animateKeyboardButtonHidden:(BOOL)hidden {
+  [UIView animateWithDuration:MFAnimationDuration
+                   animations:^{
+                     if (hidden) {
+                       self.keyboardButton.hidden = YES;
+                       self.keyboardButton.alpha = 0.0;
+                     } else {
+                       self.keyboardButton.hidden = NO;
+                       self.keyboardButton.alpha = 1.0;
+                     }
+                   }];
+}
+
+- (void)keyboardButtonPressed {
+  [self animateKeyboardButtonHidden:YES];
+  [self resetTintColors];
+  [self.delegate keyboardButtonPressed];
+}
+
+- (void)passwordButtonPressed {
+  [self animateKeyboardButtonHidden:NO];
+  [self resetTintColors];
+  [self.passwordButton setTintColor:UIColor.cr_manualFillTintColor];
+  [self.delegate passwordButtonPressed];
+}
+
+- (void)cardButtonPressed {
+  [self animateKeyboardButtonHidden:NO];
+  [self resetTintColors];
+  [self.cardsButton setTintColor:UIColor.cr_manualFillTintColor];
+  [self.delegate cardButtonPressed];
+}
+
+- (void)accountButtonPressed {
+  [self animateKeyboardButtonHidden:NO];
+  [self resetTintColors];
+  [self.accountButton setTintColor:UIColor.cr_manualFillTintColor];
+  [self.delegate accountButtonPressed];
+}
+
+@end

third_party/material_design_icons/BUILD.gn

@@ -37,6 +37,7 @@ _image_sets = [
   "file/ic_file_download",
   "hardware/ic_desktop_windows",
   "hardware/ic_desktop_windows_white",
+  "hardware/ic_keyboard",
   "hardware/ic_keyboard_arrow_down",
   "hardware/ic_keyboard_arrow_right",
   "hardware/ic_keyboard_arrow_up",