// Copyright 2014 The Chromium Authors // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import '../../ui/legacy/legacy.js'; import '../../ui/kit/kit.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 UI from '../../ui/legacy/legacy.js'; import {Directives, html, render} from '../../ui/lit/lit.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_); const {ref, live} = Directives; const {widget, widgetRef} = UI.Widget; export interface SearchViewInput { query: string; matchCase: boolean; isRegex: boolean; searchConfig: Workspace.SearchConfig.SearchConfig|null; searchMessage: string; searchResultsMessage: string; searchResults: SearchResult[]; progress: Common.Progress.Progress|null; onQueryChange: (query: string) => void; onQueryKeyDown: (evt: KeyboardEvent) => void; onPanelKeyDown: (evt: KeyboardEvent) => void; onClearSearchInput: () => void; onToggleRegex: () => void; onToggleMatchCase: () => void; onRefresh: () => void; onClearSearch: () => void; } export interface SearchViewOutput { focusSearchInput: () => void; showAllMatches: () => void; collapseAllResults: () => void; } export type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement|DocumentFragment) => void; export const DEFAULT_VIEW: View = (input, output, target) => { const { query, matchCase, isRegex, searchConfig, searchMessage, searchResults, searchResultsMessage, progress, onQueryChange, onQueryKeyDown, onPanelKeyDown, onClearSearchInput, onToggleRegex, onToggleMatchCase, onRefresh, onClearSearch, } = input; let header = '', text = ''; if (!query) { header = i18nString(UIStrings.noSearchResult); text = i18nString( UIStrings.typeAndPressSToSearch, {PH1: UI.KeyboardShortcut.KeyboardShortcut.shortcutToString(UI.KeyboardShortcut.Keys.Enter)}); } else if (progress) { header = i18nString(UIStrings.searching); } else if (!searchResults.length) { header = i18nString(UIStrings.noMatchesFound); text = i18nString(UIStrings.nothingMatchedTheQuery); } // clang-format off render(html`

${searchResults.length ? html` { output.showAllMatches = () => void w.showAllMatches(); output.collapseAllResults = () => void w.collapseAllResults(); })}> ` : widget(UI.EmptyWidget.EmptyWidget, {header, text})}

