Add input method options page to ChromeOS settings.

The page is hidden behind the flag imeOptionsInSettings.
Currently the page is only a dummy page following the spirit at
https://docs.google.com/presentation/d/1jdefmoq3c0xXt8_oD19819FKFw5BFKp9gPdr2DegcRQ/edit#slide=id.g8514a6facb_0_313

screen shot of the new page
https://screenshot.googleplex.com/aaxe5Sm8kpg

The content of the new page will soon be changed in the next CLs, and
the text on the page will be generated in the js code. So I will do the
i18n later. For now I added TODO(i18n) explicitly in UI so I won't
forget about i18n issue.

Test:tested with Chrome on Linux
Bug:1086786

Change-Id: I6aeba0335cfe59cb0b09d377b40964f377f150fa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2215390
Commit-Queue: Jing Wang <jiwan@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Darren Shen <shend@chromium.org>
Reviewed-by: Alex Gough <ajgo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#774484}

chrome/app/os_settings_strings.grdp

@@ -257,6 +257,9 @@
   <message name="IDS_SETTINGS_LANGUAGES_MANAGE_INPUT_METHODS_TITLE" desc="Name of the settings sub-page which allows enabling and disabling input methods.">
     Manage input methods
   </message>
+  <message name="IDS_SETTINGS_LANGUAGES_INPUT_METHOD_OPTIONS_TITLE" translateable="false" desc="Name of the settings sub-page which allows changing input method options.">
+    Input method options
+  </message>
   <message name="IDS_SETTINGS_LANGUAGES_SHOW_IME_MENU" desc="The label for the toggle button controlling showing the IME menu in the shelf.">
     Show input options in the shelf
   </message>

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

