New SELECT Popup: Delay to create internal OPTION elements if there are many items.

Source/web/resources/listPicker.js

 "use strict";
 // Copyright (c) 2014 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.
 
 var global = {
     argumentsReceived: false,
     params: null,
     picker: null
 };
@@ skipping 27 matching lines @@
  * @constructor
  * @param {!Element} element
  * @param {!Object} config
  */
 function ListPicker(element, config) {
     Picker.call(this, element, config);
     window.pagePopupController.selectFontsFromOwnerDocument(document);
     this._selectElement = createElement("select");
     this._selectElement.size = 20;
     this._element.appendChild(this._selectElement);
+    this._delayedChildrenConfig = null;
+    this._delayedChildrenConfigIndex = 0;
     this._layout();
     this._selectElement.addEventListener("mouseup", this._handleMouseUp.bind(this), false);
     this._selectElement.addEventListener("touchstart", this._handleTouchStart.bind(this), false);
     this._selectElement.addEventListener("keydown", this._handleKeyDown.bind(this), false);
     this._selectElement.addEventListener("change", this._handleChange.bind(this), false);
     window.addEventListener("message", this._handleWindowMessage.bind(this), false);
     window.addEventListener("mousemove", this._handleWindowMouseMove.bind(this), false);
     window.addEventListener("touchmove", this._handleWindowTouchMove.bind(this), false);
     window.addEventListener("touchend", this._handleWindowTouchEnd.bind(this), false);
     this.lastMousePositionX = Infinity;
@@ skipping 187 matching lines @@
         optionUnderMouse = elementUnderMouse && elementUnderMouse.closest("option");
     }
     if (optionUnderMouse)
         optionUnderMouse.selected = true;
     else
         this._selectElement.value = oldValue;
     this._selectElement.scrollTop = scrollPosition;
     this.dispatchEvent("didUpdate");
 };
 
+ListPicker.DelayedLayoutThreshold = 1000;
+
 /**
  * @param {!Element} parent Select element or optgroup element.
  * @param {!Object} config
  */
 ListPicker.prototype._updateChildren = function(parent, config) {
     var outOfDateIndex = 0;
     var fragment = null;
     var inGroup = parent.tagName === "OPTGROUP";
-    for (var i = 0; i < config.children.length; ++i) {
+    var lastListIndex = -1;
+    var limit = Math.max(this._config.selectedIndex, ListPicker.DelayedLayoutThreshold);
+    var i;
+    for (i = 0; i < config.children.length; ++i) {
+        if (!inGroup && lastListIndex >= limit)
+            break;
         var childConfig = config.children[i];
         var item = this._findReusableItem(parent, childConfig, outOfDateIndex) || this._createItemElement(childConfig);
         this._configureItem(item, childConfig, inGroup);
+        lastListIndex = item.value ? Number(item.value) : -1;
         if (outOfDateIndex < parent.children.length) {
             parent.insertBefore(item, parent.children[outOfDateIndex]);
         } else {
             if (!fragment)
                 fragment = document.createDocumentFragment();
             fragment.appendChild(item);
         }
         outOfDateIndex++;
     }
     if (fragment) {
         parent.appendChild(fragment);
+    } else {
+        var unused = parent.children.length - outOfDateIndex;
+        for (var j = 0; j < unused; j++) {
+            parent.removeChild(parent.lastElementChild);
+        }
+    }
+    if (i < config.children.length) {
+        // We don't bind |config.children| and |i| to _updateChildrenLater
+        // because config.children can get invalid before _updateChildrenLater
+        // is called.
+        this._delayedChildrenConfig = config.children;
+        this._delayedChildrenConfigIndex = i;
+        requestAnimationFrame(this._updateChildrenLater.bind(this));
+    }
+};
+
+ListPicker.prototype._updateChildrenLater = function(timeStamp) {
+    if (!this._delayedChildrenConfig)
         return;
+    var startIndex = this._delayedChildrenConfigIndex;
+    for (; this._delayedChildrenConfigIndex < this._delayedChildrenConfig.length && this._delayedChildrenConfigIndex - startIndex < ListPicker.DelayedLayoutThreshold; ++this._delayedChildrenConfigIndex) {
+        var childConfig = this._delayedChildrenConfig[this._delayedChildrenConfigIndex];
+        var item = this._createItemElement(childConfig);
+        this._configureItem(item, childConfig, false);
+        this._selectElement.appendChild(item);
     }
-    var unused = parent.children.length - outOfDateIndex;
-    for (var i = 0; i < unused; i++) {
-        parent.removeChild(parent.lastElementChild);
-    }
+    if (this._delayedChildrenConfigIndex < this._delayedChildrenConfig.length)
+        requestAnimationFrame(this._updateChildrenLater.bind(this));
+    else
+        this._delayedChildrenConfig = null;
+    this._selectElement.classList.add("wrap");
 };
 
 ListPicker.prototype._findReusableItem = function(parent, config, startIndex) {
     if (startIndex >= parent.children.length)
         return null;
     var tagName = "OPTION";
     if (config.type === "optgroup")
         tagName = "OPTGROUP";
     else if (config.type === "separator")
         tagName = "HR";
@@ skipping 75 matching lines @@
     }
     this._applyItemStyle(element, config.style);
 };
 
 if (window.dialogArguments) {
     initialize(dialogArguments);
 } else {
     window.addEventListener("message", handleMessage, false);
     window.setTimeout(handleArgumentsTimeout, 1000);
 }