[ios] Polish tab grid (part 1)

This CL moves magic numbers to constants files:

- Various dimensions in GridCell
- Margins and height of TabGridTopToolbar
- Margins and height of TabGridBottomToolbar

This CL also changes the toolbar classes to use
|-willMoveToSuperview:| to setup views instead of
|-init|.

Bug: 818198, 822524

Cq-Include-Trybots: master.tryserver.chromium.mac:ios-simulator-cronet;master.tryserver.chromium.mac:ios-simulator-full-configs
Change-Id: Ib4dcfd344c29c3e0ccee103b6002dd6e1d14fb30
Reviewed-on: https://chromium-review.googlesource.com/965576
Commit-Queue: edchin <edchin@chromium.org>
Reviewed-by: edchin <edchin@chromium.org>
Reviewed-by: Mark Cogan <marq@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543790}

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

@@ -53,6 +53,8 @@ source_set("tab_grid_ui") {
     "grid_view_controller.mm",
     "tab_grid_bottom_toolbar.h",
     "tab_grid_bottom_toolbar.mm",
+    "tab_grid_constants.h",
+    "tab_grid_constants.mm",
     "tab_grid_page_control.h",
     "tab_grid_page_control.mm",
     "tab_grid_paging.h",

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

@@ -15,15 +15,6 @@
 #error "This file requires ARC support."
 #endif
 
-namespace {
-// Height of the top bar containing the icon, title, and close button.
-const CGFloat kTopBarHeight = 28.0f;
-// Width and height of the icon.
-const CGFloat kIconDiameter = 20.0f;
-// Width of selection border.
-const CGFloat kBorderWidth = 6.0f;
-}  // namespace
-
 @interface GridCell ()
 // Visual components of the cell.
 @property(nonatomic, weak) UIView* topBar;
@@ -57,7 +48,7 @@ const CGFloat kBorderWidth = 6.0f;
   if (self) {
     [self setupSelectedBackgroundView];
     UIView* contentView = self.contentView;
-    contentView.layer.cornerRadius = 11.0f;
+    contentView.layer.cornerRadius = kGridCellCornerRadius;
     contentView.layer.masksToBounds = YES;
     UIView* topBar = [self setupTopBar];
     TopAlignedImageView* snapshotView = [[TopAlignedImageView alloc] init];
@@ -71,7 +62,7 @@ const CGFloat kBorderWidth = 6.0f;
       [topBar.leadingAnchor constraintEqualToAnchor:contentView.leadingAnchor],
       [topBar.trailingAnchor
           constraintEqualToAnchor:contentView.trailingAnchor],
-      [topBar.heightAnchor constraintEqualToConstant:kTopBarHeight],
+      [topBar.heightAnchor constraintEqualToConstant:kGridCellHeaderHeight],
       [snapshotView.topAnchor constraintEqualToAnchor:topBar.bottomAnchor],
       [snapshotView.leadingAnchor
           constraintEqualToAnchor:contentView.leadingAnchor],
@@ -177,7 +168,7 @@ const CGFloat kBorderWidth = 6.0f;
   UIImageView* iconView = [[UIImageView alloc] init];
   iconView.translatesAutoresizingMaskIntoConstraints = NO;
   iconView.contentMode = UIViewContentModeScaleAspectFill;
-  iconView.layer.cornerRadius = 4.0f;
+  iconView.layer.cornerRadius = kGridCellIconCornerRadius;
   iconView.layer.masksToBounds = YES;
 
   UILabel* titleLabel = [[UILabel alloc] init];
@@ -203,19 +194,22 @@ const CGFloat kBorderWidth = 6.0f;
   _closeButton = closeButton;
 
   NSArray* constraints = @[
-    [iconView.leadingAnchor constraintEqualToAnchor:topBar.leadingAnchor
-                                           constant:4.0f],
+    [iconView.leadingAnchor
+        constraintEqualToAnchor:topBar.leadingAnchor
+                       constant:kGridCellHeaderLeadingInset],
     [iconView.centerYAnchor constraintEqualToAnchor:topBar.centerYAnchor],
-    [iconView.widthAnchor constraintEqualToConstant:kIconDiameter],
-    [iconView.heightAnchor constraintEqualToConstant:kIconDiameter],
-    [titleLabel.leadingAnchor constraintEqualToAnchor:iconView.trailingAnchor
-                                             constant:4.0f],
+    [iconView.widthAnchor constraintEqualToConstant:kGridCellIconDiameter],
+    [iconView.heightAnchor constraintEqualToConstant:kGridCellIconDiameter],
+    [titleLabel.leadingAnchor
+        constraintEqualToAnchor:iconView.trailingAnchor
+                       constant:kGridCellHeaderLeadingInset],
     [titleLabel.centerYAnchor constraintEqualToAnchor:topBar.centerYAnchor],
     [closeButton.leadingAnchor
         constraintEqualToAnchor:titleLabel.trailingAnchor],
     [closeButton.centerYAnchor constraintEqualToAnchor:topBar.centerYAnchor],
-    [closeButton.trailingAnchor constraintEqualToAnchor:topBar.trailingAnchor
-                                               constant:-6.0f],
+    [closeButton.trailingAnchor
+        constraintEqualToAnchor:topBar.trailingAnchor
+                       constant:-kGridCellHeaderTrailingInset],
   ];
   [NSLayoutConstraint activateConstraints:constraints];
   [titleLabel setContentHuggingPriority:UILayoutPriorityDefaultLow
@@ -232,27 +226,34 @@ const CGFloat kBorderWidth = 6.0f;
 // selected.
 - (void)setupSelectedBackgroundView {
   self.selectedBackgroundView = [[UIView alloc] init];
-  self.selectedBackgroundView.backgroundColor = [UIColor blackColor];
+  self.selectedBackgroundView.backgroundColor =
+      UIColorFromRGB(kGridBackgroundColor);
   UIView* border = [[UIView alloc] init];
   border.translatesAutoresizingMaskIntoConstraints = NO;
-  border.backgroundColor = [UIColor blackColor];
-  border.layer.cornerRadius = 17.0f;
-  border.layer.borderWidth = 4.0f;
+  border.backgroundColor = UIColorFromRGB(kGridBackgroundColor);
+  border.layer.cornerRadius = kGridCellCornerRadius +
+                              kGridCellSelectionRingGapWidth +
+                              kGridCellSelectionRingTintWidth;
+  border.layer.borderWidth = kGridCellSelectionRingTintWidth;
   [self.selectedBackgroundView addSubview:border];
   _border = border;
   [NSLayoutConstraint activateConstraints:@[
     [border.topAnchor
         constraintEqualToAnchor:self.selectedBackgroundView.topAnchor
-                       constant:-kBorderWidth],
+                       constant:-kGridCellSelectionRingTintWidth -
+                                kGridCellSelectionRingGapWidth],
     [border.leadingAnchor
         constraintEqualToAnchor:self.selectedBackgroundView.leadingAnchor
-                       constant:-kBorderWidth],
+                       constant:-kGridCellSelectionRingTintWidth -
+                                kGridCellSelectionRingGapWidth],
     [border.trailingAnchor
         constraintEqualToAnchor:self.selectedBackgroundView.trailingAnchor
-                       constant:kBorderWidth],
+                       constant:kGridCellSelectionRingTintWidth +
+                                kGridCellSelectionRingGapWidth],
     [border.bottomAnchor
         constraintEqualToAnchor:self.selectedBackgroundView.bottomAnchor
-                       constant:kBorderWidth]
+                       constant:kGridCellSelectionRingTintWidth +
+                                kGridCellSelectionRingGapWidth]
   ]];
 }
 

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

