plugin_vm: add uninstall confirmation dialog

Bug: 1023256
Change-Id: I69df55758d0388f9d1630bd97e57df4518b1e932
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1977885
Commit-Queue: Julian Watson <juwa@google.com>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Nic Hollingum <hollingum@google.com>
Cr-Commit-Position: refs/heads/master@{#731716}

chrome/app/settings_strings.grdp

@@ -730,6 +730,9 @@
     <message name="IDS_SETTINGS_PLUGIN_VM_REMOVE_BUTTON" desc="Label for the button to open a dialog confirming removal of Plugin VM.">
       Remove
     </message>
+    <message name="IDS_SETTINGS_PLUGIN_VM_CONFIRM_REMOVE_DIALOG_BODY" desc="Message of the confirmation dialog displayed before removal begins.">
+      Removing Plugin VM will delete your VM. This includes its applications, settings, and data. Are you sure you wish to continue?
+    </message>
 
     <!-- Android Apps Page -->
     <message name="IDS_SETTINGS_ANDROID_APPS_TITLE" desc="The title of Google Play Store (Arc++ / Android Apps) section.">

chrome/browser/resources/settings/chromeos/plugin_vm_page/BUILD.gn

@@ -8,15 +8,14 @@ js_type_check("closure_compile") {
   deps = [
     ":plugin_vm_browser_proxy",
     ":plugin_vm_page",
+    ":plugin_vm_remove_confirmation_dialog",
     ":plugin_vm_shared_paths",
     ":plugin_vm_subpage",
   ]
 }
 
 js_library("plugin_vm_browser_proxy") {
-  deps = [
-    "//ui/webui/resources/js:cr",
-  ]
+  deps = [ "//ui/webui/resources/js:cr" ]
 }
 
 js_library("plugin_vm_page") {
@@ -35,7 +34,9 @@ js_library("plugin_vm_shared_paths") {
 }
 
 js_library("plugin_vm_subpage") {
-  deps = [
-    "../..:route",
-  ]
+  deps = [ "../..:route" ]
+}
+
+js_library("plugin_vm_remove_confirmation_dialog") {
+  deps = [ ":plugin_vm_browser_proxy" ]
 }

chrome/browser/resources/settings/chromeos/plugin_vm_page/plugin_vm_remove_confirmation_dialog.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="plugin_vm_browser_proxy.html">
+<link rel="import" href="../../settings_shared_css.html">
+
+<dom-module id="settings-plugin-vm-remove-confirmation-dialog">
+  <template>
+    <style include="settings-shared"></style>
+    <cr-dialog id="dialog" close-text="$i18n{close}">
+      <div slot="title">$i18n{pluginVmRemove}</div>
+      <div slot="body">$i18n{pluginVmRemoveConfirmationDialogMessage}</div>
+      <div slot="button-container">
+        <cr-button id="cancel" class="cancel-button"
+            on-click="onCancelClick_">$i18n{cancel}</cr-button>
+        <cr-button id="continue" class="action-button"
+            on-click="onContinueClick_">$i18n{pluginVmRemoveButton}</cr-button>
+      </div>
+    </cr-dialog>
+  </template>
+  <script src="plugin_vm_remove_confirmation_dialog.js"></script>
+</dom-module>

chrome/browser/resources/settings/chromeos/plugin_vm_page/plugin_vm_remove_confirmation_dialog.js

+// Copyright 2019 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 'settings-plugin-vm-remove-confirmation-dialog' is a component
+ * warning the user that remove plugin vm removes their vm's data and settings.
+ */
+Polymer({
+  is: 'settings-plugin-vm-remove-confirmation-dialog',
+
+  /** @override */
+  attached: function() {
+    this.$.dialog.showModal();
+  },
+
+  /** @private */
+  onCancelClick_: function() {
+    this.$.dialog.cancel();
+  },
+
+  /** @private */
+  onContinueClick_: function() {
+    settings.PluginVmBrowserProxyImpl.getInstance().removePluginVm();
+    this.$.dialog.close();
+  },
+});

chrome/browser/resources/settings/chromeos/plugin_vm_page/plugin_vm_subpage.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
+<link rel="import" href="plugin_vm_remove_confirmation_dialog.html">
 <link rel="import" href="../../settings_shared_css.html">
 <link rel="import" href="../../controls/settings_toggle_button.html">
 
@@ -19,11 +20,16 @@
     <settings-toggle-button label="$i18n{pluginVmPrinterAccess}">
     </settings-toggle-button>
     <div id="plugin-vm-remove" class="settings-box">
-      <div id="plugin-vm-remove-label" class="start">$i18n{pluginVmRemove}</div>
-      <cr-button on-click="onRemoveClick_"
-        aria-labelledby="plugin-vm-remove-label">
-          $i18n{pluginVmRemoveButton}
+      <div id="pluginVmRemoveLabel" class="start">$i18n{pluginVmRemove}</div>
+      <cr-button on-click="onRemoveClick_" id="pluginVmRemoveButton"
+          aria-labelledby="pluginVmRemoveLabel">
+        $i18n{pluginVmRemoveButton}
       </cr-button>
+      <template is="dom-if" if="[[showRemoveConfirmationDialog_]]" restamp>
+        <settings-plugin-vm-remove-confirmation-dialog
+            on-close="onRemoveConfirmationDialogClose_">
+        </settings-plugin-vm-remove-confirmation-dialog>
+      </template>
     </div>
   </template>
   <script src="plugin_vm_subpage.js"></script>

chrome/browser/resources/settings/chromeos/plugin_vm_page/plugin_vm_subpage.js

@@ -16,6 +16,12 @@ Polymer({
       type: Object,
       notify: true,
     },
+
+    /** @private */
+    showRemoveConfirmationDialog_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   // TODO(juwa@google.com): Navigate back if plugin vm uninstalled.
@@ -26,11 +32,19 @@ Polymer({
   },
 
   /**
-   * Removes PluginVm.
-   * TODO(juwa@google.com): Show a confirmation dialog before removing.
+   * Shows a confirmation dialog, which if accepted will remove PluginVm.
    * @private
    */
   onRemoveClick_() {
-    settings.PluginVmBrowserProxyImpl.getInstance().removePluginVm();
+    this.showRemoveConfirmationDialog_ = true;
+  },
+
+  /**
+   * Hides the remove confirmation dialog.
+   * @private
+   */
+  onRemoveConfirmationDialogClose_: function() {
+    this.showRemoveConfirmationDialog_ = false;
+    this.$.pluginVmRemoveButton.focus();
   },
 });

chrome/browser/resources/settings/os_settings_resources.grd

@@ -1193,6 +1193,12 @@
       <structure name="IDR_OS_SETTINGS_PLUGIN_VM_BROWSER_PROXY_HTML"
                  file="chromeos/plugin_vm_page/plugin_vm_browser_proxy.html"
                  type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_PLUGIN_VM_REMOVE_CONFIRMATION_DIALOG_JS"
+                 file="chromeos/plugin_vm_page/plugin_vm_remove_confirmation_dialog.js"
+                 type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_PLUGIN_VM_REMOVE_CONFIRMATION_DIALOG_HTML"
+                 file="chromeos/plugin_vm_page/plugin_vm_remove_confirmation_dialog.html"
+                 type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_USERS_PAGE_ADD_USER_DIALOG_JS"
                  file="chromeos/os_people_page/users_add_user_dialog.js"
                  type="chrome_html" />

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

@@ -670,6 +670,8 @@ void AddPluginVmStrings(content::WebUIDataSource* html_source,
        IDS_SETTINGS_PLUGIN_VM_SHARED_PATHS_REMOVE_SHARING},
       {"pluginVmRemove", IDS_SETTINGS_PLUGIN_VM_REMOVE_LABEL},
       {"pluginVmRemoveButton", IDS_SETTINGS_PLUGIN_VM_REMOVE_BUTTON},
+      {"pluginVmRemoveConfirmationDialogMessage",
+       IDS_SETTINGS_PLUGIN_VM_CONFIRM_REMOVE_DIALOG_BODY},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);
 }

