chrome/browser/resources/settings/settings_page/main_page_behavior.js - chromium/src - Git at Google

 // Copyright 2016 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.

 /**
  * Responds to route changes by expanding, collapsing, or scrolling to sections
  * on the page. Expanded sections take up the full height of the container. At
  * most one section should be expanded at any given time.
  * @polymerBehavior MainPageBehavior
  */
 const MainPageBehaviorImpl = {
   properties: {
     /**
      * Help CSS to alter style during the horizontal swipe animation.
      * Note that this is unrelated to the |currentAnimation_| (which refers to
      * the vertical expand animation).
      */
     isSubpageAnimating: {
       reflectToAttribute: true,
       type: Boolean,
     },

     /**
      * Whether a search operation is in progress or previous search results are
      * being displayed.
      * @private {boolean}
      */
     inSearchMode: {
       type: Boolean,
       value: false,
       observer: 'inSearchModeChanged_',
     },
   },

   /** @type {?HTMLElement} The scrolling container. */
   scroller: null,

   listeners: {'neon-animation-finish': 'onNeonAnimationFinish_'},

   /** @override */
   attached: function() {
     this.scroller = this.domHost ? this.domHost.parentNode : document.body;
   },

   /**
    * Remove the is-animating attribute once the animation is complete.
    * This may catch animations finishing more often than needed, which is not
    * known to cause any issues (e.g. when animating from a shallower page to a
    * deeper page; or when transitioning to the main page).
    * @private
    */
   onNeonAnimationFinish_: function() {
     this.isSubpageAnimating = false;
   },

   /**
    * @param {!settings.Route} newRoute
    * @param {settings.Route} oldRoute
    */
   currentRouteChanged: function(newRoute, oldRoute) {
     const oldRouteWasSection = !!oldRoute && !!oldRoute.parent &&
         !!oldRoute.section && oldRoute.parent.section != oldRoute.section;

     if (this.scroller) {
       // When navigating from a section to the root route, we just need to
       // scroll to the top, and can early exit afterwards.
       if (oldRouteWasSection && newRoute == settings.routes.BASIC) {
         this.scroller.scrollTop = 0;
         return;
       }

       // When navigating to the About page, we need to scroll to the top, and
       // still do the rest of section management.
       if (newRoute == settings.routes.ABOUT)
         this.scroller.scrollTop = 0;
     }

     // Scroll to the section except for back/forward. Also scroll for any
     // in-page back/forward navigations (from a section or the root page).
     // Also always scroll when coming from either the About or root page.
     const scrollToSection = !settings.lastRouteChangeWasPopstate() ||
         oldRouteWasSection || oldRoute == settings.routes.BASIC ||
         oldRoute == settings.routes.ABOUT;

     // TODO(dschuyler): This doesn't set the flag in the case of going to or
     // from the main page. It seems sensible to set the flag in those cases,
     // unfortunately bug 708465 happens. Figure out why that is and then set
     // this flag more broadly.
     if (oldRoute && oldRoute.isSubpage() && newRoute.isSubpage())
       this.isSubpageAnimating = true;

     // For previously uncreated pages (including on first load), allow the page
     // to render before scrolling to or expanding the section.
     if (!oldRoute) {
       this.fire('hide-container');
       setTimeout(() => {
         this.fire('show-container');
         this.tryTransitionToSection_(scrollToSection, true);
       });
     } else if (this.scrollHeight == 0) {
       setTimeout(this.tryTransitionToSection_.bind(this, scrollToSection));
     } else {
       this.tryTransitionToSection_(scrollToSection);
     }
   },

   /**
    * When exiting search mode, we need to make another attempt to scroll to
    * the correct section, since it has just been re-rendered.
    * @private
    */
   inSearchModeChanged_: function(inSearchMode) {
     if (!this.isAttached)
       return;

     if (!inSearchMode)
       this.tryTransitionToSection_(!settings.lastRouteChangeWasPopstate());
   },

   /**
    * If possible, transitions to the current route's section (by expanding or
    * scrolling to it). If another transition is running, finishes or cancels
    * that one, then schedules this function again. This ensures the current
    * section is quickly shown, without getting the page into a broken state --
    * if currentRoute changes in between calls, just transition to the new route.
    * @param {boolean} scrollToSection
    * @param {boolean=} immediate Whether to instantly expand instead of animate.
    * @private
    */
   tryTransitionToSection_: function(scrollToSection, immediate) {
     const currentRoute = settings.getCurrentRoute();
     const currentSection = this.getSection(currentRoute.section);

     // If an animation is already playing, try finishing or canceling it.
     if (this.currentAnimation_) {
       this.maybeStopCurrentAnimation_();
       // Either way, this function will be called again once the current
       // animation ends.
       return;
     }

     let promise;
     const expandedSection = /** @type {?SettingsSectionElement} */ (
         this.$$('settings-section.expanded'));
     if (expandedSection) {
       // If the section shouldn't be expanded, collapse it.
       if (!currentRoute.isSubpage() || expandedSection != currentSection) {
         promise = this.collapseSection_(expandedSection);
       } else {
         // Scroll to top while sliding to another subpage.
         this.scroller.scrollTop = 0;
       }
     } else if (currentSection) {
       // Expand the section into a subpage or scroll to it on the main page.
       if (currentRoute.isSubpage()) {
         if (immediate)
           this.expandSectionImmediate_(currentSection);
         else
           promise = this.expandSection_(currentSection);
       } else if (scrollToSection) {
         currentSection.show();
       }
     } else if (
         this.tagName == 'SETTINGS-BASIC-PAGE' && settings.routes.ADVANCED &&
         settings.routes.ADVANCED.contains(currentRoute) &&
         // Need to exclude routes that correspond to 'non-sectioned' children of
         // ADVANCED, otherwise tryTransitionToSection_ will recurse endlessly.
         !currentRoute.isNavigableDialog) {
       assert(currentRoute.section);
       // Hide the container again while Advanced Page template is being loaded.
       this.fire('hide-container');
       promise = this.$$('#advancedPageTemplate').get();
     }

     // When this animation ends, another may be necessary. Call this function
     // again after the promise resolves.
     if (promise) {
       promise.then(this.tryTransitionToSection_.bind(this, scrollToSection))
           .then(() => {
             this.fire('show-container');
           });
     }
   },

   /**
    * If the current animation is inconsistent with the current route, stops the
    * animation by finishing or canceling it so the new route can be animated to.
    * @private
    */
   maybeStopCurrentAnimation_: function() {
     const currentRoute = settings.getCurrentRoute();
     const animatingSection = /** @type {?SettingsSectionElement} */ (
         this.$$('settings-section.expanding, settings-section.collapsing'));
     assert(animatingSection);

     if (animatingSection.classList.contains('expanding')) {
       // Cancel the animation to go back to the main page if the animating
       // section shouldn't be expanded.
       if (animatingSection.section != currentRoute.section ||
           !currentRoute.isSubpage()) {
         this.currentAnimation_.cancel();
       }
       // Otherwise, let the expand animation continue.
       return;
     }

     assert(animatingSection.classList.contains('collapsing'));
     if (!currentRoute.isSubpage())
       return;

     // If the collapsing section actually matches the current route's section,
     // we can just cancel the animation to re-expand the section.
     if (animatingSection.section == currentRoute.section) {
       this.currentAnimation_.cancel();
       return;
     }

     // The current route is a subpage, so that section needs to expand.
     // Immediately finish the current collapse animation so that can happen.
     this.currentAnimation_.finish();
   },

   /**
    * Immediately expand the card in |section| to fill the page.
    * @param {!SettingsSectionElement} section
    * @private
    */
   expandSectionImmediate_: function(section) {
     assert(this.scroller);
     section.immediateExpand(this.scroller);
     this.finishedExpanding_(section);
     // TODO(scottchen): iron-list inside subpages need this to render correctly.
     this.fire('resize');
   },

   /**
    * Animates the card in |section|, expanding it to fill the page.
    * @param {!SettingsSectionElement} section
    * @return {!Promise} Resolved when the transition is finished or canceled.
    * @private
    */
   expandSection_: function(section) {
     assert(this.scroller);
     if (!section.canAnimateExpand()) {
       // Try to wait for the section to be created.
       return new Promise(function(resolve, reject) {
         setTimeout(resolve);
       });
     }

     // Save the scroller position before freezing it.
     this.origScrollTop_ = this.scroller.scrollTop;
     this.fire('freeze-scroll', true);

     // Freeze the section's height so its card can be removed from the flow.
     section.setFrozen(true);

     this.currentAnimation_ = section.animateExpand(this.scroller);

     return this.currentAnimation_.finished
         .then(
             () => {
               this.finishedExpanding_(section);
             },
             () => {
               // The animation was canceled; restore the section and scroll
               // position.
               section.setFrozen(false);
               this.scroller.scrollTop = this.origScrollTop_;
             })
         .then(() => {
           this.fire('freeze-scroll', false);
           this.currentAnimation_ = null;
         });
   },

   /** @private */
   finishedExpanding_: function(section) {
     // Hide other sections and scroll to the top of the subpage.
     this.classList.add('showing-subpage');
     this.toggleOtherSectionsHidden_(section.section, true);
     this.scroller.scrollTop = 0;
     section.setFrozen(false);

     // Notify that the page is fully expanded.
     this.fire('subpage-expand');
   },

   /**
    * Animates the card in |section|, collapsing it back into its section.
    * @param {!SettingsSectionElement} section
    * @return {!Promise} Resolved when the transition is finished or canceled.
    */
   collapseSection_: function(section) {
     assert(this.scroller);
     assert(section.classList.contains('expanded'));

     // Don't animate the collapse if we are transitioning between Basic/Advanced
     // and About, since the section won't be visible.
     const needAnimate =
         settings.routes.ABOUT.contains(settings.getCurrentRoute()) ==
         (section.domHost.tagName == 'SETTINGS-ABOUT-PAGE');

     // Animate the collapse if the section knows the original height, except
     // when switching between Basic/Advanced and About.
     const shouldAnimateCollapse = needAnimate && section.canAnimateCollapse();
     if (shouldAnimateCollapse) {
       this.fire('freeze-scroll', true);
       // Do the initial collapse setup, which takes the section out of the flow,
       // before showing everything.
       section.setUpAnimateCollapse(this.scroller);
     } else {
       section.classList.remove('expanded');
     }

     // Show everything.
     this.toggleOtherSectionsHidden_(section.section, false);
     this.classList.remove('showing-subpage');

     if (!shouldAnimateCollapse) {
       // Finish by restoring the section into the page.
       section.setFrozen(false);
       return Promise.resolve();
     }

     // Play the actual collapse animation.
     return new Promise((resolve, reject) => {
       // Wait for the other sections to show up so we can scroll properly.
       setTimeout(() => {
         const newSection = settings.getCurrentRoute().section &&
             this.getSection(settings.getCurrentRoute().section);

         // Scroll to the new section or the original position.
         if (newSection && !settings.lastRouteChangeWasPopstate() &&
             !settings.getCurrentRoute().isSubpage()) {
           newSection.scrollIntoView();
         } else {
           this.scroller.scrollTop = this.origScrollTop_;
         }

         this.currentAnimation_ = section.animateCollapse(
             /** @type {!HTMLElement} */ (this.scroller));

         this.currentAnimation_.finished
             .catch(() => {
               // The collapse was canceled, so the page is showing a subpage
               // still.
               this.fire('subpage-expand');
             })
             .then(() => {
               // Clean up after the animation succeeds or cancels.
               section.setFrozen(false);
               section.classList.remove('collapsing');
               this.fire('freeze-scroll', false);
               this.currentAnimation_ = null;
               resolve();
             });
       });
     });
   },

   /**
    * Hides or unhides the sections not being expanded.
    * @param {string} sectionName The section to keep visible.
    * @param {boolean} hidden Whether the sections should be hidden.
    * @private
    */
   toggleOtherSectionsHidden_: function(sectionName, hidden) {
     const sections =
         Polymer.dom(this.root).querySelectorAll('settings-section');
     for (let i = 0; i < sections.length; i++)
       sections[i].hidden = hidden && (sections[i].section != sectionName);
   },

   /**
    * Helper function to get a section from the local DOM.
    * @param {string} section Section name of the element to get.
    * @return {?SettingsSectionElement}
    */
   getSection: function(section) {
     if (!section)
       return null;
     return /** @type {?SettingsSectionElement} */ (
         this.$$('settings-section[section="' + section + '"]'));
   },
 };

 /** @polymerBehavior */
 const MainPageBehavior = [
   settings.RouteObserverBehavior,
   MainPageBehaviorImpl,
 ];
	// Copyright 2016 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.

	/**
	* Responds to route changes by expanding, collapsing, or scrolling to sections
	* on the page. Expanded sections take up the full height of the container. At
	* most one section should be expanded at any given time.
	* @polymerBehavior MainPageBehavior
	*/
	const MainPageBehaviorImpl = {
	properties: {
	/**
	* Help CSS to alter style during the horizontal swipe animation.
	* Note that this is unrelated to the \|currentAnimation_\| (which refers to
	* the vertical expand animation).
	*/
	isSubpageAnimating: {
	reflectToAttribute: true,
	type: Boolean,
	},

	/**
	* Whether a search operation is in progress or previous search results are
	* being displayed.
	* @private {boolean}
	*/
	inSearchMode: {
	type: Boolean,
	value: false,
	observer: 'inSearchModeChanged_',
	},
	},

	/** @type {?HTMLElement} The scrolling container. */
	scroller: null,

	listeners: {'neon-animation-finish': 'onNeonAnimationFinish_'},

	/** @override */
	attached: function() {
	this.scroller = this.domHost ? this.domHost.parentNode : document.body;
	},

	/**
	* Remove the is-animating attribute once the animation is complete.
	* This may catch animations finishing more often than needed, which is not
	* known to cause any issues (e.g. when animating from a shallower page to a
	* deeper page; or when transitioning to the main page).
	* @private
	*/
	onNeonAnimationFinish_: function() {
	this.isSubpageAnimating = false;
	},

	/**
	* @param {!settings.Route} newRoute
	* @param {settings.Route} oldRoute
	*/
	currentRouteChanged: function(newRoute, oldRoute) {
	const oldRouteWasSection = !!oldRoute && !!oldRoute.parent &&
	!!oldRoute.section && oldRoute.parent.section != oldRoute.section;

	if (this.scroller) {
	// When navigating from a section to the root route, we just need to
	// scroll to the top, and can early exit afterwards.
	if (oldRouteWasSection && newRoute == settings.routes.BASIC) {
	this.scroller.scrollTop = 0;
	return;
	}

	// When navigating to the About page, we need to scroll to the top, and
	// still do the rest of section management.
	if (newRoute == settings.routes.ABOUT)
	this.scroller.scrollTop = 0;
	}

	// Scroll to the section except for back/forward. Also scroll for any
	// in-page back/forward navigations (from a section or the root page).
	// Also always scroll when coming from either the About or root page.
	const scrollToSection = !settings.lastRouteChangeWasPopstate() \|\|
	oldRouteWasSection \|\| oldRoute == settings.routes.BASIC \|\|
	oldRoute == settings.routes.ABOUT;

	// TODO(dschuyler): This doesn't set the flag in the case of going to or
	// from the main page. It seems sensible to set the flag in those cases,
	// unfortunately bug 708465 happens. Figure out why that is and then set
	// this flag more broadly.
	if (oldRoute && oldRoute.isSubpage() && newRoute.isSubpage())
	this.isSubpageAnimating = true;

	// For previously uncreated pages (including on first load), allow the page
	// to render before scrolling to or expanding the section.
	if (!oldRoute) {
	this.fire('hide-container');
	setTimeout(() => {
	this.fire('show-container');
	this.tryTransitionToSection_(scrollToSection, true);
	});
	} else if (this.scrollHeight == 0) {
	setTimeout(this.tryTransitionToSection_.bind(this, scrollToSection));
	} else {
	this.tryTransitionToSection_(scrollToSection);
	}
	},

	/**
	* When exiting search mode, we need to make another attempt to scroll to
	* the correct section, since it has just been re-rendered.
	* @private
	*/
	inSearchModeChanged_: function(inSearchMode) {
	if (!this.isAttached)
	return;

	if (!inSearchMode)
	this.tryTransitionToSection_(!settings.lastRouteChangeWasPopstate());
	},

	/**
	* If possible, transitions to the current route's section (by expanding or
	* scrolling to it). If another transition is running, finishes or cancels
	* that one, then schedules this function again. This ensures the current
	* section is quickly shown, without getting the page into a broken state --
	* if currentRoute changes in between calls, just transition to the new route.
	* @param {boolean} scrollToSection
	* @param {boolean=} immediate Whether to instantly expand instead of animate.
	* @private
	*/
	tryTransitionToSection_: function(scrollToSection, immediate) {
	const currentRoute = settings.getCurrentRoute();
	const currentSection = this.getSection(currentRoute.section);

	// If an animation is already playing, try finishing or canceling it.
	if (this.currentAnimation_) {
	this.maybeStopCurrentAnimation_();
	// Either way, this function will be called again once the current
	// animation ends.
	return;
	}

	let promise;
	const expandedSection = /** @type {?SettingsSectionElement} */ (
	this.$$('settings-section.expanded'));
	if (expandedSection) {
	// If the section shouldn't be expanded, collapse it.
	if (!currentRoute.isSubpage() \|\| expandedSection != currentSection) {
	promise = this.collapseSection_(expandedSection);
	} else {
	// Scroll to top while sliding to another subpage.
	this.scroller.scrollTop = 0;
	}
	} else if (currentSection) {
	// Expand the section into a subpage or scroll to it on the main page.
	if (currentRoute.isSubpage()) {
	if (immediate)
	this.expandSectionImmediate_(currentSection);
	else
	promise = this.expandSection_(currentSection);
	} else if (scrollToSection) {
	currentSection.show();
	}
	} else if (
	this.tagName == 'SETTINGS-BASIC-PAGE' && settings.routes.ADVANCED &&
	settings.routes.ADVANCED.contains(currentRoute) &&
	// Need to exclude routes that correspond to 'non-sectioned' children of
	// ADVANCED, otherwise tryTransitionToSection_ will recurse endlessly.
	!currentRoute.isNavigableDialog) {
	assert(currentRoute.section);
	// Hide the container again while Advanced Page template is being loaded.
	this.fire('hide-container');
	promise = this.$$('#advancedPageTemplate').get();
	}

	// When this animation ends, another may be necessary. Call this function
	// again after the promise resolves.
	if (promise) {
	promise.then(this.tryTransitionToSection_.bind(this, scrollToSection))
	.then(() => {
	this.fire('show-container');
	});
	}
	},

	/**
	* If the current animation is inconsistent with the current route, stops the
	* animation by finishing or canceling it so the new route can be animated to.
	* @private
	*/
	maybeStopCurrentAnimation_: function() {
	const currentRoute = settings.getCurrentRoute();
	const animatingSection = /** @type {?SettingsSectionElement} */ (
	this.$$('settings-section.expanding, settings-section.collapsing'));
	assert(animatingSection);

	if (animatingSection.classList.contains('expanding')) {
	// Cancel the animation to go back to the main page if the animating
	// section shouldn't be expanded.
	if (animatingSection.section != currentRoute.section \|\|
	!currentRoute.isSubpage()) {
	this.currentAnimation_.cancel();
	}
	// Otherwise, let the expand animation continue.
	return;
	}

	assert(animatingSection.classList.contains('collapsing'));
	if (!currentRoute.isSubpage())
	return;

	// If the collapsing section actually matches the current route's section,
	// we can just cancel the animation to re-expand the section.
	if (animatingSection.section == currentRoute.section) {
	this.currentAnimation_.cancel();
	return;
	}

	// The current route is a subpage, so that section needs to expand.
	// Immediately finish the current collapse animation so that can happen.
	this.currentAnimation_.finish();
	},

	/**
	* Immediately expand the card in \|section\| to fill the page.
	* @param {!SettingsSectionElement} section
	* @private
	*/
	expandSectionImmediate_: function(section) {
	assert(this.scroller);
	section.immediateExpand(this.scroller);
	this.finishedExpanding_(section);
	// TODO(scottchen): iron-list inside subpages need this to render correctly.
	this.fire('resize');
	},

	/**
	* Animates the card in \|section\|, expanding it to fill the page.
	* @param {!SettingsSectionElement} section
	* @return {!Promise} Resolved when the transition is finished or canceled.
	* @private
	*/
	expandSection_: function(section) {
	assert(this.scroller);
	if (!section.canAnimateExpand()) {
	// Try to wait for the section to be created.
	return new Promise(function(resolve, reject) {
	setTimeout(resolve);
	});
	}

	// Save the scroller position before freezing it.
	this.origScrollTop_ = this.scroller.scrollTop;
	this.fire('freeze-scroll', true);

	// Freeze the section's height so its card can be removed from the flow.
	section.setFrozen(true);

	this.currentAnimation_ = section.animateExpand(this.scroller);

	return this.currentAnimation_.finished
	.then(
	() => {
	this.finishedExpanding_(section);
	},
	() => {
	// The animation was canceled; restore the section and scroll
	// position.
	section.setFrozen(false);
	this.scroller.scrollTop = this.origScrollTop_;
	})
	.then(() => {
	this.fire('freeze-scroll', false);
	this.currentAnimation_ = null;
	});
	},

	/** @private */
	finishedExpanding_: function(section) {
	// Hide other sections and scroll to the top of the subpage.
	this.classList.add('showing-subpage');
	this.toggleOtherSectionsHidden_(section.section, true);
	this.scroller.scrollTop = 0;
	section.setFrozen(false);

	// Notify that the page is fully expanded.
	this.fire('subpage-expand');
	},

	/**
	* Animates the card in \|section\|, collapsing it back into its section.
	* @param {!SettingsSectionElement} section
	* @return {!Promise} Resolved when the transition is finished or canceled.
	*/
	collapseSection_: function(section) {
	assert(this.scroller);
	assert(section.classList.contains('expanded'));

	// Don't animate the collapse if we are transitioning between Basic/Advanced
	// and About, since the section won't be visible.
	const needAnimate =
	settings.routes.ABOUT.contains(settings.getCurrentRoute()) ==
	(section.domHost.tagName == 'SETTINGS-ABOUT-PAGE');

	// Animate the collapse if the section knows the original height, except
	// when switching between Basic/Advanced and About.
	const shouldAnimateCollapse = needAnimate && section.canAnimateCollapse();
	if (shouldAnimateCollapse) {
	this.fire('freeze-scroll', true);
	// Do the initial collapse setup, which takes the section out of the flow,
	// before showing everything.
	section.setUpAnimateCollapse(this.scroller);
	} else {
	section.classList.remove('expanded');
	}

	// Show everything.
	this.toggleOtherSectionsHidden_(section.section, false);
	this.classList.remove('showing-subpage');

	if (!shouldAnimateCollapse) {
	// Finish by restoring the section into the page.
	section.setFrozen(false);
	return Promise.resolve();
	}

	// Play the actual collapse animation.
	return new Promise((resolve, reject) => {
	// Wait for the other sections to show up so we can scroll properly.
	setTimeout(() => {
	const newSection = settings.getCurrentRoute().section &&
	this.getSection(settings.getCurrentRoute().section);

	// Scroll to the new section or the original position.
	if (newSection && !settings.lastRouteChangeWasPopstate() &&
	!settings.getCurrentRoute().isSubpage()) {
	newSection.scrollIntoView();
	} else {
	this.scroller.scrollTop = this.origScrollTop_;
	}

	this.currentAnimation_ = section.animateCollapse(
	/** @type {!HTMLElement} */ (this.scroller));

	this.currentAnimation_.finished
	.catch(() => {
	// The collapse was canceled, so the page is showing a subpage
	// still.
	this.fire('subpage-expand');
	})
	.then(() => {
	// Clean up after the animation succeeds or cancels.
	section.setFrozen(false);
	section.classList.remove('collapsing');
	this.fire('freeze-scroll', false);
	this.currentAnimation_ = null;
	resolve();
	});
	});
	});
	},

	/**
	* Hides or unhides the sections not being expanded.
	* @param {string} sectionName The section to keep visible.
	* @param {boolean} hidden Whether the sections should be hidden.
	* @private
	*/
	toggleOtherSectionsHidden_: function(sectionName, hidden) {
	const sections =
	Polymer.dom(this.root).querySelectorAll('settings-section');
	for (let i = 0; i < sections.length; i++)
	sections[i].hidden = hidden && (sections[i].section != sectionName);
	},

	/**
	* Helper function to get a section from the local DOM.
	* @param {string} section Section name of the element to get.
	* @return {?SettingsSectionElement}
	*/
	getSection: function(section) {
	if (!section)
	return null;
	return /** @type {?SettingsSectionElement} */ (
	this.$$('settings-section[section="' + section + '"]'));
	},
	};

	/** @polymerBehavior */
	const MainPageBehavior = [
	settings.RouteObserverBehavior,
	MainPageBehaviorImpl,
	];