Makes chrome://omnibox use mojo

chrome/browser/resources/omnibox/omnibox.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.
 
 /**
  * Javascript for omnibox.html, served from chrome://omnibox/
  * This is used to debug omnibox ranking.  The user enters some text
  * into a box, submits it, and then sees lots of debug information
  * from the autocompleter that shows what omnibox would do with that
  * input.
  *
  * The simple object defined in this javascript file listens for
  * certain events on omnibox.html, sends (when appropriate) the
  * input text to C++ code to start the omnibox autcomplete controller
  * working, and listens from callbacks from the C++ code saying that
  * results are available.  When results (possibly intermediate ones)
  * are available, the Javascript formats them and displays them.
  */
-cr.define('omniboxDebug', function() {
+define('main', [
+    'mojo/public/bindings/js/connection',
+    'chrome/browser/ui/webui/omnibox/omnibox.mojom',
+], function(connector, browser) {
   'use strict';
 
+  var connection;

[sky, 2014/04/02 17:54:10]

I think this file can be restructured quite a bit. In particular all of these
functions should likely be moved into the object. I'm hoping to do that
separately.

+  var page;
+
   /**
    * Register our event handlers.
    */
   function initialize() {
     $('omnibox-input-form').addEventListener(
         'submit', startOmniboxQuery, false);
     $('prevent-inline-autocomplete').addEventListener(
         'change', startOmniboxQuery);
     $('prefer-keyword').addEventListener('change', startOmniboxQuery);
     $('page-classification').addEventListener('change', startOmniboxQuery);
     $('show-details').addEventListener('change', refresh);
     $('show-incomplete-results').addEventListener('change', refresh);
     $('show-all-providers').addEventListener('change', refresh);
   }
 
   /**
-   * @type {Array.<Object>} an array of all autocomplete results we've seen
+   * @type {OmniboxResultMojo} an array of all autocomplete results we've seen
    *     for this query.  We append to this list once for every call to
-   *     handleNewAutocompleteResult.  For details on the structure of
-   *     the object inside, see the comments by addResultToOutput.
+   *     handleNewAutocompleteResult.  See omnibox.mojom for details..
    */
   var progressiveAutocompleteResults = [];
 
   /**
    * @type {number} the value for cursor position we sent with the most
    *     recent request.  We need to remember this in order to display it
    *     in the output; otherwise it's hard or impossible to determine
    *     from screen captures or print-to-PDFs.
    */
   var cursorPositionUsed = -1;
 
   /**
    * Extracts the input text from the text field and sends it to the
    * C++ portion of chrome to handle.  The C++ code will iteratively
    * call handleNewAutocompleteResult as results come in.
    */
   function startOmniboxQuery(event) {
     // First, clear the results of past calls (if any).
     progressiveAutocompleteResults = [];
     // Then, call chrome with a five-element list:
     // - first element: the value in the text box
     // - second element: the location of the cursor in the text box
     // - third element: the value of prevent-inline-autocomplete
     // - forth element: the value of prefer-keyword
     // - fifth element: the value of page-classification
     cursorPositionUsed = $('input-text').selectionEnd;
-    chrome.send('startOmniboxQuery', [
+    page.browser_.startOmniboxQuery(
         $('input-text').value,
         cursorPositionUsed,
         $('prevent-inline-autocomplete').checked,
         $('prefer-keyword').checked,
-        parseInt($('page-classification').value)]);
+        parseInt($('page-classification').value));
     // Cancel the submit action.  i.e., don't submit the form.  (We handle
     // display the results solely with Javascript.)
     event.preventDefault();
   }
 
   /**
    * Returns a simple object with information about how to display an
    * autocomplete result data field.
    * @param {string} header the label for the top of the column/table.
    * @param {string} urlLabelForHeader the URL that the header should point
@@ skipping 61 matching lines @@
         'Tran',
         'http://code.google.com/codesearch#OAMlx_jo-ck/src/content/public/' +
         'common/page_transition_types.h&exact_package=chromium&l=24',
         'transition', false,
         'How the user got to the result.'),
     new PresentationInfoRecord(
         'Done', '', 'provider_done', false,
         'A green checkmark indicates that the provider is done looking for ' +
         'more results.'),
     new PresentationInfoRecord(
-        'Template URL', '', 'template_url', false, ''),
-    new PresentationInfoRecord(
         'Associated Keyword', '', 'associated_keyword', false,
         'If non-empty, a "press tab to search" hint will be shown and will ' +
         'engage this keyword.'),
     new PresentationInfoRecord(
         'Keyword', '', 'keyword', false,
         'The keyword of the search engine to be used.'),
     new PresentationInfoRecord(
         'Duplicates', '', 'duplicates', false,
         'The number of matches that have been marked as duplicates of this ' +
         'match.'),
@@ skipping 39 matching lines @@
    *     suggestion that should go in this cell.
    * @return {HTMLTableCellElement} that contains the value within this
    *     autocompleteSuggestion associated with propertyName.
    */
   function createCellForPropertyAndRemoveProperty(autocompleteSuggestion,
                                                   propertyName) {
     var cell = document.createElement('td');
     if (propertyName in autocompleteSuggestion) {
       if (propertyName == 'additional_info') {
         // |additional_info| embeds a two-column table of provider-specific data
-        // within this cell.
+        // within this cell. |additional_info| is an array of
+        // AutocompleteAdditionalInfo.
         var additionalInfoTable = document.createElement('table');
-        for (var additionalInfoKey in autocompleteSuggestion[propertyName]) {
+        for (var i = 0; i < autocompleteSuggestion[propertyName].length; i++) {
+          var additionalInfo = autocompleteSuggestion[propertyName][i];
           var additionalInfoRow = document.createElement('tr');
 
           // Set the title (name of property) cell text.
           var propertyCell = document.createElement('td');
-          propertyCell.textContent = additionalInfoKey + ':';
+          propertyCell.textContent = additionalInfo.key + ':';
           propertyCell.className = 'additional-info-property';
           additionalInfoRow.appendChild(propertyCell);
 
           // Set the value of the property cell text.
           var valueCell = document.createElement('td');
-          valueCell.textContent =
-              autocompleteSuggestion[propertyName][additionalInfoKey];
+          valueCell.textContent = additionalInfo.value;
           valueCell.className = 'additional-info-value';
           additionalInfoRow.appendChild(valueCell);
 
           additionalInfoTable.appendChild(additionalInfoRow);
         }
         cell.appendChild(additionalInfoTable);
       } else if (typeof autocompleteSuggestion[propertyName] == 'boolean') {
         // If this is a boolean, display a checkmark or an X instead of
         // the strings true or false.
         if (autocompleteSuggestion[propertyName]) {
@@ skipping 16 matching lines @@
           // All other data types (integer, strings, etc.) display their
           // normal toString() output.
           cell.textContent = autocompleteSuggestion[propertyName];
         }
       }
     }  // else: if propertyName is undefined, we leave the cell blank
     return cell;
   }
 
   /**
-   * Called by C++ code when we get an update from the
-   * AutocompleteController.  We simply append the result to
-   * progressiveAutocompleteResults and refresh the page.
-   */
-  function handleNewAutocompleteResult(result) {
-    progressiveAutocompleteResults.push(result);
-    refresh();
-  }
-
-  /**
    * Appends some human-readable information about the provided
    * autocomplete result to the HTML node with id omnibox-debug-text.
    * The current human-readable form is a few lines about general
    * autocomplete result statistics followed by a table with one line
-   * for each autocomplete match.  The input parameter result is a
-   * complex Object with lots of information about various
-   * autocomplete matches.  Here's an example of what it looks like:
-   * <pre>
-   * {@code
-   * {
-   *   'done': false,
-   *   'time_since_omnibox_started_ms': 15,
-   *   'host': 'mai',
-   *   'is_typed_host': false,
-   *   'combined_results' : {
-   *     'num_items': 4,
-   *     'item_0': {
-   *       'destination_url': 'http://mail.google.com',
-   *       'provider_name': 'HistoryURL',
-   *       'relevance': 1410,
-   *       ...
-   *     }
-   *     'item_1: {
-   *       ...
-   *     }
-   *     ...
-   *   }
-   *   'results_by_provider': {
-   *     'HistoryURL' : {
-   *       'num_items': 3,
-   *         ...
-   *       }
-   *     'Search' : {
-   *       'num_items': 1,
-   *       ...
-   *     }
-   *     ...
-   *   }
-   * }
-   * }
-   * </pre>
-   * For more information on how the result is packed, see the
-   * corresponding code in chrome/browser/ui/webui/omnibox_ui.cc
+   * for each autocomplete match.  The input parameter is an OmniboxResultMojo.
    */
   function addResultToOutput(result) {
     var output = $('omnibox-debug-text');
     var inDetailedMode = $('show-details').checked;
     var showIncompleteResults = $('show-incomplete-results').checked;
     var showPerProviderResults = $('show-all-providers').checked;
 
     // Always output cursor position.
     var p = document.createElement('p');
     p.textContent = 'cursor position = ' + cursorPositionUsed;
@@ skipping 40 matching lines @@
 
     // Individual results go after the lines below.
     var group = document.createElement('a');
     group.className = 'group-separator';
     group.textContent = 'Results for individual providers.';
     output.appendChild(group);
 
     // Add the per-provider result tables with labels. We do not append the
     // combined/merged result table since we already have the per provider
     // results.
-    for (var provider in result.results_by_provider) {
-      var results = result.results_by_provider[provider];
+    for (var i = 0; i < result.results_by_provider.length; i++) {
+      var providerResults = result.results_by_provider[i];
       // If we have no results we do not display anything.
-      if (results.num_items == 0) {
+      if (providerResults.results.length == 0) {
         continue;
       }
       var p = document.createElement('p');
-      p.appendChild(addResultTableToOutput(results));
+      p.appendChild(addResultTableToOutput(providerResults.results));
       output.appendChild(p);
     }
   }
 
   /**
-   * @param {Object} result either the combined_results component of
-   *     the structure described in the comment by addResultToOutput()
-   *     above or one of the per-provider results in the structure.
-   *     (Both have the same format).
+   * @param {Object} result an array of AutocompleteMatchMojos.
    * @return {HTMLTableCellElement} that is a user-readable HTML
    *     representation of this object.
    */
   function addResultTableToOutput(result) {
     var inDetailedMode = $('show-details').checked;
     // Create a table to hold all the autocomplete items.
     var table = document.createElement('table');
     table.className = 'autocomplete-results-table';
     table.appendChild(createAutocompleteResultTableHeader());
     // Loop over every autocomplete item and add it as a row in the table.
-    for (var i = 0; i < result.num_items; i++) {
-      var autocompleteSuggestion = result['item_' + i];
+    for (var i = 0; i < result.length; i++) {
+      var autocompleteSuggestion = result[i];
       var row = document.createElement('tr');
       // Loop over all the columns/properties and output either them
       // all (if we're in detailed mode) or only the ones marked displayAlways.
       // Keep track of which properties we displayed.
       var displayedProperties = {};
       for (var j = 0; j < PROPERTY_OUTPUT_ORDER.length; j++) {
         if (inDetailedMode || PROPERTY_OUTPUT_ORDER[j].displayAlways) {
           row.appendChild(createCellForPropertyAndRemoveProperty(
               autocompleteSuggestion, PROPERTY_OUTPUT_ORDER[j].propertyName));
           displayedProperties[PROPERTY_OUTPUT_ORDER[j].propertyName] = true;
@@ skipping 38 matching lines @@
       // Display the results.
       var showIncompleteResults = $('show-incomplete-results').checked;
       var startIndex = showIncompleteResults ? 0 :
           progressiveAutocompleteResults.length - 1;
       for (var i = startIndex; i < progressiveAutocompleteResults.length; i++) {
         addResultToOutput(progressiveAutocompleteResults[i]);
       }
     }
   }
 
-  return {
-    initialize: initialize,
-    startOmniboxQuery: startOmniboxQuery,
-    handleNewAutocompleteResult: handleNewAutocompleteResult
+  function OmniboxPageImpl(browser) {
+    this.browser_ = browser;
+    page = this;
+    initialize();
+  }
+
+  OmniboxPageImpl.prototype =
+      Object.create(browser.OmniboxPageStub.prototype);
+
+  OmniboxPageImpl.prototype.handleNewAutocompleteResult = function(result) {
+    progressiveAutocompleteResults.push(result);
+    refresh();
+  };
+
+  return function(handle) {
+    connection = new connector.Connection(handle, OmniboxPageImpl,
+                                          browser.OmniboxUIHandlerMojoProxy);
   };
 });
-
-document.addEventListener('DOMContentLoaded', omniboxDebug.initialize);