MD Settings: Flush templates in settings-main before checking

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

 // 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.
 
 /**
  * @fileoverview
  * 'settings-main' displays the selected settings page.
  */
 Polymer({
   is: 'settings-main',
@@ skipping 112 matching lines @@
         about: false,
         basic: newRoute.page == 'basic' || !this.inSubpage_,
         advanced: newRoute.page == 'advanced' ||
             (!this.inSubpage_ && this.advancedToggleExpanded_),
       };
 
       if (this.showPages_.advanced)
         this.advancedToggleExpanded_ = true;
     }
 
-    // Wait for the dom-if changes prior to calculating the overflow padding.
+    // Wait for any other changes prior to calculating the overflow padding.
     this.async(function() {
       this.$.overscroll.style.paddingBottom = this.overscrollHeight_() + 'px';
     });
   },
 
   /**
    * 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.showPages_.about) {
       return 0;
     }
 
+    // Ensure any dom-if reflects the current properties.
+    Polymer.dom.flush();

[Dan Beam, 2016/07/29 00:11:45]

:_(

[michaelpg, 2016/07/29 17:27:15]

there was a ton of discussion about this, but we can talk about it in the
stand-up if you like

but, some fun facts:

* "Insert, append, and remove operations are transacted lazily in certain cases
for performance. In order to interrogate the DOM (for example, offsetHeight,
getComputedStyle, etc.) immediately after one of these operations, call
Polymer.dom.flush() first"

* "It should be used sparingly as calling it frequently can negatively impact
performance since work is often deferred for efficiency. Calling
`Polymer.dom.flush()` is useful, for example, when an element has to measure
itself and is unsure about the state of its internal or compoased DOM."

* dom-if has a render() function..... which just calls Polymer.dom.flush()

[Dan Beam, 2016/07/29 18:28:39]

I didn't say it was wrong, I just said I was said to see it

[Dan Beam, 2016/07/29 18:28:54]

I was just sad** to see it

+
     /**
      * @param {!Element} element
      * @return {number}
      */
     var calcHeight = function(element) {
       var style = getComputedStyle(element);
       var height = this.parentNode.scrollHeight - element.offsetHeight +
           parseFloat(style.marginTop) + parseFloat(style.marginBottom);
       assert(height >= 0);
       return height;
@@ skipping 59 matching lines @@
               return;
             }
 
             this.toolbarSpinnerActive = false;
             this.showNoResultsFound_ =
                 !request.isSame('') && !request.didFindMatches();
           }.bind(this));
     }.bind(this), 0);
   },
 });