[Nickname Management][Settings page] Rearrange credit card edit dialog.

Rearrange credit card edit dialog when nickname management is enabled.
Add the UI string, expose the flag via loadTimeData, and use hidden
and dom-if to achieve the fields reorder.
Before:
cardholder name (Autofocused)
card number
expiration month/year

After:
card number (Autofocused)
expiration month/year
cardholder name
card nickname

Added interactive ui tests for credit card edit dialog to test fields,
focus and input values.

Local build test video (googlers only):
https://drive.google.com/file/d/12yQecsJWEA0YtA2_ITSKDKVGcOHK20YB/view?usp=sharing

Also add nickname field to CreditCardEntry. The follow-up CL is to update
autofill_private api to populate nickname from native credit_card and
to save nickname from settings page input.

Bug: 1082013
Change-Id: I45c1a7a0c1c6dd43a885e1f5b77e722cf2ba89c4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2208028
Commit-Queue: Sujie Zhu <sujiezhu@google.com>
Reviewed-by: Devlin <rdevlin.cronin@chromium.org>
Reviewed-by: Siyu An <siyua@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Jared Saul <jsaul@google.com>
Cr-Original-Commit-Position: refs/heads/master@{#771139}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 1d1411ee3401ef9df9d78c80b31fb466e50223ac
1 file changed