Peek new infobars behind existing ones

chrome/android/java/src/org/chromium/chrome/browser/infobar/InfoBarContainerLayout.java

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 package org.chromium.chrome.browser.infobar;
 
 import android.animation.Animator;
 import android.animation.AnimatorListenerAdapter;
 import android.animation.AnimatorSet;
 import android.animation.ObjectAnimator;
 import android.animation.ValueAnimator;
 import android.annotation.SuppressLint;
 import android.content.Context;
 import android.content.res.Resources;
 import android.view.Gravity;
 import android.view.MotionEvent;
 import android.view.View;
+import android.view.ViewGroup;
+import android.view.ViewGroup.LayoutParams;
 import android.widget.FrameLayout;
 
 import org.chromium.base.ObserverList;
 import org.chromium.chrome.R;
 import org.chromium.chrome.browser.infobar.InfoBarContainer.InfoBarAnimationListener;
 
 import java.util.ArrayList;
+import java.util.List;
 
 /**
  * Layout that displays infobars in a stack. Handles all the animations when adding or removing
  * infobars and when swapping infobar contents.
  *
  * The first infobar to be added is visible at the front of the stack. Later infobars peek up just
  * enough behind the front infobar to signal their existence; their contents aren't visible at all.
  * The stack has a max depth of three infobars. If additional infobars are added beyond this, they
  * won't be visible at all until infobars in front of them are dismissed.
  *
@@ skipping 70 matching lines @@
     }
 
     /**
      * Creates an empty InfoBarContainerLayout.
      */
     InfoBarContainerLayout(Context context) {
         super(context);
         Resources res = context.getResources();
         mBackInfobarHeight = res.getDimensionPixelSize(R.dimen.infobar_peeking_height);
         mFloatingBehavior = new FloatingBehavior(this);
+        mBackgroundPeekSize = getResources().getDimensionPixelSize(R.dimen.infobar_compact_size);
+        mInfoBarShadowHeight = getResources().getDimensionPixelSize(R.dimen.infobar_shadow_height);
+    }
+
+    @Override
+    public void onAttachedToWindow() {
+        super.onAttachedToWindow();
+
+        mBottomContainer = (ViewGroup) getRootView().findViewById(R.id.bottom_container);
     }
 
     /**
      * Adds an infobar to the container. The infobar appearing animation will happen after the
      * current animation, if any, finishes.
      */
     void addInfoBar(Item item) {
         if (item.isLegalDisclosure()) {
             mItems.add(0, item);
         } else {
@@ skipping 43 matching lines @@
 
     /////////////////////////////////////////
     // Implementation details
     /////////////////////////////////////////
 
     /** The maximum number of infobars visible at any time. */
     private static final int MAX_STACK_DEPTH = 3;
 
     // Animation durations.
     private static final int DURATION_SLIDE_UP_MS = 250;
+    private static final int DURATION_PEEK_MS = 500;
     private static final int DURATION_SLIDE_DOWN_MS = 250;
     private static final int DURATION_FADE_MS = 100;
     private static final int DURATION_FADE_OUT_MS = 200;
 
+    /** The height that an infobar will peek when being added behind another one. */
+    private final int mBackgroundPeekSize;
+
+    /** The height of the shadow that sits above the infobar. */
+    private final int mInfoBarShadowHeight;
+
+    /** The bottom container that the infobar container sits inside of. */
+    private ViewGroup mBottomContainer;
+
     /**
      * Base class for animations inside the InfoBarContainerLayout.
      *
      * Provides a standardized way to prepare for, run, and clean up after animations. Each subclass
      * should implement prepareAnimation(), createAnimator(), and onAnimationEnd() as needed.
      */
     private abstract class InfoBarAnimation {
         private Animator mAnimator;
 
         final boolean isStarted() {
@@ skipping 16 matching lines @@
             mAnimator = createAnimator();
             mAnimator.addListener(listener);
             mAnimator.start();
         }
 
         /**
          * Returns an animator that animates an InfoBarWrapper's y-translation from its current
          * value to endValue and updates the side shadow positions on each frame.
          */
         ValueAnimator createTranslationYAnimator(final InfoBarWrapper wrapper, float endValue) {
-            ValueAnimator animator = ValueAnimator.ofFloat(wrapper.getTranslationY(), endValue);
+            ValueAnimator animator = ObjectAnimator.ofFloat(wrapper, View.TRANSLATION_Y, endValue);
             animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                 @Override
                 public void onAnimationUpdate(ValueAnimator animation) {
-                    wrapper.setTranslationY((float) animation.getAnimatedValue());
                     mFloatingBehavior.updateShadowPosition();
                 }
             });
             return animator;
         }
 
         /**
          * Called before the animation begins. This is the time to add views to the hierarchy and
          * adjust layout parameters.
          */
@@ skipping 156 matching lines @@
         }
     }
 
     /**
      * The animation to show a back infobar. The infobar slides up behind the existing infobars, so
      * its top edge peeks out just a bit.
      */
     private class BackInfoBarAppearingAnimation extends InfoBarAnimation {
         private InfoBarWrapper mAppearingWrapper;
 
+        /**
+         * A wrapper view to shrink the height of the infobar while it is appearing behind other
+         * infobars.
+         */
+        private ViewGroup mAppearanceAnimationWrapper;
+
         BackInfoBarAppearingAnimation(Item appearingItem) {
             mAppearingWrapper = new InfoBarWrapper(getContext(), appearingItem);

[Ted C, 2017/05/18 23:01:33]

I wonder if we could achieve the same if we did something like:

new InfoBarWrapper(...) {
    void onMeasure(width, heightSpec) {
        heightSpec = MeasureSpec.makeMeasureSpec(Math.min(mInfoBarShadowHeight +
mBackgroundPeekSize, MeasureSpec.getSize(heightSpec)),
MeasureSpec.getMode(heightSpec));
        super.onMeasure(widthSpec, heightSpec);
    }
}
mAppearingWrapper.setClipChildren(true);

[mdjones, 2017/05/19 16:47:21]

This could work, but the wrapper persists beyond this animation; it stays
visible and is reused when the infobar comes into the foreground. I could make
this work but it would require adding a new flow for animation.

[Ted C, 2017/05/19 16:52:13]

Maybe we should just update InfoBarWrapper to have a mode like setIsPeeking. 
Then this would live in this class and get set here and reset in the end of the
animation.

Ideally, we keep our view hierarchy as shallow as possible.

[mdjones, 2017/05/19 17:18:20]

Done.

+            mAppearanceAnimationWrapper = new FrameLayout(getContext());
+            mAppearingWrapper.addView(mAppearanceAnimationWrapper);
+
+            mAppearanceAnimationWrapper.addView(appearingItem.getView());
+            mAppearanceAnimationWrapper.setClipChildren(true);
+            mAppearanceAnimationWrapper.setLayoutParams(new LayoutParams(
+                    LayoutParams.MATCH_PARENT, mInfoBarShadowHeight + mBackgroundPeekSize));
+
+            // Set the infobar height to WRAP_CONTENT to avoid an assert in InfobarLayout.
+            appearingItem.getView().getLayoutParams().height = LayoutParams.WRAP_CONTENT;
         }
 
         @Override
         void prepareAnimation() {
             addWrapper(mAppearingWrapper);
         }
 
         @Override
         Animator createAnimator() {
+            AnimatorSet set = new AnimatorSet();
+            List<Animator> animators = new ArrayList<>();
+
             mAppearingWrapper.setTranslationY(mAppearingWrapper.getHeight());
-            return createTranslationYAnimator(mAppearingWrapper, 0f)
-                    .setDuration(DURATION_SLIDE_UP_MS);
+            ValueAnimator animator = createTranslationYAnimator(
+                    mAppearingWrapper, mInfoBarShadowHeight - mBackgroundPeekSize);
+            animators.add(animator);
+
+            animators.add(createTranslationYAnimator(mAppearingWrapper, 0));
+
+            // When the infobar container is running this specific animation, do not clip the
+            // children so the infobars can animate outside their container.
+            set.addListener(new AnimatorListenerAdapter() {
+                @Override
+                public void onAnimationStart(Animator animation) {
+                    setHierarchyClipsChildren(false);
+                }
+
+                @Override
+                public void onAnimationEnd(Animator animation) {
+                    mAppearanceAnimationWrapper.removeView(mAppearingWrapper.getItem().getView());
+                    mAppearingWrapper.removeView(mAppearanceAnimationWrapper);
+                    setHierarchyClipsChildren(true);
+                }
+            });
+
+            set.playSequentially(animators);
+            set.setDuration(DURATION_PEEK_MS);
+
+            return set;
         }
 
         @Override
         int getAnimationType() {
             return InfoBarAnimationListener.ANIMATION_TYPE_SHOW;
         }
     }
 
     /**
+     * Used to set the relevant view hierarchy to not clip its children. This is used during
+     * animation so views can draw outside the normal bounds.
+     * @param clip Whether or not to clip child views.
+     */
+    private void setHierarchyClipsChildren(boolean clip) {
+        setClipChildren(clip);
+        ((ViewGroup) getParent()).setClipChildren(clip);
+        mBottomContainer.setClipChildren(clip);
+    }
+
+    /**
      * The animation to hide the front infobar and reveal the second-to-front infobar. The front
      * infobar slides down and off the screen. The back infobar(s) will adjust to the size of the
      * new front infobar, and then the new front infobar's contents will fade in.
      */
     private class FrontInfoBarDisappearingAndRevealingAnimation extends InfoBarAnimation {
         private InfoBarWrapper mOldFrontWrapper;
         private InfoBarWrapper mNewFrontWrapper;
         private View mNewFrontContents;
 
         @Override
@@ skipping 398 matching lines @@
             LayoutParams lp = (LayoutParams) child.getLayoutParams();
             lp.topMargin = (childCount - 1 - i) * mBackInfobarHeight;
             child.setLayoutParams(lp);
         }
     }
 
     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
         widthMeasureSpec = mFloatingBehavior.beforeOnMeasure(widthMeasureSpec);
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
-        mFloatingBehavior.afterOnMeasure(getMeasuredHeight());
+
+        // Make sure the shadow is tall enough to compensate for the peek animation of other
+        // infboars.
+        mFloatingBehavior.afterOnMeasure(getMeasuredHeight() + mBackgroundPeekSize);
     }
 
     @Override
     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
         super.onLayout(changed, left, top, right, bottom);
         mFloatingBehavior.updateShadowPosition();
 
         // Animations start after a layout has completed, at which point all views are guaranteed
         // to have valid sizes and positions.
         if (mAnimation != null && !mAnimation.isStarted()) {
@@ skipping 19 matching lines @@
 
     @Override
     public boolean onHoverEvent(MotionEvent event) {
         super.onHoverEvent(event);
         // Consume all hover events so they do not reach the ContentView. In touch exploration mode,
         // this prevents the user from interacting with the part of the ContentView behind the
         // infobars. http://crbug.com/430701
         return true;
     }
 }