Use one instance of language settings detail menu for all languages

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 ae9ac980f356eb79e0e97d229dd0e1c7fb1844b9..a15a0039e339ba9b0d65eaf8ec1d4a5989be4677 100644
--- a/chrome/browser/resources/settings/languages_page/languages_page.html
+++ b/chrome/browser/resources/settings/languages_page/languages_page.html
@@ -7,6 +7,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-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_shared_menu/cr_shared_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/route.html">
@@ -79,37 +80,8 @@
                 </div>
 </if>
                 <paper-icon-button id="more-[[item.language.code]]"
-                    icon="cr:more-vert" toggles
-                    active="{{item.optionsMenuOpened}}"
-                    on-tap="stopPropagationHandler_">
+                    icon="cr:more-vert" on-tap="toggleMenu_">
                 </paper-icon-button>
-                <iron-dropdown opened="{{item.optionsMenuOpened}}"
-                    horizontal-align="right" vertical-align="auto">
-                  <div class="dropdown-content"
-                      on-tap="stopPropagationHandler_">
-                    <button class="dropdown-item" role="option"
-                        on-tap="onMoveUpTap_"
-                        hidden="[[isFirstLanguage_(index,
-                                                   languages.enabled.*)]]">
-                      $i18n{moveUp}
-                    </button>
-                    <button class="dropdown-item" role="option"
-                        on-tap="onMoveDownTap_"
-                        hidden="[[isLastLanguage_(index,
-                                                  languages.enabled.*)]]">
-                      $i18n{moveDown}
-                    </button>
-                    <button class="dropdown-item" role="option"
-                        on-tap="onShowLanguageDetailTap_">
-                      $i18n{languageDetail}
-                    </button>
-                    <button class="dropdown-item" role="option"
-                        on-tap="onRemoveLanguageTap_"
-                        disabled="[[!item.removable]]">
-                      $i18n{removeLanguage}
-                    </button>
-                  </div>
-                </iron-dropdown>
               </div>
             </template>
             <div class="list-item list-button" on-tap="onAddLanguagesTap_">
@@ -193,6 +165,31 @@
           </div>
         </iron-collapse>
 </if>
+        <!-- TODO(michaelpg): Wrap in a dom-if, or perhaps use MD History's
+             lazy-render. -->

[stevenjb, 2016/08/25 16:36:57]

Any reason not to just use dom-if now?

[michaelpg, 2016/08/26 22:16:20]

Meh, a tiny bit extra work. Done.

[stevenjb, 2016/08/26 22:56:48]

:)

+        <cr-shared-menu>
+          <button class="dropdown-item" role="menuitem"
+              on-tap="onMoveUpTap_"
+              hidden="[[isFirstLanguage_(
+                  detailLanguage_, languages.enabled.*)]]">
+            $i18n{moveUp}
+          </button>
+          <button class="dropdown-item" role="menuitem"
+              on-tap="onMoveDownTap_"
+              hidden="[[isLastLanguage_(
+                  detailLanguage_, languages.enabled.*)]]">
+            $i18n{moveDown}
+          </button>
+          <button class="dropdown-item" role="menuitem"
+              on-tap="onShowLanguageDetailTap_">
+            $i18n{languageDetail}
+          </button>
+          <button class="dropdown-item" role="menuitem"
+              on-tap="onRemoveLanguageTap_"
+              disabled="[[!detailLanguage_.removable]]">
+            $i18n{removeLanguage}
+          </button>
+        </cr-shared-menu>
       </neon-animatable>
       <template is="dom-if" route-path="/languages/edit" no-search>
         <settings-subpage page-title="[[detailLanguage_.language.displayName]]">