[ios] Clean up and polish colors in GridCell

This CL cleans up GridCell and updates the colors.

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

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

@@ -27,7 +27,6 @@ const CGFloat kBorderWidth = 6.0f;
 @interface GridCell ()
 // Visual components of the cell.
 @property(nonatomic, weak) UIView* topBar;
-@property(nonatomic, weak) UIView* line;
 @property(nonatomic, weak) UIImageView* iconView;
 @property(nonatomic, weak) TopAlignedImageView* snapshotView;
 @property(nonatomic, weak) UILabel* titleLabel;
@@ -45,7 +44,6 @@ const CGFloat kBorderWidth = 6.0f;
 @synthesize title = _title;
 // Private properties.
 @synthesize topBar = _topBar;
-@synthesize line = _line;
 @synthesize iconView = _iconView;
 @synthesize snapshotView = _snapshotView;
 @synthesize titleLabel = _titleLabel;
@@ -62,15 +60,11 @@ const CGFloat kBorderWidth = 6.0f;
     contentView.layer.cornerRadius = 11.0f;
     contentView.layer.masksToBounds = YES;
     UIView* topBar = [self setupTopBar];
-    UIView* line = [[UIView alloc] init];
-    line.translatesAutoresizingMaskIntoConstraints = NO;
     TopAlignedImageView* snapshotView = [[TopAlignedImageView alloc] init];
     snapshotView.translatesAutoresizingMaskIntoConstraints = NO;
     [contentView addSubview:topBar];
-    [contentView addSubview:line];
     [contentView addSubview:snapshotView];
     _topBar = topBar;
