Site Settings: Give each category its own route.

chrome/browser/resources/settings/settings_page/settings_router.js

Index: chrome/browser/resources/settings/settings_page/settings_router.js
diff --git a/chrome/browser/resources/settings/settings_page/settings_router.js b/chrome/browser/resources/settings/settings_page/settings_router.js
index 81d9f613387139ca8c35423f0946dd09ec75645e..84b66b939063bd42db767d7f36ec93ec84e63747 100644
--- a/chrome/browser/resources/settings/settings_page/settings_router.js
+++ b/chrome/browser/resources/settings/settings_page/settings_router.js
@@ -149,6 +149,62 @@ Polymer({
       subpageTitles: ['siteSettings', 'siteSettingsCategoryPageTitle'],
     },
     {
+      url: '/siteSettings/category/camera',
+      page: 'advanced',
+      section: 'privacy',
+      subpage: ['site-settings', 'site-settings-category'],
+      subpageTitles: ['siteSettings', 'siteSettingsCategoryPageTitle'],
+    },
+    {
+      url: '/siteSettings/category/cookies',
+      page: 'advanced',
+      section: 'privacy',
+      subpage: ['site-settings', 'site-settings-category'],

[tommycli, 2016/01/04 18:12:09]

final element is site-settings-cookies right?

and same below

[Finnur, 2016/01/05 15:54:07]

I'm not sure how to proceed here...

These sub-page strings equal Polymer element ids, right?

As such, there's only a site-settings-category element (which knows how to
display any category). Therefore there's no need for a specific
site-settings-cookies element.

I mean, I guess we could create one for each category and embed a
site-settings-category object within, or something... is that what you are
suggesting?

[tommycli, 2016/01/05 18:28:58]

Hello,

No, the subpage strings here do not equal Polymer element ids.

They equal the ids of neon-animatable elements within settings-animated-pages.

See
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res...

I'm suggesting you do something within privacy_page.html:

<settings-animated-pages id="pages" current-route="{{currentRoute}}"
section="privacy">
  ...
  <neon-animatable id="site-settings-cookies">
    <site-settings-category category="cookies"></site-settings-category>
  </neon-animatable>
  <neon-animatable id="site-settings-fullscreen">
    <site-settings-category category="fullscreen"></site-settings-category>
  </neon-animatable>

  ...

This is necessary, I think, since you will want to support animated transitions
between subpages - right?

[Finnur, 2016/01/06 14:53:46]

Convinced.

However, I've not had luck now nor in the past with setting the |category| value
via HTML like you suggest (Dan mentioned talking to the Polymer team about that,
because it seems like a common need). I therefore still need to set it
dynamically in site_settings_page.js. 

That means the |category| value will get lost on page refresh and needs to be
set explicitly via the URL (requiring the computeCategoryFromDisplayName still,
which I've renamed to clarify a bit, hopefully).

Would like to remove it, but don't see how at the moment.

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

You can only define this.category from HTML if 'category' is a polymer property.
i.e., you need to add something like

  category: {
    type: String,
  }

under 'properties' in site_settings_category.js.

settings_section.js does something very similar:
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res...

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

|category| is already defined; it used to reside in this file, but Steven moved
it into site_settings_behavior, which this derives from.

However, I made another attempt and was successful this time. I suspect either
selectedCategory or the url parsing was messing with my last attempt. After I
removed both of those and tried again it worked, with minor modifications.

+      subpageTitles: ['siteSettings', 'siteSettingsCategoryPageTitle'],

[tommycli, 2016/01/04 18:12:09]

final element is siteSettingsCookiesPageTitle right?

and same below

[Finnur, 2016/01/05 15:54:07]

Yes, if we can resolve the above.

[Finnur, 2016/01/06 14:53:46]

Done.

+    },
+    {
+      url: '/siteSettings/category/fullscreen',
+      page: 'advanced',
+      section: 'privacy',
+      subpage: ['site-settings', 'site-settings-category'],
+      subpageTitles: ['siteSettings', 'siteSettingsCategoryPageTitle'],
+    },
+    {
+      url: '/siteSettings/category/location',
+      page: 'advanced',
+      section: 'privacy',
+      subpage: ['site-settings', 'site-settings-category'],
+      subpageTitles: ['siteSettings', 'siteSettingsCategoryPageTitle'],
+    },
+    {
+      url: '/siteSettings/category/javascript',
+      page: 'advanced',
+      section: 'privacy',
+      subpage: ['site-settings', 'site-settings-category'],
+      subpageTitles: ['siteSettings', 'siteSettingsCategoryPageTitle'],
+    },
+    {
+      url: '/siteSettings/category/microphone',
+      page: 'advanced',
+      section: 'privacy',
+      subpage: ['site-settings', 'site-settings-category'],
+      subpageTitles: ['siteSettings', 'siteSettingsCategoryPageTitle'],
+    },
+    {
+      url: '/siteSettings/category/notifications',
+      page: 'advanced',
+      section: 'privacy',
+      subpage: ['site-settings', 'site-settings-category'],
+      subpageTitles: ['siteSettings', 'siteSettingsCategoryPageTitle'],
+    },
+    {
+      url: '/siteSettings/category/popups',
+      page: 'advanced',
+      section: 'privacy',
+      subpage: ['site-settings', 'site-settings-category'],
+      subpageTitles: ['siteSettings', 'siteSettingsCategoryPageTitle'],
+    },
+    {
       url: '/siteSettings/category/details',
       page: 'advanced',
       section: 'privacy',