[ios] Update tab grid empty state styling

This CL updates the tab grid styling according to the instructions in
the bug.

Screenshot:
https://drive.google.com/open?id=1jgVr-Ma3T7A6VW86TJvIr82xgWwsH130
https://drive.google.com/open?id=1U_gBJM4AmO4YzI-uml2AuKtVHlfsuXSz

Bug: 849661
Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet
Change-Id: I349909ce37e31eaca208b9836f86376a49cd2327
Reviewed-on: https://chromium-review.googlesource.com/1112068Reviewed-by: Sergio Collazos <sczs@chromium.org>
Reviewed-by: edchin <edchin@chromium.org>
Commit-Queue: edchin <edchin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569862}

ios/chrome/browser/ui/tab_grid/grid/grid_view_controller.mm

@@ -16,6 +16,7 @@
 #import "ios/chrome/browser/ui/tab_grid/grid/grid_layout.h"
 #import "ios/chrome/browser/ui/tab_grid/transitions/grid_transition_layout.h"
 #import "ios/chrome/browser/ui/uikit_ui_util.h"
+#import "ios/chrome/browser/ui/util/constraints_ui_util.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
@@ -146,11 +147,17 @@ NSIndexPath* CreateIndexPath(NSInteger index) {
   _emptyStateView = emptyStateView;
   emptyStateView.translatesAutoresizingMaskIntoConstraints = NO;
   [self.collectionView.backgroundView addSubview:emptyStateView];
+  id<LayoutGuideProvider> safeAreaGuide =
+      SafeAreaLayoutGuideForView(self.collectionView.backgroundView);
   [NSLayoutConstraint activateConstraints:@[
     [self.collectionView.backgroundView.centerXAnchor
         constraintEqualToAnchor:emptyStateView.centerXAnchor],
     [self.collectionView.backgroundView.centerYAnchor
-        constraintEqualToAnchor:emptyStateView.centerYAnchor]
+        constraintEqualToAnchor:emptyStateView.centerYAnchor],
+    [safeAreaGuide.leadingAnchor
+        constraintLessThanOrEqualToAnchor:emptyStateView.leadingAnchor],
+    [safeAreaGuide.trailingAnchor
+        constraintGreaterThanOrEqualToAnchor:emptyStateView.trailingAnchor],
   ]];
 }
 

ios/chrome/browser/ui/tab_grid/tab_grid_constants.h

@@ -39,7 +39,8 @@ extern const CGFloat kTabGridEmptyStateVerticalInset;
 extern const CGFloat kTabGridEmptyStateHorizontalInset;
 
 // The insets from the edges for the floating button.
-extern const CGFloat kTabGridFloatingButtonVerticalInset;
+extern const CGFloat kTabGridFloatingButtonVerticalInsetSmall;
+extern const CGFloat kTabGridFloatingButtonVerticalInsetLarge;
 extern const CGFloat kTabGridFloatingButtonHorizontalInset;
 
 // Intrinsic heights of the tab grid toolbars.

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

@@ -43,8 +43,9 @@ extern const CGFloat kTabGridEmptyStateVerticalInset = 17.0f;
 extern const CGFloat kTabGridEmptyStateHorizontalInset = 80.0f;
 
 // The insets from the edges for the floating button.
-const CGFloat kTabGridFloatingButtonVerticalInset = 10.0f;
-const CGFloat kTabGridFloatingButtonHorizontalInset = 10.0f;
+const CGFloat kTabGridFloatingButtonVerticalInsetSmall = 28.0f;
+const CGFloat kTabGridFloatingButtonVerticalInsetLarge = 56.0f;
+const CGFloat kTabGridFloatingButtonHorizontalInset = 20.0f;
 
 // Intrinsic heights of the tab grid toolbars.
 const CGFloat kTabGridTopToolbarHeight = 52.0f;

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

@@ -16,15 +16,11 @@
 @interface TabGridEmptyStateView ()
 @property(nonatomic, copy, readonly) NSString* title;
 @property(nonatomic, copy, readonly) NSString* body;
-@property(nonatomic, strong) NSArray* centeredConstraints;
-@property(nonatomic, strong) NSArray* trailingAlignedConstraints;
 @end
 
 @implementation TabGridEmptyStateView
 @synthesize title = _title;
 @synthesize body = _body;
