[ios] Extract empty state from TabGridViewController

This CL pulls a non-trivial amount of code out of TabGridViewController
and encapsulates it in a separate UIView subclass.
This CL also changes the layout based on orientation for the empty
state.

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

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

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

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

@@ -24,6 +24,14 @@ extern const CGFloat kTabGridToolbarHorizontalInset;
 // The distance between the title and body of the empty state view.
 extern const CGFloat kTabGridEmptyStateVerticalMargin;
 
+// The insets from the edges for empty state.
+extern const CGFloat kTabGridEmptyStateVerticalInset;
+extern const CGFloat kTabGridEmptyStateHorizontalInset;
+
+// The insets from the edges for the floating button.
+extern const CGFloat kTabGridFloatingButtonVerticalInset;
+extern const CGFloat kTabGridFloatingButtonHorizontalInset;
+
 // Intrinsic heights of the tab grid toolbars.
 extern const CGFloat kTabGridTopToolbarHeight;
 extern const CGFloat kTabGridBottomToolbarHeight;

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

@@ -21,6 +21,14 @@ const CGFloat kTabGridToolbarHorizontalInset = 16.0f;
 // The distance between the title and body of the empty state view.
 const CGFloat kTabGridEmptyStateVerticalMargin = 4.0f;
 
+// The insets from the edges for empty state.
+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;
+
 // 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_empty_state_view.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_EMPTY_STATE_VIEW_H_
