| // Copyright 2018 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. |
| |
| cr.define('omnibox_output', function() { |
| /** |
| * Details how to display an autocomplete result data field. |
| * @typedef {{ |
| * header: string, |
| * url: string, |
| * propertyName: string, |
| * displayAlways: boolean, |
| * tooltip: string, |
| * }} |
| */ |
| let PresentationInfoRecord; |
| |
| /** |
| * A constant that's used to decide what autocomplete result |
| * properties to output in what order. |
| * @type {!Array<!PresentationInfoRecord>} |
| */ |
| const PROPERTY_OUTPUT_ORDER = [ |
| { |
| header: 'Provider', |
| url: '', |
| propertyName: 'providerName', |
| displayAlways: true, |
| tooltip: 'The AutocompleteProvider suggesting this result.' |
| }, |
| { |
| header: 'Type', |
| url: '', |
| propertyName: 'type', |
| displayAlways: true, |
| tooltip: 'The type of the result.' |
| }, |
| { |
| header: 'Relevance', |
| url: '', |
| propertyName: 'relevance', |
| displayAlways: true, |
| tooltip: 'The result score. Higher is more relevant.' |
| }, |
| { |
| header: 'Contents', |
| url: '', |
| propertyName: 'contents', |
| displayAlways: true, |
| tooltip: 'The text that is presented identifying the result.' |
| }, |
| { |
| header: 'CanBeDefault', |
| url: '', |
| propertyName: 'allowedToBeDefaultMatch', |
| displayAlways: false, |
| tooltip: |
| 'A green checkmark indicates that the result can be the default ' + |
| 'match(i.e., can be the match that pressing enter in the omnibox' + |
| 'navigates to).' |
| }, |
| { |
| header: 'Starred', |
| url: '', |
| propertyName: 'starred', |
| displayAlways: false, |
| tooltip: |
| 'A green checkmark indicates that the result has been bookmarked.' |
| }, |
| { |
| header: 'Hastabmatch', |
| url: '', |
| propertyName: 'hasTabMatch', |
| displayAlways: false, |
| tooltip: |
| 'A green checkmark indicates that the result URL matches an open' + |
| 'tab.' |
| }, |
| { |
| header: 'Description', |
| url: '', |
| propertyName: 'description', |
| displayAlways: false, |
| tooltip: 'The page title of the result.' |
| }, |
| { |
| header: 'URL', |
| url: '', |
| propertyName: 'destinationUrl', |
| displayAlways: true, |
| tooltip: 'The URL for the result.' |
| }, |
| { |
| header: 'FillIntoEdit', |
| url: '', |
| propertyName: 'fillIntoEdit', |
| displayAlways: false, |
| tooltip: 'The text shown in the omnibox when the result is selected.' |
| }, |
| { |
| header: 'InlineAutocompletion', |
| url: '', |
| propertyName: 'inlineAutocompletion', |
| displayAlways: false, |
| tooltip: 'The text shown in the omnibox as a blue highlight selection ' + |
| 'following the cursor, if this match is shown inline.' |
| }, |
| { |
| header: 'Del', |
| url: '', |
| propertyName: 'deletable', |
| displayAlways: false, |
| tooltip: |
| 'A green checkmark indicates that the result can be deleted from ' + |
| 'the visit history.' |
| }, |
| { |
| header: 'Prev', |
| url: '', |
| propertyName: 'fromPrevious', |
| displayAlways: false, |
| tooltip: '' |
| }, |
| { |
| header: 'Tran', |
| url: |
| 'https://cs.chromium.org/chromium/src/ui/base/page_transition_types.h?q=page_transition_types.h&sq=package:chromium&dr=CSs&l=14', |
| propertyName: 'transition', |
| displayAlways: false, |
| tooltip: 'How the user got to the result.' |
| }, |
| { |
| header: 'Done', |
| url: '', |
| propertyName: 'providerDone', |
| displayAlways: false, |
| tooltip: |
| 'A green checkmark indicates that the provider is done looking ' + |
| 'for more results.' |
| }, |
| { |
| header: 'AssociatedKeyword', |
| url: '', |
| propertyName: 'associatedKeyword', |
| displayAlways: false, |
| tooltip: 'If non-empty, a "press tab to search" hint will be shown and ' + |
| 'will engage this keyword.' |
| }, |
| { |
| header: 'Keyword', |
| url: '', |
| propertyName: 'keyword', |
| displayAlways: false, |
| tooltip: 'The keyword of the search engine to be used.' |
| }, |
| { |
| header: 'Duplicates', |
| url: '', |
| propertyName: 'duplicates', |
| displayAlways: false, |
| tooltip: 'The number of matches that have been marked as duplicates of ' + |
| 'this match..' |
| }, |
| { |
| header: 'AdditionalInfo', |
| url: '', |
| propertyName: 'additionalInfo', |
| displayAlways: false, |
| tooltip: 'Provider-specific information about the result.' |
| } |
| ]; |
| |
| /** |
| * In addition to representing the rendered HTML element, OmniboxOutput also |
| * provides a single public interface to interact with the output: |
| * 1. Render tables from responses (RenderDelegate) |
| * 2. Control visibility based on display options (TODO) |
| * 3. Control visibility and coloring based on search text (FilterDelegate) |
| * 4. Export and copy output (CopyDelegate) |
| * 5. Preserve inputs and reset inputs to default (TODO) |
| * 6. Export and import inputs (TODO) |
| * With regards to interacting with RenderDelegate, OmniboxOutput tracks and |
| * aggregates responses from the C++ autocomplete controller. Typically, the |
| * C++ controller returns 3 sets of results per query, unless a new query is |
| * submitted before all 3 responses. OmniboxController also triggers |
| * appending to and clearing of OmniboxOutput when appropriate (e.g., upon |
| * receiving a new response or a change in display inputs). |
| */ |
| class OmniboxOutput extends OmniboxElement { |
| /** @return {string} */ |
| static get is() { |
| return 'omnibox-output'; |
| } |
| |
| constructor() { |
| super('omnibox-output-template'); |
| |
| /** @type {!RenderDelegate} */ |
| this.renderDelegate = new RenderDelegate(this.$$('contents')); |
| /** @type {!CopyDelegate} */ |
| this.copyDelegate = new CopyDelegate(this); |
| /** @type {!FilterDelegate} */ |
| this.filterDelegate = new FilterDelegate(this); |
| |
| /** @type {!Array<!mojom.OmniboxResult>} */ |
| this.responses = []; |
| /** @private {!QueryInputs} */ |
| this.queryInputs_ = /** @type {!QueryInputs} */ ({}); |
| /** @private {!DisplayInputs} */ |
| this.displayInputs_ = /** @type {!DisplayInputs} */ ({}); |
| } |
| |
| /** @param {!QueryInputs} queryInputs */ |
| updateQueryInputs(queryInputs) { |
| this.queryInputs_ = queryInputs; |
| this.refresh_(); |
| } |
| |
| /** @param {!DisplayInputs} displayInputs */ |
| updateDisplayInputs(displayInputs) { |
| this.displayInputs_ = displayInputs; |
| this.refresh_(); |
| } |
| |
| clearAutocompleteResponses() { |
| this.responses = []; |
| this.refresh_(); |
| } |
| |
| /** @param {!mojom.OmniboxResult} response */ |
| addAutocompleteResponse(response) { |
| this.responses.push(response); |
| this.refresh_(); |
| } |
| |
| /** @private */ |
| refresh_() { |
| this.renderDelegate.refresh( |
| this.queryInputs_, this.responses, this.displayInputs_); |
| } |
| |
| /** @return {!Array<!OutputMatch>} */ |
| get matches() { |
| return this.renderDelegate.matches; |
| } |
| } |
| |
| // Responsible for rendering the output HTML. |
| class RenderDelegate { |
| /** @param {!Element} containerElement */ |
| constructor(containerElement) { |
| /** @private {!Element} */ |
| this.containerElement_ = containerElement; |
| } |
| |
| /** |
| * @param {!QueryInputs} queryInputs |
| * @param {!Array<!mojom.OmniboxResult>} responses |
| * @param {!DisplayInputs} displayInputs |
| */ |
| refresh(queryInputs, responses, displayInputs) { |
| if (!responses.length) |
| return; |
| |
| /** @private {!Array<OutputResultsGroup>} */ |
| this.resultsGroup_; |
| |
| if (displayInputs.showIncompleteResults) { |
| this.resultsGroup_ = responses.map( |
| response => |
| new OutputResultsGroup(response, queryInputs.cursorPosition)); |
| } else { |
| const lastResponse = responses[responses.length - 1]; |
| this.resultsGroup_ = |
| [new OutputResultsGroup(lastResponse, queryInputs.cursorPosition)]; |
| } |
| |
| this.clearOutput_(); |
| this.resultsGroup_.forEach( |
| resultsGroup => |
| this.containerElement_.appendChild(resultsGroup.render( |
| displayInputs.showDetails, |
| displayInputs.showIncompleteResults, |
| displayInputs.showAllProviders))); |
| } |
| |
| /** @private */ |
| clearOutput_() { |
| const contents = this.containerElement_; |
| // Clears all children. |
| while (contents.firstChild) |
| contents.removeChild(contents.firstChild); |
| } |
| |
| /** @return {string} */ |
| get visibletableText() { |
| return this.containerElement_.innerText; |
| } |
| |
| /** @return {!Array<!OutputMatch>} */ |
| get matches() { |
| return this.resultsGroup_.flatMap(resultsGroup => resultsGroup.matches); |
| } |
| } |
| |
| /** |
| * Helps track and render a results group. C++ Autocomplete typically returns |
| * 3 result groups per query. It may return less if the next query is |
| * submitted before all 3 have been returned. Each result group contains |
| * top level information (e.g., how long the result took to generate), as well |
| * as a single list of combined results and multiple lists of individual |
| * results. Each of these lists is tracked and rendered by OutputResultsTable |
| * below. |
| */ |
| class OutputResultsGroup { |
| /** |
| * @param {!mojom.OmniboxResult} resultsGroup |
| * @param {number} cursorPosition |
| */ |
| constructor(resultsGroup, cursorPosition) { |
| /** @struct */ |
| this.details = { |
| cursorPosition, |
| time: resultsGroup.timeSinceOmniboxStartedMs, |
| done: resultsGroup.done, |
| host: resultsGroup.host, |
| isTypedHost: resultsGroup.isTypedHost |
| }; |
| /** @type {!OutputResultsTable} */ |
| this.combinedResults = |
| new OutputResultsTable(resultsGroup.combinedResults); |
| /** @type {!Array<!OutputResultsTable>} */ |
| this.individualResultsList = |
| resultsGroup.resultsByProvider |
| .map(resultsWrapper => resultsWrapper.results) |
| .filter(results => results.length > 0) |
| .map(results => new OutputResultsTable(results)); |
| } |
| |
| /** |
| * Creates a HTML Node representing this data. |
| * @param {boolean} showDetails |
| * @param {boolean} showIncompleteResults |
| * @param {boolean} showAllProviders |
| * @return {!Element} |
| */ |
| render(showDetails, showIncompleteResults, showAllProviders) { |
| const resultsGroupNode = |
| OmniboxElement.getTemplate('results-group-template'); |
| if (showDetails || showIncompleteResults) { |
| resultsGroupNode.querySelector('.details') |
| .appendChild(this.renderDetails_()); |
| } |
| resultsGroupNode.querySelector('.combined-results') |
| .appendChild(this.combinedResults.render(showDetails)); |
| if (showAllProviders) { |
| resultsGroupNode.querySelector('.individual-results') |
| .appendChild(this.renderIndividualResults_(showDetails)); |
| } |
| return resultsGroupNode; |
| } |
| |
| /** |
| * @private |
| * @return {!Element} |
| */ |
| renderDetails_() { |
| const details = |
| OmniboxElement.getTemplate('results-group-details-template'); |
| details.querySelector('.cursor-position').textContent = |
| this.details.cursorPosition; |
| details.querySelector('.time').textContent = this.details.time; |
| details.querySelector('.done').textContent = this.details.done; |
| details.querySelector('.host').textContent = this.details.host; |
| details.querySelector('.is-typed-host').textContent = |
| this.details.isTypedHost; |
| return details; |
| } |
| |
| /** |
| * @private |
| * @param {boolean} showDetails |
| * @return {!Element} |
| */ |
| renderIndividualResults_(showDetails) { |
| const individualResultsNode = OmniboxElement.getTemplate( |
| 'results-group-individual-results-template'); |
| this.individualResultsList.forEach( |
| individualResults => individualResultsNode.appendChild( |
| individualResults.render(showDetails))); |
| return individualResultsNode; |
| } |
| |
| /** @return {!Array<!OutputMatch>} */ |
| get matches() { |
| return [this.combinedResults] |
| .concat(this.individualResultsList) |
| .flatMap(results => results.matches); |
| } |
| } |
| |
| /** |
| * Helps track and render a list of results. Each result is tracked and |
| * rendered by OutputMatch below. |
| */ |
| class OutputResultsTable { |
| /** @param {!Array<!mojom.AutocompleteMatch>} results */ |
| constructor(results) { |
| /** @type {!Array<!OutputMatch>} */ |
| this.matches = results.map(match => new OutputMatch(match)); |
| } |
| |
| /** |
| * Creates a HTML Node representing this data. |
| * @param {boolean} showDetails |
| * @return {!Element} |
| */ |
| render(showDetails) { |
| const resultsTable = OmniboxElement.getTemplate('results-table-template'); |
| // The additional properties column only needs be displayed if at least |
| // one of the results have additional properties. |
| const showAdditionalPropertiesHeader = this.matches.some( |
| match => match.showAdditionalProperties(showDetails)); |
| resultsTable.querySelector('.results-table-body') |
| .appendChild(OutputMatch.renderHeader_( |
| showDetails, showAdditionalPropertiesHeader)); |
| this.matches.forEach( |
| match => resultsTable.querySelector('.results-table-body') |
| .appendChild(match.render(showDetails))); |
| return resultsTable; |
| } |
| } |
| |
| /** Helps track and render a single match. */ |
| class OutputMatch { |
| /** @param {!mojom.AutocompleteMatch} match */ |
| constructor(match) { |
| /** @dict */ |
| this.properties = {}; |
| /** @dict */ |
| this.additionalProperties = {}; |
| Object.entries(match).forEach(propertyNameValueTuple => { |
| // TODO(manukh) replace with destructuring when the styleguide is |
| // updated |
| // https://chromium-review.googlesource.com/c/chromium/src/+/1271915 |
| const propertyName = propertyNameValueTuple[0]; |
| const propertyValue = propertyNameValueTuple[1]; |
| |
| if (PROPERTY_OUTPUT_ORDER.some( |
| displayProperty => |
| displayProperty.propertyName === propertyName)) { |
| this.properties[propertyName] = propertyValue; |
| } else { |
| this.additionalProperties[propertyName] = propertyValue; |
| } |
| }); |
| |
| /** @type {!Element} */ |
| this.associatedElement; |
| } |
| |
| /** |
| * Creates a HTML Node representing this data. |
| * @param {boolean} showDetails |
| * @return {!Element} |
| */ |
| render(showDetails) { |
| const row = document.createElement('tr'); |
| OutputMatch.displayedProperties(showDetails) |
| .map(property => { |
| const value = this.properties[property.propertyName]; |
| if (typeof value === 'boolean') |
| return OutputMatch.renderBooleanProperty_(value); |
| if (typeof value === 'object') { |
| // We check if the first element has key and value properties. |
| if (value && value[0] && value[0].key && value[0].value) |
| return OutputMatch.renderKeyValueTuples_(value); |
| else |
| return OutputMatch.renderJsonProperty_(value); |
| } |
| const LINK_REGEX = /^(http|https|ftp|chrome|file):\/\//; |
| if (LINK_REGEX.test(value)) |
| return OutputMatch.renderLinkProperty_(value); |
| return OutputMatch.renderTextProperty_(value); |
| }) |
| .forEach(cell => row.appendChild(cell)); |
| |
| if (this.showAdditionalProperties(showDetails)) { |
| row.appendChild( |
| OutputMatch.renderJsonProperty_(this.additionalProperties)); |
| } |
| this.associatedElement = row; |
| return this.associatedElement; |
| } |
| |
| /** |
| * TODO(manukh) replace these static render_ functions with subclasses when |
| * rendering becomes more substantial |
| * @private |
| * @param {string} propertyValue |
| * @return {!Element} |
| */ |
| static renderTextProperty_(propertyValue) { |
| const cell = document.createElement('td'); |
| cell.textContent = propertyValue; |
| return cell; |
| } |
| |
| /** |
| * @private |
| * @param {Object} propertyValue |
| * @return {!Element} |
| */ |
| static renderJsonProperty_(propertyValue) { |
| const cell = document.createElement('td'); |
| const pre = document.createElement('pre'); |
| pre.textContent = JSON.stringify(propertyValue, null, 2); |
| cell.appendChild(pre); |
| return cell; |
| } |
| |
| /** |
| * @private |
| * @param {boolean} propertyValue |
| * @return {!Element} |
| */ |
| static renderBooleanProperty_(propertyValue) { |
| const cell = document.createElement('td'); |
| const icon = document.createElement('div'); |
| icon.className = propertyValue ? 'check-mark' : 'x-mark'; |
| icon.textContent = propertyValue; |
| cell.appendChild(icon); |
| return cell; |
| } |
| |
| /** |
| * @private |
| * @param {string} propertyValue |
| * @return {!Element} |
| */ |
| static renderLinkProperty_(propertyValue) { |
| const cell = document.createElement('td'); |
| const link = document.createElement('a'); |
| link.textContent = propertyValue; |
| link.href = propertyValue; |
| cell.appendChild(link); |
| return cell; |
| } |
| |
| /** |
| * @private |
| * @param {Array<{key: string, value: string}>} propertyValue |
| * @return {Element} |
| */ |
| static renderKeyValueTuples_(propertyValue) { |
| const cell = document.createElement('td'); |
| const pre = document.createElement('pre'); |
| const text = propertyValue.reduce( |
| (prev, current) => `${prev}${current.key}: ${current.value}\n`, ''); |
| pre.textContent = text; |
| cell.appendChild(pre); |
| return cell; |
| } |
| |
| /** |
| * @private |
| * @param {boolean} showDetails |
| * @param {boolean} showAdditionalHeader |
| * @return {!Element} |
| */ |
| static renderHeader_(showDetails, showAdditionalHeader) { |
| const row = document.createElement('tr'); |
| const headerCells = |
| OutputMatch.displayedProperties(showDetails) |
| .map( |
| displayProperty => OutputMatch.renderHeaderCell_( |
| displayProperty.header, displayProperty.url, |
| displayProperty.tooltip)); |
| if (showAdditionalHeader) { |
| headerCells.push( |
| OutputMatch.renderHeaderCell_('Additional Properties')); |
| } |
| headerCells.forEach(headerCell => row.appendChild(headerCell)); |
| return row; |
| } |
| |
| /** |
| * @private |
| * @param {string} name |
| * @param {string=} url |
| * @param {string=} tooltip |
| * @return {!Element} |
| */ |
| static renderHeaderCell_(name, url, tooltip) { |
| const cell = document.createElement('th'); |
| if (url) { |
| const link = document.createElement('a'); |
| link.textContent = name; |
| link.href = url; |
| cell.appendChild(link); |
| } else { |
| cell.textContent = name; |
| } |
| cell.title = tooltip || ''; |
| return cell; |
| } |
| |
| /** |
| * @return {!Array<!PresentationInfoRecord>} Array representing which columns |
| * need to be displayed. |
| */ |
| static displayedProperties(showDetails) { |
| return showDetails ? |
| PROPERTY_OUTPUT_ORDER : |
| PROPERTY_OUTPUT_ORDER.filter(property => property.displayAlways); |
| } |
| |
| /** |
| * @return {boolean} True if the additional properties column is required |
| * to be displayed for this result. False if the column can be hidden |
| * because this result does not have additional properties. |
| */ |
| showAdditionalProperties(showDetails) { |
| return showDetails && Object.keys(this.additionalProperties).length; |
| } |
| } |
| |
| /** Responsible for setting clipboard contents. */ |
| class CopyDelegate { |
| /** @param {!omnibox_output.OmniboxOutput} omniboxOutput */ |
| constructor(omniboxOutput) { |
| /** @private {!omnibox_output.OmniboxOutput} */ |
| this.omniboxOutput_ = omniboxOutput; |
| } |
| |
| copyTextOutput() { |
| this.copy_(this.omniboxOutput_.renderDelegate.visibletableText); |
| } |
| |
| copyJsonOutput() { |
| this.copy_(JSON.stringify(this.omniboxOutput_.responses, null, 2)); |
| } |
| |
| /** |
| * @private |
| * @param {string} value |
| */ |
| copy_(value) { |
| navigator.clipboard.writeText(value).catch( |
| error => console.error('unable to copy to clipboard:', error)); |
| } |
| } |
| |
| /** Responsible for highlighting and hiding rows using filter text. */ |
| class FilterDelegate { |
| /** @param {!omnibox_output.OmniboxOutput} omniboxOutput */ |
| constructor(omniboxOutput) { |
| /** @private {!omnibox_output.OmniboxOutput} */ |
| this.omniboxOutput_ = omniboxOutput; |
| } |
| |
| /** |
| * @param {string} filterText |
| * @param {boolean} filterHide |
| */ |
| filter(filterText, filterHide) { |
| this.omniboxOutput_.matches.filter(match => match.associatedElement) |
| .forEach(match => { |
| const row = match.associatedElement; |
| row.classList.remove('filtered-hidden'); |
| row.classList.remove('filtered-highlighted'); |
| |
| if (!filterText) |
| return; |
| |
| const isMatch = FilterDelegate.filterMatch_(match, filterText); |
| row.classList.toggle('filtered-hidden', filterHide && !isMatch); |
| row.classList.toggle( |
| 'filtered-highlighted', !filterHide && isMatch); |
| }); |
| } |
| |
| /** |
| * Checks if a omnibox match fuzzy-matches a filter string. Each character |
| * of filterText must be present in the match text, either adjacent to the |
| * previous matched character, or at the start of a new word (see |
| * textToWords_). |
| * E.g. `abc` matches `abc`, `a big cat`, `a-bigCat`, `a very big cat`, and |
| * `an amBer cat`; but does not match `abigcat` or `an amber cat`. |
| * `green rainbow` is matched by `gre rain`, but not by `gre bow`. |
| * One exception is the first character, which may be matched mid-word. |
| * E.g. `een rain` can also match `green rainbow`. |
| * @private |
| * @param {!OutputMatch} match |
| * @param {string} filterText |
| * @return {boolean} |
| */ |
| static filterMatch_(match, filterText) { |
| const row = match.associatedElement; |
| const cells = Array.from(row.querySelectorAll('td')); |
| const regexFilter = Array.from(filterText).join('(.*\\.)?'); |
| return cells |
| .map(cell => FilterDelegate.textToWords_(cell.textContent).join('.')) |
| .some(text => text.match(regexFilter)); |
| } |
| |
| /** |
| * Splits a string into words, delimited by either capital letters, groups |
| * of digits, or non alpha characters. |
| * E.g., `https://google.com/the-dog-ate-134pies` will be split to: |
| * https, :, /, /, google, ., com, /, the, -, dog, -, ate, -, 134, pies |
| * We don't use `Array.split`, because we want to group digits, e.g. 134. |
| * @private |
| * @param {string} text |
| * @return {!Array<string>} |
| */ |
| static textToWords_(text) { |
| return text.match(/[a-z]+|[A-Z][a-z]*|\d+|./g) || []; |
| } |
| } |
| |
| window.customElements.define(OmniboxOutput.is, OmniboxOutput); |
| |
| return {OmniboxOutput: OmniboxOutput}; |
| }); |
