MD Settings: Implementing modal popup/action menus.

chrome/browser/resources/settings/languages_page/languages_page.html

Index: chrome/browser/resources/settings/languages_page/languages_page.html
diff --git a/chrome/browser/resources/settings/languages_page/languages_page.html b/chrome/browser/resources/settings/languages_page/languages_page.html
index 08b41d7310c939c99a09bfb06e6d892ede145626..14f7e4d6976e66c94119b264bad92299bcd8aab2 100644
--- a/chrome/browser/resources/settings/languages_page/languages_page.html
+++ b/chrome/browser/resources/settings/languages_page/languages_page.html
@@ -7,12 +7,12 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_shared_menu/cr_shared_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="/languages_page/add_languages_dialog.html">
 <link rel="import" href="/languages_page/languages.html">
 <link rel="import" href="/lifetime_browser_proxy.html">
 <link rel="import" href="/route.html">
+<link rel="import" href="/settings_action_menu.html">
 <link rel="import" href="/settings_page/settings_animated_pages.html">
 <link rel="import" href="/settings_page/settings_subpage.html">
 <link rel="import" href="/settings_shared_css.html">
@@ -39,19 +39,15 @@
         margin-top: 4px;
       }
 
-      cr-shared-menu {
-        --cr-shared-menu-width: 320px;
-      }
-
-      cr-shared-menu.complex .dropdown-item {
+      dialog[is='settings-action-menu'].complex .dropdown-item {
         min-height: 36px;
       }
 
-      cr-shared-menu:not(.complex) hr {
+      dialog[is='settings-action-menu']:not(.complex) hr {
         display: none;
       }
 
-      cr-shared-menu.complex hr {
+      dialog[is='settings-action-menu'].complex hr {
         /* Override user-agent border and margin. */
         border: none;
         /* TODO(michaelpg): Update to whatever variable is used for the darker,
@@ -115,7 +111,7 @@
                 </template>
 </if>
                 <paper-icon-button id="more-[[item.language.code]]"
-                    icon="cr:more-vert" on-tap="toggleMenu_">
+                    icon="cr:more-vert" on-tap="onDotsTap_">
                 </paper-icon-button>
               </div>
             </template>
@@ -197,7 +193,7 @@
         </iron-collapse>
 </if>
         <template is="cr-lazy-render" id="menu">
-          <cr-shared-menu
+          <dialog is="settings-action-menu"
               class$="[[getMenuClass_(prefs.translate.enabled.value)]]">
 <if expr="chromeos or is_win">
             <paper-checkbox id="uiLanguageItem" class="dropdown-item"
@@ -242,7 +238,7 @@
                 hidden="[[!detailLanguage_.removable]]">
               $i18n{removeLanguage}
             </button>
-          </cr-shared-menu>
+          </dialog>
         </template>
       </neon-animatable>
 <if expr="chromeos">