[ios] Improve toolbar in tab_grid

This CL makes visual improvements to the toolbar inside the tab grid.
- The toolbar is overlaid the tab grid, with a dark blur effect view.
- The toolbar properly responds to status bar height changes
  (such as in-call status, or horizontal no status bar).
- The tab grid contents properly inset according to status bar height changes.

Screenshots:
https://drive.google.com/open?id=0BwS6YyQeisH5MHM4czh6akxwWDQ

BUG=686770

Review-Url: https://codereview.chromium.org/2723453003
Cr-Commit-Position: refs/heads/master@{#457783}

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

@@ -35,6 +35,8 @@ source_set("tab_grid_ui") {
     "tab_grid_collection_view_layout.mm",
     "tab_grid_tab_cell.h",
     "tab_grid_tab_cell.mm",
+    "tab_grid_toolbar.h",
+    "tab_grid_toolbar.mm",
     "tab_grid_view_controller.h",
     "tab_grid_view_controller.mm",
     "ui_button+cr_tab_grid.h",

ios/clean/chrome/browser/ui/tab_grid/tab_grid_collection_view_layout.mm

@@ -12,7 +12,6 @@ namespace {
 const CGFloat kMinTabWidth = 200.0f;
 const CGFloat kMaxTabWidth = 250.0f;
 const CGFloat kInterTabSpacing = 20.0f;
-const UIEdgeInsets kSectionInset = {20.0f, 20.0f, 20.0f, 20.0f};
 }
 
 @implementation TabGridCollectionViewLayout
@@ -38,7 +37,7 @@ const UIEdgeInsets kSectionInset = {20.0f, 20.0f, 20.0f, 20.0f};
     tabWidth = (boundsSize.width - kInterTabSpacing * (columns + 1)) / columns;
   }
   self.itemSize = CGSizeMake(tabWidth, tabWidth);
-  self.sectionInset = kSectionInset;
+  self.sectionInset = UIEdgeInsetsMake(10.0f, 20.0f, 20.0f, 20.0f);
   self.minimumLineSpacing = kInterTabSpacing;
   self.minimumInteritemSpacing = kInterTabSpacing;
 }

ios/clean/chrome/browser/ui/tab_grid/tab_grid_toolbar.h

+// Copyright 2017 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_CLEAN_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_TOOLBAR_H_
+#define IOS_CLEAN_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_TOOLBAR_H_
+
+#import <UIKit/UIKit.h>
+
+// The toolbar in the tab grid, which has a done button, incognito button, and
+// an overflow menu button. The toolbar has an intrinsic height, and its buttons
+// are anchored to the bottom of the toolbar, should the parent set a larger
+// frame on the toolbar. The toolbar has a dark blur visual effect as the
+// background.
+@interface TabGridToolbar : UIView
+@end
+
+#endif  // IOS_CLEAN_CHROME_BROWSER_UI_TAB_GRID_TAB_GRID_TOOLBAR_H_

ios/clean/chrome/browser/ui/tab_grid/tab_grid_toolbar.mm

