[ios] Recent Tabs Table View Headers, TableViewUrlCell, and Table polishing

Fix the following font, stying, and layouts based on these specs: https://folio.googleplex.com/ntp/Recent%20Tabs#%2Frecent_tabs.html
- Slimmed down spacing between stackviews and their container view.
- Changed text color of cell subtitle and cellseparatorinset.
- Made DisclosureViewHeader description label a dynamic font type.

Accessibility dynamic font is present, but changing the layout of cell contents to a vertical stack will come in future CL.

Before: https://drive.google.com/file/d/1f_lz35oaTzKXfl6J6lnt820eHHYIM_AP/view?usp=sharing
After: https://drive.google.com/file/d/1-nELR8ELhZuPmeYioPWKZVzqj3ynW8hV/view?usp=sharing

Dynamic Types:
iPad
   Regular - https://drive.google.com/file/d/1h5ej1hfmIscYx6xs7W0VuwzA15RFjQ95/view?usp=sharing
             https://drive.google.com/file/d/1qt3XEb7UornuV3q6GGxM6WCxaUf7cxdz/view?usp=sharing
   Large   - https://drive.google.com/file/d/1tV186qR4HI82dbYNioVICOhz1CoFYQcF/view?usp=sharing
             https://drive.google.com/file/d/1flOduXZUwGjGMR2hjPjNlAet74dgtS69/view?usp=sharing
iPhone
   regular - https://drive.google.com/file/d/1e_PvBbXyqFrOoJhEHKBXGJ2FAgyKZ0Vw/view?usp=sharing
             https://drive.google.com/file/d/1TSQJs-FWa0V98EEKvJLw8sEL9gQXJNXd/view?usp=sharing
   Large   - https://drive.google.com/file/d/11wXakU1vDcn2-bT8IcF_fnnnAD2O9K5t/view?usp=sharing
             https://drive.google.com/file/d/1bIKGp5zuxG8BrYV_CtTeQo38cwz_k99t/view


Bug: 825017
Change-Id: I8f82cfaebac453b898e60cb6afb9b887754f527a
Reviewed-on: https://chromium-review.googlesource.com/1017918
Commit-Queue: Chris Lu <thegreenfrog@chromium.org>
Reviewed-by: Rohit Rao <rohitrao@chromium.org>
Reviewed-by: Sergio Collazos <sczs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#553575}

ios/chrome/browser/ui/recent_tabs/recent_tabs_table_view_controller.mm

@@ -34,7 +34,6 @@
 #import "ios/chrome/browser/ui/table_view/cells/table_view_activity_indicator_header_footer_item.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_disclosure_header_footer_item.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_signin_promo_item.h"
-#import "ios/chrome/browser/ui/table_view/cells/table_view_text_header_footer_item.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_text_item.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_url_item.h"
 #include "ios/chrome/browser/ui/ui_util.h"

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

@@ -64,7 +64,6 @@
     UIStackView* verticalStack = [[UIStackView alloc]
         initWithArrangedSubviews:@[ self.titleLabel, self.subtitleLabel ]];
     verticalStack.axis = UILayoutConstraintAxisVertical;
-    verticalStack.spacing = kTableViewVerticalLabelStackSpacing;
 
     // Activity Indicator.
     MDCActivityIndicator* activityIndicator =
@@ -79,7 +78,7 @@
     UIStackView* horizontalStack = [[UIStackView alloc]
         initWithArrangedSubviews:@[ verticalStack, activityIndicator ]];
     horizontalStack.axis = UILayoutConstraintAxisHorizontal;
-    horizontalStack.spacing = kTableViewCellViewSpacing;
+    horizontalStack.spacing = kTableViewSubViewHorizontalSpacing;
     horizontalStack.translatesAutoresizingMaskIntoConstraints = NO;
     horizontalStack.alignment = UIStackViewAlignmentCenter;
 
