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 ' + |
121 'navigates to).'), | 122 'omnibox 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 |