[WebLayer] Let the embedder animate top controls in/out.

This CL adds an "animate" flag to Browser.setTopView that allows the
embedder to tell WebLayer to animate the top view off the screen when
setting it to null, or to animate it down from the top when setting it
to a non-null value.

The animation off the screen is achieved by removing the View from the
view tree, but keeping the bitmap layer in place, hiding the top
controls, and then deleting the layer after the animation is complete.

Bug: 1108956
Change-Id: Idb9bce6c2633ef6d1d369ccb2741ae6fd1fe43a2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2335800Reviewed-by: Scott Violet <sky@chromium.org>
Reviewed-by: Khushal <khushalsagar@chromium.org>
Reviewed-by: Bo <boliu@chromium.org>
Reviewed-by: David Bokan <bokan@chromium.org>
Commit-Queue: Robbie McElrath <rmcelrath@chromium.org>
Cr-Commit-Position: refs/heads/master@{#797826}

cc/input/browser_controls_offset_manager.cc

@@ -179,6 +179,20 @@ void BrowserControlsOffsetManager::UpdateBrowserControlsState(
     return;
   }
 
+  // Don't do anything if the currently running animations end in our desired
+  // state.
+  float animated_top_shown_ratio = top_controls_animation_.IsInitialized()
+                                       ? top_controls_animation_.FinalValue()
+                                       : TopControlsShownRatio();
+  float animated_bottom_shown_ratio =
+      bottom_controls_animation_.IsInitialized()
+          ? bottom_controls_animation_.FinalValue()
+          : BottomControlsShownRatio();
+  if (animated_top_shown_ratio == final_top_shown_ratio &&
+      animated_bottom_shown_ratio == final_bottom_shown_ratio) {
+    return;
+  }
+
   ResetAnimations();
 
   if (animate)
@@ -257,11 +271,14 @@ void BrowserControlsOffsetManager::OnBrowserControlsParamsChanged(
   //    - If the total height changed, we will run an animation from
   //      old-total-height / new-total-height to 1.
   //    - If the total height didn't change, we don't need to do anything.
-  // 3- The controls shown ratio is between the minimum and the maximum. This
-  //    would be the case if there is a show/hide animation running or there is
-  //    a scroll event and the controls are half-shown. In this case, we won't
-  //    run an animation--but update the shown ratio so the visible height
-  //    remains the same (See updated_{top,bottom}_ratio above).
+  // 3- The controls shown ratio is between the minimum and the maximum.
+  //    - If an animation is running to the old min-height, start a new
+  //      animation to min-height / total-height.
+  //    - Otherwise don't start an animation. We're either animating the
+  //      controls to their expanded state, in which case we can let that
+  //      animation continue, or we're scrolling and no animation is needed.
+  //      Update the shown ratio so the visible height remains the same (see
+  //      new_{top,bottom}_ratio above).
   //
   // When this method is called as a result of a height change,
   // TopControlsHeight(), TopControlsMinHeight(), BottomControlsHeight(), and
@@ -271,6 +288,19 @@ void BrowserControlsOffsetManager::OnBrowserControlsParamsChanged(
   bool top_controls_need_animation = animate_changes;
   bool bottom_controls_need_animation = animate_changes;
 
+  // To handle the case where the min-height changes while we're animating to
+  // the previous min-height, base our "are we at the minimum shown ratio"
+  // check on the post-animation ratio if an animation is running, rather than
+  // its current value.
+  float effective_top_shown_ratio = TopControlsShownRatio();
+  if (top_controls_animation_.IsInitialized()) {
+    effective_top_shown_ratio = top_controls_animation_.FinalValue();
+  }
+  float effective_bottom_shown_ratio = BottomControlsShownRatio();
+  if (bottom_controls_animation_.IsInitialized()) {
+    effective_bottom_shown_ratio = bottom_controls_animation_.FinalValue();
+  }
+
   float top_target_ratio;
   // We can't animate if we don't have top controls.
   if (!TopControlsHeight()) {
@@ -284,7 +314,7 @@ void BrowserControlsOffsetManager::OnBrowserControlsParamsChanged(
     // If the top controls min-height changed when they were at the minimum
     // shown ratio. For example, the min height changed from 0 to a positive
     // value while the top controls were completely hidden.
-  } else if (TopControlsShownRatio() == OldTopControlsMinShownRatio() &&
+  } else if (effective_top_shown_ratio == OldTopControlsMinShownRatio() &&
              TopControlsMinHeight() !=
                  old_browser_controls_params_.top_controls_min_height) {
     top_target_ratio = TopControlsMinShownRatio();
@@ -304,7 +334,7 @@ void BrowserControlsOffsetManager::OnBrowserControlsParamsChanged(
 
     // If the bottom controls min-height changed when they were at the minimum
     // shown ratio.
-  } else if (BottomControlsShownRatio() == OldBottomControlsMinShownRatio() &&
+  } else if (effective_bottom_shown_ratio == OldBottomControlsMinShownRatio() &&
              BottomControlsMinHeight() !=
                  old_browser_controls_params_.bottom_controls_min_height) {
     bottom_target_ratio = BottomControlsMinShownRatio();
@@ -527,16 +557,19 @@ void BrowserControlsOffsetManager::ResetAnimations() {
 void BrowserControlsOffsetManager::SetupAnimation(
     AnimationDirection direction) {
   DCHECK_NE(AnimationDirection::NO_ANIMATION, direction);
-  DCHECK(direction != AnimationDirection::HIDING_CONTROLS ||
-         TopControlsShownRatio() > 0.f);
-  DCHECK(direction != AnimationDirection::SHOWING_CONTROLS ||
-         TopControlsShownRatio() < 1.f);
+  if ((direction == AnimationDirection::HIDING_CONTROLS &&
+       TopControlsShownRatio() == TopControlsMinShownRatio()) ||
+      (direction == AnimationDirection::SHOWING_CONTROLS &&
+       TopControlsShownRatio() == 1.f)) {
+    return;
+  }
 
   if (top_controls_animation_.IsInitialized() &&
       top_controls_animation_.Direction() == direction &&
       bottom_controls_animation_.IsInitialized() &&
-      bottom_controls_animation_.Direction() == direction)
+      bottom_controls_animation_.Direction() == direction) {
     return;
+  }
 
   if (!TopControlsHeight() && !BottomControlsHeight()) {
     float ratio = direction == AnimationDirection::HIDING_CONTROLS ? 0.f : 1.f;
@@ -667,7 +700,7 @@ base::Optional<float> BrowserControlsOffsetManager::Animation::Tick(
       monotonic_time, start_time_, start_value_, stop_time_, stop_value_);
 
   if (IsComplete(value)) {
-    value = base::ClampToRange(stop_value_, min_value_, max_value_);
+    value = FinalValue();
     Reset();
   }
 
@@ -706,4 +739,8 @@ bool BrowserControlsOffsetManager::Animation::IsComplete(float value) {
           (value <= stop_value_ || value <= min_value_));
 }
 
+float BrowserControlsOffsetManager::Animation::FinalValue() {
+  return base::ClampToRange(stop_value_, min_value_, max_value_);
+}
+
 }  // namespace cc

cc/input/browser_controls_offset_manager.h

@@ -180,6 +180,10 @@ class CC_EXPORT BrowserControlsOffsetManager {
     // (clamped to min-max).
     base::Optional<float> Reset();
 
+    // Returns the value the animation will end on. This will be the stop_value
+    // passed to the constructor clamped by the currently configured bounds.
+    float FinalValue();
+
     // Return the bounds.
     float min_value() { return min_value_; }
     float max_value() { return max_value_; }

cc/input/browser_controls_offset_manager_unittest.cc

@@ -1202,5 +1202,37 @@ TEST(BrowserControlsOffsetManagerTest, PinTopControlsToContentTop) {
   manager->ScrollEnd();
 }
 
+// Tests that if the min-height changes while we're animating to the previous
+// min-height, the animation gets updated to end at the new value.
+TEST(BrowserControlsOffsetManagerTest, MinHeightChangeUpdatesAnimation) {
+  MockBrowserControlsOffsetManagerClient client(100, 0.5f, 0.5f);
+  client.SetBrowserControlsParams(
+      {/*top_controls_height=*/100, /*top_controls_min_height=*/50, 0, 0,
+       /*animate_browser_controls_height_changes=*/true, false, false});
+  BrowserControlsOffsetManager* manager = client.manager();
+
+  // Hide the controls to start an animation to min-height.
+  EXPECT_FLOAT_EQ(1.f, manager->TopControlsShownRatio());
+  manager->UpdateBrowserControlsState(BrowserControlsState::kHidden,
+                                      BrowserControlsState::kBoth, true);
+  base::TimeTicks time = base::TimeTicks::Now();
+  manager->Animate(time);
+  EXPECT_TRUE(manager->HasAnimation());
+
+  // Update the min-height to a smaller value.
+  client.SetBrowserControlsParams(
+      {/*top_controls_height=*/100, /*top_controls_min_height=*/10, 0, 0,
+       /*animate_browser_controls_height_changes=*/true, false, false});
+  EXPECT_TRUE(manager->HasAnimation());
+
+  // Make sure the animation finishes at the new min-height.
+  while (manager->HasAnimation()) {
+    time = base::TimeDelta::FromMicroseconds(100) + time;
+    manager->Animate(time);
+  }
+  EXPECT_FALSE(manager->HasAnimation());
+  EXPECT_FLOAT_EQ(0.1f, manager->TopControlsShownRatio());
+}
+
 }  // namespace
 }  // namespace cc

content/browser/renderer_host/render_widget_host_view_android.cc

@@ -231,6 +231,7 @@ RenderWidgetHostViewAndroid::RenderWidgetHostViewAndroid(
       synchronous_compositor_client_(nullptr),
       observing_root_window_(false),
       prev_top_shown_pix_(0.f),
+      prev_top_controls_pix_(0.f),
       prev_top_controls_translate_(0.f),
       prev_top_controls_min_height_offset_pix_(0.f),
       prev_bottom_shown_pix_(0.f),
@@ -1339,10 +1340,14 @@ bool RenderWidgetHostViewAndroid::UpdateControls(
   top_changed |= !cc::MathUtil::IsFloatNearlyTheSame(
       top_min_height_offset_pix, prev_top_controls_min_height_offset_pix_);
 
+  top_changed |= !cc::MathUtil::IsFloatNearlyTheSame(top_controls_pix,
+                                                     prev_top_controls_pix_);
+
   if (top_changed || !controls_initialized_)
     view_.OnTopControlsChanged(top_translate, top_shown_pix,
                                top_min_height_offset_pix);
   prev_top_shown_pix_ = top_shown_pix;
+  prev_top_controls_pix_ = top_controls_pix;
   prev_top_controls_translate_ = top_translate;
   prev_top_controls_min_height_offset_pix_ = top_min_height_offset_pix;
 

content/browser/renderer_host/render_widget_host_view_android.h

@@ -512,6 +512,7 @@ class CONTENT_EXPORT RenderWidgetHostViewAndroid
   bool controls_initialized_ = false;
 
   float prev_top_shown_pix_;
+  float prev_top_controls_pix_;
   float prev_top_controls_translate_;
   float prev_top_controls_min_height_offset_pix_;
   float prev_bottom_shown_pix_;

weblayer/browser/android/javatests/src/org/chromium/weblayer/test/BrowserControlsTest.java

@@ -248,7 +248,7 @@ public class BrowserControlsTest {
         InstrumentationActivity activity = mActivityTestRule.getActivity();
         View topContents = activity.getTopContentsContainer();
         TestThreadUtils.runOnUiThreadBlocking(
-                () -> activity.getBrowser().setTopView(topContents, minHeight, false));
+                () -> activity.getBrowser().setTopView(topContents, minHeight, false, false));
         int expectedCollapseAmount = topContents.getHeight() - minHeight;
 
         // Make sure the top controls start out taller than the min height.
@@ -286,7 +286,9 @@ public class BrowserControlsTest {
         InstrumentationActivity activity = mActivityTestRule.getActivity();
         View topContents = activity.getTopContentsContainer();
         TestThreadUtils.runOnUiThreadBlocking(
-                () -> activity.getBrowser().setTopView(topContents, 0, /*pinToContentTop=*/true));
+                ()
+                        -> activity.getBrowser().setTopView(
+                                topContents, 0, /*pinToContentTop=*/true, false));
 
         // Scroll down past the top-controls, which should collapse the top-controls and change the
         // page height.

weblayer/browser/browser_controls_container_view.cc

@@ -62,6 +62,11 @@ bool BrowserControlsContainerView::ShouldPinControlsToContentTop() {
       AttachCurrentThread(), java_browser_controls_container_view_);
 }
 
+bool BrowserControlsContainerView::ShouldAnimateBrowserControlsHeightChanges() {
+  return Java_BrowserControlsContainerView_shouldAnimateBrowserControlsHeightChanges(
+      AttachCurrentThread(), java_browser_controls_container_view_);
+}
+
 int BrowserControlsContainerView::GetContentHeightDelta() {
   if (!controls_layer_ || !web_contents())
     return 0;

weblayer/browser/browser_controls_container_view.h

@@ -44,6 +44,10 @@ class BrowserControlsContainerView : public content::WebContentsObserver {
   // contents are scrolled to the top.
   bool ShouldPinControlsToContentTop();
 
+  // Returns true if height or offset changes to the browser controls should
+  // be animated.
+  bool ShouldAnimateBrowserControlsHeightChanges();
+
   // Returns the amount of vertical space to take away from the contents.
   int GetContentHeightDelta();
 

weblayer/browser/controls_visibility_reason.h

@@ -28,6 +28,10 @@ enum class ControlsVisibilityReason {
   // If accessibility is enabled, controls are forced shown.
   kAccessibility,
 
+  // Browser controls visibility can be set to force them to animate in/out when
+  // being set or cleared.
+  kAnimation,
+
   kReasonCount,
 };
 

weblayer/browser/java/org/chromium/weblayer_private/BrowserImpl.java

@@ -191,12 +191,13 @@ public class BrowserImpl extends IBrowser.Stub implements View.OnAttachStateChan
 
     @Override
     public void setTopViewAndScrollingBehavior(
-            IObjectWrapper viewWrapper, int minHeight, boolean pinToContentTop) {
+            IObjectWrapper viewWrapper, int minHeight, boolean pinToContentTop, boolean animate) {
         StrictModeWorkaround.apply();
         if (minHeight < 0) {
             throw new IllegalArgumentException("Top view min height must be non-negative.");
         }
 
+        getViewController().setTopControlsAnimationsEnabled(animate);
         getViewController().setTopView(ObjectWrapper.unwrap(viewWrapper, View.class));
         getViewController().setTopControlsMinHeight(minHeight);
         getViewController().setPinTopControlsToContentTop(pinToContentTop);

weblayer/browser/java/org/chromium/weblayer_private/BrowserViewController.java

@@ -20,6 +20,7 @@ import org.chromium.components.browser_ui.modaldialog.AppModalPresenter;
 import org.chromium.components.browser_ui.widget.InsetObserverView;
 import org.chromium.components.embedder_support.view.ContentView;
 import org.chromium.content_public.browser.WebContents;
+import org.chromium.content_public.common.BrowserControlsState;
 import org.chromium.ui.modaldialog.DialogDismissalCause;
 import org.chromium.ui.modaldialog.ModalDialogManager;
 import org.chromium.ui.modaldialog.ModalDialogManager.ModalDialogType;
@@ -32,7 +33,7 @@ import org.chromium.ui.modelutil.PropertyModel;
  */
 @JNINamespace("weblayer")
 public final class BrowserViewController
-        implements BrowserControlsContainerView.Listener,
+        implements BrowserControlsContainerView.Delegate,
                    WebContentsGestureStateTracker.OnGestureStateChangedListener,
                    ModalDialogManager.ModalDialogManagerObserver {
     private final ContentViewRenderView mContentViewRenderView;
@@ -61,6 +62,9 @@ public final class BrowserViewController
 
     private WebContentsGestureStateTracker mGestureStateTracker;
 
+    @BrowserControlsState
+    private int mBrowserControlsConstraint = BrowserControlsState.BOTH;
+
     /**
      * The value of mCachedDoBrowserControlsShrinkRendererSize is set when
      * WebContentsGestureStateTracker begins a gesture. This is necessary as the values should only
@@ -166,6 +170,8 @@ public final class BrowserViewController
 
         if (mTab != null) {
             mTab.onDidLoseActive();
+            mTab.setBrowserControlsVisibilityConstraint(
+                    ImplControlsVisibilityReason.ANIMATION, BrowserControlsState.BOTH);
             // WebContentsGestureStateTracker is relatively cheap, easier to destroy rather than
             // update WebContents.
             mGestureStateTracker.destroy();
@@ -190,6 +196,8 @@ public final class BrowserViewController
         mTopControlsContainerView.setWebContents(webContents);
         mBottomControlsContainerView.setWebContents(webContents);
         if (mTab != null) {
+            mTab.setBrowserControlsVisibilityConstraint(
+                    ImplControlsVisibilityReason.ANIMATION, mBrowserControlsConstraint);
             mTab.onDidGainActive(mTopControlsContainerView.getNativeHandle(),
                     mBottomControlsContainerView.getNativeHandle());
             mContentView.requestFocus();
@@ -212,6 +220,10 @@ public final class BrowserViewController
         mTopControlsContainerView.setPinControlsToContentTop(pinToContentTop);
     }
 
+    public void setTopControlsAnimationsEnabled(boolean animationsEnabled) {
+        mTopControlsContainerView.setAnimationsEnabled(animationsEnabled);
+    }
+
     public void setBottomView(View view) {
         mBottomControlsContainerView.setView(view);
     }
@@ -229,10 +241,18 @@ public final class BrowserViewController
     }
 
     @Override
-    public void onBrowserControlsCompletelyExpandedOrCollapsed() {
+    public void refreshPageHeight() {
         adjustWebContentsHeightIfNecessary();
     }
 
+    @Override
+    public void setAnimationConstraint(@BrowserControlsState int constraint) {
+        mBrowserControlsConstraint = constraint;
+        if (mTab == null) return;
+        mTab.setBrowserControlsVisibilityConstraint(
+                ImplControlsVisibilityReason.ANIMATION, constraint);
+    }
+
     @Override
     public void onGestureStateChanged() {
         // This is called from |mGestureStateTracker|.
@@ -302,6 +322,10 @@ public final class BrowserViewController
                         || mBottomControlsContainerView.isControlVisible());
     }
 
+    public boolean shouldAnimateBrowserControlsHeightChanges() {
+        return mTopControlsContainerView.shouldAnimateBrowserControlsHeightChanges();
+    }
+
     /**
      * Causes the browser controls to be fully shown. Take care in calling this. Normally the
      * renderer drives the offsets, but this method circumvents that.

weblayer/browser/java/org/chromium/weblayer_private/TabImpl.java

@@ -898,6 +898,12 @@ public final class TabImpl extends ITab.Stub implements LoginPrompt.Observer {
         mBrowserControlsDelegates.get(reason).set(constraint);
     }
 
+    @BrowserControlsState
+    /* package */ int getBrowserControlsVisibilityConstraint(
+            @ImplControlsVisibilityReason int reason) {
+        return mBrowserControlsDelegates.get(reason).get();
+    }
+
     @CalledByNative
     public void showRepostFormWarningDialog() {
         BrowserViewController viewController = getViewController();
@@ -945,8 +951,10 @@ public final class TabImpl extends ITab.Stub implements LoginPrompt.Observer {
             hideFindInPageUiAndNotifyClient();
         }
 
-        // Don't animate when hiding the controls.
-        boolean animate = constraint != BrowserControlsState.HIDDEN;
+        // Don't animate when hiding the controls unless an animation was requested by
+        // BrowserControlsContainerView.
+        boolean animate = constraint != BrowserControlsState.HIDDEN
+                || mBrowser.getViewController().shouldAnimateBrowserControlsHeightChanges();
 
         // If the renderer is not controlling the offsets (possibly hung or crashed). Then this
         // needs to force the controls to show (because notification from the renderer will not

weblayer/browser/java/org/chromium/weblayer_private/interfaces/IBrowser.aidl

@@ -38,5 +38,5 @@ interface IBrowser {
   ITab createTab() = 11;
 
   void setTopViewAndScrollingBehavior(in IObjectWrapper view, in int minHeight,
-                                      in boolean pinToContentTop) = 12;
+                                      in boolean pinToContentTop, in boolean animate) = 12;
 }

weblayer/browser/tab_impl.cc

@@ -952,6 +952,17 @@ bool TabImpl::DoBrowserControlsShrinkRendererSize(
 #endif
 }
 
+bool TabImpl::ShouldAnimateBrowserControlsHeightChanges() {
+#if defined(OS_ANDROID)
+  return top_controls_container_view_
+             ? top_controls_container_view_
+                   ->ShouldAnimateBrowserControlsHeightChanges()
+             : false;
+#else
+  return false;
+#endif
+}
+
 bool TabImpl::ShouldPinTopControlsToContentTop() {
 #if defined(OS_ANDROID)
   return top_controls_container_view_

weblayer/browser/tab_impl.h

@@ -268,6 +268,7 @@ class TabImpl : public Tab,
   int GetBottomControlsHeight() override;
   bool DoBrowserControlsShrinkRendererSize(
       const content::WebContents* web_contents) override;
+  bool ShouldAnimateBrowserControlsHeightChanges() override;
   bool ShouldPinTopControlsToContentTop() override;
   bool EmbedsFullscreenWidget() override;
   void RequestMediaAccessPermission(

weblayer/public/java/org/chromium/weblayer/Browser.java

@@ -227,17 +227,20 @@ public class Browser {
      * @param pinToContentTop Whether the top-view should only be expanded when the web
      *        content is scrolled to the top. A true value makes the top-view behave as though it
      *        were inserted into the top of the page content.
+     * @param animate Whether or not any height/visibility changes that result from this call
+     *        should be animated.
      *
      * @since 86
      */
-    public void setTopView(@Nullable View view, int minHeight, boolean pinToContentTop) {
+    public void setTopView(
+            @Nullable View view, int minHeight, boolean pinToContentTop, boolean animate) {
         ThreadCheck.ensureOnUiThread();
         if (WebLayer.getSupportedMajorVersionInternal() < 86) {
             throw new UnsupportedOperationException();
         }
         try {
             mImpl.setTopViewAndScrollingBehavior(
-                    ObjectWrapper.wrap(view), minHeight, pinToContentTop);
+                    ObjectWrapper.wrap(view), minHeight, pinToContentTop, animate);
         } catch (RemoteException e) {
             throw new APICallException(e);
         }

weblayer/shell/android/BUILD.gn

@@ -20,6 +20,7 @@ android_assets("weblayer_shell_assets") {
 
 android_resources("weblayer_shell_resources") {
   sources = [
+    "shell_apk/res/layout/alt_shell_browser_controls.xml",
     "shell_apk/res/layout/bottom_controls.xml",
     "shell_apk/res/layout/main.xml",
     "shell_apk/res/layout/shell_browser_controls.xml",

weblayer/shell/android/shell_apk/res/layout/alt_shell_browser_controls.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2020 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. -->
+
+<!-- The background of the top-view must be opaque, otherwise it bleeds through to the
+     cc::Layer that mirrors the contents of the top-view. -->
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    tools:ignore="LabelFor,ContentDescription"
+    android:background="#FFc9c9c9"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:orientation="vertical"
+    android:gravity="top"
+    style="@style/ShellTheme">
+
+    <TextView
+        android:layout_height="wrap_content"
+        android:layout_width="match_parent"
+        android:text="This is a top view" />
+
+    <TextView
+        android:layout_height="wrap_content"
+        android:layout_width="match_parent"
+        android:text="It's taller than the default" />
+
+    <TextView
+        android:layout_height="wrap_content"
+        android:layout_width="match_parent"
+        android:text="Since it has three lines" />
+
+</LinearLayout>

weblayer/shell/android/shell_apk/res/menu/controls_menu.xml

@@ -6,6 +6,9 @@
 <menu xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     tools:ignore="HardcodedText">
+    <item android:id="@+id/toggle_top_view_id"
+        android:checkable="true"
+        android:title="Top view" />
     <item android:id="@+id/toggle_bottom_view_id"
           android:checkable="true"
         android:title="Bottom view" />
@@ -15,4 +18,10 @@
     <item android:id="@+id/toggle_top_view_pinned_to_top_id"
         android:checkable="true"
         android:title="Pin top view to content top" />
+    <item android:id="@+id/toggle_alt_top_view_id"
+        android:checkable="true"
+        android:title="Use alternative top view" />
+    <item android:id="@+id/toggle_controls_animations_id"
+        android:checkable="true"
+        android:title="Animate browser controls changes" />
 </menu>

weblayer/shell/android/shell_apk/src/org/chromium/weblayer/shell/WebLayerShellActivity.java

@@ -132,14 +132,18 @@ public class WebLayerShellActivity extends FragmentActivity {
     private EditText mEditUrlView;
     private ProgressBar mLoadProgressBar;
     private View mTopContentsContainer;
+    private View mAltTopContentsContainer;
     private TabListCallback mTabListCallback;
     private List<Tab> mPreviousTabList = new ArrayList<>();
     private Runnable mExitFullscreenRunnable;
+    private boolean mIsTopViewVisible = true;
     private View mBottomView;
     private int mTopViewMinHeight;
     private boolean mTopViewPinnedToContentTop;
+    private boolean mAnimateControlsChanges;
     private boolean mInIncognitoMode;
     private boolean mEnableWebViewCompat;
+    private boolean mEnableAltTopView;
 
     @Override
     protected void onCreate(final Bundle savedInstanceState) {
@@ -155,6 +159,8 @@ public class WebLayerShellActivity extends FragmentActivity {
         ImageButton controlsMenuButton = (ImageButton) findViewById(R.id.controls_menu_button);
         controlsMenuButton.setOnClickListener(this::onControlsMenuButtonClicked);
 
+        mAltTopContentsContainer =
+                LayoutInflater.from(this).inflate(R.layout.alt_shell_browser_controls, null);
         mTopContentsContainer =
                 LayoutInflater.from(this).inflate(R.layout.shell_browser_controls, null);
         mUrlViewContainer = mTopContentsContainer.findViewById(R.id.url_view_container);
@@ -253,6 +259,7 @@ public class WebLayerShellActivity extends FragmentActivity {
     private void onControlsMenuButtonClicked(View controlsMenuButtonView) {
         PopupMenu popup = new PopupMenu(WebLayerShellActivity.this, controlsMenuButtonView);
         popup.getMenuInflater().inflate(R.menu.controls_menu, popup.getMenu());
+        popup.getMenu().findItem(R.id.toggle_top_view_id).setChecked(mIsTopViewVisible);
         popup.getMenu().findItem(R.id.toggle_bottom_view_id).setChecked(mBottomView != null);
         popup.getMenu()
                 .findItem(R.id.toggle_top_view_min_height_id)
@@ -260,7 +267,17 @@ public class WebLayerShellActivity extends FragmentActivity {
         popup.getMenu()
                 .findItem(R.id.toggle_top_view_pinned_to_top_id)
                 .setChecked(mTopViewPinnedToContentTop);
+        popup.getMenu().findItem(R.id.toggle_alt_top_view_id).setChecked(mEnableAltTopView);
+        popup.getMenu()
+                .findItem(R.id.toggle_controls_animations_id)
+                .setChecked(mAnimateControlsChanges);
         popup.setOnMenuItemClickListener(item -> {
+            if (item.getItemId() == R.id.toggle_top_view_id) {
+                mIsTopViewVisible = !mIsTopViewVisible;
+                updateTopView();
+                return true;
+            }
+
             if (item.getItemId() == R.id.toggle_bottom_view_id) {
                 if (mBottomView == null) {
                     mBottomView = LayoutInflater.from(this).inflate(R.layout.bottom_controls, null);
@@ -283,13 +300,30 @@ public class WebLayerShellActivity extends FragmentActivity {
                 return true;
             }
 
+            if (item.getItemId() == R.id.toggle_alt_top_view_id) {
+                mEnableAltTopView = !mEnableAltTopView;
+                updateTopView();
+                return true;
+            }
+
+            if (item.getItemId() == R.id.toggle_controls_animations_id) {
+                mAnimateControlsChanges = !mAnimateControlsChanges;
+                updateTopView();
+                return true;
+            }
+
             return false;
         });
         popup.show();
     }
 
     private void updateTopView() {
-        mBrowser.setTopView(mTopContentsContainer, mTopViewMinHeight, mTopViewPinnedToContentTop);
+        View topView = null;
+        if (mIsTopViewVisible) {
+            topView = mEnableAltTopView ? mAltTopContentsContainer : mTopContentsContainer;
+        }
+        mBrowser.setTopView(
+                topView, mTopViewMinHeight, mTopViewPinnedToContentTop, mAnimateControlsChanges);
     }
 
     @Override