[iOS] Update Encryption to UITableView

This CL updates the EncryptionCollectionVC to use a UITableVC instead
of the MDCCollectionVC.

Bug: 894791
Change-Id: I875bc29cb3a7b27242897e7301a0e7fe761d1fcd
Reviewed-on: https://chromium-review.googlesource.com/c/1350832
Commit-Queue: Gauthier Ambard <gambard@chromium.org>
Reviewed-by: Sergio Collazos <sczs@chromium.org>
Reviewed-by: Chris Lu <thegreenfrog@chromium.org>
Cr-Commit-Position: refs/heads/master@{#612116}

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

@@ -92,10 +92,10 @@ source_set("settings") {
     "settings_utils.mm",
     "sync_create_passphrase_collection_view_controller.h",
     "sync_create_passphrase_collection_view_controller.mm",
-    "sync_encryption_collection_view_controller.h",
-    "sync_encryption_collection_view_controller.mm",
     "sync_encryption_passphrase_collection_view_controller.h",
     "sync_encryption_passphrase_collection_view_controller.mm",
+    "sync_encryption_table_view_controller.h",
+    "sync_encryption_table_view_controller.mm",
     "sync_settings_collection_view_controller.h",
     "sync_settings_collection_view_controller.mm",
     "table_cell_catalog_view_controller.h",
@@ -292,8 +292,8 @@ source_set("unit_tests") {
     "settings_root_collection_view_controller_unittest.mm",
     "settings_root_table_view_controller_unittest.mm",
     "sync_create_passphrase_collection_view_controller_unittest.mm",
-    "sync_encryption_collection_view_controller_unittest.mm",
     "sync_encryption_passphrase_collection_view_controller_unittest.mm",
+    "sync_encryption_table_view_controller_unittest.mm",
     "sync_settings_collection_view_controller_unittest.mm",
     "time_range_selector_collection_view_controller_unittest.mm",
     "translate_table_view_controller_unittest.mm",

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

@@ -7,14 +7,13 @@
 
 #import <UIKit/UIKit.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 displaying possible options in the Sync Encryption screen.
-@interface EncryptionItem : CollectionViewItem
+@interface EncryptionItem : TableViewItem
 
 // The accessory type for the represented cell.
-@property(nonatomic) MDCCollectionViewCellAccessoryType accessoryType;
+@property(nonatomic) UITableViewCellAccessoryType accessoryType;
 
 // The text to display.
 @property(nonatomic, copy) NSString* text;
@@ -26,7 +25,7 @@
 @end
 
 // The cell associated to |EncryptionCell|.
-@interface EncryptionCell : MDCCollectionViewCell
+@interface EncryptionCell : UITableViewCell
 
 // UILabel corresponding to |text| from the item.
 @property(nonatomic, readonly, strong) UILabel* textLabel;

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

@@ -4,32 +4,14 @@
 
 #import "ios/chrome/browser/ui/settings/cells/encryption_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/table_view/cells/table_view_cells_constants.h"
 #import "ios/chrome/browser/ui/util/uikit_ui_util.h"
 #import "ios/chrome/common/ui_util/constraints_ui_util.h"
-#import "ios/third_party/material_components_ios/src/components/Palettes/src/MaterialPalettes.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;
-}  // namespace
-
-@interface EncryptionCell ()
-
-// Returns the default text color used for the given |enabled| state.
-+ (UIColor*)defaultTextColorForEnabledState:(BOOL)enabled;
-
-@end
-
 @implementation EncryptionItem
 
 @synthesize accessoryType = _accessoryType;
@@ -46,12 +28,14 @@ const CGFloat kVerticalPadding = 16;
   return self;
 }
 
-- (void)configureCell:(EncryptionCell*)cell {
-  [super configureCell:cell];
-  [cell cr_setAccessoryType:self.accessoryType];
+- (void)configureCell:(EncryptionCell*)cell
+           withStyler:(ChromeTableViewStyler*)styler {
+  [super configureCell:cell withStyler:styler];
+  cell.accessoryType = self.accessoryType;
   cell.textLabel.text = self.text;
   cell.textLabel.textColor =
-      [EncryptionCell defaultTextColorForEnabledState:self.enabled];
+      self.enabled ? [UIColor blackColor]
+                   : UIColorFromRGB(kTableViewSecondaryLabelLightGrayTextColor);
 }
 
 @end
@@ -60,70 +44,38 @@ const CGFloat kVerticalPadding = 16;
 
 @synthesize textLabel = _textLabel;
 
-+ (UIColor*)defaultTextColorForEnabledState:(BOOL)enabled {
-  MDCPalette* grey = [MDCPalette greyPalette];
-  return enabled ? grey.tint900 : grey.tint500;
-}
-
-- (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;
 
     _textLabel = [[UILabel alloc] init];
     _textLabel.translatesAutoresizingMaskIntoConstraints = NO;
     _textLabel.numberOfLines = 0;
-    _textLabel.font = [UIFont systemFontOfSize:kUIKitMainFontSize];
-    _textLabel.textColor = UIColorFromRGB(kUIKitMainTextColor);
+    _textLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+    _textLabel.adjustsFontForContentSizeCategory = YES;
     [self.contentView addSubview:_textLabel];
 
     // Set up the constraints.
     [NSLayoutConstraint activateConstraints:@[
       [_textLabel.leadingAnchor
           constraintEqualToAnchor:self.contentView.leadingAnchor
-                         constant:kHorizontalPadding],
+                         constant:kTableViewHorizontalSpacing],
       [_textLabel.trailingAnchor
           constraintEqualToAnchor:self.contentView.trailingAnchor
-                         constant:-kHorizontalPadding],
+                         constant:-kTableViewHorizontalSpacing],
     ]];
-    AddOptionalVerticalPadding(self.contentView, _textLabel, kVerticalPadding);
+    AddOptionalVerticalPadding(self.contentView, _textLabel,
+                               kTableViewLargeVerticalSpacing);
   }
   return self;
 }
 
