Chrome Empties: Add new look to Bookmarks empty folders

The new Bookmarks empty state, when inside empty folders, will be implemented by TableViewIllustrated.

Bookmarks will take care of creating and keeping a reference to its own TableViewEmptyView instead of using ChromeTableViewController's helper functions because the view's insets will need to be tweaked by the view on the root level when the Sign in promo is visible. This particularity will be visible in a future CL.

(Googlers only links)
Screenshot: https://drive.google.com/file/d/1ji5vMJpt_qEd7VWJMpayuw59zLBokrDx/view?usp=sharing
Design Doc for Chrome Empties: https://docs.google.com/document/d/1JM2sKT4oghkol51U7_3xv9sfaB26C89CCGa2uwYBgsI/edit?usp=sharing
Mocks of the new Chrome Empties look: https://docs.google.com/presentation/d/1x1lSTOSQ1zkJu87SoigiUhX2f9oHACglR22yYg-lSHo/edit?usp=sharing

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

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

@@ -84,6 +84,7 @@ source_set("bookmarks") {
     "//ios/chrome/browser/signin",
     "//ios/chrome/browser/sync",
     "//ios/chrome/browser/tabs",
+    "//ios/chrome/browser/ui:feature_flags",
     "//ios/chrome/browser/ui/alert_coordinator",
     "//ios/chrome/browser/ui/authentication",
     "//ios/chrome/browser/ui/authentication/cells",
@@ -100,6 +101,7 @@ source_set("bookmarks") {
     "//ios/chrome/browser/ui/table_view:feature_flags",
     "//ios/chrome/browser/ui/table_view:presentation",
     "//ios/chrome/browser/ui/table_view:styler",
+    "//ios/chrome/browser/ui/table_view:views",
     "//ios/chrome/browser/ui/util",
     "//ios/chrome/browser/ui/util:multiwindow_util",
     "//ios/chrome/browser/undo",
@@ -203,6 +205,7 @@ source_set("eg2_tests") {
     "//ios/chrome/app/strings",
     "//ios/chrome/browser:utils",
     "//ios/chrome/browser/policy:eg_test_support+eg2",
+    "//ios/chrome/browser/ui:feature_flags",
     "//ios/chrome/browser/ui/authentication:eg_test_support+eg2",
     "//ios/chrome/browser/ui/authentication/signin:constants",
     "//ios/chrome/browser/ui/popup_menu:constants",
@@ -274,7 +277,9 @@ source_set("eg_test_support+eg2") {
     "//base/test:test_support",
     "//components/strings",
     "//ios/chrome/app/strings",
+    "//ios/chrome/browser/ui:feature_flags",
     "//ios/chrome/browser/ui/popup_menu:constants",
+    "//ios/chrome/browser/ui/table_view:constants",
     "//ios/chrome/test:eg_test_support+eg2",
     "//ios/chrome/test/earl_grey:eg_test_support+eg2",
     "//ios/testing/earl_grey:eg_test_support+eg2",

ios/chrome/browser/ui/bookmarks/bookmark_earl_grey_ui.mm

@@ -10,6 +10,8 @@
 #include "components/strings/grit/components_strings.h"
 #import "ios/chrome/browser/ui/bookmarks/bookmark_ui_constants.h"
 #import "ios/chrome/browser/ui/popup_menu/popup_menu_constants.h"
+#import "ios/chrome/browser/ui/table_view/table_view_constants.h"
+#import "ios/chrome/browser/ui/ui_feature_flags.h"
 #include "ios/chrome/grit/ios_strings.h"
 #import "ios/chrome/test/earl_grey/chrome_earl_grey.h"
 #import "ios/chrome/test/earl_grey/chrome_earl_grey_ui.h"
@@ -359,9 +361,11 @@ id<GREYMatcher> SearchIconButton() {
 }
 
 - (void)verifyEmptyBackgroundAppears {
-  [[EarlGrey
-      selectElementWithMatcher:
-          grey_accessibilityID(kBookmarkEmptyStateExplanatoryLabelIdentifier)]
+  id<GREYMatcher> emptyBackground =
+      grey_accessibilityID(base::FeatureList::IsEnabled(kIllustratedEmptyStates)
+                               ? kTableViewIllustratedEmptyViewID
+                               : kBookmarkEmptyStateExplanatoryLabelIdentifier);
+  [[EarlGrey selectElementWithMatcher:emptyBackground]
       assertWithMatcher:grey_sufficientlyVisible()];
 }
 

ios/chrome/browser/ui/bookmarks/bookmark_home_view_controller.mm

@@ -54,8 +54,10 @@
 #import "ios/chrome/browser/ui/material_components/utils.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_url_item.h"
 #import "ios/chrome/browser/ui/table_view/chrome_table_view_styler.h"
+#import "ios/chrome/browser/ui/table_view/table_view_illustrated_empty_view.h"
 #import "ios/chrome/browser/ui/table_view/table_view_model.h"
 #import "ios/chrome/browser/ui/table_view/table_view_navigation_controller_constants.h"
+#import "ios/chrome/browser/ui/ui_feature_flags.h"
 #import "ios/chrome/browser/ui/util/multi_window_support.h"
 #import "ios/chrome/browser/ui/util/rtl_geometry.h"
 #import "ios/chrome/browser/ui/util/ui_util.h"
@@ -199,6 +201,9 @@ std::vector<GURL> GetUrlsToOpen(const std::vector<const BookmarkNode*>& nodes) {
 // node.
 @property(nonatomic, strong) BookmarkEmptyBackground* emptyTableBackgroundView;
 
+// Illustrated View displayed when the current root node is empty.
+@property(nonatomic, strong) TableViewIllustratedEmptyView* emptyViewBackground;
+
 // The loading spinner background which appears when loading the BookmarkModel
 // or syncing.
 @property(nonatomic, strong) BookmarkHomeWaitingView* spinnerView;
@@ -1409,21 +1414,40 @@ std::vector<GURL> GetUrlsToOpen(const std::vector<const BookmarkNode*>& nodes) {
 
 // Shows empty bookmarks background view.
 - (void)showEmptyBackground {
-  if (!self.emptyTableBackgroundView) {
-    // Set up the background view shown when the table is empty.
-    self.emptyTableBackgroundView = [[BookmarkEmptyBackground alloc]
-        initWithFrame:self.sharedState.tableView.bounds];
-    self.emptyTableBackgroundView.autoresizingMask =
-        UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
-    self.emptyTableBackgroundView.text =
-        l10n_util::GetNSString(IDS_IOS_BOOKMARK_NO_BOOKMARKS_LABEL);
-    self.emptyTableBackgroundView.frame = self.sharedState.tableView.bounds;
+  if (base::FeatureList::IsEnabled(kIllustratedEmptyStates)) {
+    if (!self.emptyViewBackground) {
+      self.emptyViewBackground = [[TableViewIllustratedEmptyView alloc]
+          initWithFrame:self.sharedState.tableView.bounds
+                  image:[UIImage imageNamed:@"bookmark_empty"]
+                  title:l10n_util::GetNSString(IDS_IOS_BOOKMARK_EMPTY_TITLE)
+               subtitle:l10n_util::GetNSString(IDS_IOS_BOOKMARK_EMPTY_MESSAGE)];
+    }
+    self.sharedState.tableView.backgroundView = self.emptyViewBackground;
+    self.navigationItem.searchController = nil;
+  } else {
+    if (!self.emptyTableBackgroundView) {
+      // Set up the background view shown when the table is empty.
+      self.emptyTableBackgroundView = [[BookmarkEmptyBackground alloc]
+          initWithFrame:self.sharedState.tableView.bounds];
+      self.emptyTableBackgroundView.autoresizingMask =
+          UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
+      self.emptyTableBackgroundView.text =
+          l10n_util::GetNSString(IDS_IOS_BOOKMARK_NO_BOOKMARKS_LABEL);
+      self.emptyTableBackgroundView.frame = self.sharedState.tableView.bounds;
+    }
+    self.sharedState.tableView.backgroundView = self.emptyTableBackgroundView;
   }
-  self.sharedState.tableView.backgroundView = self.emptyTableBackgroundView;
 }
 
 - (void)hideEmptyBackground {
-  self.sharedState.tableView.backgroundView = nil;
+  if (base::FeatureList::IsEnabled(kIllustratedEmptyStates)) {
+    if (self.sharedState.tableView.backgroundView == self.emptyViewBackground) {
+      self.sharedState.tableView.backgroundView = nil;
+    }
+    self.navigationItem.searchController = self.searchController;
+  } else {
+    self.sharedState.tableView.backgroundView = nil;
+  }
 }
 
 #pragma mark - ContextBarDelegate implementation

ios/chrome/browser/ui/bookmarks/bookmarks_egtest.mm

@@ -12,6 +12,7 @@
 #import "ios/chrome/browser/ui/bookmarks/bookmark_ui_constants.h"
 #import "ios/chrome/browser/ui/popup_menu/popup_menu_constants.h"
 #import "ios/chrome/browser/ui/table_view/feature_flags.h"
+#import "ios/chrome/browser/ui/ui_feature_flags.h"
 #include "ios/chrome/grit/ios_strings.h"
 #import "ios/chrome/test/earl_grey/chrome_earl_grey.h"
 #import "ios/chrome/test/earl_grey/chrome_earl_grey_ui.h"
@@ -839,6 +840,28 @@ using chrome_test_util::TappableBookmarkNodeWithLabel;
       assertWithMatcher:grey_nil()];
 }
 
+- (void)testFolderEmptyState {
+  [BookmarkEarlGrey setupStandardBookmarks];
+  [BookmarkEarlGreyUI openBookmarks];
+  [BookmarkEarlGreyUI openMobileBookmarks];
+
+  // Enter Folder 1.1 (which is empty)
+  [[EarlGrey selectElementWithMatcher:grey_accessibilityID(@"Folder 1.1")]
+      performAction:grey_tap()];
+
+  // Empty TableView background should be visible
+  [BookmarkEarlGreyUI verifyEmptyBackgroundAppears];
+  id<GREYInteraction> searchBar =
+      [EarlGrey selectElementWithMatcher:grey_accessibilityTrait(
+                                             UIAccessibilityTraitSearchField)];
+  if (base::FeatureList::IsEnabled(kIllustratedEmptyStates)) {
+    // With the illustrated background, the search bar should not be visible
+    [searchBar assertWithMatcher:grey_nil()];
+  } else {
+    [searchBar assertWithMatcher:grey_notNil()];
+  }
+}
+
 // TODO(crbug.com/695749): Add egtests for:
 // 1. Spinner background.
 // 2. Reorder bookmarks. (make sure it won't clear the row selection on table)