Add cancel button for location bar edit

This CL adds a cancel button to stop editing the location bar.
It also adds the appearance/disappearance animation.

Bug: 804750
Cq-Include-Trybots: master.tryserver.chromium.mac:ios-simulator-cronet;master.tryserver.chromium.mac:ios-simulator-full-configs
Change-Id: Ibb9723fe3df94e1f43b332116128518c309b817b
Reviewed-on: https://chromium-review.googlesource.com/897364
Commit-Queue: Gauthier Ambard <gambard@chromium.org>
Reviewed-by: Louis Romero <lpromero@chromium.org>
Cr-Commit-Position: refs/heads/master@{#533703}

ios/chrome/browser/ui/orchestrator/omnibox_focus_orchestrator.mm

@@ -40,16 +40,12 @@
     UIViewPropertyAnimator* slowAnimator = [[UIViewPropertyAnimator alloc]
         initWithDuration:ios::material::kDuration2
                    curve:UIViewAnimationCurveEaseInOut
-              animations:^{
-                expansion();
-              }];
+              animations:expansion];
 
     UIViewPropertyAnimator* fastAnimator = [[UIViewPropertyAnimator alloc]
         initWithDuration:ios::material::kDuration1
                    curve:UIViewAnimationCurveEaseInOut
-              animations:^{
-                hideControls();
-              }];
+              animations:hideControls];
 
     [slowAnimator startAnimation];
     [fastAnimator startAnimation];
@@ -62,7 +58,39 @@
 // Updates the UI elements reflect the omnibox unfocused state, |animated| or
 // not.
 - (void)unfocusOmniboxAnimated:(BOOL)animated {
-  // TODO(crbug.com/801082): Implement that.
+  void (^contraction)() = ^{
+    [self.toolbarAnimatee contractLocationBar];
+  };
+
+  void (^hideCancel)() = ^{
+    [self.toolbarAnimatee hideCancelButton];
+  };
+
+  void (^showControls)() = ^{
+    [self.toolbarAnimatee showControlButtons];
+  };
+
+  if (animated) {
+    UIViewPropertyAnimator* slowAnimator = [[UIViewPropertyAnimator alloc]
+        initWithDuration:ios::material::kDuration2
+                   curve:UIViewAnimationCurveEaseInOut
+              animations:contraction];
+    [slowAnimator addCompletion:^(UIViewAnimatingPosition finalPosition) {
+      hideCancel();
+    }];
+
+    UIViewPropertyAnimator* fastAnimator = [[UIViewPropertyAnimator alloc]
+        initWithDuration:ios::material::kDuration1
+                   curve:UIViewAnimationCurveEaseInOut
+              animations:showControls];
+
+    [slowAnimator startAnimation];
+    [fastAnimator startAnimation];
+  } else {
+    contraction();
+    showControls();
+    hideCancel();
+  }
 }
 
 @end

ios/chrome/browser/ui/toolbar/adaptive/primary_toolbar_view.h

@@ -39,6 +39,16 @@
 // It should only contain ToolbarButtons.
 @property(nonatomic, strong, readonly) UIStackView* trailingStackView;
 
+// Button to cancel the edit of the location bar.
+@property(nonatomic, strong, readonly) UIButton* cancelButton;
+
+// Constraints to be activated when the location bar is focused.
+@property(nonatomic, strong, readonly)
+    NSMutableArray<NSLayoutConstraint*>* focusedConstraints;
+// Constraints to be activated when the location bar is unfocused.
+@property(nonatomic, strong, readonly)
+    NSMutableArray<NSLayoutConstraint*>* unfocusedConstraints;
+
 // Sets all the subviews and constraints of the view. The |topSafeAnchor| needs
 // to be set before calling this.
 - (void)setUp;

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

@@ -63,6 +63,18 @@
 // Button to display the tools menu, redefined as readwrite.
 @property(nonatomic, strong, readwrite) ToolbarToolsMenuButton* toolsMenuButton;
 
