Implement a custom clear button with custom graphics.

Bug: 852787
Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet
Change-Id: Ied16b9651281b7907e8628752938a2d6b42ae9c3
Reviewed-on: https://chromium-review.googlesource.com/1106337
Commit-Queue: Stepan Khapugin <stkhapugin@chromium.org>
Reviewed-by: Justin Cohen <justincohen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568802}

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

@@ -92,6 +92,7 @@ source_set("omnibox_internal") {
     ":omnibox_popup_shared",
     ":omnibox_util",
     "resources:omnibox_background",
+    "resources:omnibox_clear_icon",
     "resources:omnibox_transparent_background",
     "//base",
     "//components/favicon/ios",

ios/chrome/browser/ui/omnibox/omnibox_text_field_ios.mm

@@ -130,8 +130,7 @@ NSString* const kOmniboxFadeAnimationKey = @"OmniboxFadeAnimation";
     [self setKeyboardType:(UIKeyboardType)UIKeyboardTypeWebSearch];
 
     if (IsRefreshLocationBarEnabled()) {
-      [self setClearButtonMode:UITextFieldViewModeWhileEditing];
-      [self setRightViewMode:UITextFieldViewModeNever];
+      // The right view mode is managed by the view controller.
     } else {
       [self setClearButtonMode:UITextFieldViewModeNever];
       [self setRightViewMode:UITextFieldViewModeAlways];

ios/chrome/browser/ui/omnibox/omnibox_view_controller.mm

@@ -10,12 +10,19 @@
 #include "ios/chrome/browser/ui/ui_util.h"
 #include "ios/chrome/browser/ui/uikit_ui_util.h"
 #import "ios/chrome/browser/ui/uikit_ui_util.h"
+#include "ios/chrome/grit/ios_strings.h"
 #include "ui/base/l10n/l10n_util.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
 #endif
 
+namespace {
+
+const CGFloat kClearButtonSize = 28.0f;
+
+}  // namespace
+
 @interface OmniboxViewController ()
 
 // Override of UIViewController's view with a different type.
@@ -63,12 +70,10 @@
 
 - (void)viewDidLoad {
   [super viewDidLoad];
-  if (self.incognito) {
-    self.textField.placeholderTextColor = [UIColor colorWithWhite:1 alpha:0.5];
-  } else {
-    self.textField.placeholderTextColor = [UIColor colorWithWhite:0 alpha:0.3];
-  }
+
+  self.textField.placeholderTextColor = [self placeholderAndClearButtonColor];
   self.textField.placeholder = l10n_util::GetNSString(IDS_OMNIBOX_EMPTY_HINT);
+  [self setupClearButton];
 }
 
 - (void)traitCollectionDidChange:(UITraitCollection*)previousTraitCollection {
@@ -90,8 +95,49 @@
 
 #pragma mark - private
 
+- (void)setupClearButton {
+  // Do not use the system clear button. Use a custom "right view" instead.
+  // Note that |rightView| is an incorrect name, it's really a trailing view.
+  [self.textField setClearButtonMode:UITextFieldViewModeNever];
+  [self.textField setRightViewMode:UITextFieldViewModeAlways];
+
+  UIButton* clearButton = [UIButton buttonWithType:UIButtonTypeSystem];
+  clearButton.frame = CGRectMake(0, 0, kClearButtonSize, kClearButtonSize);
+  [clearButton setImage:[self clearButtonIcon] forState:UIControlStateNormal];
+  [clearButton addTarget:self
+                  action:@selector(clearButtonPressed)
+        forControlEvents:UIControlEventTouchUpInside];
+  self.textField.rightView = clearButton;
+
+  clearButton.tintColor = [self placeholderAndClearButtonColor];
+  SetA11yLabelAndUiAutomationName(clearButton, IDS_IOS_ACCNAME_CLEAR_TEXT,
+                                  @"Clear Text");
+}
+
+- (UIImage*)clearButtonIcon {
+  UIImage* image = [[UIImage imageNamed:@"omnibox_clear_icon"]
+      imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+
+  return image;
+}
+
+- (void)clearButtonPressed {
+  // Emulate a system button clear callback.
+  BOOL shouldClear =
+      [self.textField.delegate textFieldShouldClear:self.textField];
+  if (shouldClear) {
+    [self.textField setText:@""];
+  }
+}
+
 - (void)updateLeadingImageVisibility {
   [self.view setLeadingImageHidden:!IsRegularXRegularSizeClass(self)];
 }
 
+// Tint color for the textfield placeholder and the clear button.
+- (UIColor*)placeholderAndClearButtonColor {
+  return self.incognito ? [UIColor colorWithWhite:1 alpha:0.5]
+                        : [UIColor colorWithWhite:0 alpha:0.3];
+}
+
 @end

ios/chrome/browser/ui/omnibox/omnibox_view_ios.mm

@@ -786,7 +786,7 @@ void OmniboxViewIOS::UpdateAppearance() {
 
 void OmniboxViewIOS::CreateClearTextIcon(bool is_incognito) {
   if (IsRefreshLocationBarEnabled()) {
-    // In UI Refresh, the system clear button is used.
+    // In UI Refresh, the view controller sets up the clear button.
     return;
   }
 

ios/chrome/browser/ui/omnibox/resources/BUILD.gn

@@ -21,3 +21,12 @@ imageset("omnibox_background") {
     "omnibox_background.imageset/omnibox_background@3x.png",
   ]
 }
+
+imageset("omnibox_clear_icon") {
+  sources = [
+    "omnibox_clear_icon.imageset/Contents.json",
+    "omnibox_clear_icon.imageset/omnibox_clear_icon.png",
+    "omnibox_clear_icon.imageset/omnibox_clear_icon@2x.png",
+    "omnibox_clear_icon.imageset/omnibox_clear_icon@3x.png",
+  ]
+}

ios/chrome/browser/ui/omnibox/resources/omnibox_clear_icon.imageset/Contents.json

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

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

@@ -389,12 +389,7 @@ using chrome_test_util::SystemSelectionCalloutCopyButton;
   [[EarlGrey selectElementWithMatcher:chrome_test_util::Omnibox()]
       assertWithMatcher:chrome_test_util::OmniboxText("foo")];
 
-  id<GREYMatcher> cancelButton = nil;
-  if (IsRefreshLocationBarEnabled()) {
-    cancelButton = grey_accessibilityLabel(@"Clear text");
-  } else {
-    cancelButton = grey_accessibilityLabel(@"Clear Text");
-  }
+  id<GREYMatcher> cancelButton = grey_accessibilityLabel(@"Clear Text");
 
   [[EarlGrey selectElementWithMatcher:cancelButton] performAction:grey_tap()];