-    _line = line;
     _snapshotView = snapshotView;
     NSArray* constraints = @[
       [topBar.topAnchor constraintEqualToAnchor:contentView.topAnchor],
@@ -78,11 +72,7 @@ const CGFloat kBorderWidth = 6.0f;
       [topBar.trailingAnchor
           constraintEqualToAnchor:contentView.trailingAnchor],
       [topBar.heightAnchor constraintEqualToConstant:kTopBarHeight],
-      [line.topAnchor constraintEqualToAnchor:topBar.bottomAnchor],
-      [line.leadingAnchor constraintEqualToAnchor:contentView.leadingAnchor],
-      [line.trailingAnchor constraintEqualToAnchor:contentView.trailingAnchor],
-      [line.heightAnchor constraintEqualToConstant:0.5f],
-      [snapshotView.topAnchor constraintEqualToAnchor:line.bottomAnchor],
+      [snapshotView.topAnchor constraintEqualToAnchor:topBar.bottomAnchor],
       [snapshotView.leadingAnchor
           constraintEqualToAnchor:contentView.leadingAnchor],
       [snapshotView.trailingAnchor
@@ -125,33 +115,27 @@ const CGFloat kBorderWidth = 6.0f;
 - (void)setTheme:(GridTheme)theme {
   if (_theme == theme)
     return;
+  self.iconView.backgroundColor = UIColorFromRGB(kGridCellIconBackgroundColor);
+  self.snapshotView.backgroundColor =
+      UIColorFromRGB(kGridCellSnapshotBackgroundColor);
   switch (theme) {
     case GridThemeLight:
-      self.topBar.backgroundColor = [UIColor whiteColor];
-      self.iconView.backgroundColor = [UIColor colorWithWhite:0.9f alpha:1.0f];
-      self.titleLabel.textColor = [UIColor blackColor];
-      self.line.backgroundColor = [UIColor colorWithWhite:0.6f alpha:1.0f];
-      self.snapshotView.backgroundColor = [UIColor whiteColor];
+      self.topBar.backgroundColor =
+          UIColorFromRGB(kGridLightThemeCellHeaderColor);
+      self.titleLabel.textColor = UIColorFromRGB(kGridLightThemeCellTitleColor);
       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;
+      self.border.layer.borderColor =
+          UIColorFromRGB(kGridLightThemeCellSelectionColor).CGColor;
       break;
     case GridThemeDark:
-      self.topBar.backgroundColor = [UIColor colorWithWhite:0.2f alpha:1.0f];
-      self.iconView.backgroundColor = [UIColor colorWithWhite:0.9f alpha:1.0f];
-      self.titleLabel.textColor = [UIColor whiteColor];
-      self.line.backgroundColor = [UIColor colorWithWhite:0.2f alpha:1.0f];
-      self.snapshotView.backgroundColor =
-          [UIColor colorWithWhite:0.4f alpha:1.0f];
+      self.topBar.backgroundColor =
+          UIColorFromRGB(kGridDarkThemeCellHeaderColor);
+      self.titleLabel.textColor = UIColorFromRGB(kGridDarkThemeCellTitleColor);
       self.closeButton.tintColor =
           UIColorFromRGB(kGridDarkThemeCellCloseButtonTintColor);
-      self.tintColor = [UIColor colorWithWhite:0.9f alpha:1.0f];
-      self.border.layer.borderColor = self.tintColor.CGColor;
-      break;
-    default:
-      NOTREACHED() << "Invalid GridTheme.";
+      self.border.layer.borderColor =
+          UIColorFromRGB(kGridDarkThemeCellSelectionColor).CGColor;
       break;
   }
   _theme = theme;

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

@@ -21,7 +21,18 @@ extern NSString* const kGridCellCloseButtonIdentifier;
 // uikit_ui_util.h
 
 // GridCell styling.
+// Common colors.
+extern const CGFloat kGridCellIconBackgroundColor;
+extern const CGFloat kGridCellSnapshotBackgroundColor;
+// Light theme colors.
+extern const CGFloat kGridLightThemeCellTitleColor;
+extern const CGFloat kGridLightThemeCellHeaderColor;
+extern const CGFloat kGridLightThemeCellSelectionColor;
 extern const CGFloat kGridLightThemeCellCloseButtonTintColor;
+// Dark theme colors.
+extern const CGFloat kGridDarkThemeCellTitleColor;
+extern const CGFloat kGridDarkThemeCellHeaderColor;
+extern const CGFloat kGridDarkThemeCellSelectionColor;
 extern const CGFloat kGridDarkThemeCellCloseButtonTintColor;
 
 #endif  // IOS_CHROME_BROWSER_UI_TAB_GRID_GRID_CONSTANTS_H_

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

@@ -16,5 +16,16 @@ NSString* const kGridCellCloseButtonIdentifier =
     @"GridCellCloseButtonIdentifier";
 
 // GridCell styling.
+// Common colors.
+const CGFloat kGridCellIconBackgroundColor = 0xF1F3F4;
+const CGFloat kGridCellSnapshotBackgroundColor = 0xE8EAED;
+// Light theme colors.
+const CGFloat kGridLightThemeCellTitleColor = 0x000000;
+const CGFloat kGridLightThemeCellHeaderColor = 0xF8F9FA;
+const CGFloat kGridLightThemeCellSelectionColor = 0x1A73E8;
 const CGFloat kGridLightThemeCellCloseButtonTintColor = 0x3C4043;
+// Dark theme colors.
+const CGFloat kGridDarkThemeCellTitleColor = 0xFFFFFF;
+const CGFloat kGridDarkThemeCellHeaderColor = 0x5F6368;
+const CGFloat kGridDarkThemeCellSelectionColor = 0x9AA0A6;
 const CGFloat kGridDarkThemeCellCloseButtonTintColor = 0xFFFFFF;

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

@@ -7,8 +7,7 @@
 
 // Theme describing the look of the grid.
 typedef NS_ENUM(NSUInteger, GridTheme) {
-  GridThemeInvalid = 0,
-  GridThemeLight,
+  GridThemeLight = 1,
   GridThemeDark,
 };