+// Button to cancel the edit of the location bar, redefined as readwrite.
+@property(nonatomic, strong, readwrite) UIButton* cancelButton;
+
+// Constraints to be activated when the location bar is focused, redefined as
+// readwrite.
+@property(nonatomic, strong, readwrite)
+    NSMutableArray<NSLayoutConstraint*>* focusedConstraints;
+// Constraints to be activated when the location bar is unfocused, redefined as
+// readwrite.
+@property(nonatomic, strong, readwrite)
+    NSMutableArray<NSLayoutConstraint*>* unfocusedConstraints;
+
 @end
 
 @implementation PrimaryToolbarView
@@ -86,6 +98,9 @@
 @synthesize shareButton = _shareButton;
 @synthesize bookmarkButton = _bookmarkButton;
 @synthesize toolsMenuButton = _toolsMenuButton;
+@synthesize cancelButton = _cancelButton;
+@synthesize focusedConstraints = _focusedConstraints;
+@synthesize unfocusedConstraints = _unfocusedConstraints;
 
 #pragma mark - Public
 
@@ -107,6 +122,7 @@
   self.translatesAutoresizingMaskIntoConstraints = NO;
 
   [self setUpBlurredBackground];
+  [self setUpCancelButton];
   [self setUpLocationBar];
   [self setUpLeadingStackView];
   [self setUpTrailingStackView];
@@ -133,6 +149,13 @@
   AddSameConstraints(blur, self);
 }
 
