[Autofill] Implement confirmation dialog for removing address

This patch implements showing confirmation dialog for removing address.
It makes easy user to recognize removing address.  It is similar in
looks and functionality to the already confirmation dialog of history.

Change-Id: Idf7b819279b314d7ba85c6099302b4924e9155f9
Bug: 935227
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2009165
Commit-Queue: Jaeyong Bae <jdragon.bae@gmail.com>
Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#816507}

chrome/app/settings_strings.grdp

@@ -262,6 +262,12 @@
   <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?
+  </message>
+  <message name="IDS_SETTINGS_ADDRESS_REMOVE_CONFIRMATION_TITLE" desc="Address remove dialog confirmation title.">
+    Remove address
+  </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
   </message>

chrome/app/settings_strings_grdp/IDS_SETTINGS_ADDRESS_REMOVE_CONFIRMATION_DESCRIPTION.png.sha1

+49282fcc0be52aeefb07532f4356afbf994beba0

chrome/app/settings_strings_grdp/IDS_SETTINGS_ADDRESS_REMOVE_CONFIRMATION_TITLE.png.sha1

+49282fcc0be52aeefb07532f4356afbf994beba0

chrome/browser/resources/settings/BUILD.gn

@@ -157,6 +157,7 @@ preprocess_grit("preprocess_generated") {
     "autofill_page/credit_card_edit_dialog.js",
     "autofill_page/autofill_section.js",
     "autofill_page/address_edit_dialog.js",
+    "autofill_page/address_remove_confirmation_dialog.js",
     "autofill_page/password_check.js",
     "autofill_page/password_check_edit_dialog.js",
     "autofill_page/password_check_edit_disclaimer_dialog.js",

chrome/browser/resources/settings/autofill_page/BUILD.gn

@@ -11,6 +11,7 @@ js_type_check("closure_compile_module") {
   closure_flags = settings_closure_flags
   deps = [
     ":address_edit_dialog",
+    ":address_remove_confirmation_dialog",
     ":autofill_page",
     ":autofill_section",
     ":avatar_icon",
@@ -72,6 +73,7 @@ js_library("autofill_page") {
 js_library("autofill_section") {
   deps = [
     ":address_edit_dialog",
+    ":address_remove_confirmation_dialog",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_action_menu:cr_action_menu.m",
     "//ui/webui/resources/js:assert.m",
@@ -96,6 +98,13 @@ js_library("avatar_icon") {
 js_library("blocking_request_manager") {
 }
 
+js_library("address_remove_confirmation_dialog") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
+  ]
+}
+
 js_library("credit_card_edit_dialog") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
@@ -383,6 +392,7 @@ js_library("upi_id_list_entry") {
 html_to_js("web_components") {
   js_files = [
     "address_edit_dialog.js",
+    "address_remove_confirmation_dialog.js",
     "autofill_page.js",
     "avatar_icon.js",
     "autofill_section.js",

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

+<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="button-container">
+    <cr-button class="cancel-button" on-click="onCancelClick" id="cancel">
+      $i18n{cancel}
+    </cr-button>
+    <cr-button class="action-button" on-click="onRemoveClick" id="remove">
+      $i18n{removeAddress}
+    </cr-button>
+  </div>
+</cr-dialog>

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview 'address-remove-confirmation-dialog' is the dialog that allows
+ * removing a saved address.
+ */
+import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+Polymer({
+  is: 'settings-address-remove-confirmation-dialog',
+
+  _template: html`{__html_template__}`,
+
+  /** @return {boolean} Whether the user confirmed the dialog. */
+  wasConfirmed() {
+    return /** @type {!CrDialogElement} */ (this.$.dialog)
+               .getNative()
+               .returnValue === 'success';
+  },
+
+  /** @private */
+  onRemoveClick() {
+    this.$.dialog.close();
+  },
+
+  /** @private */
+  onCancelClick() {
+    this.$.dialog.cancel();
+  },
+});

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

@@ -77,3 +77,8 @@
           on-close="onAddressDialogClose_">
       </settings-address-edit-dialog>
     </template>
+    <template is="dom-if" if="[[showAddressRemoveConfirmationDialog_]]" restamp>
+      <settings-address-remove-confirmation-dialog
+          on-close="onAddressRemoveConfirmationDialogClose_">
+      </settings-address-remove-confirmation-dialog>
+    </template>

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

@@ -17,6 +17,7 @@ import '../controls/extension_controlled_indicator.m.js';
 import '../controls/settings_toggle_button.m.js';
 import '../prefs/prefs.m.js';
 import './address_edit_dialog.js';
+import './address_remove_confirmation_dialog.js';
 import './passwords_shared_css.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
@@ -121,6 +122,9 @@ Polymer({
 
     /** @private */
     showAddressDialog_: Boolean,
+
+    /** @private */
+    showAddressRemoveConfirmationDialog_: Boolean,
   },
 
   listeners: {
@@ -244,13 +248,26 @@ Polymer({
     window.open(loadTimeData.getString('manageAddressesUrl'));
   },
 
+  /** @private */
+  onAddressRemoveConfirmationDialogClose_: function() {
+    // Check if the dialog was confirmed before closing it.
+    if (/** @type {!SettingsAddressRemoveConfirmationDialogElement} */
+        (this.$$('settings-address-remove-confirmation-dialog'))
+            .wasConfirmed()) {
+      this.autofillManager_.removeAddress(
+          /** @type {string} */ (this.activeAddress.guid));
+    }
+    this.showAddressRemoveConfirmationDialog_ = false;
+    focusWithoutInk(assert(this.activeDialogAnchor_));
+    this.activeDialogAnchor_ = null;
+  },
+
   /**
    * Handles tapping on the "Remove" address button.
    * @private
    */
   onMenuRemoveAddressTap_() {
-    this.autofillManager_.removeAddress(
-        /** @type {string} */ (this.activeAddress.guid));
+    this.showAddressRemoveConfirmationDialog_ = true;
     this.$.addressSharedMenu.close();
   },
 

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

@@ -880,6 +880,10 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
       {"addressPhone", IDS_SETTINGS_AUTOFILL_ADDRESSES_PHONE},
       {"addressEmail", IDS_SETTINGS_AUTOFILL_ADDRESSES_EMAIL},
       {"removeAddress", IDS_SETTINGS_ADDRESS_REMOVE},
+      {"removeAddressConfirmationTitle",
+       IDS_SETTINGS_ADDRESS_REMOVE_CONFIRMATION_TITLE},
+      {"removeAddressConfirmationDescription",
+       IDS_SETTINGS_ADDRESS_REMOVE_CONFIRMATION_DESCRIPTION},
       {"removeCreditCard", IDS_SETTINGS_CREDIT_CARD_REMOVE},
       {"clearCreditCard", IDS_SETTINGS_CREDIT_CARD_CLEAR},
       {"creditCardType", IDS_SETTINGS_AUTOFILL_CREDIT_CARD_TYPE_COLUMN_LABEL},

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

@@ -8,8 +8,8 @@ import 'chrome://settings/settings.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {AutofillManagerImpl, CountryDetailManagerImpl} from 'chrome://settings/lazy_load.js';
-import {createAddressEntry, createEmptyAddressEntry, TestAutofillManager} from 'chrome://test/settings/passwords_and_autofill_fake_data.js';
-import {eventToPromise} from 'chrome://test/test_util.m.js';
+import {AutofillManagerExpectations, createAddressEntry, createEmptyAddressEntry, TestAutofillManager} from 'chrome://test/settings/passwords_and_autofill_fake_data.js';
+import {eventToPromise, whenAttributeIs} from 'chrome://test/test_util.m.js';
 // clang-format on
 
 /**
@@ -96,6 +96,44 @@ function createAddressDialog(address) {
   });
 }
 
+/**
+ * Creates the remove address dialog. Simulate clicking "Remove" button in
+ * autofill section.
+ * @param {!TestAutofillManager} autofillManager
+ * @return {!SettingsAddressRemoveConfirmationDialogElement}
+ */
+function createRemoveAddressDialog(autofillManager) {
+  const address = createAddressEntry();
+
+  // Override the AutofillManagerImpl for testing.
+  autofillManager.data.addresses = [address];
+  AutofillManagerImpl.instance_ = autofillManager;
+
+  document.body.innerHTML = '';
+  const section = document.createElement('settings-autofill-section');
+  document.body.appendChild(section);
+  flush();
+
+  const addressList = section.$.addressList;
+  const row = addressList.children[0];
+  assertTrue(!!row);
+
+  // Simulate clicking the 'Remove' button in the menu.
+  assertTrue(!!section.$$('#addressMenu'));
+  section.$$('#addressMenu').click();
+  flush();
+
+  assertTrue(!!section.$$('#menuRemoveAddress'));
+  assertFalse(!!section.$$('settings-address-remove-confirmation-dialog'));
+  section.$$('#menuRemoveAddress').click();
+  flush();
+
+  assertTrue(!!section.$$('settings-address-remove-confirmation-dialog'));
+  const removeAddressDialog =
+      section.$$('settings-address-remove-confirmation-dialog');
+  return removeAddressDialog;
+}
+
 suite('AutofillSectionUiTest', function() {
   test('testAutofillExtensionIndicator', function() {
     // Initializing with fake prefs
@@ -256,6 +294,47 @@ suite('AutofillSectionAddressTests', function() {
     });
   });
 
+  test('verifyRemoveAddressDialogConfirmed', async function() {
+    const autofillManager = new TestAutofillManager();
+    const removeAddressDialog = createRemoveAddressDialog(autofillManager);
+
+    // Wait for the dialog to open.
+    await whenAttributeIs(removeAddressDialog.$$('#dialog'), 'open', '');
+
+    assertTrue(!!removeAddressDialog.$$('#remove'));
+    removeAddressDialog.$$('#remove').click();
+
+    // Wait for the dialog to close.
+    await eventToPromise('close', removeAddressDialog);
+
+    assertTrue(removeAddressDialog.wasConfirmed());
+    const expected = new AutofillManagerExpectations();
+    expected.requestedAddresses = 1;
+    expected.listeningAddresses = 1;
+    expected.removeAddress = 1;
+    autofillManager.assertExpectations(expected);
+  });
+
+  test('verifyRemoveAddressDialogCanceled', async function() {
+    const autofillManager = new TestAutofillManager();
+    const removeAddressDialog = createRemoveAddressDialog(autofillManager);
+
+    // Wait for the dialog to open.
+    await whenAttributeIs(removeAddressDialog.$$('#dialog'), 'open', '');
+
+    assertTrue(!!removeAddressDialog.$$('#cancel'));
+    removeAddressDialog.$$('#cancel').click();
+
+    // Wait for the dialog to close.
+    await eventToPromise('close', removeAddressDialog);
+    assertFalse(removeAddressDialog.wasConfirmed());
+    const expected = new AutofillManagerExpectations();
+    expected.requestedAddresses = 1;
+    expected.listeningAddresses = 1;
+    expected.removeAddress = 0;
+    autofillManager.assertExpectations(expected);
+  });
+
   test('verifyCountryIsSaved', function() {
     const address = createEmptyAddressEntry();
     return createAddressDialog(address).then(function(dialog) {

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

@@ -421,6 +421,7 @@ export class AutofillManagerExpectations {
   constructor() {
     this.requestedAddresses = 0;
     this.listeningAddresses = 0;
+    this.removeAddress = 0;
   }
 }
 
@@ -464,7 +465,9 @@ export class TestAutofillManager {
   saveAddress() {}
 
   /** @override */
-  removeAddress() {}
+  removeAddress() {
+    this.actual_.removeAddress++;
+  }
 
   /**
    * Verifies expectations.
@@ -474,6 +477,7 @@ export class TestAutofillManager {
     const actual = this.actual_;
     assertEquals(expected.requestedAddresses, actual.requestedAddresses);
     assertEquals(expected.listeningAddresses, actual.listeningAddresses);
+    assertEquals(expected.removeAddress, actual.removeAddress);
   }
 }