[ios] Update most visited tile style for refresh.

Adds new tile background image and reading list circle.

Bug: 805636
Cq-Include-Trybots: master.tryserver.chromium.mac:ios-simulator-cronet;master.tryserver.chromium.mac:ios-simulator-full-configs
Change-Id: I46dfca56ea4ebdb682ee688aa5b1b8aa88bf4f73
Reviewed-on: https://chromium-review.googlesource.com/936084Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Commit-Queue: Justin Cohen <justincohen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#539813}

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

@@ -41,8 +41,12 @@ source_set("cells_ui") {
     "content_suggestions_header_item.mm",
     "content_suggestions_learn_more_item.h",
     "content_suggestions_learn_more_item.mm",
+    "content_suggestions_most_visited_action_cell.h",
+    "content_suggestions_most_visited_action_cell.mm",
     "content_suggestions_most_visited_cell.h",
     "content_suggestions_most_visited_cell.mm",
+    "content_suggestions_most_visited_constants.h",
+    "content_suggestions_most_visited_constants.mm",
     "content_suggestions_text_item.h",
     "content_suggestions_text_item.mm",
     "content_suggestions_whats_new_item.h",

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

+// 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.
+
+#ifndef IOS_CHROME_BROWSER_UI_CONTENT_SUGGESTIONS_CELLS_CONTENT_SUGGESTIONS_MOST_VISITED_ACTION_CELL_H_
+#define IOS_CHROME_BROWSER_UI_CONTENT_SUGGESTIONS_CELLS_CONTENT_SUGGESTIONS_MOST_VISITED_ACTION_CELL_H_
+
+#import "ios/third_party/material_components_ios/src/components/CollectionCells/src/MaterialCollectionCells.h"
+
+// Associated cell to display a Most Visited Action tile based.
+@interface ContentSuggestionsMostVisitedActionCell : MDCCollectionViewCell
+
+// View for action icon.
+@property(nonatomic, strong, readonly, nonnull) UIImageView* iconView;
+
+// Title of the action.
+@property(nonatomic, strong, readonly, nonnull) UILabel* titleLabel;
+
+// Number shown in circle by top trailing side of cell.
+@property(nonatomic, strong, readonly, nonnull) UILabel* countLabel;
+
+// Size for a an action tile.
++ (CGSize)defaultSize;
+
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_CONTENT_SUGGESTIONS_CELLS_CONTENT_SUGGESTIONS_MOST_VISITED_ACTION_CELL_H_

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

+// 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/content_suggestions/cells/content_suggestions_most_visited_action_cell.h"
+
+#import "ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_constants.h"
+#import "ios/chrome/browser/ui/favicon/favicon_view.h"
+#include "ios/chrome/browser/ui/ui_util.h"
+#import "ios/chrome/browser/ui/util/constraints_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 {
+
+const CGFloat kCountWidth = 20;
+const CGFloat kCountBorderWidth = 24;
+
+}  // namespace
+
+@interface ContentSuggestionsMostVisitedActionCell ()
+
+// Container view for |countLabel|.
+@property(nonatomic, strong, readonly, nonnull) UIView* countContainer;
+
+@end
+
+@implementation ContentSuggestionsMostVisitedActionCell : MDCCollectionViewCell
+
+@synthesize countContainer = _countContainer;
+@synthesize countLabel = _countLabel;
+@synthesize iconView = _iconView;
+@synthesize titleLabel = _titleLabel;
+
+#pragma mark - Public
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  self = [super initWithFrame:frame];
+  if (self) {
+    _titleLabel = [[UILabel alloc] init];
+    _titleLabel.textColor = [UIColor colorWithWhite:kLabelTextColor alpha:1.0];
+    _titleLabel.font = [MDCTypography captionFont];
+    _titleLabel.textAlignment = NSTextAlignmentCenter;
+    _titleLabel.preferredMaxLayoutWidth = [[self class] defaultSize].width;
+    _titleLabel.numberOfLines = kLabelNumLines;
+
+    _iconView = [[UIImageView alloc] initWithFrame:self.bounds];
+
+    _titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _iconView.translatesAutoresizingMaskIntoConstraints = NO;
+
+    [self.contentView addSubview:_titleLabel];
+    [self.contentView addSubview:_iconView];
+
+    [NSLayoutConstraint activateConstraints:@[
+      [_iconView.widthAnchor constraintEqualToConstant:kIconSize],
+      [_iconView.heightAnchor constraintEqualToAnchor:_iconView.widthAnchor],
+      [_iconView.centerXAnchor
+          constraintEqualToAnchor:_titleLabel.centerXAnchor],
+    ]];
+
+    ApplyVisualConstraintsWithMetrics(
+        @[ @"V:|[icon]-(space)-[title]", @"H:|[title]|" ],
+        @{@"icon" : _iconView, @"title" : _titleLabel},
+        @{ @"space" : @(kSpaceIconTitle) });
+
+    self.isAccessibilityElement = YES;
+  }
+  return self;
+}
+
++ (CGSize)defaultSize {
+  return kCellSize;
+}
+
+- (CGSize)intrinsicContentSize {
+  return [[self class] defaultSize];
+}
+
+- (void)prepareForReuse {
+  [super prepareForReuse];
+  _countContainer.hidden = YES;
+}
+
+- (UILabel*)countLabel {
+  if (!_countLabel) {
+    _countContainer = [[UIView alloc] init];
+    _countContainer.backgroundColor = [UIColor whiteColor];
+    // Unfortunately, simply setting a CALayer borderWidth and borderColor
+    // on |_countContainer|, and setting a background color on |_countLabel|
+    // will result in the inner color bleeeding thru to the outside.
+    _countContainer.layer.cornerRadius = kCountBorderWidth / 2;
+    _countContainer.layer.masksToBounds = YES;
+
+    _countLabel = [[UILabel alloc] init];
+    _countLabel.layer.cornerRadius = kCountWidth / 2;
+    _countLabel.layer.masksToBounds = YES;
+    _countLabel.textColor = [UIColor whiteColor];
+    _countLabel.font = [MDCTypography captionFont];
+    _countLabel.textAlignment = NSTextAlignmentCenter;
+    _countLabel.backgroundColor =
+        [UIColor colorWithRed:0.10 green:0.45 blue:0.91 alpha:1.0];
+
+    _countContainer.translatesAutoresizingMaskIntoConstraints = NO;
+    _countLabel.translatesAutoresizingMaskIntoConstraints = NO;
+
+    [self.contentView addSubview:self.countContainer];
+    [self.countContainer addSubview:self.countLabel];
+
+    [NSLayoutConstraint activateConstraints:@[
+      [_countContainer.widthAnchor constraintEqualToConstant:kCountBorderWidth],
+      [_countContainer.heightAnchor
+          constraintEqualToAnchor:_countContainer.widthAnchor],
+      [_countContainer.topAnchor
+          constraintEqualToAnchor:self.contentView.topAnchor],
+      [_countContainer.trailingAnchor
+          constraintEqualToAnchor:self.contentView.trailingAnchor],
+      [_countLabel.widthAnchor constraintEqualToConstant:kCountWidth],
+      [_countLabel.heightAnchor
+          constraintEqualToAnchor:_countLabel.widthAnchor],
+    ]];
+    AddSameCenterConstraints(_countLabel, _countContainer);
+  }
+  _countContainer.hidden = NO;
+  return _countLabel;
+}
+
+@end

ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_action_item.h

