[iOS] Create new AccountControlItem

This CL moves the existing AccountControlItem to Legacy and creates a
new AccountControlItem compatible with UITableView.

Bug: 894791
Change-Id: I22a6ececd54ebd030932ea977e29b8742f6f5501
Reviewed-on: https://chromium-review.googlesource.com/c/1373820
Commit-Queue: Gauthier Ambard <gambard@chromium.org>
Reviewed-by: Jérôme Lebel <jlebel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#616682}

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

@@ -9,6 +9,8 @@ source_set("cells") {
   sources = [
     "account_control_item.h",
     "account_control_item.mm",
+    "legacy_account_control_item.h",
+    "legacy_account_control_item.mm",
     "signin_promo_item.h",
     "signin_promo_item.mm",
     "signin_promo_view.h",
@@ -47,6 +49,7 @@ source_set("unit_tests") {
   testonly = true
   sources = [
     "account_control_item_unittest.mm",
+    "legacy_account_control_item_unittest.mm",
     "signin_promo_item_unittest.mm",
     "signin_promo_view_unittest.mm",
     "table_view_account_item_unittest.mm",
@@ -78,6 +81,7 @@ source_set("unit_tests") {
     "//ios/chrome/browser/ui/commands",
     "//ios/chrome/browser/ui/signin_interaction/public",
     "//ios/chrome/browser/ui/table_view:styler",
+    "//ios/chrome/browser/ui/table_view/cells",
     "//ios/chrome/browser/unified_consent",
     "//ios/chrome/test:test_support",
     "//ios/public/provider/chrome/browser/signin:test_support",

ios/chrome/browser/ui/authentication/cells/account_control_item.h

@@ -1,4 +1,4 @@
-// Copyright 2016 The Chromium Authors. All rights reserved.
+// 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.
 
@@ -7,29 +7,24 @@
 
 #import <UIKit/UIKit.h>
 
-#import "ios/chrome/browser/ui/collection_view/cells/collection_view_cell_style.h"
-#import "ios/chrome/browser/ui/collection_view/cells/collection_view_item.h"
-#import "ios/third_party/material_components_ios/src/components/CollectionCells/src/MaterialCollectionCells.h"
+#import "ios/chrome/browser/ui/table_view/cells/table_view_item.h"
 
 // Item for account collection view and sign-in confirmation view.
-@interface AccountControlItem : CollectionViewItem
-
-// The style to use for the cell.
-@property(nonatomic, assign) CollectionViewCellStyle cellStyle;
+@interface AccountControlItem : TableViewItem
 
 @property(nonatomic, strong) UIImage* image;
 @property(nonatomic, copy) NSString* text;
 @property(nonatomic, copy) NSString* detailText;
 @property(nonatomic, assign) BOOL shouldDisplayError;
 
 // The accessory type for the represented cell.
-@property(nonatomic) MDCCollectionViewCellAccessoryType accessoryType;
+@property(nonatomic) UITableViewCellAccessoryType accessoryType;
 
 @end
 
 // Cell for account settings view with a leading imageView, title text label,
 // and detail text label. The imageView is top-leading aligned.
-@interface AccountControlCell : MDCCollectionViewCell
+@interface AccountControlCell : UITableViewCell
 
 @property(nonatomic, readonly, strong) UIImageView* imageView;
 @property(nonatomic, readonly, strong) UILabel* textLabel;

ios/chrome/browser/ui/authentication/cells/account_control_item.mm

@@ -1,42 +1,18 @@
-// Copyright 2016 The Chromium Authors. All rights reserved.
+// 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 "ios/chrome/browser/ui/authentication/cells/account_control_item.h"
 
-#import "ios/chrome/browser/ui/collection_view/cells/MDCCollectionViewCell+Chrome.h"
-#include "ios/chrome/browser/ui/collection_view/cells/collection_view_cell_constants.h"
-#import "ios/chrome/browser/ui/colors/MDCPalette+CrAdditions.h"
+#include "ios/chrome/browser/ui/table_view/cells/table_view_cells_constants.h"
 #import "ios/chrome/browser/ui/util/uikit_ui_util.h"
-#import "ios/third_party/material_components_ios/src/components/Typography/src/MaterialTypography.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
 #endif
 
-namespace {
-// Padding used on the leading and trailing edges of the cell.
-const CGFloat kHorizontalPadding = 16;
-
-// Padding used on the top and bottom edges of the cell.
-const CGFloat kVerticalPadding = 16;
-
-// Padding used between the image and text.
-const CGFloat kHorizontalPaddingBetweenImageAndText = 16;
-
-// Padding between top label and detail label.
-const CGFloat kVerticalPaddingBetweenLabelAndDetailLabel = 8;
-}  // namespace
-
 @implementation AccountControlItem
 
-@synthesize cellStyle = _cellStyle;
-@synthesize image = _image;
-@synthesize text = _text;
-@synthesize detailText = _detailText;
-@synthesize accessoryType = _accessoryType;
-@synthesize shouldDisplayError = _shouldDisplayError;
-
 - (instancetype)initWithType:(NSInteger)type {
   self = [super initWithType:type];
   if (self) {
@@ -46,36 +22,22 @@ - (instancetype)initWithType:(NSInteger)type {
   return self;
 }
 
-#pragma mark - CollectionViewItem
+#pragma mark - TableViewItem
 
-- (void)configureCell:(AccountControlCell*)cell {
-  [super configureCell:cell];
+- (void)configureCell:(AccountControlCell*)cell
+           withStyler:(ChromeTableViewStyler*)styler {
+  [super configureCell:cell withStyler:styler];
   cell.imageView.image = self.image;
-  [cell cr_setAccessoryType:self.accessoryType];
-
-  BOOL uikitStyle = self.cellStyle == CollectionViewCellStyle::kUIKit;
-  UIFont* textFont = uikitStyle ? [UIFont systemFontOfSize:kUIKitMainFontSize]
-                                : [MDCTypography body2Font];
-  UIColor* textColor = uikitStyle ? UIColorFromRGB(kUIKitMainTextColor)
-                                  : [[MDCPalette greyPalette] tint900];
-  UIFont* detailTextFont =
-      uikitStyle ? [UIFont systemFontOfSize:kUIKitMultilineDetailFontSize]
-                 : [MDCTypography body1Font];
-
-  UIColor* detailTextColor =
-      uikitStyle ? UIColorFromRGB(kUIKitMultilineDetailTextColor)
-                 : [[MDCPalette greyPalette] tint700];
-  if (self.shouldDisplayError) {
-    detailTextColor = [[MDCPalette cr_redPalette] tint700];
-  }
+  cell.accessoryType = self.accessoryType;
+
+  cell.textLabel.text = self.text;
+  cell.textLabel.textColor = UIColor.blackColor;
 
-  cell.textLabel.attributedText = [self attributedStringForText:self.text
-                                                           font:textFont
-                                                          color:textColor];
-  cell.detailTextLabel.attributedText =
-      [self attributedStringForText:self.detailText
-                               font:detailTextFont
-                              color:detailTextColor];
+  cell.detailTextLabel.text = self.detailText;
+  cell.detailTextLabel.textColor =
+      self.shouldDisplayError
+          ? UIColor.redColor
+          : UIColorFromRGB(kTableViewSecondaryLabelLightGrayTextColor);
 }
 
 #pragma mark - Helper methods
@@ -109,12 +71,12 @@ @implementation AccountControlCell
 @synthesize textLabel = _textLabel;
 @synthesize detailTextLabel = _detailTextLabel;
 
-- (instancetype)initWithFrame:(CGRect)frame {
-  self = [super initWithFrame:frame];
+- (instancetype)initWithStyle:(UITableViewCellStyle)style
+              reuseIdentifier:(NSString*)reuseIdentifier {
+  self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
   if (self) {
     self.isAccessibilityElement = YES;
     [self addSubviews];
-    [self setDefaultViewStyling];
     [self setViewConstraints];
   }
   return self;
@@ -127,25 +89,24 @@ - (void)addSubviews {
 
   _imageView = [[UIImageView alloc] init];
   _imageView.translatesAutoresizingMaskIntoConstraints = NO;
+  [_imageView
+      setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh + 1
+                                      forAxis:UILayoutConstraintAxisHorizontal];
   [contentView addSubview:_imageView];
 
   _textLabel = [[UILabel alloc] init];
+  _textLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+  _textLabel.adjustsFontForContentSizeCategory = YES;
   _textLabel.translatesAutoresizingMaskIntoConstraints = NO;
   [contentView addSubview:_textLabel];
 
   _detailTextLabel = [[UILabel alloc] init];
+  _detailTextLabel.font =
+      [UIFont preferredFontForTextStyle:UIFontTextStyleCaption1];
+  _detailTextLabel.adjustsFontForContentSizeCategory = YES;
   _detailTextLabel.translatesAutoresizingMaskIntoConstraints = NO;
-  [contentView addSubview:_detailTextLabel];
-}
-
-// Set default imageView styling and default font and text colors for labels.
-- (void)setDefaultViewStyling {
-  _imageView.contentMode = UIViewContentModeCenter;
-
-  _textLabel.font = [MDCTypography body2Font];
-  _textLabel.textColor = [[MDCPalette greyPalette] tint900];
-  _detailTextLabel.font = [MDCTypography body1Font];
   _detailTextLabel.numberOfLines = 0;
+  [contentView addSubview:_detailTextLabel];
 }
 
 // Set constraints on subviews.
@@ -157,30 +118,32 @@ - (void)setViewConstraints {
 
   [NSLayoutConstraint activateConstraints:@[
     // Set leading anchors.
-    [_imageView.leadingAnchor constraintEqualToAnchor:contentView.leadingAnchor
-                                             constant:kHorizontalPadding],
+    [_imageView.leadingAnchor
+        constraintEqualToAnchor:contentView.leadingAnchor
+                       constant:kTableViewHorizontalSpacing],
     [_detailTextLabel.leadingAnchor
         constraintEqualToAnchor:_textLabel.leadingAnchor],
     _textLeadingAnchorConstraint,
 
     // Set vertical anchors.
-    [_textLabel.topAnchor constraintEqualToAnchor:contentView.topAnchor
-                                         constant:kVerticalPadding],
+    [_textLabel.topAnchor
+        constraintEqualToAnchor:contentView.topAnchor
+                       constant:kTableViewLargeVerticalSpacing],
     [_textLabel.bottomAnchor
         constraintEqualToAnchor:_detailTextLabel.topAnchor
-                       constant:-kVerticalPaddingBetweenLabelAndDetailLabel],
+                       constant:-kTableViewVerticalSpacing],
     [_imageView.centerYAnchor constraintEqualToAnchor:_textLabel.centerYAnchor],
     [_detailTextLabel.bottomAnchor
         constraintEqualToAnchor:contentView.bottomAnchor
-                       constant:-kVerticalPadding],
+                       constant:-kTableViewLargeVerticalSpacing],
 
     // Set trailing anchors.
     [_textLabel.trailingAnchor
         constraintLessThanOrEqualToAnchor:contentView.trailingAnchor
-                                 constant:-kHorizontalPadding],
+                                 constant:-kTableViewHorizontalSpacing],
     [_detailTextLabel.trailingAnchor
         constraintLessThanOrEqualToAnchor:contentView.trailingAnchor
-                                 constant:-kHorizontalPadding],
+                                 constant:-kTableViewHorizontalSpacing],
   ]];
 }
 
@@ -191,33 +154,23 @@ - (void)layoutSubviews {
 
   // Adjust the text label preferredMaxLayoutWidth when the parent's width
   // changes, for instance on screen rotation.
-  CGFloat parentWidth = self.contentView.frame.size.width;
   if (_imageView.image) {
-    _detailTextLabel.preferredMaxLayoutWidth =
-        parentWidth - 2.f * kHorizontalPadding -
-        kHorizontalPaddingBetweenImageAndText - _imageView.image.size.width;
-    _textLeadingAnchorConstraint.constant =
-        kHorizontalPaddingBetweenImageAndText;
+    _textLeadingAnchorConstraint.constant = kTableViewHorizontalSpacing;
   } else {
-    _detailTextLabel.preferredMaxLayoutWidth =
-        parentWidth - 2.f * kHorizontalPadding;
     _textLeadingAnchorConstraint.constant = 0;
   }
-
-  // Re-layout with the new preferred width to allow the label to adjust its
-  // height.
-  [super layoutSubviews];
 }
 
-#pragma mark - UICollectionReusableView
+#pragma mark - UITableViewCell
 
 - (void)prepareForReuse {
   [super prepareForReuse];
   self.imageView.image = nil;
   self.textLabel.text = nil;
   self.detailTextLabel.text = nil;
-  self.accessoryType = MDCCollectionViewCellAccessoryNone;
-  self.detailTextLabel.textColor = [[MDCPalette greyPalette] tint700];
+  self.detailTextLabel.textColor =
+      UIColorFromRGB(kTableViewSecondaryLabelLightGrayTextColor);
+  self.accessoryType = UITableViewCellAccessoryNone;
 }
 
 #pragma mark - NSObject(Accessibility)

ios/chrome/browser/ui/authentication/cells/account_control_item_unittest.mm

@@ -4,7 +4,9 @@
 
 #import "ios/chrome/browser/ui/authentication/cells/account_control_item.h"
 
-#import "ios/chrome/browser/ui/colors/MDCPalette+CrAdditions.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"
+#import "ios/chrome/browser/ui/util/uikit_ui_util.h"
 #include "testing/gtest/include/gtest/gtest.h"
 #import "testing/gtest_mac.h"
 #include "testing/platform_test.h"
@@ -16,7 +18,7 @@
 using AccountControlItemTest = PlatformTest;
 
 // Tests that the cell is properly configured with image and texts after a call
-// to |configureCell:|. All other cell decorations are default.
+// to |configureCell:withStyler:|. All other cell decorations are default.
 TEST_F(AccountControlItemTest, ConfigureCellDefault) {
   AccountControlItem* item = [[AccountControlItem alloc] initWithType:0];
   UIImage* image = [[UIImage alloc] init];
@@ -35,21 +37,21 @@
   EXPECT_FALSE(accountCell.imageView.image);
   EXPECT_FALSE(accountCell.textLabel.text);
   EXPECT_FALSE(accountCell.detailTextLabel.text);
-  EXPECT_EQ(MDCCollectionViewCellAccessoryNone, accountCell.accessoryType);
-  EXPECT_NSEQ([[MDCPalette greyPalette] tint700],
+  EXPECT_EQ(UITableViewCellAccessoryNone, accountCell.accessoryType);
+  EXPECT_NSEQ(UIColorFromRGB(kTableViewSecondaryLabelLightGrayTextColor),
               accountCell.detailTextLabel.textColor);
 
-  [item configureCell:cell];
+  [item configureCell:cell withStyler:[[ChromeTableViewStyler alloc] init]];
   EXPECT_NSEQ(image, accountCell.imageView.image);
   EXPECT_NSEQ(mainText, accountCell.textLabel.text);
   EXPECT_NSEQ(detailText, accountCell.detailTextLabel.text);
-  EXPECT_EQ(MDCCollectionViewCellAccessoryNone, accountCell.accessoryType);
-  EXPECT_NSEQ([[MDCPalette greyPalette] tint700],
+  EXPECT_EQ(UITableViewCellAccessoryNone, accountCell.accessoryType);
+  EXPECT_NSEQ(UIColorFromRGB(kTableViewSecondaryLabelLightGrayTextColor),
               accountCell.detailTextLabel.textColor);
 }
 
 // Tests that the cell is properly configured with error and an accessory after
-// a call to |configureCell:|.
+// a call to |configureCell:withStyler:|.
 TEST_F(AccountControlItemTest, ConfigureCellWithErrorAndAccessory) {
   AccountControlItem* item = [[AccountControlItem alloc] initWithType:0];
   UIImage* image = [[UIImage alloc] init];
@@ -59,7 +61,7 @@
   item.image = image;
   item.text = mainText;
   item.detailText = detailText;
-  item.accessoryType = MDCCollectionViewCellAccessoryCheckmark;
+  item.accessoryType = UITableViewCellAccessoryCheckmark;
   item.shouldDisplayError = YES;
 
   id cell = [[[item cellClass] alloc] init];
@@ -70,15 +72,14 @@
   EXPECT_FALSE(accountCell.imageView.image);
   EXPECT_FALSE(accountCell.textLabel.text);
   EXPECT_FALSE(accountCell.detailTextLabel.text);
-  EXPECT_EQ(MDCCollectionViewCellAccessoryNone, accountCell.accessoryType);
-  EXPECT_NSEQ([[MDCPalette greyPalette] tint700],
+  EXPECT_EQ(UITableViewCellAccessoryNone, accountCell.accessoryType);
+  EXPECT_NSEQ(UIColorFromRGB(kTableViewSecondaryLabelLightGrayTextColor),
               accountCell.detailTextLabel.textColor);
 
-  [item configureCell:cell];
+  [item configureCell:cell withStyler:[[ChromeTableViewStyler alloc] init]];
   EXPECT_NSEQ(image, accountCell.imageView.image);
   EXPECT_NSEQ(mainText, accountCell.textLabel.text);
   EXPECT_NSEQ(detailText, accountCell.detailTextLabel.text);
-  EXPECT_EQ(MDCCollectionViewCellAccessoryCheckmark, accountCell.accessoryType);
-  EXPECT_NSEQ([[MDCPalette cr_redPalette] tint700],
-              accountCell.detailTextLabel.textColor);
+  EXPECT_EQ(UITableViewCellAccessoryCheckmark, accountCell.accessoryType);
+  EXPECT_NSEQ(UIColor.redColor, accountCell.detailTextLabel.textColor);
 }