New SELECT Popup: Very slow to open a popup with 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 25 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._layout();
-    this._selectElement.focus();
     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;
     this.lastMousePositionY = Infinity;
     this._selectionSetByMouseHover = false;
 
     this._trackingTouchId = null;
 
     this._handleWindowDidHide();
+    this._selectElement.focus();
+    this._selectElement.value = this._config.selectedIndex;
 }
 ListPicker.prototype = Object.create(Picker.prototype);
 
 ListPicker.prototype._handleWindowDidHide = function() {
     this._fixWindowSize();
     var selectedOption = this._selectElement.options[this._selectElement.selectedIndex];
     if (selectedOption)
         selectedOption.scrollIntoView(false);
     window.removeEventListener("didHide", this._handleWindowDidHideBound, false);
 };
@@ skipping 95 matching lines @@
         // to the owner element. We can handle most cases with the change
         // event. But we need to call setValue even when the selection hasn't
         // changed. So we call it here too. setValue will be called twice for
         // some key presses but it won't matter.
         window.pagePopupController.setValue(this._selectElement.value);
     }
 };
 
 ListPicker.prototype._fixWindowSize = function() {
     this._selectElement.style.height = "";
-    this._selectElement.size = 20;
     var maxHeight = this._selectElement.offsetHeight;
-    this._selectElement.style.height = "0";
-    var heightOutsideOfContent = this._selectElement.offsetHeight - this._selectElement.clientHeight;
+    // heightOutsideOfContent should be matched to border widths of the listbox
+    // SELECT. See listPicker.css and html.css.
+    var heightOutsideOfContent = 2;
     var noScrollHeight = Math.round(this._calculateScrollHeight() + heightOutsideOfContent);
     var desiredWindowHeight = noScrollHeight;
     var desiredWindowWidth = this._selectElement.offsetWidth;
     var expectingScrollbar = false;
     if (desiredWindowHeight > maxHeight) {
         desiredWindowHeight = maxHeight;
         // Setting overflow to auto does not increase width for the scrollbar
         // so we need to do it manually.
         desiredWindowWidth += getScrollbarWidth();
         expectingScrollbar = true;
@@ skipping 29 matching lines @@
 
 ListPicker.prototype._listItemCount = function() {
     return this._selectElement.querySelectorAll("option,optgroup,hr").length;
 };
 
 ListPicker.prototype._layout = function() {
     if (this._config.isRTL)
         this._element.classList.add("rtl");
     this._selectElement.style.backgroundColor = this._config.backgroundColor;
     this._updateChildren(this._selectElement, this._config);
-    this._selectElement.value = this._config.selectedIndex;
 };
 
 ListPicker.prototype._update = function() {
     var scrollPosition = this._selectElement.scrollTop;
     var oldValue = this._selectElement.value;
     this._layout();
+    this._selectElement.value = this._config.selectedIndex;
     this._selectElement.scrollTop = scrollPosition;
     var optionUnderMouse = null;
     if (this._selectionSetByMouseHover) {
         var elementUnderMouse = document.elementFromPoint(this.lastMousePositionX, this.lastMousePositionY);
         optionUnderMouse = elementUnderMouse && elementUnderMouse.closest("option");
     }
     if (optionUnderMouse)
         optionUnderMouse.selected = true;
     else
         this._selectElement.value = oldValue;
     this._selectElement.scrollTop = scrollPosition;
     this.dispatchEvent("didUpdate");
 };
 
 /**
  * @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 childConfig = config.children[i];
         var item = this._findReusableItem(parent, childConfig, outOfDateIndex) || this._createItemElement(childConfig);
-        this._configureItem(item, childConfig, parent.tagName === "OPTGROUP");
-        if (outOfDateIndex < parent.children.length)
+        this._configureItem(item, childConfig, inGroup);
+        if (outOfDateIndex < parent.children.length) {
             parent.insertBefore(item, parent.children[outOfDateIndex]);
-        else
-            parent.appendChild(item);
+        } else {
+            if (!fragment)
+                fragment = document.createDocumentFragment();
+            fragment.appendChild(item);
+        }
         outOfDateIndex++;
     }
+    if (fragment) {
+        parent.appendChild(fragment);
+        return;

[keishi, 2015/05/26 06:41:25]

When you change from
<select><optgroup></optgroup></select>
to
<select><option>foo</option></select>
, the fragment will contain the new option but we still need to remove the
obsolete optgroup.

+    }
     var unused = parent.children.length - outOfDateIndex;
     for (var i = 0; i < unused; i++) {
         parent.removeChild(parent.lastElementChild);
     }
 };
 
 ListPicker.prototype._findReusableItem = function(parent, config, startIndex) {
     if (startIndex >= parent.children.length)
         return null;
     var tagName = "OPTION";
@@ skipping 15 matching lines @@
     if (config.type === "option")
         element = createElement("option");
     else if (config.type === "optgroup")
         element = createElement("optgroup");
     else if (config.type === "separator")
         element = createElement("hr");
     return element;
 };
 
 ListPicker.prototype._applyItemStyle = function(element, styleConfig) {
-    element.style.color = styleConfig.color;
-    element.style.backgroundColor = styleConfig.backgroundColor;
-    element.style.fontSize = styleConfig.fontSize + "px";
-    element.style.fontWeight = styleConfig.fontWeight;
-    element.style.fontFamily = styleConfig.fontFamily.join(",");
-    element.style.fontStyle = styleConfig.fontStyle;
-    element.style.fontVariant = styleConfig.fontVariant;
-    element.style.visibility = styleConfig.visibility;
-    element.style.display = styleConfig.display;
-    element.style.direction = styleConfig.direction;
-    element.style.unicodeBidi = styleConfig.unicodeBidi;
+    if (!styleConfig)
+        return;
+    var style = element.style;
+    style.visibility = styleConfig.visibility;
+    style.display = styleConfig.display;
+    style.direction = styleConfig.direction;
+    style.unicodeBidi = styleConfig.unicodeBidi;
+    if (!styleConfig.color)
+        return;
+    style.color = styleConfig.color;
+    style.backgroundColor = styleConfig.backgroundColor;
+    style.fontSize = styleConfig.fontSize + "px";
+    style.fontWeight = styleConfig.fontWeight;
+    style.fontFamily = styleConfig.fontFamily.join(",");
+    style.fontStyle = styleConfig.fontStyle;
+    style.fontVariant = styleConfig.fontVariant;
 };
 
 ListPicker.prototype._configureItem = function(element, config, inGroup) {
     if (config.type === "option") {
         element.label = config.label;
         element.value = config.value;
         element.title = config.title;
         element.disabled = config.disabled;
         element.setAttribute("aria-label", config.ariaLabel);
         element.style.webkitPaddingStart = this._config.paddingStart + "px";
@@ skipping 21 matching lines @@
     }
     this._applyItemStyle(element, config.style);
 };
 
 if (window.dialogArguments) {
     initialize(dialogArguments);
 } else {
     window.addEventListener("message", handleMessage, false);
     window.setTimeout(handleArgumentsTimeout, 1000);
 }