[MD settings] redesign of side nav

chrome/browser/resources/settings/settings_menu/settings_menu.js

Index: chrome/browser/resources/settings/settings_menu/settings_menu.js
diff --git a/chrome/browser/resources/settings/settings_menu/settings_menu.js b/chrome/browser/resources/settings/settings_menu/settings_menu.js
index 7ea80a6d4500036b79dfa26f99b137611a0fac5b..9616991b99161898b7d4c9635a82564ee9e5a08a 100644
--- a/chrome/browser/resources/settings/settings_menu/settings_menu.js
+++ b/chrome/browser/resources/settings/settings_menu/settings_menu.js
@@ -5,11 +5,6 @@
 /**
  * @fileoverview
  * 'settings-menu' shows a menu with a hardcoded set of pages and subpages.
- *
- * Example:
- *
- *     <settings-menu selected-page-id="{{selectedPageId}}">
- *     </settings-menu>
  */
 Polymer({
   is: 'settings-menu',
@@ -17,6 +12,7 @@ Polymer({
   properties: {
     /**
      * The current active route.
+     * @type {!SettingsRoute}
      */
     currentRoute: {
       type: Object,
@@ -25,21 +21,46 @@ Polymer({
     },
   },
 
-  /** @private */
-  currentRouteChanged_: function() {
-    // Sync URL changes to the side nav menu.
+  attached: function() {
+    document.addEventListener('toggle-advanced-page', function(e) {
+      // Async to override Polymer trying to control |opened|.
+      // To see issue, load into /settings/advanced and click the
+      // 'Advanced' menu heading.
+      this.async(function() {
+        this.$.advancedPage.opened = e.detail;
+      }.bind(this));
+    }.bind(this));
 
-    this.$.advancedPage.opened = this.currentRoute.page == 'advanced';
-    this.$.basicPage.opened = this.currentRoute.page == 'basic';
+    // Special case for initial load (via URL) into advanced settings.
+    // Async to allow other listeners to attach.
+    this.async(function() {
+      this.fire('toggle-advanced-page', this.currentRoute.page == 'advanced');
+    }.bind(this));
+  },
 
-    if (this.$.advancedPage.opened)
-      this.$.advancedMenu.selected = this.currentRoute.section;
+  /**
+   * @param {!SettingsRoute} newRoute
+   * @private
+   */
+  currentRouteChanged_: function(newRoute) {
+    // Sync URL changes to the side nav menu.
 
-    if (this.$.basicPage.opened)
+    if (newRoute.page == 'advanced') {
+      this.$.advancedMenu.selected = this.currentRoute.section;
+      this.$.basicMenu.selected = null;
+    } else if (newRoute.page == 'basic') {
+      this.$.advancedMenu.selected = null;
       this.$.basicMenu.selected = this.currentRoute.section;
+    } else {
+      this.$.advancedMenu.selected = null;
+      this.$.basicMenu.selected = null;
+    }
   },
 
-  /** @private */
+  /**
+   * @param {!Event} event
+   * @private
+   */
   openPage_: function(event) {
     var submenuRoute = event.currentTarget.parentNode.dataset.page;
     if (submenuRoute) {
@@ -52,6 +73,15 @@ Polymer({
   },
 
   /**
+   * @param {!Event} event
+   * @private
+   */
+  toggleAdvancedPage_: function(event) {
+    this.openPage_(event);
+    this.fire('toggle-advanced-page', !this.$.advancedPage.opened);
+  },
+
+  /**
    * @param {boolean} opened Whether the menu is expanded.
    * @return {string} Which icon to use.
    * @private