[TTS][Preview Tab] Update Bar layout: icons, etc.

Updates the
1) Removes the Up/Down arrow and the divider line (issue 961458) for the new layout.
2) Increases the space between the Close and Open-in-tab icons (Issue 961469)
3) Adds a new class OverlayPanelRepaddingTextView for a text view that has
adjustable padding at the end of the text to allow the text width to shrink to
accommodate the multiple icons when the Bar is expanded.
4) Does some sytle/dimen cleanup to make Overlay Panel and PT separate from
Contextual Search and fix a text spacing problem with long titles in PT.

NOTE that the new layout still needs changes: it has a grab bar that intrudes
into the text area. We have a separate bug to move the grab bar up and increase
the overall bar height and round the corners (issue 961454).

BUG=961458, 961469

Change-Id: I832f71e3526fe05759f8512842cb9b4e64becdde
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1606598
Commit-Queue: Donn Denman <donnd@chromium.org>
Reviewed-by: Theresa  <twellington@chromium.org>
Reviewed-by: Matthew Jones <mdjones@chromium.org>
Reviewed-by: Jinsuk Kim <jinsukkim@chromium.org>
Auto-Submit: Donn Denman <donnd@chromium.org>
Cr-Commit-Position: refs/heads/master@{#684205}

chrome/android/chrome_java_sources.gni

@@ -193,6 +193,7 @@ chrome_java_sources = [
   "java/src/org/chromium/chrome/browser/compositor/bottombar/OverlayPanelContentViewDelegate.java",
   "java/src/org/chromium/chrome/browser/compositor/bottombar/OverlayPanelInflater.java",
   "java/src/org/chromium/chrome/browser/compositor/bottombar/OverlayPanelManager.java",
+  "java/src/org/chromium/chrome/browser/compositor/bottombar/OverlayPanelRepaddingTextView.java",
   "java/src/org/chromium/chrome/browser/compositor/bottombar/OverlayPanelTextViewInflater.java",
   "java/src/org/chromium/chrome/browser/compositor/bottombar/contextualsearch/ContextualSearchBarBannerControl.java",
   "java/src/org/chromium/chrome/browser/compositor/bottombar/contextualsearch/ContextualSearchBarControl.java",

chrome/android/java/res/layout/contextual_search_term_view.xml

@@ -16,4 +16,4 @@
         android:background="@color/overlay_panel_bar_background_color"
         android:layout_marginStart="7dp"
         android:layout_marginEnd="7dp" />
-</FrameLayout>
\ No newline at end of file
+</FrameLayout>

chrome/android/java/res/layout/ephemeral_tab_text_view.xml

@@ -4,14 +4,13 @@
      found in the LICENSE file. -->
 
 <!-- Ephemeral Tab bar text -->
-<!-- TODO(jinsukkim): Define Ephemeral Tab's own text view style -->
 <FrameLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/ephemeral_tab_text_view"
-    style="@style/ContextualSearchTextViewLayout" >
+    style="@style/OverlayPanelTextViewLayout" >
     <TextView
         android:id="@+id/ephemeral_tab_text"
-        style="@style/ContextualSearchTextView"
+        style="@style/OverlayPanelTextView"
         android:layout_width="match_parent"
         android:layout_gravity="bottom"
         android:background="@color/overlay_panel_bar_background_color"

chrome/android/java/res/values-v17/styles.xml

@@ -580,8 +580,8 @@
         <item name="android:alpha">0.6</item>
     </style>
 
-    <!-- Contextual Search styles -->
-    <style name="ContextualSearchTextViewLayout">
+    <!-- Generic Overlay Panel styles -->
+    <style name="OverlayPanelTextViewLayout">
         <item name="android:layout_width">match_parent</item>
         <item name="android:layout_height">wrap_content</item>
         <item name="android:layout_gravity">bottom</item>
@@ -589,14 +589,21 @@
         <item name="android:visibility">invisible</item>
         <!-- 60dp padding minus 7dp for fading edge -->
         <item name="android:paddingStart">53dp</item>
-        <item name="android:paddingEnd">53dp</item>
+        <!-- padding for icons that can appear on the right end of the Bar. -->
+        <item name="android:paddingEnd">@dimen/overlay_panel_end_buttons_width</item>
     </style>
-    <style name="ContextualSearchTextView" parent="@style/TextAppearance.BlackTitle1">
+    <style name="OverlayPanelTextView" parent="@style/TextAppearance.BlackTitle1">
         <item name="android:layout_height">match_parent</item>
         <item name="android:ellipsize">end</item>
         <item name="android:includeFontPadding">false</item>
         <item name="android:singleLine">true</item>
     </style>
+
+    <!-- Contextual Search Overlay styles -->
+    <style name="ContextualSearchTextViewLayout" parent="@style/OverlayPanelTextViewLayout">
+        <item name="android:paddingEnd">@dimen/contextual_search_end_padding</item>
+    </style>
+    <style name="ContextualSearchTextView" parent="@style/OverlayPanelTextView" />
     <style name="ContextualSearchContextTextView">
         <item name="android:layout_width">0dp</item>
         <item name="android:layout_height">match_parent</item>

chrome/android/java/res/values/dimens.xml

@@ -110,20 +110,30 @@
     <dimen name="infobar_translate_fade_edge_length">18dp</dimen>
     <dimen name="infobar_translate_menu_width">260dp</dimen>
 
-    <!-- Contextual search dimensions -->
+    <!-- Overlay Panel dimensions -->
+    <dimen name="overlay_panel_end_buttons_width">94dp</dimen>
+    <dimen name="overlay_panel_padded_button_width">41dp</dimen>
+    <dimen name="overlay_panel_text_layer_min_height">38dp</dimen>
+    <dimen name="overlay_panel_button_padding">12dp</dimen>
+    <dimen name="overlay_panel_caption_spacing">1.5dp</dimen>
+
+    <!-- Contextual Search dimensions -->
     <dimen name="contextual_search_bar_banner_padding">12dp</dimen>
     <dimen name="contextual_search_bar_image_size">36dp</dimen>
-    <!-- The following two dimensions were taking from the UI specs for contextual search, where
-    they were 36dp and 3dp respectively, but have been updated to allow for padding around
-    TextViews that we cannot get rid of. -->
-    <dimen name="contextual_search_text_layer_min_height">38dp</dimen>
-    <dimen name="contextual_search_term_caption_spacing">1.5dp</dimen>
-    <!-- This is the offset of the divider from the end of the bar. -->
-    <dimen name="contextual_search_end_button_width">48dp</dimen>
-    <!-- Width of multiple buttons at the end of the Bar. -->
-    <dimen name="contextual_search_end_buttons_width">96dp</dimen>
+    <dimen name="contextual_search_text_layer_min_height">
+        @dimen/overlay_panel_text_layer_min_height
+    </dimen>
+    <dimen name="contextual_search_term_caption_spacing">
+        @dimen/overlay_panel_caption_spacing
+    </dimen>
+    <dimen name="contextual_search_padded_button_width">36dp</dimen>
+    <dimen name="contextual_search_end_buttons_width">
+      @dimen/overlay_panel_end_buttons_width
+    </dimen>
     <dimen name="contextual_search_divider_line_width">1dp</dimen>
     <dimen name="contextual_search_divider_line_height">24dp</dimen>
+    <!-- Padding at the end of the Bar. -->
+    <dimen name="contextual_search_end_padding">7dp</dimen>
     <dimen name="contextual_search_bubble_y_inset">-3dp</dimen>
 
     <!-- Overlay panel dimensions -->

chrome/android/java/src/org/chromium/chrome/browser/compositor/bottombar/OverlayPanel.java

@@ -28,7 +28,6 @@ import org.chromium.chrome.browser.compositor.layouts.eventfilter.ScrollDirectio
 import org.chromium.chrome.browser.compositor.overlays.SceneOverlay;
 import org.chromium.chrome.browser.compositor.scene_layer.SceneOverlayLayer;
 import org.chromium.chrome.browser.multiwindow.MultiWindowUtils;
-import org.chromium.chrome.browser.tab.Tab;
 import org.chromium.chrome.browser.tab.TabBrowserControlsState;
 import org.chromium.content_public.browser.SelectionPopupController;
 import org.chromium.content_public.browser.WebContents;
@@ -46,9 +45,6 @@ import java.util.List;
 public class OverlayPanel extends OverlayPanelAnimation implements ActivityStateListener,
         EdgeSwipeHandler, GestureHandler, OverlayPanelContentFactory, SceneOverlay {
 
-    /** The extra dp added around the close button touch target. */
-    private static final int CLOSE_BUTTON_TOUCH_SLOP_DP = 5;
-
     /** The delay after which the hide progress will be hidden. */
     private static final long HIDE_PROGRESS_BAR_DELAY_MS = 1000 / 60 * 4;
 
@@ -154,7 +150,6 @@ public class OverlayPanel extends OverlayPanelAnimation implements ActivityState
     /**
      * @param context The current Android {@link Context}.
      * @param updateHost The {@link LayoutUpdateHost} used to request updates in the Layout.
-     * @param eventHost The {@link EventFilterHost} used to propagate events.
      * @param panelManager The {@link OverlayPanelManager} responsible for showing panels.
      */
     public OverlayPanel(
@@ -643,9 +638,9 @@ public class OverlayPanel extends OverlayPanelAnimation implements ActivityState
      */
     protected boolean isCoordinateInsideCloseButton(float x) {
         if (LocalizationUtils.isLayoutRtl()) {
-            return x <= (getCloseIconX() + getCloseIconDimension() + CLOSE_BUTTON_TOUCH_SLOP_DP);
+            return x <= (getCloseIconX() + getCloseIconDimension() + mButtonPaddingDps);
         } else {
-            return x >= (getCloseIconX() - CLOSE_BUTTON_TOUCH_SLOP_DP);
+            return x >= (getCloseIconX() - mButtonPaddingDps);
         }
     }
 
@@ -654,9 +649,8 @@ public class OverlayPanel extends OverlayPanelAnimation implements ActivityState
      * @return Whether the given |x| coordinate is inside the close button.
      */
     protected boolean isCoordinateInsideOpenTabButton(float x) {
-        float width = getOpenTabIconDimension() + CLOSE_BUTTON_TOUCH_SLOP_DP;
-        return getOpenTabIconX() - CLOSE_BUTTON_TOUCH_SLOP_DP <= x
-                && x <= getOpenTabIconX() + width;
+        float width = getOpenTabIconDimension() + 2 * mButtonPaddingDps;
+        return getOpenTabIconX() - mButtonPaddingDps <= x && x <= getOpenTabIconX() + width;
     }
 
     /**

chrome/android/java/src/org/chromium/chrome/browser/compositor/bottombar/OverlayPanelBase.java

@@ -15,6 +15,7 @@ import org.chromium.base.ApiCompatibilityUtils;
 import org.chromium.base.VisibleForTesting;
 import org.chromium.chrome.R;
 import org.chromium.chrome.browser.ChromeActivity;
+import org.chromium.chrome.browser.ChromeFeatureList;
 import org.chromium.chrome.browser.compositor.bottombar.OverlayPanel.PanelState;
 import org.chromium.chrome.browser.compositor.bottombar.OverlayPanel.StateChangeReason;
 import org.chromium.chrome.browser.util.MathUtils;
@@ -62,6 +63,7 @@ abstract class OverlayPanelBase {
 
     /** The opacity of the arrow icon when the Panel is expanded. */
     private static final float ARROW_ICON_OPACITY_STATE_EXPANDED = 0.f;
+    private static final float ARROW_ICON_OPACITY_TRANSPARENT = 0.f;
 
     /** The opacity of the arrow icon when the Panel is maximized. */
     private static final float ARROW_ICON_OPACITY_STATE_MAXIMIZED = 0.f;
@@ -69,6 +71,15 @@ abstract class OverlayPanelBase {
     /** The rotation of the arrow icon. */
     private static final float ARROW_ICON_ROTATION = -90.f;
 
+    /** The opacity of the Open-Tab icon when the Panel is peeking. */
+    private static final float OPEN_TAB_ICON_OPACITY_STATE_PEEKED = 1.f;
+
+    /** The opacity of the Open-Tab icon when the Panel is expanded. */
+    private static final float OPEN_TAB_ICON_OPACITY_STATE_EXPANDED = 0.f;
+
+    /** The opacity of the Open-Tab icon when the Panel is maximized. */
+    private static final float OPEN_TAB_ICON_OPACITY_STATE_MAXIMIZED = 0.f;
+
     /** The opacity of the close icon when the Panel is peeking. */
     private static final float CLOSE_ICON_OPACITY_STATE_PEEKED = 0.f;
 
@@ -111,7 +122,7 @@ abstract class OverlayPanelBase {
     /** The background color of the Bar. */
     private final @ColorInt int mBarBackgroundColor;
 
-    /** The tint used for icons (e.g. arrow icon, close icon). */
+    /** The tint used for icons (e.g. close icon, etc). */
     private final @ColorInt int mIconColor;
 
     /** The tint used for drag handlebar. */
@@ -129,6 +140,9 @@ abstract class OverlayPanelBase {
     /** The current state of the Overlay Panel. */
     private @PanelState int mPanelState = PanelState.UNDEFINED;
 
+    /** The padding on each side of the close and open-tab icons. */
+    protected final int mButtonPaddingDps;
+
     // ============================================================================================
     // Constructor
     // ============================================================================================
@@ -159,6 +173,8 @@ abstract class OverlayPanelBase {
         mIconColor = ApiCompatibilityUtils.getColor(resources, R.color.default_icon_color);
         mDragHandlebarColor =
                 ApiCompatibilityUtils.getColor(resources, R.color.drag_handlebar_color);
+        mButtonPaddingDps =
+                (int) (mPxToDp * resources.getDimension(R.dimen.overlay_panel_button_padding));
     }
 
     // ============================================================================================
@@ -405,8 +421,8 @@ abstract class OverlayPanelBase {
     // --------------------------------------------------------------------------------------------
     // Panel Bar states
     // --------------------------------------------------------------------------------------------
-    private float mBarMarginSide;
-    private float mBarMarginTop;
+    private final float mBarMarginSide;
+    private final float mBarMarginTop;
     private float mBarHeight;
     private boolean mIsBarBorderVisible;
     private float mBarBorderHeight;
@@ -495,7 +511,9 @@ abstract class OverlayPanelBase {
      * @return The opacity of the arrow icon.
      */
     public float getArrowIconOpacity() {
-        return mArrowIconOpacity;
+        return ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
+                ? ARROW_ICON_OPACITY_TRANSPARENT
+                : mArrowIconOpacity;
     }
 
     /**
@@ -550,7 +568,7 @@ abstract class OverlayPanelBase {
      * @return The left X coordinate of the open new tab icon.
      */
     public float getOpenTabIconX() {
-        float offset = getCloseIconDimension() + getBarMarginSide();
+        float offset = getCloseIconDimension() + 2 * mButtonPaddingDps;
         if (LocalizationUtils.isLayoutRtl()) {
             return getCloseIconX() + offset;
         } else {

chrome/android/java/src/org/chromium/chrome/browser/compositor/bottombar/OverlayPanelRepaddingTextView.java

+// 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.
+
+package org.chromium.chrome.browser.compositor.bottombar;
+
+import android.content.Context;
+import android.view.View;
+import android.view.ViewGroup;
+
+import org.chromium.ui.resources.dynamics.DynamicResourceLoader;
+
+/**
+ * Provides a TextView whose end padding can be adjusted between a short and long size.
+ * This implementation simply does a binary transition when the panel is 50% of the way
+ * between peek and expanded states.
+ */
+public abstract class OverlayPanelRepaddingTextView extends OverlayPanelInflater {
+    private static final float REPADDING_THRESHOLD = 0.5f;
+
+    private final float mPeekedEndButtonsWidth;
+    private final float mExpandedEndButtonsWidth;
+
+    private int mPaddingStart;
+    private int mPaddingTop;
+    private int mPaddingBottom;
+
+    private boolean mIsPanelExpandedBeyondHalf;
+    private boolean mWasPanelExpandedBeyondHalf;
+
+    /**
+     * @param panel             The panel.
+     * @param layoutResource    The Layout that contains the Text View we're managing.
+     * @param layoutId          The resource ID of the layout.
+     * @param context           The Android Context used to inflate the View.
+     * @param container         The container View used to inflate the View.
+     * @param resourceLoader    The resource loader that will handle the snapshot capturing.
+     * @param peekedDimension   The dimension resource for the padding when the Overlay is Peeked.
+     * @param expandedDimension The dimension resource for the padding when the Overlay is Expanded.
+     */
+    public OverlayPanelRepaddingTextView(OverlayPanel panel, int layoutResource, int layoutId,
+            Context context, ViewGroup container, DynamicResourceLoader resourceLoader,
+            int peekedDimension, int expandedDimension) {
+        super(panel, layoutResource, layoutId, context, container, resourceLoader);
+        mPeekedEndButtonsWidth =
+                peekedDimension == 0 ? 0 : context.getResources().getDimension(peekedDimension);
+        mExpandedEndButtonsWidth =
+                expandedDimension == 0 ? 0 : context.getResources().getDimension(expandedDimension);
+    }
+
+    /**
+     * Updates the text view during the transition of the Overlay from Peeked to Expanded states.
+     * @param percentage A value from 0 to 1 that indicates the degree to which the panel has
+     *        been expanded.
+     */
+    public void onUpdateFromPeekToExpand(float percentage) {
+        mIsPanelExpandedBeyondHalf = percentage > REPADDING_THRESHOLD;
+        invalidateIfNeeded(false);
+    }
+
+    @Override
+    public void invalidate() {
+        invalidateIfNeeded(true);
+    }
+
+    /**
+     * Invalidates the view, if needed.  Checks the {@code mIsPanelExpandedBeyondHalf} private
+     * member to see if the panel is beyond a threshold that's part way between peek and expanded
+     * states.
+     * @param alwaysInvalidate When {@code true}, makes sure that {@link #invalidate} is called.
+     */
+    protected void invalidateIfNeeded(boolean alwaysInvalidate) {
+        View view = getView();
+        if (view == null
+                || !alwaysInvalidate && mIsPanelExpandedBeyondHalf == mWasPanelExpandedBeyondHalf) {
+            return;
+        }
+
+        mWasPanelExpandedBeyondHalf = mIsPanelExpandedBeyondHalf;
+        int barPaddingWidth = (int) (mIsPanelExpandedBeyondHalf ? mExpandedEndButtonsWidth
+                                                                : mPeekedEndButtonsWidth);
+        view.setPaddingRelative(mPaddingStart, mPaddingTop, barPaddingWidth, mPaddingBottom);
+        super.invalidate();
+    }
+
+    @Override
+    protected void onFinishInflate() {
+        super.onFinishInflate();
+        View view = getView();
+        mPaddingStart = view.getPaddingStart();
+        mPaddingTop = view.getPaddingTop();
+        mPaddingBottom = view.getPaddingBottom();
+    }
+}

chrome/android/java/src/org/chromium/chrome/browser/compositor/bottombar/OverlayPanelTextViewInflater.java

@@ -21,19 +21,45 @@ import org.chromium.ui.resources.dynamics.DynamicResourceLoader;
  * Details in this issue: crbug.com/651389.
  */
 public abstract class OverlayPanelTextViewInflater
-        extends OverlayPanelInflater implements OnLayoutChangeListener {
+        extends OverlayPanelRepaddingTextView implements OnLayoutChangeListener {
     private static final float SHORTNESS_FACTOR = 0.5f;
 
     private boolean mDidAdjustViewDirection;
 
     /**
-     * Constructs an instance similar to an {@link OverlayPanelInflater} that can adjust the RTL/LTR
-     * ordering of text fragments whose initial values are considered short relative to the width
-     * of the view.
+     * Constructs an instance similar to an {@link OverlayPanelRepaddingTextView} that can adjust
+     * the RTL/LTR ordering of text fragments whose initial values are considered short relative to
+     * the width of the view.
+     * @param panel             The panel.
+     * @param layoutId          The resource ID of the layout.
+     * @param viewId            The resource ID of the text view.
+     * @param context           The Android Context used to inflate the View.
+     * @param container         The container View used to inflate the View.
+     * @param resourceLoader    The resource loader that will handle the snapshot capturing.
+     * @param peekedDimension   The dimension resource for the padding when the Overlay is Peeked.
+     * @param expandedDimension The dimension resource for the padding when the Overlay is Expanded.
+     */
+    public OverlayPanelTextViewInflater(OverlayPanel panel, int layoutId, int viewId,
+            Context context, ViewGroup container, DynamicResourceLoader resourceLoader,
+            int peekedDimension, int expandedDimension) {
+        super(panel, layoutId, viewId, context, container, resourceLoader, peekedDimension,
+                expandedDimension);
+    }
+
+    /**
+     * Constructs an instance similar to an {@link OverlayPanelRepaddingTextView} that can adjust
+     * the RTL/LTR ordering of text fragments whose initial values are considered short relative to
+     * the width of the view.
+     * @param panel             The panel.
+     * @param layoutId          The resource ID of the layout.
+     * @param viewId            The resource ID of the text view.
+     * @param context           The Android Context used to inflate the View.
+     * @param container         The container View used to inflate the View.
+     * @param resourceLoader    The resource loader that will handle the snapshot capturing.
      */
     public OverlayPanelTextViewInflater(OverlayPanel panel, int layoutId, int viewId,
             Context context, ViewGroup container, DynamicResourceLoader resourceLoader) {
-        super(panel, layoutId, viewId, context, container, resourceLoader);
+        super(panel, layoutId, viewId, context, container, resourceLoader, 0, 0);
     }
 
     /**

chrome/android/java/src/org/chromium/chrome/browser/compositor/bottombar/contextualsearch/ContextualSearchCaptionControl.java

@@ -90,7 +90,13 @@ public class ContextualSearchCaptionControl extends OverlayPanelTextViewInflater
     public ContextualSearchCaptionControl(OverlayPanel panel, Context context, ViewGroup container,
             DynamicResourceLoader resourceLoader, boolean shouldShowExpandedCaption) {
         super(panel, R.layout.contextual_search_caption_view, R.id.contextual_search_caption_view,
-                context, container, resourceLoader);
+                context, container, resourceLoader,
+                (ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
+                                ? R.dimen.contextual_search_end_padding
+                                : R.dimen.overlay_panel_padded_button_width),
+                (ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
+                                ? R.dimen.contextual_search_end_buttons_width
+                                : R.dimen.overlay_panel_padded_button_width));
         mShouldShowExpandedCaption = shouldShowExpandedCaption;
     }
 
@@ -122,6 +128,7 @@ public class ContextualSearchCaptionControl extends OverlayPanelTextViewInflater
      * Updates the caption when in transition between peeked to expanded states.
      * @param percentage The percentage to the more opened state.
      */
+    @Override
     public void onUpdateFromPeekToExpand(float percentage) {
         if (ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)) {
             if (mHasPeekingCaption) {

chrome/android/java/src/org/chromium/chrome/browser/compositor/bottombar/contextualsearch/ContextualSearchContextControl.java

@@ -10,14 +10,15 @@ import android.view.ViewGroup;
 import android.widget.TextView;
 
 import org.chromium.chrome.R;
+import org.chromium.chrome.browser.ChromeFeatureList;
 import org.chromium.chrome.browser.compositor.bottombar.OverlayPanel;
-import org.chromium.chrome.browser.compositor.bottombar.OverlayPanelInflater;
+import org.chromium.chrome.browser.compositor.bottombar.OverlayPanelRepaddingTextView;
 import org.chromium.ui.resources.dynamics.DynamicResourceLoader;
 
 /**
  * Controls the Search Context View that is used as a dynamic resource.
  */
-public class ContextualSearchContextControl extends OverlayPanelInflater {
+public class ContextualSearchContextControl extends OverlayPanelRepaddingTextView {
     /**
      * The selected text View.
      */
@@ -39,7 +40,13 @@ public class ContextualSearchContextControl extends OverlayPanelInflater {
                                           ViewGroup container,
                                           DynamicResourceLoader resourceLoader) {
         super(panel, R.layout.contextual_search_context_view, R.id.contextual_search_context_view,
-                context, container, resourceLoader);
+                context, container, resourceLoader,
+                (ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
+                                ? R.dimen.contextual_search_end_padding
+                                : R.dimen.overlay_panel_padded_button_width),
+                (ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
+                                ? R.dimen.contextual_search_end_buttons_width
+                                : R.dimen.overlay_panel_padded_button_width));
     }
 
     /**

chrome/android/java/src/org/chromium/chrome/browser/compositor/bottombar/contextualsearch/ContextualSearchPanel.java

@@ -99,7 +99,7 @@ public class ContextualSearchPanel extends OverlayPanel {
         int endButtonsWidthDimension =
                 ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
                 ? R.dimen.contextual_search_end_buttons_width
-                : R.dimen.contextual_search_end_button_width;
+                : R.dimen.contextual_search_padded_button_width;
         mEndButtonWidthDp =
                 mPxToDp * mContext.getResources().getDimensionPixelSize(endButtonsWidthDimension);
     }

chrome/android/java/src/org/chromium/chrome/browser/compositor/bottombar/contextualsearch/ContextualSearchTermControl.java

@@ -10,6 +10,7 @@ import android.view.ViewGroup;
 import android.widget.TextView;
 
 import org.chromium.chrome.R;
+import org.chromium.chrome.browser.ChromeFeatureList;
 import org.chromium.chrome.browser.compositor.bottombar.OverlayPanel;
 import org.chromium.chrome.browser.compositor.bottombar.OverlayPanelTextViewInflater;
 import org.chromium.ui.resources.dynamics.DynamicResourceLoader;
@@ -34,7 +35,13 @@ public class ContextualSearchTermControl extends OverlayPanelTextViewInflater {
                                           ViewGroup container,
                                           DynamicResourceLoader resourceLoader) {
         super(panel, R.layout.contextual_search_term_view, R.id.contextual_search_term_view,
-                context, container, resourceLoader);
+                context, container, resourceLoader,
+                (ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
+                                ? R.dimen.contextual_search_end_padding
+                                : R.dimen.overlay_panel_padded_button_width),
+                (ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
+                                ? R.dimen.contextual_search_end_buttons_width
+                                : R.dimen.overlay_panel_padded_button_width));
     }
 
     /**

chrome/android/java/src/org/chromium/chrome/browser/compositor/bottombar/ephemeraltab/EphemeralTabBarControl.java

@@ -40,8 +40,8 @@ public class EphemeralTabBarControl {
         mCaption = panel.canPromoteToNewTab()
                 ? new EphemeralTabCaptionControl(panel, context, container, loader)
                 : null;
-        mTextLayerMinHeight = context.getResources().getDimension(
-                R.dimen.contextual_search_text_layer_min_height);
+        mTextLayerMinHeight =
+                context.getResources().getDimension(R.dimen.overlay_panel_text_layer_min_height);
         mTitleCaptionSpacing =
                 context.getResources().getDimension(R.dimen.contextual_search_term_caption_spacing);
     }

chrome/android/java/src/org/chromium/chrome/browser/compositor/bottombar/ephemeraltab/EphemeralTabCaptionControl.java

@@ -10,6 +10,7 @@ import android.view.ViewGroup;
 import android.widget.TextView;
 
 import org.chromium.chrome.R;
+import org.chromium.chrome.browser.ChromeFeatureList;
 import org.chromium.chrome.browser.compositor.bottombar.OverlayPanel;
 import org.chromium.chrome.browser.compositor.bottombar.OverlayPanelTextViewInflater;
 import org.chromium.ui.resources.dynamics.DynamicResourceLoader;
@@ -43,7 +44,13 @@ public class EphemeralTabCaptionControl extends OverlayPanelTextViewInflater {
     public EphemeralTabCaptionControl(OverlayPanel panel, Context context, ViewGroup container,
             DynamicResourceLoader resourceLoader) {
         super(panel, R.layout.ephemeral_tab_caption_view, R.id.ephemeral_tab_caption_view, context,
-                container, resourceLoader);
+                container, resourceLoader,
+                (ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
+                                ? R.dimen.overlay_panel_end_buttons_width
+                                : R.dimen.overlay_panel_padded_button_width),
+                (ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
+                                ? R.dimen.overlay_panel_end_buttons_width
+                                : R.dimen.overlay_panel_padded_button_width));
     }
 
     /**

chrome/android/java/src/org/chromium/chrome/browser/compositor/bottombar/ephemeraltab/EphemeralTabTitleControl.java

@@ -9,6 +9,7 @@ import android.view.ViewGroup;
 import android.widget.TextView;
 
 import org.chromium.chrome.R;
+import org.chromium.chrome.browser.ChromeFeatureList;
 import org.chromium.chrome.browser.compositor.bottombar.OverlayPanel;
 import org.chromium.chrome.browser.compositor.bottombar.OverlayPanelTextViewInflater;
 import org.chromium.ui.resources.dynamics.DynamicResourceLoader;
@@ -28,7 +29,13 @@ public class EphemeralTabTitleControl extends OverlayPanelTextViewInflater {
     public EphemeralTabTitleControl(OverlayPanel panel, Context context, ViewGroup container,
             DynamicResourceLoader resourceLoader) {
         super(panel, R.layout.ephemeral_tab_text_view, R.id.ephemeral_tab_text_view, context,
-                container, resourceLoader);
+                container, resourceLoader,
+                (ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
+                                ? R.dimen.overlay_panel_end_buttons_width
+                                : R.dimen.overlay_panel_padded_button_width),
+                (ChromeFeatureList.isEnabled(ChromeFeatureList.OVERLAY_NEW_LAYOUT)
+                                ? R.dimen.overlay_panel_end_buttons_width
+                                : R.dimen.overlay_panel_padded_button_width));
         invalidate();
     }
 

chrome/android/javatests/src/org/chromium/chrome/browser/compositor/layouts/MockResourcesForLayout.java

@@ -67,7 +67,8 @@ public class MockResourcesForLayout extends MockResources {
         mFloats.put(org.chromium.chrome.R.dimen.overlay_panel_bar_height, 56.f);
         mFloats.put(org.chromium.chrome.R.dimen.control_container_height, 56.f);
         mFloats.put(org.chromium.chrome.R.dimen.contextual_search_bar_banner_padding, 12.f);
-        mFloats.put(org.chromium.chrome.R.dimen.contextual_search_end_button_width, 48.f);
+        mFloats.put(org.chromium.chrome.R.dimen.contextual_search_end_buttons_width, 48.f);
+        mFloats.put(org.chromium.chrome.R.dimen.overlay_panel_end_buttons_width, 94.f);
         mFloats.put(org.chromium.chrome.R.dimen.toolbar_height_no_shadow, 56.f);
         mIntegers.put(R.color.modern_grey_100, 0xFFF1F3F4);
         mIntegers.put(R.color.modern_primary_color, Color.WHITE);

chrome/browser/android/compositor/layer/overlay_panel_layer.cc

@@ -217,8 +217,9 @@ void OverlayPanelLayer::SetProperties(
     // Positions the icon at the end of the bar.
     float open_tab_top = close_icon_top;
     float open_tab_left;
+    float spacing_between_icons = 2 * bar_margin_side;
     float margin_from_close_icon =
-        close_icon_resource->size().width() + bar_margin_side;
+        close_icon_resource->size().width() + spacing_between_icons;
     if (is_rtl) {
       open_tab_left = close_icon_left + margin_from_close_icon;
     } else {