MD Settings: user list fixes

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 23 matching lines @@
  * will not be sized correctly.
  */
 
 /** @polymerBehavior */
 var CrScrollableBehavior = {
 
   /** @private {number|null} */
   intervalId_: null,
 
   ready: function() {
-    var scrollableElements = this.root.querySelectorAll('[scrollable]');
-
-    // Setup the intial scrolling related classes for each scrollable container.
-    requestAnimationFrame(function() {
-      for (var i = 0; i < scrollableElements.length; i++)
-        this.updateScroll_(scrollableElements[i]);
-    }.bind(this));
+    this.requestUpdateScroll();
 
     // Listen to the 'scroll' event for each scrollable container.
+    var scrollableElements = this.root.querySelectorAll('[scrollable]');
     for (var i = 0; i < scrollableElements.length; i++) {
       scrollableElements[i].addEventListener(
           'scroll', this.updateScrollEvent_.bind(this));
     }
   },
 
   detached: function() {
     if (this.intervalId_ !== null)
       clearInterval(this.intervalId_);
   },
 
   /**
    * 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: function() {
     if (this.intervalId_ !== null)
       return;  // notifyResize is arelady in progress.
 
+    this.requestUpdateScroll();
+
     var nodeList = this.root.querySelectorAll('[scrollable] iron-list');
+    if (!nodeList.length)
+      return;
+
     // Use setInterval to avoid initial render / sizing issues.
     this.intervalId_ = window.setInterval(function() {
       var unreadyNodes = [];
       for (var i = 0; i < nodeList.length; i++) {
         var node = nodeList[i];
         if (node.parentNode.scrollHeight == 0) {
           unreadyNodes.push(node);
           continue;
         }
         var ironList = /** @type {!IronListElement} */ (node);
         ironList.notifyResize();
       }
       if (unreadyNodes.length == 0) {
         window.clearInterval(this.intervalId_);
         this.intervalId_ = null;
       } else {
         nodeList = unreadyNodes;
       }
     }.bind(this), 10);
   },
 
+  /**
+   * Setup the intial scrolling related classes for each scrollable container.
+   * Called from ready() and updateScrollableContents(). May also be called
+   * directly when the contents change (e.g. when not using iron-list).
+   */
+  requestUpdateScroll: function() {
+    requestAnimationFrame(function() {
+      var scrollableElements = this.root.querySelectorAll('[scrollable]');
+      for (var i = 0; i < scrollableElements.length; i++)
+        this.updateScroll_(/** @type {!HTMLElement} */(scrollableElements[i]));
+    }.bind(this));
+  },
+
   /** @param {!IronListElement} list */
   saveScroll: function(list) {
     // Store a FIFO of saved scroll positions so that multiple updates in a
     // frame are applied correctly. Specifically we need to track when '0' is
     // saved (but not apply it), and still handle patterns like [30, 0, 32].
     list.savedScrollTops = list.savedScrollTops || [];
     list.savedScrollTops.push(list.scrollTarget.scrollTop);
   },
 
   /** @param {!IronListElement} list */
@@ skipping 24 matching lines @@
    */
   updateScroll_: function(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);
   },
 };