Show Pages in chrome://md-settings

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.
 
 /**
  * @fileoverview
  * 'cr-settings-main' displays the selected settings page.
  *
  * Example:
  *
@@ skipping 35 matching lines @@
     selectedPageId: '',
   },
 
   /** @override */
   created: function() {
     this.pages = [];
   },
 
   /** @override */
   ready: function() {
+    // Observe the core-animated-pages to keep this.pages in sync.
     var observer = new MutationObserver(this.pageContainerUpdated_.bind(this));
     observer.observe(this.$.pageContainer,
                      /** @type {MutationObserverInit} */ {
                        childList: true,
                      });
     this.pages = this.$.pageContainer.items;
-    this.ensureSelection_();
+
+    if (this.pages.length) {
+      this.ensureSelection_();
+      // Size the container once the selected page becomes visible.
+      this.async(function() {
+        this.sizeToPage_(this.$.pageContainer.selectedItem);
+      }.bind(this));

[Jeremy Klein, 2015/03/18 00:12:05]

this.async already binds to this:

https://www.polymer-project.org/0.5/docs/polymer/polymer.html#asyncmethod

[michaelpg, 2015/03/18 01:40:09]

Acknowledged.

+    }
   },
 
   /**
    * If no page is selected, selects the first page. This happens on load and
    * when a selected page is removed.
    *
    * @private
    */
   ensureSelection_: function() {
     if (!this.pages.length)
       return;
     if (this.selectedPageId == '')
       this.selectedPageId = this.pages[0].PAGE_ID;
   },
 
   /**
+   * Updates the height style for core-animated-pages using the page's

[Jeremy Klein, 2015/03/18 00:12:05]

Is this really necessary? Does the core-animated-pages require an explicit
height or something?

[michaelpg, 2015/03/18 01:40:09]

This was my attempt to keep <paper-shadow> outside of <core-animated-pages>.
Wrapping the contents of each page in a <paper-shadow> (we were already using a
<section>) makes the height stuff not necessary.

+   * scrollHeight.
+   *
+   * @param {HTMLElement} page
+   * @private
+   */
+  sizeToPage_: function(page) {
+    if (page)

[Kyle Horimoto, 2015/03/17 23:53:48]

When would page be falsey?

+      this.$.pageContainer.style.height = page.scrollHeight + 'px';

[Kyle Horimoto, 2015/03/17 23:53:48]

Can you add a comment explaining this? It's not clear to me what's going on.

+  },
+
+  /**
    * Updates the list of pages using the pages in core-animated-pages.
    *
    * @private
    */
   pageContainerUpdated_: function() {
     this.pages = this.$.pageContainer.items;
     this.ensureSelection_();
   },
+
+  /**
+   * Updates the height of the core-animated-pages. Necessary because the
+   * pages are position: absolute, so the container won't size to the page.

[Jeremy Klein, 2015/03/18 00:12:05]

It seems like the intended design here is to have the core-animated-pages choose
its own fixed height and then the pages size to it instead of the other way
around. It there any way we could keep that behavior without going against the
mocks? Maybe some of the demos at:

https://www.polymer-project.org/0.5/components/core-animated-pages/demo.html

have hints?

[michaelpg, 2015/03/18 00:18:00]

I can't find a demo where the actual height of the pages changes. I spoke with
ffu@ and he said this was tricky because of the way core-animated-pages is
built. I'll put together a simple demo of the problem and send that to the
Polymer guys who worked on this. Since this whole CL is basically that, I'll
close this for now. Thanks for the feedback!

+   *
+   * @private
+   */
+  pageTransitionPrepared_: function() {
+    this.sizeToPage_(this.$.pageContainer.selectedItem);
+  },
 });