@@ -20,19 +20,33 @@ extern NSString* const kGridCellCloseButtonIdentifier;
 // converted into UIColors using the UIColorFromRGB() function, from
 // uikit_ui_util.h
 
+// Grid styling.
+extern const int kGridBackgroundColor;
+
 // GridCell styling.
 // Common colors.
-extern const CGFloat kGridCellIconBackgroundColor;
-extern const CGFloat kGridCellSnapshotBackgroundColor;
+extern const int kGridCellIconBackgroundColor;
+extern const int kGridCellSnapshotBackgroundColor;
 // Light theme colors.
-extern const CGFloat kGridLightThemeCellTitleColor;
-extern const CGFloat kGridLightThemeCellHeaderColor;
-extern const CGFloat kGridLightThemeCellSelectionColor;
-extern const CGFloat kGridLightThemeCellCloseButtonTintColor;
+extern const int kGridLightThemeCellTitleColor;
+extern const int kGridLightThemeCellHeaderColor;
+extern const int kGridLightThemeCellSelectionColor;
+extern const int kGridLightThemeCellCloseButtonTintColor;
 // Dark theme colors.
-extern const CGFloat kGridDarkThemeCellTitleColor;
-extern const CGFloat kGridDarkThemeCellHeaderColor;
-extern const CGFloat kGridDarkThemeCellSelectionColor;
-extern const CGFloat kGridDarkThemeCellCloseButtonTintColor;
+extern const int kGridDarkThemeCellTitleColor;
+extern const int kGridDarkThemeCellHeaderColor;
+extern const int kGridDarkThemeCellSelectionColor;
+extern const int kGridDarkThemeCellCloseButtonTintColor;
+
+// GridCell dimensions.
+extern const CGFloat kGridCellCornerRadius;
+extern const CGFloat kGridCellIconCornerRadius;
+// Height of the cell header containing the icon, title, and close button.
+extern const CGFloat kGridCellHeaderHeight;
+extern const CGFloat kGridCellHeaderLeadingInset;
+extern const CGFloat kGridCellHeaderTrailingInset;
+extern const CGFloat kGridCellIconDiameter;
+extern const CGFloat kGridCellSelectionRingGapWidth;
+extern const CGFloat kGridCellSelectionRingTintWidth;
 
 #endif  // IOS_CHROME_BROWSER_UI_TAB_GRID_GRID_CONSTANTS_H_

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

