[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..3edeb5f0bfea4f46a1aad0cfa9cc804ed2eb2e14 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -5,22 +5,16 @@
 /**
  * @fileoverview
  * 'settings-main' displays the selected settings page.
- *
- * Example:
- *
- *     <settings-main pages="[[pages]]" selected-page-id="{{selectedId}}">
- *     </settings-main>
- *
- * See settings-drawer for example of use in 'paper-drawer-panel'.
  */
 Polymer({
   is: 'settings-main',
 
   properties: {
+    /** @private */
+    isAdvancedMenuOpen_: Boolean,
+
     /**
      * Preferences state.
-     *
-     * @type {?CrSettingsPrefsElement}
      */
     prefs: {
       type: Object,
@@ -29,6 +23,7 @@ Polymer({
 
     /**
      * The current active route.
+     * @type {!SettingsRoute}
      */
     currentRoute: {
       type: Object,
@@ -40,19 +35,44 @@ Polymer({
     showAdvancedPage_: Boolean,
 
     /** @private */
+    showAdvancedToggle_: Boolean,

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

showAdvancedToggle_: {
  type: Boolean,
  value: undefined  // maybe? or true?
},

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

Done.

+
+    /** @private */
     showBasicPage_: Boolean,

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

make true by default?  or undefined?

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

Done.

 
     /** @private */
     showAboutPage_: Boolean,
   },
 
+  attached: function() {
+    document.addEventListener('toggle-advanced-page', function(e) {
+      this.showAdvancedPage_ = e.detail;
+      this.isAdvancedMenuOpen_ = e.detail;
+    }.bind(this));
+  },
+
   /**
    * @param {!SettingsRoute} newRoute
    * @private
    */
   currentRouteChanged_: function(newRoute) {

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

does this get called immediately after load or something?  how do the initial
values get set correctly?

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

I believe so. I don't know of a case where it doesn't.
Via this function (or the polymer defaults).

+    var isSubpage = !!newRoute.subpage.length;
+
     this.showAboutPage_ = newRoute.page == 'about';
-    this.showAdvancedPage_ = newRoute.page == 'advanced';
-    this.showBasicPage_ = newRoute.page == 'basic';
+
+    this.showAdvancedToggle_ = !this.showAboutPage_ && !isSubpage;
+
+    this.showBasicPage_ = this.showAdvancedToggle_ || newRoute.page == 'basic';
+
+    this.showAdvancedPage_ =
+        (this.isAdvancedMenuOpen_ && this.showAdvancedToggle_) ||
+        newRoute.page == 'advanced';
+
+    this.$.pageContainer.style.height = isSubpage ? '100%' : '';
+  },
+
+  /** @private */
+  toggleAdvancedPage_: function() {
+    this.fire('toggle-advanced-page', !this.isAdvancedMenuOpen_);
   },
 });