Settings WebUI: settings-startup-urls-page, fire iron-resize when the

scrollHeight is 1px and another when the scrollHeight is more than 1px

Also fixed the following edge case.

1. Two tabs are open with chrome://settings.
2. The background tab has not been viewed.
3. In the active tab, cycle through the on startup radios.
4. Then choose "continue where you left off".
5. Make the background tab active.
6. Change the on startup setting to show the specific pages list.

The issue is the iron-list render code is running when the physical
height is 1px. Initially the iron-list has zero physical items. It
creates a minimum default of 3 physical items. After the render is
completed, the scrollHeight is updated to the correct value and more
physical items need to be created. This is done with a second
iron-resize.

Bug: 987893
Change-Id: I3a638ed8320e776a65a5b3b783514cdfecb47419
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1758219
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#688343}

ui/webui/resources/cr_elements/cr_scrollable_behavior.js

@@ -79,30 +79,46 @@ const CrScrollableBehavior = {
 
     this.requestUpdateScroll();
 
-    let nodeList = this.root.querySelectorAll('[scrollable] iron-list');
+    const nodeList = this.root.querySelectorAll('[scrollable] iron-list');
     if (!nodeList.length) {
       return;
     }
 
+    let nodesToResize = Array.from(nodeList).map(node => ({
+                                                   node: node,
+                                                   lastScrollHeight: 0,
+                                                 }));
     // Use setInterval to avoid initial render / sizing issues.
-    this.intervalId_ = window.setInterval(function() {
-      const unreadyNodes = [];
-      for (let i = 0; i < nodeList.length; i++) {
-        const node = nodeList[i];
-        if (node.parentNode.scrollHeight == 0) {
-          unreadyNodes.push(node);
-          continue;
+    this.intervalId_ = window.setInterval(() => {
+      const checkAgain = [];
+      nodesToResize.forEach(({node, lastScrollHeight}) => {
+        const scrollHeight = node.parentNode.scrollHeight;
+        // A hidden scroll-container has a height of 0. When not hidden, it has
+        // a min-height of 1px and the iron-list needs a resize to show the
+        // initial items and update the |scrollHeight|. The initial item count
+        // is determined by the |scrollHeight|. A scrollHeight of 1px will
+        // result in the minimum default item count (currently 3). After the
+        // |scrollHeight| is updated to be greater than 1px, another resize is
+        // needed to correctly calculate the number of physical iron-list items
+        // to render.
+        if (scrollHeight != lastScrollHeight) {
+          const ironList = /** @type {!IronListElement} */ (node);
+          ironList.notifyResize();
         }
-        const ironList = /** @type {!IronListElement} */ (node);
-        ironList.notifyResize();
-      }
-      if (unreadyNodes.length == 0) {
+        if (scrollHeight <= 1) {
+          checkAgain.push({
+            node: node,
+            lastScrollHeight: scrollHeight,
+          });
+        }
+      });
+      if (checkAgain.length == 0) {
         window.clearInterval(this.intervalId_);
         this.intervalId_ = null;
       } else {
-        nodeList = unreadyNodes;
+        nodesToResize = checkAgain;
       }
-    }.bind(this), 10);
+    }, 10);
   },
 
   /**