@@ -15,17 +15,31 @@ NSString* const kGridCellIdentifierPrefix = @"GridCellIdentifierPrefix";
 NSString* const kGridCellCloseButtonIdentifier =
     @"GridCellCloseButtonIdentifier";
 
+// Grid styling.
+const int kGridBackgroundColor = 0x222222;
+
 // GridCell styling.
 // Common colors.
-const CGFloat kGridCellIconBackgroundColor = 0xF1F3F4;
-const CGFloat kGridCellSnapshotBackgroundColor = 0xE8EAED;
+const int kGridCellIconBackgroundColor = 0xF1F3F4;
+const int kGridCellSnapshotBackgroundColor = 0xE8EAED;
 // Light theme colors.
-const CGFloat kGridLightThemeCellTitleColor = 0x000000;
-const CGFloat kGridLightThemeCellHeaderColor = 0xF8F9FA;
-const CGFloat kGridLightThemeCellSelectionColor = 0x1A73E8;
-const CGFloat kGridLightThemeCellCloseButtonTintColor = 0x3C4043;
+const int kGridLightThemeCellTitleColor = 0x000000;
+const int kGridLightThemeCellHeaderColor = 0xF8F9FA;
+const int kGridLightThemeCellSelectionColor = 0x1A73E8;
+const int kGridLightThemeCellCloseButtonTintColor = 0x3C4043;
 // Dark theme colors.
