[Signin][Android][UI] Add subtitle to web sign-in bottomsheet

This CL adds subtitle to the web sign-in bottom sheet.

Screenshot: https://crbug.com/1103328#c3
Bug: 1103328
Change-Id: I0a7bd47e069a9d1440805cb87c5e4e480eb95090
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2310992Reviewed-by: Ted Choc <tedchoc@chromium.org>
Reviewed-by: Alex Ilin <alexilin@chromium.org>
Commit-Queue: Alice Wang <aliceywang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#791344}

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

@@ -35,6 +35,16 @@
         android:textAppearance="@style/TextAppearance.TextLarge.Primary"
         android:text="@string/signin_account_picker_dialog_title" />
 
+    <org.chromium.ui.widget.TextViewWithLeading
+        android:id="@+id/account_picker_bottom_sheet_subtitle"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="16dp"
+        android:gravity="center_horizontal"
+        android:textAppearance="@style/TextAppearance.TextMedium.Secondary"
+        android:text="@string/signin_account_picker_bottom_sheet_subtitle"
+        app:leading="@dimen/text_size_medium_leading" />
+
     <View
         style="@style/HorizontalDivider" />
 
@@ -42,7 +52,10 @@
         android:id="@+id/account_picker_account_list"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_margin="16dp"
+        android:layout_marginStart="16dp"
+        android:layout_marginEnd="16dp"
+        android:layout_marginTop="8dp"
+        android:layout_marginBottom="8dp"
         android:visibility="gone"
         tools:listitem="@layout/account_chooser_dialog_item" />
 
@@ -50,7 +63,9 @@
         android:id="@+id/account_picker_selected_account"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_margin="16dp"
+        android:layout_marginStart="16dp"
+        android:layout_marginEnd="16dp"
+        android:layout_marginTop="8dp"
         layout="@layout/account_picker_row" />
 
     <org.chromium.ui.widget.ButtonCompat

chrome/android/java/src/org/chromium/chrome/browser/signin/account_picker/AccountPickerBottomSheetCoordinator.java

@@ -5,8 +5,10 @@
 package org.chromium.chrome.browser.signin.account_picker;
 
 import android.content.Context;
+import android.view.View;
 
 import androidx.annotation.MainThread;
+import androidx.annotation.VisibleForTesting;
 
 import org.chromium.components.browser_ui.bottomsheet.BottomSheetController;
 import org.chromium.components.browser_ui.bottomsheet.BottomSheetObserver;
