Show native display names in two places: tooltip and language title on the right.

The change  makes it easy to choose a language from the language list
in UI langauge that you cannot read. This situation happens you
accidentally change the UI language some language they cannot read.

BUG=chromium-os:3871
TEST=manually

Review URL: http://codereview.chromium.org/3107014

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@56192 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 29 insertions, 1 deletions

diff --git a/chrome/browser/resources/options/chromeos_language_list.js b/chrome/browser/resources/options/chromeos_language_list.js
index 1a493a7..9debe98 100644
--- a/chrome/browser/resources/options/chromeos_language_list.js
+++ b/chrome/browser/resources/options/chromeos_language_list.js
@@ -35,6 +35,25 @@ cr.define('options.language', function() {
     return this.languageCodeToDisplayName_[languageCode];
   }
 
+  /**
+   * Gets native display name from the given language code.
+   * @param {string} languageCode Language code (ex. "fr").
+   */
+  LanguageList.getNativeDisplayNameFromLanguageCode = function(languageCode) {
+    // Build the language code to display name dictionary at first time.
+    if (!this.languageCodeToNativeDisplayName_) {
+      this.languageCodeToNativeDisplayName_ = {};
+      var languageList = templateData.languageList;
+      for (var i = 0; i < languageList.length; i++) {
+        var language = languageList[i];
+        this.languageCodeToNativeDisplayName_[language.code] =
+            language.nativeDisplayName;
+      }
+    }
+
+    return this.languageCodeToNativeDisplayName_[languageCode];
+  }
+
   LanguageList.prototype = {
     __proto__: List.prototype,
 
@@ -66,10 +85,13 @@ cr.define('options.language', function() {
     createItem: function(languageCode) {
       var languageDisplayName =
           LanguageList.getDisplayNameFromLanguageCode(languageCode);
+      var languageNativeDisplayName =
+          LanguageList.getNativeDisplayNameFromLanguageCode(languageCode);
       return new ListItem({
         label: languageDisplayName,
         draggable: true,
-        languageCode: languageCode
+        languageCode: languageCode,
+        title: languageNativeDisplayName  // Show native name as tooltip.
       });
     },
 
diff --git a/chrome/browser/resources/options/chromeos_language_options.js b/chrome/browser/resources/options/chromeos_language_options.js
index ab1421b..39df45f 100644
--- a/chrome/browser/resources/options/chromeos_language_options.js
+++ b/chrome/browser/resources/options/chromeos_language_options.js
@@ -250,6 +250,12 @@ cr.define('options', function() {
     updateSelectedLanguageName_: function(languageCode) {
       var languageDisplayName = LanguageList.getDisplayNameFromLanguageCode(
           languageCode);
+      var languageNativeDisplayName =
+          LanguageList.getNativeDisplayNameFromLanguageCode(languageCode);
+      // If the native name is different, add it.
+      if (languageDisplayName != languageNativeDisplayName) {
+        languageDisplayName += ' - ' + languageNativeDisplayName;
+      }
       // Update the currently selected language name.
       $('language-options-language-name').textContent = languageDisplayName;
     },