chrome/browser/resources/new_tab_page/realbox.js

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

import './strings.m.js';

import {assert} from 'chrome://resources/js/assert.m.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {BrowserProxy} from './browser_proxy.js';
import {mojoString16, skColorToRgba} from './utils.js';

// A real search box that behaves just like the Omnibox.
class RealboxElement extends PolymerElement {
  static get is() {
    return 'ntp-realbox';
  }

  static get template() {
    return html`{__html_template__}`;
  }

  static get properties() {
    return {
      /** @type {!newTabPage.mojom.SearchBoxTheme} */
      theme: {
        type: Object,
        observer: 'onThemeChange_',
      },

      realboxIcon_: {
        type: String,
        value: () => loadTimeData.getString('realboxDefaultIcon')
      }
    };
  }

  constructor() {
    performance.mark('realbox-creation-start');
    super();
    /** @private {newTabPage.mojom.PageHandlerRemote} */
    this.pageHandler_ = BrowserProxy.getInstance().handler;
    /** @private {!newTabPage.mojom.PageCallbackRouter} */
    this.callbackRouter_ = BrowserProxy.getInstance().callbackRouter;
    /** @private {?number} */
    this.autocompleteResultChangedListenerId_ = null;
  }

  /** @override */
  connectedCallback() {
    super.connectedCallback();
    this.autocompleteResultChangedListenerId_ =
        this.callbackRouter_.autocompleteResultChanged.addListener(
            this.onAutocompleteResultChanged_.bind(this));

    // Bind |this.onMouseDown_| to the 'onmousedown' handler to support tests.
    this.$.input.onmousedown = this.onMouseDown_.bind(this);
  }

  /** @override */
  disconnectedCallback() {
    super.disconnectedCallback();
    this.callbackRouter_.removeListener(
        assert(this.autocompleteResultChangedListenerId_));
  }

  /** @override */
  ready() {
    super.ready();
    performance.measure('realbox-creation', 'realbox-creation-start');
  }

  /**
   * @private
   * @param {Event} e
   */
  onMouseDown_(e) {
    if (!e.isTrusted || e.button !== 0) {
      // Only handle main (generally left) button presses generated by a user
      // action.
      return;
    }
    if (!this.$.input.value) {
      this.pageHandler_.queryAutocomplete(mojoString16(''), false);
    }
  }

  /** @private */
  onVoiceSearchClick_() {
    this.dispatchEvent(new Event('open-voice-search'));
  }

  /** @private */
  onThemeChange_() {
    if (!loadTimeData.getBoolean('realboxMatchOmniboxTheme')) {
      return;
    }

    this.updateStyles({
      '--search-box-bg': skColorToRgba(assert(this.theme.bg)),
      '--search-box-placeholder': skColorToRgba(assert(this.theme.placeholder)),
      '--search-box-results-bg': skColorToRgba(assert(this.theme.resultsBg)),
      '--search-box-text': skColorToRgba(assert(this.theme.text)),
      '--search-box-icon': skColorToRgba(assert(this.theme.icon))
    });
  }

  /**
   * @private
   * @param {search.mojom.AutocompleteResult} result
   */
  onAutocompleteResultChanged_(result) {
    // TODO(crbug.com/1041129): Display the results.
  }
}

customElements.define(RealboxElement.is, RealboxElement);