[uber page] Restore appearance of text to non-actionable language buttons.

R=csilv@chromium.org,tbreisacher@chromium.org
BUG=112871
TEST=No <button>s that don't do anything, everything involving changing spell
check and launching ChromeOS in a different language still works, one is able
to revert to a different language before restarting ChromeOS.


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

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

4 files changed, 126 insertions, 101 deletions

diff --git a/chrome/browser/resources/options2/language_options.css b/chrome/browser/resources/options2/language_options.css
index 4cf5f61..f56ee18 100644
--- a/chrome/browser/resources/options2/language_options.css
+++ b/chrome/browser/resources/options2/language_options.css
@@ -16,13 +16,18 @@
   -webkit-margin-start: 12px;
   font-size: 100%;
   font-weight: bold;
+  margin-bottom: 12px;
   margin-top: 12px;
 }
 
 .language-options-contents  {
-  -webkit-padding-end: 12px;
-  -webkit-padding-start: 12px;
-  padding-bottom: 10px;
+  padding: 0 12px 4px;
+}
+
+.language-options-contents span {
+  display: inline-block;
+  margin: 1px;
+  padding: 0.42em 10px;
 }
 
 .language-options-header,
@@ -70,12 +75,15 @@
   width: 360px;
 }
 
+.language-options-right h3:not(:first-of-type) {
+  margin-top: 24px;
+}
+
 .language-options-notification {
   background-color: rgb(255, 242, 158);
   border-bottom: 1px solid #ccc;
   border-top: 1px solid #ccc;
-  display: none;
-  padding: 12px 30px 12px 12px;
+  padding: 8px 30px 8px 12px;
 }
 
 #language-options-input-method-list button {
@@ -83,16 +91,6 @@
   display: block;
 }
 
-#language-options-ui-language-button {
-  -webkit-margin-start: 10px;
-  width: 95%;
-}
-
-#language-options-spell-check-language-button {
-  -webkit-margin-start: 10px;
-  width: 95%;
-}
-
 #language-options-input-method-list label {
   margin: 4px 0;
 }
@@ -134,7 +132,7 @@
 }
 
 #language-options-ui-restart-button {
-  margin-top: 12px;
+  margin-top: 4px;
 }
 
 /* In ChromeOS we present the language choices as a big page of links. */
@@ -218,23 +216,3 @@
 #add-language-overlay-page .content-area {
   padding-bottom: 10px;
 }
-
-.text-button,
-.text-button:active,
-.text-button:focus,
-.text-button:hover {
-  -webkit-box-shadow: none;
-  background: transparent none;
-  border-color: transparent;
-  color: #000;
-}
-
-button[disabled].text-button,
-button[disabled].text-button:active,
-button[disabled].text-button:focus,
-button[disabled].text-button:hover {
-  -webkit-box-shadow: none;
-  background: transparent none;
-  border-color: transparent;
-  color: #AAA;
-}
diff --git a/chrome/browser/resources/options2/language_options.html b/chrome/browser/resources/options2/language_options.html
index 59c1e19..99553be 100644
--- a/chrome/browser/resources/options2/language_options.html
+++ b/chrome/browser/resources/options2/language_options.html
@@ -26,18 +26,27 @@
         <h3 id="language-options-language-name"></h3>
 <if expr="os == 'win32' or pp_ifdef('chromeos')">
         <div class="language-options-contents">
-          <button id="language-options-ui-language-button"></button>
+          <button id="language-options-ui-language-button"
+              i18n-content="display_in_this_language">
+          </button>
+          <span id="language-options-ui-language-message" hidden></span>
         </div>
 </if>
         <div class="language-options-contents">
-          <button id="language-options-spell-check-language-button"></button>
+          <button id="language-options-spell-check-language-button"
+              i18n-content="use_this_for_spell_checking">
+          </button>
+          <span id="language-options-spell-check-language-message"
+              hidden>
+          </span>
         </div>
         <div id="language-options-ui-notification-bar"
