Enable dynamic type on NTP tiles.

This CL enables dynamic type support for tile views on NTP. Tile views
will have 4 groups of size depending on which font size is selected.
The font size of tile views' caption will be capped to 2nd smallest
accessibility font size.

Bug: 893523
Change-Id: I11871071026a8eda52f66ebd5f826912462cf9f3
Reviewed-on: https://chromium-review.googlesource.com/c/1489208Reviewed-by: Stepan Khapugin <stkhapugin@chromium.org>
Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Commit-Queue: Yi Su <mrsuyi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#636856}

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

@@ -167,6 +167,7 @@ source_set("content_suggestions_ui_util") {
     "//ios/chrome/browser/ui/content_suggestions/cells:cells_ui",
     "//ios/chrome/browser/ui/location_bar:constants",
     "//ios/chrome/browser/ui/ntp",
+    "//ios/chrome/browser/ui/ntp_tile_views:constants",
     "//ios/chrome/browser/ui/toolbar/public",
     "//ios/third_party/material_components_ios",
     "//ios/web/public",

ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_action_cell.mm

@@ -53,7 +53,7 @@
 }
 
 + (CGSize)defaultSize {
-  return kMostVisitedCellSize;
+  return MostVisitedCellSize();
 }
 
 - (CGSize)intrinsicContentSize {

ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_cell.mm

@@ -60,7 +60,7 @@
 }
 
 + (CGSize)defaultSize {
-  return kMostVisitedCellSize;
+  return MostVisitedCellSize();
 }
 
 - (CGSize)intrinsicContentSize {

ios/chrome/browser/ui/content_suggestions/content_suggestions_collection_utils.mm

@@ -10,6 +10,7 @@
 #import "ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_cell.h"
 #import "ios/chrome/browser/ui/location_bar/location_bar_constants.h"
 #import "ios/chrome/browser/ui/ntp/new_tab_page_header_constants.h"
+#import "ios/chrome/browser/ui/ntp_tile_views/ntp_tile_constants.h"
 #import "ios/chrome/browser/ui/toolbar/public/toolbar_utils.h"
 #include "ios/chrome/browser/ui/ui_feature_flags.h"
 #include "ios/chrome/browser/ui/util/dynamic_type_util.h"
@@ -64,7 +65,6 @@ const CGFloat kNonGoogleSearchDoodleHeight = 60;
 // Height for the header view on tablet when Google is not the default search
 // engine.
 const CGFloat kNonGoogleSearchHeaderHeightIPad = 10;
-
 }
 
 namespace content_suggestions {
@@ -72,8 +72,6 @@ namespace content_suggestions {
 const int kSearchFieldBackgroundColor = 0xF1F3F4;
 const CGFloat kHintTextScale = 0.15;
 
-const NSUInteger kMostVisitedItemsPerLine = 4;
-
 CGFloat horizontalSpacingBetweenTiles() {
   return (!IsCompactWidth() && !IsCompactHeight())
              ? kHorizontalSpacingRegularXRegular
@@ -86,7 +84,7 @@ CGFloat verticalSpacingBetweenTiles() {
 
 CGFloat centeredTilesMarginForWidth(CGFloat width) {
   CGFloat horizontalSpace = horizontalSpacingBetweenTiles();
-  NSUInteger columns = kMostVisitedItemsPerLine;
+  NSUInteger columns = NumberOfTilesPerRow();
   CGFloat whitespace =
       width -
       (columns * [ContentSuggestionsMostVisitedCell defaultSize].width) -

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

@@ -19,6 +19,7 @@ source_set("ntp_tile_views") {
     "resources:ntp_most_visited_tile",
     "resources:ntp_readinglist_icon",
     "resources:ntp_recent_icon",
+    "//ios/chrome/browser/ui/util",
     "//ios/chrome/common/favicon",
     "//ios/chrome/common/ui_util",
     "//ios/third_party/material_components_ios",

ios/chrome/browser/ui/ntp_tile_views/ntp_shortcut_tile_view.mm

@@ -70,8 +70,8 @@ const CGFloat kIconSize = 56;
       [_countContainer.heightAnchor
           constraintEqualToAnchor:_countContainer.widthAnchor],
       [_countContainer.topAnchor constraintEqualToAnchor:self.topAnchor],
-      [_countContainer.trailingAnchor
-          constraintEqualToAnchor:self.trailingAnchor],
+      [_countContainer.centerXAnchor
+          constraintEqualToAnchor:self.imageContainerView.trailingAnchor],
       [_countLabel.widthAnchor constraintEqualToConstant:kCountWidth],
       [_countLabel.heightAnchor
           constraintEqualToAnchor:_countLabel.widthAnchor],

ios/chrome/browser/ui/ntp_tile_views/ntp_tile_constants.h

@@ -7,9 +7,6 @@
 
 #import <UIKit/UIKit.h>
 
-// Size of a Most Visited cell, for example on NTP.
-extern const CGSize kMostVisitedCellSize;
-
 // Enum listing the collection shortcuts on NTP and similar surfaces.
 typedef NS_ENUM(NSInteger, NTPCollectionShortcutType) {
   NTPCollectionShortcutTypeBookmark,
@@ -18,6 +15,12 @@ typedef NS_ENUM(NSInteger, NTPCollectionShortcutType) {
   NTPCollectionShortcutTypeHistory,
 };
 
+// Returns the size of most visited cell according to current font size.
+CGSize MostVisitedCellSize();
+
+// Returns number of tiles per row based on current system font size.
+NSUInteger NumberOfTilesPerRow();
+
 // Returns a localized title for a given collection shortcut type.
 NSString* TitleForCollectionShortcutType(NTPCollectionShortcutType action);
 // Returns an icon for a given collection shortcut type to be used in an NTP

ios/chrome/browser/ui/ntp_tile_views/ntp_tile_constants.mm

@@ -13,7 +13,46 @@
 #error "This file requires ARC support."
 #endif
 
-const CGSize kMostVisitedCellSize = {/*width=*/73, /*height=*/100};
+// For font size < UIContentSizeCategoryExtraExtraExtraLarge
+const CGSize kMostVisitedCellSizeSmall = {/*width=*/73, /*height=*/100};
+// For font size == UIContentSizeCategoryExtraExtraExtraLarge
+const CGSize kMostVisitedCellSizeMedium = {/*width=*/73, /*height=*/112};
+// For font size == UIContentSizeCategoryAccessibilityMedium
+const CGSize kMostVisitedCellSizeLarge = {/*width=*/110, /*height=*/140};
+// For font size > UIContentSizeCategoryAccessibilityMedium
+const CGSize kMostVisitedCellSizeExtraLarge = {/*width=*/146, /*height=*/150};
+
+CGSize MostVisitedCellSize() {
+  UIContentSizeCategory category =
+      UIApplication.sharedApplication.preferredContentSizeCategory;
+  NSComparisonResult result = UIContentSizeCategoryCompareToCategory(
+      category, UIContentSizeCategoryAccessibilityMedium);
+  switch (result) {
+    case NSOrderedAscending:
+      return ([category
+                 isEqualToString:UIContentSizeCategoryExtraExtraExtraLarge])
+                 ? kMostVisitedCellSizeMedium
+                 : kMostVisitedCellSizeSmall;
+    case NSOrderedSame:
+      return kMostVisitedCellSizeLarge;
+    case NSOrderedDescending:
+      return kMostVisitedCellSizeExtraLarge;
+  }
+}
+
+NSUInteger NumberOfTilesPerRow() {
+  NSComparisonResult result = UIContentSizeCategoryCompareToCategory(
+      UIApplication.sharedApplication.preferredContentSizeCategory,
+      UIContentSizeCategoryAccessibilityMedium);
+  switch (result) {
+    case NSOrderedAscending:
+      return 4;
+    case NSOrderedSame:
+      return 3;
+    case NSOrderedDescending:
+      return 2;
+  }
+}
 
 // Returns the title to use for a cell with |action|.
 NSString* TitleForCollectionShortcutType(NTPCollectionShortcutType type) {

ios/chrome/browser/ui/ntp_tile_views/ntp_tile_view.mm

@@ -4,6 +4,7 @@
 
 #import "ios/chrome/browser/ui/ntp_tile_views/ntp_tile_view.h"
 
+#import "ios/chrome/browser/ui/util/uikit_ui_util.h"
 #import "ios/chrome/common/ui_util/constraints_ui_util.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
@@ -27,7 +28,7 @@ const CGFloat kPreferredMaxWidth = 73;
   if (self) {
     _titleLabel = [[UILabel alloc] init];
     _titleLabel.textColor = [UIColor colorWithWhite:0 alpha:kTitleAlpha];
-    _titleLabel.font = [UIFont systemFontOfSize:12];
+    _titleLabel.font = [self titleLabelFont];
     _titleLabel.textAlignment = NSTextAlignmentCenter;
     _titleLabel.preferredMaxLayoutWidth = kPreferredMaxWidth;
     _titleLabel.numberOfLines = kLabelNumLines;
@@ -66,8 +67,26 @@ const CGFloat kPreferredMaxWidth = 73;
   return self;
 }
 
+// Returns the font size for the location label.
+- (UIFont*)titleLabelFont {
+  return PreferredFontForTextStyleWithMaxCategory(
+      UIFontTextStyleCaption1,
+      self.traitCollection.preferredContentSizeCategory,
+      UIContentSizeCategoryAccessibilityLarge);
+}
+
 + (UIImage*)backgroundImage {
   return [UIImage imageNamed:@"ntp_most_visited_tile"];
 }
 
+#pragma mark - UIView
+
+- (void)traitCollectionDidChange:(UITraitCollection*)previousTraitCollection {
+  [super traitCollectionDidChange:previousTraitCollection];
+  if (previousTraitCollection.preferredContentSizeCategory !=
+      self.traitCollection.preferredContentSizeCategory) {
+    self.titleLabel.font = [self titleLabelFont];
+  }
+}
+
 @end

ios/chrome/browser/ui/omnibox/popup/shortcuts/shortcuts_view_controller.mm

@@ -73,7 +73,7 @@ const NSInteger kCollectionShortcutSection = 1;
   [super viewDidAppear:animated];
   // Calculate insets to center the items in the view.
   CGFloat widthInsets = (self.view.bounds.size.width -
-                         kMostVisitedCellSize.width * kNumberOfItemsPerRow -
+                         MostVisitedCellSize().width * NumberOfTilesPerRow() -
                          kItemSpacing * (kNumberOfItemsPerRow - 1)) /
                         2;
   self.layout.sectionInset =
@@ -109,7 +109,7 @@ const NSInteger kCollectionShortcutSection = 1;
 
   _layout = [[UICollectionViewFlowLayout alloc] init];
   _layout.minimumLineSpacing = kLineSpacing;
-  _layout.itemSize = kMostVisitedCellSize;
+  _layout.itemSize = MostVisitedCellSize();
   return _layout;
 }