[MD settings] end of page padding in content area

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 254f2614a20cbdb195c39564ef9c5b7137b97d2e..00db0baacba5f5ea4964e839bef03d6fc1787381 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -123,6 +123,53 @@ Polymer({
         newRoute.page == 'advanced';
 
     this.style.height = isSubpage ? '100%' : '';
+
+    // Wait for the dom-if changes prior to calculating the overflow padding.
+    this.async(function() {
+      this.$.overscroll.style.paddingBottom = this.overscrollHeight_() + 'px';

[michaelpg, 2016/07/07 20:09:38]

should this be floored at 0?

[dschuyler, 2016/07/20 20:44:20]

I added an assert in calcHeight instead.

+    });
+  },
+
+  /**
+   * Return the height that the over scroll padding should be set to.
+   * This is used to determine how much padding to apply to the end of the
+   * content so that the last element may align with the top of the content
+   * area.
+   * @return {number}
+   * @private
+   */
+  overscrollHeight_: function() {
+    if (!this.currentRoute || this.currentRoute.subpage.length != 0 ||
+        this.showAboutPage_) {
+      return 0;
+    }
+
+    /**
+     * @param {!Element} element
+     * @return {number}
+     */
+    function calcHeight(scrollHeight, element) {
+      var style = getComputedStyle(element);
+      return scrollHeight - element.offsetHeight +
+          parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+    }
+
+    var scrollHeight = this.parentNode.scrollHeight;
+
+    if (this.showAdvancedPage_) {
+      var sections = this.$$('settings-advanced-page').$$(
+          '[data-page=advanced]').querySelectorAll('settings-section');
+      var lastSection = sections[sections.length - 1];

[michaelpg, 2016/07/07 20:09:38]

seems overly complicated:

this.$$('settings-advanced-page').$$('settings-section:last-of-type')

[dschuyler, 2016/07/20 20:44:20]

Done.

+      // |lastSection| may be null in unit tests.
+      if (lastSection)
+        return calcHeight(scrollHeight, lastSection);
+    }
+
+    var toggleContainer = this.$$('#toggleContainer');
+    if (toggleContainer)
+      return calcHeight(scrollHeight, toggleContainer);
+
+    return 0;
   },
 
   /** @private */