[iOS][DarkMode] Update Tab Strip support for dark mode

Add background assets for dark mode.
Remove dupe images between incognito and not incognito.
Prefer to tint the asset for the favicon.
Change text and icon color for the inactive state.

Bug: 976817
Change-Id: I284cc4af88f3edae9a08a3693b459107928fd5a8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1712664
Commit-Queue: Javier Ernesto Flores Robles <javierrobles@chromium.org>
Reviewed-by: Rohit Rao <rohitrao@chromium.org>
Cr-Commit-Position: refs/heads/master@{#680015}

ios/chrome/browser/ui/favicon/resources/BUILD.gn

@@ -39,12 +39,3 @@ imageset("default_favicon") {
     "default_favicon.imageset/default_favicon@3x.png",
   ]
 }
-
-imageset("default_favicon_incognito") {
-  sources = [
-    "default_favicon_incognito.imageset/Contents.json",
-    "default_favicon_incognito.imageset/default_favicon_incognito.png",
-    "default_favicon_incognito.imageset/default_favicon_incognito@2x.png",
-    "default_favicon_incognito.imageset/default_favicon_incognito@3x.png",
-  ]
-}

ios/chrome/browser/ui/favicon/resources/default_favicon_incognito.imageset/Contents.json

-{
-    "images": [
-        {
-            "idiom": "universal",
-            "scale": "1x",
-            "filename": "default_favicon_incognito.png"
-        },
-        {
-            "idiom": "universal",
-            "scale": "2x",
-            "filename": "default_favicon_incognito@2x.png"
-        },
-        {
-            "idiom": "universal",
-            "scale": "3x",
-            "filename": "default_favicon_incognito@3x.png"
-        }
-    ],
-    "info": {
-        "version": 1,
-        "author": "xcode"
-    }
-}

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

