MD Settings: Associate suppages with the controls that trigger them.

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-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/icons.html">
@@ skipping 18 matching lines @@
   <template>
     <style include="settings-shared">
       .list-button {
         @apply(--settings-actionable);
       }
     </style>
     <settings-languages languages="{{languages}}"></settings-languages>
     <settings-animated-pages id="pages" current-route="{{currentRoute}}"
         section="languages">
       <neon-animatable id="main">
-        <div class="settings-box first two-line">
+        <div id="manage-languages-subpage-trigger"
+            class="settings-box first two-line">
           <div class="start">
             <div>$i18n{languagesListTitle}</div>
             <div class="secondary">
               [[getProspectiveUILanguageName_(
                     languages, prefs.intl.app_locale.value)]]
             </div>
           </div>
           <cr-expand-button expanded="{{languagesOpened_}}">
           </cr-expand-button>
         </div>
@@ skipping 53 matching lines @@
                   </div>
                 </iron-dropdown>
               </div>
             </template>
             <div class="list-item list-button" on-tap="onManageLanguagesTap_">
               $i18n{manageLanguages}
             </div>
           </div>
         </iron-collapse>
 <if expr="chromeos">
-        <div class="settings-box two-line">
+        <div id="manage-input-methods-subpage-trigger"
+              class="settings-box two-line">
           <div class="start">
             <div>$i18n{inputMethodsListTitle}</div>
             <div class="secondary">
               [[getInputMethodName_(languages.inputMethods.currentId)]]
             </div>
           </div>
           <cr-expand-button expanded="{{inputMethodsOpened_}}">
           </cr-expand-button>
         </div>
         <iron-collapse id="inputMethodsCollapse"
@@ skipping 18 matching lines @@
               </div>
             </template>
             <div class="list-item list-button"
                 on-tap="onManageInputMethodsTap_">
               $i18n{manageInputMethods}
             </div>
           </div>
         </iron-collapse>
 </if>
 <if expr="not is_macosx">
-        <div class="settings-box two-line">
+        <div id="spellcheck-subpage-trigger" class="settings-box two-line">
           <div class="start">
             <div>$i18n{spellCheckListTitle}</div>
             <div class="secondary">
               [[getSpellCheckSecondaryText_(languages.enabled.*)]]
             </div>
           </div>
           <cr-expand-button expanded="{{spellCheckOpened_}}">
           </cr-expand-button>
         </div>
         <iron-collapse id="spellCheckCollapse" opened="[[spellCheckOpened_]]">
@@ skipping 16 matching lines @@
               </label>
             </template>
             <div class="list-item list-button" on-tap="onEditDictionaryTap_">
               $i18n{manageSpellCheck}
             </div>
           </div>
         </iron-collapse>
 </if>
       </neon-animatable>
       <template is="dom-if" name="manage-languages">
-        <settings-subpage page-title="$i18n{manageLanguagesPageTitle}">
+        <settings-subpage
+            associated-control="[[$$('#manage-languages-subpage-trigger')]]"
+            page-title="$i18n{manageLanguagesPageTitle}">
           <settings-manage-languages-page
               prefs="{{prefs}}"></settings-manage-languages-page>
         </settings-subpage>
       </template>
       <template is="dom-if" name="language-detail">
-        <settings-subpage
+        <settings-subpage no-associated-control
             page-title="[[detailLanguage_.language.displayName]]">
           <settings-language-detail-page id="languageDetailPage"
               prefs="{{prefs}}" detail="[[detailLanguage_]]">
           </settings-language-detail-page>
         </settings-subpage>
       </template>
 <if expr="chromeos">
       <template is="dom-if" name="manage-input-methods">
-        <settings-subpage page-title="$i18n{manageInputMethodsPageTitle}">
+        <settings-subpage
+            associated-control="[[$$('#manage-input-methods-subpage-trigger')]]"
+            page-title="$i18n{manageInputMethodsPageTitle}">
           <settings-manage-input-methods-page>
           </settings-manage-input-methods-page>
         </settings-subpage>
       </template>
 </if>
 <if expr="not is_macosx">
       <template is="dom-if" name="edit-dictionary">
-        <settings-subpage page-title="$i18n{editDictionaryPageTitle}">
+        <settings-subpage
+            associated-control="[[$$('#spellcheck-subpage-trigger')]]"
+            page-title="$i18n{editDictionaryPageTitle}">
           <settings-edit-dictionary-page></settings-edit-dictionary-page>
         </settings-subpage>
       </template>
 </if>
     </settings-animated-pages>
   </template>
   <script src="languages_page.js"></script>
 </dom-module>