DOMUI: Fix AF CC field some more.

* Don't erase the first typed character when the field is empty.
* Don't allow users to select text of buttons and selects, which was causing
  the 'Add CC' button text to be selected when the user activated a list item.

BUG=70868
TEST=none

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

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

chrome/browser/resources/options/autofill_edit_creditcard_overlay.js

@@ -46,9 +46,6 @@ cr.define('options', function() {
         self.saveCreditCard_();
         self.dismissOverlay_();
       }
-      $('creditCardNumber').onkeydown = this.onTextInput_.bind(this);
-      $('creditCardNumber').addEventListener('textInput',
-                                             this.onTextInput_.bind(this));
 
       self.guid_ = '';
       self.storedCCNumber_ = '';
@@ -58,27 +55,6 @@ cr.define('options', function() {
       self.setDefaultSelectOptions_();
     },
 
-    /**
-     * Handles the textInput and keydown events.
-     * @private
-     */
-    onTextInput_: function(event) {
-      // For some reason, the textInput event doesn't consider
-      // backspace/deletion an input event, so we have to handle those here.
-      // 8 - backspace
-      // 46 - delete
-      if (event.type == 'keydown' && event.keyCode != '8' &&
-          event.keyCode != '46')
-        return;
-
-      // If the user hasn't edited the text yet, delete it all on edit.
-      if (!this.hasEditedNumber_ &&
-          $('creditCardNumber').value != this.storedCCNumber_) {
-        this.hasEditedNumber_ = true;
-        $('creditCardNumber').value = '';
-      }
-    },
-
     /**
      * Clears any uncommitted input, and dismisses the overlay.
      * @private
@@ -118,22 +94,31 @@ cr.define('options', function() {
      * @private
      */
     connectInputEvents_: function() {
-      var self = this;
       $('nameOnCard').oninput = $('creditCardNumber').oninput =
           $('expirationMonth').onchange = $('expirationYear').onchange =
-              function(event) {
-                self.inputFieldChanged_();
-              }
+              this.inputFieldChanged_.bind(this);
     },
 
     /**
      * Checks the values of each of the input fields and disables the 'Ok'
      * button if all of the fields are empty.
+     * @param {Event} opt_event Optional data for the 'input' event.
      * @private
      */
-    inputFieldChanged_: function() {
-      var disabled = !$('nameOnCard').value && !$('creditCardNumber').value;
+    inputFieldChanged_: function(opt_event) {
+      var ccNumber = $('creditCardNumber');
+      var disabled = !$('nameOnCard').value && !ccNumber.value;
       $('autoFillEditCreditCardApplyButton').disabled = disabled;
+
+      if (opt_event && opt_event.target == ccNumber) {
+        // If the user hasn't edited the text yet, delete it all on edit.
+        if (!this.hasEditedNumber_ && this.storedCCNumber_.length &&
+            ccNumber.value != this.storedCCNumber_) {
+          ccNumber.value = '';
+        }
+
+        this.hasEditedNumber_ = true;
+      }
     },
 
     /**

chrome/browser/resources/options/options_page.css

@@ -588,6 +588,7 @@ button,
 input[type='submit'] {
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-user-select: none;
   background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
   border: 1px solid #aaa;
   color: #444;
@@ -627,6 +628,7 @@ select {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-user-select: none;
   background-image: url("select.png"), -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
   background-position: center right;
   background-repeat: no-repeat;