chrome/browser/resources/omnibox/omnibox_input.js

// 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.

/**
 * @typedef {{
 *   inputText: string,
 *   resetAutocompleteController: boolean,
 *   cursorPosition: number,
 *   preventInlineAutocomplete: boolean,
 *   preferKeyword: boolean,
 *   pageClassification: number,
 * }}
 */
let QueryInputs;

/**
 * @typedef {{
 *   showIncompleteResults: boolean,
 *   showDetails: boolean,
 *   showAllProviders: boolean,
 * }}
 */
let DisplayInputs;

class OmniboxInput extends OmniboxElement {
  constructor() {
    super('omnibox-input-template');

    const displayInputs = OmniboxInput.defaultDisplayInputs;
    this.$$('#show-incomplete-results').checked =
        displayInputs.showIncompleteResults;
    this.$$('#show-details').checked = displayInputs.showDetails;
    this.$$('#show-all-providers').checked = displayInputs.showAllProviders;
  }

  /** @override */
  connectedCallback() {
    this.setupElementListeners_();
  }

  /** @private */
  setupElementListeners_() {
    ['#input-text',
     '#reset-autocomplete-controller',
     '#lock-cursor-position',
     '#zero-suggest',
     '#prevent-inline-autocomplete',
     '#prefer-keyword',
     '#current-url',
     '#page-classification',
    ]
        .forEach(
            query => this.$$(query).addEventListener(
                'input', this.onQueryInputsChanged_.bind(this)));

    ['#show-incomplete-results',
     '#show-details',
     '#show-all-providers',
    ]
        .forEach(
            query => this.$$(query).addEventListener(
                'input', this.onDisplayInputsChanged_.bind(this)));

    this.$$('#copy-text')
        .addEventListener('click', () => this.onCopyOutput_('text'));
    this.$$('#copy-json')
        .addEventListener('click', () => this.onCopyOutput_('json'));

    this.$$('#filter-text')
        .addEventListener('input', this.onFilterInputsChanged_.bind(this));
  }

  /** @private */
  onQueryInputsChanged_() {
    const zeroSuggest = this.$$('#zero-suggest').checked;
    this.$$('#current-url').disabled = zeroSuggest;
    if (zeroSuggest) {
      this.$$('#current-url').value = this.$$('#input-text').value;
    }

    /** @type {!QueryInputs} */
    const queryInputs = {
      inputText: this.$$('#input-text').value,
      resetAutocompleteController:
          this.$$('#reset-autocomplete-controller').checked,
      cursorPosition: this.cursorPosition_,
      zeroSuggest: zeroSuggest,
      preventInlineAutocomplete:
          this.$$('#prevent-inline-autocomplete').checked,
      preferKeyword: this.$$('#prefer-keyword').checked,
      currentUrl: this.$$('#current-url').value,
      pageClassification: this.$$('#page-classification').value,
    };
    this.dispatchEvent(
        new CustomEvent('query-inputs-changed', {detail: queryInputs}));
  }

  /** @private */
  onDisplayInputsChanged_() {
    /** @type {!DisplayInputs} */
    const displayInputs = {
      showIncompleteResults: this.$$('#show-incomplete-results').checked,
      showDetails: this.$$('#show-details').checked,
      showAllProviders: this.$$('#show-all-providers').checked,
    };
    this.dispatchEvent(
        new CustomEvent('display-inputs-changed', {detail: displayInputs}));
  }

  /** @private */
  onFilterInputsChanged_() {
    this.dispatchEvent(new CustomEvent(
        'filter-input-changed', {detail: this.$$('#filter-text').value}));
  }

  /** @private @param {string} format Either 'text' or 'json'. */
  onCopyOutput_(format) {
    this.dispatchEvent(new CustomEvent('copy-request', {detail: format}));
  }

  /** @private @return {number} */
  get cursorPosition_() {
    return this.$$('#lock-cursor-position').checked ?
        this.$$('#input-text').value.length :
        this.$$('#input-text').selectionEnd;
  }

  /** @return {DisplayInputs} */
  static get defaultDisplayInputs() {
    return {
      showIncompleteResults: false,
      showDetails: false,
      showAllProviders: true,
    };
  }
}

customElements.define('omnibox-input', OmniboxInput);