MD WebUI: Use arrow keys for navigation in cr-shared-menu, close on tab

chrome/browser/resources/md_history/app.crisper.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.
 function PromiseResolver() {
   this.resolve_;
   this.reject_;
   this.promise_ = new Promise(function(resolve, reject) {
     this.resolve_ = resolve;
     this.reject_ = reject;
   }.bind(this));
@@ skipping 6308 matching lines @@
     var node = config.node;
     this._effect = new KeyframeEffect(node, [ {
       opacity: '1'
     }, {
       opacity: '0'
     } ], this.timingFromConfig(config));
     return this._effect;
   }
 });
 
+(function() {
+  Polymer({
+    is: 'paper-listbox',
+    behaviors: [ Polymer.IronMenuBehavior ],
+    hostAttributes: {
+      role: 'listbox'
+    }
+  });
+})();
+
 Polymer({
   is: 'paper-menu-grow-height-animation',
   behaviors: [ Polymer.NeonAnimationBehavior ],
   configure: function(config) {
     var node = config.node;
     var rect = node.getBoundingClientRect();
     var height = rect.height;
     this._effect = new KeyframeEffect(node, [ {
       height: height / 2 + 'px'
     }, {
@@ skipping 55 matching lines @@
   }
 });
 
 // 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.
 var SLIDE_CUBIC_BEZIER = 'cubic-bezier(0.3, 0.95, 0.5, 1)';
 
 Polymer({
   is: 'cr-shared-menu',
-  behaviors: [ Polymer.IronA11yKeysBehavior ],
   properties: {
     menuOpen: {
       type: Boolean,
       observer: 'menuOpenChanged_',
       value: false,
       notify: true
     },
     itemData: {
       type: Object,
       value: null
@@ skipping 35 matching lines @@
       value: function() {
         return [ {
           name: 'fade-out-animation',
           timing: {
             duration: 150
           }
         } ];
       }
     }
   },
-  keyBindings: {
-    tab: 'onTabPressed_'
-  },
   listeners: {
     'dropdown.iron-overlay-canceled': 'onOverlayCanceled_'
   },
   lastAnchor_: null,
-  firstFocus_: null,
-  lastFocus_: null,
   attached: function() {
     window.addEventListener('resize', this.closeMenu.bind(this));
+    this.$.menu.addEventListener('keydown', this.onCaptureKeyDown_.bind(this), true);
   },
   closeMenu: function() {
     if (this.root.activeElement == null) {
       this.$.dropdown.restoreFocusOnClose = false;
     }
     this.menuOpen = false;
   },
-  openMenu: function(anchor, itemData) {
+  openMenu: function(anchor, opt_itemData) {
     if (this.lastAnchor_ == anchor && this.menuOpen) return;
     if (this.menuOpen) this.closeMenu();
-    this.itemData = itemData;
+    this.itemData = opt_itemData || null;
     this.lastAnchor_ = anchor;
     this.$.dropdown.restoreFocusOnClose = true;
-    var focusableChildren = Polymer.dom(this).querySelectorAll('[tabindex]:not([disabled]):not([hidden]),' + 'button:not([disabled]):not([hidden])');
-    if (focusableChildren.length > 0) {
-      this.$.dropdown.focusTarget = focusableChildren[0];
-      this.firstFocus_ = focusableChildren[0];
-      this.lastFocus_ = focusableChildren[focusableChildren.length - 1];
-    }
+    this.$.menu.selected = -1;
     this.$.dropdown.positionTarget = anchor;
     this.menuOpen = true;
   },
-  toggleMenu: function(anchor, itemData) {
-    if (anchor == this.lastAnchor_ && this.menuOpen) this.closeMenu(); else this.openMenu(anchor, itemData);
+  toggleMenu: function(anchor, opt_itemData) {
+    if (anchor == this.lastAnchor_ && this.menuOpen) this.closeMenu(); else this.openMenu(anchor, opt_itemData);
   },
-  onTabPressed_: function(e) {
-    if (!this.firstFocus_ || !this.lastFocus_) return;
-    var toFocus;
-    var keyEvent = e.detail.keyboardEvent;
-    if (keyEvent.shiftKey && keyEvent.target == this.firstFocus_) toFocus = this.lastFocus_; else if (!keyEvent.shiftKey && keyEvent.target == this.lastFocus_) toFocus = this.firstFocus_;
-    if (!toFocus) return;
-    e.preventDefault();
-    toFocus.focus();
+  onCaptureKeyDown_: function(e) {
+    if (Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(e, 'tab')) {
+      this.$.dropdown.restoreFocusOnClose = false;
+      this.lastAnchor_.focus();
+      this.closeMenu();
+    }
   },
   menuOpenChanged_: function() {
     if (!this.menuOpen) {
       this.itemData = null;
       this.lastAnchor_ = null;
     }
   },
   onOverlayCanceled_: function(e) {
     if (e.detail.type == 'tap') this.$.dropdown.restoreFocusOnClose = false;
   }
@@ skipping 2426 matching lines @@
 
        case HistoryRange.MONTH:
         histogramValue = HistoryPageViewHistogram.GROUPED_MONTH;
         break;
       }
       break;
     }
     md_history.BrowserService.getInstance().recordHistogram('History.HistoryPageView', histogramValue, HistoryPageViewHistogram.END);
   }
 });