@@ -88,19 +87,18 @@
 
     // Set and activate constraints.
     [NSLayoutConstraint activateConstraints:@[
-      // Horizontal Stack Constraints.
       [horizontalStack.leadingAnchor
           constraintEqualToAnchor:self.contentView.leadingAnchor
-                         constant:kTableViewCellViewSpacing],
+                         constant:kTableViewHorizontalSpacing],
       [horizontalStack.trailingAnchor
           constraintEqualToAnchor:self.contentView.trailingAnchor
-                         constant:-kTableViewCellViewSpacing],
+                         constant:-kTableViewHorizontalSpacing],
       [horizontalStack.topAnchor
           constraintGreaterThanOrEqualToAnchor:self.contentView.topAnchor
-                                      constant:kTableViewCellViewSpacing],
+                                      constant:kTableViewVerticalSpacing],
       [horizontalStack.bottomAnchor
           constraintLessThanOrEqualToAnchor:self.contentView.bottomAnchor
-                                   constant:-kTableViewCellViewSpacing],
+                                   constant:-kTableViewVerticalSpacing],
       [horizontalStack.centerYAnchor
           constraintEqualToAnchor:self.contentView.centerYAnchor]
     ]];

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

@@ -7,11 +7,14 @@
 
 #import <UIKit/UIKit.h>
 
-// The spacing between views inside of a cell.
-extern const CGFloat kTableViewCellViewSpacing;
+// The horizontal spacing between views and the container view of a cell.
+extern const CGFloat kTableViewHorizontalSpacing;
 
-// The vertical spacing between text labels in a stackView.
-extern const CGFloat kTableViewVerticalLabelStackSpacing;
+// The vertical spacing between views and the container view of a cell
+extern const CGFloat kTableViewVerticalSpacing;
+
+// The horizontal spacing between subviews within the container view.
+extern const CGFloat kTableViewSubViewHorizontalSpacing;
 
 // Animation duration for highlighting selected section header.
 extern const CGFloat kTableViewCellSelectionAnimationDuration;
@@ -21,4 +24,8 @@ extern const CGFloat kTableViewCellSelectionAnimationDuration;
 extern const CGFloat kTableViewHighlightedCellColor;
 extern const CGFloat kTableViewHighlightedCellColorAlpha;
 
+// Setting the font size to 0 for a custom preferred font lets iOS manage
+// sizing.
+extern const CGFloat kUseDefaultFontSize;
+
 #endif  // IOS_CHROME_BROWSER_UI_TABLE_VIEW_CELLS_TABLE_VIEW_CELLS_CONSTANTS_H_

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

@@ -8,8 +8,10 @@
 #error "This file requires ARC support."
 #endif
 
-const CGFloat kTableViewCellViewSpacing = 16.0;
-const CGFloat kTableViewVerticalLabelStackSpacing = 2.0;
+const CGFloat kTableViewHorizontalSpacing = 16.0;
+const CGFloat kTableViewVerticalSpacing = 8.0;
+const CGFloat kTableViewSubViewHorizontalSpacing = 12.0;
 const CGFloat kTableViewCellSelectionAnimationDuration = 0.15;
 const CGFloat kTableViewHighlightedCellColor = 0xA6A6A6;
 const CGFloat kTableViewHighlightedCellColorAlpha = 0.5;
+const CGFloat kUseDefaultFontSize = 0.0;

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