-const CGFloat kGridDarkThemeCellTitleColor = 0xFFFFFF;
-const CGFloat kGridDarkThemeCellHeaderColor = 0x5F6368;
-const CGFloat kGridDarkThemeCellSelectionColor = 0x9AA0A6;
-const CGFloat kGridDarkThemeCellCloseButtonTintColor = 0xFFFFFF;
+const int kGridDarkThemeCellTitleColor = 0xFFFFFF;
+const int kGridDarkThemeCellHeaderColor = 0x5F6368;
+const int kGridDarkThemeCellSelectionColor = 0x9AA0A6;
+const int kGridDarkThemeCellCloseButtonTintColor = 0xFFFFFF;
+
+// GridCell dimensions.
+const CGFloat kGridCellCornerRadius = 13.0f;
+const CGFloat kGridCellIconCornerRadius = 3.0f;
+// The cell header contains the icon, title, and close button.
+const CGFloat kGridCellHeaderHeight = 32.0f;
+const CGFloat kGridCellHeaderLeadingInset = 5.0f;
+const CGFloat kGridCellHeaderTrailingInset = 8.5f;
+const CGFloat kGridCellIconDiameter = 22.0f;
+const CGFloat kGridCellSelectionRingGapWidth = 2.0f;
+const CGFloat kGridCellSelectionRingTintWidth = 5.0f;

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

@@ -16,11 +16,6 @@
 @property(nonatomic, weak, readonly) UIButton* leadingButton;
 @property(nonatomic, weak, readonly) UIButton* trailingButton;
 @property(nonatomic, weak, readonly) UIButton* centerButton;
