Settings Router Refactor: Remove route.page legacy property.

chrome/browser/resources/settings/settings_menu/settings_menu.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-submenu.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/settings_shared_css.html">
@@ skipping 20 matching lines @@
           font-weight: 500;
         };
         --paper-menu-focused-item-after: {
           background: none;
         };
         color: var(--settings-nav-grey);
         font-size: 13px;
         padding: 0;
       }
 
-      div[data-section] {
+      div[data-path] {
         @apply(--settings-actionable);
       }
 
       #basicPage {
         margin-top: 8px;
       }
 
       .page-menu > div {
         margin-top: 8px;
       }
@@ skipping 29 matching lines @@
         min-height: 40px;
       }
 
       .separator {
         /* Per Alan@, this line is different from the other separator lines. */
         border-bottom: 1px solid rgba(0, 0, 0, 0.08);
         margin-top: 8px;
       }
     </style>
     <paper-menu name="root-menu">
-      <div class="page-menu" data-page="basic" id="basicPage">
-        <paper-menu attr-for-selected="data-section" class="menu-content"
-            data-page="basic" id="basicMenu">
+      <div class="page-menu" id="basicPage">
+        <paper-menu attr-for-selected="data-path" class="menu-content"
+            id="basicMenu">
 <if expr="chromeos">
-          <div data-section="internet" on-tap="openPage_">
+          <div data-path="/internet" on-tap="openPage_">

[michaelpg, 2016/07/29 20:28:53]

dang, if only there were some element with a built-in notion of a REFerence to
another Hyperlink we could Anchor here....

[tommycli, 2016/07/29 21:04:39]

I think I understand what you're saying. It is a little unfortunate that it
looks and acts like an <a> but isn't.

At one point I tried doing something like data-path="[[routes.INTERNET]]", but
that does not work.

I'm not a huge fan of this referencing a path instead of the object, but I
couldn't think of another option that wasn't very verbose.

[michaelpg, 2016/07/29 21:32:56]

Yeah, we could try [[routes.INTERNET.path]] if we declare |routes| as a
property.
Is this the only place where we'll have to reference particular routes by path?
If so, it's not a big deal.

             <iron-icon icon="settings:network-wifi"></iron-icon>
             $i18n{internetPageTitle}
           </div>
 </if>
-          <div data-section="people" on-tap="openPage_"
+          <div data-path="/people" on-tap="openPage_"
               hidden="[[!pageVisibility.people]]">
             <iron-icon icon="settings:people"></iron-icon>
             $i18n{peoplePageTitle}
           </div>
-          <div data-section="appearance" on-tap="openPage_"
+          <div data-path="/appearance" on-tap="openPage_"
               hidden="[[!pageVisibility.appearance]]">
             <iron-icon icon="settings:palette"></iron-icon>
             $i18n{appearancePageTitle}
           </div>
 <if expr="chromeos">
-          <div data-section="device" on-tap="openPage_">
+          <div data-path="/device" on-tap="openPage_">
             <iron-icon icon="settings:laptop-chromebook"></iron-icon>
             $i18n{devicePageTitle}
           </div>
 </if>
-          <div data-section="search" on-tap="openPage_">
+          <div data-path="/search" on-tap="openPage_">
             <iron-icon icon="cr:search"></iron-icon>
             $i18n{searchPageTitle}
           </div>
 <if expr="not chromeos">
-          <div data-section="defaultBrowser" on-tap="openPage_"
+          <div data-path="/defaultBrowser" on-tap="openPage_"
               hidden="[[!pageVisibility.defaultBrowser]]">
             <iron-icon icon="settings:web"></iron-icon>
             $i18n{defaultBrowser}
           </div>
 </if>
-          <div data-section="onStartup" on-tap="openPage_"
+          <div data-path="/onStartup" on-tap="openPage_"
               hidden="[[!pageVisibility.onStartup]]">
             <iron-icon icon="settings:power-settings-new"></iron-icon>
             $i18n{onStartup}
           </div>
         </paper-menu>
       </div>
