MD Settings: Refactor RoutableBehavior into MainPageBehavior

This merges RoutableBehavior into MainPageBehavior since there's no clear
separation between them anymore, and "Routable" is a weird name.

This is a mechanical change only. Other than merging 2 behaviors into 1 and making a couple functions @private, there's no logical changes, and the behavior should be identical.

BUG=589681
R=dschuyler@chromium.org
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2211303004
Cr-Commit-Position: refs/heads/master@{#410433}

chrome/browser/resources/settings/about_page/about_page.js

@@ -9,7 +9,7 @@
 Polymer({
   is: 'settings-about-page',
 
-  behaviors: [WebUIListenerBehavior, RoutableBehavior, I18nBehavior],
+  behaviors: [WebUIListenerBehavior, MainPageBehavior, I18nBehavior],
 
   properties: {
     /** @private {?UpdateStatusChangedEvent} */

chrome/browser/resources/settings/advanced_page/advanced_page.js

@@ -10,12 +10,10 @@
 Polymer({
   is: 'settings-advanced-page',
 
-  behaviors: [SettingsPageVisibility, RoutableBehavior],
+  behaviors: [SettingsPageVisibility, MainPageBehavior],
 
   properties: {
-    /**
-     * Preferences state.
-     */
+    /** Preferences state. */
     prefs: {
       type: Object,
       notify: true,

chrome/browser/resources/settings/advanced_page/compiled_resources2.gyp

@@ -9,7 +9,6 @@
         '../compiled_resources2.gyp:route',
         '../settings_page/compiled_resources2.gyp:main_page_behavior',
         '../settings_page/compiled_resources2.gyp:settings_page_visibility',
-        '../settings_page/compiled_resources2.gyp:transition_behavior',
         '../system_page/compiled_resources2.gyp:system_page',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],

chrome/browser/resources/settings/basic_page/basic_page.js

@@ -9,12 +9,10 @@
 Polymer({
   is: 'settings-basic-page',
 
-  behaviors: [SettingsPageVisibility, RoutableBehavior],
+  behaviors: [SettingsPageVisibility, MainPageBehavior],
 
   properties: {
-    /**
-     * Preferences state.
-     */
+    /** Preferences state. */
     prefs: {
       type: Object,
       notify: true,

chrome/browser/resources/settings/basic_page/compiled_resources2.gyp

@@ -10,7 +10,6 @@
         '../compiled_resources2.gyp:route',
         '../settings_page/compiled_resources2.gyp:main_page_behavior',
         '../settings_page/compiled_resources2.gyp:settings_page_visibility',
-        '../settings_page/compiled_resources2.gyp:transition_behavior',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },

chrome/browser/resources/settings/settings_page/compiled_resources2.gyp

@@ -9,7 +9,6 @@
         '../compiled_resources2.gyp:route',
         'settings_section',
         'transition_behavior',
-        '<(EXTERNS_GYP):settings_private',
         '<(EXTERNS_GYP):web_animations',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
       ],

chrome/browser/resources/settings/settings_page/main_page_behavior.js

@@ -20,10 +20,10 @@ function doWhenReady(readyTest, readyCallback) {
 }
 
 /**
- * Provides animations to expand and collapse individual sections in a page.
- * Expanded sections take up the full height of the container. At most one
- * section should be expanded at any given time.
- * @polymerBehavior Polymer.MainPageBehavior
+ * 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
  */
 var MainPageBehaviorImpl = {
   /** @type {?HTMLElement} The scrolling container. */
@@ -38,23 +38,49 @@ var MainPageBehaviorImpl = {
   },
 
   /**
-   * 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
+   * @param {!settings.Route} newRoute
+   * @param {!settings.Route} oldRoute
    */
-  toggleOtherSectionsHidden_: function(sectionName, hidden) {
-    var sections = Polymer.dom(this.root).querySelectorAll(
-        'settings-section');
-    for (var section of sections)
-      section.hidden = hidden && (section.section != sectionName);
+  currentRouteChanged: function(newRoute, oldRoute) {
+    var newRouteIsSubpage = newRoute && newRoute.subpage.length;
+    var oldRouteIsSubpage = oldRoute && oldRoute.subpage.length;
+
+    if (!oldRoute && newRouteIsSubpage) {
+      // Allow the page to load before expanding the section. TODO(michaelpg):
+      // Time this better when refactoring settings-animated-pages.
+      setTimeout(function() {
+        var section = this.getSection_(newRoute.section);
+        if (section)
+          this.expandSection_(section);
+      }.bind(this));
+      return;
+    }
+
+    if (newRouteIsSubpage) {
+      if (!oldRouteIsSubpage || newRoute.section != oldRoute.section) {
+        var section = this.getSection_(newRoute.section);
+        if (section)
+          this.expandSection_(section);
+      }
+    } else {
+      if (oldRouteIsSubpage) {
+        var section = this.getSection_(oldRoute.section);
+        if (section)
+          this.collapseSection_(section);
+      }
+
+      // Scrolls to the section if this main page contains the route's section.
+      if (newRoute && newRoute.section && this.getSection_(newRoute.section))
+        this.scrollToSection_();
+    }
   },
 
   /**
    * Animates the card in |section|, expanding it to fill the page.
    * @param {!SettingsSectionElement} section
+   * @private
    */
-  expandSection: function(section) {
+  expandSection_: function(section) {
     // If another section's card is expanding, cancel that animation first.
     var expanding = this.$$('.expanding');
     if (expanding) {
@@ -71,7 +97,7 @@ var MainPageBehaviorImpl = {
         // When it resolves, collapse that section's card before expanding
         // this one.
         setTimeout(function() {
-          this.collapseSection(
+          this.collapseSection_(
               /** @type {!SettingsSectionElement} */(expanding));
           this.finishAnimation('section', function() {
             this.startExpandSection_(section);
@@ -128,11 +154,45 @@ var MainPageBehaviorImpl = {
     }.bind(this));
   },
 
+  /**
+   * Expands the card in |section| to fill the page.
+   * @param {!SettingsSectionElement} section
+   * @return {!Promise}
+   * @private
+   */
+  playExpandSection_: function(section) {
+    // We must be attached.
+    assert(this.scroller);
+
+    var promise;
+    var animationConfig = section.animateExpand(this.scroller);
+    if (animationConfig) {
+      promise = this.animateElement('section', animationConfig.card,
+          animationConfig.keyframes, animationConfig.options);
+    } else {
+      promise = Promise.resolve();
+    }
+
+    var finished;
+    promise.then(function() {
+      finished = true;
+      this.style.margin = 'auto';
+    }.bind(this), function() {
+      // The animation was canceled; catch the error and continue.
+      finished = false;
+    }).then(function() {
+      section.cleanUpAnimateExpand(finished);
+    });
+
+    return promise;
+  },
+
   /**
    * Animates the card in |section|, collapsing it back into its section.
    * @param {!SettingsSectionElement} section
+   * @private
    */
-  collapseSection: function(section) {
+  collapseSection_: function(section) {
     // If the section's card is still expanding, cancel the expand animation.
     if (section.classList.contains('expanding')) {
       if (this.animations['section']) {
@@ -141,7 +201,7 @@ var MainPageBehaviorImpl = {
         // The animation must have finished but its promise hasn't finished
         // resolving; try again asynchronously.
         this.async(function() {
-          this.collapseSection(section);
+          this.collapseSection_(section);
         });
       }
       return;
@@ -166,39 +226,6 @@ var MainPageBehaviorImpl = {
     }.bind(this));
   },
 
-  /**
-   * Expands the card in |section| to fill the page.
-   * @param {!SettingsSectionElement} section
-   * @return {!Promise}
-   * @private
-   */
-  playExpandSection_: function(section) {
-    // We must be attached.
-    assert(this.scroller);
-
-    var promise;
-    var animationConfig = section.animateExpand(this.scroller);
-    if (animationConfig) {
-      promise = this.animateElement('section', animationConfig.card,
-          animationConfig.keyframes, animationConfig.options);
-    } else {
-      promise = Promise.resolve();
-    }
-
-    var finished;
-    promise.then(function() {
-      finished = true;
-      this.style.margin = 'auto';
-    }.bind(this), function() {
-      // The animation was canceled; catch the error and continue.
-      finished = false;
-    }).then(function() {
-      section.cleanUpAnimateExpand(finished);
-    });
-
-    return promise;
-  },
-
   /**
    * Collapses the card in |section| back to its normal position.
    * @param {!SettingsSectionElement} section
@@ -228,21 +255,7 @@ var MainPageBehaviorImpl = {
     });
     return promise;
   },
-};
-
-
-/** @polymerBehavior */
-var MainPageBehavior = [
-  TransitionBehavior,
-  MainPageBehaviorImpl
-];
 
-
-/**
- * TODO(michaelpg): integrate slide animations.
- * @polymerBehavior RoutableBehavior
- */
-var RoutableBehaviorImpl = {
   /** @private */
   scrollToSection_: function() {
     doWhenReady(
@@ -256,39 +269,17 @@ var RoutableBehaviorImpl = {
         }.bind(this));
   },
 
-  /** @private */
-  currentRouteChanged: function(newRoute, oldRoute) {
-    var newRouteIsSubpage = newRoute && newRoute.subpage.length;
-    var oldRouteIsSubpage = oldRoute && oldRoute.subpage.length;
-
-    if (!oldRoute && newRouteIsSubpage) {
-      // Allow the page to load before expanding the section. TODO(michaelpg):
-      // Time this better when refactoring settings-animated-pages.
-      setTimeout(function() {
-        var section = this.getSection_(newRoute.section);
-        if (section)
-          this.expandSection(section);
-      }.bind(this));
-      return;
-    }
-
-    if (newRouteIsSubpage) {
-      if (!oldRouteIsSubpage || newRoute.section != oldRoute.section) {
-        var section = this.getSection_(newRoute.section);
-        if (section)
-          this.expandSection(section);
-      }
-    } else {
-      if (oldRouteIsSubpage) {
-        var section = this.getSection_(oldRoute.section);
-        if (section)
-          this.collapseSection(section);
-      }
-
-      // Scrolls to the section if this main page contains the route's section.
-      if (newRoute && newRoute.section && this.getSection_(newRoute.section))
-        this.scrollToSection_();
-    }
+  /**
+   * 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) {
+    var sections = Polymer.dom(this.root).querySelectorAll(
+        'settings-section');
+    for (var section of sections)
+      section.hidden = hidden && (section.section != sectionName);
   },
 
   /**
@@ -303,10 +294,9 @@ var RoutableBehaviorImpl = {
   },
 };
 
-
 /** @polymerBehavior */
-var RoutableBehavior = [
-  MainPageBehavior,
+var MainPageBehavior = [
   settings.RouteObserverBehavior,
-  RoutableBehaviorImpl
+  TransitionBehavior,
+  MainPageBehaviorImpl,
 ];