[ios] Add tab grid close button asset

Bug: 818198
Cq-Include-Trybots: master.tryserver.chromium.mac:ios-simulator-cronet;master.tryserver.chromium.mac:ios-simulator-full-configs
Change-Id: I436c573c55149b9becfc4b83b3904e2973e0480b
Reviewed-on: https://chromium-review.googlesource.com/961123Reviewed-by: edchin <edchin@chromium.org>
Reviewed-by: Sergio Collazos <sczs@chromium.org>
Commit-Queue: edchin <edchin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542949}

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

@@ -67,9 +67,11 @@ source_set("tab_grid_ui") {
   configs += [ "//build/config/compiler:enable_arc" ]
 
   deps = [
+    "resources:grid_close_cell",
     "//base",
     "//ios/chrome/app/strings",
     "//ios/chrome/browser",
+    "//ios/chrome/browser/ui:ui_util",
     "//ios/chrome/browser/ui/tab_grid/transitions",
     "//ios/chrome/browser/ui/util:constraints_ui",
     "//ui/base",

ios/chrome/browser/ui/tab_grid/grid_cell.mm

@@ -7,6 +7,7 @@
 #import "base/logging.h"
 #import "ios/chrome/browser/ui/tab_grid/grid_constants.h"
 #import "ios/chrome/browser/ui/tab_grid/top_aligned_image_view.h"
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
 #include "ios/chrome/grit/ios_strings.h"
 #include "ui/base/l10n/l10n_util.h"
 
@@ -19,8 +20,6 @@ namespace {
 const CGFloat kTopBarHeight = 28.0f;
 // Width and height of the icon.
 const CGFloat kIconDiameter = 20.0f;
-// Width and height of the close button.
-const CGFloat kCloseButtonDiameter = 16.0f;
 // Width of selection border.
 const CGFloat kBorderWidth = 6.0f;
 }  // namespace
@@ -133,9 +132,8 @@ const CGFloat kBorderWidth = 6.0f;
       self.titleLabel.textColor = [UIColor blackColor];
       self.line.backgroundColor = [UIColor colorWithWhite:0.6f alpha:1.0f];
       self.snapshotView.backgroundColor = [UIColor whiteColor];
-      self.closeButton.backgroundColor =
-          [UIColor colorWithWhite:0.6f alpha:1.0f];
-      self.closeButton.tintColor = [UIColor whiteColor];
+      self.closeButton.tintColor =
+          UIColorFromRGB(kGridLightThemeCellCloseButtonTintColor);
       self.tintColor =
           [UIColor colorWithRed:0.0 green:122.0 / 255.0 blue:1.0 alpha:1.0];
       self.border.layer.borderColor = self.tintColor.CGColor;
@@ -147,9 +145,8 @@ const CGFloat kBorderWidth = 6.0f;
       self.line.backgroundColor = [UIColor colorWithWhite:0.2f alpha:1.0f];
       self.snapshotView.backgroundColor =
           [UIColor colorWithWhite:0.4f alpha:1.0f];
-      self.closeButton.backgroundColor =
-          [UIColor colorWithWhite:0.4f alpha:1.0f];
-      self.closeButton.tintColor = [UIColor colorWithWhite:0.2f alpha:1.0f];
+      self.closeButton.tintColor =
+          UIColorFromRGB(kGridDarkThemeCellCloseButtonTintColor);
       self.tintColor = [UIColor colorWithWhite:0.9f alpha:1.0f];
       self.border.layer.borderColor = self.tintColor.CGColor;
       break;
@@ -205,9 +202,7 @@ const CGFloat kBorderWidth = 6.0f;
 
   UIButton* closeButton = [UIButton buttonWithType:UIButtonTypeCustom];
   closeButton.translatesAutoresizingMaskIntoConstraints = NO;
-  closeButton.layer.cornerRadius = 8.0f;
-  closeButton.layer.masksToBounds = YES;
-  UIImage* closeImage = [[UIImage imageNamed:@"card_close_button"]
+  UIImage* closeImage = [[UIImage imageNamed:@"grid_close_cell"]
       imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
   [closeButton setImage:closeImage forState:UIControlStateNormal];
   [closeButton addTarget:self
@@ -234,12 +229,12 @@ const CGFloat kBorderWidth = 6.0f;
     [closeButton.leadingAnchor
         constraintEqualToAnchor:titleLabel.trailingAnchor],
     [closeButton.centerYAnchor constraintEqualToAnchor:topBar.centerYAnchor],
-    [closeButton.widthAnchor constraintEqualToConstant:kCloseButtonDiameter],
-    [closeButton.heightAnchor constraintEqualToConstant:kCloseButtonDiameter],
     [closeButton.trailingAnchor constraintEqualToAnchor:topBar.trailingAnchor
                                                constant:-6.0f],
   ];
   [NSLayoutConstraint activateConstraints:constraints];
+  [closeButton setContentHuggingPriority:UILayoutPriorityDefaultHigh
+                                 forAxis:UILayoutConstraintAxisHorizontal];
   return topBar;
 }
 

ios/chrome/browser/ui/tab_grid/grid_constants.h

@@ -5,7 +5,7 @@
 #ifndef IOS_CHROME_BROWSER_UI_TAB_GRID_GRID_CONSTANTS_H_
 #define IOS_CHROME_BROWSER_UI_TAB_GRID_GRID_CONSTANTS_H_
 
-#import <Foundation/Foundation.h>
+#import <UIKit/UIKit.h>
 
 // Accessibility identifier prefix of a grid cell. To reference a specific cell,
 // concatenate |kGridCellIdentifierPrefix| with the index of the cell. For
@@ -16,4 +16,12 @@ extern NSString* const kGridCellIdentifierPrefix;
 // Accessibility identifier for the close button in a grid cell.
 extern NSString* const kGridCellCloseButtonIdentifier;
 
+// All kxxxColor constants are RGB values stored in a Hex integer. These will be
+// converted into UIColors using the UIColorFromRGB() function, from
+// uikit_ui_util.h
+
+// GridCell styling.
+extern const CGFloat kGridLightThemeCellCloseButtonTintColor;
+extern const CGFloat kGridDarkThemeCellCloseButtonTintColor;
+
 #endif  // IOS_CHROME_BROWSER_UI_TAB_GRID_GRID_CONSTANTS_H_

ios/chrome/browser/ui/tab_grid/grid_constants.mm

@@ -14,3 +14,7 @@ NSString* const kGridCellIdentifierPrefix = @"GridCellIdentifierPrefix";
 // Accessibility identifier for the close button in a grid cell.
 NSString* const kGridCellCloseButtonIdentifier =
     @"GridCellCloseButtonIdentifier";
+
+// GridCell styling.
+const CGFloat kGridLightThemeCellCloseButtonTintColor = 0x3C4043;
+const CGFloat kGridDarkThemeCellCloseButtonTintColor = 0xFFFFFF;

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

+# 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("//build/config/ios/asset_catalog.gni")
+
+imageset("grid_close_cell") {
+  sources = [
+    "grid_close_cell.imageset/Contents.json",
+    "grid_close_cell.imageset/grid_close_cell.png",
+    "grid_close_cell.imageset/grid_close_cell@2x.png",
+    "grid_close_cell.imageset/grid_close_cell@3x.png",
+  ]
+}

ios/chrome/browser/ui/tab_grid/resources/grid_close_cell.imageset/Contents.json

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