@@ -17,6 +19,7 @@ import org.chromium.ui.modelutil.PropertyModelChangeProcessor;
  * Coordinator of the account picker bottom sheet used in web signin flow.
  */
 public class AccountPickerBottomSheetCoordinator {
+    private final AccountPickerBottomSheetView mView;
     private final AccountPickerBottomSheetMediator mAccountPickerBottomSheetMediator;
     private final AccountPickerCoordinator mAccountPickerCoordinator;
     private final BottomSheetController mBottomSheetController;
@@ -38,16 +41,16 @@ public class AccountPickerBottomSheetCoordinator {
     public AccountPickerBottomSheetCoordinator(Context context,
             BottomSheetController bottomSheetController,
             AccountPickerDelegate accountPickerDelegate) {
-        AccountPickerBottomSheetView view = new AccountPickerBottomSheetView(context);
+        mView = new AccountPickerBottomSheetView(context);
         mAccountPickerBottomSheetMediator =
                 new AccountPickerBottomSheetMediator(context, accountPickerDelegate);
         mAccountPickerCoordinator = new AccountPickerCoordinator(
-                view.getAccountListView(), mAccountPickerBottomSheetMediator, null);
+                mView.getAccountListView(), mAccountPickerBottomSheetMediator, null);
         mBottomSheetController = bottomSheetController;
-        PropertyModelChangeProcessor.create(mAccountPickerBottomSheetMediator.getModel(), view,
+        PropertyModelChangeProcessor.create(mAccountPickerBottomSheetMediator.getModel(), mView,
                 AccountPickerBottomSheetViewBinder::bind);
         mBottomSheetController.addObserver(mBottomSheetObserver);
-        mBottomSheetController.requestShowContent(view, true);
+        mBottomSheetController.requestShowContent(mView, true);
     }
 
     /**
@@ -60,4 +63,9 @@ public class AccountPickerBottomSheetCoordinator {
 
         mBottomSheetController.removeObserver(mBottomSheetObserver);
     }
+
+    @VisibleForTesting
+    public View getBottomSheetViewForTesting() {
+        return mView.getContentView();
+    }
 }

chrome/android/javatests/src/org/chromium/chrome/browser/signin/AccountPickerBottomSheetTest.java

@@ -34,6 +34,7 @@ import org.junit.runner.RunWith;
 import org.mockito.Mock;
 
 import org.chromium.base.test.util.CommandLineFlags;
+import org.chromium.base.test.util.Feature;
 import org.chromium.chrome.R;
 import org.chromium.chrome.browser.flags.ChromeFeatureList;
 import org.chromium.chrome.browser.flags.ChromeSwitches;
@@ -41,6 +42,7 @@ import org.chromium.chrome.browser.signin.account_picker.AccountPickerBottomShee
 import org.chromium.chrome.browser.signin.account_picker.AccountPickerDelegate;
 import org.chromium.chrome.test.ChromeJUnit4ClassRunner;
 import org.chromium.chrome.test.ChromeTabbedActivityTestRule;
+import org.chromium.chrome.test.util.ChromeRenderTestRule;
 import org.chromium.chrome.test.util.browser.Features;
 import org.chromium.chrome.test.util.browser.signin.AccountManagerTestRule;
 import org.chromium.components.browser_ui.bottomsheet.BottomSheetController;
@@ -50,6 +52,8 @@ import org.chromium.components.signin.test.util.FakeAccountManagerFacade;
 import org.chromium.components.signin.test.util.FakeProfileDataSource;
 import org.chromium.content_public.browser.test.util.TestThreadUtils;
 
+import java.io.IOException;
+
 /**
  * Tests account picker bottom sheet of the web signin flow.
  *
@@ -78,6 +82,10 @@ public class AccountPickerBottomSheetTest {
     public final Features.InstrumentationProcessor mProcessor =
             new Features.InstrumentationProcessor();
 
+    @Rule
+    public final ChromeRenderTestRule mRenderTestRule =
+            ChromeRenderTestRule.Builder.withPublicCorpus().setRevision(0).build();
+
     private final ChromeTabbedActivityTestRule mActivityTestRule =
             new ChromeTabbedActivityTestRule();
 
@@ -87,6 +95,8 @@ public class AccountPickerBottomSheetTest {
     private final AccountManagerTestRule mAccountManagerTestRule =
             new AccountManagerTestRule(mFakeProfileDataSource);
 
+    private AccountPickerBottomSheetCoordinator mCoordinator;
+
     // Destroys the mock AccountManagerFacade in the end as ChromeActivity may needs
     // to unregister observers in the stub.
     @Rule
@@ -111,6 +121,15 @@ public class AccountPickerBottomSheetTest {
         checkCollapsedAccountList(PROFILE_DATA1);
     }
 
+    @Test
+    @MediumTest
+    @Feature("RenderTest")
+    public void testCollapsedSheetWithAccountView() throws IOException {
+        buildAndShowCollapsedBottomSheet();
+        mRenderTestRule.render(
+                mCoordinator.getBottomSheetViewForTesting(), "collapsed_sheet_with_account");
+    }
+
     @Test
     @MediumTest
     public void testExpandedSheet() {
@@ -126,6 +145,14 @@ public class AccountPickerBottomSheetTest {
         onView(withId(R.id.account_picker_continue_as_button)).check(matches(not(isDisplayed())));
     }
 
+    @Test
+    @MediumTest
+    @Feature("RenderTest")
+    public void testExpandedSheetView() throws IOException {
+        buildAndShowExpandedBottomSheet();
+        mRenderTestRule.render(mCoordinator.getBottomSheetViewForTesting(), "expanded_sheet");
+    }
+
     @Test
     @MediumTest
     public void testCollapsedSheetWithZeroAccount() {
@@ -323,9 +350,8 @@ public class AccountPickerBottomSheetTest {
 
     private void buildAndShowCollapsedBottomSheet() {
         TestThreadUtils.runOnUiThreadBlocking(() -> {
-            AccountPickerBottomSheetCoordinator accountPickerBottomSheetCoordinator =
-                    new AccountPickerBottomSheetCoordinator(mActivityTestRule.getActivity(),
-                            getBottomSheetController(), mAccountPickerDelegateMock);
+            mCoordinator = new AccountPickerBottomSheetCoordinator(mActivityTestRule.getActivity(),
+                    getBottomSheetController(), mAccountPickerDelegateMock);
         });
         InstrumentationRegistry.getInstrumentation().waitForIdleSync();
     }

chrome/browser/ui/android/strings/android_chrome_strings.grd

@@ -2311,6 +2311,9 @@ To change this setting, <ph name="BEGIN_LINK">&lt;resetlink&gt;</ph>reset sync<p
       <message name="IDS_SIGNIN_ACCOUNT_PICKER_DIALOG_TITLE" desc="The title for the dialog that shows the list of accounts on the device and asks the user to select one of these accounts. [CHAR-LIMIT=27]">
         Choose an account
       </message>
+      <message name="IDS_SIGNIN_ACCOUNT_PICKER_BOTTOM_SHEET_SUBTITLE" desc="The subtitle for the account picker bottom sheet that tells the user what happens if the button 'Continue as John Doe' is clicked">
+        You’ll be signed in with your Google Account\n(this won’t turn on Chrome Sync)
+      </message>
 
       <!-- Personalized Signin Promos Strings -->
       <message name="IDS_SIGNIN_PROMO_CONTINUE_AS" desc="Button that the user can press to login without asking the password and continue using Chrome with this acccount.">

chrome/browser/ui/android/strings/android_chrome_strings_grd/IDS_SIGNIN_ACCOUNT_PICKER_BOTTOM_SHEET_SUBTITLE.png.sha1

+2dcacf290c7a55db4d3cb803a107fa375645fa6f
\ No newline at end of file