@@ -75,8 +75,13 @@ constexpr float kRotationNinetyCCW = (90 / 180.0) * M_PI;
   if (self) {
     // Labels, set font sizes using dynamic type.
     _titleLabel = [[UILabel alloc] init];
+    UIFontDescriptor* baseDescriptor = [UIFontDescriptor
+        preferredFontDescriptorWithTextStyle:UIFontTextStyleSubheadline];
+    UIFontDescriptor* styleDescriptor = [baseDescriptor
+        fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold];
+
     _titleLabel.font =
-        [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
+        [UIFont fontWithDescriptor:styleDescriptor size:kUseDefaultFontSize];
     _subtitleLabel = [[UILabel alloc] init];
     _subtitleLabel.font =
         [UIFont preferredFontForTextStyle:UIFontTextStyleCaption1];
@@ -86,7 +91,6 @@ constexpr float kRotationNinetyCCW = (90 / 180.0) * M_PI;
     UIStackView* verticalStack = [[UIStackView alloc]
         initWithArrangedSubviews:@[ _titleLabel, _subtitleLabel ]];
     verticalStack.axis = UILayoutConstraintAxisVertical;
-    verticalStack.spacing = kTableViewVerticalLabelStackSpacing;
 
     // Disclosure ImageView. Initial pointing direction is to the right.
     _disclosureImageView = [[UIImageView alloc]
@@ -99,7 +103,7 @@ constexpr float kRotationNinetyCCW = (90 / 180.0) * M_PI;
     UIStackView* horizontalStack = [[UIStackView alloc]
         initWithArrangedSubviews:@[ verticalStack, _disclosureImageView ]];
     horizontalStack.axis = UILayoutConstraintAxisHorizontal;
-    horizontalStack.spacing = kTableViewCellViewSpacing;
+    horizontalStack.spacing = kTableViewSubViewHorizontalSpacing;
     horizontalStack.translatesAutoresizingMaskIntoConstraints = NO;
     horizontalStack.alignment = UIStackViewAlignmentCenter;
 
@@ -108,19 +112,18 @@ constexpr float kRotationNinetyCCW = (90 / 180.0) * M_PI;
 
     // Set and activate constraints.
     [NSLayoutConstraint activateConstraints:@[
-      // Horizontal Stack Constraints.
       [horizontalStack.leadingAnchor
           constraintEqualToAnchor:self.contentView.leadingAnchor
-                         constant:kTableViewCellViewSpacing],
+                         constant:kTableViewHorizontalSpacing],
       [horizontalStack.trailingAnchor
           constraintEqualToAnchor:self.contentView.trailingAnchor
-                         constant:-kTableViewCellViewSpacing],
+                         constant:-kTableViewHorizontalSpacing],
       [horizontalStack.topAnchor
           constraintGreaterThanOrEqualToAnchor:self.contentView.topAnchor
-                                      constant:kTableViewCellViewSpacing],
+                                      constant:kTableViewVerticalSpacing],
       [horizontalStack.bottomAnchor
           constraintLessThanOrEqualToAnchor:self.contentView.bottomAnchor
-                                   constant:-kTableViewCellViewSpacing],
+                                   constant:-kTableViewVerticalSpacing],
       [horizontalStack.centerYAnchor
           constraintEqualToAnchor:self.contentView.centerYAnchor]
     ]];
@@ -128,6 +131,43 @@ constexpr float kRotationNinetyCCW = (90 / 180.0) * M_PI;
   return self;
 }
 
+#pragma mark - View LifeCycle
+
+- (void)prepareForReuse {
+  [super prepareForReuse];
+  if (self.cellAnimator.isRunning)
+    [self.cellAnimator stopAnimation:YES];
+}
+
+- (void)traitCollectionDidChange:(UITraitCollection*)previousTraitCollection {
+  if (previousTraitCollection.preferredContentSizeCategory !=
+      self.traitCollection.preferredContentSizeCategory) {
+    UIFontDescriptor* baseDescriptor = [UIFontDescriptor
+        preferredFontDescriptorWithTextStyle:UIFontTextStyleHeadline];
+    UIFontDescriptor* styleDescriptor = [baseDescriptor
+        fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold];
+    self.titleLabel.font =
+        [UIFont fontWithDescriptor:styleDescriptor size:kUseDefaultFontSize];
+  }
+}
+
+#pragma mark - public methods
+
+- (void)animateHighlight {
+  [self addAnimationHighlightToAnimator];
+  [self.cellAnimator startAnimation];
+}
+
+- (void)setInitialDirection:(DisclosureDirection)direction {
+  [self rotateToDirection:direction animate:NO];
+}
+
+- (void)animateHighlightAndRotateToDirection:(DisclosureDirection)direction {
+  [self addAnimationHighlightToAnimator];
+  [self rotateToDirection:direction animate:YES];
+  [self.cellAnimator startAnimation];
+}
+
 #pragma mark - internal methods
 
 - (void)addAnimationHighlightToAnimator {
@@ -169,27 +209,4 @@ constexpr float kRotationNinetyCCW = (90 / 180.0) * M_PI;
   }
 }
 
