[CrOS Settings] Add input_page.js

Adding the first bit of the input page according to design at
http://go/cros-lang-settings-ux slide 23.
Current view: http://screen/K4xO3C4FXaz

Bug: 1113439
Change-Id: Ic2c5e3d1e095e5080bc2409a1c3aafe89a147fc3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2345933
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@{#797463}

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

@@ -8,6 +8,7 @@ import './date_time_page/timezone_selector.m.js';
 // import './os_a11y_page/os_a11y_page.m.js';
 import './os_files_page/os_files_page.m.js';
 import './os_languages_page/input_method_options_page.m.js';
+import './os_languages_page/input_page.m.js';
 import './os_languages_page/os_languages_page.m.js';
 import './os_languages_page/os_languages_page_v2.m.js';
 import './os_languages_page/os_languages_section.m.js';

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

@@ -10,6 +10,7 @@ js_type_check("closure_compile") {
   deps = [
     ":input_method_options_page",
     ":input_method_util",
+    ":input_page",
     ":languages_metrics_proxy",
     ":manage_input_methods_page",
     ":os_add_languages_dialog",
@@ -37,6 +38,10 @@ js_library("input_method_util") {
   deps = [ "//ui/webui/resources/js:cr" ]
 }
 
+js_library("input_page") {
+  deps = [ ":languages_metrics_proxy" ]
+}
+
 js_library("languages_metrics_proxy") {
   deps = [ "//ui/webui/resources/js:cr" ]
   externs_list = [ "$externs_path/metrics_private.js" ]
@@ -129,6 +134,7 @@ js_type_check("closure_compile_module") {
   deps = [
     ":input_method_options_page.m",
     ":input_method_util.m",
+    ":input_page.m",
     ":languages_metrics_proxy.m",
     ":manage_input_methods_page.m",
     ":os_add_languages_dialog.m",
@@ -155,6 +161,12 @@ js_library("input_method_options_page.m") {
   extra_deps = [ ":input_method_options_page_module" ]
 }
 
+js_library("input_page.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_languages_page/input_page.m.js" ]
+  deps = [ ":languages_metrics_proxy.m" ]
+  extra_deps = [ ":input_page_module" ]
+}
+
 js_library("languages_metrics_proxy.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_languages_page/languages_metrics_proxy.m.js" ]
   deps = [ "//ui/webui/resources/js:cr.m" ]
@@ -256,6 +268,7 @@ import("//tools/polymer/polymer.gni")
 group("polymer3_elements") {
   public_deps = [
     ":input_method_options_page_module",
+    ":input_page_module",
     ":manage_input_methods_page_module",
     ":modulize",
     ":os_add_languages_dialog_module",
@@ -322,6 +335,15 @@ polymer_modulizer("input_method_options_page") {
   auto_imports = os_settings_auto_imports
 }
 
+polymer_modulizer("input_page") {
+  js_file = "input_page.js"
+  html_file = "input_page.html"
+  html_type = "dom-module"
+  migrated_imports = settings_migrated_imports
+  namespace_rewrites = os_settings_namespace_rewrites
+  auto_imports = os_settings_auto_imports
+}
+
 polymer_modulizer("smart_inputs_page") {
   js_file = "smart_inputs_page.js"
   html_file = "smart_inputs_page.html"

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="languages_metrics_proxy.html">
+<link rel="import" href="../../controls/settings_toggle_button.html">
+<link rel="import" href="../../prefs/prefs_behavior.html">
+<link rel="import" href="../../settings_shared_css.html">
+
 <dom-module id="os-settings-input-page">
   <template>
-    <style include="settings-shared action-link">
+    <style include="settings-shared">
       h2 {
         padding-inline-start: var(--cr-section-padding);
       }
     </style>
 
     <div route-path="default">
-
-      <h2>$i18n{inputPageTitle}</h2>
-
+      <settings-toggle-button
+          class="first" id="showImeMenu"
+          pref="{{prefs.settings.language.ime_menu_activated}}"
+          label="$i18n{showImeMenu}"
+          on-settings-boolean-control-change="onShowImeMenuChange_">
+      </settings-toggle-button>
     </div>
-
   </template>
+  <script src="input_page.js"></script>
 </dom-module>

chrome/browser/resources/settings/chromeos/os_languages_page/input_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 'os-settings-input-page' is the input sub-page
+ * for language and input method settings.
+ */
+Polymer({
+  is: 'os-settings-input-page',
+
+  behaviors: [
+    PrefsBehavior,
+  ],
+
+  properties: {
+    /**
+     * Preferences state.
+     */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+  },
+
+  /** @private {?settings.LanguagesMetricsProxy} */
+  languagesMetricsProxy_: null,
+
+  /** @override */
+  created() {
+    this.languagesMetricsProxy_ =
+        settings.LanguagesMetricsProxyImpl.getInstance();
+  },
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onShowImeMenuChange_(e) {
+    this.languagesMetricsProxy_.recordToggleShowInputOptionsOnShelf(
+        e.target.checked);
+  },
+});

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="input_page.html">
 <link rel="import" href="os_languages_page.html">
 <link rel="import" href="os_languages_page_v2.html">
 <link rel="import" href="smart_inputs_page.html">
@@ -97,7 +98,8 @@
         <settings-subpage
             associated-control="[[$$('#inputPageTrigger')]]"
             page-title="$i18n{inputPageTitle}">
-          <os-settings-input-page>
+          <os-settings-input-page prefs="{{prefs}}">
+          </os-settings-input-page>
         </settings-subpage>
       </template>
 

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

@@ -94,17 +94,22 @@
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
-  <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_OS_INPUT_METHOD_OPTIONS_PAGE_M_JS"
+  <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_INPUT_METHOD_OPTIONS_PAGE_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/input_method_options_page.m.js"
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
-  <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_OS_INPUT_METHOD_UTIL_M_JS"
+  <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_INPUT_METHOD_UTIL_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/input_method_util.m.js"
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
-  <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_OS_MANAGE_INPUT_METHODS_PAGE_M_JS"
+  <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_INPUT_PAGE_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/input_page.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_MANAGE_INPUT_METHODS_PAGE_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/manage_input_methods_page.m.js"
            use_base_dir="false"
            compress="false"

chrome/browser/resources/settings/os_settings_resources.grd

@@ -704,6 +704,9 @@
       <structure name="IDR_OS_SETTINGS_LANGUAGES_PAGE_INPUT_PAGE_HTML"
                  file="chromeos/os_languages_page/input_page.html"
                  compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_LANGUAGES_PAGE_INPUT_PAGE_JS"
+                 file="chromeos/os_languages_page/input_page.js"
+                 compress="false" type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_LANGUAGES_PAGE_OS_LANGUAGES_PAGE_V2_HTML"
                  file="chromeos/os_languages_page/os_languages_page_v2.html"
                  compress="false" type="chrome_html" />

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

@@ -95,6 +95,14 @@ const std::vector<SearchConcept>& GetInputPageSearchConceptsV2() {
        mojom::SearchResultDefaultRank::kMedium,
        mojom::SearchResultType::kSubpage,
        {.subpage = mojom::Subpage::kInput}},
+      {IDS_OS_SETTINGS_TAG_LANGUAGES_INPUT_INPUT_OPTIONS_SHELF,
+       mojom::kInputSubpagePath,
+       mojom::SearchResultIcon::kGlobe,
+       mojom::SearchResultDefaultRank::kMedium,
+       mojom::SearchResultType::kSetting,
+       {.setting = mojom::Setting::kShowInputOptionsInShelf},
+       {IDS_OS_SETTINGS_TAG_LANGUAGES_INPUT_INPUT_OPTIONS_SHELF_ALT1,
+        SearchConcept::kAltTagEnd}},
   });
   return *tags;
 }
@@ -383,6 +391,8 @@ void LanguagesSection::RegisterHierarchy(HierarchyGenerator* generator) const {
   if (IsLanguageSettingsV2Enabled()) {
     generator->RegisterNestedSetting(mojom::Setting::kAddLanguage,
                                      mojom::Subpage::kLanguages);
+    generator->RegisterNestedSetting(mojom::Setting::kShowInputOptionsInShelf,
+                                     mojom::Subpage::kInput);
   } else {
     static constexpr mojom::Setting kLanguagesAndInputDetailsSettings[] = {
         mojom::Setting::kAddLanguage,

chrome/test/data/webui/BUILD.gn

@@ -251,6 +251,7 @@ if (include_js_tests) {
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/fake_bluetooth.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/fake_quick_unlock_private.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/input_method_options_page_test.m.js",
+        "$root_gen_dir/chrome/test/data/webui/settings/chromeos/input_page_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/localized_link_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/multidevice_feature_item_tests.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/multidevice_feature_toggle_tests.m.js",

chrome/test/data/webui/settings/chromeos/BUILD.gn

@@ -40,6 +40,7 @@ js_modulizer("modulize") {
     "fake_settings_search_handler.js",
     "fake_user_action_recorder.js",
     "input_method_options_page_test.js",
+    "input_page_test.js",
     "localized_link_test.js",
     "multidevice_feature_item_tests.js",
     "multidevice_feature_toggle_tests.js",

chrome/test/data/webui/settings/chromeos/input_page_test.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.
+
+// clang-format off
+// #import {LanguagesMetricsProxy, LanguagesMetricsProxyImpl} from 'chrome://os-settings/chromeos/lazy_load.js';
+// #import {CrSettingsPrefs} from 'chrome://os-settings/chromeos/os_settings.js';
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {TestLanguagesMetricsProxy} from './test_os_languages_metrics_proxy.m.js';
+// #import {assertFalse, assertTrue} from '../../chai_assert.js';
+// clang-format on
+
+suite('input page', () => {
+  /** @type {!SettingsInputPageElement} */
+  let inputPage;
+  /** @type {!settings.LanguagesMetricsProxy} */
+  let metricsProxy;
+
+  setup(() => {
+    document.body.innerHTML = '';
+    const prefElement = document.createElement('settings-prefs');
+    document.body.appendChild(prefElement);
+
+    return CrSettingsPrefs.initialized.then(() => {
+      // Sets up test metrics proxy.
+      metricsProxy = new settings.TestLanguagesMetricsProxy();
+      settings.LanguagesMetricsProxyImpl.instance_ = metricsProxy;
+
+      inputPage = document.createElement('os-settings-input-page');
+      inputPage.prefs = prefElement.prefs;
+      document.body.appendChild(inputPage);
+    });
+  });
+
+  suite('records metrics', () => {
+    test('when deactivating show ime menu', async () => {
+      inputPage.setPrefValue('settings.language.ime_menu_activated', true);
+      inputPage.$$('#showImeMenu').click();
+      Polymer.dom.flush();
+
+      assertFalse(
+          await metricsProxy.whenCalled('recordToggleShowInputOptionsOnShelf'));
+    });
+
+    test('when activating show ime menu', async () => {
+      inputPage.setPrefValue('settings.language.ime_menu_activated', false);
+      inputPage.$$('#showImeMenu').click();
+      Polymer.dom.flush();
+
+      assertTrue(
+          await metricsProxy.whenCalled('recordToggleShowInputOptionsOnShelf'));
+    });
+  });
+});

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

@@ -1493,6 +1493,27 @@ TEST_F('OSSettingsInputMethodOptionsPageTest', 'AllJsTests', () => {
   mocha.run();
 });
 
+// eslint-disable-next-line no-var
+var OSSettingsInputPageTest = class extends OSSettingsBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return super.browsePreload + 'chromeos/os_language_page/input_page.html';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      BROWSER_SETTINGS_PATH + '../test_browser_proxy.js',
+      'input_page_test.js',
+      'test_os_languages_metrics_proxy.js',
+    ]);
+  }
+};
+
+TEST_F('OSSettingsInputPageTest', 'AllJsTests', () => {
+  mocha.run();
+});
+
 // Tests for the Reset section.
 // eslint-disable-next-line no-var
 var OSSettingsResetPageTest = class extends OSSettingsBrowserTest {

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

@@ -41,6 +41,7 @@ var OSSettingsV3BrowserTest = class extends PolymerTest {
  ['BluetoothPage', 'bluetooth_page_tests.m.js'],
  ['DateTimePage', 'date_time_page_tests.m.js'],
  ['InputMethodOptionPage', 'input_method_options_page_test.m.js'],
+ ['InputPage', 'input_page_test.m.js'],
  ['LocalizedLink', 'localized_link_test.m.js'],
  ['MultideviceFeatureItem', 'multidevice_feature_item_tests.m.js'],
  ['MultideviceFeatureToggle', 'multidevice_feature_toggle_tests.m.js'],