MD WebUI: Reimplement cr-shared-menu using iron-dropdown.

ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html

Index: ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html
diff --git a/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html b/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html
index e140f73f9333b74e3bf3badf7979af767415909f..6522f7291bf8c115db458112719d04dc7d8a4161 100644
--- a/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html
+++ b/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html
@@ -1,26 +1,33 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/html/cr/ui/position_util.html">
 <link rel="import" href="chrome://resources/html/util.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/web-animations.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-menu-button/paper-menu-button-animations.html">
 
 <dom-module id="cr-shared-menu">
   <template>
     <style>
-      :host {
+      #menu {
         @apply(--shadow-elevation-2dp);
-        display: none;
+        background-color: white;
         overflow: hidden;
-        position: absolute;
+        padding: 8px 0;
+        position: relative;
       }
-
     </style>
-    <paper-listbox id="menu">
-      <content></content>
-    </paper-listbox>
+    <iron-dropdown id="dropdown" allow-outside-scroll restore-focus-on-close
+        vertical-align="auto" horizontal-align="right" opened="{{menuOpen}}"

[Dan Beam, 2016/07/07 17:38:24]

does this horizontal-align flip automagically in RTL?

[tsergeant, 2016/07/11 03:30:48]

Yup!

+        open-animation-config="[[openAnimationConfig]]"
+        close-animation-config="[[closeAnimationConfig]]">
+      <div id="menu" class="dropdown-content" role="menu">
+        <content></content>
+      </div>
+    </iron-dropdown>
   </template>
   <script src="cr_shared_menu.js"></script>
 </dom-module>