Updates TableViewInfoButtonItem

This Cl updates TableViewInfoButtonItem and his cell.
- Replaces |setIconImage| by |setIconImage:image withTintColor:color|.
- Replaces trailing button icon.
- Reduces cell vertical padding.

Bug: 1095579
Change-Id: I7d7fc26698871e80e1a6b14883b93cdc92796e83
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2252238Reviewed-by: Sylvain Defresne <sdefresne@chromium.org>
Reviewed-by: Tina Wang <tinazwang@chromium.org>
Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Commit-Queue: Ewann Pellé <ewannpv@chromium.org>
Cr-Commit-Position: refs/heads/master@{#781216}

ios/chrome/browser/ui/table_view/cells/BUILD.gn

@@ -51,6 +51,7 @@ source_set("cells") {
     "resources:table_view_cell_edit_icon",
     "resources:table_view_cell_error_icon",
     "resources:table_view_cell_favicon_background",
+    "resources:table_view_cell_info",
     "//base",
     "//base:i18n",
     "//ios/chrome/app/strings",

ios/chrome/browser/ui/table_view/cells/resources/BUILD.gn

@@ -45,3 +45,11 @@ imageset("table_view_cell_error_icon") {
     "table_view_cell_error_icon.imageset/table_view_cell_error_icon@3x.png",
   ]
 }
+
+imageset("table_view_cell_info") {
+  sources = [
+    "table_view_cell_info.imageset/Contents.json",
+    "table_view_cell_info.imageset/table_view_cell_info@2x.png",
+    "table_view_cell_info.imageset/table_view_cell_info@3x.png",
+  ]
+}

ios/chrome/browser/ui/table_view/cells/resources/table_view_cell_info.imageset/Contents.json

+{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "table_view_cell_info@2x.png",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "table_view_cell_info@3x.png",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "xcode"
+  }
+}
\ No newline at end of file

ios/chrome/browser/ui/table_view/cells/table_view_info_button_cell.h

@@ -34,10 +34,10 @@
 // UIButton displayed aligned to the trailing of the view.
 @property(nonatomic, readonly, strong) UIButton* trailingButton;
 
-// Sets the image that should be displayed at the leading edge of the cell. If
-// set to nil, the icon will be hidden and the remaining content will expand to
-// fill the full width of the cell.
-- (void)setIconImage:(UIImage*)image;
+// Sets the icon |image| and tint |color| for it that should be displayed at the
+// leading edge of the cell. If set to nil, the icon will be hidden and the
+// remaining content will expand to fill the full width of the cell.
+- (void)setIconImage:(UIImage*)image withTintColor:(UIColor*)color;
 
 @end
 

ios/chrome/browser/ui/table_view/cells/table_view_info_button_cell.mm

@@ -92,7 +92,12 @@ const CGFloat kCellLabelsWidthProportion = 0.2f;
     _statusTextLabel.textColor = UIColor.cr_secondaryLabelColor;
     [self.contentView addSubview:_statusTextLabel];
 
-    _trailingButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
+    _trailingButton = [UIButton buttonWithType:UIButtonTypeSystem];
+    [_trailingButton
+        setImage:[[UIImage imageNamed:@"table_view_cell_info"]
+                     imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]
+        forState:UIControlStateNormal];
+    _trailingButton.tintColor = [UIColor colorNamed:kBlueColor];
     _trailingButton.translatesAutoresizingMaskIntoConstraints = NO;
     [_trailingButton
         setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh + 1
@@ -210,16 +215,24 @@ const CGFloat kCellLabelsWidthProportion = 0.2f;
     }
 
     AddOptionalVerticalPadding(self.contentView, textLayoutGuide,
-                               kTableViewOneLabelCellVerticalSpacing);
+                               kTableViewTwoLabelsCellVerticalSpacing);
   }
   return self;
 }
 
-- (void)setIconImage:(UIImage*)image {
-  BOOL hidden = (image == nil);
-  self.iconImageView.image = image;
+- (void)setIconImage:(UIImage*)image withTintColor:(UIColor*)color {
+  if (color) {
+    self.iconImageView.tintColor = color;
+    self.iconImageView.image =
+        [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+  } else {
+    self.iconImageView.image = image;
+  }
+
+  BOOL hidden = !image;
   if (hidden == self.iconImageView.hidden)
     return;
+
   self.iconImageView.hidden = hidden;
   if (hidden) {
     self.iconVisibleConstraint.active = NO;
@@ -259,7 +272,7 @@ const CGFloat kCellLabelsWidthProportion = 0.2f;
   self.detailTextLabel.text = nil;
   self.statusTextLabel.text = nil;
   self.trailingButton.tag = 0;
-  [self setIconImage:nil];
+  [self setIconImage:nil withTintColor:nil];
   [_trailingButton removeTarget:nil
                          action:nil
                forControlEvents:[_trailingButton allControlEvents]];

ios/chrome/browser/ui/table_view/cells/table_view_info_button_item.h

@@ -15,6 +15,9 @@
 // The filename for the leading icon. If empty, no icon will be shown.
 @property(nonatomic, copy) NSString* iconImageName;
 
+// Tint color for the icon.
+@property(nonatomic, strong) UIColor* tintColor;
+
 // The main text string.
 @property(nonatomic, copy) NSString* text;
 

ios/chrome/browser/ui/table_view/cells/table_view_info_button_item.mm

@@ -35,7 +35,7 @@
   if ([self.iconImageName length]) {
     iconImage = [UIImage imageNamed:self.iconImageName];
   }
-  [cell setIconImage:iconImage];
+  [cell setIconImage:iconImage withTintColor:self.tintColor];
 }
 
 @end