[OsSettingsLanguages] Disable remove button if language is not removable

Removable condition is different for Language Settings V2 as we are
decoupling device language and input methods from language preference.

Current view: http://screen/4ax5XVRUryvctHW

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

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

@@ -133,7 +133,8 @@
               $i18n{moveDown}
             </button>
             <button class="dropdown-item" role="menuitem"
-                on-click="onRemoveLanguageClick_">
+                on-click="onRemoveLanguageClick_"
+                disabled="[[!detailLanguage_.state.removable]]">
               $i18n{removeLanguage}
             </button>
           </cr-action-menu>

chrome/browser/resources/settings/languages_page/BUILD.gn

@@ -103,6 +103,7 @@ js_library("languages.m") {
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:cr.m",
     "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js:load_time_data.m",
     "//ui/webui/resources/js:promise_resolver.m",
   ]
   externs_list = [

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/load_time_data.html">
 <link rel="import" href="chrome://resources/html/promise_resolver.html">
 <link rel="import" href="../prefs/prefs.html">
 <link rel="import" href="../prefs/prefs_behavior.html">

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

@@ -738,11 +738,12 @@ Polymer({
     // Remove the language from spell check.
     this.deletePrefListItem('spellcheck.dictionaries', languageCode);
 
-    if (cr.isChromeOS) {
+    // For language settings V2, languages and input methods are decoupled
+    // so there's no need to remove related input methods.
+    if (cr.isChromeOS && !this.isChromeOSLanguageSettingsV2_()) {
       // Remove input methods that don't support any other enabled language.
       const inputMethods = this.languageInputMethods_.get(languageCode) || [];
-      for (let i = 0; i < inputMethods.length; i++) {
-        const inputMethod = inputMethods[i];
+      for (const inputMethod of inputMethods) {
         const supportsOtherEnabledLanguages = inputMethod.languageCodes.some(
             otherLanguageCode => otherLanguageCode !== languageCode &&
                 this.isLanguageEnabled(otherLanguageCode));
@@ -756,6 +757,17 @@ Polymer({
     this.languageSettingsPrivate_.disableLanguage(languageCode);
   },
 
+  /**
+   * @private
+   */
+  isChromeOSLanguageSettingsV2_() {
+    if (!cr.isChromeOS) {
+      return false;
+    }
+    return loadTimeData.valueExists('enableLanguageSettingsV2') &&
+        loadTimeData.getBoolean('enableLanguageSettingsV2');
+  },
+
   /**
    * @param {!LanguageState} languageState
    * @return {boolean}
@@ -772,7 +784,10 @@ Polymer({
    */
   canDisableLanguage(languageState) {
     // Cannot disable the prospective UI language.
-    if (languageState.language.code === this.languages.prospectiveUILanguage) {
+    // Exception for Chrome OS language settings V2 as we are decoupling
+    // language preference from UI language.
+    if (languageState.language.code === this.languages.prospectiveUILanguage &&
+        !this.isChromeOSLanguageSettingsV2_()) {
       return false;
     }
 
@@ -790,6 +805,13 @@ Polymer({
       return true;
     }
 
+    // ChromeOS language settings V2 does not remove input methods when removing
+    // languages, so there's no need to check for other enabled input methods
+    // below.
+    if (this.isChromeOSLanguageSettingsV2_()) {
+      return true;
+    }
+
     // If this is the only enabled language that is supported by all enabled
     // component IMEs, it cannot be disabled because we need those IMEs.
     const otherInputMethodsEnabled =

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

@@ -176,6 +176,86 @@ suite('languages page', () => {
       assertEquals('en-US', languageHelper.getPref(languagesPref).value);
     });
 
+    test('the only translate blocked language is not removable', () => {
+      //'en-US' is preconfigured to be the only translate blocked language.
+      assertDeepEquals(
+          ['en-US'], languageHelper.prefs.translate_blocked_languages.value);
+      const items = languagesList.querySelectorAll('.list-item');
+      const domRepeat = assert(languagesList.querySelector('dom-repeat'));
+      const item = Array.from(items).find(function(el) {
+        return domRepeat.itemForElement(el) &&
+            domRepeat.itemForElement(el).language.code === 'en-US';
+      });
+
+      // Opens the menu and selects Remove.
+      item.querySelector('cr-icon-button').click();
+
+      assertTrue(actionMenu.open);
+      const removeMenuItem = getMenuItem('removeLanguage');
+      assertTrue(removeMenuItem.disabled);
+      assertFalse(removeMenuItem.hidden);
+    });
+
+    test('device language is removable', () => {
+      // 'en-US' is the preconfigured UI language.
+      assertEquals('en-US', languageHelper.languages.prospectiveUILanguage);
+      // Add 'sw' to translate_blocked_languages.
+      languageHelper.setPrefValue(
+          'translate_blocked_languages', ['en-US', 'sw']);
+      Polymer.dom.flush();
+
+      const items = languagesList.querySelectorAll('.list-item');
+      const domRepeat = assert(languagesList.querySelector('dom-repeat'));
+      const item = Array.from(items).find(function(el) {
+        return domRepeat.itemForElement(el) &&
+            domRepeat.itemForElement(el).language.code === 'en-US';
+      });
+
+      // Opens the menu and selects Remove.
+      item.querySelector('cr-icon-button').click();
+
+      assertTrue(actionMenu.open);
+      const removeMenuItem = getMenuItem('removeLanguage');
+      assertFalse(removeMenuItem.disabled);
+      assertFalse(removeMenuItem.hidden);
+      removeMenuItem.click();
+      assertFalse(actionMenu.open);
+
+      assertEquals('sw', languageHelper.getPref(languagesPref).value);
+    });
+
+    test('single preferred language is not removable', () => {
+      languageHelper.setPrefValue(
+          'settings.language.preferred_languages', 'sw');
+      Polymer.dom.flush();
+      const items = languagesList.querySelectorAll('.list-item');
+      const domRepeat = assert(languagesList.querySelector('dom-repeat'));
+      const item = Array.from(items).find(function(el) {
+        return domRepeat.itemForElement(el) &&
+            domRepeat.itemForElement(el).language.code === 'sw';
+      });
+
+      // Opens the menu and selects Remove.
+      item.querySelector('cr-icon-button').click();
+
+      assertTrue(actionMenu.open);
+      const removeMenuItem = getMenuItem('removeLanguage');
+      assertTrue(removeMenuItem.disabled);
+      assertFalse(removeMenuItem.hidden);
+    });
+
+    test('removing a language does not remove related input methods', () => {
+      const sw = '_comp_ime_abcdefghijklmnopqrstuvwxyzabcdefxkb:sw:sw';
+      const swUS = 'ime_abcdefghijklmnopqrstuvwxyzabcdefxkb:us:sw';
+      languageHelper.addInputMethod(sw);
+      languageHelper.addInputMethod(swUS);
+      assertEquals(4, languageHelper.languages.inputMethods.enabled.length);
+
+      // Disable Swahili. The Swahili-only keyboard should not be removed.
+      languageHelper.disableLanguage('sw');
+      assertEquals(4, languageHelper.languages.inputMethods.enabled.length);
+    });
+
     test('has move up/down buttons', () => {
       // Adds several languages.
       for (const language of ['en-CA', 'en-US', 'tk', 'no']) {