+// Sets the cancel button to stop editing the location bar.
+- (void)setUpCancelButton {
+  self.cancelButton = [self.buttonFactory cancelButton];
+  self.cancelButton.translatesAutoresizingMaskIntoConstraints = NO;
+  [self addSubview:self.cancelButton];
+}
+
 // Sets the location bar container and its view if present.
 - (void)setUpLocationBar {
   self.locationBarContainer = [[UIView alloc] init];
@@ -199,6 +222,8 @@
 // Sets the constraints up.
 - (void)setUpConstraints {
   id<LayoutGuideProvider> safeArea = SafeAreaLayoutGuideForView(self);
+  self.focusedConstraints = [NSMutableArray array];
+  self.unfocusedConstraints = [NSMutableArray array];
 
   // Leading StackView constraints
   [NSLayoutConstraint activateConstraints:@[
@@ -217,8 +242,6 @@
   [NSLayoutConstraint activateConstraints:@[
     [self.locationBarContainer.leadingAnchor
         constraintEqualToAnchor:self.leadingStackView.trailingAnchor],
-    [self.locationBarContainer.trailingAnchor
-        constraintEqualToAnchor:self.trailingStackView.leadingAnchor],
     [self.locationBarContainer.bottomAnchor
         constraintEqualToAnchor:self.bottomAnchor
                        constant:-kLocationBarVerticalMargin],
@@ -234,12 +257,34 @@
     [self.trailingStackView.heightAnchor
         constraintEqualToConstant:kToolbarHeight],
   ]];
+  [self.unfocusedConstraints
+      addObject:[self.trailingStackView.leadingAnchor
+                    constraintEqualToAnchor:self.locationBarContainer
+                                                .trailingAnchor]];
+  [self.focusedConstraints
+      addObject:[self.trailingStackView.leadingAnchor
+                    constraintEqualToAnchor:self.cancelButton.trailingAnchor]];
 
   // locationBarView constraints, if present.
   if (self.locationBarView) {
     AddSameConstraints(self.locationBarContainer, self.locationBarView);
   }
 
+  // Cancel button constraints.
+  [NSLayoutConstraint activateConstraints:@[
+    [self.cancelButton.topAnchor
+        constraintEqualToAnchor:self.trailingStackView.topAnchor],
+    [self.cancelButton.bottomAnchor
+        constraintEqualToAnchor:self.trailingStackView.bottomAnchor],
+  ]];
+  [self.focusedConstraints
+      addObject:[self.cancelButton.leadingAnchor
+                    constraintEqualToAnchor:self.locationBarContainer
+                                                .trailingAnchor]];
+  [self.unfocusedConstraints
+      addObject:[self.cancelButton.leadingAnchor
+                    constraintEqualToAnchor:self.trailingAnchor]];
+
   // ProgressBar constraints.
   [NSLayoutConstraint activateConstraints:@[
     [self.progressBar.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
@@ -249,6 +294,8 @@
     [self.progressBar.heightAnchor
         constraintEqualToConstant:kProgressBarHeight],
   ]];
+
+  [NSLayoutConstraint activateConstraints:self.unfocusedConstraints];
 }
 
 #pragma mark - Property accessors

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

@@ -172,19 +172,25 @@
 #pragma mark - ToolbarAnimatee
 
 - (void)expandLocationBar {
-  // TODO(crbug.com/804749): Implement this.
+  [NSLayoutConstraint deactivateConstraints:self.view.unfocusedConstraints];
+  [NSLayoutConstraint activateConstraints:self.view.focusedConstraints];
+  [self.view layoutIfNeeded];
+  // TODO(crbug.com/804749): Change location bar constraints.
 }
 
 - (void)contractLocationBar {
-  // TODO(crbug.com/804749): Implement this.
+  [NSLayoutConstraint deactivateConstraints:self.view.focusedConstraints];
+  [NSLayoutConstraint activateConstraints:self.view.unfocusedConstraints];
+  [self.view layoutIfNeeded];
+  // TODO(crbug.com/804749): Change location bar constraints.
 }
 
 - (void)showCancelButton {
-  // TODO(crbug.com/804750): Implement this.
+  self.view.cancelButton.hidden = NO;
 }
 
 - (void)hideCancelButton {
-  // TODO(crbug.com/804750): Implement this.
+  self.view.cancelButton.hidden = YES;
 }
 
 - (void)showControlButtons {

ios/chrome/browser/ui/toolbar/clean/toolbar_button_factory.h

@@ -70,6 +70,8 @@
 // LocationBar LeadingButton. Currently used for the incognito icon when the
 // Toolbar is expanded on incognito mode. It can return nil.
 - (ToolbarButton*)locationBarLeadingButton;
+// Button to cancel the edit of the location bar.
+- (UIButton*)cancelButton;
 
 // Returns images for Voice Search in an array representing the NORMAL/PRESSED
 // state

ios/chrome/browser/ui/toolbar/clean/toolbar_button_factory.mm

@@ -348,6 +348,24 @@ const int styleCount = 2;
   return locationBarLeadingButton;
 }
 
+- (UIButton*)cancelButton {
+  UIButton* cancelButton = [UIButton buttonWithType:UIButtonTypeSystem];
+  [cancelButton setTitle:l10n_util::GetNSString(IDS_CANCEL)
+                forState:UIControlStateNormal];
+  [cancelButton setContentHuggingPriority:UILayoutPriorityDefaultHigh
+                                  forAxis:UILayoutConstraintAxisHorizontal];
+  [cancelButton
+      setContentCompressionResistancePriority:UILayoutPriorityRequired
+                                      forAxis:UILayoutConstraintAxisHorizontal];
+  cancelButton.contentEdgeInsets = UIEdgeInsetsMake(
+      0, kCancelButtonHorizontalInset, 0, kCancelButtonHorizontalInset);
+  cancelButton.hidden = YES;
+  [cancelButton addTarget:self.dispatcher
+                   action:@selector(cancelOmniboxEdit)
+         forControlEvents:UIControlEventTouchUpInside];
+  return cancelButton;
+}
+
 #pragma mark - Helpers
 
 // Sets the |button| width to |width| with a priority of

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

@@ -49,6 +49,7 @@ extern const CGFloat kIncognitoToolbarButtonTitleHighlightedColor;
 extern const CGFloat kBackButtonImageInset;
 extern const CGFloat kForwardButtonImageInset;
 extern const CGFloat kLeadingLocationBarButtonImageInset;
+extern const CGFloat kCancelButtonHorizontalInset;
 
 // Maximum number of tabs displayed by the button containing the tab count.
 extern const NSInteger kShowTabStripButtonMaxTabCount;

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

@@ -38,6 +38,7 @@ const CGFloat kIncognitoToolbarButtonTitleHighlightedColor = 0x888a8c;
 const CGFloat kBackButtonImageInset = -9;
 const CGFloat kForwardButtonImageInset = -7;
 const CGFloat kLeadingLocationBarButtonImageInset = 15;
+const CGFloat kCancelButtonHorizontalInset = 8;
 
 const NSInteger kShowTabStripButtonMaxTabCount = 99;