`, target, {container: {attributes: {jslog: `${VisualLogging.panel('search').track({resize: true})}`}}}); // clang-format on }; export class SearchView extends UI.Widget.VBox { readonly #view: View; #focusSearchInput = (): void => {}; #showAllMatches = (): void => {}; #collapseAllResults = (): void => {}; #isIndexing: boolean; #searchId: number; #searchMatchesCount: number; #searchResultsCount: number; #nonEmptySearchResultsCount: number; #searchingView: UI.Widget.Widget|null; #searchConfig: Workspace.SearchConfig.SearchConfig|null; #pendingSearchConfig: Workspace.SearchConfig.SearchConfig|null; #progress: Common.Progress.Progress|null; #query: string; #matchCase = false; #isRegex = false; #searchMessage = ''; #searchResultsMessage = ''; readonly #advancedSearchConfig: Common.Settings.Setting<{ query: string, ignoreCase: boolean, isRegex: boolean, }>; #searchScope: SearchScope|null; #searchResults: SearchResult[] = []; constructor(settingKey: string, view = DEFAULT_VIEW) { super({useShadowDom: 'pure'}); this.#view = view; this.setMinimumSize(0, 40); this.#isIndexing = false; this.#searchId = 1; this.#query = ''; this.#searchMatchesCount = 0; this.#searchResultsCount = 0; this.#nonEmptySearchResultsCount = 0; this.#searchingView = null; this.#searchConfig = null; this.#pendingSearchConfig = null; this.#progress = null; this.#advancedSearchConfig = Common.Settings.Settings.instance().createLocalSetting( settingKey + '-search-config', new Workspace.SearchConfig.SearchConfig('', true, false).toPlainObject()); this.performUpdate(); this.#load(); this.performUpdate(); this.#searchScope = null; } override performUpdate(): void { const input: SearchViewInput = { query: this.#query, matchCase: this.#matchCase, isRegex: this.#isRegex, searchConfig: this.#searchConfig, searchMessage: this.#searchMessage, searchResults: this.#searchResults.filter(searchResult => searchResult.matchesCount()), searchResultsMessage: this.#searchResultsMessage, progress: this.#progress, onQueryChange: (query: string) => { this.#query = query; }, onQueryKeyDown: this.#onQueryKeyDown.bind(this), onPanelKeyDown: this.#onPanelKeyDown.bind(this), onClearSearchInput: this.#onClearSearchInput.bind(this), onToggleRegex: this.#onToggleRegex.bind(this), onToggleMatchCase: this.#onToggleMatchCase.bind(this), onRefresh: this.#onRefresh.bind(this), onClearSearch: this.#onClearSearch.bind(this), }; const that = this; const output: SearchViewOutput = { set focusSearchInput(value: () => void) { that.#focusSearchInput = value; }, set showAllMatches(value: () => void) { that.#showAllMatches = value; }, set collapseAllResults(value: () => void) { that.#collapseAllResults = value; } }; this.#view(input, output, this.contentElement); } #onToggleRegex(): void { this.#isRegex = !this.#isRegex; this.performUpdate(); } #onToggleMatchCase(): void { this.#matchCase = !this.#matchCase; this.performUpdate(); } #buildSearchConfig(): Workspace.SearchConfig.SearchConfig { return new Workspace.SearchConfig.SearchConfig(this.#query, !this.#matchCase, this.#isRegex); } toggle(queryCandidate: string, searchImmediately?: boolean): void { this.#query = queryCandidate; this.requestUpdate(); void this.updateComplete.then(() => { this.focus(); }); this.#initScope(); if (searchImmediately) { this.#onRefresh(); } else { this.#startIndexing(); } } createScope(): SearchScope { throw new Error('Not implemented'); } #initScope(): void { this.#searchScope = this.createScope(); } #onIndexingFinished(): void { if (!this.#progress) { return; } const finished = !this.#progress.canceled; this.#progress = null; this.#isIndexing = false; this.#searchMessage = finished ? '' : i18nString(UIStrings.indexingInterrupted); if (!finished) { this.#pendingSearchConfig = null; } this.performUpdate(); if (!this.#pendingSearchConfig) { return; } const searchConfig = this.#pendingSearchConfig; this.#pendingSearchConfig = null; this.#startSearch(searchConfig); } #startIndexing(): void { this.#isIndexing = true; if (this.#progress) { this.#progress.done = true; } this.#progress = new Common.Progress.ProgressProxy( new Common.Progress.Progress(), this.#onIndexingFinished.bind(this), this.requestUpdate.bind(this)); this.#searchMessage = i18nString(UIStrings.indexing); this.performUpdate(); if (this.#searchScope) { this.#searchScope.performIndexing(this.#progress); } } #onClearSearchInput(): void { this.#query = ''; this.requestUpdate(); this.#save(); this.focus(); } #onSearchResult(searchId: number, searchResult: SearchResult): void { if (searchId !== this.#searchId || !this.#progress) { return; } if (this.#progress?.canceled) { this.#onIndexingFinished(); return; } this.#searchResults.push(searchResult); this.#addSearchResult(searchResult); this.requestUpdate(); } #onSearchFinished(searchId: number, finished: boolean): void { if (searchId !== this.#searchId || !this.#progress) { return; } this.#progress = null; this.#searchFinished(finished); UI.ARIAUtils.LiveAnnouncer.alert(this.#searchMessage + ' ' + this.#searchResultsMessage); } #startSearch(searchConfig: Workspace.SearchConfig.SearchConfig): void { this.#searchConfig = searchConfig; if (this.#progress) { this.#progress.done = true; } this.#progress = new Common.Progress.ProgressProxy(new Common.Progress.Progress(), undefined, this.requestUpdate.bind(this)); this.#searchStarted(); if (this.#searchScope) { void this.#searchScope.performSearch( searchConfig, this.#progress, this.#onSearchResult.bind(this, this.#searchId), this.#onSearchFinished.bind(this, this.#searchId)); } } #resetSearch(): void { this.#stopSearch(); this.#searchResults = []; this.#searchMessage = ''; this.#searchResultsMessage = ''; this.performUpdate(); } #stopSearch(): void { if (this.#progress && !this.#isIndexing) { this.#progress.canceled = true; } if (this.#searchScope) { this.#searchScope.stopSearch(); } } #searchStarted(): void { this.#searchMatchesCount = 0; this.#searchResultsCount = 0; this.#searchResults = []; this.#nonEmptySearchResultsCount = 0; if (!this.#searchingView) { this.#searchingView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.searching), ''); } this.#searchMessage = i18nString(UIStrings.searching); this.performUpdate(); this.#updateSearchResultsMessage(); } #updateSearchResultsMessage(): void { if (this.#searchMatchesCount && this.#searchResultsCount) { if (this.#searchMatchesCount === 1 && this.#nonEmptySearchResultsCount === 1) { this.#searchResultsMessage = i18nString(UIStrings.foundMatchingLineInFile); } else if (this.#searchMatchesCount > 1 && this.#nonEmptySearchResultsCount === 1) { this.#searchResultsMessage = i18nString(UIStrings.foundDMatchingLinesInFile, {PH1: this.#searchMatchesCount}); } else { this.#searchResultsMessage = i18nString( UIStrings.foundDMatchingLinesInDFiles, {PH1: this.#searchMatchesCount, PH2: this.#nonEmptySearchResultsCount}); } } else { this.#searchResultsMessage = ''; } this.performUpdate(); } #addSearchResult(searchResult: SearchResult): void { const matchesCount = searchResult.matchesCount(); this.#searchMatchesCount += matchesCount; this.#searchResultsCount++; if (matchesCount) { this.#nonEmptySearchResultsCount++; } this.#updateSearchResultsMessage(); } #searchFinished(finished: boolean): void { this.#searchMessage = finished ? i18nString(UIStrings.searchFinished) : i18nString(UIStrings.searchInterrupted); this.requestUpdate(); } override focus(): void { this.#focusSearchInput(); } override willHide(): void { super.willHide(); this.#stopSearch(); } #onQueryKeyDown(event: KeyboardEvent): void { this.#save(); switch (event.keyCode) { case UI.KeyboardShortcut.Keys.Enter.code: this.#onRefresh(); 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 */ #onPanelKeyDown(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'; // "Ctrl + Alt + {" for other platforms const shouldCollapseAllForOtherPlatforms = !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.code === 'BracketLeft'; if (shouldShowAllForMac || shouldShowAllForOtherPlatforms) { this.#showAllMatches(); void VisualLogging.logKeyDown(event.currentTarget, event, 'show-all-matches'); } else if (shouldCollapseAllForMac || shouldCollapseAllForOtherPlatforms) { this.#collapseAllResults(); void VisualLogging.logKeyDown(event.currentTarget, event, 'collapse-all-results'); } } #save(): void { this.#advancedSearchConfig.set(this.#buildSearchConfig().toPlainObject()); } #load(): void { const searchConfig = Workspace.SearchConfig.SearchConfig.fromPlainObject(this.#advancedSearchConfig.get()); this.#query = searchConfig.query(); this.#matchCase = !searchConfig.ignoreCase(); this.#isRegex = searchConfig.isRegex(); this.requestUpdate(); } #onRefresh(): void { const searchConfig = this.#buildSearchConfig(); if (!searchConfig.query()?.length) { return; } this.#resetSearch(); ++this.#searchId; this.#initScope(); if (!this.#isIndexing) { this.#startIndexing(); } this.#pendingSearchConfig = searchConfig; } #onClearSearch(): void { this.#resetSearch(); this.#onClearSearchInput(); } }