-             class="language-options-notification">
+             class="language-options-notification" hidden>
           <div i18n-content="restart_required"></div>
 <if expr="pp_ifdef('chromeos')">
           <button id="language-options-ui-restart-button"
-                  i18n-content="restart_button"></button>
+                  i18n-content="restart_button">
+          </button>
 </if>
         </div>
 <if expr="pp_ifdef('chromeos')">
diff --git a/chrome/browser/resources/options2/language_options.js b/chrome/browser/resources/options2/language_options.js
index 9f17ec0..6b10799 100644
--- a/chrome/browser/resources/options2/language_options.js
+++ b/chrome/browser/resources/options2/language_options.js
@@ -104,6 +104,16 @@ cr.define('options', function() {
         }
       }
 
+      if (cr.isChromeOS) {
+        $('language-options-ui-restart-button').onclick =
+            chrome.send.bind(chrome, 'uiLanguageRestart');
+      }
+
+      var spellCheckLanguageButton =
+          getRequiredElement('language-options-spell-check-language-button');
+      spellCheckLanguageButton.addEventListener('click',
+          this.handleSpellCheckLanguageButtonClick_.bind(this));
+
       $('language-confirm').onclick =
           OptionsPage.closeOverlay.bind(OptionsPage);
 
@@ -193,7 +203,7 @@ cr.define('options', function() {
         e.preventDefault();
         chrome.send('inputMethodOptionsOpen', [inputMethodId]);
         OptionsPage.navigateToPage(pageName);
-      }
+      };
       return button;
     },
 
@@ -237,6 +247,13 @@ cr.define('options', function() {
     },
 
     /**
+     * Happens when a user changes back to the language they're currently using.
+     */
+    currentLocaleWasReselected: function() {
+      this.updateUiLanguageButton_(templateData.currentUiLanguageCode);
+    },
+
+    /**
      * Handles languageOptionsList's save event.
      * @param {Event} e Save event.
      * @private
@@ -348,47 +365,42 @@ cr.define('options', function() {
      */
     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 =
+      var uiLanguageMessage = $('language-options-ui-language-message');
+      var uiLanguageNotification = $('language-options-ui-notification-bar');
+
+      // Remove the event listener and add it back if useful.
+      uiLanguageButton.onclick = null;
+
+      // Unhide the language button every time, as it could've been previously
+      // hidden by a language change.
+      uiLanguageButton.hidden = false;
+
+      if (languageCode == templateData.prospectiveUiLanguageCode) {
+        uiLanguageMessage.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;
+        showMutuallyExclusiveNodes(
+            [uiLanguageButton, uiLanguageMessage, uiLanguageNotification], 1);
       } else if (languageCode in templateData.uiLanguageCodeSet) {
-        // If the language is supported as UI language, users can click on
-        // the button to change the UI language.
         if (cr.isChromeOS && AccountsOptions.loggedInAsGuest()) {
           // In the guest mode for ChromeOS, changing UI language does not make
           // sense because it does not take effect after browser restart.
           uiLanguageButton.hidden = true;
+          uiLanguageMessage.hidden = true;
         } else {
           uiLanguageButton.textContent =
               localStrings.getString('display_in_this_language');
-          uiLanguageButton.className = '';
-          // Send the change request to Chrome.
+          showMutuallyExclusiveNodes(
+              [uiLanguageButton, uiLanguageMessage, uiLanguageNotification], 0);
           uiLanguageButton.onclick = function(e) {
             chrome.send('uiLanguageChange', [languageCode]);
-          }
-        }
-        if (cr.isChromeOS) {
-          $('language-options-ui-restart-button').onclick = function(e) {
-            chrome.send('uiLanguageRestart');
-          }
+          };
         }
       } else {
-        // If the language is not supported as UI language, the button
-        // just says that Chromium OS cannot be displayed in this language.
-        uiLanguageButton.textContent =
+        uiLanguageMessage.textContent =
             localStrings.getString('cannot_be_displayed_in_this_language');
-        uiLanguageButton.className = 'text-button';
-        uiLanguageButton.onclick = undefined;
+        showMutuallyExclusiveNodes(
+            [uiLanguageButton, uiLanguageMessage, uiLanguageNotification], 1);
       }
