Replace Theme.AppCompat with Theme.MaterialComponents

Bug: 1157905
Change-Id: Iba0f18cff8eaac0ea98d27ce7a91e31535317240
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2875849
Reviewed-by: Theresa  <twellington@chromium.org>
Reviewed-by: Ted Choc <tedchoc@chromium.org>
Reviewed-by: Sky Malice <skym@chromium.org>
Commit-Queue: Sinan Sahin <sinansahin@google.com>
Cr-Commit-Position: refs/heads/master@{#886136}

chrome/android/expectations/monochrome_public_bundle.AndroidManifest.expected

@@ -520,7 +520,7 @@
         android:name="org.chromium.chrome.browser.sync.ui.TrustedVaultKeyRetrievalProxyActivity"
         android:excludeFromRecents="true"
         android:exported="false"
-        android:theme="@style/Theme.AppCompat">
+        android:theme="@style/Theme.MaterialComponents">
     </activity>  # DIFF-ANCHOR: 76b60c10
     <activity  # DIFF-ANCHOR: 43bfa5de
         android:name="org.chromium.chrome.browser.test_dummy.TestDummyActivity"
@@ -528,7 +528,7 @@
         android:excludeFromRecents="true"
         android:exported="true"
         android:noHistory="true"
-        android:theme="@style/Theme.AppCompat">
+        android:theme="@style/Theme.MaterialComponents">
     </activity>  # DIFF-ANCHOR: 43bfa5de
     <activity  # DIFF-ANCHOR: b007dcaa
         android:name="org.chromium.chrome.browser.vr.VrCancelAnimationActivity"

chrome/android/expectations/trichrome_chrome_bundle.AndroidManifest.expected

@@ -493,7 +493,7 @@
         android:name="org.chromium.chrome.browser.sync.ui.TrustedVaultKeyRetrievalProxyActivity"
         android:excludeFromRecents="true"
         android:exported="false"
-        android:theme="@style/Theme.AppCompat">
+        android:theme="@style/Theme.MaterialComponents">
     </activity>  # DIFF-ANCHOR: 76b60c10
     <activity  # DIFF-ANCHOR: 43bfa5de
         android:name="org.chromium.chrome.browser.test_dummy.TestDummyActivity"
@@ -501,7 +501,7 @@
         android:excludeFromRecents="true"
         android:exported="true"
         android:noHistory="true"
-        android:theme="@style/Theme.AppCompat">
+        android:theme="@style/Theme.MaterialComponents">
     </activity>  # DIFF-ANCHOR: 43bfa5de
     <activity  # DIFF-ANCHOR: b007dcaa
         android:name="org.chromium.chrome.browser.vr.VrCancelAnimationActivity"

chrome/android/feed/core/java/res/values/styles.xml

@@ -10,7 +10,7 @@
   <!-- TODO(crbug.com/1039415): See if this can be simplified.
        Android can swap themes for us automatically if we use styles with the
        same name in values and values-night.-->
-  <style name="Light" parent="@style/Theme.AppCompat.Light">
+  <style name="Light" parent="@style/Theme.MaterialComponents.Light">
     <item name="feedTextRippleDrawable">@drawable/feed_text_ripple_drawable_light</item>
     <!-- TODO(crbug.com/1039415): This is an old text style color (changed for
      Modern update back in 2018). Swap for @color/default_text_color.-->
@@ -19,7 +19,7 @@
     <item name="feedSpinnerColor">@color/modern_blue_600</item>
   </style>
 
-  <style name="Dark" parent="@style/Theme.AppCompat">
+  <style name="Dark" parent="@style/Theme.MaterialComponents">
     <item name="feedTextRippleDrawable">@drawable/feed_text_ripple_drawable_dark</item>
     <item name="feedPrimaryTextColor">@color/feed_default_text_color_dark</item>
     <item name="feedSecondaryTextColor">@color/feed_default_text_color_secondary_dark</item>

chrome/android/java/AndroidManifest.xml

@@ -535,7 +535,7 @@ by a child template that "extends" this file.
             @android:style/Theme.NoDisplay can't be used here.
         -->
         <activity android:name="org.chromium.chrome.browser.sync.ui.TrustedVaultKeyRetrievalProxyActivity"
-            android:theme="@style/Theme.AppCompat"
+            android:theme="@style/Theme.MaterialComponents"
             android:excludeFromRecents="true"
             android:exported="false">
         </activity>
@@ -1165,7 +1165,7 @@ by a child template that "extends" this file.
             android:excludeFromRecents="true"
             android:exported="true"
             android:noHistory="true"
-            android:theme="@style/Theme.AppCompat"
+            android:theme="@style/Theme.MaterialComponents"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|mcc|mnc|screenLayout|smallestScreenSize" >
         </activity>
         {% endif %}

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

@@ -15,7 +15,8 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="@dimen/pref_autofill_field_large_top_margin"
-        android:layout_marginBottom="@dimen/pref_autofill_field_bottom_margin">
+        android:layout_marginBottom="@dimen/pref_autofill_field_bottom_margin"
+        app:errorTextAppearance="@style/TextAppearance.ErrorCaption">
 
         <!-- TODO(crbug.com/900912): Fix and remove lint ignore -->
         <EditText

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

@@ -15,6 +15,14 @@
         <!-- With ActionBar -->
         <item name="windowActionBar">true</item>
         <item name="windowNoTitle">false</item>
+
+        <!-- We override actionBarTheme because actionBarStyle does not affect the title text color
+             when we use a MaterialComponents based app theme. -->
+        <item name="actionBarTheme">@style/ActionBarThemeOverlay</item>
+    </style>
+
+    <style name="ActionBarThemeOverlay" parent="ThemeOverlay.MaterialComponents.ActionBar">
+        <item name="android:textColorPrimary">@color/default_text_color</item>
     </style>
 
     <style name="Base.Theme.Chromium.WithWindowAnimation">
@@ -114,6 +122,7 @@
         <!-- Status bar color -->
         <item name="colorPrimaryDark">@color/dark_status_bar_color</item>
         <item name="actionBarStyle">@style/ManageSpaceActionBarModern</item>
+        <item name="actionBarTheme">@style/ManageSpaceActionBarThemeOverlay</item>
     </style>
 
     <!-- Trusted Web Activities -->
@@ -129,7 +138,7 @@
         TODO(https://crbug.com/819142): Remove textAppearance when all TextViews have text style
         explicitly specified. -->
     <style name="Base.V17.Theme.Chromium.DialogWhenLarge"
-        parent="Theme.AppCompat.DayNight.DialogWhenLarge">
+        parent="Theme.MaterialComponents.DayNight.DialogWhenLarge">
         <item name="android:windowBackground">@drawable/bg_white_dialog</item>
         <item name="android:textAppearance">@style/TextAppearance.TextMedium.Primary</item>
         <item name="android:textColorLink">@color/default_text_color_link</item>
@@ -137,6 +146,7 @@
         <item name="colorAccent">@color/default_control_color_active</item>
         <item name="colorControlHighlight">@color/control_highlight_color</item>
         <item name="spinnerStyle">@style/SpinnerStyle</item>
+        <item name="textInputStyle">@style/TextInputStyle</item>
 
         <!-- Remove ActionBar -->
         <item name="windowNoTitle">true</item>
@@ -152,8 +162,8 @@
     </style>
 
     <!-- Settings -->
-    <style name="SettingsActionBarModern" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
-      <item name="titleTextStyle">@style/TextAppearance.Headline.Primary</item>
+    <style name="SettingsActionBarModern" parent="@style/Widget.MaterialComponents.Light.ActionBar.Solid">
+        <item name="titleTextStyle">@style/TextAppearance.Headline.Primary</item>
     </style>
 
     <style name="TextAppearance.AccessibilityTextPreference">
@@ -164,6 +174,9 @@
     <style name="ManageSpaceActionBarModern" parent="SettingsActionBarModern">
         <item name="titleTextStyle">@style/TextAppearance.Headline.Primary.Light</item>
     </style>
+    <style name="ManageSpaceActionBarThemeOverlay" parent="ActionBarThemeOverlay">
+        <item name="android:textColorPrimary">@color/default_text_color_light</item>
+    </style>
     <style name="ManageSpaceActivityButton">
       <item name="android:layout_width">wrap_content</item>
       <item name="android:layout_height">wrap_content</item>
@@ -335,11 +348,6 @@
         <item name="tint">@color/default_icon_color_tint_list</item>
         <item name="android:background">?attr/selectableItemBackground</item>
     </style>
-    <style name="ModernToolbar" parent="Widget.AppCompat.Toolbar">
-        <item name="titleTextAppearance">@style/TextAppearance.Headline.Primary</item>
-        <item name="windowActionBarOverlay">true</item>
-        <item name="android:background">@color/default_bg_color</item>
-    </style>
     <style name="ToolbarButton">
         <item name="android:background">?attr/selectableItemBackground</item>
         <item name="android:layout_width">@dimen/toolbar_button_width</item>

chrome/android/junit/src/org/chromium/chrome/browser/toolbar/menu_button/MenuButtonTest.java

@@ -57,7 +57,7 @@ public class MenuButtonTest {
     public void setUp() {
         MockitoAnnotations.initMocks(this);
         mActivity = Robolectric.buildActivity(Activity.class).setup().get();
-        mActivity.setTheme(org.chromium.chrome.R.style.Theme_AppCompat);
+        mActivity.setTheme(org.chromium.chrome.R.style.Theme_MaterialComponents);
         mMenuButton = (MenuButton) ((ViewGroup) LayoutInflater.from(mActivity).inflate(
                                             R.layout.menu_button, new LinearLayout(mActivity)))
                               .getChildAt(0);

chrome/browser/android/examples/custom_tabs_client/BUILD.gn

@@ -47,7 +47,10 @@ android_resources("chrome_tabs_client_example_apk_resources") {
     "src/res/values/strings.xml",
   ]
   android_manifest = "src/AndroidManifest.xml"
-  deps = [ "//third_party/android_deps:android_support_v7_appcompat_java" ]
+  deps = [
+    "//third_party/android_deps:android_support_v7_appcompat_java",
+    "//third_party/android_deps:material_design_java",
+  ]
 }
 
 android_apk("custom_tabs_client_example_apk") {
@@ -69,6 +72,7 @@ android_apk("custom_tabs_client_example_apk") {
   deps = [
     ":chrome_tabs_client_example_apk_resources",
     "//third_party/android_deps:android_support_v7_appcompat_java",
+    "//third_party/android_deps:material_design_java",
     "//third_party/androidx:androidx_annotation_annotation_java",
     "//third_party/androidx:androidx_appcompat_appcompat_java",
     "//third_party/androidx:androidx_browser_browser_java",

chrome/browser/android/examples/custom_tabs_client/src/AndroidManifest.xml

@@ -22,7 +22,7 @@
         android:icon="@drawable/ic_launcher"
         android:label="@string/app_name"
         android:allowBackup="false"
-        android:theme="@style/Theme.AppCompat.Light" >
+        android:theme="@style/Theme.MaterialComponents.Light" >
 
         <activity
             android:name="org.chromium.customtabsclient.MainActivity"

chrome/browser/android/webapps/launchpad/java/src/org/chromium/chrome/browser/webapps/launchpad/LaunchpadCoordinatorTest.java

@@ -65,7 +65,7 @@ public class LaunchpadCoordinatorTest {
     @Before
     public void setUp() {
         mActivity = Robolectric.buildActivity(Activity.class).setup().get();
-        mActivity.setTheme(org.chromium.chrome.R.style.Theme_AppCompat);
+        mActivity.setTheme(org.chromium.chrome.R.style.Theme_MaterialComponents);
     }
 
     private LaunchpadCoordinator createCoordinator(boolean isSeparateActivity) {

components/browser_ui/contacts_picker/android/java/res/layout/contacts_picker_toolbar.xml

@@ -11,7 +11,8 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:paddingStart="0dp"
-    android:paddingEnd="8dp">
+    android:paddingEnd="8dp"
+    style="@style/ModernToolbar">
 
     <LinearLayout
         android:layout_width="wrap_content"

components/browser_ui/photo_picker/android/java/res/layout/photo_picker_toolbar.xml

@@ -10,7 +10,8 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:paddingStart="0dp"
-    android:paddingEnd="0dp">
+    android:paddingEnd="0dp"
+    style="@style/ModernToolbar">
     <org.chromium.ui.widget.ButtonCompat
         android:id="@+id/done"
         android:layout_width="wrap_content"

components/browser_ui/styles/android/java/res/values/styles.xml

@@ -5,7 +5,7 @@
 
 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Theme shared between Chrome and embedders. -->
-    <style name="Base.Theme.BrowserUI" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <style name="Base.Theme.BrowserUI" parent="Theme.MaterialComponents.DayNight.NoActionBar">
         <!-- Text colors -->
         <item name="android:textColorLink">@color/default_text_color_link</item>
         <item name="android:textColorHighlight">@color/text_highlight_color</item>
@@ -45,9 +45,23 @@
 
         <!-- Shape -->
         <item name="menuCornerSize">@dimen/popup_bg_corner_radius</item>
+
+        <!-- This is for keeping the current TextInputLayout style.
+             TODO(crbug.com/1206024): Remove or update once the design for the app is updated. -->
+        <item name="textInputStyle">@style/TextInputStyle</item>
+        <!-- Overrides to keep the current styling for the widgets after migrating to the
+             MaterialComponents theme.
+             TODO(crbug.com/1165077): Remove these when the widgets are being migrated. -->
+        <item name="radioButtonStyle">@style/Widget.AppCompat.CompoundButton.RadioButton</item>
+        <item name="checkboxStyle">@style/Widget.AppCompat.CompoundButton.CheckBox</item>
+        <item name="switchStyle">@style/Widget.AppCompat.CompoundButton.Switch</item>
     </style>
     <style name="Theme.BrowserUI" parent="Base.Theme.BrowserUI" />
 
+    <style name="TextInputStyle" parent="Widget.Design.TextInputLayout">
+        <item name="errorTextAppearance">@style/TextAppearance.ErrorCaption</item>
+    </style>
+
     <!-- Popup and long-press context popup menu style -->
     <style name="PopupMenuStyle" parent="Widget.AppCompat.Light.PopupMenu">
         <item name="android:popupBackground">@drawable/popup_bg_tinted</item>
@@ -56,7 +70,7 @@
     </style>
 
     <!-- Basic theme for an overflow menu displayed in Chrome. -->
-    <style name="Base.OverflowMenuThemeOverlay" parent="Theme.AppCompat.DayNight">
+    <style name="Base.OverflowMenuThemeOverlay" parent="Theme.MaterialComponents.DayNight">
         <item name="android:popupBackground">@null</item>
         <item name="android:listDivider">@null</item>
         <item name="android:listPreferredItemHeightSmall">48dp</item>
@@ -66,7 +80,8 @@
     <style name="OverflowMenuThemeOverlay" parent="Base.OverflowMenuThemeOverlay" />
 
     <!-- AlertDialog styles -->
-    <style name="Base.Theme.Chromium.AlertDialog" parent="Theme.AppCompat.DayNight.Dialog.Alert">
+    <style name="Base.Theme.Chromium.AlertDialog"
+        parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
         <item name="android:textColorPrimary">@color/default_text_color</item>
         <item name="android:windowBackground">@drawable/popup_bg_tinted</item>
         <item name="android:windowTitleStyle">@style/TextAppearance.AlertDialogTitleStyle</item>
@@ -89,7 +104,7 @@
         <item name="windowActionBar">false</item>
     </style>
 
-    <style name="AlertDialogButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
+    <style name="AlertDialogButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
         <item name="android:textAppearance">@style/TextAppearance.Button.Text.Blue</item>
     </style>
 
@@ -157,6 +172,13 @@
     </style>
     <style name="Theme.Chromium.Fullscreen" parent="Base.Theme.Chromium.Fullscreen" />
 
+    <style name="ModernToolbar" parent="Widget.MaterialComponents.Toolbar">
+        <item name="titleTextAppearance">@style/TextAppearance.Headline.Primary</item>
+        <item name="titleTextColor">@color/default_text_color</item>
+        <item name="windowActionBarOverlay">true</item>
+        <item name="android:background">@color/default_bg_color</item>
+    </style>
+
     <!-- Refactored styles -->
     <style name="ThemeRefactorAppThemeOverlay">
         <item name="menuCornerSize">@dimen/refactor_menu_rounded_corner_radius</item>

components/payments/content/android/java/res/layout/payment_request_editor.xml

@@ -16,7 +16,8 @@
         android:layout_height="?attr/actionBarSize"
         android:layout_alignParentTop="true"
         android:layout_alignParentStart="true"
-        android:layout_alignParentEnd="true" />
+        android:layout_alignParentEnd="true"
+        style="@style/ModernToolbar" />
 
     <include layout="@layout/settings_action_bar_shadow" />
 

docs/ui/android/night_mode.md

@@ -107,7 +107,7 @@ Colors used in styles can be either adaptive or independent of night mode. When
 
 ### Themes
 
-If adding a new theme, make sure the parent (or any indirect ancestor) theme of the new theme is one of the AppCompat DayNight themes (prefixed with `Theme.AppCompat.DayNight`), or alternatively, define the same theme in values-night/ with the desired parent theme for night mode. See [dark theme](https://developer.android.com/preview/features/darktheme) in Android developer guide for more details.
+If adding a new theme, make sure the parent (or any indirect ancestor) theme of the new theme is one of the MaterialComponents DayNight themes (prefixed with `Theme.MaterialComponents.DayNight`), or alternatively, define the same theme in values-night/ with the desired parent theme for night mode. See [dark theme](https://developer.android.com/preview/features/darktheme) in Android developer guide for more details.
 
 ### Troubleshooting