Chrome Empties: Implement the new Empty Tab Switcher with large illus…

…tration.

Regular and Incognito Tab Switcher now have a new visual style, with a large illustration, a title and a subtitle.
This new look is guarded by the illustrated-empty-states feature flag.

(Googlers-only links)
Design Doc: https://docs.google.com/document/d/1JM2sKT4oghkol51U7_3xv9sfaB26C89CCGa2uwYBgsI/edit?usp=sharing
Regular Tab Switcher screenshot: https://drive.google.com/file/d/15J7BPllXPxgiNiXDVLRHne8c9HxBf1VP/view?usp=sharing
Incognito Tab Switcher screenshot: https://drive.google.com/file/d/1eGEjaAwirXv58AJuMWuoX0x5sLiyGow8/view?usp=sharing

Bug: 1098328
Change-Id: I7524fbc4d225f7f8cafc17bb0f20e0f34ebe83b5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2255378
Commit-Queue: Maxime Charland <mcharland@google.com>
Reviewed-by: edchin <edchin@chromium.org>
Reviewed-by: Sebastien Lalancette <seblalancette@chromium.org>
Reviewed-by: Tommy Martino <tmartino@chromium.org>
Cr-Commit-Position: refs/heads/master@{#783557}

ios/chrome/browser/ui/tab_grid/tab_grid_empty_state_view.mm

@@ -5,6 +5,7 @@
 #import "ios/chrome/browser/ui/tab_grid/tab_grid_empty_state_view.h"
 
 #import "ios/chrome/browser/ui/tab_grid/tab_grid_constants.h"
+#include "ios/chrome/browser/ui/ui_feature_flags.h"
 #import "ios/chrome/browser/ui/util/uikit_ui_util.h"
 #import "ios/chrome/common/ui/util/constraints_ui_util.h"
 #include "ios/chrome/grit/ios_strings.h"
@@ -15,13 +16,16 @@
 #endif
 
 namespace {
-const CGFloat kVerticalMargin = 16;
+const CGFloat kVerticalMargin = 16.0;
+const CGFloat kImageHeight = 150.0;
+const CGFloat kImageWidth = 150.0;
 }  // namespace
 
 @interface TabGridEmptyStateView ()
 @property(nonatomic, strong) UIView* container;
 @property(nonatomic, strong) UIScrollView* scrollView;
 @property(nonatomic, strong) NSLayoutConstraint* scrollViewHeight;
+@property(nonatomic, copy, readonly) UIImage* image;
 @property(nonatomic, copy, readonly) NSString* title;
 @property(nonatomic, copy, readonly) NSString* body;
 @end
@@ -32,18 +36,34 @@ @implementation TabGridEmptyStateView
 
 - (instancetype)initWithPage:(TabGridPage)page {
   if (self = [super initWithFrame:CGRectZero]) {
+    BOOL illustratedEmptyState =
+        base::FeatureList::IsEnabled(kIllustratedEmptyStates);
     switch (page) {
       case TabGridPageIncognitoTabs:
+        if (illustratedEmptyState) {
+          _image = [UIImage imageNamed:@"tab_grid_incognito_tabs_empty"];
+        }
         _title = l10n_util::GetNSString(
-            IDS_IOS_TAB_GRID_INCOGNITO_TABS_EMPTY_STATE_TITLE);
+            illustratedEmptyState
+                ? IDS_IOS_TAB_GRID_INCOGNITO_TABS_EMPTY_TITLE
+                : IDS_IOS_TAB_GRID_INCOGNITO_TABS_EMPTY_STATE_TITLE);
         _body = l10n_util::GetNSString(
-            IDS_IOS_TAB_GRID_INCOGNITO_TABS_EMPTY_STATE_BODY);
+            illustratedEmptyState
+                ? IDS_IOS_TAB_GRID_INCOGNITO_TABS_EMPTY_MESSAGE
+                : IDS_IOS_TAB_GRID_INCOGNITO_TABS_EMPTY_STATE_BODY);
         break;
       case TabGridPageRegularTabs:
+        if (illustratedEmptyState) {
+          _image = [UIImage imageNamed:@"tab_grid_regular_tabs_empty"];
+        }
         _title = l10n_util::GetNSString(
-            IDS_IOS_TAB_GRID_REGULAR_TABS_EMPTY_STATE_TITLE);
+            illustratedEmptyState
+                ? IDS_IOS_TAB_GRID_REGULAR_TABS_EMPTY_TITLE
+                : IDS_IOS_TAB_GRID_REGULAR_TABS_EMPTY_STATE_TITLE);
         _body = l10n_util::GetNSString(
-            IDS_IOS_TAB_GRID_REGULAR_TABS_EMPTY_STATE_BODY);
+            illustratedEmptyState
+                ? IDS_IOS_TAB_GRID_REGULAR_TABS_EMPTY_MESSAGE
+                : IDS_IOS_TAB_GRID_REGULAR_TABS_EMPTY_STATE_BODY);
         break;
       case TabGridPageRemoteTabs:
         // No-op. Empty page.
@@ -104,6 +124,14 @@ - (void)setupViews {
   bottomLabel.numberOfLines = 0;
   bottomLabel.textAlignment = NSTextAlignmentCenter;
 
+  UIImageView* imageView = nil;
+  if (base::FeatureList::IsEnabled(kIllustratedEmptyStates)) {
+    imageView = [[UIImageView alloc] initWithImage:self.image];
+    imageView.translatesAutoresizingMaskIntoConstraints = NO;
+
+    [container addSubview:imageView];
+  }
+
   [container addSubview:topLabel];
   [container addSubview:bottomLabel];
   [scrollView addSubview:container];
@@ -117,8 +145,21 @@ - (void)setupViews {
   scrollViewHeightConstraint.active = YES;
   self.scrollViewHeight = scrollViewHeightConstraint;
 
+  if (base::FeatureList::IsEnabled(kIllustratedEmptyStates)) {
+    [NSLayoutConstraint activateConstraints:@[
+      [imageView.topAnchor constraintEqualToAnchor:container.topAnchor],
+      [imageView.widthAnchor constraintEqualToConstant:kImageWidth],
+      [imageView.heightAnchor constraintEqualToConstant:kImageHeight],
+      [imageView.centerXAnchor constraintEqualToAnchor:container.centerXAnchor],
+    ]];
+  }
+
+  auto anchorForTopLabel = base::FeatureList::IsEnabled(kIllustratedEmptyStates)
+                               ? imageView.bottomAnchor
+                               : container.topAnchor;
+
   [NSLayoutConstraint activateConstraints:@[
-    [topLabel.topAnchor constraintEqualToAnchor:container.topAnchor
+    [topLabel.topAnchor constraintEqualToAnchor:anchorForTopLabel
                                        constant:kVerticalMargin],
     [topLabel.leadingAnchor constraintEqualToAnchor:container.leadingAnchor],
     [topLabel.trailingAnchor constraintEqualToAnchor:container.trailingAnchor],