-      uiLanguageButton.style.display = 'block';
-      $('language-options-ui-notification-bar').style.display = 'none';
     },
 
     /**
@@ -397,42 +409,31 @@ cr.define('options', function() {
      * @private
      */
     updateSpellCheckLanguageButton_: function(languageCode) {
-      var display = 'block';
-      var spellCheckLanguageButton = $(
-          'language-options-spell-check-language-button');
-      // Check if the language code matches the current spell check language.
+      var spellCheckLanguageButton =
+          $('language-options-spell-check-language-button');
+      var spellCheckLanguageMessage =
+          $('language-options-spell-check-language-message');
+
       if (languageCode == this.spellCheckDictionary_) {
-        // If it matches, the button just says that the spell check language is
-        // currently in use.
-        spellCheckLanguageButton.textContent =
+        spellCheckLanguageMessage.textContent =
             localStrings.getString('is_used_for_spell_checking');
-        // Make it look like a text label.
-        spellCheckLanguageButton.className = 'text-button';
-        // Remove the event listner.
-        spellCheckLanguageButton.onclick = undefined;
+        showMutuallyExclusiveNodes(
+            [spellCheckLanguageButton, spellCheckLanguageMessage], 1);
       } else if (languageCode in templateData.spellCheckLanguageCodeSet) {
-        // If the language is supported as spell check language, users can
-        // click on the button to change the spell check language.
         spellCheckLanguageButton.textContent =
             localStrings.getString('use_this_for_spell_checking');
-        spellCheckLanguageButton.className = '';
+        showMutuallyExclusiveNodes(
+            [spellCheckLanguageButton, spellCheckLanguageMessage], 0);
         spellCheckLanguageButton.languageCode = languageCode;
-        // Add an event listner to the click event.
-        spellCheckLanguageButton.addEventListener('click',
-            this.handleSpellCheckLanguageButtonClick_.bind(this));
       } else if (!languageCode) {
-        display = 'none';
+        spellCheckLanguageButton.hidden = true;
+        spellCheckLanguageMessage.hidden = true;
       } else {
-        // If the language is not supported as spell check language, the
-        // button just says that this language cannot be used for spell
-        // checking.
-        spellCheckLanguageButton.textContent =
+        spellCheckLanguageMessage.textContent =
             localStrings.getString('cannot_be_used_for_spell_checking');
-        spellCheckLanguageButton.className = 'text-button';
-        spellCheckLanguageButton.onclick = undefined;
+        showMutuallyExclusiveNodes(
+            [spellCheckLanguageButton, spellCheckLanguageMessage], 1);
       }
-      spellCheckLanguageButton.style.display = display;
-      $('language-options-ui-notification-bar').style.display = 'none';
     },
 
     /**
@@ -583,7 +584,7 @@ cr.define('options', function() {
      */
     languageIsDeletable: function(languageCode) {
       // Don't allow removing the language if it's as UI language.
-      if (languageCode == templateData.currentUiLanguageCode)
+      if (languageCode == templateData.prospectiveUiLanguageCode)
         return false;
       return (!cr.isChromeOS ||
               this.canDeleteLanguage_(languageCode));
@@ -809,11 +810,41 @@ cr.define('options', function() {
   };
 
   /**
+   * Shows the node at |index| in |nodes|, hides all others.
+   * @param {Array<HTMLElement>} nodes The nodes to be shown or hidden.
+   * @param {number} index The index of |nodes| to show.
+   */
+  function showMutuallyExclusiveNodes(nodes, index) {
+    assert(index >= 0 && index < nodes.length);
+    for (var i = 0; i < nodes.length; ++i) {
+      assert(nodes[i] instanceof HTMLElement);  // TODO(dbeam): Ignore null?
+      nodes[i].hidden = i != index;
+    }
+  }
+
+  /**
    * Chrome callback for when the UI language preference is saved.
+   * @param {string} languageCode The newly selected language to use.
    */
-  LanguageOptions.uiLanguageSaved = function() {
-    $('language-options-ui-language-button').style.display = 'none';
-    $('language-options-ui-notification-bar').style.display = 'block';
+  LanguageOptions.uiLanguageSaved = function(languageCode) {
+    templateData.prospectiveUiLanguageCode = languageCode;
+
+    // If the user is no longer on the same language code, ignore.
+    if ($('language-options-list').getSelectedLanguageCode() != languageCode)
+      return;
+
+    // Special case for when a user changes to a different language, and changes
+    // back to the same language without having restarted Chrome or logged
+    // in/out of ChromeOS.
+    if (languageCode == templateData.currentUiLanguageCode) {
+      LanguageOptions.getInstance().currentLocaleWasReselected();
+      return;
+    }
+
+    // Otherwise, show a notification telling the user that their changes will
+    // only take effect after restart.
+    showMutuallyExclusiveNodes([$('language-options-ui-language-button'),
+                                $('language-options-ui-notification-bar')], 1);
   };
 
   // Export
diff --git a/chrome/browser/ui/webui/options2/language_options_handler_common2.cc b/chrome/browser/ui/webui/options2/language_options_handler_common2.cc
index df3020c..f9178d9c 100644
--- a/chrome/browser/ui/webui/options2/language_options_handler_common2.cc
+++ b/chrome/browser/ui/webui/options2/language_options_handler_common2.cc
@@ -1,4 +1,4 @@
-// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Copyright (c) 2012 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.
 
@@ -19,6 +19,7 @@
 #include "chrome/browser/prefs/pref_service.h"
 #include "chrome/browser/ui/browser_list.h"
 #include "chrome/common/chrome_switches.h"
+#include "chrome/common/extensions/extension_l10n_util.h"
 #include "chrome/common/pref_names.h"
 #include "chrome/common/spellcheck_common.h"
 #include "content/public/browser/user_metrics.h"
@@ -96,8 +97,12 @@ void LanguageOptionsHandlerCommon::GetLocalizedValues(
           IDS_OPTIONS_SETTINGS_LANGUAGES_RELAUNCH_BUTTON));
 
   // The following are resources, rather than local strings.
-  localized_strings->SetString("currentUiLanguageCode",
-                               g_browser_process->GetApplicationLocale());
+  std::string application_locale = g_browser_process->GetApplicationLocale();
+  localized_strings->SetString("currentUiLanguageCode", application_locale);
+  std::string prospective_locale =
+      g_browser_process->local_state()->GetString(prefs::kApplicationLocale);
+  localized_strings->SetString("prospectiveUiLanguageCode",
+      !prospective_locale.empty() ? prospective_locale : application_locale);
   localized_strings->Set("spellCheckLanguageCodeSet",
                          GetSpellCheckLanguageCodeSet());
   localized_strings->Set("uiLanguageCodeSet", GetUILanguageCodeSet());
@@ -157,7 +162,9 @@ void LanguageOptionsHandlerCommon::UiLanguageChangeCallback(
       "LanguageOptions_UiLanguageChange_%s", language_code.c_str());
   content::RecordComputedAction(action);
   SetApplicationLocale(language_code);
-    web_ui()->CallJavascriptFunction("options.LanguageOptions.uiLanguageSaved");
+  StringValue language_value(language_code);
+  web_ui()->CallJavascriptFunction("options.LanguageOptions.uiLanguageSaved",
+                                   language_value);
 }
 
 void LanguageOptionsHandlerCommon::SpellCheckLanguageChangeCallback(