CrOS Settings: Convert languages page to class-based syntax

Converts Polymer elements to the class-based syntax to prepare for the
upcoming TypeScript migration. Additionally removes uses of
addSingletonGetter().

Bug: chromium:1206112, chromium:1315757
Test: out/Default/browser_tests --gtest_filter='*OSSettings*Language*'
Test: Manual UI testing
Change-Id: I8bed9fde21c33b22dadfa23ff1c67948df1f1508
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3639963
Reviewed-by: Michael Cui <mlcui@google.com>
Commit-Queue: Wes Okuhara <wesokuhara@google.com>
Cr-Commit-Position: refs/heads/main@{#1001922}

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

@@ -2,32 +2,42 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// The IME ID for the Accessibility Common extension used by Dictation.
-/** @type {string} */
-const ACCESSIBILITY_COMMON_IME_ID =
-    '_ext_ime_egfdjlfmgnehecnclamagfafdccgfndpdictation';
-
 /**
  * @fileoverview 'os-settings-add-input-methods-dialog' is a dialog for
  * adding input methods.
  */
-import {afterNextRender, Polymer, html, flush, Templatizer, TemplateInstanceBase} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {Item} from './add_items_dialog.js';
+import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
 import {recordSettingChange} from '../metrics_recorder.js';
+
+import {Item} from './add_items_dialog.js';
 import {LanguageHelper, LanguagesModel} from './languages_types.js';
 
-Polymer({
-  _template: html`{__html_template__}`,
-  is: 'os-settings-add-input-methods-dialog',
+// The IME ID for the Accessibility Common extension used by Dictation.
+/** @type {string} */
+const ACCESSIBILITY_COMMON_IME_ID =
+    '_ext_ime_egfdjlfmgnehecnclamagfafdccgfndpdictation';
+
+/** @polymer */
+class OsSettingsAddInputMethodsDialogElement extends PolymerElement {
+  static get is() {
+    return 'os-settings-add-input-methods-dialog';
+  }
 
-  properties: {
-    /** @type {!LanguagesModel|undefined} */
-    languages: Object,
+  static get template() {
+    return html`{__html_template__}`;
+  }
 
-    /** @type {!LanguageHelper} */
-    languageHelper: Object,
-  },
+  static get properties() {
+    return {
+      /** @type {!LanguagesModel|undefined} */
+      languages: Object,
+
+      /** @type {!LanguageHelper} */
+      languageHelper: Object,
+    };
+  }
 
   /**
    * Get suggested input methods based on user's enabled languages and ARC IMEs
@@ -41,7 +51,7 @@ Polymer({
     ];
     return this.languageHelper.getInputMethodsForLanguages(languageCodes)
         .map(inputMethod => inputMethod.id);
-  },
+  }
 
   /**
    * @return {!Array<!Item>} A list of possible input methods.
@@ -67,7 +77,7 @@ Polymer({
                searchTerms: inputMethod.tags,
                disabledByPolicy: !!inputMethod.isProhibitedByPolicy
              }));
-  },
+  }
 
   /**
    * Add input methods.
@@ -79,5 +89,9 @@ Polymer({
       this.languageHelper.addInputMethod(id);
     });
     recordSettingChange();
-  },
-});
+  }
+}
+
+customElements.define(
+    OsSettingsAddInputMethodsDialogElement.is,
+    OsSettingsAddInputMethodsDialogElement);

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

@@ -6,36 +6,49 @@
  * @fileoverview 'os-settings-add-spellcheck-language-dialog' is a dialog for
  * adding spell check languages.
  */
-import {afterNextRender, flush, html, Polymer, TemplateInstanceBase, Templatizer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {html, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {recordSettingChange} from '../metrics_recorder.js';
-import {PrefsBehavior} from '../prefs_behavior.js';
+import {PrefsBehavior, PrefsBehaviorInterface} from '../prefs_behavior.js';
 
 import {Item} from './add_items_dialog.js';
-import {LanguageHelper, LanguagesModel, SpellCheckLanguageState} from './languages_types.js';
+import {LanguageHelper, LanguagesModel} from './languages_types.js';
 
-Polymer({
-  is: 'os-settings-add-spellcheck-languages-dialog',
+/**
+ * @constructor
+ * @extends {PolymerElement}
+ * @implements {PrefsBehaviorInterface}
+ */
+const OsSettingsAddSpellcheckLanguagesDialogElementBase =
+    mixinBehaviors([PrefsBehavior], PolymerElement);
 
-  _template: html`{__html_template__}`,
+/** @polymer */
+class OsSettingsAddSpellcheckLanguagesDialogElement extends
+    OsSettingsAddSpellcheckLanguagesDialogElementBase {
+  static get is() {
+    return 'os-settings-add-spellcheck-languages-dialog';
+  }
 
-  behaviors: [
-    PrefsBehavior,
-  ],
+  static get template() {
+    return html`{__html_template__}`;
+  }
 
-  properties: {
-    /* Preferences state. */
-    prefs: {
-      type: Object,
-      notify: true,
-    },
+  static get properties() {
+    return {
+      /* Preferences state. */
+      prefs: {
+        type: Object,
+        notify: true,
+      },
 
-    /** @type {!LanguagesModel|undefined} */
-    languages: Object,
+      /** @type {!LanguagesModel|undefined} */
+      languages: Object,
 
-    /** @type {!LanguageHelper} */
-    languageHelper: Object,
-  },
+      /** @type {!LanguageHelper} */
+      languageHelper: Object,
+    };
+  }
 
   /**
    * Get suggested languages based on enabled languages and input methods.
@@ -51,7 +64,7 @@ Polymer({
     return this.languages.spellCheckOffLanguages
         .map(spellCheckLang => spellCheckLang.language.code)
         .filter(code => languageCodes.has(code));
-  },
+  }
 
   /**
    * Get the list of languages used for the "all languages" section, filtering
@@ -70,7 +83,7 @@ Polymer({
           ],
           disabledByPolicy: spellCheckLang.isManaged,
         }));
-  },
+  }
 
   /**
    * @param {!chrome.languageSettingsPrivate.Language} language
@@ -84,7 +97,7 @@ Polymer({
       displayText += ' - ' + language.nativeDisplayName;
     }
     return displayText;
-  },
+  }
 
   /**
    * Add spell check languages.
@@ -96,5 +109,9 @@ Polymer({
       this.languageHelper.toggleSpellCheck(code, true);
     });
     recordSettingChange();
-  },
-});
+  }
+}
+
+customElements.define(
+    OsSettingsAddSpellcheckLanguagesDialogElement.is,
+    OsSettingsAddSpellcheckLanguagesDialogElement);