[Leipzig][Desktop] Settings: Address account notice for deletion and …

…editing, Frontend part (2/2),

This CL adds a message to the edit dialog and changes the message
of removal confirmation dialog for addresses that are stored in
the user account (is not fully implemented yet, WIP on transition
phase).
These messages reference the user account by email,
that is why methods for retrieving this info were added,
see https://storage.cloud.google.com/chromium-translation-screenshots/48a5860ec79682593b542eed128cc49075262729

s/Remove/Delete was done to make different messages consistent
(which is a general target to use the delete word all over the place)

Bug: 1408424
Change-Id: I324f43d2ef5df8907ff870442b006998aedad18e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4196890
Commit-Queue: Dmitry Vykochko <vykochko@google.com>
Reviewed-by: Matthias Körber <koerber@google.com>
Cr-Commit-Position: refs/heads/main@{#1099763}

chrome/app/settings_strings.grdp

@@ -385,16 +385,13 @@
     Remove
   </message>
   <message name="IDS_SETTINGS_ADDRESS_REMOVE" desc="Label for a context menu item that removes the selected address." meaning="Remove selected address.">
-    Remove
-  </message>
-  <message name="IDS_SETTINGS_ADDRESS_REMOVE_CONFIRMATION_DESCRIPTION" desc="Description of confirmation phrase before remove address.">
-    Are you sure you want to remove this address?
+    Delete
   </message>
   <message name="IDS_SETTINGS_ADDRESS_REMOVE_CONFIRMATION_TITLE" desc="Address remove dialog confirmation title.">
-    Remove address
+    Delete address
   </message>
   <message name="IDS_SETTINGS_ADDRESS_REMOVED_MESSAGE" desc="Hidden text that is read to screen readers to confirm that an address was removed.">
-    Address removed
+    Address deleted
   </message>
   <message name="IDS_SETTINGS_CREDIT_CARD_REMOVE" desc="Label for a context menu item that removes the selected credit card." meaning="Remove selected credit card.">
     Remove

chrome/app/settings_strings_grdp/IDS_SETTINGS_ADDRESS_REMOVE.png.sha1

@@ -0,0 +1 @@
+3ca8e75f5cb3d7976a5a09e24e4ac350e9e934ba

chrome/app/settings_strings_grdp/IDS_SETTINGS_ADDRESS_REMOVED_MESSAGE.png.sha1

@@ -1 +1 @@
-ac67134e368bd8aa220fd41e7aa4d54154114498
+3ca8e75f5cb3d7976a5a09e24e4ac350e9e934ba

chrome/app/settings_strings_grdp/IDS_SETTINGS_ADDRESS_REMOVE_CONFIRMATION_TITLE.png.sha1

@@ -1 +1 @@
-49282fcc0be52aeefb07532f4356afbf994beba0
+3ca8e75f5cb3d7976a5a09e24e4ac350e9e934ba

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

@@ -38,14 +38,20 @@
       }
 
       #dialog::part(body-container) {
-        max-height: 450px;
+        max-height: 550px;
       }
 
       @media all and (max-height: 714px) {
         #dialog::part(body-container) {
           max-height: 270px;
         }
       }
+
+      #accountSourceNotice {
+        margin-bottom: 4px;
+        margin-top: 20px;
+        white-space: initial;
+      }
     </style>
     <cr-dialog id="dialog" close-text="$i18n{close}">
       <div slot="title">[[title_]]</div>
@@ -97,6 +103,9 @@
               maxlength="1000">
           </cr-input>
         </div>
+        <div id="accountSourceNotice" hidden="[[!isAccountAddress_]]">
+          [[i18n('editAccountAddressSourceNotice', accountInfo.email)]]
+        </div>
       </div>
       <div slot="button-container">
         <cr-button id="cancelButton" class="cancel-button"

chrome/browser/resources/settings/autofill_page/address_edit_dialog.ts

@@ -29,11 +29,12 @@ import {getTemplate} from './address_edit_dialog.html.js';
 
 export interface SettingsAddressEditDialogElement {
   $: {
+    accountSourceNotice: HTMLElement,
+    cancelButton: CrButtonElement,
     dialog: CrDialogElement,
     emailInput: CrInputElement,
     phoneInput: CrInputElement,
     saveButton: CrButtonElement,
-    cancelButton: CrButtonElement,
   };
 }
 
