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

chrome/browser/resources/settings/people_page/people_page.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="/controls/settings_checkbox.html">
 <link rel="import" href="/people_page/sync_page.html">
 <link rel="import" href="/people_page/profile_info_browser_proxy.html">
@@ skipping 57 matching lines @@
         width: var(--iron-icon-width);
       }
 
       paper-checkbox {
         margin: 16px 0 2px;
       }
     </style>
     <settings-animated-pages id="pages" current-route="{{currentRoute}}"
         section="people">
       <neon-animatable id="main">
-        <div class="settings-box first two-line">
+        <div id="picture-subpage-trigger" class="settings-box first two-line">
           <img id="profile-icon" src="[[profileIconUrl_]]"
               on-tap="onPictureTap_" actionable>
           <div class="middle">
 <if expr="not chromeos">
             <span id="profile-name" on-tap="onProfileNameTap_" actionable>
               [[profileName_]]
             </span>
 </if>
 <if expr="chromeos">
             <span id="profile-name">
@@ skipping 74 matching lines @@
 <if expr="chromeos">
         <div class="settings-box single-column">
           <settings-checkbox pref="{{prefs.settings.enable_screen_lock}}"
               label="$i18n{enableScreenlock}">
           </settings-checkbox>
         </div>
 
         <!-- TODO(jdufault): Disable navigating to /quickUnlock/* if pin is
           disabled. -->
         <template is="dom-if" if=[[quickUnlockEnabled_]]>
-          <div class="settings-box">
+          <div id="quick-unlock-subpage-trigger" class="settings-box">
             <paper-button on-tap="onQuickUnlockTap_" class="primary-button">
               $i18n{quickUnlockTitle}
             </paper-button>
           </div>
         </template>
 
         <template is="dom-if" if="[[easyUnlockAllowed_]]">
           <div class="settings-box">
             <div class="middle">
               <div>$i18n{easyUnlockSectionTitle}</div>
@@ skipping 29 matching lines @@
                 <paper-button id="easyUnlockTurnOff" class="secondary-button"
                     on-tap="onEasyUnlockTurnOffTap_">
                   $i18n{easyUnlockTurnOffButton}
                 </paper-button>
               </template>
             </div>
           </div>
         </template>
 </if>
 
-        <div class="settings-box">
+        <div id="manage-other-people-subpage-trigger" class="settings-box">
           <paper-button class="primary-button" on-tap="onManageOtherPeople_">
             $i18n{manageOtherPeople}
           </paper-button>
         </div>
 
         <template is="dom-if" if=[[profileManagesSupervisedUsers_]]>
           <div id="manageSupervisedUsersContainer" class="settings-box">
             <paper-button class="primary-button"
                 on-tap="onManageSupervisedUsers_">
               $i18n{manageSupervisedUsers}
             </paper-button>
           </div>
         </template>
       </neon-animatable>
       <template is="dom-if" name="sync">
-        <settings-subpage page-title="$i18n{syncPageTitle}">
+        <settings-subpage
+            associated-control="[[$$('#customize-sync')]]"
+            page-title="$i18n{syncPageTitle}">
           <settings-sync-page current-route="[[currentRoute]]">
           </settings-sync-page>
         </settings-subpage>
       </template>
 <if expr="chromeos">
       <template is="dom-if" name="quick-unlock-authenticate">
-        <settings-subpage page-title="$i18n{quickUnlockTitle}">
+        <settings-subpage
+            associated-control="[[$$('#quick-unlock-subpage-trigger')]]"
+            page-title="$i18n{quickUnlockTitle}">
           <settings-quick-unlock-authenticate
             set-modes="{{quickUnlockSetModes}}"
             current-route="{{currentRoute}}"
             profile-name="[[profileName_]]">
           </settings-quick-unlock-authenticate>
         </settings-subpage>
       </template>
       <template is="dom-if" name="quick-unlock-choose-method">
-        <settings-subpage page-title="$i18n{quickUnlockTitle}">
+        <settings-subpage no-associated-control
+            page-title="$i18n{quickUnlockTitle}">
           <settings-quick-unlock-choose-method
             set-modes="[[quickUnlockSetModes]]"
             current-route="{{currentRoute}}"
             prefs="{{prefs}}">
           </settings-quick-unlock-choose-method>
         </settings-subpage>
       </template>
       <template is="dom-if" name="quick-unlock-setup-pin">
-        <settings-subpage page-title="$i18n{quickUnlockTitle}">
+        <settings-subpage no-associated-control
+            page-title="$i18n{quickUnlockTitle}">
           <settings-quick-unlock-setup-pin
             set-modes="[[quickUnlockSetModes]]"
             current-route="{{currentRoute}}">
           </settings-quick-unlock-setup-pin>
         </settings-subpage>
       </template>
       <template is="dom-if" name="users">
-        <settings-subpage page-title="$i18n{usersPageTitle}">
+        <settings-subpage
+            associated-control="[[$$('#manage-other-people-subpage-trigger')]]"
+            page-title="$i18n{usersPageTitle}">
           <settings-users-page prefs="{{prefs}}"></settings-users-page>
         </settings-subpage>
       </template>
       <template is="dom-if" name="changePicture">
-        <settings-subpage page-title="$i18n{changePictureTitle}">
+        <settings-subpage
+          associated-control="[[$$('#picture-subpage-trigger')]]"
+          page-title="$i18n{changePictureTitle}">
           <settings-change-picture></settings-change-picture>
         </settings-subpage>
       </template>
 </if>
 <if expr="not chromeos">
       <template is="dom-if" name="manageProfile">
-        <settings-subpage page-title="$i18n{editPerson}">
+        <settings-subpage
+            associated-control="[[$$('#picture-subpage-trigger')]]"
+            page-title="$i18n{editPerson}">
           <settings-manage-profile profile-icon-url="[[profileIconUrl_]]"
               profile-name="[[profileName_]]">
           </settings-manage-profile>
         </settings-subpage>
       </template>
 </if>
     </settings-animated-pages>
 
     <dialog is="cr-dialog" id="disconnectDialog">
       <div class="title">$i18n{syncDisconnectTitle}</div>
@@ skipping 23 matching lines @@
 
 <if expr="chromeos">
     <template is="dom-if" if="[[easyUnlockEnabled_]]">
       <easy-unlock-turn-off-dialog id="easyUnlockTurnOffDialog">
       </easy-unlock-turn-off-dialog>
     </template>
 </if>
   </template>
   <script src="people_page.js"></script>
 </dom-module>