MD Settings: Ensure iron-lists are populated and sized correctly.

ui/webui/resources/cr_elements/cr_scrollable_behavior.js

 // Copyright 2016 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 Behavior for scrollable containers with <iron-list>.
  *
  * Any containers with the 'scrollable' attribute set will have the following
  * classes toggled appropriately: can-scroll, is-scrolled, scrolled-to-bottom.
  * These classes are used to style the container div and list elements
@@ skipping 47 matching lines @@
           'scroll', this.updateScrollEvent_.bind(this));
     }
   },
 
   /**
    * Called any time the contents of a scrollable container may have changed.
    * This ensures that the <iron-list> contents of dynamically sized
    * containers are resized correctly.
    */
   updateScrollableContents() {
-    let nodeList = this.root.querySelectorAll('[scrollable] iron-list');
-    // Use setTimeout to avoid initial render / sizing issues.
-    let intervalId = setInterval(function() {
-      let unreadyNodes = [];
-      for (let node of nodeList) {
-        if (node.parentNode.scrollHeight == 0) {
-          unreadyNodes.push(node);
-          continue;
-        }
-        let ironList = /** @type {!IronListElement} */ (node);
-        ironList.notifyResize();
-      }
-      if (unreadyNodes.length == 0)
-        clearInterval(intervalId);
-      else
-        nodeList = unreadyNodes;
-    }, 10);
+    this.async(function() {
+      let lists = this.root.querySelectorAll('[scrollable] iron-list');
+      for (list of lists)
+        list.fire('iron-resize');
+    }.bind(this));

[stevenjb, 2016/10/24 21:35:35]

Assuming this works, then sweet, lgtm! See comment in issue.

[dpapad, 2016/10/24 22:24:34]

Yes, the bind() call works as expected.

   },
 
   /**
    * Event wrapper for updateScroll_.
    * @param {!Event} event
    * @private
    */
   updateScrollEvent_(event) {
     let scrollable = /** @type {!HTMLElement} */ (event.target);
     this.updateScroll_(scrollable);
   },
 
   /**
    * This gets called once intially and any time a scrollable container scrolls.
    * @param {!HTMLElement} scrollable
    * @private
    */
   updateScroll_(scrollable) {
     scrollable.classList.toggle(
         'can-scroll', scrollable.clientHeight < scrollable.scrollHeight);
     scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0);
     scrollable.classList.toggle(
         'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >=
             scrollable.scrollHeight);
   },
 };