[ios] Add a TabStrip Cell.

This CL adds a TabStrip Cell.

Bug: 1128249, 1134075
Change-Id: I3a8d35c9467672edfdfa7693b4c13147e284bd40
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2440556Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Commit-Queue: Nazerke Kalidolda <nazerke@google.com>
Cr-Commit-Position: refs/heads/master@{#818932}

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

@@ -21,6 +21,8 @@ source_set("tab_strip") {
 source_set("tab_strip_ui") {
   configs += [ "//build/config/compiler:enable_arc" ]
   sources = [
+    "tab_strip_cell.h",
+    "tab_strip_cell.mm",
     "tab_strip_view_controller.h",
     "tab_strip_view_controller.mm",
     "tab_strip_view_layout.h",
@@ -29,6 +31,7 @@ source_set("tab_strip_ui") {
   deps = [
     "//ios/chrome/browser/browser_state",
     "//ios/chrome/browser/main:public",
+    "//ios/chrome/common/ui/colors",
   ]
   frameworks = [ "UIKit.framework" ]
 }

ios/chrome/browser/ui/tab_strip/tab_strip_cell.h

+// Copyright 2020 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_TAB_STRIP_TAB_STRIP_CELL_H_
+#define IOS_CHROME_BROWSER_UI_TAB_STRIP_TAB_STRIP_CELL_H_
+
+#import <UIKit/UIKit.h>
+
+// UICollectionViewCell that contains a Tab title with a leading imageView
+// and a close tab button.
+@interface TabStripCell : UICollectionViewCell
+
+@property(nonatomic, strong) UILabel* titleLabel;
+
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_TAB_STRIP_TAB_STRIP_CELL_H_

ios/chrome/browser/ui/tab_strip/tab_strip_cell.mm

+// Copyright 2020 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/tab_strip/tab_strip_cell.h"
+
+#import "ios/chrome/common/ui/colors/semantic_color_names.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+// Tab close button insets.
+const CGFloat kTabBackgroundLeftCapInset = 34.0;
+const CGFloat kFaviconInset = 28;
+const CGFloat kTitleInset = 10.0;
+}  // namespace
+
+@implementation TabStripCell
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if ((self = [super initWithFrame:frame])) {
+    NSString* imageName = @"tabstrip_background_tab";
+    UIImage* image = [UIImage imageNamed:imageName];
+    UIEdgeInsets insets =
+        UIEdgeInsetsMake(0, kTabBackgroundLeftCapInset, image.size.height + 1.0,
+                         image.size.width - kTabBackgroundLeftCapInset + 1.0);
+    self.backgroundView = [[UIImageView alloc]
+        initWithImage:[image resizableImageWithCapInsets:insets]];
+
+    UIImage* favicon = [[UIImage imageNamed:@"default_world_favicon"]
+        imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+    UIImageView* faviconView = [[UIImageView alloc] initWithImage:favicon];
+    faviconView.tintColor = [UIColor colorNamed:kGrey500Color];
+    [self.contentView addSubview:faviconView];
+    faviconView.translatesAutoresizingMaskIntoConstraints = NO;
+    [NSLayoutConstraint activateConstraints:@[
+      [faviconView.leadingAnchor
+          constraintEqualToAnchor:self.contentView.leadingAnchor
+                         constant:kFaviconInset],
+      [faviconView.centerYAnchor
+          constraintEqualToAnchor:self.contentView.centerYAnchor],
+    ]];
+
+    UIImage* close = [[UIImage imageNamed:@"grid_cell_close_button"]
+        imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+    UIButton* closeButton = [UIButton buttonWithType:UIButtonTypeCustom];
+    [closeButton setImage:close forState:UIControlStateNormal];
+    closeButton.tintColor = [UIColor colorNamed:kGrey500Color];
+    [self.contentView addSubview:closeButton];
+    closeButton.translatesAutoresizingMaskIntoConstraints = NO;
+    [NSLayoutConstraint activateConstraints:@[
+      [closeButton.trailingAnchor
+          constraintEqualToAnchor:self.contentView.trailingAnchor
+                         constant:-kFaviconInset],
+      [closeButton.centerYAnchor
+          constraintEqualToAnchor:self.contentView.centerYAnchor],
+    ]];
+
+    UILabel* titleLabel = [[UILabel alloc] init];
+    [self.contentView addSubview:titleLabel];
+    titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    [NSLayoutConstraint activateConstraints:@[
+      [titleLabel.leadingAnchor
+          constraintEqualToAnchor:faviconView.trailingAnchor
+                         constant:kTitleInset],
+      [titleLabel.trailingAnchor
+          constraintLessThanOrEqualToAnchor:closeButton.leadingAnchor
+                                   constant:-kTitleInset],
+      [titleLabel.centerYAnchor
+          constraintEqualToAnchor:faviconView.centerYAnchor],
+    ]];
+    self.titleLabel = titleLabel;
+  }
+  return self;
+}
+
+- (void)prepareForReuse {
+  [super prepareForReuse];
+  self.titleLabel.text = nil;
+}
+
+@end

ios/chrome/browser/ui/tab_strip/tab_strip_coordinator.mm

@@ -13,6 +13,8 @@
 #error "This file requires ARC support."
 #endif
 
+@protocol TabStripContaining;
+
 @implementation TabStripCoordinator
 
 #pragma mark - ChromeCoordinator

ios/chrome/browser/ui/tab_strip/tab_strip_view_controller.mm

@@ -4,6 +4,7 @@
 
 #import "ios/chrome/browser/ui/tab_strip/tab_strip_view_controller.h"
 
+#import "ios/chrome/browser/ui/tab_strip/tab_strip_cell.h"
 #import "ios/chrome/browser/ui/tab_strip/tab_strip_view_layout.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
@@ -12,6 +13,10 @@
 
 @implementation TabStripViewController
 
+namespace {
+static NSString* const kReuseIdentifier = @"TabView";
+}  // namespace
+
 - (instancetype)init {
   TabStripViewLayout* layout = [[TabStripViewLayout alloc] init];
   if (self = [super initWithCollectionViewLayout:layout]) {
@@ -23,6 +28,22 @@
   [super viewDidLoad];
   self.view.translatesAutoresizingMaskIntoConstraints = NO;
   self.collectionView.alwaysBounceHorizontal = YES;
+  [self.collectionView registerClass:[TabStripCell class]
+          forCellWithReuseIdentifier:kReuseIdentifier];
+}
+
+- (NSInteger)numberOfSectionsInCollectionView:
+    (UICollectionView*)collectionView {
+  return 1;
+}
+
+- (UICollectionViewCell*)collectionView:(UICollectionView*)collectionView
+                 cellForItemAtIndexPath:(NSIndexPath*)indexPath {
+  TabStripCell* cell = (TabStripCell*)[collectionView
+      dequeueReusableCellWithReuseIdentifier:kReuseIdentifier
+                                forIndexPath:indexPath];
+  cell.titleLabel.text = nil;
+  return cell;
 }
 
 @end