Commit 421b8c44 authored by Sujie Zhu's avatar Sujie Zhu Committed by Chromium LUCI CQ

[Nickname Management] Clean up nickname management in settings UI

Clean up nicknameManagementEnabled flag and remove the legacy elements and
CSS config.

Local build test video after clean up(googlers only):
https://drive.google.com/file/d/1uYmVuIjlThiGl-TTeGvPrZWvDtkBJwKJ/view?usp=sharing&resourcekey=0-hMW3nVLEyQ7fbLzV5RHwqg

Bug: 1082013
Change-Id: Ie5ba1372cf510decb17a113c67ed5aee11eeb755
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2600180
Commit-Queue: Sujie Zhu <sujiezhu@google.com>
Reviewed-by: default avatarEsmael Elmoslimany <aee@chromium.org>
Reviewed-by: default avatarJared Saul <jsaul@google.com>
Cr-Commit-Position: refs/heads/master@{#839145}
parent 0852cc53
<style include="cr-shared-style settings-shared md-select">
cr-input {
--cr-input-error-display: none;
margin-bottom: var(--cr-form-field-bottom-spacing);
width: var(--settings-input-max-width);
}
/* Larger cr-input margin (by reserving space for error display) when
nickname management is enabled. */
:host([nickname-management-enabled_]) cr-input {
/* Larger cr-input margin (by reserving space for error display). */
--cr-input-error-display: block;
margin-bottom: 0;
width: var(--settings-input-max-width);
}
/* Override the padding-top (the space is set by save-to-this-device) when
nickname management is enabled. */
:host([nickname-management-enabled_]) div[slot='button-container'] {
/* Override the padding-top (the space is set by save-to-this-device). */
div[slot='button-container'] {
padding-top: 0;
}
......@@ -22,33 +15,11 @@
margin-inline-start: 8px;
}
#expired {
align-items: center;
background-color: var(--paper-red-50);
color: var(--settings-error-color);
display: flex;
height: 40px;
margin-top: 12px;
padding: 0 0 0 8px;
}
@media (prefers-color-scheme: dark) {
#expired {
background-color: unset;
font-weight: bold;
padding: 0;
}
}
#month {
width: 70px;
}
#saved-to-this-device-only-label {
margin-top: var(--cr-form-field-bottom-spacing);
}
:host([nickname-management-enabled_]) #saved-to-this-device-only-label {
/* Overall space between input fields, including space between
nicknameInput and saved-to-this-device text, between
saved-to-this-device text and button. */
......@@ -91,13 +62,13 @@
}
#expired-error,
:host([nickname-management-enabled_][expired_]) #expiration {
:host([expired_]) #expiration {
color: var(--google-red-600);
}
@media (prefers-color-scheme: dark) {
#expired-error,
:host([nickname-management-enabled_][expired_]) #expiration {
:host([expired_]) #expiration {
color: var(--google-red-refresh-300);
}
}
......@@ -105,12 +76,6 @@
<cr-dialog id="dialog" close-text="$i18n{close}">
<div slot="title">[[title_]]</div>
<div slot="body">
<!-- Place and autofocus the cardholder name as the first field when
nickname management is not enabled. -->
<cr-input id="legacyNameInput" label="$i18n{creditCardName}"
value="{{creditCard.name}}" spellcheck="false"
hidden$="[[nicknameManagementEnabled_]]" autofocus>
</cr-input>
<cr-input id="numberInput" label="$i18n{creditCardNumber}"
value="{{creditCard.cardNumber}}" autofocus>
</cr-input>
......@@ -136,33 +101,20 @@
<option>[[item]]</option>
</template>
</select>
<!-- Use new error message text under the drop down when nickname
management is enabled.-->
<div id="expired-error" hidden="[[!nicknameManagementEnabled_]]">
$i18n{creditCardExpired}
</div>
<!-- Reuse current error message span when nickname management is
disabled.-->
<span id="expired" hidden="[[!showLegacyExpiredError_(expired_,
nicknameManagementEnabled_)]]">
$i18n{creditCardExpired}
</span>
<!-- Place cardholder name field and nickname field after expiration
when nickname management is enabled.-->
<template is="dom-if" if="[[nicknameManagementEnabled_]]">
<cr-input id="nameInput" label="$i18n{creditCardName}"
value="{{creditCard.name}}" spellcheck="false">
</cr-input>
<cr-input id="nicknameInput" label="$i18n{creditCardNickname}"
value="{{creditCard.nickname}}" spellcheck="false" maxlength="25"
on-input="validateNickname_"
invalid="[[nicknameInvalid_]]"
error-message="$i18n{creditCardNicknameInvalid}">
<div id="charCount" slot="suffix">
[[computeNicknameCharCount_(creditCard.nickname)]]/25
</div>
</cr-input>
</template>
<div id="expired-error">$i18n{creditCardExpired}</div>
<!-- Place cardholder name field and nickname field after expiration.-->
<cr-input id="nameInput" label="$i18n{creditCardName}"
value="{{creditCard.name}}" spellcheck="false">
</cr-input>
<cr-input id="nicknameInput" label="$i18n{creditCardNickname}"
value="{{creditCard.nickname}}" spellcheck="false" maxlength="25"
on-input="validateNickname_"
invalid="[[nicknameInvalid_]]"
error-message="$i18n{creditCardNicknameInvalid}">
<div id="charCount" slot="suffix">
[[computeNicknameCharCount_(creditCard.nickname)]]/25
</div>
</cr-input>
<div id="saved-to-this-device-only-label">
$i18n{savedToThisDeviceOnly}
</div>
......
......@@ -70,18 +70,6 @@ Polymer({
/** @private {string|undefined} */
expirationMonth_: String,
/**
* True if nickname management is enabled.
* @private
*/
nicknameManagementEnabled_: {
type: Boolean,
reflectToAttribute: true,
value() {
return loadTimeData.getBoolean('nicknameManagementEnabled');
}
},
/**
* Whether the current nickname input is invalid.
* @private
......@@ -211,24 +199,12 @@ Polymer({
!this.expired_ && !this.nicknameInvalid_;
},
/**
* @return {boolean} True iff the card is expired and nickname management is
* disabled.
* @private
*/
// TODO(crbug.com/1082013): Remove legacy expired error message when nickname
// management is fully enabled.
showLegacyExpiredError_() {
return !this.nicknameManagementEnabled_ && this.expired_;
},
/**
* Handles a11y error announcement the same way as in cr-input.
* @private
*/
onExpiredChanged_() {
const ERROR_ID =
this.nicknameManagementEnabled_ ? 'expired-error' : 'expired';
const ERROR_ID = 'expired-error';
const errorElement = this.$$(`#${ERROR_ID}`);
// Readding attributes is needed for consistent announcement by VoiceOver
if (this.expired_) {
......
......@@ -1118,10 +1118,6 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
base::FeatureList::IsEnabled(
autofill::features::kAutofillSaveAndFillVPA));
html_source->AddBoolean(
"nicknameManagementEnabled",
base::FeatureList::IsEnabled(
autofill::features::kAutofillEnableCardNicknameManagement));
AddLocalizedStringsBulk(html_source, kLocalizedStrings);
}
......
......@@ -309,14 +309,15 @@ suite('PaymentsSection', function() {
.then(function() {
// Not expired, but still can't be saved, because there's no
// name.
assertTrue(creditCardDialog.$.expired.hidden);
const expiredError = creditCardDialog.$$('#expired-error');
assertEquals('hidden', getComputedStyle(expiredError).visibility);
assertTrue(creditCardDialog.$.saveButton.disabled);
// Add a name.
creditCardDialog.set('creditCard.name', 'Jane Doe');
flush();
assertTrue(creditCardDialog.$.expired.hidden);
assertEquals('hidden', getComputedStyle(expiredError).visibility);
assertFalse(creditCardDialog.$.saveButton.disabled);
const savedPromise =
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment