Add handleBar as part of the expanded tabstrip design changes.

The addition of a handleBar below the omnibox in the toolbar is
useful to indicate the user that the expanded tabstrip can be shown by
pulling the toolbar downwards.

Bug: 1094335
Change-Id: I03c7d8b95c81d11a90afbdf1bac9f3f6eeb9841a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2249763
Commit-Queue: Roberto Moura <mouraroberto@google.com>
Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Auto-Submit: Roberto Moura <mouraroberto@google.com>
Cr-Commit-Position: refs/heads/master@{#779963}

ios/chrome/browser/ui/toolbar/primary_toolbar_view.mm

@@ -15,6 +15,7 @@
 #import "ios/chrome/browser/ui/toolbar/public/toolbar_constants.h"
 #import "ios/chrome/browser/ui/toolbar/public/toolbar_utils.h"
 #import "ios/chrome/browser/ui/toolbar/toolbar_progress_bar.h"
+#include "ios/chrome/browser/ui/ui_feature_flags.h"
 #import "ios/chrome/browser/ui/util/dynamic_type_util.h"
 #import "ios/chrome/browser/ui/util/uikit_ui_util.h"
 #import "ios/chrome/common/ui/colors/semantic_color_names.h"
@@ -54,6 +55,9 @@
 // Separator below the toolbar, redefined as readwrite.
 @property(nonatomic, strong, readwrite) UIView* separator;
 
+// HandleBar attached to the bottom of the toolbar, redefined as readwrite.
+@property(nonatomic, strong, readwrite) UIView* handleBar;
+
 #pragma mark** Buttons in the leading stack view. **
 // Button to navigate back, redefined as readwrite.
 @property(nonatomic, strong, readwrite) ToolbarButton* backButton;
@@ -146,6 +150,9 @@
   [self setUpProgressBar];
   [self setUpCollapsedToolbarButton];
   [self setUpSeparator];
+  if (IsIPadIdiom() && base::FeatureList::IsEnabled(kExpandedTabStrip)) {
+    [self setUpHandleBar];
+  }
 
   [self setUpConstraints];
 }
@@ -288,6 +295,15 @@
   [self addSubview:self.separator];
 }
 
+// Sets the handleBar up.
+- (void)setUpHandleBar {
+  self.handleBar = [[UIView alloc] init];
+  self.handleBar.backgroundColor = [UIColor colorNamed:kToolbarShadowColor];
+  self.handleBar.layer.cornerRadius = kHandleBarHeight / 2.0;
+  self.handleBar.translatesAutoresizingMaskIntoConstraints = NO;
+  [self addSubview:self.handleBar];
+}
+
 // Sets the constraints up.
 - (void)setUpConstraints {
   id<LayoutGuideProvider> safeArea = self.safeAreaLayoutGuide;
@@ -305,7 +321,7 @@
                                       kToolbarSeparatorHeight)],
   ]];
 
-  // Leading StackView constraints
+  // Leading StackView constraints.
   [NSLayoutConstraint activateConstraints:@[
     [self.leadingStackView.leadingAnchor
         constraintEqualToAnchor:safeArea.leadingAnchor
@@ -397,6 +413,18 @@
 
   // CollapsedToolbarButton constraints.
   AddSameConstraints(self, self.collapsedToolbarButton);
+
+  // HandleBar Constraints.
+  if (self.handleBar) {
+    [NSLayoutConstraint activateConstraints:@[
+      [self.handleBar.bottomAnchor
+          constraintEqualToAnchor:self.bottomAnchor
+                         constant:-kHandleBarBottomAnchorConstant],
+      [self.handleBar.centerXAnchor constraintEqualToAnchor:self.centerXAnchor],
+      [self.handleBar.heightAnchor constraintEqualToConstant:kHandleBarHeight],
+      [self.handleBar.widthAnchor constraintEqualToConstant:kHandleBarWidth],
+    ]];
+  }
 }
 
 #pragma mark - Property accessors

ios/chrome/browser/ui/toolbar/public/toolbar_constants.h

@@ -34,6 +34,11 @@ extern const CGFloat kProgressBarHeight;
 // Height of the separator. Should be aligned to upper pixel.
 extern const CGFloat kToolbarSeparatorHeight;
 
+// HandleBar width, height, and bottom anchor constant.
+extern const CGFloat kHandleBarWidth;
+extern const CGFloat kHandleBarHeight;
+extern const CGFloat kHandleBarBottomAnchorConstant;
+
 // Toolbar Buttons.
 extern const CGFloat kAdaptiveToolbarButtonHeight;
 extern const CGFloat kAdaptiveToolbarButtonWidth;

ios/chrome/browser/ui/toolbar/public/toolbar_constants.mm

@@ -23,6 +23,10 @@ const CGFloat kProgressBarHeight = 2.0f;
 
 const CGFloat kToolbarSeparatorHeight = 0.1f;
 
+const CGFloat kHandleBarWidth = 60.0f;
+const CGFloat kHandleBarHeight = 4.5f;
+const CGFloat kHandleBarBottomAnchorConstant = 2.7f;
+
 const CGFloat kAdaptiveToolbarButtonHeight = 44.0f;
 const CGFloat kAdaptiveToolbarButtonWidth = 44.0f;
 const CGFloat kSearchButtonWidth = 70.0f;