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

chrome/browser/resources/md_history/lazy_load.vulcanized.html

Index: chrome/browser/resources/md_history/lazy_load.vulcanized.html
diff --git a/chrome/browser/resources/md_history/lazy_load.vulcanized.html b/chrome/browser/resources/md_history/lazy_load.vulcanized.html
index a8cea0bbf315ddbe861cead5c93e52387ae3c298..37d1ea0a15f70dfb919303ab060f0bd67bd7ebf8 100644
--- a/chrome/browser/resources/md_history/lazy_load.vulcanized.html
+++ b/chrome/browser/resources/md_history/lazy_load.vulcanized.html
@@ -520,21 +520,37 @@ paper-ripple {
   </template>
 
   </dom-module>
+<dom-module id="paper-listbox" assetpath="chrome://resources/polymer/v1_0/paper-listbox/" css-build="shadow">
+  <template>
+    <style scope="paper-listbox">:host {
+  display: block;
+        padding: 8px 0;
+
+        background: var(--paper-listbox-background-color,var(--primary-background-color));;
+        color: var(--paper-listbox-color,var(--primary-text-color));;
+
+        ;
+}
+
+</style>
+
+    <content></content>
+  </template>
+
+  </dom-module>
 <dom-module id="cr-shared-menu" assetpath="chrome://resources/cr_elements/cr_shared_menu/" css-build="shadow">
   <template>
-    <style scope="cr-shared-menu">#menu {
+    <style scope="cr-shared-menu">paper-listbox {
   box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
-        background-color: white;
         overflow: hidden;
-        padding: 8px 0;
         position: relative;
 }
 
 </style>
     <iron-dropdown id="dropdown" allow-outside-scroll="" restore-focus-on-close="" vertical-align="auto" horizontal-align="right" opened="{{menuOpen}}" open-animation-config="[[openAnimationConfig]]" close-animation-config="[[closeAnimationConfig]]">
-      <div id="menu" class="dropdown-content" role="menu">
+      <paper-listbox id="menu" class="dropdown-content">
         <content></content>
-      </div>
+      </paper-listbox>
     </iron-dropdown>
   </template>
   </dom-module>