alternate ntp: implement searchbox api for instant overlay to adopt themes

chrome/renderer/resources/extensions/searchbox/searchbox_api.js

 // Copyright (c) 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.
 
 var chrome;
 if (!chrome)
   chrome = {};
 if (!chrome.searchBox) {
   chrome.searchBox = new function() {
     // =========================================================================
@@ skipping 13 matching lines @@
     native function GetVerbatim();
     native function GetSelectionStart();
     native function GetSelectionEnd();
     native function GetX();
     native function GetY();
     native function GetWidth();
     native function GetHeight();
     native function GetAutocompleteResults();
     native function GetIsFocused();
     native function GetContext();
+    native function GetThemeBackgroundInfo();
+    native function GetThemeAreaHeight();
     native function NavigateContentWindow();
     native function SetSuggestions();
     native function SetQuerySuggestion();
     native function SetQuerySuggestionFromAutocompleteResult();
     native function SetQuery();
     native function SetQueryFromAutocompleteResult();
     native function Show();
 
     // Returns the |restrictedText| wrapped in a ShadowDOM.
     function SafeWrap(restrictedText) {
       var node = document.createElement('div');
       var nodeShadow = new WebKitShadowRoot(node);
       nodeShadow.applyAuthorStyles = true;
       nodeShadow.innerHTML =
           '<div style="width:700px!important;' +
           '            height:22px!important;' +
           '            font-family:\'Chrome Droid Sans\',\'Arial\'!important;' +
           '            overflow:hidden!important;' +
           '            text-overflow:ellipsis!important">' +
           '  <nobr>' + restrictedText + '</nobr>' +
           '</div>';
       return node;
     }
 
     // Wraps the AutocompleteResult query and URL into ShadowDOM nodes so that
     // the JS cannot access them and deletes the raw values.
     function GetAutocompleteResultsWrapper() {
-      var autocompleteResults = DedupeAutcompleteResults(
+      var autocompleteResults = DedupeAutocompleteResults(
           GetAutocompleteResults());
       var userInput = GetQuery();
       for (var i = 0, result; result = autocompleteResults[i]; ++i) {
         var title = result.contents;
         var url = CleanUrl(result.destination_url, userInput);
         var combinedHtml = '<span class=chrome_url>' + url + '</span>';
         if (title) {
           result.titleNode = SafeWrap(title);
           combinedHtml += '<span class=chrome_separator> &ndash; </span>' +
               '<span class=chrome_title>' + title + '</span>';
@@ skipping 18 matching lines @@
       return url.replace(WWW_REGEX, '');
     }
 
     // TODO(dcblack): Do this in C++ instead of JS.
     function CanonicalizeUrl(url) {
       return url.replace(HTTP_REGEX, '').replace(WWW_REGEX, '');
     }
 
     // Removes duplicates from AutocompleteResults.
     // TODO(dcblack): Do this in C++ instead of JS.
-    function DedupeAutcompleteResults(autocompleteResults) {
+    function DedupeAutocompleteResults(autocompleteResults) {
       var urlToResultMap = {};
       for (var i = 0, result; result = autocompleteResults[i]; ++i) {
         var url = CanonicalizeUrl(result.destination_url);
         if (url in urlToResultMap) {
           var oldRelevance = urlToResultMap[url].rankingData.relevance;
           var newRelevance = result.rankingData.relevance;
           if (newRelevance > oldRelevance) {
             urlToResultMap[url] = result;
           }
         } else {
@@ skipping 59 matching lines @@
     this.__defineGetter__('verbatim', GetVerbatim);
     this.__defineGetter__('selectionStart', GetSelectionStart);
     this.__defineGetter__('selectionEnd', GetSelectionEnd);
     this.__defineGetter__('x', GetX);
     this.__defineGetter__('y', GetY);
     this.__defineGetter__('width', GetWidth);
     this.__defineGetter__('height', GetHeight);
     this.__defineGetter__('nativeSuggestions', GetAutocompleteResultsWrapper);
     this.__defineGetter__('isFocused', GetIsFocused);
     this.__defineGetter__('context', GetContext);
+    this.__defineGetter__('themeBackgroundInfo', GetThemeBackgroundInfo);
+    this.__defineGetter__('themeAreaHeight', GetThemeAreaHeight);

[David Black, 2012/11/16 00:57:17]

Why isn't the theme area height part of the returned theme background info
object?

[kuan, 2012/11/16 01:10:03]

the height changes a lot more: when browser window is resized, devtools is
opened/docked/undocked/closed, download shelf is opened/closed.
the theme changes a lot less: on initialization, when user manually changes it.
so jeremy suggested we do it in 2 separate api's.

     this.setSuggestions = function(text) {
       SetSuggestions(text);
     };
     this.setAutocompleteText = function(text, behavior) {
       SetQuerySuggestion(text, behavior);
     };
     this.setRestrictedAutocompleteText = function(resultId) {
       SetQuerySuggestionFromAutocompleteResult(resultId);
     };
     this.setValue = function(text, type) {
@@ skipping 15 matching lines @@
     this.onsubmit = null;
     this.oncancel = null;
     this.onresize = null;
     this.onautocompleteresults = null;
     this.onkeypress = null;
     this.onfocus = null;
     this.onblur = null;
     this.oncontextchange = null;
   };
 }