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

chrome/browser/resources/md_history/app.crisper.js

Index: chrome/browser/resources/md_history/app.crisper.js
diff --git a/chrome/browser/resources/md_history/app.crisper.js b/chrome/browser/resources/md_history/app.crisper.js
index d52850e21e445823552e49306ae58008a927f4f7..0eda6c68917d7729cadccd69e2eed25a2db7dd24 100644
--- a/chrome/browser/resources/md_history/app.crisper.js
+++ b/chrome/browser/resources/md_history/app.crisper.js
@@ -6326,6 +6326,16 @@ Polymer({
   }
 });
 
+(function() {
+  Polymer({
+    is: 'paper-listbox',
+    behaviors: [ Polymer.IronMenuBehavior ],
+    hostAttributes: {
+      role: 'listbox'
+    }
+  });
+})();
+
 Polymer({
   is: 'paper-menu-grow-height-animation',
   behaviors: [ Polymer.NeonAnimationBehavior ],
@@ -6401,7 +6411,6 @@ 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,
@@ -6457,17 +6466,13 @@ Polymer({
       }
     }
   },
-  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) {
@@ -6475,32 +6480,25 @@ Polymer({
     }
     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) {