[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 f9afe10053f9bbe4649a97a3c3b9115cdebe440d..7833f6e4582d19c3996d6f21e75a6eefc47eb624 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -118,6 +118,49 @@ Polymer({
         newRoute.page == 'advanced';
 
     this.style.height = isSubpage ? '100%' : '';
+
+    /* Wait for the dom-if changes prior to calculating the overflow padding. */

[Dan Beam, 2016/07/06 15:25:36]

// Use a 1-line comment for implementation comments.

https://google.github.io/styleguide/javascriptguide.xml#Comments

[dschuyler, 2016/07/06 21:45:05]

Done.

+    this.async(function() {
+      this.$.overscroll.style.paddingBottom =
+          (this.parentNode.scrollHeight - this.lastSettingsElementHeight_()) +
+          'px';
+    });
+  },
+
+  /**
+   * Return the height of the last item in the settings content area. 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
+   */
+  lastSettingsElementHeight_: function() {
+    if (!this.currentRoute || this.currentRoute.subpage.length != 0 ||
+        this.showAboutPage_) {

[Dan Beam, 2016/07/06 15:25:36]

what is this logic trying to derive?

[dschuyler, 2016/07/06 21:45:05]

I renamed and reworked this a bit to make it
clearer (and work better).

Done.

+      return 0;
+    }
+
+    /**
+     * @param {Element} element
+     * @return {number}
+     */
+    function calcHeight(element) {
+      var style = getComputedStyle(element);
+      return element.offsetHeight + parseFloat(style.marginTop) +
+          parseFloat(style.marginBottom);
+    }
+
+    if (this.showAdvancedPage_) {
+      var sections = this.$$('settings-advanced-page').$$(
+          '[data-page=advanced]').querySelectorAll('settings-section');
+      return calcHeight(sections[sections.length - 1]);
+    }
+
+    var toggleContainer = this.$$('#toggleContainer');
+    if (toggleContainer)
+      return calcHeight(toggleContainer);
+
+    return 0;
   },
 
   /** @private */