MD Settings: Implementing modal popup/action menus.

chrome/browser/resources/settings/languages_page/languages_page.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/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <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_page/settings_animated_pages.html">
 <link rel="import" href="/settings_page/settings_subpage.html">
 <link rel="import" href="/settings_shared_css.html">
+<link rel="import" href="/settings_action_menu.html">

[Dan Beam, 2016/10/13 05:03:01]

alpha

[dpapad, 2016/10/13 18:18:00]

Done.

 
 <if expr="not is_macosx">
 <link rel="import" href="edit_dictionary_page.html">
 </if>
 
 <if expr="chromeos">
 <link rel="import" href="chrome://resources/html/chromeos/ui_account_tweaks.html">
 <link rel="import" href="/languages_page/manage_input_methods_page.html">
 </if>
 
 <dom-module id="settings-languages-page">
   <template>
     <style include="settings-shared">
       #languagesCollapse .list-item.selected {
         min-height: var(--settings-row-two-line-min-height);
       }
 
       .explain-selected {
         color: var(--google-green-700);
         font-weight: initial;
         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,
          * full-width separators: crbug.com/649547. */
         border-top: var(--settings-separator-line);
         margin: 6px 0 0 0;
       }
 
       paper-checkbox.dropdown-item {
         --checkbox-margin-start: 0;
@@ skipping 43 matching lines @@
                 </div>
 <if expr="chromeos or is_win">
                 <template is="dom-if" if="[[isRestartRequired_(
                         item.language.code, prefs.intl.app_locale.value)]]">
                   <paper-button on-tap="onRestartTap_">
                     $i18n{restart}
                   </paper-button>
                 </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>
             <div class="list-item list-button" on-tap="onAddLanguagesTap_">
               $i18n{addLanguages}
             </div>
           </div>
         </iron-collapse>
 <if expr="chromeos">
         <div id="manage-input-methods-subpage-trigger"
@@ skipping 61 matching lines @@
                 </paper-checkbox>
               </label>
             </template>
             <div class="list-item list-button" on-tap="onEditDictionaryTap_">
               $i18n{manageSpellCheck}
             </div>
           </div>
         </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"
                 checked="[[isProspectiveUILanguage_(
                     detailLanguage_.language.code,
                     prefs.intl.app_locale.value)]]"
                 on-change="onUILanguageChange_"
                 disabled="[[disableUILanguageCheckbox_(
                     detailLanguage_, prefs.intl.app_locale.value)]]">
                 $i18n{displayInThisLanguage}
@@ skipping 24 matching lines @@
                 on-tap="onMoveDownTap_"
                 hidden="[[isLastLanguage_(
                     detailLanguage_, languages.enabled.*)]]">
               $i18n{moveDown}
             </button>
             <button class="dropdown-item" role="menuitem"
                 on-tap="onRemoveLanguageTap_"
                 hidden="[[!detailLanguage_.removable]]">
               $i18n{removeLanguage}
             </button>
-          </cr-shared-menu>
+          </dialog>
         </template>
       </neon-animatable>
 <if expr="chromeos">
       <template is="dom-if" route-path="/inputMethods">
         <settings-subpage
             associated-control="[[$$('#manage-input-methods-subpage-trigger')]]"
             page-title="$i18n{manageInputMethodsPageTitle}">
           <settings-manage-input-methods-page languages="{{languages}}"
               language-helper="[[languageHelper]]">
           </settings-manage-input-methods-page>
@@ skipping 11 matching lines @@
 </if>
     </settings-animated-pages>
     <template is="dom-if" if="[[showAddLanguagesDialog_]]" restamp>
       <settings-add-languages-dialog languages="{{languages}}"
           language-helper="[[languageHelper]]">
       </settings-add-languages-dialog>
     </template>
   </template>
   <script src="languages_page.js"></script>
 </dom-module>