Fixing iframe jank in the local omnibox popup.

chrome/browser/resources/omnibox_result_loader.js

Index: chrome/browser/resources/omnibox_result_loader.js
diff --git a/chrome/browser/resources/omnibox_result_loader.js b/chrome/browser/resources/omnibox_result_loader.js
new file mode 100644
index 0000000000000000000000000000000000000000..322cebd0a38388ca20b69397b4aff5021925a6e2
--- /dev/null
+++ b/chrome/browser/resources/omnibox_result_loader.js
@@ -0,0 +1,93 @@
+/**
+ * @fileoverview Orchestrates loading of suggestion content in several
+ * chrome-search://suggestion iframes.
+ */
+
+/**
+ * The origin of the embedding page.
+ * Must be in double quotes for proper escaping.
+ * @type {string}
+ * @const
+ */
+var EMBEDDER_ORIGIN = "%s";
+
+/**
+ * Checks whether a string is a valid color code.
+ * @param {string} color A color code.
+ * @return {boolean} True if color is a valid color code and false otherwise.
+ */
+function isValidColor(color) {
+  // Accept 3 or 6 digit hex colors preceded by '#'.
+  return /^#[0-9A-Fa-f]{3}|#[0-9A-Fa-f]{6}$/.test(color);
+}
+
+/**
+ * Checks and returns suggestion style.
+ * @param {Object} userStyle User-specified overrides for suggestion styles.

[samarth, 2013/04/02 23:26:58]

"User" is confusing here.  How about pageStyle or something to make it clear
it's being set by the instant page.

[Jered, 2013/04/03 18:49:33]

Done.

[Jered, 2013/04/03 18:49:33]

Done.

+ * @return {Object} Checked styles or defaults.
+ */
+function getStyle(userStyle) {
+  var apiHandle = chrome.embeddedSearch.searchBox;
+  var safeStyle = {
+    urlColor: '#093',
+    titleColor: '#666',
+    font: apiHandle.font,

[samarth, 2013/04/02 23:26:58]

Any reason we don't want to allow the page to override these as well?  I can
imagine wanting to run experiments that change the suggest font size.

[Jered, 2013/04/03 18:49:33]

I was thinking we'd always want suggestions to have the same font styling as the
omnibox, since we went to some pains to get into that state. Also allowing font
and size brings along another can of CSS escaping issues I'd rather deal with
only if we need to.

+    fontSize: apiHandle.fontSize
+  };
+  if ('urlColor' in userStyle && isValidColor(userStyle.urlColor))
+    safeStyle.urlColor = userStyle.urlColor;
+  if ('titleColor' in userStyle && isValidColor(userStyle.titleColor))
+    safeStyle.titleColor = userStyle.titleColor;
+  return safeStyle;
+}
+
+/**
+ * Renders a native history suggestion.
+ * @param {Document} resultDoc The suggestion template document.
+ * @param {Object} suggestion The NativeSuggestion to render.
+ * @param {Object} style Checked (not user-set) result style.
+ */
+function updateResult(resultDoc, suggestion, style) {
+  resultDoc.body.style.font = style.fontSize + 'px "' + style.font + '";';
+  var urlNode = resultDoc.querySelector('#url');
+  urlNode.textContent = suggestion.destination_url;

[samarth, 2013/04/02 23:26:58]

As mentioned in a different comment, this needs to support queries as well for
other search providers.

[Jered, 2013/04/03 18:49:33]

Done.

+  urlNode.style.color = style.urlColor;
+  var optionalNode = resultDoc.querySelector('#optional');
+  if (suggestion.description) {
+    var titleNode = resultDoc.querySelector('#title');
+    titleNode.textContent = suggestion.description;
+    optionalNode.style.color = style.titleColor;
+    optionalNode.classList.remove('hide');
+  } else {
+    optionalNode.classList.add('hide');
+  }
+}
+
+/**
+ * Handles a postMessage from the embedding page requesting to populate history
+ * suggestion iframes.
+ * @param {Object} message The message.
+ */
+function handleMessage(message) {
+  // Only allow messages from the embedding page, which should be an Instant
+  // search provider or the local omnibox dropdown (and not e.g. a site which
+  // it has iframed.)
+  if (message.origin != EMBEDDER_ORIGIN)
+    return;
+  var apiHandle = chrome.embeddedSearch.searchBox;
+  if ('load' in message.data) {
+    var loaded = [];
+    for (var id in message.data.load) {
+      var restrictedId = message.data.load[id];
+      var suggestion = apiHandle.getSuggestionData(restrictedId);
+      updateResult(window.parent.frames[id].document, suggestion,
+          getStyle(message.data.style || {}));
+      loaded.push(id);
+    }
+    message.source.postMessage(
+        {'loaded': message.data.requestId},
+        message.origin);
+  }
+}
+
+window.addEventListener('message', handleMessage, false);