@@ -5,7 +5,10 @@
 #ifndef IOS_CHROME_BROWSER_UI_CONTENT_SUGGESTIONS_CELLS_CONTENT_SUGGESTIONS_MOST_VISITED_ACTION_ITEM_H_
 #define IOS_CHROME_BROWSER_UI_CONTENT_SUGGESTIONS_CELLS_CONTENT_SUGGESTIONS_MOST_VISITED_ACTION_ITEM_H_
 
-#import "ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_item.h"
+#import <UIKit/UIKit.h>
+
+#import "ios/chrome/browser/ui/collection_view/cells/collection_view_item.h"
+#import "ios/chrome/browser/ui/content_suggestions/cells/suggested_content.h"
 
 // Enum defining the actions for a ContentSuggestionsMostVisitedActionItem.
 typedef NS_ENUM(NSInteger, ContentSuggestionsMostVisitedAction) {
@@ -19,13 +22,20 @@ typedef NS_ENUM(NSInteger, ContentSuggestionsMostVisitedAction) {
 // collection section as most visited items, but have static placement (the last
 // four) and cannot be removed.
 @interface ContentSuggestionsMostVisitedActionItem
-    : ContentSuggestionsMostVisitedItem
+    : CollectionViewItem<SuggestedContent>
+
+- (nonnull instancetype)initWithAction:
+    (ContentSuggestionsMostVisitedAction)action;
 
-- (instancetype)initWithAction:(ContentSuggestionsMostVisitedAction)action;
+// Text for the title and the accessibility label of the cell.
+@property(nonatomic, copy, nonnull) NSString* title;
 
 // The action type for this button.
 @property(nonatomic, assign) ContentSuggestionsMostVisitedAction action;
 
+// Reading list count passed to the most visited cell.
+@property(nonatomic, assign) NSInteger count;
+
 @end
 
 #endif  // IOS_CHROME_BROWSER_UI_CONTENT_SUGGESTIONS_CELLS_CONTENT_SUGGESTIONS_MOST_VISITED_ACTION_ITEM_H_

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

@@ -4,8 +4,7 @@
 
 #import "ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_action_item.h"
 
-#import "ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_cell.h"
-#import "ios/chrome/browser/ui/favicon/favicon_attributes.h"
+#import "ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_action_cell.h"
 #include "ios/chrome/grit/ios_strings.h"
 #include "ui/base/l10n/l10n_util.h"
 
@@ -16,46 +15,65 @@
 @implementation ContentSuggestionsMostVisitedActionItem
 
 @synthesize action = _action;
+@synthesize count = _count;
+@synthesize metricsRecorded = _metricsRecorded;
+@synthesize suggestionIdentifier = _suggestionIdentifier;
+@synthesize title = _title;
 
 - (instancetype)initWithAction:(ContentSuggestionsMostVisitedAction)action {
   self = [super initWithType:0];
   if (self) {
     _action = action;
-    switch (_action) {
-      case ContentSuggestionsMostVisitedActionBookmark:
-        self.title =
-            l10n_util::GetNSString(IDS_IOS_CONTENT_SUGGESTIONS_BOOKMARKS);
-        self.attributes = [FaviconAttributes
-            attributesWithImage:[UIImage imageNamed:@"ntp_bookmarks_icon"]];
-        break;
-      case ContentSuggestionsMostVisitedActionReadingList:
-        self.title =
-            l10n_util::GetNSString(IDS_IOS_CONTENT_SUGGESTIONS_READING_LIST);
-        self.attributes = [FaviconAttributes
-            attributesWithImage:[UIImage imageNamed:@"ntp_readinglist_icon"]];
-        break;
-      case ContentSuggestionsMostVisitedActionRecentTabs:
-        self.title =
-            l10n_util::GetNSString(IDS_IOS_CONTENT_SUGGESTIONS_RECENT_TABS);
-        self.attributes = [FaviconAttributes
-            attributesWithImage:[UIImage imageNamed:@"ntp_recent_icon"]];
-        break;
-      case ContentSuggestionsMostVisitedActionHistory:
-        self.title =
-            l10n_util::GetNSString(IDS_IOS_CONTENT_SUGGESTIONS_HISTORY);
-        self.attributes = [FaviconAttributes
-            attributesWithImage:[UIImage imageNamed:@"ntp_history_icon"]];
-        break;
-    }
+    self.cellClass = [ContentSuggestionsMostVisitedActionCell class];
+    self.title = [self titleForAction:_action];
   }
   return self;
 }
 
 #pragma mark - AccessibilityCustomAction
 
-- (void)configureCell:(ContentSuggestionsMostVisitedCell*)cell {
+- (void)configureCell:(ContentSuggestionsMostVisitedActionCell*)cell {
   [super configureCell:cell];
   cell.accessibilityCustomActions = nil;
+  cell.titleLabel.text = self.title;
+  cell.accessibilityLabel = self.title;
+  cell.iconView.image = [self imageForAction:_action];
+  if (self.count != 0)
+    cell.countLabel.text = [@(self.count) stringValue];
+}
+
+#pragma mark - ContentSuggestionsItem
+
+- (CGFloat)cellHeightForWidth:(CGFloat)width {
+  return [ContentSuggestionsMostVisitedActionCell defaultSize].height;
+}
+
+#pragma mark - Private
+
+- (NSString*)titleForAction:(ContentSuggestionsMostVisitedAction)action {
+  switch (action) {
+    case ContentSuggestionsMostVisitedActionBookmark:
+      return l10n_util::GetNSString(IDS_IOS_CONTENT_SUGGESTIONS_BOOKMARKS);
+    case ContentSuggestionsMostVisitedActionReadingList:
+      return l10n_util::GetNSString(IDS_IOS_CONTENT_SUGGESTIONS_READING_LIST);
+    case ContentSuggestionsMostVisitedActionRecentTabs:
+      return l10n_util::GetNSString(IDS_IOS_CONTENT_SUGGESTIONS_RECENT_TABS);
+    case ContentSuggestionsMostVisitedActionHistory:
+      return l10n_util::GetNSString(IDS_IOS_CONTENT_SUGGESTIONS_HISTORY);
+  }
+}
+
+- (UIImage*)imageForAction:(ContentSuggestionsMostVisitedAction)action {
+  switch (action) {
+    case ContentSuggestionsMostVisitedActionBookmark:
+      return [UIImage imageNamed:@"ntp_bookmarks_icon"];
+    case ContentSuggestionsMostVisitedActionReadingList:
+      return [UIImage imageNamed:@"ntp_readinglist_icon"];
+    case ContentSuggestionsMostVisitedActionRecentTabs:
+      return [UIImage imageNamed:@"ntp_recent_icon"];
+    case ContentSuggestionsMostVisitedActionHistory:
+      return [UIImage imageNamed:@"ntp_history_icon"];
+  }
 }
 
 @end

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

@@ -4,7 +4,9 @@
 
 #import "ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_cell.h"
 
+#import "ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_constants.h"
 #import "ios/chrome/browser/ui/favicon/favicon_view.h"
+#include "ios/chrome/browser/ui/ui_util.h"
 #import "ios/chrome/browser/ui/util/constraints_ui_util.h"
 #import "ios/third_party/material_components_ios/src/components/Typography/src/MaterialTypography.h"
 
@@ -13,14 +15,10 @@
 #endif
 
 namespace {
-const CGFloat kLabelTextColor = 0.314;
-const NSInteger kLabelNumLines = 2;
-const CGFloat kFaviconSize = 48;
-const CGFloat kSpaceFaviconTitle = 10;
 
-// Size of a Most Visited cell.
-const CGSize kCellSize = {73, 100};
-}
+const CGFloat kIconSizeLegacy = 48;
+
+}  // namespace
 
 @implementation ContentSuggestionsMostVisitedCell : MDCCollectionViewCell
 
@@ -46,21 +44,45 @@ const CGSize kCellSize = {73, 100};
     _faviconView.translatesAutoresizingMaskIntoConstraints = NO;
 
     [self.contentView addSubview:_titleLabel];
-    [self.contentView addSubview:_faviconView];
 
-    [NSLayoutConstraint activateConstraints:@[
-      [_faviconView.widthAnchor constraintEqualToConstant:kFaviconSize],
-      [_faviconView.heightAnchor
-          constraintEqualToAnchor:_faviconView.widthAnchor],
-      [_faviconView.centerXAnchor
-          constraintEqualToAnchor:_titleLabel.centerXAnchor],
-    ]];
+    UIView* containerView = nil;
+    if (IsUIRefreshPhase1Enabled()) {
+      UIImageView* faviconContainer =
+          [[UIImageView alloc] initWithFrame:self.bounds];
+      faviconContainer.translatesAutoresizingMaskIntoConstraints = NO;
+      faviconContainer.image = [UIImage imageNamed:@"ntp_most_visited_tile"];
+      [self.contentView addSubview:faviconContainer];
+      [faviconContainer addSubview:_faviconView];
+
+      [NSLayoutConstraint activateConstraints:@[
+        [faviconContainer.widthAnchor constraintEqualToConstant:kIconSize],
+        [faviconContainer.heightAnchor
+            constraintEqualToAnchor:faviconContainer.widthAnchor],
+        [faviconContainer.centerXAnchor
+            constraintEqualToAnchor:_titleLabel.centerXAnchor],
+        [_faviconView.heightAnchor constraintEqualToConstant:32],
+        [_faviconView.widthAnchor
+            constraintEqualToAnchor:_faviconView.heightAnchor],
+      ]];
+      AddSameCenterConstraints(_faviconView, faviconContainer);
+      containerView = faviconContainer;
+    } else {
+      [self.contentView addSubview:_faviconView];
+
+      [NSLayoutConstraint activateConstraints:@[
+        [_faviconView.widthAnchor constraintEqualToConstant:kIconSizeLegacy],
+        [_faviconView.heightAnchor
+            constraintEqualToAnchor:_faviconView.widthAnchor],
+        [_faviconView.centerXAnchor
+            constraintEqualToAnchor:_titleLabel.centerXAnchor],
+      ]];
+      containerView = _faviconView;
+    }
 
     ApplyVisualConstraintsWithMetrics(
-        @[ @"V:|[favicon]-(space)-[title]", @"H:|[title]|" ],
-        @{ @"favicon" : _faviconView,
-           @"title" : _titleLabel },
-        @{ @"space" : @(kSpaceFaviconTitle) });
+        @[ @"V:|[container]-(space)-[title]", @"H:|[title]|" ],
+        @{@"container" : containerView, @"title" : _titleLabel},
+        @{ @"space" : @(kSpaceIconTitle) });
 
     self.isAccessibilityElement = YES;
   }

ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_constants.h

