[ios] Tab grid toolbars initial implementations

Bug: 804499
Cq-Include-Trybots: master.tryserver.chromium.mac:ios-simulator-cronet;master.tryserver.chromium.mac:ios-simulator-full-configs
Change-Id: I066fc6b53f8f2775f559f8dd75ab63d629b74e9d
Reviewed-on: https://chromium-review.googlesource.com/924381
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@{#537447}

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

@@ -32,6 +32,10 @@ source_set("tab_grid_ui") {
     "grid_item.mm",
     "grid_view_controller.h",
     "grid_view_controller.mm",
+    "tab_grid_bottom_toolbar.h",
+    "tab_grid_bottom_toolbar.mm",
+    "tab_grid_top_toolbar.h",
+    "tab_grid_top_toolbar.mm",
     "tab_grid_view_controller.h",
     "tab_grid_view_controller.mm",
   ]

ios/chrome/browser/ui/tab_grid/tab_grid_bottom_toolbar.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_BOTTOM_TOOLBAR_H_
+#define IOS_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_BOTTOM_TOOLBAR_H_
+
+#import <UIKit/UIKit.h>
+
+// Toolbar view with two text buttons and a center round button. The contents
+// have a fixed height and are pinned to the top of this view, therefore it is
+// intended to be used as a bottom toolbar.
+@interface TabGridBottomToolbar : UIView
+// These components are publicly available to allow the user to set their
+// contents, visibility and actions.
+@property(nonatomic, weak, readonly) UIButton* leadingButton;
+@property(nonatomic, weak, readonly) UIButton* trailingButton;
+@property(nonatomic, weak, readonly) UIButton* roundButton;
+
+- (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

+// 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_bottom_toolbar.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;
+// Diameter of the center round button.
+const CGFloat kRoundButtonDiameter = 44.0f;
+}  // namespace
+
+@implementation TabGridBottomToolbar
+@synthesize leadingButton = _leadingButton;
+@synthesize trailingButton = _trailingButton;
+@synthesize roundButton = _roundButton;
+
+- (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.tintColor = [UIColor whiteColor];
+    [leadingButton setTitle:@"Button" forState:UIControlStateNormal];
+
+    UIButton* trailingButton = [UIButton buttonWithType:UIButtonTypeSystem];
+    trailingButton.translatesAutoresizingMaskIntoConstraints = NO;
+    trailingButton.tintColor = [UIColor whiteColor];
+    [trailingButton setTitle:@"Button" forState:UIControlStateNormal];
+
+    UIButton* roundButton = [UIButton buttonWithType:UIButtonTypeSystem];
+    roundButton.translatesAutoresizingMaskIntoConstraints = NO;
+    roundButton.tintColor = [UIColor whiteColor];
+    [roundButton setTitle:@"Btn" forState:UIControlStateNormal];
+    roundButton.backgroundColor = [UIColor colorWithRed:63 / 255.0f
+                                                  green:81 / 255.0f
+                                                   blue:181 / 255.0f
+                                                  alpha:1.0f];
+    roundButton.layer.cornerRadius = 22.f;
+    roundButton.layer.masksToBounds = YES;
+
+    [toolbar.contentView addSubview:leadingButton];
+    [toolbar.contentView addSubview:trailingButton];
+    [toolbar.contentView addSubview:roundButton];
+    _leadingButton = leadingButton;
+    _trailingButton = trailingButton;
+    _roundButton = roundButton;
+
+    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],
+      [roundButton.widthAnchor constraintEqualToConstant:kRoundButtonDiameter],
+      [roundButton.heightAnchor constraintEqualToConstant:kRoundButtonDiameter],
+      [roundButton.centerXAnchor constraintEqualToAnchor:toolbar.centerXAnchor],
+      [roundButton.topAnchor constraintEqualToAnchor:toolbar.topAnchor],
+      [trailingButton.heightAnchor constraintEqualToConstant:kToolbarHeight],
+      [trailingButton.trailingAnchor
+          constraintEqualToAnchor:toolbar.layoutMarginsGuide.trailingAnchor],
+      [trailingButton.topAnchor constraintEqualToAnchor:toolbar.topAnchor],
+    ];
+    [NSLayoutConstraint activateConstraints:constraints];
+  }
+  return self;
+}
+
+- (CGSize)intrinsicContentSize {
+  return CGSizeMake(UIViewNoIntrinsicMetric, kToolbarHeight);
+}
+
+@end

