[Nickname Management][Settings page] Add nickname character count.

Only when nickname input field is focused, we will display the nickname
character count (e.g. 0/25) as the suffix of the nickname input field.

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

Bug: 1082013
Change-Id: Ieb4f2d8d6f162911c2cb64ecf130da28c3a37b97
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2219304
Commit-Queue: Sujie Zhu <sujiezhu@google.com>
Reviewed-by: dpapad <dpapad@chromium.org>
Reviewed-by: Jared Saul <jsaul@google.com>
Cr-Commit-Position: refs/heads/master@{#773955}

chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.html

@@ -44,9 +44,17 @@
         width: 100px;
       }
 
-      /* For nickname input, we might dispay error message.*/
+      /* For nickname input, we might dispay error message. cr-input-width is
+      the same as other input fields. We reserve extra 40px for the suffix
+      character count width.*/
       #nicknameInput {
         --cr-input-error-display: block;
+        --cr-input-width: var(--settings-input-max-width);
+        width: calc(var(--settings-input-max-width) + 40px);
+      }
+
+      #nicknameInput:not(:focus-within) #charCount {
+        display: none;
       }
     </style>
     <cr-dialog id="dialog" close-text="$i18n{close}">
@@ -98,6 +106,9 @@
               on-input="validateNickname_"
               invalid="[[nicknameInvalid_]]"
               error-message="$i18n{creditCardNicknameInvalid}">
+              <div id="charCount" slot="suffix">
+                [[computeNicknameCharCount_(creditCard.nickname)]]/25
+              </div>
           </cr-input>
         </template>
         <div id="saved-to-this-device-only-label">

chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.js

@@ -205,4 +205,13 @@ Polymer({
     this.nicknameInvalid_ =
         NICKNAME_INVALID_REGEX.test(this.creditCard.nickname);
   },
+
+  /**
+   * @param {string|undefined} nickname of the card, undefined when not set.
+   * @return {number} nickname character length.
+   * @private
+   */
+  computeNicknameCharCount_(nickname) {
+    return (nickname || '').length;
+  },
 });

chrome/test/data/webui/settings/payments_section_interactive_test.js

@@ -6,11 +6,10 @@
 import 'chrome://settings/lazy_load.js';
 
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
-import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {PaymentsManagerImpl} from 'chrome://settings/lazy_load.js';
 import {createCreditCardEntry, createEmptyCreditCardEntry, TestPaymentsManager} from 'chrome://test/settings/passwords_and_autofill_fake_data.js';
-import {eventToPromise, whenAttributeIs} from 'chrome://test/test_util.m.js';
+import {eventToPromise, isVisible, whenAttributeIs} from 'chrome://test/test_util.m.js';
 // clang-format on
 
 /**
@@ -294,4 +293,44 @@ suite('PaymentsSectionCreditCardEditDialogTest', function() {
     // Save button is back to enabled since user updates with a valid nickname.
     assertFalse(creditCardDialog.$.saveButton.disabled);
   });
+
+  test('only show nickname character count when focused', async function() {
+    loadTimeData.overrideValues({nicknameManagementEnabled: true});
+    const creditCardDialog = createAddCreditCardDialog();
+
+    // Wait for the dialog to open.
+    await whenAttributeIs(creditCardDialog.$$('#dialog'), 'open', '');
+
+    const nicknameInput = creditCardDialog.$$('#nicknameInput');
+    assertTrue(!!nicknameInput);
+    const characterCount = creditCardDialog.$$('#charCount');
+    // Character count is not shown when add card dialog is open (not focusing
+    // on nickname input field).
+    assertFalse(isVisible(characterCount));
+
+    // User clicks on nickname input.
+    nicknameInput.focus();
+    // Character count is shown when nickname input field is focused.
+    assertTrue(isVisible(characterCount));
+    // For new card, the nickname is unset.
+    assertTrue(characterCount.textContent.includes('0/25'));
+
+    // User types in one character. Ensure the character count is dynamically
+    // updated.
+    typeInNickname(nicknameInput, 'a');
+    assertTrue(characterCount.textContent.includes('1/25'));
+    // User types in total 5 characters.
+    typeInNickname(nicknameInput, 'abcde');
+    assertTrue(characterCount.textContent.includes('5/25'));
+
+    // User click outside of nickname input, the character count isn't shown.
+    nicknameInput.blur();
+    assertFalse(isVisible(characterCount));
+
+    // User clicks on nickname input again.
+    nicknameInput.focus();
+    // Character count is shown when nickname input field is re-focused.
+    assertTrue(isVisible(characterCount));
+    assertTrue(characterCount.textContent.includes('5/25'));
+  });
 });