Font size in the warning message is 14sp[1] as in the spec, other dropdown item labels by default are 18sp[2][3], that's why warning message looks smaller.

In my personal preference, I prefer the label to be bigger(18sp) and 'Learn more' sublabel remains to be 14sp, to keep the warning message consistent with other autofill dropdown items.


[1]: https://cs.chromium.org/chromium/src/components/autofill/android/java/res/values/dimens.xml?q=dropdown_item_smaller_label_font_size&sq=package:chromium&l=23&dr=C
[2]:https://cs.chromium.org/chromium/src/ui/android/java/res/layout/dropdown_item.xml?dr=C&q=dropdown_item.xml&sq=package:chromium&l=41
[3]: https://cs.chromium.org/chromium/src/ui/android/java/res/values/dimens.xml?q=dropdown_item_label_font_size&sq=package:chromium&l=10&dr=C

Thanks Liu! Hwi, what do you think?

Assigning for triaging purposes. Please reassign as necessary.

Sorry for the delayed response. I haven't done looking at the latest implementation yet. I'll do so next 2-3 days.

You're right on the original spec string is too small.

Added this comments to the original spec image: go/fnsmsc

Change requests after reviewing current implementation on 57.0.2974:

On Android(Mobile):

1. icon size: 24x24 (before: 16x16)
2. Horizontal spacings between row elements: 16 (before:  8)
3. Font size: 18 (before:  14)
4. Row height: 48 (before: 32)

5. Also note on the text color for "Login/Payment autofill disabled": it should be #646464 (current implementation looks darker)

Thanks!

As per 5. The font color, the colors of the Autofill popup are being changed to be consistent with the Omnibox and support the "theme," which apparently is good for accessibility.

See the CL here: https://codereview.chromium.org/2581513002/diff/120001/chrome/browser/ui/autofill/autofill_popup_layout_model.cc

If you follow the code, the Payment disabled message will be #646464. So all this to say, is that once the CL above lands, we are good to go.

Wait, what I said is on Desktop :|

I think the color to be changed is R.drawable.dropdown_label_color on Android, which is also the same color as regular row items.

https://cs.chromium.org/chromium/src/ui/android/java/res/drawable/dropdown_label_color.xml?dr=CSs&q=dropdown_label_color&sq=package:chromium&l=1

Code taken from https://cs.chromium.org/chromium/src/ui/android/java/src/org/chromium/ui/DropdownItemBase.java?rcl=0&l=48

Sorry for the confusion!

lshang, would you be able to take this? If not, I can. Thanks!

I've already started new project in the new team. Thanks for taking care of this!

Screenshots from CL https://codereview.chromium.org/2627153007 are attached.

hwi@, how do these look to you?

Deleted: login not secure.png 165 KB

	login not secure.png 165 KB View Download

Deleted: payment not secure.png 166 KB

	payment not secure.png 166 KB View Download

c13:

Thanks estark@!

The alignment looks off by following the spec I provided. The following adjustments should help (also image attached):

1. Keep the side margins (10) coming from the dropdown - marked in blue
2. Remove the extra margins (6) in the first row - marked in red
3. Change the middle margins of the first row from 16 to 10 - marked in pink

As a result, the margins that look like 16 will become 10. 

Apologies for any churns.

Thanks!

Deleted: clank-margin.png 53.7 KB

	clank-margin.png 53.7 KB View Download

Re #16, no problem, let me know how these look.

Deleted: login not secure - smaller margins.png 185 KB

	login not secure - smaller margins.png 185 KB View Download

Deleted: payment not secure - smaller margins.png 139 KB

	payment not secure - smaller margins.png 139 KB View Download

c17: LGTM - Thanks estark@!

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7723c111843d5e749daaf879c9df8205b17fe737

commit 7723c111843d5e749daaf879c9df8205b17fe737
Author: estark <estark@chromium.org>
Date: Thu Jan 19 18:16:46 2017

Fix styling of Form-Not-Secure warnings on Android

This CL updates the styling of the Android form-not-secure warning to
match the specs (which are at go/fns-ui-spec).

The changes are:
- Make the "Payment autofilling disabled" a single-line label so that it
  has the same padding as the other autofill suggestions.
- Change the color of "Payment autofilling disabled" to #646464.
- Make both the label and sublabel of the "Payment not secure" item font
  size 18sp, adjust the icon size to 24, and change horizontal spacings
  between elements to 10.

These changes are implemented by allowing AutofillSuggestion to override
the necessary layout values and font sizes for the "Payment autofilling
disabled" and "Payment/Login not secure" dropdown items.

Screenshots are in:
https://bugs.chromium.org/p/chromium/issues/detail?id=678479#c13

BUG= 678479 

Review-Url: https://codereview.chromium.org/2627153007
Cr-Commit-Position: refs/heads/master@{#444790}

[modify] https://crrev.com/7723c111843d5e749daaf879c9df8205b17fe737/chrome/browser/ui/android/autofill/autofill_popup_view_android.cc
[modify] https://crrev.com/7723c111843d5e749daaf879c9df8205b17fe737/components/autofill/android/java/res/values/colors.xml
[modify] https://crrev.com/7723c111843d5e749daaf879c9df8205b17fe737/components/autofill/android/java/res/values/dimens.xml
[modify] https://crrev.com/7723c111843d5e749daaf879c9df8205b17fe737/components/autofill/android/java/src/org/chromium/components/autofill/AutofillSuggestion.java
[modify] https://crrev.com/7723c111843d5e749daaf879c9df8205b17fe737/ui/android/java/res/layout/dropdown_item.xml
[modify] https://crrev.com/7723c111843d5e749daaf879c9df8205b17fe737/ui/android/java/res/values/dimens.xml
[modify] https://crrev.com/7723c111843d5e749daaf879c9df8205b17fe737/ui/android/java/src/org/chromium/ui/DropdownAdapter.java
[modify] https://crrev.com/7723c111843d5e749daaf879c9df8205b17fe737/ui/android/java/src/org/chromium/ui/DropdownItem.java
[modify] https://crrev.com/7723c111843d5e749daaf879c9df8205b17fe737/ui/android/java/src/org/chromium/ui/DropdownItemBase.java