@@ -52,10 +53,11 @@ export class SettingsAddressEditDialogElement extends
   static get properties() {
     return {
       address: Object,
+      accountInfo: Object,
 
       title_: String,
 
-      countries_: Array,
+      countries_: Array<chrome.autofillPrivate.CountryEntry>,
 
       /**
        * Updates the address wrapper.
@@ -70,6 +72,11 @@ export class SettingsAddressEditDialogElement extends
       email_: String,
       canSave_: Boolean,
 
+      isAccountAddress_: {
+        type: Boolean,
+        computed: 'isAddressStoredInAccount_(address)',
+      },
+
       /**
        * True if honorifics are enabled.
        */
@@ -83,13 +90,15 @@ export class SettingsAddressEditDialogElement extends
   }
 
   address: chrome.autofillPrivate.AddressEntry;
+  accountInfo?: chrome.autofillPrivate.AccountInfo;
   private title_: string;
   private countries_: chrome.autofillPrivate.CountryEntry[];
   private countryCode_: string|undefined;
   private addressWrapper_: AddressComponentUi[][];
   private phoneNumber_: string;
   private email_: string;
   private canSave_: boolean;
+  private isAccountAddress_: boolean;
   private showHonorific_: boolean;
   private countryInfo_: CountryDetailManager =
       CountryDetailManagerImpl.getInstance();
@@ -203,6 +212,13 @@ export class SettingsAddressEditDialogElement extends
     return !country.countryCode;
   }
 
+  private isAddressStoredInAccount_(
+      address: chrome.autofillPrivate.AddressEntry): boolean {
+    return address.metadata !== undefined &&
+        address.metadata.source ===
+        chrome.autofillPrivate.AddressSource.ACCOUNT;
+  }
+
   private onCancelTap_() {
     this.$.dialog.cancel();
   }

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

@@ -1,6 +1,13 @@
 <cr-dialog show-on-attach id="dialog" close-text="$i18n{close}">
   <div slot="title">$i18n{removeAddressConfirmationTitle}</div>
-  <div slot="body">$i18n{removeAddressConfirmationDescription}</div>
+  <div slot="body" id="body">
+    <span hidden="[[isAccountAddress_]]">
+      $i18n{removeAddressConfirmationDescription}
+    </span>
+    <span id="accountAddressDescription" hidden="[[!isAccountAddress_]]">
+      [[i18n('deleteAccountAddressSourceNotice', accountInfo.email)]]
+    </span>
+  </div>
   <div slot="button-container">
     <cr-button class="cancel-button" on-click="onCancelClick" id="cancel">
       $i18n{cancel}

chrome/browser/resources/settings/autofill_page/address_remove_confirmation_dialog.ts

@@ -10,20 +10,26 @@ import 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
 
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
+import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
 import {getTemplate} from './address_remove_confirmation_dialog.html.js';
 
 
 export interface SettingsAddressRemoveConfirmationDialogElement {
   $: {
+    accountAddressDescription: HTMLElement,
+    body: HTMLElement,
+    cancel: HTMLElement,
     dialog: CrDialogElement,
     remove: HTMLElement,
-    cancel: HTMLElement,
   };
 }
 
+const SettingsAddressRemoveConfirmationDialogBase = I18nMixin(PolymerElement);
+
 export class SettingsAddressRemoveConfirmationDialogElement extends
