[Start Surface] Align headers properly for landscape mode.

Screenshots:
MV tiles & carousel tab switcher:
https://drive.google.com/file/d/1Gnk9tYwa-2zREw7EZaw6E9iTZrxtXe7D/view?usp=sharing&resourcekey=0-uByWJIp7_VoTlTcR1XOk7A
Carousel tab switcher & Feed articles:
https://drive.google.com/file/d/1-Ge1bYU2bp6cwDGTy3UDhONs6VBz2l66/view?usp=sharing&resourcekey=0-vZH4AqM_9w94cwqQtzirfQ

Bug: 1156256
Change-Id: I25c14d962395a4ff44b6d2b3eb38ff6e190a6279
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2595633Reviewed-by: Xi Han <hanxi@chromium.org>
Reviewed-by: Wei-Yin Chen (陳威尹) <wychen@chromium.org>
Commit-Queue: Hao Dong <spdonghao@chromium.org>
Cr-Commit-Position: refs/heads/master@{#840243}

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

@@ -17,9 +17,9 @@ import android.view.ViewGroup;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 
+import org.chromium.chrome.browser.feed.FeedSurfaceCoordinator;
 import org.chromium.chrome.browser.feed.shared.FeedFeatures;
 import org.chromium.chrome.start_surface.R;
-import org.chromium.components.browser_ui.widget.displaystyle.HorizontalDisplayStyle;
 import org.chromium.components.browser_ui.widget.displaystyle.UiConfig;
 import org.chromium.components.browser_ui.widget.displaystyle.ViewResizer;
 
@@ -41,18 +41,20 @@ public class FeedLoadingLayout extends LinearLayout {
     private final Resources mResources;
     private long mLayoutInflationCompleteMs;
     private int mScreenWidthDp;
-    private int mPaddingPx;
     private boolean mIsFirstCardDense;
+    private UiConfig mUiConfig;
 
     public FeedLoadingLayout(Context context, AttributeSet attrs) {
         super(context, attrs);
         mContext = context;
         mResources = mContext.getResources();
+        mScreenWidthDp = mResources.getConfiguration().screenWidthDp;
     }
 
     @Override
     protected void onFinishInflate() {
         super.onFinishInflate();
+        mUiConfig = new UiConfig(this);
         setPlaceholders();
         mLayoutInflationCompleteMs = SystemClock.elapsedRealtime();
     }
@@ -60,7 +62,7 @@ public class FeedLoadingLayout extends LinearLayout {
     @Override
     public void onConfigurationChanged(Configuration newConfig) {
         super.onConfigurationChanged(newConfig);
-        setPlaceholders();
+        mUiConfig.updateDisplayStyle();
     }
 
     /**
@@ -97,7 +99,10 @@ public class FeedLoadingLayout extends LinearLayout {
 
         LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
-        lp.setMargins(0, 0, 0, dpToPx(CARD_MARGIN_DP));
+        int contentPadding = FeedFeatures.cachedIsV2Enabled() ? mResources.getDimensionPixelSize(
+                                     R.dimen.content_suggestions_card_modern_padding_v2)
+                                                              : 0;
+        lp.setMargins(contentPadding, 0, contentPadding, dpToPx(CARD_MARGIN_DP));
 
         // Set the First placeholder container - an image-right card.
         // If it's in landscape mode, the placeholder should always show in dense mode. Otherwise,
@@ -148,8 +153,8 @@ public class FeedLoadingLayout extends LinearLayout {
     }
 
     private LayerDrawable getLargeImageDrawable() {
-        GradientDrawable[] placeholder = getRectangles(
-                1, dpToPx(mScreenWidthDp) - mPaddingPx * 2, dpToPx(LARGE_IMAGE_HEIGHT_DP));
+        GradientDrawable[] placeholder =
+                getRectangles(1, dpToPx(mScreenWidthDp), dpToPx(LARGE_IMAGE_HEIGHT_DP));
         return new LayerDrawable(placeholder);
     }
 
@@ -157,7 +162,7 @@ public class FeedLoadingLayout extends LinearLayout {
         int top = dpToPx(CARD_TOP_PADDING_DP);
         int left = top / 2;
         int height = dpToPx(TEXT_PLACEHOLDER_HEIGHT_DP);
-        int width = dpToPx(mScreenWidthDp) - mPaddingPx * 2;
+        int width = dpToPx(mScreenWidthDp);
         int contentHeight = dpToPx(TEXT_CONTENT_HEIGHT_DP);
 
         LinearLayout.LayoutParams textPlaceholderLp = isSmallCard
@@ -166,9 +171,7 @@ public class FeedLoadingLayout extends LinearLayout {
                         ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
 
         LayerDrawable layerDrawable = isSmallCard
-                ? getSmallTextDrawable(top,
-                        width - dpToPx(IMAGE_PLACEHOLDER_SIZE_DP) - dpToPx(CARD_TOP_PADDING_DP),
-                        height, contentHeight)
+                ? getSmallTextDrawable(top, width, height, contentHeight)
                 : getLargeTextDrawable(top, left, width, height, contentHeight + 2 * top);
 
         ImageView textPlaceholder = new ImageView(mContext);
@@ -213,6 +216,8 @@ public class FeedLoadingLayout extends LinearLayout {
         for (int i = 0; i < num; i++) {
             placeholders[i] = new GradientDrawable();
             placeholders[i].setShape(GradientDrawable.RECTANGLE);
+            // The width here is not deterministic to what the rectangle looks like. It may be also
+            // affected by layer inset left and right bound and the container padding.
             placeholders[i].setSize(width, height);
             placeholders[i].setCornerRadius(radius);
             placeholders[i].setColor(mResources.getColor(R.color.feed_placeholder_color));
@@ -227,39 +232,17 @@ public class FeedLoadingLayout extends LinearLayout {
 
     /**
      * Make the padding of placeholder consistent with that of native articles recyclerview which
-     * is resized by {@link ViewResizer} in {@link FeedLoadingCoordinator}
+     * is resized by {@link ViewResizer} in {@link FeedSurfaceCoordinator}
      */
     private void setPadding() {
         int defaultPadding = mResources.getDimensionPixelSize(FeedFeatures.cachedIsV2Enabled()
                         ? R.dimen.content_suggestions_card_modern_margin_v2
                         : R.dimen.content_suggestions_card_modern_margin);
-        UiConfig uiConfig = new UiConfig(this);
-        // mUiConfig.getContext().getResources() is used here instead of mView.getResources()
-        // because lemon compression, somehow, causes the resources to return a different
-        // configuration.
-        Resources resources = uiConfig.getContext().getResources();
-        mScreenWidthDp = resources.getConfiguration().screenWidthDp;
-
-        if (uiConfig.getCurrentDisplayStyle().horizontal == HorizontalDisplayStyle.WIDE) {
-            mPaddingPx = computePadding();
-        } else {
-            mPaddingPx = defaultPadding;
-        }
-        mPaddingPx += FeedFeatures.cachedIsV2Enabled() ? mResources.getDimensionPixelSize(
-                              R.dimen.content_suggestions_card_modern_padding_v2)
-                                                       : 0;
-        setPaddingRelative(mPaddingPx, 0, mPaddingPx, 0);
-    }
-
-    private int computePadding() {
         int widePadding = mResources.getDimensionPixelSize(FeedFeatures.cachedIsV2Enabled()
                         ? R.dimen.ntp_wide_card_lateral_margins_v2
                         : R.dimen.ntp_wide_card_lateral_margins);
-        int padding =
-                dpToPx((int) ((mScreenWidthDp - UiConfig.WIDE_DISPLAY_STYLE_MIN_WIDTH_DP) / 2.f));
-        padding = Math.max(widePadding, padding);
 
-        return padding;
+        ViewResizer.createAndAttach(this, mUiConfig, defaultPadding, widePadding);
     }
 
     long getLayoutInflationCompleteMs() {

chrome/android/features/start_surface/internal/javatests/src/org/chromium/chrome/features/start_surface/InstantStartTest.java

@@ -4,6 +4,8 @@
 
 package org.chromium.chrome.features.start_surface;
 
+import static android.content.res.Configuration.ORIENTATION_LANDSCAPE;
+
 import static androidx.test.espresso.Espresso.onView;
 import static androidx.test.espresso.action.ViewActions.click;
 import static androidx.test.espresso.assertion.ViewAssertions.doesNotExist;
@@ -27,6 +29,7 @@ import static org.chromium.chrome.test.util.ViewUtils.onViewWaiting;
 import static org.chromium.chrome.test.util.ViewUtils.waitForView;
 
 import android.content.Intent;
+import android.content.pm.ActivityInfo;
 import android.graphics.Bitmap;
 import android.graphics.drawable.BitmapDrawable;
 import android.os.Build;
@@ -1094,6 +1097,46 @@ public class InstantStartTest {
                 View.GONE);
     }
 
+    @Test
+    @MediumTest
+    @Feature({"RenderTest"})
+    @Restriction({UiRestriction.RESTRICTION_TYPE_PHONE})
+    // clang-format off
+    @EnableFeatures({ChromeFeatureList.TAB_SWITCHER_ON_RETURN + "<Study,",
+            ChromeFeatureList.START_SURFACE_ANDROID + "<Study"})
+    @CommandLineFlags.Add({ChromeSwitches.DISABLE_NATIVE_INITIALIZATION,
+            "force-fieldtrials=Study/Group",
+            IMMEDIATE_RETURN_PARAMS + "/start_surface_variation/single"})
+    @ParameterAnnotations.UseMethodParameter(FeedParams.class)
+    public void renderSingleAsHomepage_Landscape(boolean isFeedV2) throws IOException {
+        // clang-format on
+        setFeedVersion(isFeedV2);
+
+        createTabStateFile(new int[] {0, 1, 2});
+
+        startMainActivityFromLauncher();
+        CriteriaHelper.pollUiThread(
+                () -> mActivityTestRule.getActivity().getLayoutManager().overviewVisible());
+
+        // Initializes native.
+        startAndWaitNativeInitialization();
+        onViewWaiting(
+                allOf(withId(org.chromium.chrome.start_surface.R.id.feed_stream_recycler_view),
+                        isDisplayed()));
+
+        mActivityTestRule.getActivity().setRequestedOrientation(
+                ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
+        CriteriaHelper.pollUiThread(() -> {
+            Criteria.checkThat(
+                    mActivityTestRule.getActivity().getResources().getConfiguration().orientation,
+                    is(ORIENTATION_LANDSCAPE));
+        });
+        View surface =
+                mActivityTestRule.getActivity().findViewById(R.id.primary_tasks_surface_view);
+        mRenderTestRule.render(
+                surface, "singlePane_landscape" + (isFeedV2 ? "_FeedV2" : "_FeedV1"));
+    }
+
     /**
      * Toggles the header and checks whether the header has the right status.
      *

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

@@ -4,10 +4,13 @@
 
 package org.chromium.chrome.browser.tasks;
 
+import static android.content.res.Configuration.ORIENTATION_LANDSCAPE;
+
 import static com.google.android.material.appbar.AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS;
 import static com.google.android.material.appbar.AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL;
 
 import android.content.Context;
+import android.content.res.Configuration;
 import android.content.res.Resources;
 import android.os.Build;
 import android.util.AttributeSet;
@@ -26,6 +29,7 @@ import com.google.android.material.appbar.AppBarLayout;
 
 import org.chromium.base.ApiCompatibilityUtils;
 import org.chromium.base.MathUtils;
+import org.chromium.chrome.browser.feed.FeedSurfaceCoordinator;
 import org.chromium.chrome.browser.feed.shared.FeedFeatures;
 import org.chromium.chrome.browser.lifecycle.ActivityLifecycleDispatcher;
 import org.chromium.chrome.browser.ntp.IncognitoDescriptionView;
@@ -34,6 +38,8 @@ import org.chromium.chrome.features.start_surface.StartSurfaceConfiguration;
 import org.chromium.chrome.tab_ui.R;
 import org.chromium.components.browser_ui.styles.ChromeColors;
 import org.chromium.components.browser_ui.widget.CoordinatorLayoutForPointer;
+import org.chromium.components.browser_ui.widget.displaystyle.UiConfig;
+import org.chromium.components.browser_ui.widget.displaystyle.ViewResizer;
 import org.chromium.components.content_settings.CookieControlsEnforcement;
 import org.chromium.ui.base.ViewUtils;
 
@@ -55,6 +61,7 @@ class TasksView extends CoordinatorLayoutForPointer {
     private @CookieControlsEnforcement int mIncognitoCookieControlsToggleEnforcement =
             CookieControlsEnforcement.NO_ENFORCEMENT;
     private View.OnClickListener mIncognitoCookieControlsIconClickListener;
+    private UiConfig mUiConfig;
 
     /** Default constructor needed to inflate via XML. */
     public TasksView(Context context, AttributeSet attrs) {
@@ -77,6 +84,8 @@ class TasksView extends CoordinatorLayoutForPointer {
                 (FrameLayout) findViewById(R.id.carousel_tab_switcher_container);
         mSearchBoxCoordinator = new SearchBoxCoordinator(getContext(), this);
         mHeaderView = (AppBarLayout) findViewById(R.id.task_surface_header);
+        mUiConfig = new UiConfig(this);
+        setHeaderPadding();
         AppBarLayout.LayoutParams layoutParams =
                 (AppBarLayout.LayoutParams) (findViewById(R.id.scroll_component_container)
                                                      .getLayoutParams());
@@ -85,6 +94,13 @@ class TasksView extends CoordinatorLayoutForPointer {
         setTabCarouselTitleStyle();
     }
 
+    @Override
+    public void onConfigurationChanged(Configuration newConfig) {
+        super.onConfigurationChanged(newConfig);
+        mUiConfig.updateDisplayStyle();
+        alignHeaderForFeedV2();
+    }
+
     private void adjustScrollMode(AppBarLayout.LayoutParams layoutParams) {
         if (!StartSurfaceConfiguration.START_SURFACE_VARIATION.getValue().equals("omniboxonly")
                 && !StartSurfaceConfiguration.START_SURFACE_VARIATION.getValue().equals(
@@ -437,4 +453,51 @@ class TasksView extends CoordinatorLayoutForPointer {
 
         fakeSearchBox.setLayoutParams(layoutParams);
     }
+
+    /**
+     * Make the padding of header consistent with that of Feed recyclerview which is sized by {@link
+     * ViewResizer} in {@link FeedSurfaceCoordinator}
+     */
+    private void setHeaderPadding() {
+        int defaultPadding = 0;
+        int widePadding = getResources().getDimensionPixelSize(FeedFeatures.cachedIsV2Enabled()
+                        ? R.dimen.ntp_wide_card_lateral_margins_v2
+                        : R.dimen.ntp_wide_card_lateral_margins);
+
+        ViewResizer.createAndAttach(mHeaderView, mUiConfig, defaultPadding, widePadding);
+        alignHeaderForFeedV2();
+    }
+
+    /**
+     * Feed v2 has extra content padding, we need to align the header with it. However, the padding
+     * of the header is already bound with ViewResizer in setHeaderPadding(), so we update the left
+     * & right margins of MV tiles container and carousel tab switcher container.
+     */
+    private void alignHeaderForFeedV2() {
+        if (!FeedFeatures.cachedIsV2Enabled()) {
+            return;
+        }
+
+        MarginLayoutParams MVParams =
+                (MarginLayoutParams) mHeaderView.findViewById(R.id.mv_tiles_container)
+                        .getLayoutParams();
+
+        MarginLayoutParams carouselTabSwitcherParams =
+                (MarginLayoutParams) mCarouselTabSwitcherContainer.getLayoutParams();
+
+        int margin = getResources().getDimensionPixelSize(
+                R.dimen.content_suggestions_card_modern_padding_v2);
+        if (getResources().getConfiguration().orientation == ORIENTATION_LANDSCAPE) {
+            MVParams.leftMargin = margin;
+            MVParams.rightMargin = margin;
+            carouselTabSwitcherParams.leftMargin = margin;
+            carouselTabSwitcherParams.rightMargin = margin;
+        } else {
+            MVParams.leftMargin = 0;
+            MVParams.rightMargin = 0;
+            carouselTabSwitcherParams.leftMargin =
+                    getResources().getDimensionPixelSize(R.dimen.tab_carousel_start_margin);
+            carouselTabSwitcherParams.rightMargin = 0;
+        }
+    }
 }