Factor out NTP tile views from the content suggestion cells.

Extracts the NTP tiles into UIView subclasses that can be used outside
of the NTP-related collection views.

Bug: none
Cq-Include-Trybots: luci.chromium.try:ios-simulator-cronet;luci.chromium.try:ios-simulator-full-configs
Change-Id: I534e54f5bdf23592d43baa035a14327563ee7751
Reviewed-on: https://chromium-review.googlesource.com/c/1278985Reviewed-by: Mark Cogan <marq@chromium.org>
Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Commit-Queue: Stepan Khapugin <stkhapugin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#600424}

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

@@ -14,11 +14,6 @@ source_set("cells") {
   ]
   deps = [
     ":cells_ui",
-    "resources:ntp_bookmarks_icon",
-    "resources:ntp_history_icon",
-    "resources:ntp_most_visited_tile",
-    "resources:ntp_readinglist_icon",
-    "resources:ntp_recent_icon",
     "//base",
     "//components/ntp_tiles",
     "//ios/chrome/app/strings",
@@ -63,6 +58,7 @@ source_set("cells_ui") {
     "//ios/chrome/browser/ui/colors",
     "//ios/chrome/browser/ui/content_suggestions/identifier",
     "//ios/chrome/browser/ui/material_components",
+    "//ios/chrome/browser/ui/ntp_tile_views",
     "//ios/chrome/browser/ui/util",
     "//ios/chrome/common",
     "//ios/chrome/common/favicon",

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

@@ -5,6 +5,7 @@
 #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/ntp_tile_views/ntp_shortcut_tile_view.h"
 #include "ios/chrome/browser/ui/ui_util.h"
 #import "ios/chrome/browser/ui/uikit_ui_util.h"
 #import "ios/chrome/common/favicon/favicon_view.h"
@@ -16,67 +17,25 @@
 #error "This file requires ARC support."
 #endif
 
-namespace {
+@interface ContentSuggestionsMostVisitedActionCell ()
 
-const CGFloat kCountWidth = 20;
-const CGFloat kCountBorderWidth = 24;
+@property(nonatomic, strong) NTPShortcutTileView* tileView;
 
-const int kBackgroundColor = 0xE8F1FC;
-
-}  // namespace
+@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:0 alpha:kTitleAlpha];
-    _titleLabel.font = [UIFont systemFontOfSize:12];
-    _titleLabel.textAlignment = NSTextAlignmentCenter;
-    _titleLabel.preferredMaxLayoutWidth = [[self class] defaultSize].width;
-    _titleLabel.numberOfLines = kLabelNumLines;
-
-    _iconView = [[UIImageView alloc] initWithFrame:self.bounds];
-
-    UIImageView* iconBackground = [[UIImageView alloc] init];
-    iconBackground.image = [[UIImage imageNamed:@"ntp_most_visited_tile"]
-        imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
-    iconBackground.tintColor = UIColorFromRGB(kBackgroundColor);
-
-    _titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
-    _iconView.translatesAutoresizingMaskIntoConstraints = NO;
-    iconBackground.translatesAutoresizingMaskIntoConstraints = NO;
-
-    [self.contentView addSubview:iconBackground];
-    [self.contentView addSubview:_titleLabel];
-    [self.contentView addSubview:_iconView];
-
-    [NSLayoutConstraint activateConstraints:@[
-      [_iconView.widthAnchor constraintEqualToConstant:kIconSize],
-      [iconBackground.widthAnchor
-          constraintEqualToAnchor:_iconView.widthAnchor],
-      [_iconView.heightAnchor constraintEqualToAnchor:_iconView.widthAnchor],
-      [iconBackground.heightAnchor
-          constraintEqualToAnchor:iconBackground.widthAnchor],
-      [_iconView.centerXAnchor
-          constraintEqualToAnchor:_titleLabel.centerXAnchor],
-    ]];
-
-    AddSameCenterXConstraint(iconBackground, _iconView);
-    AddSameCenterYConstraint(iconBackground, _iconView);
-
-    ApplyVisualConstraintsWithMetrics(
-        @[ @"V:|[icon]-(space)-[title]", @"H:|[title]|" ],
-        @{@"icon" : _iconView, @"title" : _titleLabel},
-        @{ @"space" : @(kSpaceIconTitle) });
+    _tileView = [[NTPShortcutTileView alloc] initWithFrame:frame];
+    _tileView.translatesAutoresizingMaskIntoConstraints = NO;
+    [self.contentView addSubview:_tileView];
+    AddSameConstraints(self.contentView, _tileView);
+
+    _tileView.countLabel.font = [MDCTypography captionFont];
 
     self.isAccessibilityElement = YES;
   }
@@ -105,50 +64,25 @@ const int kBackgroundColor = 0xE8F1FC;
 
 - (void)prepareForReuse {
   [super prepareForReuse];
-  _countContainer.hidden = YES;
+  self.tileView.countContainer.hidden = YES;
+}
+
+#pragma mark - properties
+
+- (UIImageView*)iconView {
+  return self.tileView.iconView;
+}
+
+- (UILabel*)titleLabel {
+  return self.tileView.titleLabel;
+}
+
+- (UIView*)countContainer {
+  return self.tileView.countContainer;
 }
 
 - (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;
+  return self.tileView.countLabel;
 }
 
 @end

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

@@ -4,6 +4,8 @@
 
 #import "ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_cell.h"
 
+#import "ios/chrome/browser/ui/ntp_tile_views/ntp_most_visited_tile_view.h"
+
 #import "ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_most_visited_constants.h"
 #include "ios/chrome/browser/ui/ui_util.h"
 #import "ios/chrome/common/favicon/favicon_view.h"
@@ -14,61 +16,36 @@
 #error "This file requires ARC support."
 #endif
 
-@implementation ContentSuggestionsMostVisitedCell : MDCCollectionViewCell
+@interface ContentSuggestionsMostVisitedCell ()
+
+@property(nonatomic, strong) NTPMostVisitedTileView* mostVisitedTile;
 
-@synthesize faviconView = _faviconView;
-@synthesize titleLabel = _titleLabel;
+@end
+
+@implementation ContentSuggestionsMostVisitedCell : MDCCollectionViewCell
 
 #pragma mark - Public
 
 - (instancetype)initWithFrame:(CGRect)frame {
   self = [super initWithFrame:frame];
   if (self) {
-    _titleLabel = [[UILabel alloc] init];
-    _titleLabel.textColor = [UIColor colorWithWhite:0 alpha:kTitleAlpha];
-    _titleLabel.font = [UIFont systemFontOfSize:12];
-    _titleLabel.textAlignment = NSTextAlignmentCenter;
-    _titleLabel.preferredMaxLayoutWidth = [[self class] defaultSize].width;
-    _titleLabel.numberOfLines = kLabelNumLines;
-
-    _faviconView = [[FaviconView alloc] init];
-    _faviconView.font = [UIFont systemFontOfSize:22];
-    _titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
-    _faviconView.translatesAutoresizingMaskIntoConstraints = NO;
-
-    [self.contentView addSubview:_titleLabel];
-
-    UIView* containerView = nil;
-    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;
-
-    ApplyVisualConstraintsWithMetrics(
-        @[ @"V:|[container]-(space)-[title]", @"H:|[title]|" ],
-        @{@"container" : containerView, @"title" : _titleLabel},
-        @{ @"space" : @(kSpaceIconTitle) });
-
+    _mostVisitedTile = [[NTPMostVisitedTileView alloc] initWithFrame:frame];
+    [self.contentView addSubview:_mostVisitedTile];
+    _mostVisitedTile.translatesAutoresizingMaskIntoConstraints = NO;
+    AddSameConstraints(self.contentView, _mostVisitedTile);
     self.isAccessibilityElement = YES;
   }
   return self;
 }
 
+- (FaviconView*)faviconView {
+  return self.mostVisitedTile.faviconView;
+}
+
+- (UILabel*)titleLabel {
+  return self.mostVisitedTile.titleLabel;
+}
+
 - (void)setHighlighted:(BOOL)highlighted {
   [super setHighlighted:highlighted];
 

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

+# 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.
+
+source_set("ntp_tile_views") {
+  configs += [ "//build/config/compiler:enable_arc" ]
+  sources = [
+    "ntp_most_visited_tile_view.h",
+    "ntp_most_visited_tile_view.mm",
+    "ntp_shortcut_tile_view.h",
+    "ntp_shortcut_tile_view.mm",
+    "ntp_tile_view.h",
+    "ntp_tile_view.mm",
+  ]
+
+  deps = [
+    "resources:ntp_bookmarks_icon",
+    "resources:ntp_history_icon",
+    "resources:ntp_most_visited_tile",
+    "resources:ntp_readinglist_icon",
+    "resources:ntp_recent_icon",
+    "//ios/chrome/common/favicon",
+    "//ios/chrome/common/ui_util",
+  ]
+}

ios/chrome/browser/ui/ntp_tile_views/ntp_most_visited_tile_view.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_NTP_TILE_VIEWS_NTP_MOST_VISITED_TILE_VIEW_H_
+#define IOS_CHROME_BROWSER_UI_NTP_TILE_VIEWS_NTP_MOST_VISITED_TILE_VIEW_H_
+
+#import "ios/chrome/browser/ui/ntp_tile_views/ntp_tile_view.h"
+
+@class FaviconView;
+
+// NTP Tile representing a most visited website. Displays a favicon and a title.
+@interface NTPMostVisitedTileView : NTPTileView
+
+// FaviconView displaying the favicon.
+@property(nonatomic, strong, readonly, nonnull) FaviconView* faviconView;
+
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_NTP_TILE_VIEWS_NTP_MOST_VISITED_TILE_VIEW_H_

ios/chrome/browser/ui/ntp_tile_views/ntp_most_visited_tile_view.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/ntp_tile_views/ntp_most_visited_tile_view.h"
+
+#import "ios/chrome/common/favicon/favicon_view.h"
+#import "ios/chrome/common/ui_util/constraints_ui_util.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+@implementation NTPMostVisitedTileView
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  self = [super initWithFrame:frame];
+  if (self) {
+    _faviconView = [[FaviconView alloc] init];
+    _faviconView.font = [UIFont systemFontOfSize:22];
+    _faviconView.translatesAutoresizingMaskIntoConstraints = NO;
+    [NSLayoutConstraint activateConstraints:@[
+      [_faviconView.heightAnchor constraintEqualToConstant:32],
+      [_faviconView.widthAnchor
+          constraintEqualToAnchor:_faviconView.heightAnchor],
+    ]];
+
+    [self.imageContainerView addSubview:_faviconView];
+    AddSameConstraints(self.imageContainerView, _faviconView);
+  }
+  return self;
+}
+
+@end

ios/chrome/browser/ui/ntp_tile_views/ntp_shortcut_tile_view.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_NTP_TILE_VIEWS_NTP_SHORTCUT_TILE_VIEW_H_
+#define IOS_CHROME_BROWSER_UI_NTP_TILE_VIEWS_NTP_SHORTCUT_TILE_VIEW_H_
+
+#import "ios/chrome/browser/ui/ntp_tile_views/ntp_tile_view.h"
+
+// A tile view displaying a collection shortcut. Accepts a simple icon and
+// optionally supports a badge, for example for reading list new item count.
+@interface NTPShortcutTileView : NTPTileView
+
+// View for action icon.
+@property(nonatomic, strong, readonly, nonnull) UIImageView* iconView;
+
+// Container view for |countLabel|.
+@property(nonatomic, strong, readonly, nonnull) UIView* countContainer;
+
+// Number shown in circle by top trailing side of cell.
+@property(nonatomic, strong, readonly, nonnull) UILabel* countLabel;
+
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_NTP_TILE_VIEWS_NTP_SHORTCUT_TILE_VIEW_H_

ios/chrome/browser/ui/ntp_tile_views/ntp_shortcut_tile_view.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/ntp_tile_views/ntp_shortcut_tile_view.h"
+
+#import "ios/chrome/common/ui_util/constraints_ui_util.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;
+const CGFloat kIconSize = 56;
+
+}  // namespace
+
+@implementation NTPShortcutTileView
+@synthesize countLabel = _countLabel;
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  self = [super initWithFrame:frame];
+  if (self) {
+    _iconView = [[UIImageView alloc] initWithFrame:self.bounds];
+    _iconView.translatesAutoresizingMaskIntoConstraints = NO;
+
+    [self.imageContainerView addSubview:_iconView];
+    AddSameConstraints(self.imageContainerView, _iconView);
+    [NSLayoutConstraint activateConstraints:@[
+      [_iconView.widthAnchor constraintEqualToConstant:kIconSize],
+      [_iconView.heightAnchor constraintEqualToAnchor:_iconView.widthAnchor],
+    ]];
+
+    self.imageBackgroundView.tintColor =
+        [UIColor colorWithRed:0.91 green:0.95 blue:0.99 alpha:1.0];
+  }
+  return self;
+}
+
+- (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.textAlignment = NSTextAlignmentCenter;
+    _countLabel.backgroundColor =
+        [UIColor colorWithRed:0.10 green:0.45 blue:0.91 alpha:1.0];
+
+    _countContainer.translatesAutoresizingMaskIntoConstraints = NO;
+    _countLabel.translatesAutoresizingMaskIntoConstraints = NO;
+
+    [self addSubview:self.countContainer];
+    [self.countContainer addSubview:self.countLabel];
+
+    [NSLayoutConstraint activateConstraints:@[
+      [_countContainer.widthAnchor constraintEqualToConstant:kCountBorderWidth],
+      [_countContainer.heightAnchor
+          constraintEqualToAnchor:_countContainer.widthAnchor],
+      [_countContainer.topAnchor constraintEqualToAnchor:self.topAnchor],
+      [_countContainer.trailingAnchor
+          constraintEqualToAnchor:self.trailingAnchor],
+      [_countLabel.widthAnchor constraintEqualToConstant:kCountWidth],
+      [_countLabel.heightAnchor
+          constraintEqualToAnchor:_countLabel.widthAnchor],
+    ]];
+    AddSameCenterConstraints(_countLabel, _countContainer);
+  }
+  _countContainer.hidden = NO;
+  return _countLabel;
+}
+
++ (UIImage*)backgroundImage {
+  // This subclass uses tintColor on the background view, so use template
+  // rendering mode.
+  return [[super backgroundImage]
+      imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+}
+
+@end

ios/chrome/browser/ui/ntp_tile_views/ntp_tile_view.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_NTP_TILE_VIEWS_NTP_TILE_VIEW_H_
+#define IOS_CHROME_BROWSER_UI_NTP_TILE_VIEWS_NTP_TILE_VIEW_H_
+
+#import <UIKit/UIKit.h>
+
+// A generic NTP tile view. Provides a title label and an image container on a
+// squircle-shaped background. Concrete subclasses of this are used to display
+// most visited tiles and shortcut tiles on NTP and other places.
+@interface NTPTileView : UIView
+
+// Container for the image view. Used in subclasses.
+@property(nonatomic, strong, readonly, nonnull) UIView* imageContainerView;
+
+// Title of the Most Visited.
+@property(nonatomic, strong, readonly, nonnull) UILabel* titleLabel;
+
+// The view displaying the background image (squircle) for the tile image.
+@property(nonatomic, strong, readonly, nonnull)
+    UIImageView* imageBackgroundView;
+
+// Image to be used as the image background. The default is the grey squircle.
++ (nonnull UIImage*)backgroundImage;
+
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_NTP_TILE_VIEWS_NTP_TILE_VIEW_H_

ios/chrome/browser/ui/ntp_tile_views/ntp_tile_view.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/ntp_tile_views/ntp_tile_view.h"
+
+#import "ios/chrome/common/ui_util/constraints_ui_util.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+
+const NSInteger kLabelNumLines = 2;
+const CGFloat kSpaceIconTitle = 10;
+const CGFloat kIconSize = 56;
+const CGFloat kTitleAlpha = 0.54;
+const CGFloat kPreferredMaxWidth = 73;
+
+}  // namespace
+
+@implementation NTPTileView
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  self = [super initWithFrame:frame];
+  if (self) {
+    _titleLabel = [[UILabel alloc] init];
+    _titleLabel.textColor = [UIColor colorWithWhite:0 alpha:kTitleAlpha];
+    _titleLabel.font = [UIFont systemFontOfSize:12];
+    _titleLabel.textAlignment = NSTextAlignmentCenter;
+    _titleLabel.preferredMaxLayoutWidth = kPreferredMaxWidth;
+    _titleLabel.numberOfLines = kLabelNumLines;
+
+    _imageContainerView = [[UIView alloc] init];
+    _titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _imageContainerView.translatesAutoresizingMaskIntoConstraints = NO;
+
+    [self addSubview:_titleLabel];
+
+    // The squircle background view.
+    UIImageView* backgroundView =
+        [[UIImageView alloc] initWithFrame:self.bounds];
+    backgroundView.translatesAutoresizingMaskIntoConstraints = NO;
+    backgroundView.image = [[self class] backgroundImage];
+    [self addSubview:backgroundView];
+    [self addSubview:_imageContainerView];
+
+    [NSLayoutConstraint activateConstraints:@[
+      [backgroundView.widthAnchor constraintEqualToConstant:kIconSize],
+      [backgroundView.heightAnchor
+          constraintEqualToAnchor:backgroundView.widthAnchor],
+      [backgroundView.centerXAnchor
+          constraintEqualToAnchor:_titleLabel.centerXAnchor],
+    ]];
+    AddSameCenterConstraints(_imageContainerView, backgroundView);
+    UIView* containerView = backgroundView;
+
+    ApplyVisualConstraintsWithMetrics(
+        @[ @"V:|[container]-(space)-[title]", @"H:|[title]|" ],
+        @{@"container" : containerView, @"title" : _titleLabel},
+        @{ @"space" : @(kSpaceIconTitle) });
+
+    _imageBackgroundView = backgroundView;
+  }
+  return self;
+}
+
++ (UIImage*)backgroundImage {
+  return [UIImage imageNamed:@"ntp_most_visited_tile"];
+}
+
+@end