-    PolymerElement {
+    SettingsAddressRemoveConfirmationDialogBase {
   static get is() {
     return 'settings-address-remove-confirmation-dialog';
   }
@@ -32,10 +38,33 @@ export class SettingsAddressRemoveConfirmationDialogElement extends
     return getTemplate();
   }
 
+  static get properties() {
+    return {
+      address: Object,
+      accountInfo: Object,
+
+      isAccountAddress_: {
+        type: Boolean,
+        computed: 'isAddressStoredInAccount_(address)',
+      },
+    };
+  }
+
+  address: chrome.autofillPrivate.AddressEntry;
+  accountInfo?: chrome.autofillPrivate.AccountInfo;
+  private isAccountAddress_: boolean;
+
   wasConfirmed(): boolean {
     return this.$.dialog.getNative().returnValue === 'success';
   }
 
+  private isAddressStoredInAccount_(
+      address: chrome.autofillPrivate.AddressEntry): boolean {
+    return address.metadata !== undefined &&
+        address.metadata.source ===
+        chrome.autofillPrivate.AddressSource.ACCOUNT;
+  }
+
   private onRemoveClick() {
     this.$.dialog.close();
   }

chrome/browser/resources/settings/autofill_page/autofill_manager_proxy.ts

@@ -5,12 +5,18 @@
 export type PersonalDataChangedListener =
     (addresses: chrome.autofillPrivate.AddressEntry[],
      creditCards: chrome.autofillPrivate.CreditCardEntry[],
-     ibans: chrome.autofillPrivate.IbanEntry[]) => void;
+     ibans: chrome.autofillPrivate.IbanEntry[],
+     accountInfo?: chrome.autofillPrivate.AccountInfo) => void;
 
 /**
  * Interface for all callbacks to the autofill API.
  */
 export interface AutofillManagerProxy {
+  /**
+   * Gets currently signed-in user account info, or undefined if not signed-in.
+   */
+  getAccountInfo(): Promise<chrome.autofillPrivate.AccountInfo|undefined>;
+
   /**
    * Add an observer to the list of personal data.
    */
@@ -40,6 +46,10 @@ export interface AutofillManagerProxy {
  * Implementation that accesses the private API.
  */
 export class AutofillManagerImpl implements AutofillManagerProxy {
+  getAccountInfo(): Promise<chrome.autofillPrivate.AccountInfo|undefined> {
+    return chrome.autofillPrivate.getAccountInfo();
+  }
+
   setPersonalDataManagerListener(listener: PersonalDataChangedListener) {
     chrome.autofillPrivate.onPersonalDataChanged.addListener(listener);
   }

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

@@ -69,11 +69,12 @@ <h2 class="flex">$i18n{addresses}</h2>
     </cr-action-menu>
     <template is="dom-if" if="[[showAddressDialog_]]" restamp>
       <settings-address-edit-dialog address="[[activeAddress]]"
-          on-close="onAddressDialogClose_">
+          account-info="[[accountInfo_]]" on-close="onAddressDialogClose_">
       </settings-address-edit-dialog>
     </template>
     <template is="dom-if" if="[[showAddressRemoveConfirmationDialog_]]" restamp>
       <settings-address-remove-confirmation-dialog
+          address="[[activeAddress]]" account-info="[[accountInfo_]]"
           on-close="onAddressRemoveConfirmationDialogClose_">
       </settings-address-remove-confirmation-dialog>
     </template>

chrome/browser/resources/settings/autofill_page/autofill_section.ts

@@ -47,6 +47,7 @@ export interface SettingsAutofillSectionElement {
     addressSharedMenu: CrActionMenuElement,
     addAddress: CrButtonElement,
     addressList: HTMLElement,
+    menuEditAddress: HTMLElement,
     menuRemoveAddress: HTMLElement,
     noAddressesLabel: HTMLElement,
   };
@@ -80,6 +81,7 @@ export class SettingsAutofillSectionElement extends
   prefs: {[key: string]: any};
   addresses: chrome.autofillPrivate.AddressEntry[];
   activeAddress: chrome.autofillPrivate.AddressEntry|null;
+  private accountInfo_?: chrome.autofillPrivate.AccountInfo;
   private showAddressDialog_: boolean;
   private showAddressRemoveConfirmationDialog_: boolean;
   private activeDialogAnchor_: HTMLElement|null;
@@ -110,17 +112,22 @@ export class SettingsAutofillSectionElement extends
         (addressList: chrome.autofillPrivate.AddressEntry[]) => {
           this.addresses = addressList;
         };
-
+    const setAccountListener =
+        (accountInfo?: chrome.autofillPrivate.AccountInfo) => {
+          this.accountInfo_ = accountInfo;
+        };
     const setPersonalDataListener: PersonalDataChangedListener =
-        (addressList, _cardList) => {
+        (addressList, _cardList, _ibans, accountInfo?) => {
           this.addresses = addressList;
+          this.accountInfo_ = accountInfo;
         };
 
     // Remember the bound reference in order to detach.
     this.setPersonalDataListener_ = setPersonalDataListener;
 
     // Request initial data.
     this.autofillManager_.getAddressList().then(setAddressesListener);
+    this.autofillManager_.getAccountInfo().then(setAccountListener);
 
     // Listen for changes.
     this.autofillManager_.setPersonalDataManagerListener(

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -977,6 +977,10 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
     {"addressesTitle", IDS_AUTOFILL_ADDRESSES_SETTINGS_TITLE},
     {"addAddressTitle", IDS_SETTINGS_AUTOFILL_ADDRESSES_ADD_TITLE},
     {"editAddressTitle", IDS_SETTINGS_AUTOFILL_ADDRESSES_EDIT_TITLE},
+    {"editAccountAddressSourceNotice",
+     IDS_AUTOFILL_EDIT_ACCOUNT_ADDRESS_SOURCE_NOTICE},
+    {"deleteAccountAddressSourceNotice",
+     IDS_AUTOFILL_DELETE_ACCOUNT_ADDRESS_SOURCE_NOTICE},
     {"addressCountry", IDS_SETTINGS_AUTOFILL_ADDRESSES_COUNTRY},
     {"addressPhone", IDS_SETTINGS_AUTOFILL_ADDRESSES_PHONE},
     {"addressEmail", IDS_SETTINGS_AUTOFILL_ADDRESSES_EMAIL},
@@ -990,7 +994,7 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
     {"removeAddressConfirmationTitle",
      IDS_SETTINGS_ADDRESS_REMOVE_CONFIRMATION_TITLE},
     {"removeAddressConfirmationDescription",
-     IDS_SETTINGS_ADDRESS_REMOVE_CONFIRMATION_DESCRIPTION},
+     IDS_AUTOFILL_DELETE_SYNC_ADDRESS_SOURCE_NOTICE},
     {"addressRemovedMessage", IDS_SETTINGS_ADDRESS_REMOVED_MESSAGE},
     {"removeCreditCard", IDS_SETTINGS_CREDIT_CARD_REMOVE},
     {"clearCreditCard", IDS_SETTINGS_CREDIT_CARD_CLEAR},

chrome/test/data/webui/settings/autofill_page_test.ts

@@ -250,8 +250,9 @@ suite('PasswordsAndForms', function() {
       const addressList = [createAddressEntry(), createAddressEntry()];
       const cardList = [createCreditCardEntry(), createCreditCardEntry()];
       const ibanList = [createIbanEntry(), createIbanEntry()];
+      const accountInfo = {email: 'stub-user@example.com'};
       autofillManager.lastCallback.setPersonalDataManagerListener!
-          (addressList, cardList, ibanList);
+          (addressList, cardList, ibanList, accountInfo);
       flush();
 
       assertEquals(
@@ -277,8 +278,9 @@ suite('PasswordsAndForms', function() {
       const addressList = [createAddressEntry(), createAddressEntry()];
       const cardList = [createCreditCardEntry(), createCreditCardEntry()];
       const ibanList = [createIbanEntry(), createIbanEntry()];
+      const accountInfo = {email: 'stub-user@example.com'};
       paymentsManager.lastCallback.setPersonalDataManagerListener!
-          (addressList, cardList, ibanList);
+          (addressList, cardList, ibanList, accountInfo);
       flush();
 
       assertEquals(
@@ -304,8 +306,9 @@ suite('PasswordsAndForms', function() {
       const addressList = [createAddressEntry(), createAddressEntry()];
       const cardList = [createCreditCardEntry(), createCreditCardEntry()];
       const ibanList = [createIbanEntry(), createIbanEntry()];
+      const accountInfo = {email: 'stub-user@example.com'};
       paymentsManager.lastCallback.setPersonalDataManagerListener!
-          (addressList, cardList, ibanList);
+          (addressList, cardList, ibanList, accountInfo);
       flush();
 
       assertEquals(