[iOS] Add experimental new keyboard accessory view.

ios/chrome/browser/ui/toolbar/keyboard_accessory_view.mm

Index: ios/chrome/browser/ui/toolbar/keyboard_accessory_view.mm
diff --git a/ios/chrome/browser/ui/toolbar/keyboard_accessory_view.mm b/ios/chrome/browser/ui/toolbar/keyboard_accessory_view.mm
index 232218927e1a5036bd54e900b017a7e28e261748..4bf6e9eadf4357e4d5fb11364000d806ded6a279 100644
--- a/ios/chrome/browser/ui/toolbar/keyboard_accessory_view.mm
+++ b/ios/chrome/browser/ui/toolbar/keyboard_accessory_view.mm
@@ -4,8 +4,13 @@
 
 #import "ios/chrome/browser/ui/toolbar/keyboard_accessory_view.h"
 
+#import <NotificationCenter/NotificationCenter.h>
+
 #include "base/mac/foundation_util.h"
+#include "ios/chrome/browser/experimental_flags.h"
 #include "ios/chrome/browser/ui/commands/ios_command_ids.h"
+#import "ios/chrome/browser/ui/fancy_ui/colored_button.h"
+#include "ios/chrome/browser/ui/rtl_geometry.h"
 #include "ios/chrome/browser/ui/ui_util.h"
 #import "ios/chrome/browser/ui/uikit_ui_util.h"
 #include "ios/chrome/grit/ios_strings.h"
@@ -21,6 +26,10 @@ @interface KeyboardAccessoryView ()
 
 // Creates a button with the same appearance as a keyboard key.
 - (UIView*)keyboardButtonWithTitle:(NSString*)title frame:(CGRect)frame;
+// Creates a button shortcut for |title|.
+- (UIView*)shortcutButtonWithTitle:(NSString*)title;
+// Creates a button with an icon based on |iconName|.
+- (UIButton*)iconButton:(NSString*)iconName;
 // Called when a keyboard shortcut button is pressed.
 - (void)keyboardButtonPressed:(NSString*)title;
 