chrome/test/data/webui/settings/chromeos/os_settings_browsertest.js

@@ -957,6 +957,8 @@ var OSSettingsPluginVmPageTest = class extends OSSettingsBrowserTest {
   get extraLibraries() {
     return super.extraLibraries.concat([
       '//ui/webui/resources/js/promise_resolver.js',
+      '//ui/webui/resources/js/util.js',
+      BROWSER_SETTINGS_PATH + '../test_util.js',
       BROWSER_SETTINGS_PATH + '../test_browser_proxy.js',
       'plugin_vm_page_test.js',
     ]);

chrome/test/data/webui/settings/chromeos/plugin_vm_page_test.js

@@ -126,20 +126,58 @@ suite('SharedPaths', function() {
 });
 
 suite('Remove', function() {
+  let page;
+  const getDialog = () => page.$$(
+      '#plugin-vm-remove settings-plugin-vm-remove-confirmation-dialog');
+  const hasDialog = () => !!getDialog();
+
   setup(function() {
     pluginVmBrowserProxy = new TestPluginVmBrowserProxy();
     settings.PluginVmBrowserProxyImpl.instance_ = pluginVmBrowserProxy;
     PolymerTest.clearBody();
-    this.page = document.createElement('settings-plugin-vm-subpage');
-    document.body.appendChild(this.page);
+    page = document.createElement('settings-plugin-vm-subpage');
+    document.body.appendChild(page);
   });
 
   teardown(function() {
-    this.page.remove();
+    page.remove();
   });
 
-  test('Remove', function() {
-    this.page.$$('#plugin-vm-remove cr-button').click();
+  test('Remove', async function() {
+    assertFalse(hasDialog());
+
+    page.$.pluginVmRemoveButton.click();
+    assertFalse(hasDialog());
+
+    Polymer.dom.flush();
+    assertTrue(hasDialog());
+
+    getDialog().$.continue.click();
     assertEquals(1, pluginVmBrowserProxy.getCallCount('removePluginVm'));
+
+    await test_util.eventToPromise('dom-change', page.$$('#plugin-vm-remove'));
+    assertFalse(hasDialog());
+
+    assertEquals(getDeepActiveElement(), page.$.pluginVmRemoveButton);
+  });
+
+  test('RemoveDialogCancelled', async function() {
+    assertFalse(hasDialog());
+
+    page.$.pluginVmRemoveButton.click();
+    assertFalse(hasDialog());
+
+    Polymer.dom.flush();
+    assertTrue(hasDialog());
+
+    getDialog().$.cancel.click();
+    assertTrue(hasDialog());
+    assertEquals(0, pluginVmBrowserProxy.getCallCount('removePluginVm'));
+
+    await test_util.eventToPromise('dom-change', page.$$('#plugin-vm-remove'));
+    assertFalse(hasDialog());
+    assertEquals(0, pluginVmBrowserProxy.getCallCount('removePluginVm'));
+
+    assertEquals(getDeepActiveElement(), page.$.pluginVmRemoveButton);
   });
 });