-
-- (instancetype)init NS_DESIGNATED_INITIALIZER;
-- (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;
-- (instancetype)initWithCoder:(NSCoder*)aDecoder NS_UNAVAILABLE;
-
 @end
 
 #endif  // IOS_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_BOTTOM_TOOLBAR_H_

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

@@ -4,77 +4,87 @@
 
 #import "ios/chrome/browser/ui/tab_grid/tab_grid_bottom_toolbar.h"
 
-#include "base/logging.h"
+#import "ios/chrome/browser/ui/tab_grid/tab_grid_constants.h"
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
 #endif
 
-namespace {
-// Height of the toolbar.
-const CGFloat kToolbarHeight = 44.0f;
-}  // namespace
-
 @implementation TabGridBottomToolbar
 @synthesize leadingButton = _leadingButton;
 @synthesize trailingButton = _trailingButton;
 @synthesize centerButton = _centerButton;
 
-- (instancetype)init {
-  if (self = [super initWithFrame:CGRectZero]) {
-    UIVisualEffect* blurEffect =
-        [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
-    UIVisualEffectView* toolbar =
-        [[UIVisualEffectView alloc] initWithEffect:blurEffect];
-    toolbar.translatesAutoresizingMaskIntoConstraints = NO;
-    [self addSubview:toolbar];
-
-    UIButton* leadingButton = [UIButton buttonWithType:UIButtonTypeSystem];
-    leadingButton.translatesAutoresizingMaskIntoConstraints = NO;
-    leadingButton.titleLabel.font =
-        [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
-    leadingButton.titleLabel.adjustsFontForContentSizeCategory = YES;
-    leadingButton.tintColor = [UIColor whiteColor];
-    UIButton* trailingButton = [UIButton buttonWithType:UIButtonTypeSystem];
-    trailingButton.translatesAutoresizingMaskIntoConstraints = NO;
-    trailingButton.titleLabel.font =
-        [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
-    trailingButton.titleLabel.adjustsFontForContentSizeCategory = YES;
-    trailingButton.tintColor = [UIColor whiteColor];
-    UIButton* centerButton = [UIButton buttonWithType:UIButtonTypeSystem];
-    centerButton.translatesAutoresizingMaskIntoConstraints = NO;
+#pragma mark - UIView
 
-    [toolbar.contentView addSubview:leadingButton];
-    [toolbar.contentView addSubview:trailingButton];
-    [toolbar.contentView addSubview:centerButton];
-    _leadingButton = leadingButton;
-    _trailingButton = trailingButton;
-    _centerButton = centerButton;
+- (CGSize)intrinsicContentSize {
+  return CGSizeMake(UIViewNoIntrinsicMetric, kTabGridBottomToolbarHeight);
+}
 
-    NSArray* constraints = @[
-      [toolbar.topAnchor constraintEqualToAnchor:self.topAnchor],
-      [toolbar.bottomAnchor constraintEqualToAnchor:self.bottomAnchor],
-      [toolbar.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
-      [toolbar.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
-      [leadingButton.heightAnchor constraintEqualToConstant:kToolbarHeight],
-      [leadingButton.leadingAnchor
-          constraintEqualToAnchor:toolbar.layoutMarginsGuide.leadingAnchor],
-      [leadingButton.topAnchor constraintEqualToAnchor:toolbar.topAnchor],
-      [centerButton.centerXAnchor
-          constraintEqualToAnchor:toolbar.centerXAnchor],
-      [centerButton.topAnchor constraintEqualToAnchor:toolbar.topAnchor],
-      [trailingButton.heightAnchor constraintEqualToConstant:kToolbarHeight],
-      [trailingButton.trailingAnchor
-          constraintEqualToAnchor:toolbar.layoutMarginsGuide.trailingAnchor],
-      [trailingButton.topAnchor constraintEqualToAnchor:toolbar.topAnchor],
-    ];
-    [NSLayoutConstraint activateConstraints:constraints];
+- (void)willMoveToSuperview:(UIView*)newSuperview {
+  // The first time this moves to a superview, perform the view setup.
+  if (newSuperview && self.subviews.count == 0) {
+    [self setupViews];
   }
-  return self;
 }
 
-- (CGSize)intrinsicContentSize {
-  return CGSizeMake(UIViewNoIntrinsicMetric, kToolbarHeight);
+#pragma mark - Private
+
+- (void)setupViews {
+  self.layoutMargins = UIEdgeInsetsMake(0, kTabGridToolbarHorizontalInset, 0,
+                                        kTabGridToolbarHorizontalInset);
+
+  UIVisualEffect* blurEffect =
+      [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
+  UIVisualEffectView* toolbar =
+      [[UIVisualEffectView alloc] initWithEffect:blurEffect];
+  toolbar.translatesAutoresizingMaskIntoConstraints = NO;
+  [self addSubview:toolbar];
+
+  UIButton* leadingButton = [UIButton buttonWithType:UIButtonTypeSystem];
+  leadingButton.translatesAutoresizingMaskIntoConstraints = NO;
+  leadingButton.titleLabel.font =
+      [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
+  leadingButton.titleLabel.adjustsFontForContentSizeCategory = YES;
+  leadingButton.tintColor = UIColorFromRGB(kTabGridToolbarTextButtonColor);
+  UIButton* trailingButton = [UIButton buttonWithType:UIButtonTypeSystem];
+  trailingButton.translatesAutoresizingMaskIntoConstraints = NO;
+  trailingButton.titleLabel.font =
+      [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+  trailingButton.titleLabel.adjustsFontForContentSizeCategory = YES;
+  trailingButton.tintColor = UIColorFromRGB(kTabGridToolbarTextButtonColor);
+  UIButton* centerButton = [UIButton buttonWithType:UIButtonTypeSystem];
+  centerButton.translatesAutoresizingMaskIntoConstraints = NO;
+
+  [toolbar.contentView addSubview:leadingButton];
+  [toolbar.contentView addSubview:trailingButton];
+  [toolbar.contentView addSubview:centerButton];
+  _leadingButton = leadingButton;
+  _trailingButton = trailingButton;
+  _centerButton = centerButton;
+
+  NSArray* constraints = @[
+    [toolbar.topAnchor constraintEqualToAnchor:self.topAnchor],
+    [toolbar.bottomAnchor constraintEqualToAnchor:self.bottomAnchor],
+    [toolbar.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
+    [toolbar.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
+    [leadingButton.heightAnchor
+        constraintEqualToConstant:kTabGridBottomToolbarHeight],
+    [leadingButton.leadingAnchor
+        constraintEqualToAnchor:self.layoutMarginsGuide.leadingAnchor],
+    [leadingButton.topAnchor constraintEqualToAnchor:toolbar.topAnchor],
+    [centerButton.centerXAnchor constraintEqualToAnchor:toolbar.centerXAnchor],
+    [centerButton.centerYAnchor
+        constraintEqualToAnchor:toolbar.topAnchor
+                       constant:kTabGridBottomToolbarHeight / 2.0f],
+    [trailingButton.heightAnchor
+        constraintEqualToConstant:kTabGridBottomToolbarHeight],
+    [trailingButton.trailingAnchor
+        constraintEqualToAnchor:self.layoutMarginsGuide.trailingAnchor],
+    [trailingButton.topAnchor constraintEqualToAnchor:toolbar.topAnchor],
+  ];
+  [NSLayoutConstraint activateConstraints:constraints];
 }
 
 @end

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

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef IOS_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_CONSTANTS_H_
+#define IOS_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_CONSTANTS_H_
+
+#import <UIKit/UIKit.h>
+
+// All kxxxColor constants are RGB values stored in a Hex integer. These will be
+// converted into UIColors using the UIColorFromRGB() function, from
+// uikit_ui_util.h
+
+// The color of the text buttons in the toolbars.
+extern const int kTabGridToolbarTextButtonColor;
+
+// The distance the toolbar content is inset from either side.
+extern const CGFloat kTabGridToolbarHorizontalInset;
+
+// The distance between the title and body of the empty state view.
+extern const CGFloat kTabGridEmptyStateVerticalMargin;
+
+// Intrinsic heights of the tab grid toolbars.
+extern const CGFloat kTabGridTopToolbarHeight;
+extern const CGFloat kTabGridBottomToolbarHeight;
+
+#endif  // IOS_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_CONSTANTS_H_

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

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#import "ios/chrome/browser/ui/tab_grid/tab_grid_constants.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+// The color of the text buttons in the toolbars.
+const int kTabGridToolbarTextButtonColor = 0xFFFFFF;
+
+// The distance the toolbar content is inset from either side.
+const CGFloat kTabGridToolbarHorizontalInset = 16.0f;
+
+// The distance between the title and body of the empty state view.
+const CGFloat kTabGridEmptyStateVerticalMargin = 4.0f;
+
+// Intrinsic heights of the tab grid toolbars.
+const CGFloat kTabGridTopToolbarHeight = 52.0f;
+const CGFloat kTabGridBottomToolbarHeight = 44.0f;

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

@@ -18,11 +18,6 @@
 @property(nonatomic, weak, readonly) UIButton* leadingButton;
 @property(nonatomic, weak, readonly) UIButton* trailingButton;
 @property(nonatomic, weak, readonly) TabGridPageControl* pageControl;
-
-- (instancetype)init NS_DESIGNATED_INITIALIZER;
-- (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;
-- (instancetype)initWithCoder:(NSCoder*)aDecoder NS_UNAVAILABLE;
-
 @end
 
 #endif  // IOS_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_TOP_TOOLBAR_H_

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

@@ -4,81 +4,91 @@
 
 #import "ios/chrome/browser/ui/tab_grid/tab_grid_top_toolbar.h"
 
+#import "ios/chrome/browser/ui/tab_grid/tab_grid_constants.h"
 #import "ios/chrome/browser/ui/tab_grid/tab_grid_page_control.h"
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
 #endif
 
-namespace {
-// Height of the toolbar.
-const CGFloat kToolbarHeight = 52.0f;
-}  // namespace
-
 @implementation TabGridTopToolbar
 @synthesize leadingButton = _leadingButton;
 @synthesize trailingButton = _trailingButton;
 @synthesize pageControl = _pageControl;
 
-- (instancetype)init {
-  if (self = [super initWithFrame:CGRectZero]) {
-    UIVisualEffect* blurEffect =
-        [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
-    UIVisualEffectView* toolbar =
-        [[UIVisualEffectView alloc] initWithEffect:blurEffect];
-    toolbar.translatesAutoresizingMaskIntoConstraints = NO;
-    [self addSubview:toolbar];
-
-    UIButton* leadingButton = [UIButton buttonWithType:UIButtonTypeSystem];
-    leadingButton.translatesAutoresizingMaskIntoConstraints = NO;
-    leadingButton.titleLabel.font =
-        [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
-    leadingButton.titleLabel.adjustsFontForContentSizeCategory = YES;
-    leadingButton.tintColor = [UIColor whiteColor];
-
-    // The segmented control has an intrinsic size.
-    TabGridPageControl* pageControl = [[TabGridPageControl alloc] init];
-    pageControl.translatesAutoresizingMaskIntoConstraints = NO;
-
-    UIButton* trailingButton = [UIButton buttonWithType:UIButtonTypeSystem];
-    trailingButton.translatesAutoresizingMaskIntoConstraints = NO;
-    trailingButton.titleLabel.font =
-        [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
-    trailingButton.titleLabel.adjustsFontForContentSizeCategory = YES;
-    trailingButton.tintColor = [UIColor whiteColor];
-
-    [toolbar.contentView addSubview:leadingButton];
-    [toolbar.contentView addSubview:trailingButton];
-    [toolbar.contentView addSubview:pageControl];
-    _leadingButton = leadingButton;
-    _trailingButton = trailingButton;
-    _pageControl = pageControl;
-
-    NSArray* constraints = @[
-      [toolbar.topAnchor constraintEqualToAnchor:self.topAnchor],
-      [toolbar.bottomAnchor constraintEqualToAnchor:self.bottomAnchor],
-      [toolbar.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
-      [toolbar.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
-      [leadingButton.heightAnchor constraintEqualToConstant:kToolbarHeight],
-      [leadingButton.leadingAnchor
-          constraintEqualToAnchor:toolbar.layoutMarginsGuide.leadingAnchor],
-      [leadingButton.bottomAnchor constraintEqualToAnchor:toolbar.bottomAnchor],
-      [pageControl.centerXAnchor constraintEqualToAnchor:toolbar.centerXAnchor],
-      [pageControl.bottomAnchor constraintEqualToAnchor:toolbar.bottomAnchor
-                                               constant:-7.0f],
-      [trailingButton.heightAnchor constraintEqualToConstant:kToolbarHeight],
-      [trailingButton.trailingAnchor
-          constraintEqualToAnchor:toolbar.layoutMarginsGuide.trailingAnchor],
-      [trailingButton.bottomAnchor
-          constraintEqualToAnchor:toolbar.bottomAnchor],
-    ];
-    [NSLayoutConstraint activateConstraints:constraints];
+#pragma mark - UIView
+
+- (CGSize)intrinsicContentSize {
+  return CGSizeMake(UIViewNoIntrinsicMetric, kTabGridTopToolbarHeight);
+}
+
+- (void)willMoveToSuperview:(UIView*)newSuperview {
+  // The first time this moves to a superview, perform the view setup.
+  if (newSuperview && self.subviews.count == 0) {
+    [self setupViews];
   }
-  return self;
 }
 
-- (CGSize)intrinsicContentSize {
-  return CGSizeMake(UIViewNoIntrinsicMetric, kToolbarHeight);
+#pragma mark - Private
+
+- (void)setupViews {
+  self.layoutMargins = UIEdgeInsetsMake(0, kTabGridToolbarHorizontalInset, 0,
+                                        kTabGridToolbarHorizontalInset);
+
+  UIVisualEffect* blurEffect =
+      [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
+  UIVisualEffectView* toolbar =
+      [[UIVisualEffectView alloc] initWithEffect:blurEffect];
+  toolbar.translatesAutoresizingMaskIntoConstraints = NO;
+  [self addSubview:toolbar];
+
+  UIButton* leadingButton = [UIButton buttonWithType:UIButtonTypeSystem];
+  leadingButton.translatesAutoresizingMaskIntoConstraints = NO;
+  leadingButton.titleLabel.font =
+      [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
+  leadingButton.titleLabel.adjustsFontForContentSizeCategory = YES;
+  leadingButton.tintColor = UIColorFromRGB(kTabGridToolbarTextButtonColor);
+
+  // The segmented control has an intrinsic size.
+  TabGridPageControl* pageControl = [[TabGridPageControl alloc] init];
+  pageControl.translatesAutoresizingMaskIntoConstraints = NO;
+
+  UIButton* trailingButton = [UIButton buttonWithType:UIButtonTypeSystem];
+  trailingButton.translatesAutoresizingMaskIntoConstraints = NO;
+  trailingButton.titleLabel.font =
+      [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+  trailingButton.titleLabel.adjustsFontForContentSizeCategory = YES;
+  trailingButton.tintColor = UIColorFromRGB(kTabGridToolbarTextButtonColor);
+
+  [toolbar.contentView addSubview:leadingButton];
+  [toolbar.contentView addSubview:trailingButton];
+  [toolbar.contentView addSubview:pageControl];
+  _leadingButton = leadingButton;
+  _trailingButton = trailingButton;
+  _pageControl = pageControl;
+
+  NSArray* constraints = @[
+    [toolbar.topAnchor constraintEqualToAnchor:self.topAnchor],
+    [toolbar.bottomAnchor constraintEqualToAnchor:self.bottomAnchor],
+    [toolbar.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
+    [toolbar.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
+    [leadingButton.heightAnchor
+        constraintEqualToConstant:kTabGridTopToolbarHeight],
+    [leadingButton.leadingAnchor
+        constraintEqualToAnchor:self.layoutMarginsGuide.leadingAnchor],
+    [leadingButton.bottomAnchor constraintEqualToAnchor:toolbar.bottomAnchor],
+    [pageControl.centerXAnchor constraintEqualToAnchor:toolbar.centerXAnchor],
+    [pageControl.centerYAnchor
+        constraintEqualToAnchor:toolbar.bottomAnchor
+                       constant:-kTabGridTopToolbarHeight / 2.0f],
+    [trailingButton.heightAnchor
+        constraintEqualToConstant:kTabGridTopToolbarHeight],
+    [trailingButton.trailingAnchor
+        constraintEqualToAnchor:self.layoutMarginsGuide.trailingAnchor],
+    [trailingButton.bottomAnchor constraintEqualToAnchor:toolbar.bottomAnchor],
+  ];
+  [NSLayoutConstraint activateConstraints:constraints];
 }
 
 @end

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

@@ -11,6 +11,7 @@
 #import "ios/chrome/browser/ui/tab_grid/grid_image_data_source.h"
 #import "ios/chrome/browser/ui/tab_grid/grid_view_controller.h"
 #import "ios/chrome/browser/ui/tab_grid/tab_grid_bottom_toolbar.h"
+#import "ios/chrome/browser/ui/tab_grid/tab_grid_constants.h"
 #import "ios/chrome/browser/ui/tab_grid/tab_grid_page_control.h"
 #import "ios/chrome/browser/ui/tab_grid/tab_grid_top_toolbar.h"
 #include "ios/chrome/grit/ios_strings.h"
@@ -418,10 +419,12 @@ typedef NS_ENUM(NSUInteger, TabGridConfiguration) {
   NSArray* constraints = @[
     [topLabel.leadingAnchor constraintEqualToAnchor:view.leadingAnchor],
     [topLabel.trailingAnchor constraintEqualToAnchor:view.trailingAnchor],
-    [topLabel.bottomAnchor constraintEqualToAnchor:view.centerYAnchor
-                                          constant:-10.0f],
-    [bottomLabel.topAnchor constraintEqualToAnchor:view.centerYAnchor
-                                          constant:10.0f],
+    [topLabel.bottomAnchor
+        constraintEqualToAnchor:view.centerYAnchor
+                       constant:-kTabGridEmptyStateVerticalMargin / 2.0f],
+    [bottomLabel.topAnchor
+        constraintEqualToAnchor:view.centerYAnchor
+                       constant:kTabGridEmptyStateVerticalMargin / 2.0f],
     [bottomLabel.leadingAnchor constraintEqualToAnchor:view.leadingAnchor],
     [bottomLabel.trailingAnchor constraintEqualToAnchor:view.trailingAnchor],
   ];