-#pragma mark - public methods
-
-- (void)animateHighlight {
-  [self addAnimationHighlightToAnimator];
-  [self.cellAnimator startAnimation];
-}
-
-- (void)setInitialDirection:(DisclosureDirection)direction {
-  [self rotateToDirection:direction animate:NO];
-}
-
-- (void)animateHighlightAndRotateToDirection:(DisclosureDirection)direction {
-  [self addAnimationHighlightToAnimator];
-  [self rotateToDirection:direction animate:YES];
-  [self.cellAnimator startAnimation];
-}
-
-- (void)prepareForReuse {
-  [super prepareForReuse];
-  if (self.cellAnimator.isRunning)
-    [self.cellAnimator stopAnimation:YES];
-}
-
 @end

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

@@ -71,7 +71,6 @@
     UIStackView* verticalStack = [[UIStackView alloc]
         initWithArrangedSubviews:@[ _textLabel, _subtitleLabel ]];
     verticalStack.axis = UILayoutConstraintAxisVertical;
-    verticalStack.spacing = kTableViewVerticalLabelStackSpacing;
     verticalStack.translatesAutoresizingMaskIntoConstraints = NO;
 
     // Container View.
@@ -87,16 +86,16 @@
       // Container Constraints.
       [containerView.leadingAnchor
           constraintEqualToAnchor:self.contentView.leadingAnchor
-                         constant:kTableViewCellViewSpacing],
+                         constant:kTableViewHorizontalSpacing],
       [containerView.trailingAnchor
           constraintEqualToAnchor:self.contentView.trailingAnchor
-                         constant:-kTableViewCellViewSpacing],
+                         constant:-kTableViewHorizontalSpacing],
       [containerView.topAnchor
           constraintGreaterThanOrEqualToAnchor:self.contentView.topAnchor
-                                      constant:kTableViewCellViewSpacing],
+                                      constant:kTableViewVerticalSpacing],
       [containerView.bottomAnchor
           constraintLessThanOrEqualToAnchor:self.contentView.bottomAnchor
-                                   constant:-kTableViewCellViewSpacing],
+                                   constant:-kTableViewVerticalSpacing],
       [containerView.centerYAnchor
           constraintEqualToAnchor:self.contentView.centerYAnchor],
       // Vertical StackView Constraints.

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

@@ -5,6 +5,7 @@
 #import "ios/chrome/browser/ui/table_view/cells/table_view_url_item.h"
 
 #include "base/mac/foundation_util.h"
+#import "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/constraints_ui_util.h"
 
@@ -13,15 +14,8 @@
 #endif
 
 namespace {
-
-// The horizontal spacing between text labels.
-const CGFloat kHorizontalSpacing = 8.0;
-
-// THe vertical spacing between text labels.
-const CGFloat kVerticalSpacing = 2.0;
-
-// The display size of the favicon view.
-const CGFloat kFaviconViewSize = 56.0;
+// The width and height of the favicon ImageView.
+const float kFaviconWidth = 28.0f;
 }
 
 @implementation TableViewURLItem
@@ -83,6 +77,7 @@ const CGFloat kFaviconViewSize = 56.0;
     _titleLabel.adjustsFontForContentSizeCategory = YES;
     _URLLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleCaption1];
     _URLLabel.adjustsFontForContentSizeCategory = YES;
+    _URLLabel.textColor = [UIColor lightGrayColor];
     _metadataLabel.font =
         [UIFont preferredFontForTextStyle:UIFontTextStyleCaption1];
     _metadataLabel.adjustsFontForContentSizeCategory = YES;
@@ -91,8 +86,6 @@ const CGFloat kFaviconViewSize = 56.0;
     UIStackView* verticalStack = [[UIStackView alloc]
         initWithArrangedSubviews:@[ _titleLabel, _URLLabel ]];
     verticalStack.axis = UILayoutConstraintAxisVertical;
