MD Settings: rework how advanced UI shows

chrome/browser/resources/settings/settings_main/settings_main.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.
 
 /**
  * @typedef {{about: boolean, basic: boolean, advanced: boolean}}
  */
 var MainPageVisibility;
 
 /**
  * @fileoverview
  * 'settings-main' displays the selected settings page.
  */
 Polymer({
   is: 'settings-main',
 
   behaviors: [settings.RouteObserverBehavior],
 
   properties: {
     /**
      * Preferences state.
      */
     prefs: {
       type: Object,
       notify: true,
     },
 
-    /** @private */
-    advancedToggleExpanded_: {
+    advancedToggleExpanded: {
       type: Boolean,
-      value: false,
+      notify: true,
+      observer: 'updatePagesShown_',
     },
 
     /**
      * True if a section is fully expanded to hide other sections beneath it.
      * Not true otherwise (even while animating a section open/closed).
      * @private
      */
     hasExpandedSection_: Boolean,
 
     /** @private */
@@ skipping 41 matching lines @@
      * @type {!GuestModePageVisibility}
      */
     pageVisibility: {
       type: Object,
       value: function() { return {}; },
     },
   },
 
   /** @override */
   attached: function() {
-    document.addEventListener('toggle-advanced-page', function(e) {
-      this.advancedToggleExpanded_ = e.detail;
-      this.updatePagesShown_();
-    }.bind(this));
-
     var currentRoute = settings.getCurrentRoute();
     this.hasExpandedSection_ = currentRoute && currentRoute.isSubpage();
   },
 
   /** @private */
   overscrollChanged_: function() {
     if (!this.overscroll_ && this.boundScroll_) {
       this.offsetParent.removeEventListener('scroll', this.boundScroll_);
       window.removeEventListener('resize', this.boundScroll_);
       this.boundScroll_ = null;
@@ skipping 91 matching lines @@
   },
 
   /** @param {!settings.Route} newRoute */
   currentRouteChanged: function(newRoute) {
     // When the route changes from a sub-page to the main page, immediately
     // update hasExpandedSection_ to unhide the other sections.
     if (!newRoute.isSubpage())
       this.hasExpandedSection_ = false;
 
     if (settings.Route.ADVANCED.contains(newRoute))
-      this.advancedToggleExpanded_ = true;
+      this.advancedToggleExpanded = true;
 
     this.updatePagesShown_();
   },
 
   /** @private */
   onSubpageExpand_: function() {
     // The subpage finished expanding fully. Hide pages other than the current
     // section's parent page.
     this.hasExpandedSection_ = true;
     this.updatePagesShown_();
   },
 
   /**
    * Updates the hidden state of the about, basic and advanced pages, based on
    * the current route and the Advanced toggle state.
    * @private
    */
   updatePagesShown_: function() {
     var currentRoute = settings.getCurrentRoute();
     if (settings.Route.ABOUT.contains(currentRoute)) {
       this.showPages_ = {about: true, basic: false, advanced: false};
     } else {
       this.showPages_ = {
         about: false,
         basic: settings.Route.BASIC.contains(currentRoute) ||
             !this.hasExpandedSection_,
         advanced: this.hasExpandedSection_ ?
             settings.Route.ADVANCED.contains(currentRoute) :
-            this.advancedToggleExpanded_,
+            this.advancedToggleExpanded,
       };
     }
 
     // Calculate and set the overflow padding.
     this.updateOverscrollForPage_();
 
     // Wait for any other changes, then calculate the overflow padding again.
     setTimeout(function() {
       // Ensure any dom-if reflects the current properties.
       Polymer.dom.flush();
@@ skipping 36 matching lines @@
 
     // Find the distance from the section's top to the overscroll.
     var sectionTop = section.offsetParent.offsetTop + section.offsetTop;
     var distance = this.$.overscroll.offsetTop - sectionTop;
 
     return Math.max(0, this.offsetParent.clientHeight - distance);
   },
 
   /** @private */
   toggleAdvancedPage_: function() {
-    this.fire('toggle-advanced-page', !this.advancedToggleExpanded_);
+    this.advancedToggleExpanded = !this.advancedToggleExpanded;
   },
 
   /**
    * Returns the root page (if it exists) for a route.
    * @param {!settings.Route} route
    * @return {(?SettingsAboutPageElement|?SettingsAdvancedPageElement|
    *           ?SettingsBasicPageElement)}
    */
   getPage_: function(route) {
     if (settings.Route.ABOUT.contains(route)) {
@@ skipping 59 matching lines @@
 
   /**
    * @param {(boolean|undefined)} visibility
    * @return {boolean} True unless visibility is false.
    * @private
    */
   showAdvancedSettings_: function(visibility) {
     return visibility !== false;
   },
 });