Update tab strip UI for dark mode

* Update the tap size of the items in strip from 46dpX48dp to 48dpX48dp.
* Add a 20dpX20dp white circle as the background of each favicon in tab
  strip.
* Change the background color of the selected favicon in tab strip to
  transparent.
* Update the selected ring for tab strip.
* Change the size of the favicon in tab strip from 16dpX16dp to
  14dpX14dp.

Bug: 1091566
Change-Id: Iaacd146242e0ce16dd53f732a4514a8a649f1607
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2236902
Commit-Queue: Yue Zhang <yuezhanggg@chromium.org>
Reviewed-by: Mei Liang <meiliang@chromium.org>
Reviewed-by: Wei-Yin Chen (陳威尹) <wychen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#777011}

chrome/android/features/tab_ui/BUILD.gn

@@ -28,12 +28,7 @@ android_resources("java_resources") {
     "java/res/anim/iph_touch_point_background_alpha_animation.xml",
     "java/res/anim/iph_touch_point_background_animation.xml",
     "java/res/color/dark_text_color_list.xml",
-    "java/res/drawable-hdpi/tabstrip_selected.png",
-    "java/res/drawable-mdpi/tabstrip_selected.png",
     "java/res/drawable-v21/fake_search_box_bg_incognito.xml",
-    "java/res/drawable-xhdpi/tabstrip_selected.png",
-    "java/res/drawable-xxhdpi/tabstrip_selected.png",
-    "java/res/drawable-xxxhdpi/tabstrip_selected.png",
     "java/res/drawable/fake_search_box_text_box_bg_incognito.xml",
     "java/res/drawable/hovered_tab_grid_card_background.xml",
     "java/res/drawable/ic_check_googblue_20dp_animated.xml",
@@ -49,6 +44,9 @@ android_resources("java_resources") {
     "java/res/drawable/tab_grid_selection_list_icon.xml",
     "java/res/drawable/tab_strip_fading_edge_end.xml",
     "java/res/drawable/tab_strip_fading_edge_start.xml",
+    "java/res/drawable/tab_strip_favicon_circle.xml",
+    "java/res/drawable/tab_strip_selected_ring.xml",
+    "java/res/drawable/tab_strip_selected_ring_incognito.xml",
     "java/res/drawable/tabstrip_favicon_background.xml",
     "java/res/drawable/ungroup_bar_background.xml",
     "java/res/layout/bottom_tab_grid_toolbar.xml",

chrome/android/features/tab_ui/java/res/drawable/tab_strip_favicon_circle.xml

@@ -0,0 +1,17 @@
+<?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. -->
+
+<layer-list
+xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item
+        android:width="20dp"
+        android:height="20dp"
+        android:gravity="center">
+        <shape
+            android:shape="oval">
+            <solid android:color="@color/default_icon_color_light" />
+        </shape>
+    </item>
+</layer-list>

chrome/android/features/tab_ui/java/res/drawable/tab_strip_selected_ring.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="16dp"
+    android:viewportHeight="48"
+    android:viewportWidth="48"
+    android:width="16dp" >
+    <path android:pathData="M 19, 24
+        m -12, 0
+        a 17,17 0 1,0 34,0
+        a 17,17 0 1,0 -34,0
+        z"
+        android:strokeColor="@color/default_icon_color_blue" android:strokeWidth="2"/>
+    <path android:fillColor="@color/default_icon_color_blue" android:fillType="evenOdd"
+        android:pathData="M 40, 12
+        m -12, 0
+        a 8,8 0 1,0 16,0
+        a 8,8 0 1,0 -16,0
+        z"/>
+    <path android:fillColor="@color/default_bg_color" android:fillType="evenOdd"
+        android:pathData="
+        M39.5,15
+        C39.25,15.32 39,15.32 38.65,15
+        L36.25,12.6
+        L33.85,15
+        C33.5,15.32 33,15.32 32.65,15
+        V15
+        C32.35,14.67 32.35,14.15 32.65,13.82
+        L35.1,11.42
+        L32.65,9.02
+        C32.35,8.69 32.35,8.17 32.6,7.84
+        V7.84
+        C33,7.52 33.5,7.52 33.85,7.84
+        L36.25,10.24
+        L38.65,7.84
+        C39,7.52 39.5,7.52 39.85,7.84
+        V7.84
+        C40.15,8.17 40.15,8.69 39.85,9.02
+        L37.4,11.42
+        L39.85,13.82
+        C40.15,14.15 40.15,14.67 39.85,14.67
+        V15
+        Z"/>
+</vector>

chrome/android/features/tab_ui/java/res/drawable/tab_strip_selected_ring_incognito.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="16dp"
+    android:viewportHeight="48"
+    android:viewportWidth="48"
+    android:width="16dp" >
+    <path android:pathData="M 19, 24
+        m -12, 0
+        a 17,17 0 1,0 34,0
+        a 17,17 0 1,0 -34,0
+        z"
+        android:strokeColor="@color/modern_blue_300" android:strokeWidth="2"/>
+    <path android:fillColor="@color/modern_blue_300" android:fillType="evenOdd"
+        android:pathData="M 40, 12
+        m -12, 0
+        a 8,8 0 1,0 16,0
+        a 8,8 0 1,0 -16,0
+        z"/>
+    <path android:fillColor="@color/modern_grey_900" android:fillType="evenOdd"
+        android:pathData="
+        M39.5,15
+        C39.25,15.32 39,15.32 38.65,15
+        L36.25,12.6
+        L33.85,15
+        C33.5,15.32 33,15.32 32.65,15
+        V15
+        C32.35,14.67 32.35,14.15 32.65,13.82
+        L35.1,11.42
+        L32.65,9.02
+        C32.35,8.69 32.35,8.17 32.6,7.84
+        V7.84
+        C33,7.52 33.5,7.52 33.85,7.84
+        L36.25,10.24
+        L38.65,7.84
+        C39,7.52 39.5,7.52 39.85,7.84
+        V7.84
+        C40.15,8.17 40.15,8.69 39.85,9.02
+        L37.4,11.42
+        L39.85,13.82
+        C40.15,14.15 40.15,14.67 39.85,14.67
+        V15
+        Z"/>
+</vector>

chrome/android/features/tab_ui/java/res/drawable/tabstrip_favicon_background.xml

@@ -6,9 +6,9 @@
 <layer-list
 xmlns:android="http://schemas.android.com/apk/res/android" >
     <item
-        android:left="5dp"
+        android:left="6dp"
         android:top="6dp"
-        android:right="5dp"
+        android:right="6dp"
         android:bottom="6dp">
         <shape
             android:shape="oval">

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

@@ -9,6 +9,5 @@
     <ImageButton
         android:id="@+id/tab_strip_item_button"
         style="@style/BottomToolbarButton"
-        android:layout_width="@dimen/tab_strip_item_width"
         android:contentDescription="@string/accessibility_tabstrip_btn_close_tab" />
 </org.chromium.ui.widget.ViewLookupCachingFrameLayout>

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

@@ -29,8 +29,9 @@
     <dimen name="tab_group_toolbar_height">56dp</dimen>
     <dimen name="tab_group_toolbar_topic_margin">8dp</dimen>
     <dimen name="tab_strip_fading_edge_width">8dp</dimen>
-    <dimen name="tab_strip_item_width">46dp</dimen>
     <dimen name="tab_strip_button_width">48dp</dimen>
+    <dimen name="tab_strip_favicon_inset">3dp</dimen>
+    <dimen name="tab_strip_favicon_size">14dp</dimen>
     <dimen name="swipe_to_dismiss_threshold">144dp</dimen>
     <dimen name="selection_tab_grid_toggle_button_inset">14dp</dimen>
     <dimen name="selection_tab_list_toggle_button_lateral_inset">18dp</dimen>

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

@@ -39,7 +39,7 @@ class SingleTabSwitcherCoordinator implements TabSwitcher {
         container.addView(singleTabView);
         mPropertyModelChangeProcessor = PropertyModelChangeProcessor.create(
                 propertyModel, singleTabView, SingleTabViewBinder::bind);
-        mTabListFaviconProvider = new TabListFaviconProvider(activity);
+        mTabListFaviconProvider = new TabListFaviconProvider(activity, false);
         mMediator = new SingleTabSwitcherMediator(
                 propertyModel, activity.getTabModelSelector(), mTabListFaviconProvider);
 

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

@@ -205,7 +205,7 @@ private void fetch() {
         // TODO (https://crbug.com/1048632): Use the current profile (i.e., regular profile or
         // incognito profile) instead of always using regular profile. It works correctly now, but
         // it is not safe.
-        mTabListFaviconProvider = new TabListFaviconProvider(context);
+        mTabListFaviconProvider = new TabListFaviconProvider(context, false);
 
         // Initialize Paints to use.
         mEmptyThumbnailPaint = new Paint();

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

@@ -230,7 +230,8 @@ public class TabListCoordinator implements Destroyable {
         // TODO (https://crbug.com/1048632): Use the current profile (i.e., regular profile or
         // incognito profile) instead of always using regular profile. It works correctly now, but
         // it is not safe.
-        TabListFaviconProvider tabListFaviconProvider = new TabListFaviconProvider(mContext);
+        TabListFaviconProvider tabListFaviconProvider =
+                new TabListFaviconProvider(mContext, mMode == TabListMode.STRIP);
 
         mMediator = new TabListMediator(context, mModel, tabModelSelector, thumbnailProvider,
                 titleProvider, tabListFaviconProvider, actionOnRelatedTabs,

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

@@ -10,6 +10,7 @@
 import android.graphics.Canvas;
 import android.graphics.PorterDuff;
 import android.graphics.drawable.Drawable;
+import android.graphics.drawable.LayerDrawable;
 
 import androidx.annotation.ColorInt;
 import androidx.appcompat.content.res.AppCompatResources;
@@ -20,17 +21,27 @@
 import org.chromium.chrome.browser.ui.favicon.FaviconHelper;
 import org.chromium.chrome.browser.ui.favicon.FaviconUtils;
 import org.chromium.chrome.tab_ui.R;
+import org.chromium.ui.base.ViewUtils;
 
 import java.util.List;
 
 /**
  * Provider for processed favicons in Tab list.
  */
 public class TabListFaviconProvider {
+    static final int FAVICON_BACKGROUND_DEFAULT_ALPHA = 255;
+    static final int FAVICON_BACKGROUND_SELECTED_ALPHA = 0;
+
     private static Drawable sRoundedGlobeDrawable;
+    private static Drawable sRoundedGlobeDrawableForStrip;
     private static Drawable sRoundedChromeDrawable;
+    private static Drawable sRoundedChromeDrawableForStrip;
     private static Drawable sRoundedComposedDefaultDrawable;
+    private final int mStripFaviconSize;
+    private final int mDefaultFaviconSize;
     private final int mFaviconSize;
+    private final int mFaviconInset;
+    private final boolean mIsTabStrip;
     private final Context mContext;
     @ColorInt
     private final int mDefaultIconColor;
@@ -43,29 +54,45 @@ public class TabListFaviconProvider {
 
     /**
      * Construct the provider that provides favicons for tab list.
-     * @param context The context to use for accessing {@link android.content.res.Resources}
+     * @param context    The context to use for accessing {@link android.content.res.Resources}
+     * @param isTabStrip Indicator for whether this class provides favicons for tab strip or not.
      *
      */
-    public TabListFaviconProvider(Context context) {
+    public TabListFaviconProvider(Context context, boolean isTabStrip) {
         mContext = context;
-        mFaviconSize = context.getResources().getDimensionPixelSize(R.dimen.default_favicon_size);
+        mDefaultFaviconSize =
+                context.getResources().getDimensionPixelSize(R.dimen.default_favicon_size);
+        mStripFaviconSize =
+                context.getResources().getDimensionPixelSize(R.dimen.tab_strip_favicon_size);
+        mFaviconSize = isTabStrip ? mStripFaviconSize : mDefaultFaviconSize;
+        mFaviconInset = ViewUtils.dpToPx(context,
+                context.getResources().getDimensionPixelSize(R.dimen.tab_strip_favicon_inset));
+        mIsTabStrip = isTabStrip;
 
         if (sRoundedGlobeDrawable == null) {
             // TODO(crbug.com/1066709): From Android Developer Documentation, we should avoid
             //  resizing vector drawable.
             Drawable globeDrawable =
                     AppCompatResources.getDrawable(context, R.drawable.ic_globe_24dp);
-            Bitmap globeBitmap =
-                    Bitmap.createBitmap(mFaviconSize, mFaviconSize, Bitmap.Config.ARGB_8888);
-            Canvas canvas = new Canvas(globeBitmap);
-            globeDrawable.setBounds(0, 0, mFaviconSize, mFaviconSize);
-            globeDrawable.draw(canvas);
-            sRoundedGlobeDrawable = processBitmap(globeBitmap);
+            sRoundedGlobeDrawable = processBitmap(
+                    getResizedBitmapFromDrawable(globeDrawable, mDefaultFaviconSize), false);
+        }
+        if (sRoundedGlobeDrawableForStrip == null) {
+            Drawable globeDrawable =
+                    AppCompatResources.getDrawable(context, R.drawable.ic_globe_24dp);
+            sRoundedGlobeDrawableForStrip = processBitmap(
+                    getResizedBitmapFromDrawable(globeDrawable, mStripFaviconSize), true);
         }
         if (sRoundedChromeDrawable == null) {
             Bitmap chromeBitmap =
                     BitmapFactory.decodeResource(mContext.getResources(), R.drawable.chromelogo16);
-            sRoundedChromeDrawable = processBitmap(chromeBitmap);
+            sRoundedChromeDrawable = processBitmap(chromeBitmap, false);
+        }
+        if (sRoundedChromeDrawableForStrip == null) {
+            Drawable chromeDrawable =
+                    AppCompatResources.getDrawable(context, R.drawable.chromelogo16);
+            sRoundedChromeDrawableForStrip = processBitmap(
+                    getResizedBitmapFromDrawable(chromeDrawable, mStripFaviconSize), true);
         }
         if (sRoundedComposedDefaultDrawable == null) {
             sRoundedComposedDefaultDrawable =
@@ -87,9 +114,27 @@ public boolean isInitialized() {
         return mIsInitialized;
     }
 
-    private Drawable processBitmap(Bitmap bitmap) {
-        return FaviconUtils.createRoundedBitmapDrawable(mContext.getResources(),
-                Bitmap.createScaledBitmap(bitmap, mFaviconSize, mFaviconSize, true));
+    private Bitmap getResizedBitmapFromDrawable(Drawable drawable, int size) {
+        Bitmap bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
+        Canvas canvas = new Canvas(bitmap);
+        drawable.setBounds(0, 0, size, size);
+        drawable.draw(canvas);
+        return bitmap;
+    }
+
+    private Drawable processBitmap(Bitmap bitmap, boolean isTabStrip) {
+        int size = isTabStrip ? mStripFaviconSize : mDefaultFaviconSize;
+        Drawable favicon = FaviconUtils.createRoundedBitmapDrawable(
+                mContext.getResources(), Bitmap.createScaledBitmap(bitmap, size, size, true));
+        if (!isTabStrip) {
+            return favicon;
+        }
+        Drawable circleBackground =
+                AppCompatResources.getDrawable(mContext, R.drawable.tab_strip_favicon_circle);
+        Drawable[] layers = {circleBackground, favicon};
+        LayerDrawable layerDrawable = new LayerDrawable(layers);
+        layerDrawable.setLayerInset(1, mFaviconInset, mFaviconInset, mFaviconInset, mFaviconInset);
+        return layerDrawable;
     }
 
     /**
@@ -116,7 +161,7 @@ public void getFaviconForUrlAsync(
                         if (image == null) {
                             faviconCallback.onResult(getRoundedGlobeDrawable(isIncognito));
                         } else {
-                            faviconCallback.onResult(processBitmap(image));
+                            faviconCallback.onResult(processBitmap(image, mIsTabStrip));
                         }
                     });
         }
@@ -135,7 +180,7 @@ public Drawable getFaviconForUrlSync(String url, boolean isIncognito, Bitmap ico
             return isNativeUrl ? getRoundedChromeDrawable(isIncognito)
                                : getRoundedGlobeDrawable(isIncognito);
         } else {
-            return processBitmap(icon);
+            return processBitmap(icon, mIsTabStrip);
         }
     }
 
@@ -153,7 +198,7 @@ public void getComposedFaviconImageAsync(
             if (image == null) {
                 faviconCallback.onResult(getDefaultComposedImage(isIncognito));
             } else {
-                faviconCallback.onResult(processBitmap(image));
+                faviconCallback.onResult(processBitmap(image, mIsTabStrip));
             }
         });
     }
@@ -163,10 +208,16 @@ private Drawable getDefaultComposedImage(boolean isIncognito) {
     }
 
     private Drawable getRoundedChromeDrawable(boolean isIncognito) {
+        if (mIsTabStrip) {
+            return sRoundedChromeDrawableForStrip;
+        }
         return getTintedDrawable(sRoundedChromeDrawable, isIncognito);
     }
 
     private Drawable getRoundedGlobeDrawable(boolean isIncognito) {
+        if (mIsTabStrip) {
+            return sRoundedGlobeDrawableForStrip;
+        }
         return getTintedDrawable(sRoundedGlobeDrawable, isIncognito);
     }
 

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

@@ -120,5 +120,5 @@ public class TabProperties {
 
     public static final PropertyKey[] ALL_KEYS_TAB_STRIP =
             new PropertyKey[] {TAB_ID, TAB_SELECTED_LISTENER, TAB_CLOSED_LISTENER, FAVICON,
-                    IS_SELECTED, TITLE, TABSTRIP_FAVICON_BACKGROUND_COLOR_ID};
+                    IS_SELECTED, TITLE, TABSTRIP_FAVICON_BACKGROUND_COLOR_ID, IS_INCOGNITO};
 }