+#define IOS_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_EMPTY_STATE_VIEW_H_
+
+#import <UIKit/UIKit.h>
+
+#import "ios/chrome/browser/ui/tab_grid/tab_grid_paging.h"
+
+// A view that informs the user that the grid is empty. The displayed
+// text is customized for incognito and regular tabs pages. No text is
+// displayed for the remote tabs page.
+@interface TabGridEmptyStateView : UIView
+// Initializes view with |page|, which changes the displayed text.
+- (instancetype)initWithPage:(TabGridPage)page NS_DESIGNATED_INITIALIZER;
+- (instancetype)init NS_UNAVAILABLE;
+- (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;
+- (instancetype)initWithCoder:(NSCoder*)aDecoder NS_UNAVAILABLE;
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_EMPTY_STATE_VIEW_H_

ios/chrome/browser/ui/tab_grid/tab_grid_empty_state_view.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_empty_state_view.h"
+
+#import "ios/chrome/browser/ui/tab_grid/tab_grid_constants.h"
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
+#include "ios/chrome/grit/ios_strings.h"
+#include "ui/base/l10n/l10n_util.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+@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]) {
+    switch (page) {
+      case TabGridPageIncognitoTabs:
+        _title = l10n_util::GetNSString(
+            IDS_IOS_TAB_GRID_INCOGNITO_TABS_EMPTY_STATE_TITLE);
+        _body = l10n_util::GetNSString(
+            IDS_IOS_TAB_GRID_INCOGNITO_TABS_EMPTY_STATE_BODY);
+        break;
+      case TabGridPageRegularTabs:
+        _title = l10n_util::GetNSString(
+            IDS_IOS_TAB_GRID_REGULAR_TABS_EMPTY_STATE_TITLE);
+        _body = l10n_util::GetNSString(
+            IDS_IOS_TAB_GRID_REGULAR_TABS_EMPTY_STATE_BODY);
+        break;
+      case TabGridPageRemoteTabs:
+        // No-op. Empty page.
+        break;
+    }
+  }
+  return self;
+}
+
+#pragma mark - UIView
+
+- (void)willMoveToSuperview:(UIView*)newSuperview {
+  // The first time this moves to a superview, perform the view setup.
+  if (newSuperview && self.subviews.count == 0) {
+    [self setupViews];
+  }
+}
+
+- (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 {
+  UILabel* topLabel = [[UILabel alloc] init];
+  topLabel.translatesAutoresizingMaskIntoConstraints = NO;
+  topLabel.text = self.title;
+  topLabel.textColor = UIColorFromRGB(kTabGridEmptyStateTitleTextColor);
+  topLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleTitle2];
+  topLabel.adjustsFontForContentSizeCategory = YES;
+  topLabel.numberOfLines = 0;
+  topLabel.textAlignment = NSTextAlignmentCenter;
+  [self addSubview:topLabel];
+  UILabel* bottomLabel = [[UILabel alloc] init];
+  bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
+  bottomLabel.text = self.body;
+  bottomLabel.textColor = UIColorFromRGB(kTabGridEmptyStateBodyTextColor);
+  bottomLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+  bottomLabel.adjustsFontForContentSizeCategory = YES;
+  bottomLabel.numberOfLines = 0;
+  bottomLabel.textAlignment = NSTextAlignmentCenter;
+  [self addSubview:bottomLabel];
+
+  self.centeredConstraints = @[
+    [topLabel.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
+    [topLabel.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
+    [topLabel.bottomAnchor
+        constraintEqualToAnchor:self.centerYAnchor
+                       constant:-kTabGridEmptyStateVerticalMargin / 2.0f],
+    [bottomLabel.topAnchor
+        constraintEqualToAnchor:self.centerYAnchor
+                       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

@@ -11,6 +11,7 @@
 #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_empty_state_view.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"
 #import "ios/chrome/browser/ui/uikit_ui_util.h"
@@ -306,11 +307,8 @@ typedef NS_ENUM(NSUInteger, TabGridConfiguration) {
   [self addChildViewController:viewController];
   [contentView addSubview:viewController.view];
   [viewController didMoveToParentViewController:self];
-  int titleStringID = IDS_IOS_TAB_GRID_INCOGNITO_TABS_EMPTY_STATE_TITLE;
-  int bodyStringID = IDS_IOS_TAB_GRID_INCOGNITO_TABS_EMPTY_STATE_BODY;
   viewController.emptyStateView =
-      [self createEmptyStateViewWithTitleStringID:titleStringID
-                                     bodyStringID:bodyStringID];
+      [[TabGridEmptyStateView alloc] initWithPage:TabGridPageIncognitoTabs];
   viewController.theme = GridThemeDark;
   viewController.delegate = self;
   if (@available(iOS 11, *)) {
@@ -341,11 +339,8 @@ typedef NS_ENUM(NSUInteger, TabGridConfiguration) {
   [self addChildViewController:viewController];
   [contentView addSubview:viewController.view];
   [viewController didMoveToParentViewController:self];
-  int titleStringID = IDS_IOS_TAB_GRID_REGULAR_TABS_EMPTY_STATE_TITLE;
-  int bodyStringID = IDS_IOS_TAB_GRID_REGULAR_TABS_EMPTY_STATE_BODY;
   viewController.emptyStateView =
-      [self createEmptyStateViewWithTitleStringID:titleStringID
-                                     bodyStringID:bodyStringID];
+      [[TabGridEmptyStateView alloc] initWithPage:TabGridPageRegularTabs];
   viewController.theme = GridThemeLight;
   viewController.delegate = self;
   if (@available(iOS 11, *)) {
@@ -395,44 +390,6 @@ typedef NS_ENUM(NSUInteger, TabGridConfiguration) {
   [NSLayoutConstraint activateConstraints:constraints];
 }
 
-// Creates an empty state view.
-- (UIView*)createEmptyStateViewWithTitleStringID:(int)titleStringID
-                                    bodyStringID:(int)bodyStringID {
-  UIView* view = [[UIView alloc] init];
-  UILabel* topLabel = [[UILabel alloc] init];
-  topLabel.translatesAutoresizingMaskIntoConstraints = NO;
-  topLabel.text = l10n_util::GetNSString(titleStringID);
-  topLabel.textColor = UIColorFromRGB(kTabGridEmptyStateTitleTextColor);
-  topLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleTitle2];
-  topLabel.adjustsFontForContentSizeCategory = YES;
-  topLabel.numberOfLines = 0;
-  topLabel.textAlignment = NSTextAlignmentCenter;
-  [view addSubview:topLabel];
-  UILabel* bottomLabel = [[UILabel alloc] init];
-  bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
-  bottomLabel.text = l10n_util::GetNSString(bodyStringID);
-  bottomLabel.textColor = UIColorFromRGB(kTabGridEmptyStateBodyTextColor);
-  bottomLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
-  bottomLabel.adjustsFontForContentSizeCategory = YES;
-  bottomLabel.numberOfLines = 0;
-  bottomLabel.textAlignment = NSTextAlignmentCenter;
-  [view addSubview:bottomLabel];
-  NSArray* constraints = @[
-    [topLabel.leadingAnchor constraintEqualToAnchor:view.leadingAnchor],
-    [topLabel.trailingAnchor constraintEqualToAnchor:view.trailingAnchor],
-    [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],
-  ];
-  [NSLayoutConstraint activateConstraints:constraints];
-  return view;
-}
-
 // Adds the top toolbar and sets constraints.
 - (void)setupTopToolbar {
   TabGridTopToolbar* topToolbar = [[TabGridTopToolbar alloc] init];
@@ -503,10 +460,12 @@ typedef NS_ENUM(NSUInteger, TabGridConfiguration) {
   [self.view addSubview:button];
   self.floatingButton = button;
   NSArray* constraints = @[
-    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor
-                                          constant:-10.0f],
-    [button.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor
-                                        constant:-10.0f]
+    [button.trailingAnchor
+        constraintEqualToAnchor:self.view.trailingAnchor
+                       constant:-kTabGridFloatingButtonHorizontalInset],
+    [button.bottomAnchor
+        constraintEqualToAnchor:self.view.bottomAnchor
+                       constant:-kTabGridFloatingButtonVerticalInset]
   ];
   [NSLayoutConstraint activateConstraints:constraints];
 }