-
-    verticalStack.spacing = kVerticalSpacing;
     [_metadataLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh
                                       forAxis:UILayoutConstraintAxisHorizontal];
     [_metadataLabel
@@ -100,10 +93,11 @@ const CGFloat kFaviconViewSize = 56.0;
                                         forAxis:
                                             UILayoutConstraintAxisHorizontal];
 
+    // Horizontal stack view holds vertical stack view and favicon.
     UIStackView* horizontalStack = [[UIStackView alloc]
         initWithArrangedSubviews:@[ verticalStack, _metadataLabel ]];
     horizontalStack.axis = UILayoutConstraintAxisHorizontal;
-    horizontalStack.spacing = kHorizontalSpacing;
+    horizontalStack.spacing = kTableViewSubViewHorizontalSpacing;
     horizontalStack.distribution = UIStackViewDistributionFill;
     horizontalStack.alignment = UIStackViewAlignmentFirstBaseline;
 
@@ -116,30 +110,28 @@ const CGFloat kFaviconViewSize = 56.0;
     [NSLayoutConstraint activateConstraints:@[
       // The favicon view is a fixed size, is pinned to the leading edge of the
       // content view, and is centered vertically.
-      [_faviconView.heightAnchor constraintEqualToConstant:kFaviconViewSize],
-      [_faviconView.widthAnchor constraintEqualToConstant:kFaviconViewSize],
+      [_faviconView.heightAnchor constraintEqualToConstant:kFaviconWidth],
+      [_faviconView.widthAnchor constraintEqualToConstant:kFaviconWidth],
       [_faviconView.leadingAnchor
-          constraintEqualToAnchor:self.contentView.leadingAnchor],
+          constraintEqualToAnchor:self.contentView.leadingAnchor
+                         constant:kTableViewHorizontalSpacing],
       [_faviconView.centerYAnchor
           constraintEqualToAnchor:self.contentView.centerYAnchor],
 
       // The stack view fills the remaining space, has an intrinsic height, and
       // is centered vertically.
       [horizontalStack.leadingAnchor
-          constraintEqualToAnchor:_faviconView.trailingAnchor],
+          constraintEqualToAnchor:_faviconView.trailingAnchor
+                         constant:kTableViewSubViewHorizontalSpacing],
       [horizontalStack.trailingAnchor
           constraintEqualToAnchor:self.contentView.trailingAnchor
-                         constant:-kHorizontalSpacing],
-      [horizontalStack.centerYAnchor
-          constraintEqualToAnchor:self.contentView.centerYAnchor],
-
-      // The content view's height is set by the larger of the favicon view or
-      // the stack view.  This maintains a minimum size but allows the cell to
-      // grow if Dynamic Type increases the font size.
-      [self.contentView.heightAnchor
-          constraintGreaterThanOrEqualToAnchor:_faviconView.heightAnchor],
-      [self.contentView.heightAnchor
-          constraintGreaterThanOrEqualToAnchor:horizontalStack.heightAnchor],
+                         constant:-kTableViewHorizontalSpacing],
+      [horizontalStack.topAnchor
+          constraintEqualToAnchor:self.contentView.topAnchor
+                         constant:kTableViewVerticalSpacing],
+      [horizontalStack.bottomAnchor
+          constraintEqualToAnchor:self.contentView.bottomAnchor
+                         constant:-kTableViewVerticalSpacing]
     ]];
   }
   return self;

ios/chrome/browser/ui/table_view/chrome_table_view_controller.mm

@@ -47,7 +47,7 @@
 - (void)viewDidLoad {
   [super viewDidLoad];
   [self.tableView setBackgroundColor:self.styler.tableViewBackgroundColor];
-  [self.tableView setSeparatorColor:[UIColor grayColor]];
+  [self.tableView setSeparatorColor:[UIColor lightGrayColor]];
   [self.tableView setSeparatorInset:UIEdgeInsetsMake(0, 56, 0, 0)];
 }