chrome-devtools-frontend/front_end/panels/search/SearchView.ts

Chrome DevTools UI

// Copyright 2014 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.
/* eslint-disable rulesdir/no-imperative-dom-api */

import '../../ui/legacy/legacy.js';

import * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as i18n from '../../core/i18n/i18n.js';
import * as Workspace from '../../models/workspace/workspace.js';
import * as Buttons from '../../ui/components/buttons/buttons.js';
import * as IconButton from '../../ui/components/icon_button/icon_button.js';
import * as UI from '../../ui/legacy/legacy.js';
import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';

import {SearchResultsPane} from './SearchResultsPane.js';
import type {SearchResult, SearchScope} from './SearchScope.js';
import searchViewStyles from './searchView.css.js';

const UIStrings = {
  /**
   *@description Placeholder text of a search bar
   */
  find: 'Find',
  /**
   *@description Tooltip text on a toggle to enable search by matching case of the input
   */
  enableCaseSensitive: 'Enable case sensitive search',
  /**
   *@description Tooltip text on a toggle to disable search by matching case of the input
   */
  disableCaseSensitive: 'Disable case sensitive search',
  /**
   *@description Tooltip text on a toggle to enable searching with regular expression
   */
  enableRegularExpression: 'Enable regular expressions',
  /**
   *@description Tooltip text on a toggle to disable searching with regular expression
   */
  disableRegularExpression: 'Disable regular expressions',
  /**
   *@description Text to refresh the page
   */
  refresh: 'Refresh',
  /**
   *@description Tooltip text to clear the search input field
   */
  clearInput: 'Clear',
  /**
   *@description Text to clear content
   */
  clear: 'Clear search',
  /**
   *@description Search message element text content in Search View of the Search tab
   */
  indexing: 'Indexing…',
  /**
   *@description Text to indicate the searching is in progress
   */
  searching: 'Searching…',
  /**
   *@description Text in Search View of the Search tab
   */
  indexingInterrupted: 'Indexing interrupted.',
  /**
   *@description Search results message element text content in Search View of the Search tab
   */
  foundMatchingLineInFile: 'Found 1 matching line in 1 file.',
  /**
   *@description Search results message element text content in Search View of the Search tab
   *@example {2} PH1
   */
  foundDMatchingLinesInFile: 'Found {PH1} matching lines in 1 file.',
  /**
   *@description Search results message element text content in Search View of the Search tab
   *@example {2} PH1
   *@example {2} PH2
   */
  foundDMatchingLinesInDFiles: 'Found {PH1} matching lines in {PH2} files.',
  /**
   *@description Search results message element text content in Search View of the Search tab
   */
  noMatchesFound: 'No matches found',
  /**
   *@description Search results message element text content in Search View of the Search tab
   */
  nothingMatchedTheQuery: 'Nothing matched your search query',
  /**
   *@description Text in Search View of the Search tab
   */
  searchFinished: 'Search finished.',
  /**
   *@description Text in Search View of the Search tab
   */
  searchInterrupted: 'Search interrupted.',
  /**
   *@description Text in Search View of the Search tab if user hasn't started the search
   *@example {Enter} PH1
   */
  typeAndPressSToSearch: 'Type and press {PH1} to search',
  /**
   *@description Text in Search view of the Search tab if user hasn't started the search
   */
  noSearchResult: 'No search results',
} as const;
const str_ = i18n.i18n.registerUIStrings('panels/search/SearchView.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

function createSearchToggleButton(iconName: string, jslogContext: string): Buttons.Button.Button {
  const button = new Buttons.Button.Button();
  button.data = {
    variant: Buttons.Button.Variant.ICON_TOGGLE,
    iconName,
    toggledIconName: iconName,
    toggleType: Buttons.Button.ToggleType.PRIMARY,
    size: Buttons.Button.Size.SMALL,
    toggled: false,
    jslogContext,
  };
  return button;
}
export class SearchView extends UI.Widget.VBox {
  private focusOnShow: boolean;
  private isIndexing: boolean;
  private searchId: number;
  private searchMatchesCount: number;
  private searchResultsCount: number;
  private nonEmptySearchResultsCount: number;
  private searchingView: UI.Widget.Widget|null;
  private notFoundView: UI.Widget.Widget|null;
  private searchConfig: Workspace.SearchConfig.SearchConfig|null;
  private pendingSearchConfig: Workspace.SearchConfig.SearchConfig|null;
  private searchResultsPane: SearchResultsPane|null;
  private progressIndicator: UI.ProgressIndicator.ProgressIndicator|null;
  private visiblePane: UI.Widget.Widget|null;
  private readonly searchPanelElement: HTMLElement;
  private readonly searchResultsElement: HTMLElement;
  protected readonly search: HTMLInputElement;
  protected readonly matchCaseButton: Buttons.Button.Button;
  protected readonly regexButton: Buttons.Button.Button;
  private searchMessageElement: HTMLElement;
  private readonly searchProgressPlaceholderElement: HTMLElement;
  private searchResultsMessageElement: HTMLElement;
  private readonly advancedSearchConfig: Common.Settings.Setting<{
    query: string,
    ignoreCase: boolean,
    isRegex: boolean,
  }>;
  private searchScope: SearchScope|null;

  // We throttle adding search results, otherwise we trigger DOM layout for each
  // result added.
  #throttler: Common.Throttler.Throttler;
  #pendingSearchResults: SearchResult[] = [];
  #emptyStartView: UI.EmptyWidget.EmptyWidget;

  constructor(settingKey: string, throttler: Common.Throttler.Throttler) {
    super(true);
    this.setMinimumSize(0, 40);
    this.registerRequiredCSS(searchViewStyles);

    this.focusOnShow = false;
    this.isIndexing = false;
    this.searchId = 1;
    this.searchMatchesCount = 0;
    this.searchResultsCount = 0;
    this.nonEmptySearchResultsCount = 0;
    this.searchingView = null;
    this.notFoundView = null;
    this.searchConfig = null;
    this.pendingSearchConfig = null;
    this.searchResultsPane = null;
    this.progressIndicator = null;
    this.visiblePane = null;
    this.#throttler = throttler;

    this.contentElement.setAttribute('jslog', `${VisualLogging.panel('search').track({resize: true})}`);

    this.contentElement.classList.add('search-view');
    this.contentElement.addEventListener('keydown', event => {
      this.onKeyDownOnPanel((event));
    });

    this.searchPanelElement = this.contentElement.createChild('div', 'search-drawer-header');
    this.searchResultsElement = this.contentElement.createChild('div');
    this.searchResultsElement.className = 'search-results';

    const searchContainer = document.createElement('div');
    searchContainer.classList.add('search-container');
    const searchElements = searchContainer.createChild('div', 'toolbar-item-search');

    const searchIcon = IconButton.Icon.create('search');
    searchElements.appendChild(searchIcon);

    this.search = UI.UIUtils.createHistoryInput('search', 'search-toolbar-input');
    this.search.addEventListener('keydown', event => {
      this.onKeyDown((event));
    });
    this.search.setAttribute(
        'jslog', `${VisualLogging.textField().track({change: true, keydown: 'ArrowUp|ArrowDown|Enter'})}`);
    searchElements.appendChild(this.search);
    this.search.placeholder = i18nString(UIStrings.find);
    this.search.setAttribute('results', '0');
    this.search.setAttribute('size', '100');
    UI.ARIAUtils.setLabel(this.search, this.search.placeholder);

    const clearInputFieldButton = new Buttons.Button.Button();
    clearInputFieldButton.data = {
      variant: Buttons.Button.Variant.ICON,
      iconName: 'cross-circle-filled',
      jslogContext: 'clear-input',
      size: Buttons.Button.Size.SMALL,
      title: i18nString(UIStrings.clearInput),
    };
    clearInputFieldButton.classList.add('clear-button');
    clearInputFieldButton.addEventListener('click', () => {
      this.onSearchInputClear();
    });
    clearInputFieldButton.tabIndex = -1;
    searchElements.appendChild(clearInputFieldButton);

    const regexIconName = 'regular-expression';
    this.regexButton = createSearchToggleButton(regexIconName, regexIconName);
    this.regexButton.addEventListener('click', () => this.regexButtonToggled());
    searchElements.appendChild(this.regexButton);

    const matchCaseIconName = 'match-case';
    this.matchCaseButton = createSearchToggleButton(matchCaseIconName, matchCaseIconName);
    this.matchCaseButton.addEventListener('click', () => this.matchCaseButtonToggled());
    searchElements.appendChild(this.matchCaseButton);

    this.searchPanelElement.appendChild(searchContainer);
    const toolbar = this.searchPanelElement.createChild('devtools-toolbar', 'search-toolbar');
    toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
    const refreshButton =
        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.refresh), 'refresh', undefined, 'search.refresh');
    const clearButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clear), 'clear', undefined, 'search.clear');
    toolbar.appendToolbarItem(refreshButton);
    toolbar.appendToolbarItem(clearButton);
    refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => this.onAction());
    clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
      this.resetSearch();
      this.onSearchInputClear();
    });

    const searchStatusBarElement = this.contentElement.createChild('div', 'search-toolbar-summary');
    this.searchMessageElement = searchStatusBarElement.createChild('div', 'search-message');
    this.searchProgressPlaceholderElement = searchStatusBarElement.createChild('div', 'flex-centered');
    this.searchResultsMessageElement = searchStatusBarElement.createChild('div', 'search-message');

    this.advancedSearchConfig = Common.Settings.Settings.instance().createLocalSetting(
        settingKey + '-search-config', new Workspace.SearchConfig.SearchConfig('', true, false).toPlainObject());

    this.load();
    this.searchScope = null;

    this.#emptyStartView = new UI.EmptyWidget.EmptyWidget(
        i18nString(UIStrings.noSearchResult), i18nString(UIStrings.typeAndPressSToSearch, {
          PH1: UI.KeyboardShortcut.KeyboardShortcut.shortcutToString(UI.KeyboardShortcut.Keys.Enter)
        }));
    this.showPane(this.#emptyStartView);
  }

  regexButtonToggled(): void {
    this.regexButton.title = this.regexButton.toggled ? i18nString(UIStrings.disableRegularExpression) :
                                                        i18nString(UIStrings.enableRegularExpression);
  }

  matchCaseButtonToggled(): void {
    this.matchCaseButton.title = this.matchCaseButton.toggled ? i18nString(UIStrings.disableCaseSensitive) :
                                                                i18nString(UIStrings.enableCaseSensitive);
  }

  private buildSearchConfig(): Workspace.SearchConfig.SearchConfig {
    return new Workspace.SearchConfig.SearchConfig(
        this.search.value, !this.matchCaseButton.toggled, this.regexButton.toggled);
  }

  toggle(queryCandidate: string, searchImmediately?: boolean): void {
    this.search.value = queryCandidate;
    if (this.isShowing()) {
      this.focus();
    } else {
      this.focusOnShow = true;
    }

    this.initScope();
    if (searchImmediately) {
      this.onAction();
    } else {
      this.startIndexing();
    }
  }

  createScope(): SearchScope {
    throw new Error('Not implemented');
  }

  private initScope(): void {
    this.searchScope = this.createScope();
  }

  override wasShown(): void {
    super.wasShown();
    if (this.focusOnShow) {
      this.focus();
      this.focusOnShow = false;
    }
  }

  private onIndexingFinished(): void {
    if (!this.progressIndicator) {
      return;
    }

    const finished = !this.progressIndicator.isCanceled();
    this.progressIndicator.done();
    this.progressIndicator = null;
    this.isIndexing = false;
    this.searchMessageElement.textContent = finished ? '' : i18nString(UIStrings.indexingInterrupted);
    if (!finished) {
      this.pendingSearchConfig = null;
    }
    if (!this.pendingSearchConfig) {
      return;
    }
    const searchConfig = this.pendingSearchConfig;
    this.pendingSearchConfig = null;
    this.innerStartSearch(searchConfig);
  }

  private startIndexing(): void {
    this.isIndexing = true;
    if (this.progressIndicator) {
      this.progressIndicator.done();
    }
    this.progressIndicator = new UI.ProgressIndicator.ProgressIndicator();
    this.searchMessageElement.textContent = i18nString(UIStrings.indexing);
    this.progressIndicator.show(this.searchProgressPlaceholderElement);
    if (this.searchScope) {
      this.searchScope.performIndexing(
          new Common.Progress.ProgressProxy(this.progressIndicator, this.onIndexingFinished.bind(this)));
    }
  }

  private onSearchInputClear(): void {
    this.search.value = '';
    this.save();
    this.focus();
    this.showPane(this.#emptyStartView);
  }

  private onSearchResult(searchId: number, searchResult: SearchResult): void {
    if (searchId !== this.searchId || !this.progressIndicator) {
      return;
    }
    if (this.progressIndicator?.isCanceled()) {
      this.onIndexingFinished();
      return;
    }
    if (!this.searchResultsPane) {
      this.searchResultsPane = new SearchResultsPane((this.searchConfig as Workspace.SearchConfig.SearchConfig));
      this.showPane(this.searchResultsPane);
    }
    this.#pendingSearchResults.push(searchResult);
    void this.#throttler.schedule(async () => this.#addPendingSearchResults());
  }

  #addPendingSearchResults(): void {
    for (const searchResult of this.#pendingSearchResults) {
      this.addSearchResult(searchResult);
      if (searchResult.matchesCount()) {
        this.searchResultsPane?.addSearchResult(searchResult);
      }
    }
    this.#pendingSearchResults = [];
  }

  private onSearchFinished(searchId: number, finished: boolean): void {
    if (searchId !== this.searchId || !this.progressIndicator) {
      return;
    }
    if (!this.searchResultsPane) {
      this.nothingFound();
    }
    this.searchFinished(finished);
    this.searchConfig = null;
    UI.ARIAUtils.alert(this.searchMessageElement.textContent + ' ' + this.searchResultsMessageElement.textContent);
  }

  private innerStartSearch(searchConfig: Workspace.SearchConfig.SearchConfig): void {
    this.searchConfig = searchConfig;
    if (this.progressIndicator) {
      this.progressIndicator.done();
    }
    this.progressIndicator = new UI.ProgressIndicator.ProgressIndicator();
    this.searchStarted(this.progressIndicator);
    if (this.searchScope) {
      void this.searchScope.performSearch(
          searchConfig, this.progressIndicator, this.onSearchResult.bind(this, this.searchId),
          this.onSearchFinished.bind(this, this.searchId));
    }
  }

  private resetSearch(): void {
    this.stopSearch();
    this.showPane(null);
    this.searchResultsPane = null;
    this.searchMessageElement.textContent = '';
    this.searchResultsMessageElement.textContent = '';
  }

  private stopSearch(): void {
    if (this.progressIndicator && !this.isIndexing) {
      this.progressIndicator.cancel();
    }
    if (this.searchScope) {
      this.searchScope.stopSearch();
    }
    this.searchConfig = null;
  }

  private searchStarted(progressIndicator: UI.ProgressIndicator.ProgressIndicator): void {
    this.searchMatchesCount = 0;
    this.searchResultsCount = 0;
    this.nonEmptySearchResultsCount = 0;
    if (!this.searchingView) {
      this.searchingView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.searching), '');
    }
    this.showPane(this.searchingView);
    this.searchMessageElement.textContent = i18nString(UIStrings.searching);
    progressIndicator.show(this.searchProgressPlaceholderElement);
    this.updateSearchResultsMessage();
  }

  private updateSearchResultsMessage(): void {
    if (this.searchMatchesCount && this.searchResultsCount) {
      if (this.searchMatchesCount === 1 && this.nonEmptySearchResultsCount === 1) {
        this.searchResultsMessageElement.textContent = i18nString(UIStrings.foundMatchingLineInFile);
      } else if (this.searchMatchesCount > 1 && this.nonEmptySearchResultsCount === 1) {
        this.searchResultsMessageElement.textContent =
            i18nString(UIStrings.foundDMatchingLinesInFile, {PH1: this.searchMatchesCount});
      } else {
        this.searchResultsMessageElement.textContent = i18nString(
            UIStrings.foundDMatchingLinesInDFiles,
            {PH1: this.searchMatchesCount, PH2: this.nonEmptySearchResultsCount});
      }
    } else {
      this.searchResultsMessageElement.textContent = '';
    }
  }

  private showPane(panel: UI.Widget.Widget|null): void {
    if (this.visiblePane) {
      this.visiblePane.detach();
    }
    if (panel) {
      panel.show(this.searchResultsElement);
    }
    this.visiblePane = panel;
  }

  private nothingFound(): void {
    if (!this.notFoundView) {
      this.notFoundView = new UI.EmptyWidget.EmptyWidget(
          i18nString(UIStrings.noMatchesFound), i18nString(UIStrings.nothingMatchedTheQuery));
    }
    this.showPane(this.notFoundView);
  }

  private addSearchResult(searchResult: SearchResult): void {
    const matchesCount = searchResult.matchesCount();
    this.searchMatchesCount += matchesCount;
    this.searchResultsCount++;
    if (matchesCount) {
      this.nonEmptySearchResultsCount++;
    }
    this.updateSearchResultsMessage();
  }

  private searchFinished(finished: boolean): void {
    this.searchMessageElement.textContent =
        finished ? i18nString(UIStrings.searchFinished) : i18nString(UIStrings.searchInterrupted);
  }

  override focus(): void {
    this.search.focus();
    this.search.select();
  }

  override willHide(): void {
    this.stopSearch();
  }

  private onKeyDown(event: KeyboardEvent): void {
    this.save();
    switch (event.keyCode) {
      case UI.KeyboardShortcut.Keys.Enter.code:
        this.onAction();
        break;
    }
  }

  /**
   * Handles keydown event on panel itself for handling expand/collapse all shortcut
   *
   * We use `event.code` instead of `event.key` here to check whether the shortcut is triggered.
   * The reason is, `event.key` is dependent on the modification keys, locale and keyboard layout.
   * Usually it is useful when we care about the character that needs to be printed.
   *
   * However, our aim in here is to assign a shortcut to the physical key combination on the keyboard
   * not on the character that the key combination prints.
   *
   * For example, `Cmd + [` shortcut in global shortcuts map to focusing on previous panel.
   * In Turkish - Q keyboard layout, the key combination that triggers the shortcut prints `ğ`
   * character. Whereas in Turkish - Q Legacy keyboard layout, the shortcut that triggers focusing
   * on previous panel prints `[` character. So, if we use `event.key` and check
   * whether it is `[`, we break the shortcut in Turkish - Q keyboard layout.
   *
   * @param event KeyboardEvent
   */
  private onKeyDownOnPanel(event: KeyboardEvent): void {
    const isMac = Host.Platform.isMac();
    // "Command + Alt + ]" for Mac
    const shouldShowAllForMac =
        isMac && event.metaKey && !event.ctrlKey && event.altKey && event.code === 'BracketRight';
    // "Ctrl + Shift + }" for other platforms
    const shouldShowAllForOtherPlatforms =
        !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.code === 'BracketRight';
    // "Command + Alt + [" for Mac
    const shouldCollapseAllForMac =
        isMac && event.metaKey && !event.ctrlKey && event.altKey && event.code === 'BracketLeft';
    // "Command + Alt + {" for other platforms
    const shouldCollapseAllForOtherPlatforms =
        !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.code === 'BracketLeft';

    if (shouldShowAllForMac || shouldShowAllForOtherPlatforms) {
      this.searchResultsPane?.showAllMatches();
      void VisualLogging.logKeyDown(event.currentTarget, event, 'show-all-matches');
    } else if (shouldCollapseAllForMac || shouldCollapseAllForOtherPlatforms) {
      this.searchResultsPane?.collapseAllResults();
      void VisualLogging.logKeyDown(event.currentTarget, event, 'collapse-all-results');
    }
  }

  private save(): void {
    this.advancedSearchConfig.set(this.buildSearchConfig().toPlainObject());
  }

  private load(): void {
    const searchConfig = Workspace.SearchConfig.SearchConfig.fromPlainObject(this.advancedSearchConfig.get());
    this.search.value = searchConfig.query();

    this.matchCaseButton.toggled = !searchConfig.ignoreCase();
    this.matchCaseButtonToggled();

    this.regexButton.toggled = searchConfig.isRegex();
    this.regexButtonToggled();
  }

  private onAction(): void {
    const searchConfig = this.buildSearchConfig();
    if (!searchConfig.query()?.length) {
      return;
    }
    this.resetSearch();
    ++this.searchId;
    this.initScope();
    if (!this.isIndexing) {
      this.startIndexing();
    }
    this.pendingSearchConfig = searchConfig;
  }

  get throttlerForTest(): Common.Throttler.Throttler {
    return this.#throttler;
  }
}