[MD settings] redesign of side nav

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

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @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',
 
   properties: {
+    /** @private */
+    advancedOpened_: Boolean,
+
     /**
      * The current active route.
+     * @type {!SettingsRoute}
      */
     currentRoute: {
       type: Object,
       notify: true,
       observer: 'currentRouteChanged_',
     },
   },
 
-  /** @private */
-  currentRouteChanged_: function() {
+  attached: function() {
+    document.addEventListener('toggle-advanced-page', function(e) {
+      if (e.detail)
+        this.$.advancedPage.open();
+      else
+        this.$.advancedPage.close();
+    }.bind(this));
+
+    this.$.advancedPage.addEventListener('paper-submenu-open', function() {
+      this.fire('toggle-advanced-page', true);
+    }.bind(this));
+
+    this.$.advancedPage.addEventListener('paper-submenu-close', function() {
+      this.fire('toggle-advanced-page', false);
+    }.bind(this));
+
+    if (this.currentRoute.page == 'advanced')
+      this.$.advancedPage.open();

[Dan Beam, 2016/06/03 03:12:24]

could this be:

this.fire('toggle-advanced-page', this.currentRoute.page == 'advanced');

[dschuyler, 2016/06/06 21:47:55]

Yes, but then it would fire an unnecessary event
during initial page load in the common case (going
to the basic settings).

[Dan Beam, 2016/06/06 22:31:03]

it seems like this would no-op on the other side and make your code slightly
simpler here

[dschuyler, 2016/06/06 23:05:13]

Done.

+  },
+
+  /**
+   * @param {!SettingsRoute} newRoute
+   * @private
+   */
+  currentRouteChanged_: function(newRoute) {
     // Sync URL changes to the side nav menu.
 
-    this.$.advancedPage.opened = this.currentRoute.page == 'advanced';
-    this.$.basicPage.opened = this.currentRoute.page == 'basic';
-
-    if (this.$.advancedPage.opened)
+    if (newRoute.page == 'advanced') {
       this.$.advancedMenu.selected = this.currentRoute.section;
-
-    if (this.$.basicPage.opened)
+      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) {
       this.currentRoute = {
         page: submenuRoute,
         section: event.currentTarget.dataset.section,
         subpage: [],
       };
     }
   },
 
   /**
    * @param {boolean} opened Whether the menu is expanded.
    * @return {string} Which icon to use.
    * @private
    * */
   arrowState_: function(opened) {
     return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
   },
 });