[iOS] Fade in the toolbar separator on iPad NTP

This CL changes the separator displayed on the iPad NTP. Instead of
being always visible the separator is now fade in when the fake
omnibox is reaching the real omnibox.

Bug: 968520
Change-Id: I5421094499a57d023d1a5c533bab68a4a76b6e95
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1643570
Auto-Submit: Gauthier Ambard <gambard@chromium.org>
Commit-Queue: Justin Cohen <justincohen@chromium.org>
Reviewed-by: Justin Cohen <justincohen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#665937}

ios/chrome/browser/ui/toolbar/adaptive_toolbar_view.h

@@ -43,6 +43,8 @@
 @property(nonatomic, strong, readonly) ToolbarToolsMenuButton* toolsMenuButton;
 // Button to display the tools menu.
 @property(nonatomic, strong, readonly) ToolbarButton* omniboxButton;
+// Separator between the toolbar and the content.
+@property(nonatomic, strong, readonly) UIView* separator;
 
 @end
 

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

@@ -57,6 +57,9 @@
 // Progress bar displayed below the toolbar, redefined as readwrite.
 @property(nonatomic, strong, readwrite) ToolbarProgressBar* progressBar;
 
+// Separator below the toolbar, redefined as readwrite.
+@property(nonatomic, strong, readwrite) UIView* separator;
+
 #pragma mark** Buttons in the leading stack view. **
 // Button to navigate back, redefined as readwrite.
 @property(nonatomic, strong, readwrite) ToolbarButton* backButton;
@@ -151,21 +154,7 @@
   [self setUpLocationBar];
   [self setUpProgressBar];
   [self setUpCollapsedToolbarButton];
-
-  // Add the separator here as there is no need to have a property.
-  UIView* separator = [[UIView alloc] init];
-  separator.backgroundColor = [UIColor colorWithWhite:0
-                                                alpha:kToolbarSeparatorAlpha];
-  separator.translatesAutoresizingMaskIntoConstraints = NO;
-  [self addSubview:separator];
-  [NSLayoutConstraint activateConstraints:@[
-    [separator.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
-    [separator.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
-    [separator.topAnchor constraintEqualToAnchor:self.bottomAnchor],
-    [separator.heightAnchor
-        constraintEqualToConstant:ui::AlignValueToUpperPixel(
-                                      kToolbarSeparatorHeight)],
-  ]];
+  [self setUpSeparator];
 
   [self setUpConstraints];
 }
@@ -322,6 +311,15 @@
   [self addSubview:self.collapsedToolbarButton];
 }
 
+// Sets the separator up.
+- (void)setUpSeparator {
+  self.separator = [[UIView alloc] init];
+  self.separator.backgroundColor =
+      [UIColor colorWithWhite:0 alpha:kToolbarSeparatorAlpha];
+  self.separator.translatesAutoresizingMaskIntoConstraints = NO;
+  [self addSubview:self.separator];
+}
+
 // Sets the constraints up.
 - (void)setUpConstraints {
   id<LayoutGuideProvider> safeArea = self.safeAreaLayoutGuide;
@@ -329,6 +327,16 @@
   self.contractedConstraints = [NSMutableArray array];
   self.contractedNoMarginConstraints = [NSMutableArray array];
 
+  // Separator constraints.
+  [NSLayoutConstraint activateConstraints:@[
+    [self.separator.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
+    [self.separator.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
+    [self.separator.topAnchor constraintEqualToAnchor:self.bottomAnchor],
+    [self.separator.heightAnchor
+        constraintEqualToConstant:ui::AlignValueToUpperPixel(
+                                      kToolbarSeparatorHeight)],
+  ]];
+
   // Leading StackView constraints
   [NSLayoutConstraint activateConstraints:@[
     [self.leadingStackView.leadingAnchor

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

@@ -89,6 +89,7 @@
                (progress - 1));
   }
   self.view.locationBarContainer.alpha = progress;
+  self.view.separator.alpha = progress;
 
   // When the locationBarContainer is hidden, show the |fakeOmniboxTarget|.
   if (progress == 0 && !self.view.fakeOmniboxTarget) {

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

@@ -34,6 +34,9 @@ const CGFloat kToolsMenuOffset = -7;
 // The blur visual effect view, redefined as readwrite.
 @property(nonatomic, strong, readwrite) UIView* blur;
 
+// Separator above the toolbar, redefined as readwrite.
+@property(nonatomic, strong, readwrite) UIView* separator;
+
 // The stack view containing the buttons.
 @property(nonatomic, strong) UIStackView* stackView;
 
@@ -145,11 +148,11 @@ const CGFloat kToolsMenuOffset = -7;
     self.toolsMenuButton
   ];
 
-  UIView* separator = [[UIView alloc] init];
-  separator.backgroundColor = [UIColor colorWithWhite:0
-                                                alpha:kToolbarSeparatorAlpha];
-  separator.translatesAutoresizingMaskIntoConstraints = NO;
-  [self addSubview:separator];
+  self.separator = [[UIView alloc] init];
+  self.separator.backgroundColor =
+      [UIColor colorWithWhite:0 alpha:kToolbarSeparatorAlpha];
+  self.separator.translatesAutoresizingMaskIntoConstraints = NO;
+  [self addSubview:self.separator];
 
   self.stackView =
       [[UIStackView alloc] initWithArrangedSubviews:self.allButtons];
@@ -170,10 +173,10 @@ const CGFloat kToolsMenuOffset = -7;
         constraintEqualToAnchor:self.topAnchor
                        constant:kBottomButtonsBottomMargin],
 
-    [separator.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
-    [separator.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
-    [separator.bottomAnchor constraintEqualToAnchor:self.topAnchor],
-    [separator.heightAnchor
+    [self.separator.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
+    [self.separator.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
+    [self.separator.bottomAnchor constraintEqualToAnchor:self.topAnchor],
+    [self.separator.heightAnchor
         constraintEqualToConstant:ui::AlignValueToUpperPixel(
                                       kToolbarSeparatorHeight)],
   ]];