ios/chrome/browser/ui/tab_grid/tab_grid_top_toolbar.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_TOP_TOOLBAR_H_
+#define IOS_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_TOP_TOOLBAR_H_
+
+#import <UIKit/UIKit.h>
+
+// Toolbar view with two text buttons and a segmented control. The contents have
+// a fixed height and are pinned to the bottom of this view, therefore it is
+// intended to be used as a top toolbar.
+@interface TabGridTopToolbar : UIView
+// These components are publicly available to allow the user to set their
+// contents, visibility and actions.
+@property(nonatomic, weak, readonly) UIButton* leadingButton;
+@property(nonatomic, weak, readonly) UIButton* trailingButton;
+@property(nonatomic, weak, readonly) UIView* segmentedControl;
+
+- (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

+// 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_top_toolbar.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;
+// Height of the segmented control. The segmented control should have an
+// intrinsic width.
+const CGFloat kSegmentedControlHeight = 30.0f;
+}  // namespace
+
+@implementation TabGridTopToolbar
+@synthesize leadingButton = _leadingButton;
+@synthesize trailingButton = _trailingButton;
+@synthesize segmentedControl = _segmentedControl;
+
+- (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.tintColor = [UIColor whiteColor];
+    [leadingButton setTitle:@"Button" forState:UIControlStateNormal];
+
+    UILabel* segmentedControl = [[UILabel alloc] init];
+    segmentedControl.translatesAutoresizingMaskIntoConstraints = NO;
+    segmentedControl.backgroundColor = [UIColor whiteColor];
+    segmentedControl.text = @"Segmented Control";
+    segmentedControl.layer.cornerRadius = 11.0f;
+    segmentedControl.layer.masksToBounds = YES;
+
+    UIButton* trailingButton = [UIButton buttonWithType:UIButtonTypeSystem];
+    trailingButton.translatesAutoresizingMaskIntoConstraints = NO;
+    trailingButton.tintColor = [UIColor whiteColor];
+    [trailingButton setTitle:@"Button" forState:UIControlStateNormal];
+
+    [toolbar.contentView addSubview:leadingButton];
+    [toolbar.contentView addSubview:trailingButton];
+    [toolbar.contentView addSubview:segmentedControl];
+    _leadingButton = leadingButton;
+    _trailingButton = trailingButton;
+    _segmentedControl = segmentedControl;
+
+    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],
+      [segmentedControl.heightAnchor
+          constraintEqualToConstant:kSegmentedControlHeight],
+      [segmentedControl.centerXAnchor
+          constraintEqualToAnchor:toolbar.centerXAnchor],
+      [segmentedControl.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];
+  }
+  return self;
+}
+
+- (CGSize)intrinsicContentSize {
+  return CGSizeMake(UIViewNoIntrinsicMetric, kToolbarHeight);
+}
+
+@end

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

@@ -4,6 +4,9 @@
 
 #import "ios/chrome/browser/ui/tab_grid/tab_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_top_toolbar.h"
+
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
 #endif
