Introduce TableViewClearBrowsingDataCell

Introduce TableViewClearBrowsingDataCell, as specified in https://docs.google.com/presentation/d/1fVw0i0fuuuLbHDsYmVkQ4K8Cw5OMtKyl1RhWLKx_LtU/edit#slide=id.g4a820179a3_0_226, and apply it on TableViewClearBrowsingDataItem.
Changing the |cellClass| of TableViewClearBrowsingDataItem introduces no visible differences yet due to autolayout.

Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=935346
Change-Id: I9ad5ee02422998fd46aeca2e86a61539f35dd38a
Reviewed-on: https://chromium-review.googlesource.com/c/1474944
Commit-Queue: Huanzhong Huang <huanzhong@chromium.org>
Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Cr-Commit-Position: refs/heads/master@{#635555}

ios/chrome/browser/ui/settings/cells/table_view_clear_browsing_data_item.h

@@ -11,11 +11,12 @@ enum class BrowsingDataRemoveMask;
 
 // TableViewClearBrowsingDataItem contains the model data for a
 // TableViewTextCell in addition a BrowsingDataRemoveMask property.
-// TODO(crbug.com/894800): Remove this.
 @interface TableViewClearBrowsingDataItem : TableViewItem
 
-// Text of the TableViewTextCell
+@property(nonatomic, copy) NSString* imageName;
 @property(nonatomic, copy) NSString* text;
+@property(nonatomic, copy) NSString* detailText;
+@property(nonatomic, copy) NSString* optionalText;
 
 // Whether or not the cell should show a checkmark.
 @property(nonatomic, assign) BOOL checked;
@@ -25,4 +26,19 @@ enum class BrowsingDataRemoveMask;
 
 @end
 
+// TableViewClearBrowsingDataCell implements an TableViewCell subclass
+// containing a leading image icon and three text labels: a "title" label, a
+// "detail" label, and an optional third label in case we need more description
+// for the item. All three labels are laid out one after the other vertically
+// and fill the full width of the cell.
+@interface TableViewClearBrowsingDataCell : TableViewCell
+
+@property(nonatomic, strong) UILabel* textLabel;
+@property(nonatomic, strong) UILabel* detailTextLabel;
+@property(nonatomic, strong) UILabel* optionalTextLabel;
+
+- (void)setImage:(UIImage*)image;
+
+@end
+
 #endif  // IOS_CHROME_BROWSER_UI_SETTINGS_CELLS_TABLE_VIEW_CLEAR_BROWSING_DATA_ITEM_H_

ios/chrome/browser/ui/settings/cells/table_view_clear_browsing_data_item.mm

@@ -5,13 +5,24 @@
 #import "ios/chrome/browser/ui/settings/cells/table_view_clear_browsing_data_item.h"
 
 #include "base/mac/foundation_util.h"
-#import "ios/chrome/browser/ui/table_view/cells/table_view_text_item.h"
+#include "ios/chrome/browser/ui/table_view/cells/table_view_cells_constants.h"
 #import "ios/chrome/browser/ui/table_view/chrome_table_view_styler.h"
+#include "ios/chrome/browser/ui/util/uikit_ui_util.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
 #endif
 
+namespace {
+
+// Autolayout constants.
+const CGFloat kVerticalPadding = 13;
+const CGFloat kImageTrailingPadding = 14;
+const CGFloat kImageWidth = 30;
+const CGFloat kImageHeight = 30;
+
+}  // namespace
+
 @implementation TableViewClearBrowsingDataItem
 @synthesize checked = _checked;
 @synthesize dataTypeMask = _dataTypeMask;
@@ -20,7 +31,7 @@
 - (instancetype)initWithType:(NSInteger)type {
   self = [super initWithType:type];
   if (self) {
-    self.cellClass = [TableViewTextCell class];
+    self.cellClass = [TableViewClearBrowsingDataCell class];
   }
   return self;
 }
@@ -28,12 +39,199 @@
 - (void)configureCell:(TableViewCell*)tableCell
            withStyler:(ChromeTableViewStyler*)styler {
   [super configureCell:tableCell withStyler:styler];
-  TableViewTextCell* cell =
-      base::mac::ObjCCastStrict<TableViewTextCell>(tableCell);
+  TableViewClearBrowsingDataCell* cell =
+      base::mac::ObjCCastStrict<TableViewClearBrowsingDataCell>(tableCell);
+  UIImage* image = nil;
+  if ([self.imageName length]) {
+    image = [UIImage imageNamed:self.imageName];
+  }
+  [cell setImage:image];
   cell.textLabel.text = self.text;
-  cell.textLabel.textColor = [UIColor blackColor];
-  cell.checked = self.checked;
-  cell.textLabel.backgroundColor = styler.tableViewBackgroundColor;
+  cell.detailTextLabel.text = self.detailText;
+  cell.optionalTextLabel.text = self.optionalText;
+  cell.accessoryType = self.checked ? UITableViewCellAccessoryCheckmark
+                                    : UITableViewCellAccessoryNone;
+}
+
+@end
+
+#pragma mark - TableViewClearBrowsingDataCell
+
+@interface TableViewClearBrowsingDataCell ()
+
+@property(nonatomic, strong) UIImageView* imageView;
+@property(nonatomic, strong) NSLayoutConstraint* imageHiddenConstraint;
+@property(nonatomic, strong) NSLayoutConstraint* imageVisibleConstraint;
+@property(nonatomic, copy) NSArray<NSLayoutConstraint*>* standardConstraints;
+@property(nonatomic, copy)
+    NSArray<NSLayoutConstraint*>* accessibilityConstraints;
+
+// Virtual label container contains |textLabel| and |detailTextLabel|.
+@property(nonatomic, strong) UILayoutGuide* labelContainerGuide;
+
+@end
+
+@implementation TableViewClearBrowsingDataCell
+
+@synthesize imageView = _imageView;
+@synthesize textLabel = _textLabel;
+@synthesize detailTextLabel = _detailTextLabel;
+
+- (instancetype)initWithStyle:(UITableViewCellStyle)style
+              reuseIdentifier:(NSString*)reuseIdentifier {
+  self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
+  if (self) {
+    self.isAccessibilityElement = YES;
+
+    _imageView = [[UIImageView alloc] init];
+    _imageView.translatesAutoresizingMaskIntoConstraints = NO;
+    [self.contentView addSubview:_imageView];
+
+    _textLabel = [[UILabel alloc] init];
+    _textLabel.numberOfLines = 0;
+    _textLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _textLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+    _textLabel.adjustsFontForContentSizeCategory = YES;
+    [self.contentView addSubview:_textLabel];
+
+    _detailTextLabel = [[UILabel alloc] init];
+    _detailTextLabel.numberOfLines = 0;
+    _detailTextLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _detailTextLabel.font =
+        [UIFont preferredFontForTextStyle:UIFontTextStyleFootnote];
+    _detailTextLabel.adjustsFontForContentSizeCategory = YES;
+    [self.contentView addSubview:_detailTextLabel];
+
+    _optionalTextLabel = [[UILabel alloc] init];
+    _optionalTextLabel.numberOfLines = 0;
+    _optionalTextLabel.textColor =
+        UIColorFromRGB(kTableViewSecondaryLabelLightGrayTextColor);
+    _optionalTextLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _optionalTextLabel.font =
+        [UIFont preferredFontForTextStyle:UIFontTextStyleFootnote];
+    _optionalTextLabel.adjustsFontForContentSizeCategory = YES;
+    [self.contentView addSubview:_optionalTextLabel];
+
+    _labelContainerGuide = [[UILayoutGuide alloc] init];
+    [self.contentView addLayoutGuide:_labelContainerGuide];
+
+    _imageHiddenConstraint = [_labelContainerGuide.leadingAnchor
+        constraintEqualToAnchor:self.contentView.leadingAnchor
+                       constant:kTableViewHorizontalSpacing];
+    _imageVisibleConstraint = [_labelContainerGuide.leadingAnchor
+        constraintEqualToAnchor:_imageView.trailingAnchor
+                       constant:kImageTrailingPadding];
+    _standardConstraints = @[
+      [_imageView.centerYAnchor
+          constraintEqualToAnchor:_labelContainerGuide.centerYAnchor],
+    ];
+    _accessibilityConstraints = @[
+      [_imageView.centerYAnchor
+          constraintEqualToAnchor:_textLabel.centerYAnchor],
+    ];
+
+    [NSLayoutConstraint activateConstraints:@[
+      // |imageView| constraints.
+      _imageHiddenConstraint,
+      [_imageView.leadingAnchor
+          constraintEqualToAnchor:self.contentView.leadingAnchor
+                         constant:kTableViewHorizontalSpacing],
+      [_imageView.widthAnchor constraintEqualToConstant:kImageWidth],
+      [_imageView.heightAnchor constraintEqualToConstant:kImageHeight],
+
+      // Labels x axis constraints.
+      [_textLabel.leadingAnchor
+          constraintEqualToAnchor:_labelContainerGuide.leadingAnchor],
+      [_textLabel.trailingAnchor
+          constraintEqualToAnchor:_labelContainerGuide.trailingAnchor],
+      [_detailTextLabel.leadingAnchor
+          constraintEqualToAnchor:_labelContainerGuide.leadingAnchor],
+      [_detailTextLabel.trailingAnchor
+          constraintEqualToAnchor:_labelContainerGuide.trailingAnchor],
+      [_optionalTextLabel.leadingAnchor
+          constraintEqualToAnchor:_labelContainerGuide.leadingAnchor],
+      [_optionalTextLabel.trailingAnchor
+          constraintEqualToAnchor:_labelContainerGuide.trailingAnchor],
+      [_labelContainerGuide.trailingAnchor
+          constraintEqualToAnchor:self.contentView.trailingAnchor
+                         constant:-kTableViewHorizontalSpacing],
+
+      // Labels y axis constraints.
+      [_labelContainerGuide.topAnchor
+          constraintEqualToAnchor:self.contentView.topAnchor
+                         constant:kVerticalPadding],
+      [_textLabel.topAnchor
+          constraintEqualToAnchor:_labelContainerGuide.topAnchor],
+      [_detailTextLabel.topAnchor
+          constraintEqualToAnchor:_textLabel.bottomAnchor],
+      [_labelContainerGuide.bottomAnchor
+          constraintEqualToAnchor:_detailTextLabel.bottomAnchor],
+      [_optionalTextLabel.topAnchor
+          constraintEqualToAnchor:_labelContainerGuide.bottomAnchor],
+      [_optionalTextLabel.bottomAnchor
+          constraintEqualToAnchor:self.contentView.bottomAnchor
+                         constant:-kVerticalPadding],
+    ]];
+
+    [self updateConstraintsForCategoryAccessibility:
+              UIContentSizeCategoryIsAccessibilityCategory(
+                  self.traitCollection.preferredContentSizeCategory)];
+  }
+  return self;
+}
+
+- (void)setImage:(UIImage*)image {
+  self.imageView.image = image;
+  self.imageView.highlightedImage =
+      [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+  if (self.imageView.image == nil) {
+    self.imageVisibleConstraint.active = NO;
+    self.imageHiddenConstraint.active = YES;
+  } else {
+    self.imageHiddenConstraint.active = NO;
+    self.imageVisibleConstraint.active = YES;
+  }
+}
+
+#pragma mark - UIView
+
+- (void)traitCollectionDidChange:(UITraitCollection*)previousTraitCollection {
+  [super traitCollectionDidChange:previousTraitCollection];
+  BOOL isPreferredCategoryAccessibility =
+      UIContentSizeCategoryIsAccessibilityCategory(
+          self.traitCollection.preferredContentSizeCategory);
+  if (isPreferredCategoryAccessibility !=
+      UIContentSizeCategoryIsAccessibilityCategory(
+          previousTraitCollection.preferredContentSizeCategory)) {
+    [self updateConstraintsForCategoryAccessibility:
+              isPreferredCategoryAccessibility];
+  }
+}
+
+#pragma mark - Private
+
+// Updates layout constraints according to whether the preferred content size
+// category is an accessibility category.
+- (void)updateConstraintsForCategoryAccessibility:
+    (BOOL)isPreferredCategoryAccessibility {
+  if (isPreferredCategoryAccessibility) {
+    [NSLayoutConstraint deactivateConstraints:_standardConstraints];
+    [NSLayoutConstraint activateConstraints:_accessibilityConstraints];
+  } else {
+    [NSLayoutConstraint deactivateConstraints:_accessibilityConstraints];
+    [NSLayoutConstraint activateConstraints:_standardConstraints];
+  }
+}
+
+#pragma mark - UIAccessibility
+
+- (NSString*)accessibilityLabel {
+  return self.textLabel.text;
+}
+
+- (NSString*)accessibilityValue {
+  return [@[ self.detailTextLabel.text, self.optionalTextLabel.text ]
+      componentsJoinedByString:@". "];
 }
 
 @end