[iOS] Fix toolbar flash in grid transition.

This CL fixes the flash of grid visibility under the grid toolbars that happens during the grid transitions.

The fix has two parts. The first is to fade the grid toolbar backgrounds to black (masking out the other grid cells) instead of fading them to alpha zero. The toolbar controls still fade out, however.

The second part is to move the expanding tab in the view hierarchy so that it sits on top of the tab grid, while the rest of the animating cells are inserted inside it.

The API for this is somewhat clumsy at this stage; the animation class (itself a UIView) exposes the animating cell as a property, and the animator reparents it to be above the presenting view during the animation.

Bug: 865454
Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet
Change-Id: I9ced094dfc053233f0dcbb5adb856639528c5daa
Reviewed-on: https://chromium-review.googlesource.com/1154974
Commit-Queue: Mark Cogan <marq@chromium.org>
Reviewed-by: Stepan Khapugin <stkhapugin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#579805}

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

@@ -838,19 +838,39 @@ NSUInteger GetPageIndexFromPage(TabGridPage page) {
   }
 }
 
-// Shows (by setting the alpha to 1.0) the two toolbar views and the floating
-// button. Suitable for use in animations.
+// Shows the two toolbars and the floating button. Suitable for use in
+// animations.
 - (void)showToolbars {
-  self.topToolbar.alpha = 1.0;
-  self.bottomToolbar.alpha = 1.0;
+  // To show a toolbar, set its background to be clear, and its controls to have
+  // an alpha of 1.0.
+  self.topToolbar.backgroundColor = UIColor.clearColor;
+  self.topToolbar.leadingButton.alpha = 1.0;
+  self.topToolbar.trailingButton.alpha = 1.0;
+  self.topToolbar.pageControl.alpha = 1.0;
+
+  self.bottomToolbar.backgroundColor = UIColor.clearColor;
+  self.bottomToolbar.leadingButton.alpha = 1.0;
+  self.bottomToolbar.trailingButton.alpha = 1.0;
+  self.bottomToolbar.centerButton.alpha = 1.0;
+
   self.floatingButton.alpha = 1.0;
 }
 
-// Hides (by setting the alpha to 0.0) the two toolbar views and the floating
-// button. Suitable for use in animations.
+// Hides the two toolbars and the floating button. Suitable for use in
+// animations.
 - (void)hideToolbars {
-  self.topToolbar.alpha = 0.0;
-  self.bottomToolbar.alpha = 0.0;
+  // To hide a toolbar, set its background to be black, and its controls to have
+  // an alpha of 0.0.
+  self.topToolbar.backgroundColor = UIColor.blackColor;
+  self.topToolbar.leadingButton.alpha = 0.0;
+  self.topToolbar.trailingButton.alpha = 0.0;
+  self.topToolbar.pageControl.alpha = 0.0;
+
+  self.bottomToolbar.backgroundColor = UIColor.blackColor;
+  self.bottomToolbar.leadingButton.alpha = 0.0;
+  self.bottomToolbar.trailingButton.alpha = 0.0;
+  self.bottomToolbar.centerButton.alpha = 0.0;
+
   self.floatingButton.alpha = 0.0;
 }
 

ios/chrome/browser/ui/tab_grid/transitions/grid_to_visible_tab_animator.mm

@@ -102,9 +102,16 @@
       [self.stateProvider proxyPositionForTransitionContext:transitionContext];
   [proxyContainer insertSubview:self.animation aboveSubview:viewBehindProxies];
 
+  // Reparent the active cell view so that it can animate above the presenting
+  // view while the rest of the animation is embedded inside it.
+  UIView* presentingView =
+      [transitionContext viewForKey:UITransitionContextFromViewKey];
+  [containerView insertSubview:self.animation.activeCell
+                  aboveSubview:presentingView];
+
   // Make the presented view alpha-zero; this should happen after all snapshots
   // are taken.
-  presentedView.alpha = 0.1;
+  presentedView.alpha = 0.0;
 
   [self.animation.animator addCompletion:^(UIViewAnimatingPosition position) {
     BOOL finished = (position == UIViewAnimatingPositionEnd);
@@ -116,7 +123,10 @@
 }
 
 - (void)gridTransitionAnimationDidFinish:(BOOL)finished {
-  // Clean up the animation
+  // Clean up the animation. First the active cell, then the animation itself.
+  // These views will not be re-used, so there's no need to reparent the 
+  // active cell view.
+  [self.animation.activeCell removeFromSuperview];
   [self.animation removeFromSuperview];
   // If the transition was cancelled, remove the presented view.
   // If not, remove the grid view.

ios/chrome/browser/ui/tab_grid/transitions/grid_transition_animation.h

@@ -29,6 +29,12 @@ typedef NS_ENUM(NSUInteger, GridAnimationDirection) {
 // is added as a subview of another view.
 @property(nonatomic, readonly) id<UIViewImplicitlyAnimating> animator;
 
+// The active cell view; this will be animated to or from the |expandedRect|
+// specified by the GridTransitionLayout this object is initialized with, so
+// it may be necessary to reparent |activeCell| to another view so the
+// animation can be properly layered.
+@property(nonatomic, strong) UIView* activeCell;
+
 // Designated initializer. |layout| is a GridTransitionLayout object defining
 // the layout the animation should animate to. |delegate| is an object that will
 // be informed about events in this object's animation. |direction| is the

ios/chrome/browser/ui/tab_grid/transitions/grid_transition_animation.mm

@@ -39,6 +39,9 @@ CGFloat DeviceCornerRadius() {
 @end
 
 @implementation GridTransitionAnimation
+
+@synthesize activeCell = _activeCell;
+
 @synthesize animations = _animations;
 @synthesize layout = _layout;
 @synthesize duration = _duration;
@@ -416,6 +419,7 @@ CGFloat DeviceCornerRadius() {
   }
   [self positionItemInGrid:self.layout.activeItem];
   [self.layout.activeItem.cell positionCellViews];
+  self.activeCell = self.layout.activeItem.cell;
   [self positionItemInGrid:self.layout.selectionItem];
 }