-- (void)layoutSubviews {
-  // When the accessory type is None, the content view of the cell (and thus)
-  // the labels inside it span larger than when there is a Checkmark accessory
-  // type. That means that toggling the accessory type can induce a rewrapping
-  // of the detail text, which is not visually pleasing. To alleviate that
-  // issue, always lay out the cell as if there was a Checkmark accessory type.
-  //
-  // Force the accessory type to Checkmark for the duration of layout.
-  MDCCollectionViewCellAccessoryType realAccessoryType = self.accessoryType;
-  self.accessoryType = MDCCollectionViewCellAccessoryCheckmark;
-
-  // Implement -layoutSubviews as per instructions in documentation for
-  // +[MDCCollectionViewCell cr_preferredHeightForWidth:forItem:].
-  [super layoutSubviews];
-
-  // Adjust the text label preferredMaxLayoutWidth when the parent's width
-  // changes, for instance on screen rotation.
-  _textLabel.preferredMaxLayoutWidth =
-      CGRectGetWidth(self.contentView.frame) - 2 * kHorizontalPadding;
-
-  // Re-layout with the new preferred width to allow the label to adjust its
-  // height.
-  [super layoutSubviews];
-
-  // Restore the real accessory type at the end of the layout.
-  self.accessoryType = realAccessoryType;
-}
-
 - (void)prepareForReuse {
   [super prepareForReuse];
-  self.accessoryType = MDCCollectionViewCellAccessoryNone;
+  self.accessoryType = UITableViewCellAccessoryNone;
   self.textLabel.text = nil;
-  [EncryptionCell defaultTextColorForEnabledState:YES];
 }
 
 #pragma mark - UIAccessibility

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

@@ -4,6 +4,7 @@
 
 #import "ios/chrome/browser/ui/settings/cells/encryption_item.h"
 
+#import "ios/chrome/browser/ui/table_view/chrome_table_view_styler.h"
 #include "testing/gtest/include/gtest/gtest.h"
 #import "testing/gtest_mac.h"
 #include "testing/platform_test.h"
@@ -28,12 +29,12 @@ TEST_F(EncryptionItemTest, ConfigureCell) {
 
   item.text = text;
   item.enabled = NO;
-  item.accessoryType = MDCCollectionViewCellAccessoryCheckmark;
-  [item configureCell:cell];
+  item.accessoryType = UITableViewCellAccessoryCheckmark;
+  [item configureCell:cell withStyler:[[ChromeTableViewStyler alloc] init]];
 
   EXPECT_NSEQ(text, cell.textLabel.text);
   EXPECT_NE(enabledColor, cell.textLabel.textColor);
-  EXPECT_EQ(MDCCollectionViewCellAccessoryCheckmark, cell.accessoryType);
+  EXPECT_EQ(UITableViewCellAccessoryCheckmark, cell.accessoryType);
 }
 
 }  // namespace

ios/chrome/browser/ui/settings/google_services_settings_coordinator.mm

@@ -24,8 +24,8 @@
 #import "ios/chrome/browser/ui/settings/google_services_settings_local_commands.h"
 #import "ios/chrome/browser/ui/settings/google_services_settings_mediator.h"
 #import "ios/chrome/browser/ui/settings/google_services_settings_view_controller.h"
