[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 11cd9dd684eebba61b2ff7ec7ffed466e63f3575..a7eb43682a5e56e616e7d9855adef45c822a378d 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -63,6 +63,12 @@ Polymer({
     document.addEventListener('toggle-advanced-page', function(e) {
       this.showAdvancedPage_ = e.detail;
       this.isAdvancedMenuOpen_ = e.detail;
+      this.currentRoute = {

[Dan Beam, 2016/06/23 02:48:21]

why is this necessary?

[dschuyler, 2016/06/23 18:33:10]

The route was not being correctly set.
This could be moved to a separate CL.
I'll update the CL notes to mention that
this is here.

+        page: this.isAdvancedMenuOpen_ ? 'advanced' : 'basic',
+        section: '',
+        subpage: [],
+        url: '',
+      };
       if (this.showAdvancedPage_) {
         scrollWhenReady(
             function() {
@@ -102,6 +108,42 @@ Polymer({
         newRoute.page == 'advanced';
 
     this.style.height = isSubpage ? '100%' : '';
+
+    this.$.endOfPageSpace.style.paddingBottom =
+        (this.parentNode.scrollHeight - this.lastSettingsElementHeight_()) +
+        'px';
+  },
+
+  /**
+   * Height of the element including margin sizes.
+   * @param {Element} element
+   * @return {number}
+   * @private
+   */
+  calcHeight_: function(element) {
+    var style = getComputedStyle(element);
+    return element.offsetHeight + parseFloat(style.marginTop) +
+        parseFloat(style.marginBottom);
+  },
+
+  /**
+   * 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() {

[Dan Beam, 2016/06/23 02:48:21]

can calcHeight_ just live inside here instead as a pure function, i.e.

function calcHeight() {
}

[dschuyler, 2016/06/23 18:33:10]

Done.

+    Polymer.dom.flush();
+    if (!this.currentRoute || this.currentRoute.subpage.length != 0 ||
+        this.showAboutPage_)

[Dan Beam, 2016/06/23 02:48:21]

all these conditionals are more than 1 line in the conditional or the body, so
they should all have curlies

[dschuyler, 2016/06/23 18:33:10]

Done.

+      return 0;
+    if (this.showAdvancedPage_)
+      return this.calcHeight_(this.$$('settings-advanced-page').$$(
+                              '[section=reset]'));
+    if (this.$$('#toggleContainer'))

[Dan Beam, 2016/06/23 02:48:21]

don't query this twice, i.e.

var toggleContainer = this.$$('#toggleContainer');
if (toggleContainer)
  return calcHeight(toggleContainer);

[dschuyler, 2016/06/23 18:33:10]

Done.

+      return this.calcHeight_(this.$$('#toggleContainer'));
+    return 0;
   },
 
   /** @private */