Site Settings: Give each category its own route.

chrome/browser/resources/settings/privacy_page/privacy_page.html

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.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-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item-body.html">
 <link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_manager_page.html">
 <link rel="import" href="chrome://md-settings/clear_browsing_data_page/clear_browsing_data_page.html">
 <link rel="import" href="chrome://md-settings/controls/settings_checkbox.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html">
@@ skipping 81 matching lines @@
       <neon-animatable id="manage-certificates">
         <settings-subheader i18n-values="page-title:manageCertificates">
         </settings-subheader>
         <settings-certificate-manager-page>
         </settings-certificate-manager-page>
       </neon-animatable>
       <neon-animatable id="site-settings">
         <settings-subheader i18n-values="page-title:siteSettings">
         </settings-subheader>
         <settings-site-settings-page current-route="{{currentRoute}}"
             prefs="{{prefs}}" category-selected="{{categorySelected}}">

[tommycli, 2016/01/06 19:10:34]

I also noticed that you have this 'categorySelected' property. Once we get the
URL routing done correctly, I think the selected category can just be passed via
the URL/route, and we can eliminate this property.

[Finnur, 2016/01/07 13:14:49]

Eliminated.

         </settings-site-settings-page>
       </neon-animatable>
-      <neon-animatable id="site-settings-category">
+
+      <neon-animatable id="site-settings-category-camera">
         <settings-subheader i18n-values="page-title:siteSettings">
         </settings-subheader>
         <site-settings-category
+            selected-origin="{{originSelected}}" prefs="{{prefs}}"
+            current-route="{{currentRoute}}" category="{{categorySelected}}">

[tommycli, 2016/01/06 19:10:34]

Here you are passing in the categorySelected variable, which is a number.

Instead, i think you should be passing in a string constant, i.e.
category="camera" and same below.

[Finnur, 2016/01/07 13:14:49]

Numbers also work and I think are more appropriate here than a string -- that
anyway needs to be converted into a number before being used. |category| is also
defined as a number.

+        </site-settings-category>
+      </neon-animatable>
+      <neon-animatable id="site-settings-category-cookies">
+        <settings-subheader i18n-values="page-title:siteSettings">
+        </settings-subheader>
+        <site-settings-category
+            selected-origin="{{originSelected}}" prefs="{{prefs}}"
+            current-route="{{currentRoute}}" category="{{categorySelected}}">
+        </site-settings-category>
+      </neon-animatable>
+      <neon-animatable id="site-settings-category-fullscreen">
+        <settings-subheader i18n-values="page-title:siteSettings">
+        </settings-subheader>
+        <site-settings-category
+            selected-origin="{{originSelected}}" prefs="{{prefs}}"
+            current-route="{{currentRoute}}" category="{{categorySelected}}">
+        </site-settings-category>
+      </neon-animatable>
+      <neon-animatable id="site-settings-category-images">
+        <settings-subheader i18n-values="page-title:siteSettings">
+        </settings-subheader>
+        <site-settings-category
+            selected-origin="{{originSelected}}" prefs="{{prefs}}"
+            current-route="{{currentRoute}}" category="{{categorySelected}}">
+        </site-settings-category>
+      </neon-animatable>
+      <neon-animatable id="site-settings-category-location">
+        <settings-subheader i18n-values="page-title:siteSettings">
+        </settings-subheader>
+        <site-settings-category
             selected-origin="{{originSelected}}" prefs="{{prefs}}"
             current-route="{{currentRoute}}" category="{{categorySelected}}">
         </site-settings-category>
       </neon-animatable>
+      <neon-animatable id="site-settings-category-javascript">
+        <settings-subheader i18n-values="page-title:siteSettings">
+        </settings-subheader>
+        <site-settings-category
+            selected-origin="{{originSelected}}" prefs="{{prefs}}"
+            current-route="{{currentRoute}}" category="{{categorySelected}}">
+        </site-settings-category>
+      </neon-animatable>
+      <neon-animatable id="site-settings-category-microphone">
+        <settings-subheader i18n-values="page-title:siteSettings">
+        </settings-subheader>
+        <site-settings-category
+            selected-origin="{{originSelected}}" prefs="{{prefs}}"
+            current-route="{{currentRoute}}" category="{{categorySelected}}">
+        </site-settings-category>
+      </neon-animatable>
+      <neon-animatable id="site-settings-category-notifications">
+        <settings-subheader i18n-values="page-title:siteSettings">
+        </settings-subheader>
+        <site-settings-category
+            selected-origin="{{originSelected}}" prefs="{{prefs}}"
+            current-route="{{currentRoute}}" category="{{categorySelected}}">
+        </site-settings-category>
+      </neon-animatable>
+      <neon-animatable id="site-settings-category-popups">
+        <settings-subheader i18n-values="page-title:siteSettings">
+        </settings-subheader>
+        <site-settings-category
+            selected-origin="{{originSelected}}" prefs="{{prefs}}"
+            current-route="{{currentRoute}}" category="{{categorySelected}}">
+        </site-settings-category>
+      </neon-animatable>
+
       <neon-animatable id="site-details">
         <site-details prefs="{{prefs}}" origin="{{originSelected}}">
         </site-details>
       </neon-animatable>
       <neon-animatable id="clear-browsing-data">
         <settings-subheader i18n-values="page-title:clearBrowsingData">
         </settings-subheader>
         <settings-clear-browsing-data-page prefs="{{prefs}}">
         </settings-clear-browsing-data-page>
       </neon-animatable>
     </settings-animated-pages>
   </template>
   <script src="privacy_page.js"></script>
 </dom-module>