MD Settings: Polish for Languages main page

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/iron-icon/iron-icon.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/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_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="/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">
@@ skipping 15 matching lines @@
       #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 {
+        min-height: 36px;
+      }
+
+      cr-shared-menu:not(.complex) hr {
+        display: none;
+      }
+
+      cr-shared-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;
-        /* Allow for the ripple height. */
-        min-height: var(--paper-checkbox-ink-size);
       }
     </style>
     <settings-languages languages="{{languages}}" prefs="{{prefs}}"
         language-helper="{{languageHelper}}">
     </settings-languages>
     <settings-animated-pages id="pages" section="languages">
       <neon-animatable route-path="default">
         <div class="settings-box first two-line">
           <div class="start">
             <div>$i18n{languagesListTitle}</div>
@@ skipping 63 matching lines @@
           </cr-expand-button>
         </div>
         <iron-collapse id="inputMethodsCollapse"
             opened="[[inputMethodsOpened_]]">
           <div class="list-frame vertical-list">
             <template is="dom-repeat"
                 items="[[languages.inputMethods.enabled]]">
               <div class$="list-item [[getInputMethodItemClass_(
                       item.id, languages.inputMethods.currentId)]]"
                   on-tap="onInputMethodTap_" actionable>
-                <div>[[item.displayName]]</div>
-                <div class="middle">
-                  <iron-icon icon="settings:done"
+                <div class="start">
+                  <div>[[item.displayName]]</div>
+                  <div class="explain-selected"
                       hidden="[[!isCurrentInputMethod_(
                           item.id, languages.inputMethods.currentId)]]">
-                  </iron-icon>
+                    $i18n{inputMethodEnabled}
+                  </div>
                 </div>
                 <paper-icon-button icon="cr:settings"
                     on-tap="onInputMethodOptionsTap_"
                     hidden="[[!item.hasOptionsPage]]">
                 </paper-icon-button>
               </div>
             </template>
             <div class="list-item list-button"
                 on-tap="onManageInputMethodsTap_">
               $i18n{manageInputMethods}
@@ skipping 10 matching lines @@
             </div>
           </div>
           <cr-expand-button expanded="{{spellCheckOpened_}}"
               alt="$i18n{spellCheckExpandA11yLabel}">
           </cr-expand-button>
         </div>
         <iron-collapse id="spellCheckCollapse" opened="[[spellCheckOpened_]]">
           <div class="list-frame vertical-list">
             <template is="dom-repeat" items="[[languages.enabled]]">
               <div class="list-item">
-                <label class="start"
-                    id="supportsSpellCheckLabel-[[item.language.code]]">
-                  <span disabled$="[[!item.language.supportsSpellcheck]]">
-                    [[item.language.displayName]]
-                  </span>
-                </label>
-                <paper-toggle-button
+                <paper-checkbox
                     checked="[[item.spellCheckEnabled]]"
                     on-change="onSpellCheckChange_"
-                    disabled$="[[!item.language.supportsSpellcheck]]"
-                    aria-labelledby=
-                        "supportsSpellCheckLabel-[[item.language.code]]">
-                </paper-toggle-button>
+                    disabled$="[[!item.language.supportsSpellcheck]]">
+                  [[item.language.displayName]]
+                </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>
+          <cr-shared-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}
             </paper-checkbox>
 </if>
             <paper-checkbox class="dropdown-item"
                 checked="[[detailLanguage_.translateEnabled]]"
                 on-change="onTranslateCheckboxChange_"
                 hidden="[[!prefs.translate.enabled.value]]"
                 disabled="[[disableTranslateCheckbox_(
                     detailLanguage_.language, languages.translateTarget)]]">
               $i18n{offerToTranslateInThisLanguage}
             </paper-checkbox>
+            <hr>
+            <button class="dropdown-item" role="menuitem"
+                on-tap="onMoveToTopTap_"
+                hidden="[[isFirstOrSecondLanguage_(

[Dan Beam, 2016/09/23 23:25:42]

if we're going to show only one of "Move up" vs "Move to top" for the second
item, bettes@ and I vote for "Move to top"

[michaelpg, 2016/09/28 23:24:29]

Done.

+                    detailLanguage_, languages.enabled.*)]]">
+              $i18n{moveToTop}
+            </button>
             <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.*)]]">
@@ skipping 29 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>