MD Settings: mouse movements should focus cr-action-menu items

ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.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.
 
 Polymer({
   is: 'cr-action-menu',
   extends: 'dialog',
 
   /**
    * List of all options in this action menu.
    * @private {?NodeList<!Element>}
    */
   options_: null,
 
   /**
    * The element which the action menu will be anchored to. Also the element
    * where focus will be returned after the menu is closed.
    * @private {?Element}
    */
   anchorElement_: null,
 
   /**
    * Bound reference to an event listener function such that it can be removed
    * on detach.
    * @private {?Function}
    */
   boundClose_: null,
 
+  /** @private {boolean} */
+  hasMousemoveListener_: false,
+
   hostAttributes: {
     tabindex: 0,
   },
 
   listeners: {
     'keydown': 'onKeyDown_',
+    'mouseover': 'onMouseover_',
     'tap': 'onTap_',
   },
 
   /** override */
   attached: function() {
     this.options_ = this.querySelectorAll('.dropdown-item');
   },
 
   /** override */
   detached: function() {
@@ skipping 21 matching lines @@
    * @param {!KeyboardEvent} e
    * @private
    */
   onKeyDown_: function(e) {
     if (e.key == 'Tab' || e.key == 'Escape') {
       this.close();
       e.preventDefault();
       return;
     }
 
+    if (!this.hasMousemoveListener_) {
+      this.hasMousemoveListener_ = true;
+      listenOnce(this, 'mousemove', this.onMouseover_.bind(this));

[Dan Beam, 2017/04/06 03:03:03]

this is fairly similar and easier to comprehend, I think

if (!this.hasMousemoveListener_) {
  this.hasMousemoveListener_ = true;
  listenOnce(this, 'mousemove', function(e) {
    this.onMouseover_(e);
    this.hasMousemoveListener_ = false;
  }.bind(this));
}

plus, it actually requires a 'mousemove' to reset the boolean rather than a
'mouseover' also doing that (was that intentional?)

[scottchen, 2017/04/06 17:41:36]

Not intentional, updated.

+    }
+
     if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')
       return;
 
     var nextOption = this.getNextOption_(e.key == 'ArrowDown' ? 1 : -1);
     if (nextOption)
       nextOption.focus();
 
     e.preventDefault();
   },
 
   /**
+   * @param {!Event} e
+   * @private
+   */
+  onMouseover_: function(e) {
+    this.hasMousemoveListener_ = false;
+    // TODO(scottchen): Using "focus" to determine selected item might mess
+    // with screen readers in some edge cases.
+    var i = 0;
+    do {
+      var target = e.path[i++];
+      if (target.classList && target.classList.contains('dropdown-item')) {
+        target.focus();
+        return;
+      }
+    } while (this != target);
+
+    // The user moved the mouse off the options. Reset focus to the dialog.
+    this.focus();
+  },
+
+  /**
    * @param {number} step -1 for getting previous option (up), 1 for getting
    *     next option (down).
    * @return {?Element} The next focusable option, taking into account
    *     disabled/hidden attributes, or null if no focusable option exists.
    * @private
    */
   getNextOption_: function(step) {
     // Using a counter to ensure no infinite loop occurs if all elements are
     // hidden/disabled.
     var counter = 0;
@@ skipping 54 matching lines @@
     // Attempt to show the menu starting from the top of the rectangle and
     // extending downwards. If that does not fit within the window, fallback to
     // starting from the bottom and extending upwards.
     var top = rect.top + this.offsetHeight <= window.innerHeight ? rect.top :
                                                                    rect.bottom -
             this.offsetHeight - Math.max(rect.bottom - window.innerHeight, 0);
 
     this.style.top = top + 'px';
   },
 });