@@ -31,11 +31,10 @@ source_set("tabs") {
     "resources:tabstrip_background_tab",
     "resources:tabstrip_foreground_tab",
     "resources:tabstrip_inactive_tab_close_button_color",
+    "resources:tabstrip_inactive_tab_text_color",
     "resources:tabstrip_incognito_background_tab",
     "resources:tabstrip_incognito_foreground_tab",
     "resources:tabstrip_new_tab",
-    "resources:tabstrip_new_tab_incognito",
-    "resources:tabstrip_new_tab_incognito_pressed",
     "resources:tabstrip_new_tab_pressed",
     "resources:tabstrip_tab_switcher_count_button",
     "resources:tabstrip_tab_switcher_count_button_pressed",
@@ -52,7 +51,6 @@ source_set("tabs") {
     "//ios/chrome/browser/ui/colors",
     "//ios/chrome/browser/ui/commands",
     "//ios/chrome/browser/ui/favicon/resources:default_favicon",
-    "//ios/chrome/browser/ui/favicon/resources:default_favicon_incognito",
     "//ios/chrome/browser/ui/fullscreen",
     "//ios/chrome/browser/ui/image_util",
     "//ios/chrome/browser/ui/ntp:util",

ios/chrome/browser/ui/tabs/resources/BUILD.gn

@@ -17,6 +17,7 @@ imageset("tabstrip_background_tab") {
   sources = [
     "tabstrip_background_tab.imageset/Contents.json",
     "tabstrip_background_tab.imageset/tabstrip_background_tab@2x~ipad.png",
+    "tabstrip_background_tab.imageset/tabstrip_background_tab_dark@2x~ipad.png",
   ]
 }
 
@@ -24,6 +25,7 @@ imageset("tabstrip_foreground_tab") {
   sources = [
     "tabstrip_foreground_tab.imageset/Contents.json",
     "tabstrip_foreground_tab.imageset/tabstrip_foreground_tab@2x~ipad.png",
+    "tabstrip_foreground_tab.imageset/tabstrip_foreground_tab_dark@2x~ipad.png",
   ]
 }
 
@@ -48,20 +50,6 @@ imageset("tabstrip_new_tab") {
   ]
 }
 
-imageset("tabstrip_new_tab_incognito") {
-  sources = [
-    "tabstrip_new_tab_incognito.imageset/Contents.json",
-    "tabstrip_new_tab_incognito.imageset/tabstrip_new_tab_incognito@2x~ipad.png",
-  ]
-}
-
-imageset("tabstrip_new_tab_incognito_pressed") {
-  sources = [
-    "tabstrip_new_tab_incognito_pressed.imageset/Contents.json",
-    "tabstrip_new_tab_incognito_pressed.imageset/tabstrip_new_tab_incognito_pressed@2x~ipad.png",
-  ]
-}
-
 imageset("tabstrip_new_tab_pressed") {
   sources = [
     "tabstrip_new_tab_pressed.imageset/Contents.json",
@@ -110,3 +98,9 @@ colorset("tabstrip_inactive_tab_close_button_color") {
     "tabstrip_inactive_tab_close_button_color.colorset/Contents.json",
   ]
 }
+
+colorset("tabstrip_inactive_tab_text_color") {
+  sources = [
+    "tabstrip_inactive_tab_text_color.colorset/Contents.json",
+  ]
+}

ios/chrome/browser/ui/tabs/resources/tabstrip_background_tab.imageset/Contents.json

@@ -4,8 +4,19 @@
             "idiom": "ipad",
             "scale": "2x",
             "filename": "tabstrip_background_tab@2x~ipad.png"
-        }
-    ],
+        },
+        {
+          "idiom" : "universal",
+          "filename" : "tabstrip_background_tab_dark@2x~ipad.png",
+          "appearances" : [
+            {
+              "appearance" : "luminosity",
+              "value" : "dark"
+          }
+      ],
+          "scale" : "2x"
+      }
+  ],
     "info": {
         "version": 1,
         "author": "xcode"

ios/chrome/browser/ui/tabs/resources/tabstrip_foreground_tab.imageset/Contents.json

@@ -4,7 +4,18 @@
             "idiom": "ipad",
             "scale": "2x",
             "filename": "tabstrip_foreground_tab@2x~ipad.png"
-        }
+        },
+        {
+          "idiom" : "universal",
+          "filename" : "tabstrip_foreground_tab_dark@2x~ipad.png",
+          "appearances" : [
+            {
+              "appearance" : "luminosity",
+              "value" : "dark"
+            }
+          ],
+          "scale" : "2x"
+      }
     ],
     "info": {
         "version": 1,

ios/chrome/browser/ui/tabs/resources/tabstrip_inactive_tab_text_color.colorset/Contents.json

+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "display-p3",
+        "components" : {
+          "red" : "0x5F",
+          "alpha" : "1.000",
+          "blue" : "0x67",
+          "green" : "0x63"
+        }
+      }
+    },
+    {
+      "idiom" : "universal",
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "display-p3",
+        "components" : {
+          "red" : "0x9A",
+          "alpha" : "1.000",
+          "blue" : "0xA6",
+          "green" : "0xA0"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file

ios/chrome/browser/ui/tabs/resources/tabstrip_new_tab_incognito.imageset/Contents.json

-{
-    "images": [
-        {
-            "idiom": "ipad",
-            "scale": "2x",
-            "filename": "tabstrip_new_tab_incognito@2x~ipad.png"
-        }
-    ],
-    "info": {
-        "version": 1,
-        "author": "xcode"
-    }
-}

ios/chrome/browser/ui/tabs/resources/tabstrip_new_tab_incognito_pressed.imageset/Contents.json

-{
-    "images": [
-        {
-            "idiom": "ipad",
-            "scale": "2x",
-            "filename": "tabstrip_new_tab_incognito_pressed@2x~ipad.png"
-        }
-    ],
-    "info": {
-        "version": 1,
-        "author": "xcode"
-    }
-}

ios/chrome/browser/ui/tabs/tab_strip_controller.mm

@@ -454,21 +454,15 @@ UIColor* BackgroundColor() {
     _buttonNewTab.autoresizingMask = (UIViewAutoresizingFlexibleRightMargin |
                                       UIViewAutoresizingFlexibleBottomMargin);
     _buttonNewTab.imageView.contentMode = UIViewContentModeCenter;
-    UIImage* buttonNewTabImage = nil;
-    UIImage* buttonNewTabPressedImage = nil;
 
-    if (_style == INCOGNITO) {
-      buttonNewTabImage = [UIImage imageNamed:@"tabstrip_new_tab_incognito"];
-      buttonNewTabPressedImage =
-          [UIImage imageNamed:@"tabstrip_new_tab_incognito_pressed"];
-    } else {
-      buttonNewTabImage = [UIImage imageNamed:@"tabstrip_new_tab"];
-      buttonNewTabPressedImage =
-          [UIImage imageNamed:@"tabstrip_new_tab_pressed"];
-    }
+    UIImage* buttonNewTabImage = [UIImage imageNamed:@"tabstrip_new_tab"];
     [_buttonNewTab setImage:buttonNewTabImage forState:UIControlStateNormal];
+
+    UIImage* buttonNewTabPressedImage =
+        [UIImage imageNamed:@"tabstrip_new_tab_pressed"];
     [_buttonNewTab setImage:buttonNewTabPressedImage
                    forState:UIControlStateHighlighted];
+
     UIEdgeInsets imageInsets = UIEdgeInsetsMake(
         kNewTabButtonTopImageInset, kNewTabButtonHorizontalImageInset,
         kNewTabButtonBottomImageInset, kNewTabButtonHorizontalImageInset);

ios/chrome/browser/ui/tabs/tab_view.mm

@@ -17,6 +17,7 @@
 #import "ios/chrome/browser/ui/image_util/image_util.h"
 #include "ios/chrome/browser/ui/util/rtl_geometry.h"
 #import "ios/chrome/browser/ui/util/uikit_ui_util.h"
+#import "ios/chrome/common/colors/semantic_color_names.h"
 #import "ios/chrome/common/highlight_button.h"
 #import "ios/chrome/common/ui_util/constraints_ui_util.h"
 #include "ios/chrome/grit/ios_strings.h"
@@ -54,6 +55,11 @@ const CGFloat kTitleRightMargin = 0.0;
 const CGFloat kCloseButtonSize = 24.0;
 const CGFloat kFaviconSize = 16.0;
 
+// Returns a default favicon with |UIImageRenderingModeAlwaysTemplate|.
+UIImage* DefaultFaviconImage() {
+  return [[UIImage imageNamed:@"default_favicon"]
+      imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+}
 }
 
 @interface TabView ()<DropAndNavigateDelegate> {
@@ -89,9 +95,6 @@ const CGFloat kFaviconSize = 16.0;
 // Creates the close button, favicon button, and title.
 - (void)createButtonsAndLabel;
 
-// Return the default favicon image based on the current incognito style.
-- (UIImage*)defaultFaviconImage;
-
 // Returns the rect in which to draw the favicon.
 - (CGRect)faviconRectForBounds:(CGRect)bounds;
 
@@ -170,15 +173,27 @@ const CGFloat kFaviconSize = 16.0;
 
 - (void)setFavicon:(UIImage*)favicon {
   if (!favicon)
-    favicon = [self defaultFaviconImage];
+    favicon = DefaultFaviconImage();
   [_faviconView setImage:favicon];
 }
 
 - (void)setIncognitoStyle:(BOOL)incognitoStyle {
+  if (_incognitoStyle == incognitoStyle) {
+    return;
+  }
   _incognitoStyle = incognitoStyle;
-  _titleLabel.textColor =
-      incognitoStyle ? [UIColor whiteColor] : [UIColor blackColor];
-  [_faviconView setImage:[self defaultFaviconImage]];
+
+#if defined(__IPHONE_13_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0)
+  if (@available(iOS 13, *)) {
+    // When iOS 12 is dropped, only the next line is needed for styling.
+    // Every other check for |incognitoStyle| can be removed, as well as the
+    // incognito specific assets.
+    self.overrideUserInterfaceStyle = _incognitoStyle
+                                          ? UIUserInterfaceStyleDark
+                                          : UIUserInterfaceStyleUnspecified;
+    return;
+  }
+#endif
   [self updateStyleForSelected:self.selected];
 }
 
@@ -230,6 +245,24 @@ const CGFloat kFaviconSize = 16.0;
   return CGRectContainsPoint(CGRectInset([self bounds], inset, 0), point);
 }
 
+- (void)traitCollectionDidChange:(UITraitCollection*)previousTraitCollection {
+  [super traitCollectionDidChange:previousTraitCollection];
+
+#if defined(__IPHONE_13_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0)
+  if (@available(iOS 13, *)) {
+    // As of iOS 13 Beta 4, resizable images are flaky for dark mode.
+    // This triggers the styling again, where the image is resolved instead of
+    // relying in the system's magic. Radar filled:
+    // b/137942721.hasDifferentColorAppearanceComparedToTraitCollection
+    if ([self.traitCollection
+            hasDifferentColorAppearanceComparedToTraitCollection:
+                previousTraitCollection]) {
+      [self updateStyleForSelected:self.selected];
+    }
+  }
+#endif
+}
+
 #pragma mark - Private
 
 - (void)createCommonViews {
@@ -290,7 +323,7 @@ const CGFloat kFaviconSize = 16.0;
   _faviconView = [[UIImageView alloc] initWithFrame:faviconFrame];
   [_faviconView setTranslatesAutoresizingMaskIntoConstraints:NO];
   [_faviconView setContentMode:UIViewContentModeScaleAspectFit];
-  [_faviconView setImage:[self defaultFaviconImage]];
+  [_faviconView setImage:DefaultFaviconImage()];
   [_faviconView setAccessibilityIdentifier:@"Favicon"];
   [self addSubview:_faviconView];
 
@@ -341,29 +374,44 @@ const CGFloat kFaviconSize = 16.0;
 // Updates this tab's style based on the value of |selected| and the current
 // incognito style.
 - (void)updateStyleForSelected:(BOOL)selected {
+  // Style the background image first.
   NSString* state = (selected ? @"foreground" : @"background");
-  NSString* incognito = _incognitoStyle ? @"incognito_" : @"";
+  NSString* incognito = self.incognitoStyle ? @"incognito_" : @"";
   NSString* imageName =
       [NSString stringWithFormat:@"tabstrip_%@%@_tab", incognito, state];
   CGFloat leftInset = kTabBackgroundLeftCapInset;
+  // 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];
   UIImage* backgroundImage =
-      StretchableImageFromUIImage([UIImage imageNamed:imageName], leftInset, 0);
-  [_backgroundImageView setImage:backgroundImage];
+      StretchableImageFromUIImage(resolvedImage, leftInset, 0);
+  _backgroundImageView.image = backgroundImage;
 
-  NSString* colorName;
+  // Style the close button tint color.
+  NSString* closeButtonColorName;
   if (selected) {
-    colorName = _incognitoStyle
-                    ? @"tabstrip_active_tab_incognito_close_button_color"
-                    : @"tabstrip_active_tab_close_button_color";
+    closeButtonColorName =
+        self.incognitoStyle
+            ? @"tabstrip_active_tab_incognito_close_button_color"
+            : @"tabstrip_active_tab_close_button_color";
   } else {
-    colorName = @"tabstrip_inactive_tab_close_button_color";
+    closeButtonColorName = @"tabstrip_inactive_tab_close_button_color";
   }
-  _closeButton.tintColor = [UIColor colorNamed:colorName];
-}
+  _closeButton.tintColor = [UIColor colorNamed:closeButtonColorName];
 
-- (UIImage*)defaultFaviconImage {
-  return self.incognitoStyle ? [UIImage imageNamed:@"default_favicon_incognito"]
-                             : [UIImage imageNamed:@"default_favicon"];
+  // Style the favicon tint color and the title label.
+  NSString* faviconColorName;
+  if (selected) {
+    faviconColorName = kTextPrimaryColor;
+  } else {
+    faviconColorName = @"tabstrip_inactive_tab_text_color";
+  }
+  _faviconView.tintColor = self.incognitoStyle && selected
+                               ? [UIColor whiteColor]
+                               : [UIColor colorNamed:faviconColorName];
+  self.titleLabel.textColor = _faviconView.tintColor;
 }
 
 #pragma mark - DropAndNavigateDelegate