+// Copyright 2017 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/clean/chrome/browser/ui/tab_grid/tab_grid_toolbar.h"
+
+#import "ios/clean/chrome/browser/ui/tab_grid/ui_stack_view+cr_tab_grid.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+const CGFloat kToolbarHeight = 44.0f;
+}
+
+@implementation TabGridToolbar
+
+- (instancetype)init {
+  if (self = [super init]) {
+    UIVisualEffect* blurEffect =
+        [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
+    UIVisualEffectView* toolbarView =
+        [[UIVisualEffectView alloc] initWithEffect:blurEffect];
+    toolbarView.autoresizingMask =
+        UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    [self addSubview:toolbarView];
+
+    UIStackView* toolbarContent = [UIStackView cr_tabGridToolbarStackView];
+    [toolbarView.contentView addSubview:toolbarContent];
+
+    // Sets the stackview to a fixed height, anchored to the bottom of the
+    // blur view.
+    toolbarContent.translatesAutoresizingMaskIntoConstraints = NO;
+    [NSLayoutConstraint activateConstraints:@[
+      [toolbarContent.heightAnchor constraintEqualToConstant:kToolbarHeight],
+      [toolbarContent.leadingAnchor
+          constraintEqualToAnchor:toolbarView.contentView.leadingAnchor],
+      [toolbarContent.trailingAnchor
+          constraintEqualToAnchor:toolbarView.contentView.trailingAnchor],
+      [toolbarContent.bottomAnchor
+          constraintEqualToAnchor:toolbarView.contentView.bottomAnchor]
+    ]];
+  }
+  return self;
+}
+
+#pragma mark - UIView
+
+// Returns an intrinsic height so that explicit height constraints are
+// not necessary. Status bar conditional logic can be set using this
+// intrinsic size.
+- (CGSize)intrinsicContentSize {
+  return CGSizeMake(UIViewNoIntrinsicMetric, kToolbarHeight);
+}
+
+@end

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

@@ -19,17 +19,12 @@
 #import "ios/clean/chrome/browser/ui/tab_grid/mdc_floating_button+cr_tab_grid.h"
 #import "ios/clean/chrome/browser/ui/tab_grid/tab_grid_collection_view_layout.h"
 #import "ios/clean/chrome/browser/ui/tab_grid/tab_grid_tab_cell.h"
-#import "ios/clean/chrome/browser/ui/tab_grid/ui_stack_view+cr_tab_grid.h"
+#import "ios/clean/chrome/browser/ui/tab_grid/tab_grid_toolbar.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
 #endif
 
-namespace {
-// Height of toolbar in tab grid.
-const CGFloat kToolbarHeight = 64.0f;
-}
-
 @interface TabGridViewController ()<SettingsActions,
                                     TabGridActions,
                                     UICollectionViewDataSource,
@@ -37,7 +32,8 @@ const CGFloat kToolbarHeight = 64.0f;
                                     SessionCellDelegate>
 @property(nonatomic, weak) UICollectionView* grid;
 @property(nonatomic, weak) UIView* noTabsOverlay;
-@property(nonatomic, strong) MDCFloatingButton* floatingNewTabButton;
+@property(nonatomic, weak) TabGridToolbar* toolbar;
+@property(nonatomic, weak) MDCFloatingButton* floatingNewTabButton;
 @end
 
 @implementation TabGridViewController
@@ -48,20 +44,10 @@ const CGFloat kToolbarHeight = 64.0f;
 @synthesize tabCommandHandler = _tabCommandHandler;
 @synthesize grid = _grid;
 @synthesize noTabsOverlay = _noTabsOverlay;
+@synthesize toolbar = _toolbar;
 @synthesize floatingNewTabButton = _floatingNewTabButton;
 
 - (void)viewDidLoad {
-  UIView* toolbar = [UIStackView cr_tabGridToolbarStackView];
-  [self.view addSubview:toolbar];
-
-  toolbar.translatesAutoresizingMaskIntoConstraints = NO;
-  [NSLayoutConstraint activateConstraints:@[
-    [toolbar.heightAnchor constraintEqualToConstant:kToolbarHeight],
-    [toolbar.widthAnchor constraintEqualToAnchor:self.view.widthAnchor],
-    [toolbar.topAnchor constraintEqualToAnchor:self.view.topAnchor],
-    [toolbar.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor]
-  ]];
-
   TabGridCollectionViewLayout* layout =
       [[TabGridCollectionViewLayout alloc] init];
   UICollectionView* grid = [[UICollectionView alloc] initWithFrame:CGRectZero
@@ -77,21 +63,44 @@ const CGFloat kToolbarHeight = 64.0f;
       forCellWithReuseIdentifier:[TabGridTabCell identifier]];
 
   [NSLayoutConstraint activateConstraints:@[
-    [self.grid.topAnchor constraintEqualToAnchor:toolbar.bottomAnchor],
+    [self.grid.topAnchor constraintEqualToAnchor:self.view.topAnchor],
     [self.grid.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor],
     [self.grid.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
     [self.grid.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
   ]];
+
+  TabGridToolbar* toolbar = [[TabGridToolbar alloc] init];
+  self.toolbar = toolbar;
+  [self.view addSubview:self.toolbar];
+  self.toolbar.translatesAutoresizingMaskIntoConstraints = NO;
+  [NSLayoutConstraint activateConstraints:@[
+    [self.toolbar.topAnchor constraintEqualToAnchor:self.view.topAnchor],
+    [self.toolbar.heightAnchor
+        constraintEqualToAnchor:self.topLayoutGuide.heightAnchor
+                       constant:self.toolbar.intrinsicContentSize.height],
+    [self.toolbar.leadingAnchor
+        constraintEqualToAnchor:self.view.leadingAnchor],
+    [self.toolbar.trailingAnchor
+        constraintEqualToAnchor:self.view.trailingAnchor]
+  ]];
 }
 
 - (void)viewWillAppear:(BOOL)animated {
-  self.floatingNewTabButton = [MDCFloatingButton cr_tabGridNewTabButton];
+  MDCFloatingButton* floatingNewTabButton =
+      [MDCFloatingButton cr_tabGridNewTabButton];
+  self.floatingNewTabButton = floatingNewTabButton;
   [self.floatingNewTabButton
       setFrame:[MDCFloatingButton
                    cr_frameForTabGridNewTabButtonInRect:self.view.bounds]];
   [self.view addSubview:self.floatingNewTabButton];
 }
 
+- (void)viewDidLayoutSubviews {
+  [super viewDidLayoutSubviews];
+  self.grid.contentInset =
+      UIEdgeInsetsMake(CGRectGetMaxY(self.toolbar.frame), 0, 0, 0);
+}
+
 - (UIStatusBarStyle)preferredStatusBarStyle {
   return UIStatusBarStyleLightContent;
 }