@@ -6,6 +6,7 @@ import("//third_party/closure_compiler/compile_js.gni")
 
 js_type_check("closure_compile") {
   deps = [
+    ":input_method_options_page",
     ":manage_input_methods_page",
     ":os_add_languages_dialog",
     ":os_languages_page",
@@ -16,6 +17,13 @@ js_type_check("closure_compile") {
   ]
 }
 
+js_library("input_method_options_page") {
+  deps = [
+    "../..:router",
+    "../../languages_page:languages_types",
+  ]
+}
+
 js_library("manage_input_methods_page") {
   deps = [
     "../../languages_page:languages_types",
@@ -26,6 +34,7 @@ js_library("manage_input_methods_page") {
 
 js_library("os_languages_section") {
   deps = [
+    ":input_method_options_page",
     ":manage_input_methods_page",
     ":os_languages_page",
     "..:os_route",
@@ -73,6 +82,7 @@ js_library("os_add_languages_dialog") {
 #js_type_check("closure_compile_module") {
 #  is_polymer3 = true
 #  deps = [
+#    ":input_method_options_page.m",
 #    ":manage_input_methods_page.m",
 #    ":os_add_languages_dialog.m",
 #    ":os_languages_page.m",
@@ -80,6 +90,14 @@ js_library("os_add_languages_dialog") {
 #  ]
 #}
 
+js_library("input_method_options_page.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_languages_page/input_method_options_page.m.js" ]
+  deps = [
+    # TODO: Fill those in.
+  ]
+  extra_deps = [ ":input_method_options_page_module" ]
+}
+
 js_library("manage_input_methods_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_languages_page/manage_input_methods_page.m.js" ]
   deps = [
@@ -116,6 +134,7 @@ import("//tools/polymer/polymer.gni")
 
 group("polymer3_elements") {
   public_deps = [
+    ":input_method_options_page_module",
     ":manage_input_methods_page_module",
     ":os_add_languages_dialog_module",
     ":os_languages_page_module",
@@ -146,3 +165,9 @@ polymer_modulizer("os_languages_section") {
   html_file = "os_languages_section.html"
   html_type = "dom-module"
 }
+
+polymer_modulizer("input_method_options_page") {
+  js_file = "input_method_options_page.js"
+  html_file = "input_method_options_page.html"
+  html_type = "dom-module"
+}

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="../../controls/settings_toggle_button.html">
+<link rel="import" href="../../settings_shared_css.html">
+
+<dom-module id="settings-input-method-options-page">
+  <template>
+    <style include="settings-shared">
+      h2 {
+        padding-inline-start: var(--cr-section-padding);
+      }
+    </style>
+
+    <div route-path="default">
+      <h2>Physical keyboard (TODO: i18n)</h2>
+      <div class="list-frame vertical-list">
+        <settings-toggle-button class="list-item"
+            label="Auto-capitalization (TODO: i18n)">
+        </settings-toggle-button>
+      </div>
+      <h2>On-screen keyboard (TODO: i18n)</h2>
+      <div class="list-frame vertical-list">
+        <settings-toggle-button class="list-item"
+            label="Auto-capitalization (TODO: i18n)">
+        </settings-toggle-button>
+      </div>
+    </div>
+  </template>
+  <script src="input_method_options_page.js"></script>
+</dom-module>

chrome/browser/resources/settings/chromeos/os_languages_page/input_method_options_page.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 'settings-input-method-options-page' is the settings sub-page
+ * to allow users to change options for each input method.
+ */
+
+Polymer({
+  is: 'settings-input-method-options-page',
+
+  behaviors: [
+    settings.RouteObserverBehavior,
+  ],
+
+  properties: {
+    /** @type {!LanguageHelper} */
+    languageHelper: Object,
+
+    /**
+     * Input method ID.
+     * @private
+     */
+    id_: String,
+  },
+
+  /**
+   * settings.RouteObserverBehavior
+   * @param {!settings.Route} route
+   * @param {!settings.Route} oldRoute
+   * @protected
+   */
+  currentRouteChanged(route, oldRoute) {
+    if (route != settings.routes.OS_LANGUAGES_INPUT_METHOD_OPTIONS) {
+      this.id_ = '';
+      this.parentNode.pageTitle = '';
+      return;
+    }
+
+    const queryParams = settings.Router.getInstance().getQueryParameters();
+    this.id_ = queryParams.get('id') || '';
+    this.parentNode.pageTitle =
+        this.languageHelper.getInputMethodDisplayName(this.id_);
+  },
+});

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

@@ -218,7 +218,8 @@
             </div>
             <template is="dom-if" if="[[imeOptionsInSettings_]]">
               <div class="internal-wrapper" hidden="[[!item.hasOptionsPage]]">
-                <cr-icon-button class="subpage-arrow"></cr-icon-button>
+                <cr-icon-button class="subpage-arrow"
+                    on-click="onInputMethodOptionsTap_"></cr-icon-button>
               </div>
             </template>
             <template is="dom-if" if="[[!imeOptionsInSettings_]]">

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

@@ -226,7 +226,14 @@ cr.define('settings', function() {
      * @private
      */
     onInputMethodOptionsTap_(e) {
-      this.languageHelper.openInputMethodOptions(e.model.item.id);
+      if (this.imeOptionsInSettings_) {
+        const params = new URLSearchParams;
+        params.append('id', e.model.item.id);
+        settings.Router.getInstance().navigateTo(
+            settings.routes.OS_LANGUAGES_INPUT_METHOD_OPTIONS, params);
+      } else {
+        this.languageHelper.openInputMethodOptions(e.model.item.id);
+      }
     },
 
     /**

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

@@ -4,6 +4,7 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="os_languages_page.html">
 <link rel="import" href="smart_inputs_page.html">
+<link rel="import" href="input_method_options_page.html">
 <link rel="import" href="../../i18n_setup.html">
 <link rel="import" href="../../languages_page/languages.html">
 <link rel="import" href="manage_input_methods_page.html">
@@ -85,6 +86,17 @@
         </settings-subpage>
       </template>
 
+      <!-- "Input method settings" sub-sub-page. -->
+      <template is="dom-if" route-path="/osLanguages/inputMethodOptions">
+        <!-- TODO(crbug.com/950007): Associate control with the sub-subpage
+              trigger button from os-settings-language-page's shadow dom. -->
+        <settings-subpage
+            associated-control="[[$$('#languagesSubpageTrigger')]]">
+          <settings-input-method-options-page
+              language-helper="[[languageHelper]]">
+          </settings-input-method-options-page>
+        </settings-subpage>
+      </template>
     </settings-animated-pages>
   </template>
   <script src="os_languages_section.js"></script>

chrome/browser/resources/settings/chromeos/os_route.js

@@ -216,6 +216,9 @@ cr.define('settings', function() {
         Subpage.kManageInputMethods);
     r.OS_LANGUAGES_SMART_INPUTS = createSubpage(
         r.OS_LANGUAGES, mojom.SMART_INPUTS_SUBPAGE_PATH, Subpage.kSmartInputs);
+    r.OS_LANGUAGES_INPUT_METHOD_OPTIONS = createSubpage(
+        r.OS_LANGUAGES_DETAILS, mojom.INPUT_METHOD_OPTIONS_SUBPAGE_PATH,
+        Subpage.kInputMethodOptions);
 
     // Files section.
     if (!loadTimeData.getBoolean('isGuest')) {

chrome/browser/resources/settings/chromeos/os_settings_routes.js

@@ -55,6 +55,7 @@
  *   OS_LANGUAGES: !settings.Route,
  *   OS_LANGUAGES_DETAILS: !settings.Route,
  *   OS_LANGUAGES_INPUT_METHODS: !settings.Route,
+ *   OS_LANGUAGES_INPUT_METHOD_OPTIONS: !settings.Route,
  *   OS_LANGUAGES_SMART_INPUTS: !settings.Route,
  *   OS_PRINTING: !settings.Route,
  *   OS_PRIVACY: !settings.Route,

chrome/browser/resources/settings/languages_page/languages.js

@@ -1093,6 +1093,16 @@ Polymer({
   onInputMethodRemoved_(id) {
     this.updateSupportedInputMethods_();
   },
+
+  /**
+   * @param {string} id Input method ID.
+   * @return {string}
+   */
+  getInputMethodDisplayName(id) {
+    const inputMethod = this.supportedInputMethodMap_.get(id);
+    assert(inputMethod);
+    return inputMethod.displayName;
+  },
   // </if>
 });
 })();

chrome/browser/resources/settings/languages_page/languages_types.js

@@ -230,5 +230,11 @@ class LanguageHelper {
 
   /** @param {string} id Input method ID. */
   openInputMethodOptions(id) {}
+
+  /**
+   * @param {string} id Input method ID.
+   * @return {string}
+   */
+  getInputMethodDisplayName(id) {}
   // </if>
 }

chrome/browser/resources/settings/os_settings_resources.grd

@@ -657,6 +657,12 @@
       <structure name="IDR_OS_SETTINGS_LANGUAGES_MANAGE_INPUT_METHODS_PAGE_JS"
                  file="chromeos/os_languages_page/manage_input_methods_page.js"
                  compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_LANGUAGES_INPUT_METHOD_OPTIONS_PAGE_HTML"
+                 file="chromeos/os_languages_page/input_method_options_page.html"
+                 compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_LANGUAGES_INPUT_METHOD_OPTIONS_PAGE_JS"
+                 file="chromeos/os_languages_page/input_method_options_page.js"
+                 compress="false" type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_LANGUAGES_SMART_INPUTS_PAGE_HTML"
                  file="chromeos/os_languages_page/smart_inputs_page.html"
                  compress="false" type="chrome_html" />

chrome/browser/ui/webui/settings/chromeos/constants/routes.mojom

@@ -102,6 +102,7 @@ enum Subpage {
   kLanguagesAndInputDetails = 1200,
   kManageInputMethods = 1201,
   kSmartInputs = 1202,
+  kInputMethodOptions = 1203,
 
   // Files section.
   kNetworkFileShares = 1300,
@@ -202,6 +203,7 @@ const string kLanguagesAndInputSectionPath = "osLanguages";
 const string kLanguagesAndInputDetailsSubpagePath = "osLanguages/details";
 const string kManageInputMethodsSubpagePath = "osLanguages/inputMethods";
 const string kSmartInputsSubpagePath = "osLanguages/smartInputs";
+const string kInputMethodOptionsSubpagePath = "osLanguages/inputMethodOptions";
 
 // Files section.
 const string kFilesSectionPath = "files";

chrome/browser/ui/webui/settings/chromeos/constants/routes_util.cc

@@ -95,6 +95,7 @@ bool IsOSSettingsSubPage(const std::string& sub_page) {
       chromeos::settings::mojom::kLanguagesAndInputDetailsSubpagePath,
       chromeos::settings::mojom::kManageInputMethodsSubpagePath,
       chromeos::settings::mojom::kSmartInputsSubpagePath,
+      chromeos::settings::mojom::kInputMethodOptionsSubpagePath,
 
       // Files section.
       chromeos::settings::mojom::kFilesSectionPath,

chrome/browser/ui/webui/settings/chromeos/languages_section.cc

@@ -202,6 +202,14 @@ void LanguagesSection::RegisterHierarchy(HierarchyGenerator* generator) const {
       mojom::SearchResultIcon::kGlobe, mojom::SearchResultDefaultRank::kMedium,
       mojom::kManageInputMethodsSubpagePath);
 
+  // Input method options.
+  generator->RegisterNestedSubpage(
+      IDS_SETTINGS_LANGUAGES_INPUT_METHOD_OPTIONS_TITLE,
+      mojom::Subpage::kInputMethodOptions,
+      mojom::Subpage::kLanguagesAndInputDetails,
+      mojom::SearchResultIcon::kGlobe, mojom::SearchResultDefaultRank::kMedium,
+      mojom::kInputMethodOptionsSubpagePath);
+
   // Smart inputs.
   generator->RegisterTopLevelSubpage(
       IDS_SETTINGS_SMART_INPUTS_TITLE, mojom::Subpage::kSmartInputs,