Fixing iframe jank in the local omnibox popup.

chrome/browser/resources/local_omnibox_popup/local_omnibox_popup.js

 // Copyright 2012 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 Support for omnibox behavior in offline mode or when API
  * features are not supported on the server.
  */
-
-// ==========================================================
-//  Enums.
-// ==========================================================
+(function() {
+<include src="../../../../ui/webui/resources/js/assert.js">
 
 /**
  * Possible behaviors for navigateContentWindow.
  * @enum {number}
  */
 var WindowOpenDisposition = {
   CURRENT_TAB: 1,
   NEW_BACKGROUND_TAB: 2
 };
 
 /**
  * The JavaScript button event value for a middle click.
  * @type {number}
  * @const
  */
 var MIDDLE_MOUSE_BUTTON = 1;
 
-// =============================================================================
-//                               Util functions
-// =============================================================================
-
 /**
  * The maximum number of suggestions to show.
  * @type {number}
  * @const
  */
 var MAX_SUGGESTIONS_TO_SHOW = 5;
 
 /**
  * Assume any native suggestion with a score higher than this value has been
  * inlined by the browser.
  * @type {number}
  * @const
  */
 var INLINE_SUGGESTION_THRESHOLD = 1200;
 
 /**
+ * The color code for a query.
+ * @type {number}
+ * @const
+ */
+var QUERY_COLOR = 0x000000;
+
+/**
+ * The color code for a display URL.
+ * @type {number}
+ * @const
+ */
+var URL_COLOR = 0x009933;
+
+/**
+ * The color code for a suggestion title.
+ * @type {number}
+ * @const
+ */
+var TITLE_COLOR = 0x666666;
+
+/**
+ * A top position which is off-screen.
+ * @type {string}
+ * @const
+ */
+var OFF_SCREEN = '-1000px';
+
+/**
+ * The expected origin of a suggestion iframe.
+ * @type {string}
+ * @const
+ */
+var SUGGESTION_ORIGIN = 'chrome-search://suggestion';
+
+/**
  * Suggestion provider type corresponding to a verbatim URL suggestion.
  * @type {string}
  * @const
  */
 var VERBATIM_URL_TYPE = 'url-what-you-typed';
 
 /**
  * Suggestion provider type corresponding to a verbatim search suggestion.
  * @type {string}
  * @const
  */
 var VERBATIM_SEARCH_TYPE = 'search-what-you-typed';
 
 /**
- * The omnibox input value during the last onnativesuggestions event.
- * @type {string}
+ * "Up" arrow keycode.
+ * @type {number}
+ * @const
  */
-var lastInputValue = '';
+var KEY_UP_ARROW = 38;
 
 /**
- * The ordered restricted ids of the currently displayed suggestions.  Since the
- * suggestions contain the user's personal data (browser history) the searchBox
- * API embeds the content of the suggestion in a shadow dom, and assigns a
- * random restricted id to each suggestion which is accessible to the JS.
- * @type {Array.<number>}
+ * "Down" arrow keycode.
+ * @type {number}
+ * @const
  */
-
-var restrictedIds = [];
+var KEY_DOWN_ARROW = 40;
 
 /**
- * The index of the currently selected suggestion or -1 if none are selected.
+ * Pixels of padding inside a suggestion div for displaying its icon.
+ * @type {number}
+ * @const
+ */
+var SUGGESTION_ICON_PADDING = 26;
+
+/**
+ * Pixels by which iframes should be moved down relative to their wrapping
+ * suggestion div.
+ */
+var SUGGESTION_TOP_OFFSET = 4;
+
+/**
+ * The displayed suggestions.
+ * @type {SuggestionsBox}
+ */
+var activeBox;
+
+/**
+ * The suggestions being rendered.
+ * @type {SuggestionsBox}
+ */
+var pendingBox;
+
+/**
+ * A pool of iframes to display suggestions.
+ * @type {IframePool}
+ */
+var iframePool;
+
+/**
+ * A serial number for the next suggestions rendered.
  * @type {number}
  */
-var selectedIndex = -1;
+var nextRequestId = 0;
 
 /**
- * Shortcut for document.getElementById.
- * @param {string} id of the element.
- * @return {HTMLElement} with the id.
+ * Shortcut for document.querySelector.
+ * @param {string} selector A selector to query the desired element.
+ * @return {HTMLElement} The first element to match |selector| or null.
  */
-function $(id) {
-  return document.getElementById(id);
+function $qs(selector) {
+  return document.querySelector(selector);
 }
 
 /**
- * Displays a suggestion.
- * @param {Object} suggestion The suggestion to render.
- * @param {HTMLElement} box The html element to add the suggestion to.
- * @param {boolean} select True to select the selection.
- */
-function addSuggestionToBox(suggestion, box, select) {
-  var suggestionDiv = document.createElement('div');
-  suggestionDiv.classList.add('suggestion');
-  suggestionDiv.classList.toggle('selected', select);
-  suggestionDiv.classList.toggle('search', suggestion.is_search);
-
-  if (suggestion.destination_url) {  // iframes.
-    var suggestionIframe = document.createElement('iframe');
-    suggestionIframe.className = 'contents';
-    suggestionIframe.src = suggestion.destination_url;
-    suggestionIframe.id = suggestion.rid;
-    suggestionDiv.appendChild(suggestionIframe);
-  } else {
-    var contentsContainer = document.createElement('div');
-    var contents = suggestion.combinedNode;
-    contents.classList.add('contents');
-    contentsContainer.appendChild(contents);
-    suggestionDiv.appendChild(contentsContainer);
-    suggestionDiv.onclick = function(event) {
-      handleSuggestionClick(suggestion.rid, event.button);
-    };
-  }
-
-  restrictedIds.push(suggestion.rid);
-  box.appendChild(suggestionDiv);
-}
-
-/**
- * Renders the input suggestions.
- * @param {Array} nativeSuggestions An array of native suggestions to render.
- */
-function renderSuggestions(nativeSuggestions) {
-  var box = document.createElement('div');
-  box.id = 'suggestionsBox';
-  $('suggestions-box-container').appendChild(box);
-
-  for (var i = 0, length = nativeSuggestions.length;
-       i < Math.min(MAX_SUGGESTIONS_TO_SHOW, length); ++i) {
-    // Don't add the search-what-you-typed suggestion if it's the top match.
-    if (i > 0 || nativeSuggestions[i].type != VERBATIM_SEARCH_TYPE)
-      addSuggestionToBox(nativeSuggestions[i], box, i == selectedIndex);
-  }
-}
-
-/**
- * Clears the suggestions being displayed.
- */
-function clearSuggestions() {
-  $('suggestions-box-container').innerHTML = '';
-  restrictedIds = [];
-  selectedIndex = -1;
-}
-
-/**
- * @return {number} The height of the dropdown.
- */
-function getDropdownHeight() {
-  return $('suggestions-box-container').offsetHeight;
-}
-
-/**
  * @param {Object} suggestion A suggestion.
  * @param {boolean} inVerbatimMode Are we in verbatim mode?
  * @return {boolean} True if the suggestion should be selected.
  */
 function shouldSelectSuggestion(suggestion, inVerbatimMode) {
   var isVerbatimUrl = suggestion.type == VERBATIM_URL_TYPE;
-  var inlinableSuggestion = suggestion.type != VERBATIM_SEARCH_TYPE &&
+  var inlineableSuggestion = suggestion.type != VERBATIM_SEARCH_TYPE &&
       suggestion.rankingData.relevance > INLINE_SUGGESTION_THRESHOLD;
   // Verbatim URLs should always be selected. Otherwise, select suggestions
   // with a high enough score unless we are in verbatim mode (e.g. backspacing
   // away).
-  return isVerbatimUrl || (!inVerbatimMode && inlinableSuggestion);
-}
-
-/**
- * Updates selectedIndex, bounding it between -1 and the total number of
- * of suggestions - 1 (looping as necessary), and selects the corresponding
- * suggestion.
- * @param {boolean} increment True to increment the selected suggestion, false
- *     to decrement.
- */
-function updateSelectedSuggestion(increment) {
-  var numSuggestions = restrictedIds.length;
-  if (!numSuggestions)
-    return;
-
-  var oldSelection = $('suggestionsBox').querySelector('.selected');
-  if (oldSelection)
-    oldSelection.classList.remove('selected');
-
-  if (increment)
-    selectedIndex = ++selectedIndex > numSuggestions - 1 ? -1 : selectedIndex;
-  else
-    selectedIndex = --selectedIndex < -1 ? numSuggestions - 1 : selectedIndex;
-  var apiHandle = getApiObjectHandle();
-  if (selectedIndex == -1) {
-    apiHandle.setValue(lastInputValue);
+  return isVerbatimUrl || (!inVerbatimMode && inlineableSuggestion);
+}
+
+/**
+ * Extract the desired navigation behavior from a click button.
+ * @param {number} button The Event#button property of a click event.
+ * @return {WindowOpenDisposition} The desired behavior for
+ *     navigateContentWindow.
+ */
+function getDispositionFromClickButton(button) {
+  if (button == MIDDLE_MOUSE_BUTTON)
+    return WindowOpenDisposition.NEW_BACKGROUND_TAB;
+  return WindowOpenDisposition.CURRENT_TAB;
+}
+
+
+/**
+ * Manages a pool of chrome-search suggestion result iframes.
+ * @constructor
+ */
+function IframePool() {
+}
+
+IframePool.prototype = {
+  /**
+   * HTML iframe elements.
+   * @type {Array.<Element>}
+   * @private
+   */
+  iframes_: [],
+
+  /**
+   * Initializes the pool with blank result template iframes, positioned off
+   * screen.
+   */
+  init: function() {
+    for (var i = 0; i < 2 * MAX_SUGGESTIONS_TO_SHOW; ++i) {
+      var iframe = document.createElement('iframe');
+      iframe.className = 'contents';
+      iframe.id = 'suggestion-text-' + i;
+      iframe.src = 'chrome-search://suggestion/result.html';
+      iframe.style.top = OFF_SCREEN;
+      iframe.addEventListener('mouseover', function(e) {
+        if (activeBox)
+          activeBox.hover(e.currentTarget.id);
+      }, false);
+      iframe.addEventListener('mouseout', function(e) {
+        if (activeBox)
+          activeBox.unhover(e.currentTarget.id);
+      }, false);
+      document.body.appendChild(iframe);
+      this.iframes_.push(iframe);
+    }
+  },
+
+  /**
+   * Reserves a free suggestion iframe from the pool.
+   * @return {Element} An iframe suitable for holding a suggestion.
+   */
+  reserve: function() {
+    return this.iframes_.pop();
+  },
+
+  /**
+   * Releases a suggestion iframe back into the pool.
+   * @param {Element} iframe The iframe to return to the pool.
+   */
+  release: function(iframe) {
+    this.iframes_.push(iframe);
+    iframe.style.top = OFF_SCREEN;
+  },
+};
+
+
+/**
+ * An individual suggestion.
+ * @param {!Object} data Autocomplete fields for this suggestion.
+ * @constructor
+ */
+function Suggestion(data) {
+  assert(data);
+  /**
+   * Autocomplete fields for this suggestion.
+   * @type {!Object}
+   * @private
+   */
+  this.data_ = data;
+}
+
+Suggestion.prototype = {
+  /**
+   * Releases the iframe reserved for this suggestion.
+   */
+  destroy: function() {
+    if (this.iframe_)
+      iframePool.release(this.iframe_);
+  },
+
+  /**
+   * Creates and appends the placeholder div for this suggestion to box.
+   * @param {Element} box A suggestions box.
+   * @param {boolean} selected True if the suggestion should be drawn as
+   *     selected and false otherwise.
+   */
+  appendToBox: function(box, selected) {
+    var div = document.createElement('div');
+    div.classList.add('suggestion');
+    div.classList.toggle('selected', selected);
+    div.classList.toggle('search', this.data_.is_search);
+    box.appendChild(div);
+    this.div_ = div;
+  },
+
+  /**
+   * Repositions the suggestion iframe to align with its expected dropdown
+   * position.
+   * @param {boolean} isRtl True if rendering right-to-left and false if not.
+   * @param {number} startMargin Leading space before suggestion.
+   * @param {number} totalMargin Total non-content space on suggestion line.
+   */
+  reposition: function(isRtl, startMargin, totalMargin) {
+    // Add in the expected parent offset and the top margin.
+    this.iframe_.style.top = this.div_.offsetTop + SUGGESTION_TOP_OFFSET + 'px';
+    // Call parseInt to enforce that startMargin and totalMargin are really
+    // numbers since we're interpolating CSS.
+    startMargin = parseInt(startMargin, 10);
+    totalMargin = parseInt(totalMargin, 10);
+    if (isFinite(startMargin) && isFinite(totalMargin)) {
+      this.iframe_.style[isRtl ? 'right' : 'left'] = startMargin + 'px';
+      this.iframe_.style.width = '-webkit-calc(100% - ' +
+          (totalMargin + SUGGESTION_ICON_PADDING) + 'px)';
+    }
+  },
+
+  /**
+   * Updates the suggestion selection state.
+   * @param {boolean} selected True if drawn selected or false if not.
+   */
+  select: function(selected) {
+    this.div_.classList.toggle('selected', selected);
+  },
+
+  /**
+   * Updates the suggestion hover state.
+   * @param {boolean} hovered True if drawn hovered or false if not.
+   */
+  hover: function(hovered) {
+    this.div_.classList.toggle('hovered', hovered);
+  },
+
+  /**
+   * @param {Window} iframeWindow The content window of an iframe.
+   * @return {boolean} True if this suggestion's iframe has the specified
+   *     window and false if not.
+   */
+  hasIframeWindow: function(iframeWindow) {
+    return this.iframe_.contentWindow == iframeWindow;
+  },
+
+  /**
+   * @param {string} id An element id.
+   * @return {boolean} True if this suggestion's iframe has the specified id
+   *     and false if not.
+   */
+  hasIframeId: function(id) {
+    return this.iframe_.id == id;
+  },
+
+  /**
+   * The iframe element for this suggestion.
+   * @type {Element}
+   */
+  set iframe(iframe) {
+    this.iframe_ = iframe;
+  },
+
+  /**
+   * The restricted id associated with this suggestion.
+   * @type {number}
+   */
+  get restrictedId() {
+    return this.data_.rid;
+  },
+};
+
+
+/**
+ * Displays a suggestions box.
+ * @param {string} inputValue The user text that prompted these suggestions.
+ * @param {!Array.<!Object>} suggestionData Suggestion data to display.
+ * @param {number} selectedIndex The index of the suggestion selected.
+ * @constructor
+ */
+function SuggestionsBox(inputValue, suggestionData, selectedIndex) {
+  /**
+   * The user text that prompted these suggestions.
+   * @type {string}
+   * @private
+   */
+  this.inputValue_ = inputValue;
+
+  /**
+   * The index of the suggestion currently selected, whether by default or
+   * because the user arrowed down to it.
+   * @type {number}
+   * @private
+   */
+  this.selectedIndex_ = selectedIndex;
+
+  /**
+   * The index of the suggestion currently under the mouse pointer.
+   * @type {number}
+   * @private
+   */
+  this.hoveredIndex_ = -1;
+
+  /**
+   * A stamp to distinguish this suggestions box from others.
+   * @type {number}
+   * @private
+   */
+  this.requestId_ = nextRequestId++;
+
+  /**
+   * The ordered suggestions this box is displaying.
+   * @type {Array.<Suggestion>}
+   * @private
+   */
+  this.suggestions_ = [];
+  for (var i = 0; i < suggestionData.length; ++i) {
+    this.suggestions_.push(new Suggestion(suggestionData[i]));
+  }
+
+  /**
+   * An embedded search API handle.
+   * @type {Object}
+   * @private
+   */
+  this.apiHandle_ = getApiObjectHandle();
+
+  /**
+   * The container for this suggestions box. div.pending-container if inactive
+   * and div.active-container if active.
+   * @type {Element}
+   * @private
+   */
+  this.container_ = $qs('.pending-container');
+  assert(this.container_);
+}
+
+SuggestionsBox.prototype = {
+  /**
+   * Releases suggestion iframes and ignores any load done message for the
+   * current suggestions.
+   */
+  destroy: function() {
+    while (this.suggestions_.length > 0) {
+      this.suggestions_.pop().destroy();
+    }
+    this.responseId = -1;
+  },
+
+  /**
+   * Starts rendering new suggestions.
+   */
+  loadSuggestions: function() {
+    // Create a placeholder DOM in the invisible container.
+    this.container_.innerHTML = '';
+
+    var box = document.createElement('div');
+    box.className = 'suggestions-box';
+    this.container_.appendChild(box);
+
+    var iframesToLoad = {};
+    for (var i = 0; i < this.suggestions_.length; ++i) {
+      var suggestion = this.suggestions_[i];
+      suggestion.appendToBox(box, i == this.selectedIndex_);
+      var iframe = iframePool.reserve();
+      suggestion.iframe = iframe;
+      iframesToLoad[iframe.id] = suggestion.restrictedId;
+    }
+
+    // Ask the loader iframe to populate the iframes just reserved.
+    var loadRequest = {
+      load: iframesToLoad,
+      requestId: this.requestId_,
+      style: {
+        queryColor: QUERY_COLOR,
+        urlColor: URL_COLOR,
+        titleColor: TITLE_COLOR
+      }
+    };
+    $qs('#suggestion-loader').contentWindow.postMessage(loadRequest,
+        SUGGESTION_ORIGIN);
+  },
+
+  /**
+   * @param {number} responseId The id of a request that just finished
+   *     rendering.
+   * @return {boolean} Whether the request is for the suggestions in this box.
+   */
+  isResponseCurrent: function(responseId) {
+    return responseId == this.requestId_;
+  },
+
+  /**
+   * Moves suggestion iframes into position.
+   */
+  repositionSuggestions: function() {
+    // Note: This may be called before margins are ready. In that case,
+    // suggestion iframes will initially be too large and then size down
+    // onresize.
+    var startMargin = this.apiHandle_.startMargin;
+    var totalMargin = window.innerWidth - this.apiHandle_.width;
+    var isRtl = this.apiHandle_.isRtl;
+    for (var i = 0; i < this.suggestions_.length; ++i) {
+      this.suggestions_[i].reposition(isRtl, startMargin, totalMargin);
+    }
+  },
+
+  /**
+   * Selects the suggestion before the current selection.
+   */
+  selectPrevious: function() {
+    this.changeSelection_(this.selectedIndex_ - 1);
+  },
+
+  /**
+   * Selects the suggestion after the current selection.
+   */
+  selectNext: function() {
+    this.changeSelection_(this.selectedIndex_ + 1);
+  },
+
+  /**
+   * Changes the current selected suggestion index.
+   * @param {number} index The new selection to suggest.
+   * @private
+   */
+  changeSelection_: function(index) {
+    var numSuggestions = this.suggestions_.length;
+    this.selectedIndex_ = Math.min(numSuggestions - 1, Math.max(-1, index));
+
+    this.redrawSelection_();
+    this.redrawHover_();
+  },
+
+  /**
+   * Redraws the selected suggestion.
+   * @private
+   */
+  redrawSelection_: function() {
+    var oldSelection = this.container_.querySelector('.selected');
+    if (oldSelection)
+      oldSelection.classList.remove('selected');
+    if (this.selectedIndex_ == -1) {
+      this.apiHandle_.setValue(this.inputValue_);
+    } else {
+      this.suggestions_[this.selectedIndex_].select(true);
+      this.apiHandle_.setRestrictedValue(
+          this.suggestions_[this.selectedIndex_].restrcitedId);

[palmer, 2013/04/22 19:38:37]

typo: restrictedId

[Jered, 2013/04/22 23:02:58]

Done. Good catch!

+    }
+  },
+
+  /**
+   * Returns the restricted id of the iframe clicked.

[palmer, 2013/04/22 19:38:37]

This is redundant; you have a @return comment.

[Jered, 2013/04/22 23:02:58]

Done.

+   * @param {!Window} iframeWindow The window of the iframe that was clicked.
+   * @return {?number} The restricted id clicked or null if none.

[palmer, 2013/04/22 19:38:37]

"...ID of the iframe that was clicked, or null if there was none."

[Jered, 2013/04/22 23:02:58]

Done.

+   */
+  getClickTarget: function(iframeWindow) {
+    for (var i = 0; i < this.suggestions_.length; ++i) {
+      if (this.suggestions_[i].hasIframeWindow(iframeWindow))
+        return this.suggestions_[i].restrictedId;
+    }
+    return null;
+  },
+
+  /**
+   * Called when the user hovers on the specified iframe.

[palmer, 2013/04/22 19:38:37]

... for the purpose of...  Updating hoveredIndex_, and redrawing. Explain the
side-effects.

[Jered, 2013/04/22 23:02:58]

Done.

+   * @param {string} iframeId The id of the iframe hovered.
+   */
+  hover: function(iframeId) {
+    this.hoveredIndex_ = -1;
+    for (var i = 0; i < this.suggestions_.length; ++i) {
+      if (this.suggestions_[i].hasIframeId(iframeId)) {
+        this.hoveredIndex_ = i;
+        break;
+      }
+    }
+    this.redrawHover_();
+  },
+
+  /**
+   * Called when the user unhovers the specified iframe.

[palmer, 2013/04/22 19:38:37]

Same thing: say why. It seems like this function could just be a
straight-forward call to clearHover? Basically, if |iframeId| does not exist,
then the caller is in error, and there should be some kind of debug warning.
Then once you've verified that your callers are correct, you could get rid of
the check?

[Jered, 2013/04/22 23:02:58]

I'd prefer to keep the check. This method is called in response to a mouseout
event, and we only want that event to control hover for the iframe it came from.

+   * @param {string} iframeId The id of the iframe hovered.
+   */
+  unhover: function(iframeId) {
+    if (this.suggestions_[this.hoveredIndex_] &&
+        this.suggestions_[this.hoveredIndex_].hasIframeId(iframeId)) {
+      this.clearHover();
+    }
+  },
+
+  /**
+   * Clears the current hover.
+   */
+  clearHover: function() {
+    this.hoveredIndex_ = -1;
+    this.redrawHover_();
+  },
+
+  /**
+   * Redraws the mouse hover background.
+   * @private
+   */
+  redrawHover_: function() {
+    var oldHover = this.container_.querySelector('.hovered');
+    if (oldHover)
+      oldHover.classList.remove('hovered');
+    if (this.hoveredIndex_ != -1 && this.hoveredIndex_ != this.selectedIndex_)
+      this.suggestions_[this.hoveredIndex_].hover(true);
+  },
+
+  /**
+   * Marks the suggestions container as active.
+   */
+  activate: function() {
+    this.container_.className = 'active-container';
+  },
+
+  /**
+   * Marks the suggestions container as inactive.
+   */
+  deactivate: function() {
+    this.container_.className = 'pending-container';
+    this.container_.innerHTML = '';
+  },
+
+  /**
+   * The height of the suggestions container.
+   * @type {number}
+   */
+  get height() {
+    return this.container_.offsetHeight;
+  },
+};
+
+
+/**
+ * Clears the currently active suggestions and shows pending suggestions.
+ */
+function makePendingSuggestionsActive() {
+  if (activeBox) {
+    activeBox.deactivate();
+    activeBox.destroy();
   } else {
-    var newSelection = $('suggestionsBox').querySelector(
-        '.suggestion:nth-of-type(' + (selectedIndex + 1) + ')');
-    newSelection.classList.add('selected');
-    apiHandle.setRestrictedValue(restrictedIds[selectedIndex]);
+    // Initially there will be no active suggestions, but we still want to use
+    // div.active-container to load the next suggestions.
+    $qs('.active-container').className = 'pending-container';
   }
-}
-
-// =============================================================================
-//                             Handlers / API stuff
-// =============================================================================
+  pendingBox.activate();
+  activeBox = pendingBox;
+  pendingBox = null;
+  activeBox.repositionSuggestions();
+  getApiObjectHandle().showOverlay(activeBox.height);
+}
+
+/**
+ * Hides the active suggestions box.
+ */
+function hideActiveSuggestions() {
+  getApiObjectHandle().showOverlay(0);
+  if (activeBox) {
+    $qs('.active-container').innerHTML = '';
+    activeBox.destroy();
+  }
+  activeBox = null;
+}
 
 /**
  * @return {Object} the handle to the searchBox API.
  */
- function getApiObjectHandle() {
+function getApiObjectHandle() {
   if (window.cideb)
     return window.cideb;
   if (window.navigator && window.navigator.embeddedSearch &&
       window.navigator.embeddedSearch.searchBox)
     return window.navigator.embeddedSearch.searchBox;
   if (window.chrome && window.chrome.embeddedSearch &&
       window.chrome.embeddedSearch.searchBox)
     return window.chrome.embeddedSearch.searchBox;
   return null;
 }
 
 /**
  * Updates suggestions in response to a onchange or onnativesuggestions call.
  */
 function updateSuggestions() {
+  if (pendingBox)
+    pendingBox.destroy();
+  pendingBox = null;
   var apiHandle = getApiObjectHandle();
-  lastInputValue = apiHandle.value;
-
-  clearSuggestions();
-  var nativeSuggestions = apiHandle.nativeSuggestions;
-  if (nativeSuggestions.length) {
-    nativeSuggestions.sort(function(a, b) {
+  var suggestions = apiHandle.nativeSuggestions;
+  if (suggestions.length) {
+    suggestions.sort(function(a, b) {
       return b.rankingData.relevance - a.rankingData.relevance;
     });
-    if (shouldSelectSuggestion(nativeSuggestions[0], apiHandle.verbatim))
+    var selectedIndex = -1;
+    if (shouldSelectSuggestion(suggestions[0], apiHandle.verbatim))
       selectedIndex = 0;
-    renderSuggestions(nativeSuggestions);
+    // Don't display a search-what-you-typed suggestion if it's the top match.
+    if (suggestions[0].type == VERBATIM_SEARCH_TYPE)
+      suggestions.shift();
   }
-
-  var height = getDropdownHeight();
-  apiHandle.showOverlay(height);
+  var inputValue = apiHandle.value;
+  if (!!inputValue && suggestions.length) {

[palmer, 2013/04/22 19:38:37]

Do you get the same result without the !! ?

[Jered, 2013/04/22 23:02:58]

You get the same truthiness, but not the same result (you'd get '' here instead
of false for instance).

+    pendingBox = new SuggestionsBox(inputValue,
+        suggestions.slice(0, MAX_SUGGESTIONS_TO_SHOW), selectedIndex);
+    pendingBox.loadSuggestions();
+  } else {
+    hideActiveSuggestions();
+  }
 }
 
 /**
  * Appends a style node for suggestion properties that depend on apiHandle.
  */
 function appendSuggestionStyles() {
   var apiHandle = getApiObjectHandle();
   var isRtl = apiHandle.rtl;
   var startMargin = apiHandle.startMargin;
   var style = document.createElement('style');
   style.type = 'text/css';
   style.id = 'suggestionStyle';
   style.textContent =
       '.suggestion, ' +
       '.suggestion.search {' +
       '  background-position: ' +
           (isRtl ? '-webkit-calc(100% - 5px)' : '5px') + ' 4px;' +
       '  -webkit-margin-start: ' + startMargin + 'px;' +
       '  -webkit-margin-end: ' +
           (window.innerWidth - apiHandle.width - startMargin) + 'px;' +
       '  font: ' + apiHandle.fontSize + 'px "' + apiHandle.font + '";' +
       '}';
-  document.querySelector('head').appendChild(style);
+  $qs('head').appendChild(style);
+  if (activeBox)
+    activeBox.repositionSuggestions();
   window.removeEventListener('resize', appendSuggestionStyles);
 }
 
 /**
- * Extract the desired navigation behavior from a click button.
- * @param {number} button The Event#button property of a click event.
- * @return {WindowOpenDisposition} The desired behavior for
- *     navigateContentWindow.
- */
-function getDispositionFromClickButton(button) {
-  if (button == MIDDLE_MOUSE_BUTTON)
-    return WindowOpenDisposition.NEW_BACKGROUND_TAB;
-  return WindowOpenDisposition.CURRENT_TAB;
-}
-
-/**
- * Handles suggestion clicks.
- * @param {number} restrictedId The restricted id of the suggestion being
- *     clicked.
- * @param {number} button The Event#button property of a click event.
- *
- */
-function handleSuggestionClick(restrictedId, button) {
-  clearSuggestions();
-  getApiObjectHandle().navigateContentWindow(
-      restrictedId, getDispositionFromClickButton(button));
-}
-
-/**
- * chrome.searchBox.onkeypress implementation.
+ * Makes keys navigate through suggestions.
  * @param {Object} e The key being pressed.
  */
 function handleKeyPress(e) {
+  if (!activeBox)
+    return;
+
   switch (e.keyCode) {
-    case 38:  // Up arrow
-      updateSelectedSuggestion(false);
+    case KEY_UP_ARROW:
+      activeBox.selectPrevious();
       break;
-    case 40:  // Down arrow
-      updateSelectedSuggestion(true);
+    case KEY_DOWN_ARROW:
+      activeBox.selectNext();
       break;
   }
 }
 
 /**
- * Handles the postMessage calls from the result iframes.
- * @param {Object} message The message containing details of clicks the iframes.
+ * Handles postMessage calls from suggestion iframes.
+ * @param {Object} message A notification that all iframes are done loading or
+ *     that an iframe was clicked.
  */
 function handleMessage(message) {
-  if (message.origin != 'null' || !message.data ||
-      message.data.eventType != 'click') {
+  if (message.origin != SUGGESTION_ORIGIN)
     return;
-  }
 
-  var iframes = document.getElementsByClassName('contents');
-  for (var i = 0; i < iframes.length; ++i) {
-    if (iframes[i].contentWindow == message.source) {
-      handleSuggestionClick(parseInt(iframes[i].id, 10),
-                            message.data.button);
-      break;
+  if ('loaded' in message.data) {
+    if (pendingBox && pendingBox.isResponseCurrent(message.data.loaded))
+      makePendingSuggestionsActive();
+  } else if ('click' in message.data) {
+    if (activeBox) {
+      var restrictedId = activeBox.getClickTarget(message.source);
+      if (restrictedId != null) {
+        hideActiveSuggestions();
+        getApiObjectHandle().navigateContentWindow(restrictedId,
+            getDispositionFromClickButton(message.data.click));
+      }
     }
   }
 }
 
 /**
- * chrome.searchBox.embeddedSearch.onsubmit implementation.
+ * Sets up the embedded search API and creates suggestion iframes.
  */
-function onSubmit() {
-}
-
-/**
- * Sets up the searchBox API.
- */
-function setUpApi() {
+function init() {
+  iframePool = new IframePool();
+  iframePool.init();
   var apiHandle = getApiObjectHandle();
   apiHandle.onnativesuggestions = updateSuggestions;
   apiHandle.onchange = updateSuggestions;
   apiHandle.onkeypress = handleKeyPress;
-  apiHandle.onsubmit = onSubmit;
-  $('suggestions-box-container').dir = apiHandle.rtl ? 'rtl' : 'ltr';
+  // Instant checks for this handler to be bound.
+  apiHandle.onsubmit = function() {};
+  $qs('.active-container').dir = apiHandle.rtl ? 'rtl' : 'ltr';
+  $qs('.pending-container').dir = apiHandle.rtl ? 'rtl' : 'ltr';
   // Delay adding these styles until the window width is available.
   window.addEventListener('resize', appendSuggestionStyles);
   if (apiHandle.nativeSuggestions.length)
-    handleNativeSuggestions();
+    updateSuggestions();
 }
 
-document.addEventListener('DOMContentLoaded', setUpApi);
+document.addEventListener('DOMContentLoaded', init);
 window.addEventListener('message', handleMessage, false);
+window.addEventListener('blur', function() {
+  if (activeBox)
+    activeBox.clearHover();
+}, false);
+})();