Make hitting "Enter" submit the add/change profile dialog.

chrome/browser/resources/options/manage_profile_overlay.js

 // 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.
 
 cr.define('options', function() {
   var OptionsPage = options.OptionsPage;
   var ArrayDataModel = cr.ui.ArrayDataModel;
 
   /**
    * ManageProfileOverlay class
@@ skipping 23 matching lines @@
     iconGridSelectedURL_: null,
 
     /**
      * Initialize the page.
      */
     initializePage: function() {
       // Call base class implementation to start preference initialization.
       OptionsPage.prototype.initializePage.call(this);
 
       var self = this;
-      var iconGrid = $('manage-profile-icon-grid');
-      var createIconGrid = $('create-profile-icon-grid');
-      options.ProfilesIconGrid.decorate(iconGrid);
-      options.ProfilesIconGrid.decorate(createIconGrid);
-      iconGrid.addEventListener('change', function(e) {
-        self.onIconGridSelectionChanged_('manage');
-      });
-      createIconGrid.addEventListener('change', function(e) {
-        self.onIconGridSelectionChanged_('create');
-      });
+      options.ProfilesIconGrid.decorate($('manage-profile-icon-grid'));
+      options.ProfilesIconGrid.decorate($('create-profile-icon-grid'));
+      self.registerCommonEventHandlers_('create',
+                                        self.submitCreateProfile_.bind(self));
+      self.registerCommonEventHandlers_('manage',
+                                        self.submitManageChanges_.bind(self));
 
-      $('manage-profile-name').oninput = function(event) {
-        self.onNameChanged_(event, 'manage');
-      };
-      $('create-profile-name').oninput = function(event) {
-        self.onNameChanged_(event, 'create');
-      };
       if (loadTimeData.getBoolean('managedUsersEnabled')) {
         $('create-profile-managed-container').hidden = false;
         $('managed-user-settings-button').onclick = function(event) {
           OptionsPage.navigateToPage('managedUser');
           chrome.send('coreOptionsUserMetricsAction',
                       ['Options_ManagedUserPassphraseOverlay']);
         };
       }
       $('manage-profile-cancel').onclick =
           $('delete-profile-cancel').onclick =
               $('create-profile-cancel').onclick = function(event) {
         OptionsPage.closeOverlay();
       };
-      $('manage-profile-ok').onclick = function(event) {
-        OptionsPage.closeOverlay();
-        self.submitManageChanges_();
-      };
       $('delete-profile-ok').onclick = function(event) {
         OptionsPage.closeOverlay();
         chrome.send('deleteProfile', [self.profileInfo_.filePath]);
       };
-      $('create-profile-ok').onclick = function(event) {
-        OptionsPage.closeOverlay();
-        // Get the user's chosen name and icon, or default if they do not
-        // wish to customize their profile.
-        var name = $('create-profile-name').value;
-        var icon_url = createIconGrid.selectedItem;
-        var create_shortcut = false;
-        if ($('create-shortcut'))
-          create_shortcut = $('create-shortcut').checked;
-        var is_managed = $('create-profile-managed').checked;
-        chrome.send('createProfile',
-                    [name, icon_url, create_shortcut, is_managed]);
-      };
     },
 
     /** @override */
     didShowPage: function() {
       chrome.send('requestDefaultProfileIcons');
 
       if ($('manage-shortcut'))
         $('manage-shortcut').checked = false;
 
       // Just ignore the manage profile dialog on Chrome OS, they use /accounts.
       if (!cr.isChromeOS && window.location.pathname == '/manageProfile')
         ManageProfileOverlay.getInstance().prepareForManageDialog_();
 
       $('manage-profile-name').focus();
     },
 
     /**
+     * Registers event handlers that are common between create and manage modes.
+     * @param {String} mode A label that specifies the type of dialog
+     *     box which is currently being viewed (i.e. 'create' or
+     *     'manage').
+     * @param {function()} submitFunction The function that should be called
+     *     when the user chooses to submit (e.g. by clicking the OK button).
+     * @private
+     */
+    registerCommonEventHandlers_: function(mode, submitFunction) {
+      var self = this;
+      $(mode + '-profile-icon-grid').addEventListener('change', function(e) {
+        self.onIconGridSelectionChanged_(mode);
+      });
+      $(mode + '-profile-name').oninput = function(event) {
+        self.onNameChanged_(event, mode);
+      };
+      $(mode + '-profile-ok').onclick = function(event) {
+        OptionsPage.closeOverlay();
+        submitFunction();
+      };
+      $(mode + '-profile-name').onkeydown =
+          $(mode + '-profile-icon-grid').onkeydown = function(event) {
+        // Submit if the OK button is enabled and we hit enter.
+        if (!$(mode + '-profile-ok').disabled && event.keyCode == 13) {
+          OptionsPage.closeOverlay();
+          submitFunction();
+        }
+      };
+    },
+
+    /**
      * Set the profile info used in the dialog.
      * @param {Object} profileInfo An object of the form:
      *     profileInfo = {
      *       name: "Profile Name",
      *       iconURL: "chrome://path/to/icon/image",
      *       filePath: "/path/to/profile/data/on/disk"
      *       isCurrentProfile: false,
      *     };
      * @param {string} mode A label that specifies the type of dialog
      *     box which is currently being viewed (i.e. 'create' or
@@ skipping 111 matching lines @@
         this.showErrorBubble_('manageProfilesDuplicateNameError', mode);
       } else {
         this.hideErrorBubble_(mode);
 
         var nameIsValid = $(mode + '-profile-name').validity.valid;
         $(mode + '-profile-ok').disabled = !nameIsValid;
       }
     },
 
     /**
-     * Called when the user clicks "OK". Saves the newly changed profile info.
+     * Called when the user clicks "OK" or hits enter. Saves the newly changed
+     * profile info.
      * @private
      */
     submitManageChanges_: function() {
       var name = $('manage-profile-name').value;
       var iconURL = $('manage-profile-icon-grid').selectedItem;
       var manage_checkbox = false;
       if ($('manage-shortcut'))
         manage_checkbox = $('manage-shortcut').checked;
       chrome.send('setProfileNameAndIcon',
                   [this.profileInfo_.filePath, name, iconURL,
                   manage_checkbox]);
     },
 
     /**
+     * Called when the user clicks "OK" or hits enter. Creates the profile
+     * using the information in the dialog.
+     * @private
+     */
+    submitCreateProfile_: function() {
+      // Get the user's chosen name and icon, or default if they do not
+      // wish to customize their profile.
+      var name = $('create-profile-name').value;
+      var icon_url = $('create-profile-icon-grid').selectedItem;
+      var create_shortcut = false;
+      if ($('create-shortcut'))
+        create_checkbox = $('create-shortcut').checked;
+      var is_managed = $('create-profile-managed').checked;
+      chrome.send('createProfile',
+                  [name, icon_url, create_shortcut, is_managed]);
+    },
+
+    /**
      * Called when the selected icon in the icon grid changes.
      * @param {string} mode A label that specifies the type of dialog
      *     box which is currently being viewed (i.e. 'create' or
      *     'manage').
      * @private
      */
     onIconGridSelectionChanged_: function(mode) {
       var iconURL = $(mode + '-profile-icon-grid').selectedItem;
       if (!iconURL || iconURL == this.iconGridSelectedURL_)
         return;
@@ skipping 107 matching lines @@
       $('create-profile-ok').disabled = true;
     },
   };
 
   // Export
   return {
     ManageProfileOverlay: ManageProfileOverlay,
     CreateProfileOverlay: CreateProfileOverlay,
   };
 });