[ios] Adding the selection UI to the TabStrip.

This CL updates the TabStrip to update the UI according to the
selected tab.

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

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

@@ -39,6 +39,7 @@ source_set("tab_strip_ui") {
     "//ios/chrome/browser",
     "//ios/chrome/browser/browser_state",
     "//ios/chrome/browser/tabs",
+    "//ios/chrome/browser/ui/image_util",
     "//ios/chrome/browser/ui/tab_switcher",
     "//ios/chrome/browser/web:tab_id_tab_helper",
     "//ios/chrome/browser/web_state_list",

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

@@ -4,6 +4,7 @@
 
 #import "ios/chrome/browser/ui/tab_switcher/tab_strip/tab_strip_cell.h"
 
+#import "ios/chrome/browser/ui/image_util/image_util.h"
 #import "ios/chrome/common/ui/colors/semantic_color_names.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
@@ -21,13 +22,7 @@ const CGFloat kTitleInset = 10.0;
 
 - (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]];
+    [self setupBackgroundViews];
 
     UIImage* favicon = [[UIImage imageNamed:@"default_world_favicon"]
         imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
@@ -83,6 +78,43 @@ const CGFloat kTitleInset = 10.0;
   [super prepareForReuse];
   self.titleLabel.text = nil;
   self.itemIdentifier = nil;
+  self.selected = NO;
+}
+
+- (void)setupBackgroundViews {
+  self.backgroundView = [self resizeableBackgroundImageForStateSelected:NO];
+  self.selectedBackgroundView =
+      [self resizeableBackgroundImageForStateSelected:YES];
+}
+
+#pragma mark - UIView
+
+- (void)traitCollectionDidChange:(UITraitCollection*)previousTraitCollection {
+  [super traitCollectionDidChange:previousTraitCollection];
+  [self setupBackgroundViews];
+}
+
+#pragma mark - Private
+
+// Updates this tab's style based on the value of |selected| and the current
+// incognito style.
+- (UIView*)resizeableBackgroundImageForStateSelected:(BOOL)selected {
+  // Style the background image first.
+  NSString* state = (selected ? @"foreground" : @"background");
+  NSString* imageName = [NSString stringWithFormat:@"tabstrip_%@_tab", state];
+
+  // As of iOS 13 Beta 4, resizable images are flaky for dark mode.
+  // Radar filled: b/137942721.
+  UIImage* resolvedImage = [UIImage imageNamed:imageName
+                                      inBundle:nil
+                 compatibleWithTraitCollection:self.traitCollection];
+  UIEdgeInsets insets = UIEdgeInsetsMake(
+      0, kTabBackgroundLeftCapInset, resolvedImage.size.height + 1.0,
+      resolvedImage.size.width - kTabBackgroundLeftCapInset + 1.0);
+  UIImage* backgroundImage =
+      StretchableImageFromUIImage(resolvedImage, kTabBackgroundLeftCapInset, 0);
+  return [[UIImageView alloc]
+      initWithImage:[backgroundImage resizableImageWithCapInsets:insets]];
 }
 
 // Selector registered to the close button.

ios/chrome/browser/ui/tab_switcher/tab_strip/tab_strip_consumer.h

@@ -23,6 +23,9 @@
 // The consumer should ignore this call if |itemID| has not yet been inserted.
 - (void)replaceItemID:(NSString*)itemID withItem:(TabSwitcherItem*)item;
 
+// Tells the consumer to update the selected item ID to be |selectedItemID|.
+- (void)selectItemWithID:(NSString*)selectedItemID;
+
 @end
 
 #endif  // IOS_CHROME_BROWSER_UI_TAB_SWITCHER_TAB_STRIP_TAB_STRIP_CONSUMER_H_

ios/chrome/browser/ui/tab_switcher/tab_strip/tab_strip_mediator.mm

@@ -161,6 +161,25 @@ int GetIndexOfTabWithId(WebStateList* web_state_list, NSString* identifier) {
   [self populateConsumerItems];
 }
 
+- (void)webStateList:(WebStateList*)webStateList
+    didChangeActiveWebState:(web::WebState*)newWebState
+                oldWebState:(web::WebState*)oldWebState
+                    atIndex:(int)atIndex
+                     reason:(ActiveWebStateChangeReason)reason {
+  DCHECK_EQ(_webStateList, webStateList);
+  if (webStateList->IsBatchInProgress())
+    return;
+  // If the selected index changes as a result of the last webstate being
+  // detached, atIndex will be -1.
+  if (atIndex == -1) {
+    [self.consumer selectItemWithID:nil];
+    return;
+  }
+
+  TabIdTabHelper* tabHelper = TabIdTabHelper::FromWebState(newWebState);
+  [self.consumer selectItemWithID:tabHelper->tab_id()];
+}
+
 #pragma mark - TabFaviconDataSource
 
 - (void)faviconForIdentifier:(NSString*)identifier
@@ -207,6 +226,7 @@ int GetIndexOfTabWithId(WebStateList* web_state_list, NSString* identifier) {
       base::checked_cast<int>(self.webStateList->count()), std::move(webState),
       (WebStateList::INSERT_FORCE_INDEX | WebStateList::INSERT_ACTIVATE),
       WebStateOpener());
+  [self.consumer selectItemWithID:GetActiveTabId(self.webStateList)];
 }
 
 - (void)selectTab:(int)index {

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

@@ -126,6 +126,10 @@ const CGFloat kNewTabButtonBottomImageInset = -2.0;
   self.items = [items mutableCopy];
   self.selectedItemID = selectedItemID;
   [self.collectionView reloadData];
+  [self.collectionView
+      selectItemAtIndexPath:CreateIndexPath(self.selectedIndex)
+                   animated:YES
+             scrollPosition:UICollectionViewScrollPositionNone];
 }
 
 - (void)replaceItemID:(NSString*)itemID withItem:(TabSwitcherItem*)item {
@@ -143,6 +147,20 @@ const CGFloat kNewTabButtonBottomImageInset = -2.0;
     [self configureCell:cell withItem:item];
 }
 
+- (void)selectItemWithID:(NSString*)selectedItemID {
+  if (self.selectedItemID == selectedItemID)
+    return;
+
+  [self.collectionView
+      deselectItemAtIndexPath:CreateIndexPath(self.selectedIndex)
+                     animated:YES];
+  self.selectedItemID = selectedItemID;
+  [self.collectionView
+      selectItemAtIndexPath:CreateIndexPath(self.selectedIndex)
+                   animated:YES
+             scrollPosition:UICollectionViewScrollPositionNone];
+}
+
 #pragma mark - Private
 
 // Configures |cell|'s title synchronously, and favicon asynchronously with
@@ -179,6 +197,12 @@ const CGFloat kNewTabButtonBottomImageInset = -2.0;
   [self.delegate addNewItem];
 }
 
+#pragma mark - Private properties
+
+- (NSUInteger)selectedIndex {
+  return [self indexOfItemWithID:self.selectedItemID];
+}
+
 #pragma mark - UICollectionViewDelegate
 
 - (void)collectionView:(UICollectionView*)collectionView