-      <paper-submenu class="page-menu" id="advancedPage" data-page="advanced"
-          opened="{{advancedOpened_}}"
-          hidden="[[!pageVisibility.advancedSettings]]">
-        <div class="menu-trigger" data-section="" on-tap="openPage_">
+      <paper-submenu class="page-menu" id="advancedPage"
+          opened="{{advancedOpened_}}" hidden="[[!pageVisibility.advancedSettings]]">
+        <div class="menu-trigger">
           <span>$i18n{advancedPageTitle}</span>
           <iron-icon icon="[[arrowState_(advancedOpened_)]]"></iron-icon>
         </div>
-        <paper-menu attr-for-selected="data-section" class="menu-content"
-            data-page="advanced" id="advancedMenu">
+        <paper-menu attr-for-selected="data-path" class="menu-content"
+            id="advancedMenu">
 <if expr="chromeos">
-          <div data-section="dateTime" on-tap="openPage_">
+          <div data-path="/dateTime" on-tap="openPage_">
             <iron-icon icon="settings:access-time"></iron-icon>
             $i18n{dateTimePageTitle}
           </div>
 </if>
-          <div data-section="privacy" on-tap="openPage_">
+          <div data-path="/privacy" on-tap="openPage_">
             <iron-icon icon="settings:security"></iron-icon>
             $i18n{privacyPageTitle}
           </div>
 <if expr="chromeos">
-          <div data-section="bluetooth" on-tap="openPage_">
+          <div data-path="/bluetooth" on-tap="openPage_">
             <iron-icon icon="settings:bluetooth"></iron-icon>
             $i18n{bluetoothPageTitle}
           </div>
 </if>
-          <div data-section="passwordsAndForms" on-tap="openPage_"
+          <div data-path="/passwords" on-tap="openPage_"
               hidden="[[!pageVisibility.passwordsAndForms]]">
             <iron-icon icon="settings:assignment"></iron-icon>
             $i18n{passwordsAndAutofillPageTitle}
           </div>
-          <div data-section="languages" on-tap="openPage_">
+          <div data-path="/languages" on-tap="openPage_">
             <iron-icon icon="settings:language"></iron-icon>
             $i18n{languagesPageTitle}
           </div>
-          <div data-section="downloads" on-tap="openPage_">
+          <div data-path="/downloadsDirectory" on-tap="openPage_">
             <iron-icon icon="cr:file-download"></iron-icon>
             $i18n{downloadsPageTitle}
           </div>
-          <div data-section="printing" on-tap="openPage_">
+          <div data-path="/printing" on-tap="openPage_">
             <iron-icon icon="cr:print"></iron-icon>
             $i18n{printingPageTitle}
           </div>
-          <div data-section="a11y" on-tap="openPage_">
+          <div data-path="/accessibility" on-tap="openPage_">
             <iron-icon icon="settings:accessibility"></iron-icon>
             $i18n{a11yPageTitle}
           </div>
 <if expr="not chromeos">
-          <div data-section="system" on-tap="openPage_">
+          <div data-path="/system" on-tap="openPage_">
             <iron-icon icon="settings:build"></iron-icon>
             $i18n{systemPageTitle}
           </div>
 </if>
-          <div data-section="reset" on-tap="openPage_"
+          <div data-path="/reset" on-tap="openPage_"
               hidden="[[!pageVisibility.reset]]">
             <iron-icon icon="settings:restore"></iron-icon>
             $i18n{resetPageTitle}
           </div>
         </paper-menu>
       </paper-submenu>
       <div class="separator"></div>
-      <paper-submenu class="page-menu" data-page="about">
-        <div class="menu-trigger" on-tap="openPage_" data-section="">
+      <paper-submenu class="page-menu">
+        <div class="menu-trigger" on-tap="openPage_" data-path="/help">
           $i18n{aboutPageTitle}
         </div>
       </paper-submenu>
     </paper-menu>
   </template>
   <script src="settings_menu.js"></script>
 </dom-module>