[OsSettingsLanguages] Add blank for Add Input Methods dialog

Add blank dialog for now.
Both Action and Cancel buttons currently close the dialog.
Current view: http://screen/BpiwRzGMHfgHgYw
Design doc in progress: http://go/cros-lang-settings-step-5

Bug: 1113439
Change-Id: I93c8e7a432e67a2c785b258d8bfa661c1360b543
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2379467
Commit-Queue: My Nguyen <myy@chromium.org>
Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#802999}

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

@@ -8,6 +8,7 @@ import("../os_settings.gni")
 
 js_type_check("closure_compile") {
   deps = [
+    ":add_input_methods_dialog",
     ":change_device_language_dialog",
     ":input_method_options_page",
     ":input_method_util",
@@ -25,6 +26,9 @@ js_type_check("closure_compile") {
   ]
 }
 
+js_library("add_input_methods_dialog") {
+}
+
 js_library("change_device_language_dialog") {
   deps = [
     "../..:lifetime_browser_proxy",
@@ -50,6 +54,7 @@ js_library("input_method_util") {
 
 js_library("input_page") {
   deps = [
+    ":add_input_methods_dialog",
     ":input_method_util",
     ":languages_metrics_proxy",
     "..:os_route",
@@ -149,6 +154,7 @@ js_library("smart_inputs_page") {
 js_type_check("closure_compile_module") {
   is_polymer3 = true
   deps = [
+    ":add_input_methods_dialog.m",
     ":change_device_language_dialog.m",
     ":input_method_options_page.m",
     ":input_method_util.m",
@@ -163,6 +169,11 @@ js_type_check("closure_compile_module") {
   ]
 }
 
+js_library("add_input_methods_dialog.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_languages_page/add_input_methods_dialog.m.js" ]
+  extra_deps = [ ":add_input_methods_dialog_module" ]
+}
+
 js_library("change_device_language_dialog.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_languages_page/change_device_language_dialog.m.js" ]
   deps = [
@@ -194,13 +205,16 @@ js_library("input_method_options_page.m") {
 js_library("input_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_languages_page/input_page.m.js" ]
   deps = [
+    ":add_input_methods_dialog.m",
     ":input_method_util.m",
     ":languages_metrics_proxy.m",
     "..:os_route.m",
     "../..:i18n_setup",
     "../..:router.m",
+    "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:i18n_behavior.m",
     "//ui/webui/resources/js:load_time_data.m",
+    "//ui/webui/resources/js/cr/ui:focus_without_ink.m",
   ]
   extra_deps = [ ":input_page_module" ]
 }
@@ -305,6 +319,7 @@ import("//tools/polymer/polymer.gni")
 
 group("polymer3_elements") {
   public_deps = [
+    ":add_input_methods_dialog_module",
     ":change_device_language_dialog_module",
     ":input_method_options_page_module",
     ":input_page_module",
@@ -320,6 +335,15 @@ group("polymer3_elements") {
   ]
 }
 
+polymer_modulizer("add_input_methods_dialog") {
+  js_file = "add_input_methods_dialog.js"
+  html_file = "add_input_methods_dialog.html"
+  html_type = "dom-module"
+  migrated_imports = settings_migrated_imports
+  namespace_rewrites = os_settings_namespace_rewrites
+  auto_imports = os_settings_auto_imports
+}
+
 polymer_modulizer("change_device_language_dialog") {
   js_file = "change_device_language_dialog.js"
   html_file = "change_device_language_dialog.html"

chrome/browser/resources/settings/chromeos/os_languages_page/add_input_methods_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">
+
+<dom-module id="os-settings-add-input-methods-dialog">
+  <template>
+    <cr-dialog id="dialog" close-text="$i18n{close}" show-on-attach>
+      <div slot="title">$i18n{addInputMethodLabel}</div>
+      <div slot="button-container">
+        <cr-button class="cancel-button" on-click="onCancelButtonTap_">
+          $i18n{cancel}
+        </cr-button>
+        <cr-button class="action-button" on-click="onActionButtonTap_"
+            disabled="[[disableActionButton_]]">
+          $i18n{add}
+        </cr-button>
+      </div>
+    </cr-dialog>
+  </template>
+  <script src="add_input_methods_dialog.js"></script>
+</dom-module>

chrome/browser/resources/settings/chromeos/os_languages_page/add_input_methods_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 'os-settings-add-input-methods-dialog' is a dialog for
+ * adding input methods.
+ */
+Polymer({
+  is: 'os-settings-add-input-methods-dialog',
+
+  properties: {
+    /** @private */
+    disableActionButton_: {
+      type: Boolean,
+      value: true,
+    },
+  },
+
+  /** @private */
+  onCancelButtonTap_() {
+    this.$.dialog.close();
+  },
+
+  /** @private */
+  onActionButtonTap_() {
+    this.$.dialog.close();
+  },
+});

chrome/browser/resources/settings/chromeos/os_languages_page/input_page.html

@@ -2,8 +2,11 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
+<link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="add_input_methods_dialog.html">
 <link rel="import" href="input_method_util.html">
 <link rel="import" href="languages_metrics_proxy.html">
 <link rel="import" href="../os_route.html">
@@ -116,6 +119,12 @@
           on-settings-boolean-control-change="onSpellcheckToggleChange_">
       </settings-toggle-button>
     </div>
+
+    <template is="dom-if" if="[[showAddInputMethodsDialog_]]" restamp>
+      <os-settings-add-input-methods-dialog
+          on-close="onAddInputMethodsDialogClose_">
+      </os-settings-add-input-methods-dialog>
+    </template>
   </template>
   <script src="input_page.js"></script>
 </dom-module>

chrome/browser/resources/settings/chromeos/os_languages_page/input_page.js

@@ -44,6 +44,12 @@ Polymer({
         return [];
       },
     },
+
+    /** @private */
+    showAddInputMethodsDialog_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   /** @private {?settings.LanguagesMetricsProxy} */
@@ -173,7 +179,13 @@ Polymer({
   /** @private */
   onAddInputMethodClick_() {
     this.languagesMetricsProxy_.recordAddInputMethod();
-    // TODO(crbug/1113439): Add input methods dialog.
+    this.showAddInputMethodsDialog_ = true;
+  },
+
+  /** @private */
+  onAddInputMethodsDialogClose_() {
+    this.showAddInputMethodsDialog_ = false;
+    cr.ui.focusWithoutInk(assert(this.$.addInputMethod));
   },
 
   /**

chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp

@@ -89,6 +89,11 @@
            compress="false"
            preprocess="true"
            type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_ADD_INPUT_METHODS_DIALOG_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/add_input_methods_dialog.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
   <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_CHANGE_DEVICE_LANGUAGE_DIALOG_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/change_device_language_dialog.m.js"
            use_base_dir="false"

chrome/browser/resources/settings/os_settings_resources.grd

@@ -683,6 +683,12 @@
                  file="languages_page/languages_browser_proxy.js"
                  preprocess="true"
                  compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_LANGUAGES_ADD_INPUT_METHODS_DIALOG_HTML"
+                 file="chromeos/os_languages_page/add_input_methods_dialog.html"
+                 compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_LANGUAGES_ADD_INPUT_METHODS_DIALOG_JS"
+                 file="chromeos/os_languages_page/add_input_methods_dialog.js"
+                 compress="false" type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_LANGUAGES_ADD_LANGUAGES_DIALOG_HTML"
                  file="chromeos/os_languages_page/os_add_languages_dialog.html"
                  compress="false" type="chrome_html" />

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

@@ -99,6 +99,15 @@ suite('input page', () => {
     });
   });
 
+  suite('add input methods dialog', () => {
+    test('opens when clicking addInputMethod button', () => {
+      assertFalse(!!inputPage.$$('os-settings-add-input-methods-dialog'));
+      inputPage.$$('#addInputMethod').click();
+      Polymer.dom.flush();
+      assertTrue(!!inputPage.$$('os-settings-add-input-methods-dialog'));
+    });
+  });
+
   suite('records metrics', () => {
     test('when deactivating show ime menu', async () => {
       inputPage.setPrefValue('settings.language.ime_menu_activated', true);