[ios] Large Fakebox focus animation polish fixes

This fixes a few focus animation polish issues:
 * it aligns the fakebox text w/ the realbox text so that the focus
   and defocus animations appear more seamless
 * it hides the NTP header while the omnibox is focused so that it
   doesn't peek out behind the primary toolbar since it is taller,
   especially at the start of the defocus animation
 * it ensures the color of the NTP header only transitions to white in
   split toolbar mode

Bug: 1482304
Change-Id: I22a5c407c66fb33162f95b31ba0d54c1b45be78d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4922810
Reviewed-by: Chris Lu <thegreenfrog@chromium.org>
Commit-Queue: Scott Yoder <scottyoder@google.com>
Code-Coverage: findit-for-me@appspot.gserviceaccount.com <findit-for-me@appspot.gserviceaccount.com>
Cr-Commit-Position: refs/heads/main@{#1207304}

ios/chrome/browser/ui/ntp/new_tab_page_consumer.h

@@ -16,6 +16,9 @@
 // enough down that the omnibo was already pinned to the top).
 @property(nonatomic, assign, readonly) CGFloat collectionShiftingOffset;
 
+// Indicates that the omnibox has become the first responder to the keyboard.
+- (void)omniboxDidBecomeFirstResponder;
+
 // Indicates that the omnibox will stop being the first responder to the
 // keyboard.
 - (void)omniboxWillResignFirstResponder;

ios/chrome/browser/ui/ntp/new_tab_page_coordinator.mm

@@ -477,7 +477,7 @@
 }
 
 - (void)locationBarDidBecomeFirstResponder {
-  self.NTPViewController.omniboxFocused = YES;
+  [self.NTPViewController omniboxDidBecomeFirstResponder];
 }
 
 - (void)locationBarWillResignFirstResponder {

ios/chrome/browser/ui/ntp/new_tab_page_header_view.mm

@@ -58,7 +58,7 @@ const CGFloat kEndButtonOmniboxTrailingSpace = 7.0;
 const CGFloat kHintLabelFakeboxLeadingSpace = 18.0;
 const CGFloat kHintLabelOmniboxLeadingSpace = 13.0;
 const CGFloat kLargeFakeboxHintLabelFakeboxLeadingSpace = 26.0;
-const CGFloat kLargeFakeboxHintLabelOmniboxLeadingSpace = 21.0;
+const CGFloat kLargeFakeboxHintLabelOmniboxLeadingSpace = 20.0;
 
 // The amount to inset the Fakebox from the rest of the modules on Home, when
 // Large Fakebox is enabled.
@@ -116,8 +116,8 @@ UIColor* FakeboxBottomColor() {
 
 // Returns the background color for the NTP Header view. This is the color
 // that shows when the fakebox is scrolled up.
-UIColor* HeaderBackgroundColor() {
-  if (IsIOSLargeFakeboxEnabled()) {
+UIColor* HeaderBackgroundColor(id<UITraitEnvironment> environment) {
+  if (IsIOSLargeFakeboxEnabled() && IsSplitToolbarMode(environment)) {
     return [UIColor colorNamed:kBackgroundColor];
   } else if (IsMagicStackEnabled()) {
     return [UIColor colorNamed:@"ntp_background_color"];
@@ -332,7 +332,8 @@ CGFloat Interpolate(CGFloat from, CGFloat to, CGFloat percent) {
         constraintEqualToAnchor:self.fakeLocationBar.heightAnchor
                        constant:-ntp_header::kHintLabelHeightMargin],
     [self.searchHintLabel.centerYAnchor
-        constraintEqualToAnchor:self.fakeLocationBar.centerYAnchor],
+        constraintEqualToAnchor:self.fakeLocationBar.centerYAnchor
+                       constant:-1.0],
   ]];
   // Set a button the same size as the fake omnibox as the accessibility
   // element. If the hint is the only accessible element, when the fake omnibox
@@ -471,7 +472,7 @@ CGFloat Interpolate(CGFloat from, CGFloat to, CGFloat percent) {
   // that content does not appear beneath it. Since the NTP background might be
   // a gradient, the opacity must be 0 by default.
   self.backgroundColor =
-      [HeaderBackgroundColor() colorWithAlphaComponent:percent];
+      [HeaderBackgroundColor(self) colorWithAlphaComponent:percent];
 
   if (IsIOSLargeFakeboxEnabled()) {
     [self setFakeboxBackgroundWithProgress:percent];

ios/chrome/browser/ui/ntp/new_tab_page_view_controller.h

@@ -68,9 +68,6 @@
 // Whether the NTP should initially be scrolled into the feed.
 @property(nonatomic, assign) BOOL shouldScrollIntoFeed;
 
-// `YES` when notifications indicate the omnibox is focused.
-@property(nonatomic, assign) BOOL omniboxFocused;
-
 // `YES` if the omnibox should be focused on when the view appears for voice
 // over.
 @property(nonatomic, assign) BOOL focusAccessibilityOmniboxWhenViewAppears;

ios/chrome/browser/ui/ntp/new_tab_page_view_controller.mm

@@ -132,6 +132,9 @@ const CGFloat kShiftTilesUpAnimationDuration = 0.1;
 // YES if the NTP is in the middle of animating an omnibox focus.
 @property(nonatomic, assign) BOOL isAnimatingOmniboxFocus;
 
+// `YES` when notifications indicate the omnibox is focused.
+@property(nonatomic, assign) BOOL omniboxFocused;
+
 @end
 
 @implementation NewTabPageViewController {
@@ -650,6 +653,13 @@ const CGFloat kShiftTilesUpAnimationDuration = 0.1;
   return [self.headerViewController pinnedOffsetY] - [self heightAboveFeed];
 }
 
+- (void)omniboxDidBecomeFirstResponder {
+  self.omniboxFocused = YES;
+  if (IsIOSLargeFakeboxEnabled()) {
+    self.headerViewController.view.alpha = 0.01;
+  }
+}
+
 - (void)omniboxWillResignFirstResponder {
   if (IsIOSLargeFakeboxEnabled() && [self fakeOmniboxPinnedToTop]) {
     // Return early to allow the omnibox defocus animation show.
@@ -664,6 +674,9 @@ const CGFloat kShiftTilesUpAnimationDuration = 0.1;
   }
 
   self.omniboxFocused = NO;
+  if (IsIOSLargeFakeboxEnabled()) {
+    self.headerViewController.view.alpha = 1;
+  }
   [self shiftTilesDownForOmniboxDefocus];
 }