[MD settings] redesign of side nav

chrome/browser/resources/settings/settings_main/settings_main.js

Index: chrome/browser/resources/settings/settings_main/settings_main.js
diff --git a/chrome/browser/resources/settings/settings_main/settings_main.js b/chrome/browser/resources/settings/settings_main/settings_main.js
index a7070d055de7346ce2f20152e1dde8525681c5d1..30bf903b663c096f5ea01804b2590c1a587d21b6 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -2,6 +2,27 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+Polymer({
+  is: 'advanced-page-toggle',

[Dan Beam, 2016/05/31 23:28:24]

can this be implemented in simple DOM instead of custom element + shadow DOM?

[dschuyler, 2016/06/02 01:05:37]

Done.

+
+  properties: {
+    /** @private */
+    isShown_: Boolean,
+  },
+
+  attached: function() {
+    document.addEventListener('toggle-advanced-page', function(e) {
+      this.isShown_ = e.detail;
+    }.bind(this));
+  },
+
+  /** @private */
+  toggleValue_: function() {
+    this.fire('toggle-advanced-page', !this.isShown_);
+  },
+});
+
+
 /**
  * @fileoverview
  * 'settings-main' displays the selected settings page.
@@ -29,6 +50,7 @@ Polymer({
 
     /**
      * The current active route.
+     * @type {!SettingsRoute}
      */
     currentRoute: {
       type: Object,
@@ -40,19 +62,35 @@ Polymer({
     showAdvancedPage_: Boolean,
 
     /** @private */
+    showAdvancedToggle_: Boolean,
+
+    /** @private */
     showBasicPage_: Boolean,
 
     /** @private */
     showAboutPage_: Boolean,
   },
 
+  attached: function() {
+    document.addEventListener('toggle-advanced-page', function(e) {
+      this.showAdvancedPage_ = e.detail;
+    }.bind(this));
+  },
+
   /**
    * @param {!SettingsRoute} newRoute
    * @private
    */
   currentRouteChanged_: function(newRoute) {
+    var isSubpage = !!newRoute.subpage.length;
+
     this.showAboutPage_ = newRoute.page == 'about';
-    this.showAdvancedPage_ = newRoute.page == 'advanced';
-    this.showBasicPage_ = newRoute.page == 'basic';
+
+    this.showBasicPage_ = !(newRoute.page == 'about' ||

[Dan Beam, 2016/05/31 23:28:24]

can you use this.showAboutPage_ and this.showAdvancedToggle_ to implement
this.showBasicPage_?

[dschuyler, 2016/06/02 01:05:37]

Done.

+        (isSubpage && newRoute.page == 'advanced'));
+
+    this.showAdvancedToggle_ = newRoute.page != 'about' && !isSubpage;
+
+    this.$.pageContainer.style.height = (isSubpage ? '100%' : '');
   },
 });