[OsSettingsLanguages] Add Enabled label for current input method

UX feedback to add back the label.
However, the functionality seems obscure so adding metrics to gauge
usage.

View: http://screen/6VCZQPfziWwa4kk

Note: Restart now and Restart later in enum has never been used, it was
added due to earlier designs.

Bug: 1113439, 1133061
Change-Id: Ia33cb71b3bd22133faaecec60f80cb302b16f349
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2437581
Commit-Queue: My Nguyen <myy@chromium.org>
Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811940}

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

@@ -36,6 +36,12 @@
         margin-bottom: var(--cr-section-vertical-margin);
       }
 
+      .explain-selected {
+        color: var(--cros-success-color);
+        font-weight: initial;
+        margin-top: 4px;
+      }
+
       .icon-external {
         margin-inline-end: 0;
       }
@@ -131,7 +137,7 @@
           <template is="dom-repeat"
               items="[[languages.inputMethods.enabled]]">
             <div class$="list-item [[getInputMethodItemClass_(
-                item.id, languages.inputMethods.currentId)]]"
+                item.id, languages.inputMethods.currentId)]] no-outline"
                 actionable on-click="onInputMethodClick_"
                 on-keypress="onInputMethodKeyPress_"
                 tabindex$="[[getInputMethodTabIndex_(
@@ -139,6 +145,11 @@
                 aria-labelledby$="language-[[index]]" role="button">
               <div class="start" id="language-[[index]]" aria-hidden="true">
                 <div class="display-name">[[item.displayName]]</div>
+                <div class="explain-selected"
+                    hidden="[[!isCurrentInputMethod_(
+                        item.id, languages.inputMethods.currentId)]]">
+                  $i18n{inputMethodEnabled}
+                </div>
               </div>
               <template is="dom-if"
                   if="[[hasOptionsPageInSettings_(item.id)]]">

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

@@ -141,6 +141,9 @@ Polymer({
     }
 
     this.languageHelper.setCurrentInputMethod(e.model.item.id);
+    this.languagesMetricsProxy_.recordInteraction(
+        settings.LanguagesPageInteraction.SWITCH_INPUT_METHOD);
+    settings.recordSettingChange();
   },
 
   /**

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

@@ -19,7 +19,7 @@ cr.define('settings', function() {
   /* #export */ const LanguagesPageInteraction = {
     SWITCH_SYSTEM_LANGUAGE: 0,
     RESTART: 1,
-    RESTART_NOW: 2,
+    SWITCH_INPUT_METHOD: 2,
     RESTART_LATER: 3,
     OPEN_CUSTOM_SPELL_CHECK: 4,
   };

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

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 // clang-format off
-// #import {LanguagesBrowserProxyImpl, LanguagesMetricsProxyImpl} from 'chrome://os-settings/chromeos/lazy_load.js';
+// #import {LanguagesBrowserProxyImpl, LanguagesMetricsProxyImpl, LanguagesPageInteraction} from 'chrome://os-settings/chromeos/lazy_load.js';
 // #import {CrSettingsPrefs, Router, routes} from 'chrome://os-settings/chromeos/os_settings.js';
 // #import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -410,6 +410,18 @@ suite('input page', () => {
 
       await metricsProxy.whenCalled('recordAddInputMethod');
     });
+
+    test('when switch input method', async () => {
+      const inputMethodsList = inputPage.$$('#inputMethodsList');
+      assertTrue(!!inputMethodsList);
+
+      // The test input methods should appear.
+      const items = inputMethodsList.querySelectorAll('.list-item');
+      items[0].click();
+      assertEquals(
+          settings.LanguagesPageInteraction.SWITCH_INPUT_METHOD,
+          await metricsProxy.whenCalled('recordInteraction'));
+    });
   });
 
   suite('spell check', () => {

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

@@ -20,6 +20,8 @@ cr.define('settings', function() {
       callback(null);
     },
 
+    setCurrentInputMethod: () => {},
+
     get onChanged() {
       return {
         addListener: function() {

tools/metrics/histograms/enums.xml

@@ -65065,7 +65065,7 @@ https://www.dmtf.org/sites/default/files/standards/documents/DSP0134_2.7.1.pdf
 <enum name="SettingsLanguagesPageInteraction">
   <int value="0" label="Switch system language"/>
   <int value="1" label="Restart"/>
-  <int value="2" label="Restart now"/>
+  <int value="2" label="Switch input method"/>
   <int value="3" label="Restart later"/>
   <int value="4" label="Open custom spell check"/>
 </enum>