+// 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.
+
+#ifndef IOS_CHROME_BROWSER_UI_CONTENT_SUGGESTIONS_CELLS_CONTENT_SUGGESTIONS_MOST_VISITED_CONSTANTS_H_
+#define IOS_CHROME_BROWSER_UI_CONTENT_SUGGESTIONS_CELLS_CONTENT_SUGGESTIONS_MOST_VISITED_CONSTANTS_H_
+
+#import <UIKit/UIKit.h>
+
+// Size of the favicon or icon.
+extern const CGFloat kIconSize;
+
+// Color of the title label.
+extern const CGFloat kLabelTextColor;
+
+// Number of lines of the title label.
+extern const NSInteger kLabelNumLines;
+
+// Space between the icon and the title label.
+extern const CGFloat kSpaceIconTitle;
+
+// Size of a Most Visited cell.
+extern const CGSize kCellSize;
+
+#endif  // IOS_CHROME_BROWSER_UI_CONTENT_SUGGESTIONS_CELLS_CONTENT_SUGGESTIONS_MOST_VISITED_CONSTANTS_H_

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

+// 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/content_suggestions/cells/content_suggestions_most_visited_constants.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+const CGFloat kIconSize = 56;
+const CGFloat kLabelTextColor = 0.314;
+const NSInteger kLabelNumLines = 2;
+const CGFloat kSpaceIconTitle = 10;
+const CGSize kCellSize = {73, 100};

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

