[Start Surface] Refactor Task Surface Scrolling Behavior using AppBarLayout

CL has no user visible changes.

Restructuring TasksSurface with AppBarLayout.
Adapting StartSurface and sub components to work with new layout.

Before: RecyclerView inside NestedScrollView did not recycle views.
Now: RecyclerView recycles views inside CoordinatorLayout.

Bug: 1000295

Change-Id: I73b01f1f4efcb7e263894b64e2b0f81a07229f23
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1865399
Commit-Queue: Mia Glaese <glamia@chromium.org>
Reviewed-by: Yusuf Ozuysal <yusufo@chromium.org>
Reviewed-by: Ganggui Tang <gogerald@chromium.org>
Cr-Commit-Position: refs/heads/master@{#707970}

chrome/android/features/start_surface/internal/java/res/layout/ss_explore_scroll_container.xml

-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright 2019 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. -->
-
-<android.support.v4.widget.NestedScrollView
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:fillViewport="true"
-    android:background="@color/modern_primary_color"
-    android:visibility="gone" />

chrome/android/features/start_surface/internal/java/src/org/chromium/chrome/features/start_surface/ExploreSurfaceCoordinator.java

@@ -5,13 +5,10 @@
 package org.chromium.chrome.features.start_surface;
 
 import android.app.Activity;
-import android.support.v4.widget.NestedScrollView;
 import android.view.LayoutInflater;
 import android.view.MotionEvent;
 import android.view.ViewGroup;
 
-import androidx.annotation.Nullable;
-
 import com.google.android.libraries.feed.api.client.stream.Stream;
 
 import org.chromium.chrome.browser.ChromeActivity;
@@ -47,18 +44,12 @@ class ExploreSurfaceCoordinator implements FeedSurfaceCoordinator.FeedSurfaceDel
     }
 
     ExploreSurfaceCoordinator(ChromeActivity activity, ViewGroup parentView,
-            @Nullable ViewGroup headerContainerView, PropertyModel containerPropertyModel) {
+            PropertyModel containerPropertyModel, boolean hasHeader) {
         mActivity = activity;
-        mHasHeader = (headerContainerView != null);
+        mHasHeader = hasHeader;
 
-        mPropertyModelChangeProcessor = PropertyModelChangeProcessor.create(containerPropertyModel,
-                new ExploreSurfaceViewBinder.ViewHolder(parentView,
-                        !mHasHeader
-                                ? null
-                                : (NestedScrollView) LayoutInflater.from(activity).inflate(
-                                        R.layout.ss_explore_scroll_container, parentView, false),
-                        headerContainerView),
-                ExploreSurfaceViewBinder::bind);
+        mPropertyModelChangeProcessor = PropertyModelChangeProcessor.create(
+                containerPropertyModel, parentView, ExploreSurfaceViewBinder::bind);
         mFeedSurfaceCreator = new FeedSurfaceCreator() {
             @Override
             public FeedSurfaceCoordinator createFeedSurfaceCoordinator(boolean isInNightMode) {

chrome/android/features/start_surface/internal/java/src/org/chromium/chrome/features/start_surface/ExploreSurfaceViewBinder.java

@@ -6,17 +6,14 @@ package org.chromium.chrome.features.start_surface;
 
 import static org.chromium.chrome.features.start_surface.StartSurfaceProperties.BOTTOM_BAR_HEIGHT;
 import static org.chromium.chrome.features.start_surface.StartSurfaceProperties.FEED_SURFACE_COORDINATOR;
+import static org.chromium.chrome.features.start_surface.StartSurfaceProperties.IS_BOTTOM_BAR_VISIBLE;
 import static org.chromium.chrome.features.start_surface.StartSurfaceProperties.IS_EXPLORE_SURFACE_VISIBLE;
 import static org.chromium.chrome.features.start_surface.StartSurfaceProperties.IS_SHOWING_OVERVIEW;
 import static org.chromium.chrome.features.start_surface.StartSurfaceProperties.TOP_BAR_HEIGHT;
 
-import android.support.v4.widget.NestedScrollView;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
-import android.widget.FrameLayout.LayoutParams;
-
-import androidx.annotation.Nullable;
 
 import org.chromium.ui.UiUtils;
 import org.chromium.ui.modelutil.PropertyKey;
@@ -24,76 +21,39 @@ import org.chromium.ui.modelutil.PropertyModel;
 
 /** Binder for the explore surface. */
 class ExploreSurfaceViewBinder {
-    /**
-     * The view holder holds the parent view, the possible scroll container and header container
-     * view.
-     */
-    public static class ViewHolder {
-        public final ViewGroup parentView;
-        @Nullable
-        public final NestedScrollView scrollContainer;
-        @Nullable
-        public final ViewGroup headerContainerView;
-
-        ViewHolder(ViewGroup parentView, @Nullable NestedScrollView scrollContainer,
-                @Nullable ViewGroup headerContainerView) {
-            assert (scrollContainer == null) == (headerContainerView == null);
-            this.parentView = parentView;
-            this.scrollContainer = scrollContainer;
-            this.headerContainerView = headerContainerView;
-        }
-    }
-
-    public static void bind(PropertyModel model, ViewHolder view, PropertyKey propertyKey) {
+    public static void bind(PropertyModel model, ViewGroup parentView, PropertyKey propertyKey) {
         if (propertyKey == IS_EXPLORE_SURFACE_VISIBLE) {
-            setVisibility(view, model,
+            setVisibility(parentView, model,
                     model.get(IS_EXPLORE_SURFACE_VISIBLE) && model.get(IS_SHOWING_OVERVIEW));
         } else if (propertyKey == IS_SHOWING_OVERVIEW) {
-            setVisibility(view, model,
+            setVisibility(parentView, model,
                     model.get(IS_EXPLORE_SURFACE_VISIBLE) && model.get(IS_SHOWING_OVERVIEW));
         }
     }
 
     /**
      * Set the explore surface visibility.
-     * Note that if the {@link ViewHolder.headerContainerView} is not null, the feed surface view is
-     * added to the {@link ViewHolder.headerContainerView}. This is for the alignment between the
-     * {@link ViewHolder.headerContainerView} and the feed surface view to avoid another level of
-     * view hiearachy. Then {@link ViewHolder.headerContainerView} is added to {@link
-     * ViewHolder.scrollContainer}. This allows the {@link ViewHolder.headerContainerView} scrolls
-     * together with the feed surface view. Finally, we add the {@link ViewHolder.scrollContainer}
-     * to the {@link ViewHolder.parentView}. If the {@link ViewHolder.headerContainerView} is null,
-     * then the feed surface view is added to the {@link ViewHolder.parentView} directly.
-     * @param viewHolder The view holder holds the parent and possible the header container view.
+     * @param parentView The parent view of the feed.
      * @param model The property model.
      * @param isShowing Whether set the surface to visible or not.
      */
+    // TODO(crbug.com/982018): Attach feed directly to TasksSurfaceContainerView
+    // and get rid of tasks_surface_body to improve performance.
     private static void setVisibility(
-            ViewHolder viewHolder, PropertyModel model, boolean isShowing) {
+            ViewGroup parentView, PropertyModel model, boolean isShowing) {
         if (model.get(FEED_SURFACE_COORDINATOR) == null) return;
 
-        if (viewHolder.headerContainerView != null) {
-            if (viewHolder.scrollContainer.getParent() == null) {
-                viewHolder.scrollContainer.addView(viewHolder.headerContainerView);
-                FrameLayout.LayoutParams layoutParams =
-                        (FrameLayout.LayoutParams) viewHolder.scrollContainer.getLayoutParams();
-                layoutParams.bottomMargin = model.get(BOTTOM_BAR_HEIGHT);
-                layoutParams.topMargin = model.get(TOP_BAR_HEIGHT);
-                viewHolder.parentView.addView(viewHolder.scrollContainer);
-            }
-            viewHolder.scrollContainer.setVisibility(isShowing ? View.VISIBLE : View.GONE);
-        }
-
         View feedSurfaceView = model.get(FEED_SURFACE_COORDINATOR).getView();
         if (isShowing) {
-            if (viewHolder.headerContainerView == null) {
-                FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(
-                        LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
+            parentView.addView(feedSurfaceView);
+            // We only need to make room for the top and bottom bar if in the TWOPANE surface {@link
+            // SurfaceMode.TWO_PANES}. The bottom bar is only visible in the TWOPANE surface  {@link
+            // SurfaceMode.TWO_PANES}.
+            if (model.get(IS_BOTTOM_BAR_VISIBLE)) {
+                FrameLayout.LayoutParams layoutParams =
+                        (FrameLayout.LayoutParams) feedSurfaceView.getLayoutParams();
                 layoutParams.bottomMargin = model.get(BOTTOM_BAR_HEIGHT);
                 layoutParams.topMargin = model.get(TOP_BAR_HEIGHT);
-                viewHolder.parentView.addView(feedSurfaceView, layoutParams);
-            } else {
-                viewHolder.headerContainerView.addView(feedSurfaceView);
             }
         } else {
             UiUtils.removeViewFromParent(feedSurfaceView);

chrome/android/features/start_surface/internal/java/src/org/chromium/chrome/features/start_surface/SecondaryTasksSurfaceViewBinder.java

@@ -30,13 +30,12 @@ class SecondaryTasksSurfaceViewBinder {
     private static void setVisibility(
             TasksSurfaceViewBinder.ViewHolder viewHolder, PropertyModel model, boolean isShowing) {
         if (isShowing && viewHolder.tasksSurfaceView.getParent() == null) {
+            viewHolder.parentView.addView(viewHolder.tasksSurfaceView);
             MarginLayoutParams layoutParams =
-                    (MarginLayoutParams) viewHolder.scrollContainer.getLayoutParams();
+                    (MarginLayoutParams) viewHolder.tasksSurfaceView.getLayoutParams();
             layoutParams.topMargin = model.get(TOP_BAR_HEIGHT);
-            viewHolder.parentView.addView(viewHolder.scrollContainer);
-            viewHolder.scrollContainer.addView(viewHolder.tasksSurfaceView);
         }
 
-        viewHolder.scrollContainer.setVisibility(isShowing ? View.VISIBLE : View.GONE);
+        viewHolder.tasksSurfaceView.setVisibility(isShowing ? View.VISIBLE : View.GONE);
     }
 }

chrome/android/features/start_surface/internal/java/src/org/chromium/chrome/features/start_surface/StartSurfaceCoordinator.java

@@ -6,10 +6,6 @@ package org.chromium.chrome.features.start_surface;
 
 import static org.chromium.chrome.features.start_surface.StartSurfaceProperties.TOP_BAR_HEIGHT;
 
-import android.support.v4.widget.NestedScrollView;
-import android.view.LayoutInflater;
-import android.view.ViewGroup;
-
 import androidx.annotation.Nullable;
 
 import org.chromium.chrome.browser.ChromeActivity;
@@ -171,14 +167,11 @@ public class StartSurfaceCoordinator implements StartSurface {
                 mPropertyModel, mActivity.getToolbarManager().getFakeboxDelegate(),
                 mSurfaceMode == SurfaceMode.SINGLE_PANE);
 
-        // The tasks surface is added to the explore surface in the single pane mode below.
-        if (mSurfaceMode != SurfaceMode.SINGLE_PANE) {
-            // TODO(crbug.com/1000295): Make the tasks surface view scrollable together with the Tab
-            // switcher view in tasks only mode.
-            mTasksSurfacePropertyModelChangeProcessor =
-                    createTasksViewPropertyModelChangeProcessor(mTasksSurface.getContainerView(),
-                            TasksSurfaceViewBinder::bind, mSurfaceMode != SurfaceMode.TASKS_ONLY);
-        }
+        mTasksSurfacePropertyModelChangeProcessor =
+                PropertyModelChangeProcessor.create(mPropertyModel,
+                        new TasksSurfaceViewBinder.ViewHolder(
+                                mActivity.getCompositorViewHolder(), mTasksSurface.getView()),
+                        TasksSurfaceViewBinder::bind);
 
         // There is nothing else to do for SurfaceMode.TASKS_ONLY.
         if (mSurfaceMode == SurfaceMode.TASKS_ONLY) {
@@ -190,12 +183,10 @@ public class StartSurfaceCoordinator implements StartSurface {
                     mActivity, mActivity.getCompositorViewHolder(), mPropertyModel);
         }
 
-        // TODO(crbug.com/1000295): Hide Tab switcher toolbar on explore pane in two panes mode,
-        // which should be done when adding fake search box.
         mExploreSurfaceCoordinator = new ExploreSurfaceCoordinator(mActivity,
-                mActivity.getCompositorViewHolder(),
-                mSurfaceMode == SurfaceMode.SINGLE_PANE ? mTasksSurface.getContainerView() : null,
-                mPropertyModel);
+                mSurfaceMode == SurfaceMode.SINGLE_PANE ? mTasksSurface.getBodyViewContainer()
+                                                        : mActivity.getCompositorViewHolder(),
+                mPropertyModel, mSurfaceMode == SurfaceMode.SINGLE_PANE);
     }
 
     private TabSwitcher.Controller initializeSecondaryTasksSurface() {
@@ -208,33 +199,14 @@ public class StartSurfaceCoordinator implements StartSurface {
                 TabManagementModuleProvider.getDelegate().createTasksSurface(mActivity,
                         propertyModel, mActivity.getToolbarManager().getFakeboxDelegate(), false);
         mSecondaryTasksSurfacePropertyModelChangeProcessor =
-                createTasksViewPropertyModelChangeProcessor(
-                        mSecondaryTasksSurface.getContainerView(),
-                        SecondaryTasksSurfaceViewBinder::bind, true);
+                PropertyModelChangeProcessor.create(mPropertyModel,
+                        new TasksSurfaceViewBinder.ViewHolder(mActivity.getCompositorViewHolder(),
+                                mSecondaryTasksSurface.getView()),
+                        SecondaryTasksSurfaceViewBinder::bind);
         if (mOnTabSelectingListener != null) {
             mSecondaryTasksSurface.setOnTabSelectingListener(mOnTabSelectingListener);
             mOnTabSelectingListener = null;
         }
         return mSecondaryTasksSurface.getController();
     }
-
-    private PropertyModelChangeProcessor createTasksViewPropertyModelChangeProcessor(
-            ViewGroup container,
-            PropertyModelChangeProcessor.ViewBinder<PropertyModel,
-                    TasksSurfaceViewBinder.ViewHolder, PropertyKey> binder,
-            boolean needScrollContainer) {
-        // TODO(crbug.com/1000295): Put TasksSurface view inside Tab switcher recycler view.
-        // This is a temporarily solution to make the TasksSurfaceView scroll together with the
-        // Tab switcher, however this solution has performance issue when the Tab switcher is in
-        // Grid mode, which is a launcher blocker. Check the bug details.
-        return PropertyModelChangeProcessor.create(mPropertyModel,
-                new TasksSurfaceViewBinder.ViewHolder(mActivity.getCompositorViewHolder(),
-                        needScrollContainer
-                                ? (NestedScrollView) LayoutInflater.from(mActivity).inflate(
-                                        R.layout.ss_explore_scroll_container,
-                                        mActivity.getCompositorViewHolder(), false)
-                                : null,
-                        container),
-                binder);
-    }
 }

chrome/android/features/start_surface/internal/java/src/org/chromium/chrome/features/start_surface/TasksSurfaceViewBinder.java

@@ -8,31 +8,24 @@ import static org.chromium.chrome.features.start_surface.StartSurfaceProperties.
 import static org.chromium.chrome.features.start_surface.StartSurfaceProperties.IS_SHOWING_OVERVIEW;
 import static org.chromium.chrome.features.start_surface.StartSurfaceProperties.TOP_BAR_HEIGHT;
 
-import android.support.v4.widget.NestedScrollView;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewGroup.MarginLayoutParams;
 
-import androidx.annotation.Nullable;
-
 import org.chromium.ui.modelutil.PropertyKey;
 import org.chromium.ui.modelutil.PropertyModel;
 
 /** The binder controls the display of the {@link TasksView} in its parent. */
 class TasksSurfaceViewBinder {
     /**
-     * The view holder holds the parent view, the scroll container and the tasks surface view.
+     * The view holder holds the parent view and the tasks surface view.
      */
     public static class ViewHolder {
         public final ViewGroup parentView;
-        @Nullable
-        public final NestedScrollView scrollContainer;
-        public final ViewGroup tasksSurfaceView;
+        public final View tasksSurfaceView;
 
-        ViewHolder(ViewGroup parentView, @Nullable NestedScrollView scrollContainer,
-                ViewGroup tasksSurfaceView) {
+        ViewHolder(ViewGroup parentView, View tasksSurfaceView) {
             this.parentView = parentView;
-            this.scrollContainer = scrollContainer;
             this.tasksSurfaceView = tasksSurfaceView;
         }
     }
@@ -47,22 +40,20 @@ class TasksSurfaceViewBinder {
 
     private static void updateLayoutAndVisibility(
             ViewHolder viewHolder, PropertyModel model, boolean isShowing) {
-        ViewGroup targetView = viewHolder.scrollContainer == null ? viewHolder.tasksSurfaceView
-                                                                  : viewHolder.scrollContainer;
         if (isShowing && viewHolder.tasksSurfaceView.getParent() == null) {
-            viewHolder.parentView.addView(targetView);
-            if (viewHolder.scrollContainer != null) targetView.addView(viewHolder.tasksSurfaceView);
-            MarginLayoutParams layoutParams = (MarginLayoutParams) targetView.getLayoutParams();
+            viewHolder.parentView.addView(viewHolder.tasksSurfaceView);
+            MarginLayoutParams layoutParams =
+                    (MarginLayoutParams) viewHolder.tasksSurfaceView.getLayoutParams();
             layoutParams.bottomMargin = model.get(BOTTOM_BAR_HEIGHT);
             layoutParams.topMargin = model.get(TOP_BAR_HEIGHT);
         }
 
-        targetView.setVisibility(isShowing ? View.VISIBLE : View.GONE);
+        viewHolder.tasksSurfaceView.setVisibility(isShowing ? View.VISIBLE : View.GONE);
     }
 
     private static void setBottomBarHeight(ViewHolder viewHolder, int height) {
-        ViewGroup targetView = viewHolder.scrollContainer == null ? viewHolder.tasksSurfaceView
-                                                                  : viewHolder.scrollContainer;
-        ((MarginLayoutParams) targetView.getLayoutParams()).bottomMargin = height;
+        MarginLayoutParams layoutParams =
+                (MarginLayoutParams) viewHolder.tasksSurfaceView.getLayoutParams();
+        if (layoutParams != null) layoutParams.bottomMargin = height;
     }
 }

chrome/android/features/tab_ui/BUILD.gn

@@ -170,6 +170,7 @@ android_library("java") {
     "//third_party/android_deps:android_arch_lifecycle_viewmodel_java",
     "//third_party/android_deps:android_support_v7_appcompat_java",
     "//third_party/android_deps:androidx_annotation_annotation_java",
+    "//third_party/android_deps:com_android_support_design_java",
     "//third_party/android_deps:com_android_support_recyclerview_v7_java",
     "//third_party/android_deps:com_android_support_support_compat_java",
     "//third_party/android_deps:com_android_support_support_v13_java",

chrome/android/features/tab_ui/java/res/layout/tasks_view_layout.xml

@@ -8,63 +8,76 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:orientation="vertical">
+    android:layout_height="match_parent">
 
-    <!-- Search box -->
-    <include layout="@layout/fake_search_box_layout"/>
-
-    <HorizontalScrollView android:id="@+id/mv_tiles_container"
+    <android.support.design.widget.AppBarLayout
+        android:id="@+id/task_surface_header"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/modern_primary_color"
-        android:visibility="gone"
-        android:scrollbars="none">
-        <LinearLayout android:id="@+id/mv_tiles_layout"
-            android:layout_width="wrap_content"
-            android:layout_height="match_parent"
-            android:orientation="horizontal"
-            android:paddingBottom="@dimen/tasks_view_items_vertical_spacing" />
-    </HorizontalScrollView>
-
-    <LinearLayout
-        android:id="@+id/tab_switcher_title"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:paddingStart="12dp"
-        android:paddingEnd="4dp"
-        android:paddingTop="8dp"
-        android:paddingBottom="8dp"
-        android:visibility="gone"
-        android:background="@color/modern_primary_color"
-        android:orientation="horizontal">
-        <TextView
-            android:layout_width="0dp"
+        app:elevation="0dp">
+        <include layout="@layout/fake_search_box_layout"/>
+        <HorizontalScrollView android:id="@+id/mv_tiles_container"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@color/modern_primary_color"
+            android:visibility="gone"
+            android:scrollbars="none"
+            app:layout_scrollFlags="scroll">
+            <LinearLayout android:id="@+id/mv_tiles_layout"
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:orientation="horizontal"
+                android:paddingBottom="@dimen/tasks_view_items_vertical_spacing" />
+        </HorizontalScrollView>
+        <LinearLayout
+            android:id="@+id/tab_switcher_title"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_weight="1.0"
-            android:layout_gravity="center_vertical"
-            android:gravity="center_vertical"
-            android:paddingStart="6dp"
-            android:singleLine="true"
-            android:textAppearance="@style/TextAppearance.BlackTitle2"
-            android:text="@string/tab_switcher_carousel_title" />
-        <org.chromium.ui.widget.ChromeImageView
-            android:id="@+id/more_tabs"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
-            android:layout_gravity="center_vertical|end"
-            android:layout_marginTop="-16dp"
-            android:layout_marginBottom="-16dp"
-            android:scaleType="center"
-            android:src="@drawable/ic_arrow_right"
-            android:tint="@color/default_icon_color"
-            android:tintMode="src_in"
-            android:paddingTop="16dp"
-            android:paddingBottom="16dp"
-            android:contentDescription="@string/accessibility_tab_switcher_carousel_more_tabs"/>
-    </LinearLayout>
+            android:paddingStart="12dp"
+            android:paddingEnd="4dp"
+            android:paddingTop="8dp"
+            android:paddingBottom="8dp"
+            android:visibility="gone"
+            android:background="@color/modern_primary_color"
+            android:orientation="horizontal"
+            app:layout_scrollFlags="scroll">
+            <TextView
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_weight="1.0"
+                android:layout_gravity="center_vertical"
+                android:gravity="center_vertical"
+                android:paddingStart="6dp"
+                android:singleLine="true"
+                android:textAppearance="@style/TextAppearance.BlackTitle2"
+                android:text="@string/tab_switcher_carousel_title" />
+            <org.chromium.ui.widget.ChromeImageView
+                android:id="@+id/more_tabs"
+                android:layout_width="48dp"
+                android:layout_height="48dp"
+                android:layout_gravity="center_vertical|end"
+                android:layout_marginTop="-16dp"
+                android:layout_marginBottom="-16dp"
+                android:scaleType="center"
+                android:src="@drawable/ic_arrow_right"
+                android:tint="@color/default_icon_color"
+                android:tintMode="src_in"
+                android:paddingTop="16dp"
+                android:paddingBottom="16dp"
+                android:contentDescription="@string/accessibility_tab_switcher_carousel_more_tabs"/>
+        </LinearLayout>
+        <!-- TODO(crbug.com/982018): Make view stub to inflate only when needed. -->
+        <FrameLayout
+            android:id="@+id/carousel_tab_switcher_container"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_marginStart="@dimen/tab_carousel_start_margin"
+            android:visibility="gone"
+            app:layout_scrollFlags="scroll"/>
+    </android.support.design.widget.AppBarLayout>
     <FrameLayout
-        android:id="@+id/tab_switcher_container"
+        android:id="@+id/tasks_surface_body"
         android:layout_width="match_parent"
-        android:layout_height="match_parent" />
+        android:layout_height="match_parent"
+        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
 </org.chromium.chrome.browser.tasks.TasksView>

chrome/android/features/tab_ui/java/src/org/chromium/chrome/browser/tasks/TasksSurface.java

@@ -4,6 +4,7 @@
 
 package org.chromium.chrome.browser.tasks;
 
+import android.view.View;
 import android.view.ViewGroup;
 
 import org.chromium.chrome.browser.compositor.layouts.Layout;
@@ -32,8 +33,14 @@ public interface TasksSurface {
     TabSwitcher.TabListDelegate getTabListDelegate();
 
     /**
-     * Get the container {@link ViewGroup} of the surface.
-     * @return The surface's container {@link ViewGroup}.
+     * Get the view container {@link ViewGroup} of the tasks surface body.
+     * @return The tasks surface body view container {@link ViewGroup}.
      */
-    ViewGroup getContainerView();
+    ViewGroup getBodyViewContainer();
+
+    /**
+     * Get the view {@link View} of the surface.
+     * @return The surface's container {@link View}.
+     */
+    View getView();
 }

chrome/android/features/tab_ui/java/src/org/chromium/chrome/browser/tasks/TasksSurfaceCoordinator.java

@@ -5,6 +5,7 @@
 package org.chromium.chrome.browser.tasks;
 
 import android.view.LayoutInflater;
+import android.view.View;
 import android.view.ViewGroup;
 import android.widget.LinearLayout;
 
@@ -34,10 +35,10 @@ public class TasksSurfaceCoordinator implements TasksSurface {
                 PropertyModelChangeProcessor.create(propertyModel, mView, TasksViewBinder::bind);
         if (isTabCarousel) {
             mTabSwitcher = TabManagementModuleProvider.getDelegate().createCarouselTabSwitcher(
-                    activity, mView.getTabSwitcherContainer());
+                    activity, mView.getCarouselTabSwitcherContainer());
         } else {
             mTabSwitcher = TabManagementModuleProvider.getDelegate().createGridTabSwitcher(
-                    activity, mView.getTabSwitcherContainer());
+                    activity, mView.getBodyViewContainer());
         }
 
         mMediator =
@@ -64,7 +65,12 @@ public class TasksSurfaceCoordinator implements TasksSurface {
     }
 
     @Override
-    public ViewGroup getContainerView() {
+    public ViewGroup getBodyViewContainer() {
+        return mView.getBodyViewContainer();
+    }
+
+    @Override
+    public View getView() {
         return mView;
     }
 }

chrome/android/features/tab_ui/java/src/org/chromium/chrome/browser/tasks/TasksView.java

@@ -6,25 +6,27 @@ package org.chromium.chrome.browser.tasks;
 
 import android.content.Context;
 import android.content.res.Resources;
-import android.support.v4.view.MarginLayoutParamsCompat;
+import android.support.design.widget.AppBarLayout;
 import android.text.TextWatcher;
 import android.util.AttributeSet;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
-import android.widget.LinearLayout;
 import android.widget.TextView;
 
 import androidx.annotation.Nullable;
 
 import org.chromium.base.ApiCompatibilityUtils;
+import org.chromium.chrome.browser.coordinator.CoordinatorLayoutForPointer;
 import org.chromium.chrome.browser.util.ColorUtils;
 import org.chromium.chrome.tab_ui.R;
 
 // The view of the tasks surface.
-class TasksView extends LinearLayout {
+class TasksView extends CoordinatorLayoutForPointer {
     private final Context mContext;
-    private FrameLayout mTabSwitcherContainer;
+    private FrameLayout mBodyViewContainer;
+    private FrameLayout mCarouselTabSwitcherContainer;
+    private AppBarLayout mHeaderView;
     private View mSearchBox;
     private TextView mSearchBoxText;
 
@@ -38,13 +40,22 @@ class TasksView extends LinearLayout {
     protected void onFinishInflate() {
         super.onFinishInflate();
 
-        mTabSwitcherContainer = (FrameLayout) findViewById(R.id.tab_switcher_container);
+        mCarouselTabSwitcherContainer =
+                (FrameLayout) findViewById(R.id.carousel_tab_switcher_container);
         mSearchBox = findViewById(R.id.search_box);
+        mHeaderView = (AppBarLayout) findViewById(R.id.task_surface_header);
+        AppBarLayout.LayoutParams layoutParams =
+                (AppBarLayout.LayoutParams) mSearchBox.getLayoutParams();
+        layoutParams.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL);
         mSearchBoxText = (TextView) mSearchBox.findViewById(R.id.search_box_text);
     }
 
-    ViewGroup getTabSwitcherContainer() {
-        return mTabSwitcherContainer;
+    ViewGroup getCarouselTabSwitcherContainer() {
+        return mCarouselTabSwitcherContainer;
+    }
+
+    ViewGroup getBodyViewContainer() {
+        return findViewById(R.id.tasks_surface_body);
     }
 
     /**
@@ -55,16 +66,7 @@ class TasksView extends LinearLayout {
         if (isTabCarousel) {
             // TODO(crbug.com/982018): Change view according to incognito and dark mode.
             findViewById(R.id.tab_switcher_title).setVisibility(View.VISIBLE);
-
-            // Add negative margin to start so as to reduce the first Tab card's visual distance to
-            // the start edge to ~16dp.
-            // TODO(crbug.com/982018): Add test to guard the visual expectation.
-            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
-                    LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
-            MarginLayoutParamsCompat.setMarginStart(layoutParams,
-                    mContext.getResources().getDimensionPixelSize(
-                            R.dimen.tab_carousel_start_margin));
-            mTabSwitcherContainer.setLayoutParams(layoutParams);
+            mCarouselTabSwitcherContainer.setVisibility(View.VISIBLE);
         }
     }
 
@@ -128,7 +130,9 @@ class TasksView extends LinearLayout {
      */
     void setIncognitoMode(boolean isIncognito) {
         Resources resources = mContext.getResources();
-        setBackgroundColor(ColorUtils.getPrimaryBackgroundColor(resources, isIncognito));
+        int backgroundColor = ColorUtils.getPrimaryBackgroundColor(resources, isIncognito);
+        setBackgroundColor(backgroundColor);
+        mHeaderView.setBackgroundColor(backgroundColor);
         mSearchBox.setBackgroundResource(
                 isIncognito ? R.drawable.fake_search_box_bg_incognito : R.drawable.ntp_search_box);
         int hintTextColor = isIncognito

chrome/android/features/tab_ui/java/src/org/chromium/chrome/browser/tasks/TasksViewBinder.java

@@ -44,4 +44,4 @@ class TasksViewBinder {
                     model.get(VOICE_SEARCH_BUTTON_CLICK_LISTENER));
         }
     }
-}
+}
\ No newline at end of file