Implement "Display Chrome OS in this language" button.

chrome/browser/resources/options/chromeos_language_options.js

 // Copyright (c) 2010 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.
 
 cr.define('options', function() {
 
   const OptionsPage = options.OptionsPage;
   const AddLanguageOverlay = options.language.AddLanguageOverlay;
   const LanguageList = options.language.LanguageList;
 
@@ skipping 82 matching lines @@
         label.languageCode = inputMethod.languageCode;
 
         inputMethodList.appendChild(label);
       }
       // Listen to pref change once the input method list is initialized.
       Preferences.getInstance().addEventListener(this.preloadEnginesPref,
           cr.bind(this.handlePreloadEnginesPrefChange_, this));
     },
 
     /**
-     * Handler for languageOptionsList's change event.
+     * Handles languageOptionsList's change event.
      * @param {Event} e Change event.
      * @private
      */
     handleLanguageOptionsListChange_: function(e) {
       var languageOptionsList = $('language-options-list');
       var index = languageOptionsList.selectionModel.selectedIndex;
       if (index == -1)
         return;
 
       var languageCode = languageOptionsList.getLanguageCodes()[index];
+      this.updateSelectedLanguageName_(languageCode);
+      this.updateUiLanguageButton_(languageCode);
+      this.updateInputMethodList_();
+      this.updateLanguageListInAddLanguageOverlay_();
+    },
+
+    /**
+     * Updates the currently selected language name.
+     * @param {string} languageCode Language code (ex. "fr").
+     * @private
+     */
+    updateSelectedLanguageName_: function(languageCode) {
       var languageDisplayName = LanguageList.getDisplayNameFromLanguageCode(
           languageCode);
+      // Update the currently selected language name.
+      $('language-options-language-name').textContent = languageDisplayName;
+    },
 
-      $('language-options-language-name').textContent = languageDisplayName;
-      // TODO(satorux): The button text should be changed to
-      // 'is_displayed_in_this_language', depending on the current UI
-      // language.
-      $('language-options-ui-language-button').textContent = (
-          localStrings.getString('display_in_this_language'));
+    /**
+     * Updates the UI language button.
+     * @param {string} languageCode Language code (ex. "fr").
+     * @private
+     */
+    updateUiLanguageButton_: function(languageCode) {
+      var uiLanguageButton = $('language-options-ui-language-button');
+      // Check if the language code matches the current UI language.
+      if (languageCode == templateData.currentUiLanguageCode) {
+        // If it matches, the button just says that the UI language is
+        // currently in use.
+        uiLanguageButton.textContent =
+            localStrings.getString('is_displayed_in_this_language');
+        // Make it look like a text label.
+        uiLanguageButton.className = 'text-button';
+        // Remove the event listner.
+        uiLanguageButton.onclick = undefined;
+      } else {
+        // Otherwise, users can click on the button to change the UI language.
+        uiLanguageButton.textContent =
+            localStrings.getString('display_in_this_language');
+        uiLanguageButton.className = '';
+        // Send the change request to Chrome.
+        uiLanguageButton.onclick = function(e) {
+          chrome.send('uiLanguageChange', [languageCode]);
+        }
+      }
+    },
 
+    /**
+     * Updates the input method list.
+     * @param {string} languageCode Language code (ex. "fr").
+     * @private
+     */
+    updateInputMethodList_: function(languageCode) {
       // Change the visibility of the input method list. Input methods that
       // matches |languageCode| will become visible.
       var inputMethodList = $('language-options-input-method-list');
       var labels = inputMethodList.querySelectorAll('label');
       for (var i = 0; i < labels.length; i++) {
         if (labels[i].languageCode == languageCode) {
           labels[i].style.display = 'block';
         } else {
           labels[i].style.display = 'none';
         }
       }
+    },
 
+    /**
+     * Updates the language list in the add language overlay.
+     * @param {string} languageCode Language code (ex. "fr").
+     * @private
+     */
+    updateLanguageListInAddLanguageOverlay_: function(languageCode) {
       // Change the visibility of the language list in the add language
       // overlay. Languages that are already active will become invisible,
       // so that users don't add the same language twice.
+      var languageOptionsList = $('language-options-list');
       var languageCodes = languageOptionsList.getLanguageCodes();
       var languageCodeSet = {};
       for (var i = 0; i < languageCodes.length; i++) {
         languageCodeSet[languageCodes[i]] = true;
       }
       var addLanguageList = $('add-language-overlay-language-list');
       var lis = addLanguageList.querySelectorAll('li');
       for (var i = 0; i < lis.length; i++) {
         // The first child button knows the language code.
         var button = lis[i].childNodes[0];
@@ skipping 136 matching lines @@
         // Check if the preload engine is present in the
         // dictionary. Otherwise, skip it.
         if (preloadEngines[i] in dictionary) {
             filteredPreloadEngines.push(preloadEngines[i]);
         }
       }
       return filteredPreloadEngines;
     }
   };
 
+  /**
+   * Chrome callback for when the UI language preference is saved.
+   */
+  LanguageOptions.uiLanguageSaved = function() {
+    // TODO(satorux): Show the message in a nicer way once we get a mock
+    // from UX.
+    alert(localStrings.getString('restart_required'));
+  };
+
   // Export
   return {
     LanguageOptions: LanguageOptions
   };
 
 });