WebUI: For cr-dialog, make Enter click the action-button, if it exists.

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js

 // Copyright 2016 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.
 
 /**
  * @fileoverview 'cr-dialog' is a component for showing a modal dialog. If the
  * dialog is closed via close(), a 'close' event is fired. If the dialog is
  * canceled via cancel(), a 'cancel' event is fired followed by a 'close' event.
  * Additionally clients can inspect the dialog's |returnValue| property inside
  * the 'close' event listener to determine whether it was canceled or just
@@ skipping 11 matching lines @@
     closeText: String,
 
     /**
      * True if the dialog should remain open on 'popstate' events. This is used
      * for navigable dialogs that have their separate navigation handling code.
      */
     ignorePopstate: {
       type: Boolean,
       value: false,
     },
+
+    /**
+     * True if the dialog should ignore 'Enter' keypresses.
+     */
+    ignoreEnterKey: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   /** @override */
   ready: function() {
     // If the active history entry changes (i.e. user clicks back button),
     // all open dialogs should be cancelled.
     window.addEventListener('popstate', function() {
       if (!this.ignorePopstate && this.open)
         this.cancel();
     }.bind(this));
+
+    if (!this.ignoreEnterKey)
+      this.addEventListener('keypress', this.onKeypress_.bind(this));
   },
 
   cancel: function() {
     this.fire('cancel');
     HTMLDialogElement.prototype.close.call(this, '');
   },
 
   /**
    * @param {string=} opt_returnValue
    * @override
    */
   close: function(opt_returnValue) {
     HTMLDialogElement.prototype.close.call(this, 'success');
   },
 
   /** @return {!PaperIconButtonElement} */
   getCloseButton: function() {
     return this.$.close;
   },
+
+  /**
+   * @param {!KeyboardEvent} e
+   * @private
+   */
+  onKeypress_: function(e) {
+    if (e.target != this)

[tommycli, 2017/03/31 00:16:55]

This is more conservative than the Options equivalent code [1], but I suggest we
roll with this for now, and amp-up the aggression later.

We will probably have to amp up the aggression to eliminate all these redundant
handlers [2] already within Settings, but I think we should save that for a
followup CL if you like this one.

[1] 
https://cs.chromium.org/chromium/src/ui/webui/resources/js/cr/ui/overlay.js?t...
[2]
https://cs.chromium.org/search/?q=onKeypress+file:%5Esrc/chrome/browser/resou...

+      return;
+    if (e.key != 'Enter')
+      return;
+
+    var actionButton = this.querySelector('.action-button');

[dpapad, 2017/03/31 02:08:29]

Should we add an assertion() for this, instead of silently doing nothing? Do we
have dialogs that don't have an action button, in Settings or some other WebUI
page?

[tommycli, 2017/04/03 16:53:34]

Hey demetrios, here's an example where there's no action-button:

https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/blueto...

In any case, I don't think we should assert, since it's not in the contract for
a cr-dialog that it -must- have a button with the action-button class.

+    if (actionButton && !actionButton.disabled) {

[dpapad, 2017/03/31 02:08:29]

Do we need to check for |disabled| at all? I believe that click() is a no-op if
the element is disabled.

It would be nice if we can keep the dialog oblivious to the state of the action
button. At least until (if ever) we decide to address the multiple redundant
handlers you linked above.

[tommycli, 2017/04/03 16:53:34]

Hi, disabled buttons can still be 'click()' ed. See example:
https://jsfiddle.net/4rdzc3tf/1/

[dpapad, 2017/04/03 18:20:07]

Ok. I recall having problems "clicking" disabled buttons in the past. Maybe I am
thinking of MockInteractions.tap(), not sure.

+      actionButton.click();
+      e.preventDefault();
+    }
+  },
 });