@@ -13,8 +16,57 @@
 #pragma mark - UIViewController
 
 - (void)viewDidLoad {
-  // Set a white background color to avoid flickers of black during startup.
-  self.view.backgroundColor = [UIColor whiteColor];
+  [super viewDidLoad];
+
+  UIView* topToolbar = [[TabGridTopToolbar alloc] init];
+  topToolbar.translatesAutoresizingMaskIntoConstraints = NO;
+
+  UIView* bottomToolbar = [[TabGridBottomToolbar alloc] init];
+  bottomToolbar.translatesAutoresizingMaskIntoConstraints = NO;
+
+  [self.view addSubview:topToolbar];
+  [self.view addSubview:bottomToolbar];
+
+  NSMutableArray* constraints = [NSMutableArray
+      arrayWithObjects:[topToolbar.topAnchor
+                           constraintEqualToAnchor:self.view.topAnchor],
+                       [topToolbar.leadingAnchor
+                           constraintEqualToAnchor:self.view.leadingAnchor],
+                       [topToolbar.trailingAnchor
+                           constraintEqualToAnchor:self.view.trailingAnchor],
+                       [bottomToolbar.bottomAnchor
+                           constraintEqualToAnchor:self.view.bottomAnchor],
+                       [bottomToolbar.leadingAnchor
+                           constraintEqualToAnchor:self.view.leadingAnchor],
+                       [bottomToolbar.trailingAnchor
+                           constraintEqualToAnchor:self.view.trailingAnchor],
+                       nil];
+  if (@available(iOS 11, *)) {
+    // SafeArea is only available in iOS 11+.
+    [constraints addObjectsFromArray:@[
+      [topToolbar.bottomAnchor
+          constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor
+                         constant:topToolbar.intrinsicContentSize.height],
+      [bottomToolbar.topAnchor
+          constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor
+                         constant:-bottomToolbar.intrinsicContentSize.height],
+    ]];
+  } else {
+    // Top and bottom layout guides are deprecated starting in iOS 11.
+    [constraints addObjectsFromArray:@[
+      [topToolbar.bottomAnchor
+          constraintEqualToAnchor:self.topLayoutGuide.bottomAnchor
+                         constant:topToolbar.intrinsicContentSize.height],
+      [bottomToolbar.topAnchor
+          constraintEqualToAnchor:self.bottomLayoutGuide.topAnchor
+                         constant:-bottomToolbar.intrinsicContentSize.height],
+    ]];
+  }
+  [NSLayoutConstraint activateConstraints:constraints];
+}
+
+- (UIStatusBarStyle)preferredStatusBarStyle {
+  return UIStatusBarStyleLightContent;
 }
 
 @end

ios/showcase/core/showcase_model.mm

@@ -76,6 +76,11 @@
       showcase::kClassForInstantiationKey : @"SCGridCellViewController",
       showcase::kUseCaseKey : @"Grid cells",
     },
+    @{
+      showcase::kClassForDisplayKey : @"TabGridViewController",
+      showcase::kClassForInstantiationKey : @"SCTabGridCoordinator",
+      showcase::kUseCaseKey : @"Full tab grid UI",
+    },
   ];
 }
 

ios/showcase/tab_grid/BUILD.gn

@@ -8,6 +8,8 @@ source_set("tab_grid") {
     "sc_grid_cell_view_controller.mm",
     "sc_grid_coordinator.h",
     "sc_grid_coordinator.mm",
+    "sc_tab_grid_coordinator.h",
+    "sc_tab_grid_coordinator.mm",
   ]
   deps = [
     "//base",

ios/showcase/tab_grid/sc_tab_grid_coordinator.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_SHOWCASE_TAB_GRID_SC_TAB_GRID_COORDINATOR_H_
+#define IOS_SHOWCASE_TAB_GRID_SC_TAB_GRID_COORDINATOR_H_
+
+#import "ios/showcase/common/navigation_coordinator.h"
+
+@interface SCTabGridCoordinator : NSObject<NavigationCoordinator>
+@end
+
+#endif  // IOS_SHOWCASE_TAB_GRID_SC_TAB_GRID_COORDINATOR_H_

ios/showcase/tab_grid/sc_tab_grid_coordinator.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/showcase/tab_grid/sc_tab_grid_coordinator.h"
+
+#import "ios/chrome/browser/ui/tab_grid/tab_grid_view_controller.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+@interface SCTabGridCoordinator ()
+@property(nonatomic, strong) TabGridViewController* viewController;
+@end
+
+@implementation SCTabGridCoordinator
+@synthesize baseViewController = _baseViewController;
+@synthesize viewController = _viewController;
+
+- (void)start {
+  self.viewController = [[TabGridViewController alloc] init];
+  self.viewController.title = @"Tab Grid";
+  [self.baseViewController setHidesBarsOnSwipe:YES];
+  [self.baseViewController pushViewController:self.viewController animated:YES];
+}
+
+@end