@@ -36,6 +45,105 @@ - (instancetype)initWithButtons:(NSArray<NSString*>*)buttonTitles
                        delegate:(id<KeyboardAccessoryViewDelegate>)delegate {
   const CGFloat kViewHeight = 70.0;
   const CGFloat kViewHeightCompact = 43.0;
+  const BOOL isCompact = IsCompact();
+
+  CGFloat width = [[UIScreen mainScreen] bounds].size.width;
+  CGFloat height = isCompact ? kViewHeightCompact : kViewHeight;
+  CGRect frame = CGRectMake(0.0, 0.0, width, height);
+
+  self = [super initWithFrame:frame inputViewStyle:UIInputViewStyleKeyboard];
+  if (self) {
+    _delegate = delegate;
+    if (experimental_flags::IsKeyboardAccessoryViewWithCameraSearchEnabled()) {
+      [self newAccessoryInitialization:buttonTitles];
+    } else {
+      [self accessoryInitialization:buttonTitles];
+    }
+  }
+  return self;
+}
+
+- (void)newAccessoryInitialization:(NSArray<NSString*>*)buttonTitles {

[gambard, 2017/06/09 13:30:51]

I know I suggested the name and it is returning void, but I would avoid the
"new" keyword at the beginning of the method.

[gambard, 2017/06/09 13:30:51]

Comment for the method

[jif, 2017/06/09 15:15:24]

facepalm. Done.

[jif, 2017/06/09 15:15:24]

Done.

+  const CGFloat kButtonMinSizeX = 61.0;
+  const CGFloat kButtonMinSizeXCompact = 32.0;
+  const CGFloat kButtonSizeY = 62.0;
+  const CGFloat kButtonSizeYCompact = 30.0;
+  const CGFloat kBetweenButtonSpacing = 15.0;
+  const CGFloat kBetweenButtonSpacingCompact = 6.0;
+  const CGFloat kSeparatorAlpha = 0.1;
+  const BOOL isCompact = IsCompact();
+
+  // Create and add stackview filled with the shortcut buttons.
+  UIStackView* stackView = [[UIStackView alloc] init];
+  [stackView setTranslatesAutoresizingMaskIntoConstraints:NO];
+  stackView.spacing =
+      isCompact ? kBetweenButtonSpacingCompact : kBetweenButtonSpacing;
+  for (NSString* title in buttonTitles) {
+    UIView* button = [self shortcutButtonWithTitle:title];
+    [button setTranslatesAutoresizingMaskIntoConstraints:NO];
+    CGFloat buttonMinWidth =
+        isCompact ? kButtonMinSizeXCompact : kButtonMinSizeX;
+    [button.widthAnchor constraintGreaterThanOrEqualToConstant:buttonMinWidth]
+        .active = YES;
+    CGFloat buttonHeight = isCompact ? kButtonSizeYCompact : kButtonSizeY;
+    [button.heightAnchor constraintEqualToConstant:buttonHeight].active = YES;
+    [stackView addArrangedSubview:button];
+  }
+  [self addSubview:stackView];
+
+  // Create and add buttons for voice and camera search.
+  UIButton* cameraButton = [self iconButton:@"qr_scanner_keyboard_accessory"];
+  [cameraButton addTarget:_delegate
+                   action:@selector(keyboardAccessoryCameraSearchTouchUpInside)
+         forControlEvents:UIControlEventTouchUpInside];
+  [self addSubview:cameraButton];
+
+  _voiceSearchButton = [self iconButton:@"voice_icon_keyboard_accessory"];
+  [self addSubview:_voiceSearchButton];
+  [_voiceSearchButton addTarget:_delegate
+                         action:@selector(keyboardAccessoryVoiceSearchTouchDown)
+               forControlEvents:UIControlEventTouchDown];
+  [_voiceSearchButton
+             addTarget:_delegate
+                action:@selector(keyboardAccessoryVoiceSearchTouchUpInside)
+      forControlEvents:UIControlEventTouchUpInside];
+
+  // Create and add 1 pixel high separator view.
+  UIView* separator = [[UIView alloc] init];
+  [separator setTranslatesAutoresizingMaskIntoConstraints:NO];
+  [separator
+      setBackgroundColor:[UIColor colorWithWhite:0 alpha:kSeparatorAlpha]];
+  [separator.heightAnchor
+      constraintEqualToConstant:1.0 / [[UIScreen mainScreen] scale]]
+      .active = YES;
+  [self addSubview:separator];
+
+  // Position all the views.
+  NSDictionary* viewsDictionary = @{
+    @"cameraButton" : cameraButton,
+    @"voiceSearch" : _voiceSearchButton,
+    @"stackView" : stackView,
+    @"separator" : separator,
+  };
+  NSArray* constraints = @[
+    @"H:|-8-[cameraButton]-8-[voiceSearch]-(>=16)-[stackView]",
+    @"H:|-0-[separator]-0-|",
+    @"V:[separator]-0-|",
+  ];
+  ApplyVisualConstraintsWithOptions(constraints, viewsDictionary,
+                                    LayoutOptionForRTLSupport(), self);
+  AddSameCenterYConstraint(self, cameraButton);
+  AddSameCenterYConstraint(self, _voiceSearchButton);
+  AddSameCenterYConstraint(self, stackView);
+  // The following constraint is supposed to break if there's not enough
+  // space to center the stack view.
+  NSLayoutConstraint* horizontallyCenterStackViewConstraint =
+      [self.centerXAnchor constraintEqualToAnchor:stackView.centerXAnchor];
+  horizontallyCenterStackViewConstraint.priority = UILayoutPriorityDefaultHigh;
+  horizontallyCenterStackViewConstraint.active = YES;
+}
+
+- (void)accessoryInitialization:(NSArray<NSString*>*)buttonTitles {

[gambard, 2017/06/09 13:30:51]

Comment for the method.

   const CGFloat kButtonInset = 5.0;
   const CGFloat kButtonSizeX = 61.0;
   const CGFloat kButtonSizeXCompact = 46.0;
@@ -45,75 +153,65 @@ - (instancetype)initWithButtons:(NSArray<NSString*>*)buttonTitles
   const CGFloat kBetweenButtonSpacingCompact = 7.0;
   const BOOL isCompact = IsCompact();
 
-  CGFloat width = [[UIScreen mainScreen] bounds].size.width;
-  CGFloat height = isCompact ? kViewHeightCompact : kViewHeight;
-  CGRect frame = CGRectMake(0.0, 0.0, width, height);
+  // Center buttons in available space by placing them within a parent view
+  // that auto-centers.
+  CGFloat betweenButtonSpacing =
+      isCompact ? kBetweenButtonSpacingCompact : kBetweenButtonSpacing;
+  const CGFloat buttonWidth = isCompact ? kButtonSizeXCompact : kButtonSizeX;
 
-  self = [super initWithFrame:frame inputViewStyle:UIInputViewStyleKeyboard];
-  if (self) {
-    _delegate = delegate;
+  CGFloat totalWidth = (buttonTitles.count * buttonWidth) +
+                       ((buttonTitles.count - 1) * betweenButtonSpacing);
+  CGFloat indent = floor((self.frame.size.width - totalWidth) / 2.0);
+  if (indent < kButtonInset)
+    indent = kButtonInset;
+  CGRect parentViewRect =
+      CGRectMake(indent, 0.0, totalWidth, self.frame.size.height);
+  UIView* parentView = [[UIView alloc] initWithFrame:parentViewRect];
+  [parentView setAutoresizingMask:UIViewAutoresizingFlexibleLeftMargin |
+                                  UIViewAutoresizingFlexibleRightMargin];
+  [self addSubview:parentView];
 
-    // Center buttons in available space by placing them within a parent view
-    // that auto-centers.
-    CGFloat betweenButtonSpacing =
-        isCompact ? kBetweenButtonSpacingCompact : kBetweenButtonSpacing;
-    const CGFloat buttonWidth = isCompact ? kButtonSizeXCompact : kButtonSizeX;
-
-    CGFloat totalWidth = (buttonTitles.count * buttonWidth) +
-                         ((buttonTitles.count - 1) * betweenButtonSpacing);
-    CGFloat indent = floor((width - totalWidth) / 2.0);
-    if (indent < kButtonInset)
-      indent = kButtonInset;
-    CGRect parentViewRect = CGRectMake(indent, 0.0, totalWidth, height);
-    UIView* parentView = [[UIView alloc] initWithFrame:parentViewRect];
-    [parentView setAutoresizingMask:UIViewAutoresizingFlexibleLeftMargin |
-                                    UIViewAutoresizingFlexibleRightMargin];
-    [self addSubview:parentView];
-
-    // Create the shortcut buttons, starting at the left edge of |parentView|.
-    CGRect currentFrame =
-        CGRectMake(0.0, kButtonInset, buttonWidth,
-                   isCompact ? kButtonSizeYCompact : kButtonSizeY);
-
-    for (NSString* title in buttonTitles) {
-      UIView* button = [self keyboardButtonWithTitle:title frame:currentFrame];
-      [parentView addSubview:button];
-      currentFrame.origin.x =
-          CGRectGetMaxX(currentFrame) + betweenButtonSpacing;
-    }
+  // Create the shortcut buttons, starting at the left edge of |parentView|.
+  CGRect currentFrame =
+      CGRectMake(0.0, kButtonInset, buttonWidth,
+                 isCompact ? kButtonSizeYCompact : kButtonSizeY);
 
-    // Create the voice search button and add it over the text buttons.
-    _voiceSearchButton = [UIButton buttonWithType:UIButtonTypeCustom];
-    [_voiceSearchButton setAutoresizingMask:UIViewAutoresizingFlexibleWidth];
-    SetA11yLabelAndUiAutomationName(
-        _voiceSearchButton, IDS_IOS_ACCNAME_VOICE_SEARCH, @"Voice Search");
-    UIImage* voiceRow = [UIImage imageNamed:@"custom_row_voice"];
-    UIImage* voiceRowPressed = [UIImage imageNamed:@"custom_row_voice_pressed"];
-    [_voiceSearchButton setBackgroundImage:voiceRow
-                                  forState:UIControlStateNormal];
-    [_voiceSearchButton setBackgroundImage:voiceRowPressed
-                                  forState:UIControlStateHighlighted];
-
-    UIImage* voiceIcon = [UIImage imageNamed:@"voice_icon_keyboard_accessory"];
-    [_voiceSearchButton setAdjustsImageWhenHighlighted:NO];
-    [_voiceSearchButton setImage:voiceIcon forState:UIControlStateNormal];
-    [_voiceSearchButton setFrame:[self bounds]];
-
-    [_voiceSearchButton
-               addTarget:delegate
-                  action:@selector(keyboardAccessoryVoiceSearchTouchDown)
-        forControlEvents:UIControlEventTouchDown];
-    [_voiceSearchButton
-               addTarget:delegate
-                  action:@selector(keyboardAccessoryVoiceSearchTouchUpInside)
-        forControlEvents:UIControlEventTouchUpInside];
-    [self addSubview:_voiceSearchButton];
+  for (NSString* title in buttonTitles) {
+    UIView* button = [self keyboardButtonWithTitle:title frame:currentFrame];
+    [parentView addSubview:button];
+    currentFrame.origin.x = CGRectGetMaxX(currentFrame) + betweenButtonSpacing;
   }
 
-  return self;
+  // Create the voice search button and add it over the text buttons.
+  _voiceSearchButton = [UIButton buttonWithType:UIButtonTypeCustom];
+  [_voiceSearchButton setAutoresizingMask:UIViewAutoresizingFlexibleWidth];
+  SetA11yLabelAndUiAutomationName(
+      _voiceSearchButton, IDS_IOS_ACCNAME_VOICE_SEARCH, @"Voice Search");
+  UIImage* voiceRow = [UIImage imageNamed:@"custom_row_voice"];
+  UIImage* voiceRowPressed = [UIImage imageNamed:@"custom_row_voice_pressed"];
+  [_voiceSearchButton setBackgroundImage:voiceRow
+                                forState:UIControlStateNormal];
+  [_voiceSearchButton setBackgroundImage:voiceRowPressed
+                                forState:UIControlStateHighlighted];
+
+  UIImage* voiceIcon = [UIImage imageNamed:@"voice_icon_keyboard_accessory"];
+  [_voiceSearchButton setAdjustsImageWhenHighlighted:NO];
+  [_voiceSearchButton setImage:voiceIcon forState:UIControlStateNormal];
+  [_voiceSearchButton setFrame:[self bounds]];
+  [_voiceSearchButton addTarget:_delegate
+                         action:@selector(keyboardAccessoryVoiceSearchTouchDown)
+               forControlEvents:UIControlEventTouchDown];
+  [_voiceSearchButton
+             addTarget:_delegate
+                action:@selector(keyboardAccessoryVoiceSearchTouchUpInside)
+      forControlEvents:UIControlEventTouchUpInside];
+  [self addSubview:_voiceSearchButton];
 }
 
 - (void)setMode:(KeyboardAccessoryViewMode)mode {
+  if (experimental_flags::IsKeyboardAccessoryViewWithCameraSearchEnabled()) {
+    return;
+  }
   _mode = mode;
   switch (mode) {
     case VOICE_SEARCH:
@@ -152,6 +250,66 @@ - (UIView*)keyboardButtonWithTitle:(NSString*)title frame:(CGRect)frame {
   return button;
 }
 
+- (UIView*)shortcutButtonWithTitle:(NSString*)title {
+  const CGFloat kCornerRadius = 4.0;
+  const CGFloat kAlphaStateNormal = 0.1;
+  const CGFloat kAlphaStateHighlighted = 0.2;
+  const CGFloat kHorizontalEdgeInset = 8;
+  const CGFloat kIpadButtonTitleFontSize = 20.0;
+  const CGFloat kIphoneButtonTitleFontSize = 15.0;
+
+  ColoredButton* button = [ColoredButton buttonWithType:UIButtonTypeCustom];
+  UIFont* font = nil;
+
+  [button setTitle:title forState:UIControlStateNormal];
+  [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
+
+  [button setBackgroundColor:UIColorFromRGB(0, kAlphaStateNormal)
+                    forState:UIControlStateNormal];
+  [button setBackgroundColor:UIColorFromRGB(0, kAlphaStateHighlighted)
+                    forState:UIControlStateHighlighted];
+
+  button.layer.cornerRadius = kCornerRadius;
+  button.contentEdgeInsets =
+      UIEdgeInsetsMake(0, kHorizontalEdgeInset, 0, kHorizontalEdgeInset);
+  button.clipsToBounds = YES;
+
+  if (IsIPadIdiom()) {
+    font = GetUIFont(FONT_HELVETICA, false, kIpadButtonTitleFontSize);
+  } else {
+    font = GetUIFont(FONT_HELVETICA, true, kIphoneButtonTitleFontSize);
+  }
+
+  [button.titleLabel setFont:font];
+
+  [button addTarget:self
+                action:@selector(keyboardButtonPressed:)
+      forControlEvents:UIControlEventTouchUpInside];
+  button.isAccessibilityElement = YES;
+  [button setAccessibilityLabel:title];
+  return button;
+}
+
+- (UIButton*)iconButton:(NSString*)iconName {
+  const CGFloat kIconTintAlphaStateNormal = 0.45;
+  const CGFloat kIconTintAlphaStateHighlighted = 0.6;
+
+  UIColor* iconTintStateNormal = UIColorFromRGB(0, kIconTintAlphaStateNormal);
+  UIColor* iconTintStateHighlighted =
+      UIColorFromRGB(0, kIconTintAlphaStateHighlighted);
+
+  ColoredButton* button = [ColoredButton buttonWithType:UIButtonTypeCustom];
+
+  [button setTintColor:iconTintStateNormal forState:UIControlStateNormal];
+  [button setTintColor:iconTintStateHighlighted
+              forState:UIControlStateHighlighted];
+  [button setTranslatesAutoresizingMaskIntoConstraints:NO];
+  UIImage* icon = [[UIImage imageNamed:iconName]
+      imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+  [button setImage:icon forState:UIControlStateNormal];
+  return button;
+}
+
 - (BOOL)enableInputClicksWhenVisible {
   return YES;
 }