-@synthesize centeredConstraints = _centeredConstraints;
-@synthesize trailingAlignedConstraints = _trailingAlignedConstraints;
 
 - (instancetype)initWithPage:(TabGridPage)page {
   if (self = [super initWithFrame:CGRectZero]) {
@@ -58,22 +54,6 @@
   }
 }
 
-- (void)traitCollectionDidChange:(UITraitCollection*)previousTraitCollection {
-  [super traitCollectionDidChange:previousTraitCollection];
-  if (self.traitCollection.verticalSizeClass ==
-          UIUserInterfaceSizeClassRegular &&
-      self.traitCollection.horizontalSizeClass ==
-          UIUserInterfaceSizeClassCompact) {
-    // The only centered configuration is when the UI is narrow but
-    // vertically long.
-    [NSLayoutConstraint deactivateConstraints:self.trailingAlignedConstraints];
-    [NSLayoutConstraint activateConstraints:self.centeredConstraints];
-  } else {
-    [NSLayoutConstraint deactivateConstraints:self.centeredConstraints];
-    [NSLayoutConstraint activateConstraints:self.trailingAlignedConstraints];
-  }
-}
-
 #pragma mark - Private
 
 - (void)setupViews {
@@ -95,8 +75,7 @@
   bottomLabel.numberOfLines = 0;
   bottomLabel.textAlignment = NSTextAlignmentCenter;
   [self addSubview:bottomLabel];
-
-  self.centeredConstraints = @[
+  [NSLayoutConstraint activateConstraints:@[
     [topLabel.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
     [topLabel.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
     [topLabel.bottomAnchor
@@ -107,20 +86,7 @@
                        constant:kTabGridEmptyStateVerticalMargin / 2.0f],
     [bottomLabel.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
     [bottomLabel.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
-  ];
-  self.trailingAlignedConstraints = @[
-    [bottomLabel.trailingAnchor
-        constraintEqualToAnchor:self.trailingAnchor
-                       constant:-kTabGridEmptyStateHorizontalInset],
-    [bottomLabel.bottomAnchor
-        constraintEqualToAnchor:self.bottomAnchor
-                       constant:-kTabGridEmptyStateVerticalInset],
-    [bottomLabel.topAnchor
-        constraintEqualToAnchor:topLabel.bottomAnchor
-                       constant:kTabGridEmptyStateVerticalMargin],
-    [bottomLabel.trailingAnchor
-        constraintEqualToAnchor:topLabel.trailingAnchor],
-  ];
+  ]];
 }
 
 @end

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

@@ -20,6 +20,7 @@
 #import "ios/chrome/browser/ui/tab_grid/tab_grid_top_toolbar.h"
 #import "ios/chrome/browser/ui/table_view/chrome_table_view_styler.h"
 #import "ios/chrome/browser/ui/uikit_ui_util.h"
+#import "ios/chrome/browser/ui/util/constraints_ui_util.h"
 #include "ios/chrome/grit/ios_strings.h"
 #include "ui/base/l10n/l10n_util.h"
 
@@ -557,15 +558,21 @@ NSUInteger GetPageIndexFromPage(TabGridPage page) {
   button.translatesAutoresizingMaskIntoConstraints = NO;
   [self.view addSubview:button];
   self.floatingButton = button;
-  NSArray* constraints = @[
+  CGFloat verticalInset = kTabGridFloatingButtonVerticalInsetSmall;
+  if (self.traitCollection.verticalSizeClass ==
+          UIUserInterfaceSizeClassRegular &&
+      self.traitCollection.horizontalSizeClass ==
+          UIUserInterfaceSizeClassRegular) {
+    verticalInset = kTabGridFloatingButtonVerticalInsetLarge;
+  }
+  id<LayoutGuideProvider> safeAreaGuide = SafeAreaLayoutGuideForView(self.view);
+  [NSLayoutConstraint activateConstraints:@[
     [button.trailingAnchor
-        constraintEqualToAnchor:self.view.trailingAnchor
+        constraintEqualToAnchor:safeAreaGuide.trailingAnchor
                        constant:-kTabGridFloatingButtonHorizontalInset],
-    [button.bottomAnchor
-        constraintEqualToAnchor:self.view.bottomAnchor
-                       constant:-kTabGridFloatingButtonVerticalInset]
-  ];
-  [NSLayoutConstraint activateConstraints:constraints];
+    [button.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor
+                                        constant:-verticalInset]
+  ]];
 }
 
 - (void)configureViewControllerForCurrentSizeClassesAndPage {