| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * Javascript for omnibox.html, served from chrome://omnibox/ | 6 * Javascript for omnibox.html, served from chrome://omnibox/ |
| 7 * This is used to debug omnibox ranking. The user enters some text | 7 * This is used to debug omnibox ranking. The user enters some text |
| 8 * into a box, submits it, and then sees lots of debug information | 8 * into a box, submits it, and then sees lots of debug information |
| 9 * from the autocompleter that shows what omnibox would do with that | 9 * from the autocompleter that shows what omnibox would do with that |
| 10 * input. | 10 * input. |
| 11 * | 11 * |
| 12 * The simple object defined in this javascript file listens for | 12 * The simple object defined in this javascript file listens for |
| 13 * certain events on omnibox.html, sends (when appropriate) the | 13 * certain events on omnibox.html, sends (when appropriate) the |
| 14 * input text to C++ code to start the omnibox autcomplete controller | 14 * input text to C++ code to start the omnibox autcomplete controller |
| 15 * working, and listens from callbacks from the C++ code saying that | 15 * working, and listens from callbacks from the C++ code saying that |
| 16 * results are available. When results (possibly intermediate ones) | 16 * results are available. When results (possibly intermediate ones) |
| 17 * are available, the Javascript formats them and displays them. | 17 * are available, the Javascript formats them and displays them. |
| 18 */ | 18 */ |
| 19 | 19 |
| 20 (function() { | 20 (function() { |
| 21 /** | 21 /** |
| 22 * Register our event handlers. | 22 * Register our event handlers. |
| 23 */ | 23 */ |
| 24 function initialize() { | 24 function initialize() { |
| 25 $('omnibox-input-form').addEventListener( | 25 $('omnibox-input-form') |
| 26 'submit', startOmniboxQuery, false); | 26 .addEventListener('submit', startOmniboxQuery, false); |
| 27 $('prevent-inline-autocomplete').addEventListener( | 27 $('prevent-inline-autocomplete') |
| 28 'change', startOmniboxQuery); | 28 .addEventListener('change', startOmniboxQuery); |
| 29 $('prefer-keyword').addEventListener('change', startOmniboxQuery); | 29 $('prefer-keyword').addEventListener('change', startOmniboxQuery); |
| 30 $('page-classification').addEventListener('change', startOmniboxQuery); | 30 $('page-classification').addEventListener('change', startOmniboxQuery); |
| 31 $('show-details').addEventListener('change', refresh); | 31 $('show-details').addEventListener('change', refresh); |
| 32 $('show-incomplete-results').addEventListener('change', refresh); | 32 $('show-incomplete-results').addEventListener('change', refresh); |
| 33 $('show-all-providers').addEventListener('change', refresh); | 33 $('show-all-providers').addEventListener('change', refresh); |
| 34 } | 34 } |
| 35 | 35 |
| 36 /** | 36 /** |
| 37 * @type {OmniboxResultMojo} an array of all autocomplete results we've seen | 37 * @type {OmniboxResultMojo} an array of all autocomplete results we've seen |
| 38 * for this query. We append to this list once for every call to | 38 * for this query. We append to this list once for every call to |
| (...skipping 18 matching lines...) Expand all Loading... |
| 57 // First, clear the results of past calls (if any). | 57 // First, clear the results of past calls (if any). |
| 58 progressiveAutocompleteResults = []; | 58 progressiveAutocompleteResults = []; |
| 59 // Then, call chrome with a five-element list: | 59 // Then, call chrome with a five-element list: |
| 60 // - first element: the value in the text box | 60 // - first element: the value in the text box |
| 61 // - second element: the location of the cursor in the text box | 61 // - second element: the location of the cursor in the text box |
| 62 // - third element: the value of prevent-inline-autocomplete | 62 // - third element: the value of prevent-inline-autocomplete |
| 63 // - forth element: the value of prefer-keyword | 63 // - forth element: the value of prefer-keyword |
| 64 // - fifth element: the value of page-classification | 64 // - fifth element: the value of page-classification |
| 65 cursorPositionUsed = $('input-text').selectionEnd; | 65 cursorPositionUsed = $('input-text').selectionEnd; |
| 66 browserProxy.startOmniboxQuery( | 66 browserProxy.startOmniboxQuery( |
| 67 $('input-text').value, | 67 $('input-text').value, cursorPositionUsed, |
| 68 cursorPositionUsed, | 68 $('prevent-inline-autocomplete').checked, $('prefer-keyword').checked, |
| 69 $('prevent-inline-autocomplete').checked, | |
| 70 $('prefer-keyword').checked, | |
| 71 parseInt($('page-classification').value)); | 69 parseInt($('page-classification').value)); |
| 72 // Cancel the submit action. i.e., don't submit the form. (We handle | 70 // Cancel the submit action. i.e., don't submit the form. (We handle |
| 73 // display the results solely with Javascript.) | 71 // display the results solely with Javascript.) |
| 74 event.preventDefault(); | 72 event.preventDefault(); |
| 75 } | 73 } |
| 76 | 74 |
| 77 /** | 75 /** |
| 78 * Returns a simple object with information about how to display an | 76 * Returns a simple object with information about how to display an |
| 79 * autocomplete result data field. | 77 * autocomplete result data field. |
| 80 * @param {string} header the label for the top of the column/table. | 78 * @param {string} header the label for the top of the column/table. |
| 81 * @param {string} urlLabelForHeader the URL that the header should point | 79 * @param {string} urlLabelForHeader the URL that the header should point |
| 82 * to (if non-empty). | 80 * to (if non-empty). |
| 83 * @param {string} propertyName the name of the property in the autocomplete | 81 * @param {string} propertyName the name of the property in the autocomplete |
| 84 * result record that we lookup. | 82 * result record that we lookup. |
| 85 * @param {boolean} displayAlways whether the property should be displayed | 83 * @param {boolean} displayAlways whether the property should be displayed |
| 86 * regardless of whether we're in detailed more. | 84 * regardless of whether we're in detailed more. |
| 87 * @param {string} tooltip a description of the property that will be | 85 * @param {string} tooltip a description of the property that will be |
| 88 * presented as a tooltip when the mouse is hovered over the column title. | 86 * presented as a tooltip when the mouse is hovered over the column title. |
| 89 * @constructor | 87 * @constructor |
| 90 */ | 88 */ |
| 91 function PresentationInfoRecord(header, url, propertyName, displayAlways, | 89 function PresentationInfoRecord( |
| 92 tooltip) { | 90 header, url, propertyName, displayAlways, tooltip) { |
| 93 this.header = header; | 91 this.header = header; |
| 94 this.urlLabelForHeader = url; | 92 this.urlLabelForHeader = url; |
| 95 this.propertyName = propertyName; | 93 this.propertyName = propertyName; |
| 96 this.displayAlways = displayAlways; | 94 this.displayAlways = displayAlways; |
| 97 this.tooltip = tooltip; | 95 this.tooltip = tooltip; |
| 98 } | 96 } |
| 99 | 97 |
| 100 /** | 98 /** |
| 101 * A constant that's used to decide what autocomplete result | 99 * A constant that's used to decide what autocomplete result |
| 102 * properties to output in what order. This is an array of | 100 * properties to output in what order. This is an array of |
| 103 * PresentationInfoRecord() objects; for details see that | 101 * PresentationInfoRecord() objects; for details see that |
| 104 * function. | 102 * function. |
| 105 * @type {Array<Object>} | 103 * @type {Array<Object>} |
| 106 * @const | 104 * @const |
| 107 */ | 105 */ |
| 108 var PROPERTY_OUTPUT_ORDER = [ | 106 var PROPERTY_OUTPUT_ORDER = [ |
| 109 new PresentationInfoRecord('Provider', '', 'provider_name', true, | 107 new PresentationInfoRecord( |
| 108 'Provider', '', 'provider_name', true, |
| 110 'The AutocompleteProvider suggesting this result.'), | 109 'The AutocompleteProvider suggesting this result.'), |
| 111 new PresentationInfoRecord('Type', '', 'type', true, | 110 new PresentationInfoRecord( |
| 112 'The type of the result.'), | 111 'Type', '', 'type', true, 'The type of the result.'), |
| 113 new PresentationInfoRecord('Relevance', '', 'relevance', true, | 112 new PresentationInfoRecord( |
| 113 'Relevance', '', 'relevance', true, |
| 114 'The result score. Higher is more relevant.'), | 114 'The result score. Higher is more relevant.'), |
| 115 new PresentationInfoRecord('Contents', '', 'contents', true, | 115 new PresentationInfoRecord( |
| 116 'Contents', '', 'contents', true, |
| 116 'The text that is presented identifying the result.'), | 117 'The text that is presented identifying the result.'), |
| 117 new PresentationInfoRecord( | 118 new PresentationInfoRecord( |
| 118 'Can Be Default', '', 'allowed_to_be_default_match', false, | 119 'Can Be Default', '', 'allowed_to_be_default_match', false, |
| 119 'A green checkmark indicates that the result can be the default ' + | 120 'A green checkmark indicates that the result can be the default ' + |
| 120 'match (i.e., can be the match that pressing enter in the omnibox ' + | 121 'match (i.e., can be the match that pressing enter in the omnibox '
+ |
| 121 'navigates to).'), | 122 'navigates to).'), |
| 122 new PresentationInfoRecord('Starred', '', 'starred', false, | 123 new PresentationInfoRecord( |
| 124 'Starred', '', 'starred', false, |
| 123 'A green checkmark indicates that the result has been bookmarked.'), | 125 'A green checkmark indicates that the result has been bookmarked.'), |
| 124 new PresentationInfoRecord('Description', '', 'description', false, | 126 new PresentationInfoRecord( |
| 127 'Description', '', 'description', false, |
| 125 'The page title of the result.'), | 128 'The page title of the result.'), |
| 126 new PresentationInfoRecord('URL', '', 'destination_url', true, | 129 new PresentationInfoRecord( |
| 127 'The URL for the result.'), | 130 'URL', '', 'destination_url', true, 'The URL for the result.'), |
| 128 new PresentationInfoRecord('Fill Into Edit', '', 'fill_into_edit', false, | 131 new PresentationInfoRecord( |
| 132 'Fill Into Edit', '', 'fill_into_edit', false, |
| 129 'The text shown in the omnibox when the result is selected.'), | 133 'The text shown in the omnibox when the result is selected.'), |
| 130 new PresentationInfoRecord( | 134 new PresentationInfoRecord( |
| 131 'Inline Autocompletion', '', 'inline_autocompletion', false, | 135 'Inline Autocompletion', '', 'inline_autocompletion', false, |
| 132 'The text shown in the omnibox as a blue highlight selection ' + | 136 'The text shown in the omnibox as a blue highlight selection ' + |
| 133 'following the cursor, if this match is shown inline.'), | 137 'following the cursor, if this match is shown inline.'), |
| 134 new PresentationInfoRecord('Del', '', 'deletable', false, | 138 new PresentationInfoRecord( |
| 139 'Del', '', 'deletable', false, |
| 135 'A green checkmark indicates that the result can be deleted from ' + | 140 'A green checkmark indicates that the result can be deleted from ' + |
| 136 'the visit history.'), | 141 'the visit history.'), |
| 137 new PresentationInfoRecord('Prev', '', 'from_previous', false, ''), | 142 new PresentationInfoRecord('Prev', '', 'from_previous', false, ''), |
| 138 new PresentationInfoRecord( | 143 new PresentationInfoRecord( |
| 139 'Tran', | 144 'Tran', |
| 140 'http://code.google.com/codesearch#OAMlx_jo-ck/src/content/public/' + | 145 'http://code.google.com/codesearch#OAMlx_jo-ck/src/content/public/' + |
| 141 'common/page_transition_types.h&exact_package=chromium&l=24', | 146 'common/page_transition_types.h&exact_package=chromium&l=24', |
| 142 'transition', false, | 147 'transition', false, 'How the user got to the result.'), |
| 143 'How the user got to the result.'), | |
| 144 new PresentationInfoRecord( | 148 new PresentationInfoRecord( |
| 145 'Done', '', 'provider_done', false, | 149 'Done', '', 'provider_done', false, |
| 146 'A green checkmark indicates that the provider is done looking for ' + | 150 'A green checkmark indicates that the provider is done looking for ' + |
| 147 'more results.'), | 151 'more results.'), |
| 148 new PresentationInfoRecord( | 152 new PresentationInfoRecord( |
| 149 'Associated Keyword', '', 'associated_keyword', false, | 153 'Associated Keyword', '', 'associated_keyword', false, |
| 150 'If non-empty, a "press tab to search" hint will be shown and will ' + | 154 'If non-empty, a "press tab to search" hint will be shown and will ' + |
| 151 'engage this keyword.'), | 155 'engage this keyword.'), |
| 152 new PresentationInfoRecord( | 156 new PresentationInfoRecord( |
| 153 'Keyword', '', 'keyword', false, | 157 'Keyword', '', 'keyword', false, |
| 154 'The keyword of the search engine to be used.'), | 158 'The keyword of the search engine to be used.'), |
| 155 new PresentationInfoRecord( | 159 new PresentationInfoRecord( |
| 156 'Duplicates', '', 'duplicates', false, | 160 'Duplicates', '', 'duplicates', false, |
| 157 'The number of matches that have been marked as duplicates of this ' + | 161 'The number of matches that have been marked as duplicates of this ' + |
| 158 'match.'), | 162 'match.'), |
| 159 new PresentationInfoRecord( | 163 new PresentationInfoRecord( |
| 160 'Additional Info', '', 'additional_info', false, | 164 'Additional Info', '', 'additional_info', false, |
| 161 'Provider-specific information about the result.') | 165 'Provider-specific information about the result.') |
| 162 ]; | 166 ]; |
| 163 | 167 |
| 164 /** | 168 /** |
| 165 * Returns an HTML Element of type table row that contains the | 169 * Returns an HTML Element of type table row that contains the |
| 166 * headers we'll use for labeling the columns. If we're in | 170 * headers we'll use for labeling the columns. If we're in |
| 167 * detailed_mode, we use all the headers. If not, we only use ones | 171 * detailed_mode, we use all the headers. If not, we only use ones |
| 168 * marked displayAlways. | 172 * marked displayAlways. |
| (...skipping 23 matching lines...) Expand all Loading... |
| 192 } | 196 } |
| 193 | 197 |
| 194 /** | 198 /** |
| 195 * @param {AutocompleteMatchMojo} autocompleteSuggestion the particular | 199 * @param {AutocompleteMatchMojo} autocompleteSuggestion the particular |
| 196 * autocomplete suggestion we're in the process of displaying. | 200 * autocomplete suggestion we're in the process of displaying. |
| 197 * @param {string} propertyName the particular property of the autocomplete | 201 * @param {string} propertyName the particular property of the autocomplete |
| 198 * suggestion that should go in this cell. | 202 * suggestion that should go in this cell. |
| 199 * @return {HTMLTableCellElement} that contains the value within this | 203 * @return {HTMLTableCellElement} that contains the value within this |
| 200 * autocompleteSuggestion associated with propertyName. | 204 * autocompleteSuggestion associated with propertyName. |
| 201 */ | 205 */ |
| 202 function createCellForPropertyAndRemoveProperty(autocompleteSuggestion, | 206 function createCellForPropertyAndRemoveProperty( |
| 203 propertyName) { | 207 autocompleteSuggestion, propertyName) { |
| 204 var cell = document.createElement('td'); | 208 var cell = document.createElement('td'); |
| 205 if (propertyName in autocompleteSuggestion) { | 209 if (propertyName in autocompleteSuggestion) { |
| 206 if (propertyName == 'additional_info') { | 210 if (propertyName == 'additional_info') { |
| 207 // |additional_info| embeds a two-column table of provider-specific data | 211 // |additional_info| embeds a two-column table of provider-specific data |
| 208 // within this cell. |additional_info| is an array of | 212 // within this cell. |additional_info| is an array of |
| 209 // AutocompleteAdditionalInfo. | 213 // AutocompleteAdditionalInfo. |
| 210 var additionalInfoTable = document.createElement('table'); | 214 var additionalInfoTable = document.createElement('table'); |
| 211 for (var i = 0; i < autocompleteSuggestion[propertyName].length; i++) { | 215 for (var i = 0; i < autocompleteSuggestion[propertyName].length; i++) { |
| 212 var additionalInfo = autocompleteSuggestion[propertyName][i]; | 216 var additionalInfo = autocompleteSuggestion[propertyName][i]; |
| 213 var additionalInfoRow = document.createElement('tr'); | 217 var additionalInfoRow = document.createElement('tr'); |
| (...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 273 var p = document.createElement('p'); | 277 var p = document.createElement('p'); |
| 274 p.textContent = 'cursor position = ' + cursorPositionUsed; | 278 p.textContent = 'cursor position = ' + cursorPositionUsed; |
| 275 output.appendChild(p); | 279 output.appendChild(p); |
| 276 | 280 |
| 277 // Output the result-level features in detailed mode and in | 281 // Output the result-level features in detailed mode and in |
| 278 // show incomplete results mode. We do the latter because without | 282 // show incomplete results mode. We do the latter because without |
| 279 // these result-level features, one can't make sense of each | 283 // these result-level features, one can't make sense of each |
| 280 // batch of results. | 284 // batch of results. |
| 281 if (inDetailedMode || showIncompleteResults) { | 285 if (inDetailedMode || showIncompleteResults) { |
| 282 var p1 = document.createElement('p'); | 286 var p1 = document.createElement('p'); |
| 283 p1.textContent = 'elapsed time = ' + | 287 p1.textContent = |
| 284 result.time_since_omnibox_started_ms + 'ms'; | 288 'elapsed time = ' + result.time_since_omnibox_started_ms + 'ms'; |
| 285 output.appendChild(p1); | 289 output.appendChild(p1); |
| 286 var p2 = document.createElement('p'); | 290 var p2 = document.createElement('p'); |
| 287 p2.textContent = 'all providers done = ' + result.done; | 291 p2.textContent = 'all providers done = ' + result.done; |
| 288 output.appendChild(p2); | 292 output.appendChild(p2); |
| 289 var p3 = document.createElement('p'); | 293 var p3 = document.createElement('p'); |
| 290 p3.textContent = 'host = ' + result.host; | 294 p3.textContent = 'host = ' + result.host; |
| 291 if ('is_typed_host' in result) { | 295 if ('is_typed_host' in result) { |
| 292 // Only output the is_typed_host information if available. (It may | 296 // Only output the is_typed_host information if available. (It may |
| 293 // be missing if the history database lookup failed.) | 297 // be missing if the history database lookup failed.) |
| 294 p3.textContent = p3.textContent + ' has is_typed_host = ' + | 298 p3.textContent = |
| 295 result.is_typed_host; | 299 p3.textContent + ' has is_typed_host = ' + result.is_typed_host; |
| 296 } | 300 } |
| 297 output.appendChild(p3); | 301 output.appendChild(p3); |
| 298 } | 302 } |
| 299 | 303 |
| 300 // Combined results go after the lines below. | 304 // Combined results go after the lines below. |
| 301 var group = document.createElement('a'); | 305 var group = document.createElement('a'); |
| 302 group.className = 'group-separator'; | 306 group.className = 'group-separator'; |
| 303 group.textContent = 'Combined results.'; | 307 group.textContent = 'Combined results.'; |
| 304 output.appendChild(group); | 308 output.appendChild(group); |
| 305 | 309 |
| (...skipping 86 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 392 * example of the output, play with chrome://omnibox/ | 396 * example of the output, play with chrome://omnibox/ |
| 393 */ | 397 */ |
| 394 function refresh() { | 398 function refresh() { |
| 395 // Erase whatever is currently being displayed. | 399 // Erase whatever is currently being displayed. |
| 396 var output = $('omnibox-debug-text'); | 400 var output = $('omnibox-debug-text'); |
| 397 output.innerHTML = ''; | 401 output.innerHTML = ''; |
| 398 | 402 |
| 399 if (progressiveAutocompleteResults.length > 0) { // if we have results | 403 if (progressiveAutocompleteResults.length > 0) { // if we have results |
| 400 // Display the results. | 404 // Display the results. |
| 401 var showIncompleteResults = $('show-incomplete-results').checked; | 405 var showIncompleteResults = $('show-incomplete-results').checked; |
| 402 var startIndex = showIncompleteResults ? 0 : | 406 var startIndex = |
| 403 progressiveAutocompleteResults.length - 1; | 407 showIncompleteResults ? 0 : progressiveAutocompleteResults.length - 1; |
| 404 for (var i = startIndex; i < progressiveAutocompleteResults.length; i++) { | 408 for (var i = startIndex; i < progressiveAutocompleteResults.length; i++) { |
| 405 addResultToOutput(progressiveAutocompleteResults[i]); | 409 addResultToOutput(progressiveAutocompleteResults[i]); |
| 406 } | 410 } |
| 407 } | 411 } |
| 408 } | 412 } |
| 409 | 413 |
| 410 // NOTE: Need to keep a global reference to the |pageImpl| such that it is not | 414 // NOTE: Need to keep a global reference to the |pageImpl| such that it is not |
| 411 // garbage collected, which causes the pipe to close and future calls from C++ | 415 // garbage collected, which causes the pipe to close and future calls from C++ |
| 412 // to JS to get dropped. | 416 // to JS to get dropped. |
| 413 var pageImpl = null; | 417 var pageImpl = null; |
| 414 var browserProxy = null; | 418 var browserProxy = null; |
| 415 | 419 |
| 416 function initializeProxies() { | 420 function initializeProxies() { |
| 417 return importModules([ | 421 return importModules([ |
| 418 'mojo/public/js/bindings', | 422 'mojo/public/js/bindings', |
| 419 'chrome/browser/ui/webui/omnibox/omnibox.mojom', | 423 'chrome/browser/ui/webui/omnibox/omnibox.mojom', |
| 420 'content/public/renderer/frame_interfaces', | 424 'content/public/renderer/frame_interfaces', |
| 421 ]).then(function(modules) { | 425 ]) |
| 422 var bindings = modules[0]; | 426 .then(function(modules) { |
| 423 var mojom = modules[1]; | 427 var bindings = modules[0]; |
| 424 var frameInterfaces = modules[2]; | 428 var mojom = modules[1]; |
| 429 var frameInterfaces = modules[2]; |
| 425 | 430 |
| 426 browserProxy = new mojom.OmniboxPageHandlerPtr( | 431 browserProxy = new mojom.OmniboxPageHandlerPtr( |
| 427 frameInterfaces.getInterface(mojom.OmniboxPageHandler.name)); | 432 frameInterfaces.getInterface(mojom.OmniboxPageHandler.name)); |
| 428 | 433 |
| 429 /** @constructor */ | 434 /** @constructor */ |
| 430 var OmniboxPageImpl = function() { | 435 var OmniboxPageImpl = function() { |
| 431 this.binding = new bindings.Binding(mojom.OmniboxPage, this); | 436 this.binding = new bindings.Binding(mojom.OmniboxPage, this); |
| 432 }; | 437 }; |
| 433 | 438 |
| 434 OmniboxPageImpl.prototype = { | 439 OmniboxPageImpl.prototype = { |
| 435 /** @override */ | 440 /** @override */ |
| 436 handleNewAutocompleteResult: function(result) { | 441 handleNewAutocompleteResult: function(result) { |
| 437 progressiveAutocompleteResults.push(result); | 442 progressiveAutocompleteResults.push(result); |
| 438 refresh(); | 443 refresh(); |
| 439 }, | 444 }, |
| 440 }; | 445 }; |
| 441 | 446 |
| 442 pageImpl = new OmniboxPageImpl(); | 447 pageImpl = new OmniboxPageImpl(); |
| 443 browserProxy.setClientPage(pageImpl.binding.createInterfacePtrAndBind()); | 448 browserProxy.setClientPage( |
| 444 }); | 449 pageImpl.binding.createInterfacePtrAndBind()); |
| 450 }); |
| 445 } | 451 } |
| 446 | 452 |
| 447 document.addEventListener('DOMContentLoaded', function() { | 453 document.addEventListener('DOMContentLoaded', function() { |
| 448 return initializeProxies().then(function() { | 454 return initializeProxies().then(function() { |
| 449 initialize(); | 455 initialize(); |
| 450 }); | 456 }); |
| 451 }); | 457 }); |
| 452 })(); | 458 })(); |
| OLD | NEW |