Settings Router Refactor: Replace route.subpage usage with route.path

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

Index: chrome/browser/resources/settings/settings_page/settings_animated_pages.js
diff --git a/chrome/browser/resources/settings/settings_page/settings_animated_pages.js b/chrome/browser/resources/settings/settings_page/settings_animated_pages.js
index 937584bbfcc84697559dbea4718d0cbc01503211..f48dda0774917ea080fa612e67967ad37963ae7c 100644
--- a/chrome/browser/resources/settings/settings_page/settings_animated_pages.js
+++ b/chrome/browser/resources/settings/settings_page/settings_animated_pages.js
@@ -72,7 +72,7 @@ Polymer({
 
   /** @protected */
   currentRouteChanged: function(newRoute, oldRoute) {
-    if (newRoute.section == this.section && newRoute.subpage.length > 0) {
+    if (newRoute.section == this.section && newRoute.isSubpage()) {
       this.switchToSubpage_(newRoute, oldRoute);
     } else {
       this.$.animatedPages.exitAnimation = 'fade-out-animation';
@@ -98,8 +98,7 @@ Polymer({
     this.ensureSubpageInstance_();
 
     if (oldRoute) {
-      var oldRouteIsSubpage = oldRoute.subpage.length > 0;
-      if (oldRouteIsSubpage && oldRoute.contains(newRoute)) {
+      if (oldRoute.isSubpage() && oldRoute.contains(newRoute)) {
         // Slide left for a descendant subpage.
         this.$.animatedPages.exitAnimation = 'slide-left-animation';
         this.$.animatedPages.entryAnimation = 'slide-from-right-animation';
@@ -112,7 +111,7 @@ Polymer({
         this.$.animatedPages.exitAnimation = 'fade-out-animation';
         this.$.animatedPages.entryAnimation = 'fade-in-animation';
 
-        if (!oldRouteIsSubpage) {
+        if (!oldRoute.isSubpage()) {
           // Set the height the expand animation should start at before
           // beginning the transition to the new subpage.
           // TODO(michaelpg): Remove MainPageBehavior's dependency on this
@@ -125,7 +124,7 @@ Polymer({
       }
     }
 
-    this.$.animatedPages.selected = newRoute.subpage.slice(-1)[0];
+    this.$.animatedPages.selected = newRoute.path;
   },
 
   /**
@@ -133,7 +132,7 @@ Polymer({
    * @private
    */
   ensureSubpageInstance_: function() {
-    var id = settings.getCurrentRoute().subpage.slice(-1)[0];
+    var id = settings.getCurrentRoute().path;

[michaelpg, 2016/08/09 03:07:48]

an ID of "/foo/var" is... unusual, although apparently valid. have you confirmed
iron-selector and company, the polymer styling shim, etc. all have no qualms
with that (by asking the team)?

[tommycli, 2016/08/09 16:03:14]

Well... technically, the paths are all on dom-if names. We could just not use
ids at all, and set attrForSelected="route-path" on neon-animated pages. Does
that work better for you?

[michaelpg, 2016/08/09 20:39:32]

Yeah, let's do that!

BTW, thanks for the info, although it's even weirder in JS because you have to
escape the backslashes first:

document.querySelector('#\\/foo\\/bar')

[tommycli, 2016/08/10 17:21:33]

Done.

     var template = Polymer.dom(this).querySelector(
         'template[name="' + id + '"]');