@@ -107,6 +107,8 @@ const NSInteger kMaxNumMostVisitedTiles = 4;
 // reading list count.
 @property(nonatomic, strong)
     ContentSuggestionsMostVisitedActionItem* readingListItem;
+// Number of unread items in reading list model.
+@property(nonatomic, assign) NSInteger readingListUnreadCount;
 
 @end
 
@@ -129,6 +131,7 @@ const NSInteger kMaxNumMostVisitedTiles = 4;
 @synthesize learnMoreItem = _learnMoreItem;
 @synthesize readingListNeedsReload = _readingListNeedsReload;
 @synthesize readingListItem = _readingListItem;
+@synthesize readingListUnreadCount = _readingListUnreadCount;
 
 #pragma mark - Public
 
@@ -602,6 +605,7 @@ initWithContentService:(ntp_snippets::ContentSuggestionsService*)contentService
 - (NSArray<ContentSuggestionsMostVisitedActionItem*>*)actionButtonItems {
   if (!_actionButtonItems) {
     self.readingListItem = ReadingListActionItem();
+    self.readingListItem.count = self.readingListUnreadCount;
     _actionButtonItems = @[
       BookmarkActionItem(), self.readingListItem, RecentTabsActionItem(),
       HistoryActionItem()
@@ -613,11 +617,15 @@ initWithContentService:(ntp_snippets::ContentSuggestionsService*)contentService
 #pragma mark - ReadingListModelBridgeObserver
 
 - (void)readingListModelLoaded:(const ReadingListModel*)model {
-  // TODO(crbug.com/805636) Pass model.size() to self.readingListItem
+  [self readingListModelDidApplyChanges:model];
 }
 
 - (void)readingListModelDidApplyChanges:(const ReadingListModel*)model {
-  // TODO(crbug.com/805636) Pass model.size() to self.readingListItem
+  self.readingListUnreadCount = model->unread_size();
+  if (self.readingListItem) {
+    self.readingListItem.count = self.readingListUnreadCount;
+    [self.dataSink itemHasChanged:self.readingListItem];
+  }
 }
 
 @end