[ios] Converts BookmarkEmptyBackground to use a UIStackView.

Adds a new image and view spacing when the UIRefresh experiment is
enabled. Adds Dynamic Type support as well.

Legacy: https://drive.google.com/file/d/1UIIDcwMcpcG-N7-AKox94UtQErhiy1ip/view
Refresh: https://drive.google.com/file/d/1hrP-Cgrm1jdaK0K6BM-P-ytMMxBplwlX/view

BUG=805166

Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet
Change-Id: I9b4ba4aac10b0b91ff38b127bf978db4ee93639d
Reviewed-on: https://chromium-review.googlesource.com/1099415Reviewed-by: Sergio Collazos <sczs@chromium.org>
Commit-Queue: Rohit Rao <rohitrao@chromium.org>
Cr-Commit-Position: refs/heads/master@{#567521}

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

@@ -55,6 +55,7 @@ source_set("bookmarks") {
     "resources:bookmark_blue_check",
     "resources:bookmark_blue_folder",
     "resources:bookmark_blue_new_folder",
+    "resources:bookmark_empty_star",
     "resources:bookmark_gray_back",
     "resources:bookmark_gray_check",
     "resources:bookmark_gray_close",

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

@@ -4,6 +4,8 @@
 
 #include "ios/chrome/browser/ui/bookmarks/bookmark_empty_background.h"
 
+#import "ios/chrome/browser/experimental_flags.h"
+#import "ios/chrome/browser/ui/bookmarks/bookmark_ui_constants.h"
 #import "ios/third_party/material_components_ios/src/components/Typography/src/MaterialTypography.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
@@ -11,93 +13,96 @@
 #endif
 
 namespace {
-NSString* const kBookmarkGrayStar = @"bookmark_gray_star_large";
-const CGFloat kEmptyBookmarkTextSize = 16.0;
-// Offset of the image view on top of the text.
-const CGFloat kImageViewOffsetFromText = 5.0;
-// Height of the bottom toolbar outside of this background.
-const CGFloat kToolbarHeight = 48.0;
+// The spacing between the image and text label.
+const CGFloat kStackViewSpacing = 24.0;
+const CGFloat kLegacyStackViewSpacing = 5.0;
+
+// The margin between the stack view and the edges of its superview.
+const CGFloat kStackViewMargin = 24.0;
+
+// The font size to use when UIRefresh is disabled.
+const CGFloat kLegacyFontSize = 16.0;
+
 }  // namespace
 
 @interface BookmarkEmptyBackground ()
 
-// Star image view shown on top of the label.
-@property(nonatomic, retain) UIImageView* emptyBookmarksImageView;
-// Label centered on the view showing the empty bookmarks text.
-@property(nonatomic, retain) UILabel* emptyBookmarksLabel;
+// Stack view containing UI that should be centered in the page.
+@property(nonatomic, strong) UIStackView* stackView;
+
+// Text label showing the description text.
+@property(nonatomic, retain) UILabel* textLabel;
 
 @end
 
 @implementation BookmarkEmptyBackground
-
-@synthesize emptyBookmarksImageView = _emptyBookmarksImageView;
-@synthesize emptyBookmarksLabel = _emptyBookmarksLabel;
+@synthesize stackView = _stackView;
+@synthesize textLabel = _textLabel;
 
 - (instancetype)initWithFrame:(CGRect)frame {
   self = [super initWithFrame:frame];
   if (self) {
-    _emptyBookmarksImageView = [self newBookmarkImageView];
-    [self addSubview:_emptyBookmarksImageView];
-    _emptyBookmarksLabel = [self newEmptyBookmarkLabel];
-    _emptyBookmarksLabel.accessibilityIdentifier = @"empty_background_label";
-    [self addSubview:_emptyBookmarksLabel];
+    BOOL useRefreshUI = experimental_flags::IsBookmarksUIRebootEnabled();
+
+    // The "star" image.
+    NSString* imageName =
+        useRefreshUI ? @"bookmark_empty_star" : @"bookmark_gray_star_large";
+    UIImageView* imageView =
+        [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
+
+    // The explanatory text label.
+    self.textLabel = [[UILabel alloc] init];
+    self.textLabel.backgroundColor = [UIColor clearColor];
+    self.textLabel.accessibilityIdentifier =
+        kBookmarkEmptyStateExplanatoryLabelIdentifier;
+    self.textLabel.textAlignment = NSTextAlignmentCenter;
+    self.textLabel.numberOfLines = 0;
+    if (useRefreshUI) {
+      self.textLabel.font =
+          [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+      self.textLabel.adjustsFontForContentSizeCategory = YES;
+      self.textLabel.textColor = [UIColor colorWithWhite:0 alpha:100.0 / 255];
+    } else {
+      self.textLabel.font =
+          [[MDCTypography fontLoader] mediumFontOfSize:kLegacyFontSize];
+      self.textLabel.textColor = [UIColor colorWithWhite:0 alpha:110.0 / 255];
+    }
+
+    // Vertical stack view that centers its contents.
+    _stackView = [[UIStackView alloc]
+        initWithArrangedSubviews:@[ imageView, self.textLabel ]];
+    _stackView.translatesAutoresizingMaskIntoConstraints = NO;
+    _stackView.axis = UILayoutConstraintAxisVertical;
+    _stackView.alignment = UIStackViewAlignmentCenter;
+    _stackView.distribution = UIStackViewDistributionEqualSpacing;
+    _stackView.spacing =
+        useRefreshUI ? kStackViewSpacing : kLegacyStackViewSpacing;
+    [self addSubview:_stackView];
+
+    // Center the stack view, with a minimum margin around the leading and
+    // trailing edges.
+    [NSLayoutConstraint activateConstraints:@[
+      [self.centerXAnchor constraintEqualToAnchor:_stackView.centerXAnchor],
+      [self.centerYAnchor constraintEqualToAnchor:_stackView.centerYAnchor],
+      [self.leadingAnchor
+          constraintLessThanOrEqualToAnchor:_stackView.leadingAnchor
+                                   constant:-kStackViewMargin],
+      [self.trailingAnchor
+          constraintGreaterThanOrEqualToAnchor:_stackView.trailingAnchor
+                                      constant:kStackViewMargin],
+
+    ]];
   }
   return self;
 }
 
-- (void)layoutSubviews {
-  [super layoutSubviews];
-  _emptyBookmarksLabel.frame = [self emptyBookmarkLabelFrame];
-  _emptyBookmarksImageView.frame = [self bookmarkImageViewFrame];
-}
-
 - (NSString*)text {
-  return self.emptyBookmarksLabel.text;
+  return self.textLabel.text;
 }
 
 - (void)setText:(NSString*)text {
-  self.emptyBookmarksLabel.text = text;
+  self.textLabel.text = text;
   [self setNeedsLayout];
 }
 
-#pragma mark - Private
-
-- (UILabel*)newEmptyBookmarkLabel {
-  UILabel* label = [[UILabel alloc] initWithFrame:CGRectZero];
-  label.backgroundColor = [UIColor clearColor];
-  label.font =
-      [[MDCTypography fontLoader] mediumFontOfSize:kEmptyBookmarkTextSize];
-  label.textColor = [UIColor colorWithWhite:0 alpha:110.0 / 255];
-  label.textAlignment = NSTextAlignmentCenter;
-  return label;
-}
-
-- (UIImageView*)newBookmarkImageView {
-  UIImageView* imageView = [[UIImageView alloc] initWithFrame:CGRectZero];
-  imageView.image = [UIImage imageNamed:kBookmarkGrayStar];
-  return imageView;
-}
-
-// Returns vertically centered label frame.
-- (CGRect)emptyBookmarkLabelFrame {
-  const CGSize labelSizeThatFit =
-      [self.emptyBookmarksLabel sizeThatFits:CGSizeZero];
-  return CGRectMake(0,
-                    (CGRectGetHeight(self.bounds) + kToolbarHeight +
-                     labelSizeThatFit.height) /
-                        2.0,
-                    CGRectGetWidth(self.bounds), labelSizeThatFit.height);
-}
-
-// Returns imageView frame above the text with kImageViewOffsetFromText from
-// text.
-- (CGRect)bookmarkImageViewFrame {
-  const CGRect labelRect = [self emptyBookmarkLabelFrame];
-  const CGSize imageViewSize = self.emptyBookmarksImageView.image.size;
-  return CGRectMake((CGRectGetWidth(self.bounds) - imageViewSize.width) / 2.0,
-                    CGRectGetMinY(labelRect) - kImageViewOffsetFromText -
-                        imageViewSize.height,
-                    imageViewSize.width, imageViewSize.height);
-}
-
 @end

ios/chrome/browser/ui/bookmarks/bookmark_ui_constants.h

@@ -59,4 +59,8 @@ extern const CGFloat kBookmarkCellHorizontalAccessoryViewSpacing;
 // Accessibility identifier of the Create NewFolder Button.
 extern NSString* const kBookmarkCreateNewFolderCellIdentifier;
 
+// Empty state accessibility constants:
+// Accessibility identifier for the explanatory label in the empty state.
+extern NSString* const kBookmarkEmptyStateExplanatoryLabelIdentifier;
+
 #endif  // IOS_CHROME_BROWSER_UI_BOOKMARKS_BOOKMARK_UI_CONSTANTS_H_

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

@@ -47,3 +47,6 @@ const CGFloat kBookmarkCellHorizontalAccessoryViewSpacing = 11.0f;
 
 NSString* const kBookmarkCreateNewFolderCellIdentifier =
     @"kBookmarkCreateNewFolderCellIdentifier";
+
+NSString* const kBookmarkEmptyStateExplanatoryLabelIdentifier =
+    @"kBookmarkEmptyStateExplanatoryLabelIdentifier";

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

@@ -3678,7 +3678,8 @@ id<GREYMatcher> TappableBookmarkNodeWithLabel(NSString* label) {
 
 - (void)verifyEmptyBackgroundAppears {
   [[EarlGrey
-      selectElementWithMatcher:grey_accessibilityID(@"empty_background_label")]
+      selectElementWithMatcher:
+          grey_accessibilityID(kBookmarkEmptyStateExplanatoryLabelIdentifier)]
       assertWithMatcher:grey_sufficientlyVisible()];
 }
 

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

@@ -85,6 +85,15 @@ imageset("bookmark_blue_new_folder") {
   ]
 }
 
+imageset("bookmark_empty_star") {
+  sources = [
+    "bookmark_empty_star.imageset/Contents.json",
+    "bookmark_empty_star.imageset/bookmark_empty_star.png",
+    "bookmark_empty_star.imageset/bookmark_empty_star@2x.png",
+    "bookmark_empty_star.imageset/bookmark_empty_star@3x.png",
+  ]
+}
+
 imageset("bookmark_gray_back") {
   sources = [
     "bookmark_gray_back.imageset/Contents.json",

ios/chrome/browser/ui/bookmarks/resources/bookmark_empty_star.imageset/Contents.json

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