Change PrefNumber to listen to the input event so that the value input

with a spin button is correctly applied to the preference.

TEST=manually on the netbook
BUG=chromium-os:6022, chromium-os:6154

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

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

4 files changed, 22 insertions, 4 deletions

diff --git a/chrome/browser/resources/options/chromeos_language_chewing_options.html b/chrome/browser/resources/options/chromeos_language_chewing_options.html
index c728359..e3d169c 100644
--- a/chrome/browser/resources/options/chromeos_language_chewing_options.html
+++ b/chrome/browser/resources/options/chromeos_language_chewing_options.html
@@ -72,7 +72,7 @@
                 pref="settings.language.chewing_max_chi_symbol_len"
                 i18n-values="min:Chewing_maxChiSymbolLenMin;
                              max:Chewing_maxChiSymbolLenMax"
-                type="number">
+                type="number" required>
          </td>
        </tr>
        <tr>
@@ -82,7 +82,7 @@
                 pref="settings.language.chewing_cand_per_page"
                 i18n-values="min:Chewing_candPerPageMin;
                              max:Chewing_candPerPageMax"
-                type="number">
+                type="number" required>
          </td>
        </tr>
        <tr>
diff --git a/chrome/browser/resources/options/chromeos_language_mozc_options.html b/chrome/browser/resources/options/chromeos_language_mozc_options.html
index 8d8b5a0..2329327 100644
--- a/chrome/browser/resources/options/chromeos_language_mozc_options.html
+++ b/chrome/browser/resources/options/chromeos_language_mozc_options.html
@@ -142,7 +142,7 @@
            <input id="mozc-suggestions-size" class="control" type="number"
                pref="settings.language.mozc_suggestions_size"
                i18n-values="min:mozc_suggestions_sizeMin;
-                            max:mozc_suggestions_sizeMax">
+                            max:mozc_suggestions_sizeMax" required>
          </td>
        </tr>
      </table>
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 63eddd7..7958529 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -282,6 +282,14 @@ select {
   background-color: pink;
 }
 
+#languageChewingPage :invalid {
+  background-color: pink;
+}
+
+#languageMozcPage :invalid {
+  background-color: pink;
+}
+
 list > .heading {
   color: #666666;
 }
diff --git a/chrome/browser/resources/options/pref_ui.js b/chrome/browser/resources/options/pref_ui.js
index 48749ea..5ac7baf 100644
--- a/chrome/browser/resources/options/pref_ui.js
+++ b/chrome/browser/resources/options/pref_ui.js
@@ -142,7 +142,9 @@ cr.define('options', function() {
       // Listen to user events.
       this.addEventListener('change',
           function(e) {
-            Preferences.setIntegerPref(self.pref, self.value, self.metric);
+            if (this.validity.valid) {
+              Preferences.setIntegerPref(self.pref, self.value, self.metric);
+            }
           });
     }
   };
@@ -175,6 +177,14 @@ cr.define('options', function() {
     decorate: function() {
       this.type = 'number';
       PrefNumeric.prototype.decorate.call(this);
+
+      // Listen to user events.
+      this.addEventListener('input',
+          function(e) {
+            if (this.validity.valid) {
+              Preferences.setIntegerPref(self.pref, self.value, self.metric);
+            }
+          });
     }
   };