Show Pages in chrome://md-settings

chrome/browser/resources/settings/settings_main/settings_main.css

 /* 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. */
 
 :host {
   background-color: rgb(219, 222, 224);
   color: black;
   display: block;
 }
 
 #outer {
   box-sizing: border-box;
   height: 100%;
   overflow: auto;
   padding-top: 5px;
 }
 
 paper-shadow {
   background-color: white;
   margin: 0 20px;
 }
 
 ::content core-icon-button {
   position: absolute;
 }
+
+#pageContainer {
+  transition: height 300ms ease-out;

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

When does this transition happen? Is it due to different pages sliding in and
changing the inherited height of the container?

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

Removed. (yes)

+}
+
+#pageContainer > * {
+  /* This prevents the page from taking up the entire container, which

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

Why is the page taking up the entire container to begin with? I thought the
other file said that it was NOT taking up the whole container?

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

I'll clarify in the comments. Explanation follows but it's a lot. Maybe I'll
write up a doc and show it to the Polymer folks.

Initially the container height is 0 since its children (the pages) are position:
absolute, meaning the children don't resize the parent. We show a page and set
the container's height to the page's height.

Because all the pages are bottom: 0, they resize to fit their parent (the
core-animated-pages). So core-animated-pages doesn't resize automatically, but
the pages will fill whatever size we set the container to.

When we hide a page and make another page visible, the newly visible page fills
the size of the container so it's the same size as the previous page. Setting
bottom: initial prevents the page from filling the container when the container
is larger than the page, so we don't have extra space at the bottom.

We could clear the parent container's height before asking the page for its
height, but then the smooth transition doesn't play.

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

Removed.

+   * would prevent us from resizing the container to fit the page. */
+  bottom: initial;
+}