Show Pages in chrome://md-settings

chrome/browser/resources/settings/settings_main/settings_main.js

Index: chrome/browser/resources/settings/settings_main/settings_main.js
diff --git a/chrome/browser/resources/settings/settings_main/settings_main.js b/chrome/browser/resources/settings/settings_main/settings_main.js
index 582cfb479449cc78c056e188355e2cedabf33dba..dc7c897d8b5dbc20049714e72cac8b1e99e0a465 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -53,13 +53,21 @@ Polymer('cr-settings-main', {
 
   /** @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.

+    }
   },
 
   /**
@@ -76,6 +84,18 @@ Polymer('cr-settings-main', {
   },
 
   /**
+   * 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
@@ -84,4 +104,14 @@ Polymer('cr-settings-main', {
     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);
+  },
 });