-#import "ios/chrome/browser/ui/settings/sync_encryption_collection_view_controller.h"
 #import "ios/chrome/browser/ui/settings/sync_encryption_passphrase_collection_view_controller.h"
+#import "ios/chrome/browser/ui/settings/sync_encryption_table_view_controller.h"
 #include "ios/chrome/browser/unified_consent/unified_consent_service_factory.h"
 #include "ios/public/provider/chrome/browser/chrome_browser_provider.h"
 #import "ios/public/provider/chrome/browser/signin/chrome_identity_browser_opener.h"
@@ -168,14 +168,14 @@
 - (void)openEncryptionDialog {
   browser_sync::ProfileSyncService* syncService =
       ProfileSyncServiceFactory::GetForBrowserState(self.browserState);
-  SettingsRootCollectionViewController* controllerToPush;
+  UIViewController<SettingsRootViewControlling>* controllerToPush;
   // If there was a sync error, prompt the user to enter the passphrase.
   // Otherwise, show the full encryption options.
   if (syncService->IsPassphraseRequired()) {
     controllerToPush = [[SyncEncryptionPassphraseCollectionViewController alloc]
         initWithBrowserState:self.browserState];
   } else {
-    controllerToPush = [[SyncEncryptionCollectionViewController alloc]
+    controllerToPush = [[SyncEncryptionTableViewController alloc]
         initWithBrowserState:self.browserState];
   }
   controllerToPush.dispatcher = self.dispatcher;

ios/chrome/browser/ui/settings/material_cell_catalog_view_controller.mm

@@ -33,7 +33,6 @@
 #import "ios/chrome/browser/ui/settings/cells/account_signin_item.h"
 #import "ios/chrome/browser/ui/settings/cells/card_multiline_item.h"
 #import "ios/chrome/browser/ui/settings/cells/copied_to_chrome_item.h"
-#import "ios/chrome/browser/ui/settings/cells/encryption_item.h"
 #import "ios/chrome/browser/ui/settings/cells/import_data_multiline_detail_item.h"
 #import "ios/chrome/browser/ui/settings/cells/legacy/legacy_autofill_data_item.h"
 #import "ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.h"
@@ -112,8 +111,6 @@ typedef NS_ENUM(NSInteger, ItemType) {
   ItemTypeAutofillStatus,
   ItemTypeAccountControlDynamicHeight,
   ItemTypeFooter,
-  ItemTypeSyncEncryption,
-  ItemTypeSyncEncryptionChecked,
   ItemTypeSyncPassphraseError,
   ItemTypeContentSuggestions,
   ItemTypeImageDetailTextItem,
@@ -407,10 +404,6 @@ const CGFloat kCardIssuerNetworkIconDimension = 25.0;
 
   // Sync cells.
   [model addSectionWithIdentifier:SectionIdentifierSync];
-  [model addItem:[self syncEncryptionItem]
-      toSectionWithIdentifier:SectionIdentifierSync];
-  [model addItem:[self syncEncryptionCheckedItem]
-      toSectionWithIdentifier:SectionIdentifierSync];
   [model addItem:[self syncPassphraseErrorItem]
       toSectionWithIdentifier:SectionIdentifierSync];
 
@@ -469,8 +462,6 @@ const CGFloat kCardIssuerNetworkIconDimension = 25.0;
     case ItemTypeAutofillDynamicHeight:
     case ItemTypeColdStateSigninPromo:
     case ItemTypeWarmStateSigninPromo:
-    case ItemTypeSyncEncryption:
-    case ItemTypeSyncEncryptionChecked:
       return [MDCCollectionViewCell
           cr_preferredHeightForWidth:CGRectGetWidth(collectionView.bounds)
                              forItem:item];
@@ -846,27 +837,6 @@ const CGFloat kCardIssuerNetworkIconDimension = 25.0;
   return footerItem;
 }
 
-- (EncryptionItem*)syncEncryptionItem {
-  EncryptionItem* item =
-      [[EncryptionItem alloc] initWithType:ItemTypeSyncEncryption];
-  item.text =
-      @"These two cells have exactly the same text, but one has a checkmark "
-      @"and the other does not.  They should lay out identically, and the "
-      @"presence of the checkmark should not cause the text to reflow.";
-  return item;
-}
-
-- (EncryptionItem*)syncEncryptionCheckedItem {
-  EncryptionItem* item =
-      [[EncryptionItem alloc] initWithType:ItemTypeSyncEncryptionChecked];
-  item.text =
-      @"These two cells have exactly the same text, but one has a checkmark "
-      @"and the other does not.  They should lay out identically, and the "
-      @"presence of the checkmark should not cause the text to reflow.";
-  item.accessoryType = MDCCollectionViewCellAccessoryCheckmark;
-  return item;
-}
-
 - (PassphraseErrorItem*)syncPassphraseErrorItem {
   PassphraseErrorItem* item =
       [[PassphraseErrorItem alloc] initWithType:ItemTypeSyncPassphraseError];

ios/chrome/browser/ui/settings/sync_encryption_collection_view_controller.h → ios/chrome/browser/ui/settings/sync_encryption_table_view_controller.h

@@ -2,26 +2,26 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-#ifndef IOS_CHROME_BROWSER_UI_SETTINGS_SYNC_ENCRYPTION_COLLECTION_VIEW_CONTROLLER_H_
-#define IOS_CHROME_BROWSER_UI_SETTINGS_SYNC_ENCRYPTION_COLLECTION_VIEW_CONTROLLER_H_
+#ifndef IOS_CHROME_BROWSER_UI_SETTINGS_SYNC_ENCRYPTION_TABLE_VIEW_CONTROLLER_H_
+#define IOS_CHROME_BROWSER_UI_SETTINGS_SYNC_ENCRYPTION_TABLE_VIEW_CONTROLLER_H_
 
-#import "ios/chrome/browser/ui/settings/settings_root_collection_view_controller.h"
+#import "ios/chrome/browser/ui/settings/settings_root_table_view_controller.h"
 
 namespace ios {
 class ChromeBrowserState;
 }  // namespace ios
 
 // Controller to allow user to specify encryption passphrase for Sync.
-@interface SyncEncryptionCollectionViewController
-    : SettingsRootCollectionViewController
+@interface SyncEncryptionTableViewController : SettingsRootTableViewController
 
 // Designated initializer. |browserState| must not be nil.
 - (instancetype)initWithBrowserState:(ios::ChromeBrowserState*)browserState
     NS_DESIGNATED_INITIALIZER;
-- (instancetype)initWithLayout:(UICollectionViewLayout*)layout
-                         style:(CollectionViewControllerStyle)style
+- (instancetype)initWithTableViewStyle:(UITableViewStyle)style
+                           appBarStyle:
+                               (ChromeTableViewControllerStyle)appBarStyle
     NS_UNAVAILABLE;
 
 @end
 
-#endif  // IOS_CHROME_BROWSER_UI_SETTINGS_SYNC_ENCRYPTION_COLLECTION_VIEW_CONTROLLER_H_
+#endif  // IOS_CHROME_BROWSER_UI_SETTINGS_SYNC_ENCRYPTION_TABLE_VIEW_CONTROLLER_H_

ios/chrome/browser/ui/settings/sync_encryption_collection_view_controller.mm → ios/chrome/browser/ui/settings/sync_encryption_table_view_controller.mm

@@ -2,10 +2,11 @@
 // 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/settings/sync_encryption_collection_view_controller.h"
+#import "ios/chrome/browser/ui/settings/sync_encryption_table_view_controller.h"
 
 #include <memory>
 
+#include "base/mac/foundation_util.h"
 #include "base/strings/sys_string_conversions.h"
 #include "components/browser_sync/profile_sync_service.h"
 #include "components/google/core/common/google_util.h"
@@ -16,14 +17,14 @@
 #include "ios/chrome/browser/chrome_url_constants.h"
 #include "ios/chrome/browser/sync/profile_sync_service_factory.h"
 #import "ios/chrome/browser/sync/sync_observer_bridge.h"
-#import "ios/chrome/browser/ui/collection_view/cells/MDCCollectionViewCell+Chrome.h"
-#import "ios/chrome/browser/ui/collection_view/cells/collection_view_footer_item.h"
-#import "ios/chrome/browser/ui/collection_view/cells/collection_view_item.h"
-#import "ios/chrome/browser/ui/collection_view/collection_view_model.h"
 #import "ios/chrome/browser/ui/settings/cells/encryption_item.h"
 #import "ios/chrome/browser/ui/settings/settings_utils.h"
 #import "ios/chrome/browser/ui/settings/sync_create_passphrase_collection_view_controller.h"
 #import "ios/chrome/browser/ui/settings/sync_encryption_passphrase_collection_view_controller.h"
+#import "ios/chrome/browser/ui/table_view/cells/table_view_cells_constants.h"
+#import "ios/chrome/browser/ui/table_view/cells/table_view_item.h"
+#import "ios/chrome/browser/ui/table_view/cells/table_view_link_header_footer_item.h"
+#import "ios/chrome/browser/ui/table_view/table_view_model.h"
 #include "ios/chrome/grit/ios_strings.h"
 #include "ui/base/l10n/l10n_util_mac.h"
 #include "url/gurl.h"
@@ -36,7 +37,6 @@ namespace {
 
 typedef NS_ENUM(NSInteger, SectionIdentifier) {
   SectionIdentifierEncryption = kSectionIdentifierEnumZero,
-  SectionIdentifierFooter,
 };
 
 typedef NS_ENUM(NSInteger, ItemType) {
@@ -47,28 +47,20 @@ typedef NS_ENUM(NSInteger, ItemType) {
 
 }  // namespace
 
-@interface SyncEncryptionCollectionViewController ()<SyncObserverModelBridge> {
+@interface SyncEncryptionTableViewController () <SyncObserverModelBridge> {
   ios::ChromeBrowserState* _browserState;
   std::unique_ptr<SyncObserverBridge> _syncObserver;
   BOOL _isUsingSecondaryPassphrase;
 }
-// Returns an account item.
-- (CollectionViewItem*)accountItem;
-
-// Returns a passphrase item.
-- (CollectionViewItem*)passphraseItem;
-
-// Returns a footer item with a link.
-- (CollectionViewItem*)footerItem;
 @end
 
-@implementation SyncEncryptionCollectionViewController
+@implementation SyncEncryptionTableViewController
 
 - (instancetype)initWithBrowserState:(ios::ChromeBrowserState*)browserState {
   DCHECK(browserState);
-  UICollectionViewLayout* layout = [[MDCCollectionViewFlowLayout alloc] init];
   self =
-      [super initWithLayout:layout style:CollectionViewControllerStyleAppBar];
+      [super initWithTableViewStyle:UITableViewStyleGrouped
+                        appBarStyle:ChromeTableViewControllerStyleWithAppBar];
   if (self) {
     self.title = l10n_util::GetNSString(IDS_IOS_SYNC_ENCRYPTION_TITLE);
     _browserState = browserState;
@@ -77,18 +69,22 @@ typedef NS_ENUM(NSInteger, ItemType) {
     _isUsingSecondaryPassphrase = syncService->IsEngineInitialized() &&
                                   syncService->IsUsingSecondaryPassphrase();
     _syncObserver = std::make_unique<SyncObserverBridge>(self, syncService);
-    // TODO(crbug.com/764578): -loadModel should not be called from
-    // initializer. A possible fix is to move this call to -viewDidLoad.
-    [self loadModel];
   }
   return self;
 }
 
+- (void)viewDidLoad {
+  [super viewDidLoad];
+  self.tableView.estimatedSectionFooterHeight =
+      kTableViewHeaderFooterViewHeight;
+  [self loadModel];
+}
+
 #pragma mark - SettingsRootCollectionViewController
 
 - (void)loadModel {
   [super loadModel];
-  CollectionViewModel* model = self.collectionViewModel;
+  TableViewModel* model = self.tableViewModel;
 
   [model addSectionWithIdentifier:SectionIdentifierEncryption];
   [model addItem:[self accountItem]
@@ -97,15 +93,15 @@ typedef NS_ENUM(NSInteger, ItemType) {
       toSectionWithIdentifier:SectionIdentifierEncryption];
 
   if (_isUsingSecondaryPassphrase) {
-    [model addSectionWithIdentifier:SectionIdentifierFooter];
-    [model addItem:[self footerItem]
-        toSectionWithIdentifier:SectionIdentifierFooter];
+    [model setFooter:[self footerItem]
+        forSectionWithIdentifier:SectionIdentifierEncryption];
   }
 }
 
 #pragma mark - Items
 
-- (CollectionViewItem*)accountItem {
+// Returns an account item.
+- (TableViewItem*)accountItem {
   DCHECK(browser_sync::ProfileSyncService::IsSyncAllowedByFlag());
   NSString* text = l10n_util::GetNSString(IDS_SYNC_BASIC_ENCRYPTION_DATA);
   return [self itemWithType:ItemTypeAccount
@@ -114,7 +110,8 @@ typedef NS_ENUM(NSInteger, ItemType) {
                     enabled:!_isUsingSecondaryPassphrase];
 }
 
-- (CollectionViewItem*)passphraseItem {
+// Returns a passphrase item.
+- (TableViewItem*)passphraseItem {
   DCHECK(browser_sync::ProfileSyncService::IsSyncAllowedByFlag());
   NSString* text = l10n_util::GetNSString(IDS_SYNC_FULL_ENCRYPTION_DATA);
   return [self itemWithType:ItemTypePassphrase
@@ -123,69 +120,53 @@ typedef NS_ENUM(NSInteger, ItemType) {
                     enabled:!_isUsingSecondaryPassphrase];
 }
 
-- (CollectionViewItem*)footerItem {
-  CollectionViewFooterItem* footerItem =
-      [[CollectionViewFooterItem alloc] initWithType:ItemTypeFooter];
-  footerItem.cellStyle = CollectionViewCellStyle::kUIKit;
+// Returns a footer item with a link.
+- (TableViewHeaderFooterItem*)footerItem {
+  TableViewLinkHeaderFooterItem* footerItem =
+      [[TableViewLinkHeaderFooterItem alloc] initWithType:ItemTypeFooter];
   footerItem.text =
       l10n_util::GetNSString(IDS_IOS_SYNC_ENCRYPTION_PASSPHRASE_HINT);
   footerItem.linkURL = google_util::AppendGoogleLocaleParam(
       GURL(kSyncGoogleDashboardURL),
       GetApplicationContext()->GetApplicationLocale());
-  footerItem.linkDelegate = self;
   return footerItem;
 }
 
-#pragma mark - MDCCollectionViewStylingDelegate
-
-- (MDCCollectionViewCellStyle)collectionView:(UICollectionView*)collectionView
-                         cellStyleForSection:(NSInteger)section {
-  NSInteger sectionIdentifier =
-      [self.collectionViewModel sectionIdentifierForSection:section];
-  switch (sectionIdentifier) {
-    case SectionIdentifierFooter:
-      // Display the Learn More footer in the default style with no "card" UI
-      // and no section padding.
-      return MDCCollectionViewCellStyleDefault;
-    default:
-      return self.styler.cellStyle;
+#pragma mark - UITableViewDelegate
+
+- (UIView*)tableView:(UITableView*)tableView
+    viewForFooterInSection:(NSInteger)section {
+  UIView* footerView = [super tableView:tableView
+                 viewForFooterInSection:section];
+  if (SectionIdentifierEncryption ==
+          [self.tableViewModel sectionIdentifierForSection:section] &&
+      [self.tableViewModel footerForSection:section]) {
+    TableViewLinkHeaderFooterView* footer =
+        base::mac::ObjCCastStrict<TableViewLinkHeaderFooterView>(footerView);
+    footer.delegate = self;
   }
+  return footerView;
 }
 
-- (BOOL)collectionView:(UICollectionView*)collectionView
-    shouldHideItemBackgroundAtIndexPath:(NSIndexPath*)indexPath {
-  NSInteger sectionIdentifier =
-      [self.collectionViewModel sectionIdentifierForSection:indexPath.section];
-  switch (sectionIdentifier) {
-    case SectionIdentifierFooter:
-      // Display the Learn More footer without any background image or
-      // shadowing.
-      return YES;
-    default:
-      return NO;
+- (BOOL)tableView:(UITableView*)tableView
+    shouldHighlightRowAtIndexPath:(NSIndexPath*)indexPath {
+  TableViewItem* item = [self.tableViewModel itemAtIndexPath:indexPath];
+  if (item.type == ItemTypePassphrase || item.type == ItemTypeAccount) {
+    EncryptionItem* encryptionItem =
+        base::mac::ObjCCastStrict<EncryptionItem>(item);
+    // Don't perform any action if the cell isn't enabled.
+    return encryptionItem.isEnabled;
   }
+  return YES;
 }
 
-- (CGFloat)collectionView:(UICollectionView*)collectionView
-    cellHeightAtIndexPath:(NSIndexPath*)indexPath {
-  CollectionViewItem* item =
-      [self.collectionViewModel itemAtIndexPath:indexPath];
-  return [MDCCollectionViewCell
-      cr_preferredHeightForWidth:CGRectGetWidth(collectionView.bounds)
-                         forItem:item];
-}
-
-#pragma mark - UICollectionViewDelegate
-
-- (void)collectionView:(UICollectionView*)collectionView
-    didSelectItemAtIndexPath:(NSIndexPath*)indexPath {
-  [super collectionView:collectionView didSelectItemAtIndexPath:indexPath];
+- (void)tableView:(UITableView*)tableView
+    didSelectRowAtIndexPath:(NSIndexPath*)indexPath {
   DCHECK_EQ(indexPath.section,
-            [self.collectionViewModel
+            [self.tableViewModel
                 sectionForSectionIdentifier:SectionIdentifierEncryption]);
 
-  CollectionViewItem* item =
-      [self.collectionViewModel itemAtIndexPath:indexPath];
+  TableViewItem* item = [self.tableViewModel itemAtIndexPath:indexPath];
   if ([item respondsToSelector:@selector(isEnabled)] &&
       ![item performSelector:@selector(isEnabled)]) {
     // Don't perform any action if the cell isn't enabled.
@@ -211,6 +192,8 @@ typedef NS_ENUM(NSInteger, ItemType) {
     default:
       break;
   }
+
+  [tableView deselectRowAtIndexPath:indexPath animated:NO];
 }
 
 #pragma mark SyncObserverModelBridge
@@ -228,14 +211,14 @@ typedef NS_ENUM(NSInteger, ItemType) {
 
 #pragma mark - Private methods
 
-- (CollectionViewItem*)itemWithType:(NSInteger)type
-                               text:(NSString*)text
-                            checked:(BOOL)checked
-                            enabled:(BOOL)enabled {
+- (TableViewItem*)itemWithType:(NSInteger)type
+                          text:(NSString*)text
+                       checked:(BOOL)checked
+                       enabled:(BOOL)enabled {
   EncryptionItem* item = [[EncryptionItem alloc] initWithType:type];
   item.text = text;
-  item.accessoryType = checked ? MDCCollectionViewCellAccessoryCheckmark
-                               : MDCCollectionViewCellAccessoryNone;
+  item.accessoryType = checked ? UITableViewCellAccessoryCheckmark
+                               : UITableViewCellAccessoryNone;
   item.enabled = enabled;
   return item;
 }

ios/chrome/browser/ui/settings/sync_encryption_collection_view_controller_unittest.mm → ios/chrome/browser/ui/settings/sync_encryption_table_view_controller_unittest.mm

@@ -2,7 +2,7 @@
 // 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/settings/sync_encryption_collection_view_controller.h"
+#import "ios/chrome/browser/ui/settings/sync_encryption_table_view_controller.h"
 
 #include <memory>
 
@@ -12,8 +12,8 @@
 #include "ios/chrome/browser/browser_state/test_chrome_browser_state.h"
 #include "ios/chrome/browser/sync/ios_chrome_profile_sync_test_util.h"
 #include "ios/chrome/browser/sync/profile_sync_service_factory.h"
-#import "ios/chrome/browser/ui/collection_view/collection_view_controller_test.h"
 #import "ios/chrome/browser/ui/settings/cells/encryption_item.h"
+#import "ios/chrome/browser/ui/table_view/chrome_table_view_controller_test.h"
 #include "ios/chrome/grit/ios_strings.h"
 #include "ios/web/public/test/test_web_thread_bundle.h"
 #include "testing/gmock/include/gmock/gmock.h"
@@ -39,8 +39,8 @@ std::unique_ptr<KeyedService> CreateNiceProfileSyncServiceMock(
       &init_params);
 }
 
-class SyncEncryptionCollectionViewControllerTest
-    : public CollectionViewControllerTest {
+class SyncEncryptionTableViewControllerTest
+    : public ChromeTableViewControllerTest {
  protected:
   void SetUp() override {
     TestChromeBrowserState::Builder test_cbs_builder;
@@ -48,7 +48,7 @@ class SyncEncryptionCollectionViewControllerTest
         ProfileSyncServiceFactory::GetInstance(),
         base::BindRepeating(&CreateNiceProfileSyncServiceMock));
     chrome_browser_state_ = test_cbs_builder.Build();
-    CollectionViewControllerTest::SetUp();
+    ChromeTableViewControllerTest::SetUp();
 
     mock_profile_sync_service_ =
         static_cast<browser_sync::ProfileSyncServiceMock*>(
@@ -62,8 +62,8 @@ class SyncEncryptionCollectionViewControllerTest
     CreateController();
   }
 
-  CollectionViewController* InstantiateController() override {
-    return [[SyncEncryptionCollectionViewController alloc]
+  ChromeTableViewController* InstantiateController() override {
+    return [[SyncEncryptionTableViewController alloc]
         initWithBrowserState:chrome_browser_state_.get()];
   }
 
@@ -73,20 +73,20 @@ class SyncEncryptionCollectionViewControllerTest
   browser_sync::ProfileSyncServiceMock* mock_profile_sync_service_;
 };
 
-TEST_F(SyncEncryptionCollectionViewControllerTest, TestModel) {
+TEST_F(SyncEncryptionTableViewControllerTest, TestModel) {
   CheckController();
   CheckTitleWithId(IDS_IOS_SYNC_ENCRYPTION_TITLE);
 
-  EXPECT_EQ(2, NumberOfSections());
+  EXPECT_EQ(1, NumberOfSections());
 
   NSInteger const kSection = 0;
   EXPECT_EQ(2, NumberOfItemsInSection(kSection));
 
-  EncryptionItem* accountItem = GetCollectionViewItem(kSection, 0);
+  EncryptionItem* accountItem = GetTableViewItem(kSection, 0);
   EXPECT_NSEQ(l10n_util::GetNSString(IDS_SYNC_BASIC_ENCRYPTION_DATA),
               accountItem.text);
 
-  EncryptionItem* passphraseItem = GetCollectionViewItem(kSection, 1);
+  EncryptionItem* passphraseItem = GetTableViewItem(kSection, 1);
   EXPECT_NSEQ(l10n_util::GetNSString(IDS_SYNC_FULL_ENCRYPTION_DATA),
               passphraseItem.text);
 }

ios/chrome/browser/ui/settings/sync_settings_collection_view_controller.mm

@@ -43,8 +43,8 @@
 #import "ios/chrome/browser/ui/settings/cells/sync_switch_item.h"
 #import "ios/chrome/browser/ui/settings/cells/text_and_error_item.h"
 #import "ios/chrome/browser/ui/settings/settings_navigation_controller.h"
-#import "ios/chrome/browser/ui/settings/sync_encryption_collection_view_controller.h"
 #import "ios/chrome/browser/ui/settings/sync_encryption_passphrase_collection_view_controller.h"
+#import "ios/chrome/browser/ui/settings/sync_encryption_table_view_controller.h"
 #import "ios/chrome/browser/ui/settings/sync_utils/sync_util.h"
 #import "ios/chrome/browser/ui/util/uikit_ui_util.h"
 #include "ios/chrome/grit/ios_strings.h"
@@ -766,14 +766,14 @@ typedef NS_ENUM(NSInteger, ItemType) {
       [self shouldDisableSettingsOnSyncError])
     return;
 
-  SettingsRootCollectionViewController* controllerToPush;
+  UIViewController<SettingsRootViewControlling>* controllerToPush;
   // If there was a sync error, prompt the user to enter the passphrase.
   // Otherwise, show the full encryption options.
   if (syncService->IsPassphraseRequired()) {
     controllerToPush = [[SyncEncryptionPassphraseCollectionViewController alloc]
         initWithBrowserState:_browserState];
   } else {
-    controllerToPush = [[SyncEncryptionCollectionViewController alloc]
+    controllerToPush = [[SyncEncryptionTableViewController alloc]
         initWithBrowserState:_browserState];
   }
   controllerToPush.dispatcher = self.dispatcher;

ios/chrome/browser/ui/settings/table_cell_catalog_view_controller.mm

@@ -6,6 +6,7 @@
 
 #import "ios/chrome/browser/ui/autofill/cells/autofill_edit_item.h"
 #import "ios/chrome/browser/ui/settings/cells/autofill_data_item.h"
+#import "ios/chrome/browser/ui/settings/cells/encryption_item.h"
 #import "ios/chrome/browser/ui/settings/cells/settings_detail_item.h"
 #import "ios/chrome/browser/ui/settings/cells/settings_switch_item.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_accessory_item.h"
@@ -45,6 +46,7 @@ typedef NS_ENUM(NSInteger, ItemType) {
   ItemTypeURLWithSupplementalText,
   ItemTypeURLWithBadgeImage,
   ItemTypeTextSettingsDetail,
+  ItemTypeEncryption,
   ItemTypeLinkFooter,
   ItemTypeDetailText,
   ItemTypeSettingsSwitch,
@@ -173,6 +175,25 @@ typedef NS_ENUM(NSInteger, ItemType) {
   [model addItem:settingsSwitchItem
       toSectionWithIdentifier:SectionIdentifierSettings];
 
+  EncryptionItem* encryptionChecked =
+      [[EncryptionItem alloc] initWithType:ItemTypeEncryption];
+  encryptionChecked.text =
+      @"These two cells have exactly the same text, but one has a checkmark "
+      @"and the other does not.  They should lay out identically, and the "
+      @"presence of the checkmark should not cause the text to reflow.";
+  encryptionChecked.accessoryType = UITableViewCellAccessoryCheckmark;
+  [model addItem:encryptionChecked
+      toSectionWithIdentifier:SectionIdentifierSettings];
+
+  EncryptionItem* encryptionUnchecked =
+      [[EncryptionItem alloc] initWithType:ItemTypeEncryption];
+  encryptionUnchecked.text =
+      @"These two cells have exactly the same text, but one has a checkmark "
+      @"and the other does not.  They should lay out identically, and the "
+      @"presence of the checkmark should not cause the text to reflow.";
+  [model addItem:encryptionUnchecked
+      toSectionWithIdentifier:SectionIdentifierSettings];
+
   TableViewLinkHeaderFooterItem* linkFooter =
       [[TableViewLinkHeaderFooterItem alloc] initWithType:ItemTypeLinkFooter];
   linkFooter.text =