Settings: Implement sub-subpages, and clean up some animations.

chrome/browser/resources/settings/settings_page/settings_animated_pages.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.
 
 /**
  * @fileoverview
  * 'cr-settings-animated-pages' is a container for a page and animated subpages.
  * It provides a set of common behaviors and animations. Notably, it provides
  * an 'inSubpage' property that indicates when a subpage is active.
  *
  * Example:
  *
  *    <cr-settings-animated-pages>
  *      <!-- Insert your section controls here -->
  *    </cr-settings-animated-pages>
  *
  * @group Chrome Settings Elements
  * @element cr-settings-animated-pages
  */
 Polymer({
   is: 'cr-settings-animated-pages',
 
   properties: {
-    /**
-     * Corresponds to a page id.
-     */
-    selectedPage: {
-      type: String,
-      value: 'main',
-    },
-
-    entryAnimation: {
-      type: String,
-      value: 'next-page-enter-animation',
-    },
-
-    exitAnimation: {
-      type: String,
-      value: 'next-page-exit-animation',
-    },
-
     inSubpage: {
       type: Boolean,
       notify: true,
       observer: 'inSubpageChanged_',
     },
   },
 
   created: function() {
     this.history_ = ['main'];
   },
 
+  /** @private */
   inSubpageChanged_: function() {
     this.classList.toggle('in-subpage', this.inSubpage);
   },
 
   navigateTo: function(page) {
+    if (this.inSubpage) {
+      this.$.animatedPages.exitAnimation = 'slide-left-animation';
+      this.$.animatedPages.entryAnimation = 'slide-from-right-animation';
+    } else {
+      this.$.animatedPages.exitAnimation = 'fade-out-animation';
+      this.$.animatedPages.entryAnimation = 'fade-in-animation';
+    }
+
     this.history_.push(page);
     this.inSubpage = true;
-    this.selectedPage = page;
+
+    this.$.animatedPages.selected = page;
   },
 
   back: function() {
     this.history_.pop();
     this.inSubpage = this.history_.length > 1;
-    this.selectedPage = this.history_.slice(-1)[0];
+    var page = this.history_.slice(-1)[0];

[Dan Beam, 2015/08/12 21:38:04]

why can't this just be inlined?

[tommycli, 2015/08/12 22:11:57]

Done.

+
+    if (this.inSubpage) {
+      this.$.animatedPages.exitAnimation = 'slide-right-animation';
+      this.$.animatedPages.entryAnimation = 'slide-from-left-animation';
+    } else {
+      this.$.animatedPages.exitAnimation = 'fade-out-animation';
+      this.$.animatedPages.entryAnimation = 'fade-in-animation';
+    }
+
+    this.$.animatedPages.selected = page;
   },
 });