chrome-devtools-frontend 1.0.1515446 → 1.0.1515988

package/front_end/panels/search/SearchView.ts

@@ -108,67 +108,52 @@ const str_ = i18n.i18n.registerUIStrings('panels/search/SearchView.ts', UIString
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {ref} = Directives;
 
-export class SearchView extends UI.Widget.VBox {
-  #focusOnShow: boolean;
-  #isIndexing: boolean;
-  #searchId: number;
-  #searchMatchesCount: number;
-  #searchResultsCount: number;
-  #nonEmptySearchResultsCount: number;
-  #searchingView: UI.Widget.Widget|null;
-  #notFoundView: UI.Widget.Widget|null;
-  #searchConfig: Workspace.SearchConfig.SearchConfig|null;
-  #pendingSearchConfig: Workspace.SearchConfig.SearchConfig|null;
-  #searchResultsPane: SearchResultsPane|null;
-  #progressIndicator: UI.ProgressIndicator.ProgressIndicator|null;
-  #visiblePane: UI.Widget.Widget|null;
-  #searchResultsElement!: HTMLElement;
-  #searchInputElement!: HTMLInputElement;
-  #matchCaseButton!: Buttons.Button.Button;
-  #regexButton!: Buttons.Button.Button;
-  #searchMessageElement!: HTMLElement;
-  #searchProgressPlaceholderElement!: HTMLElement;
-  #searchResultsMessageElement!: HTMLElement;
-  readonly #advancedSearchConfig: Common.Settings.Setting<{
-    query: string,
-    ignoreCase: boolean,
-    isRegex: boolean,
-  }>;
-  #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({
-      jslog: `${VisualLogging.panel('search').track({resize: true})}`,
-      useShadowDom: true,
-    });
-    this.setMinimumSize(0, 40);
+interface SearchViewInput {
+  query: string;
+  focusSearchInput: boolean;
+  matchCase: boolean;
+  isRegex: boolean;
+  searchMessage: string;
+  searchResultsMessage: string;
+  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;
+}
 
-    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;
+interface SearchViewOutput {
+  searchResultsElement?: HTMLElement;
+}
 
-    // clang-format off
-    /* eslint-disable-next-line rulesdir/no-lit-render-outside-of-view */
-    render(html`
+type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    query,
+    focusSearchInput,
+    matchCase,
+    isRegex,
+    searchMessage,
+    searchResultsMessage,
+    progress,
+    onQueryChange,
+    onQueryKeyDown,
+    onPanelKeyDown,
+    onClearSearchInput,
+    onToggleRegex,
+    onToggleMatchCase,
+    onRefresh,
+    onClearSearch,
+  } = input;
+  // clang-format off
+  render(html`
       <style>${searchViewStyles}</style>
-      <div class="search-drawer-header" @keydown=${this.#onPanelKeyDown}>
+      <div class="search-drawer-header" @keydown=${onPanelKeyDown}>
         <div class="search-container">
           <div class="toolbar-item-search">
             <devtools-icon name="search"></devtools-icon>
@@ -179,10 +164,17 @@ export class SearchView extends UI.Widget.VBox {
                     change: true, keydown: 'ArrowUp|ArrowDown|Enter'})}
                 aria-label=${i18nString(UIStrings.find)}
                 size="100" results="0"
-                @keydown=${this.#onQueryKeyDown}
-                ${ref(e => {this.#searchInputElement = e as HTMLInputElement;})}>
+                .value=${query}
+                @keydown=${onQueryKeyDown}
+                @input=${(e: Event) => onQueryChange((e.target as HTMLInputElement).value)}
+                ${ref(e => {
+                  if (e instanceof HTMLInputElement && focusSearchInput) {
+                    e.focus();
+                    e.select();
+                  }
+                })}>
             <devtools-button class="clear-button" tabindex="-1"
-                @click=${this.#onClearSearchInput}
+                @click=${onClearSearchInput}
                 .data=${{
                   variant: Buttons.Button.Variant.ICON,
                   iconName: 'cross-circle-filled',
@@ -191,40 +183,40 @@ export class SearchView extends UI.Widget.VBox {
                   title: i18nString(UIStrings.clearInput),
                 } as Buttons.Button.ButtonData}
             ></devtools-button>
-            <devtools-button @click=${this.#onToggleRegex} .data=${{
+            <devtools-button @click=${onToggleRegex} .data=${{
                 variant: Buttons.Button.Variant.ICON_TOGGLE,
                 iconName: 'regular-expression',
                 toggledIconName: 'regular-expression',
                 toggleType: Buttons.Button.ToggleType.PRIMARY,
                 size: Buttons.Button.Size.SMALL,
-                toggled: false,
-                title: i18nString(UIStrings.enableRegularExpression),
+                toggled: isRegex,
+                title: isRegex ? i18nString(UIStrings.disableRegularExpression) : i18nString(UIStrings.enableRegularExpression),
                 jslogContext: 'regular-expression',
               } as Buttons.Button.ButtonData}
-              ${ref(e => {this.#regexButton = e as Buttons.Button.Button;})}
+              class="regex-button"
             ></devtools-button>
-            <devtools-button @click=${this.#onToggleMatchCase} .data=${{
+            <devtools-button @click=${onToggleMatchCase} .data=${{
                 variant: Buttons.Button.Variant.ICON_TOGGLE,
                 iconName: 'match-case',
                 toggledIconName: 'match-case',
                 toggleType: Buttons.Button.ToggleType.PRIMARY,
                 size: Buttons.Button.Size.SMALL,
-                toggled: false,
-                title: i18nString(UIStrings.enableCaseSensitive),
+                toggled: matchCase,
+                title: matchCase ? i18nString(UIStrings.disableCaseSensitive) : i18nString(UIStrings.enableCaseSensitive),
                 jslogContext: 'match-case',
               } as Buttons.Button.ButtonData}
-              ${ref(e => {this.#matchCaseButton = e as Buttons.Button.Button;})}
+              class="match-case-button"
             ></devtools-button>
           </div>
         </div>
         <devtools-toolbar class="search-toolbar" jslog=${VisualLogging.toolbar()}>
-          <devtools-button title=${i18nString(UIStrings.refresh)} @click=${this.#onRefresh}
+          <devtools-button title=${i18nString(UIStrings.refresh)} @click=${onRefresh}
               .data=${{
                 variant: Buttons.Button.Variant.TOOLBAR,
                 iconName: 'refresh',
                 jslogContext: 'search.refresh',
               } as Buttons.Button.ButtonData}></devtools-button>
-          <devtools-button title=${i18nString(UIStrings.clear)} @click=${this.#onClearSearch}
+          <devtools-button title=${i18nString(UIStrings.clear)} @click=${onClearSearch}
               .data=${{
                 variant: Buttons.Button.Variant.TOOLBAR,
                 iconName: 'clear',
@@ -232,22 +224,86 @@ export class SearchView extends UI.Widget.VBox {
               } as Buttons.Button.ButtonData}></devtools-button>
         </devtools-toolbar>
       </div>
-      <div class="search-results" @keydown=${this.#onPanelKeyDown}
-           ${ref(e => {this.#searchResultsElement = e as HTMLElement;})}>
+      <div class="search-results" @keydown=${onPanelKeyDown}
+           ${ref(e => {output.searchResultsElement = e as HTMLElement;})}>
       </div>
-      <div class="search-toolbar-summary" @keydown=${this.#onPanelKeyDown}>
-        <div class="search-message" ${ref(e => {this.#searchMessageElement = e as HTMLElement;})}></div>
-        <div class="flex-centered" ${ref(e => {this.#searchProgressPlaceholderElement = e as HTMLElement;})}>
+      <div class="search-toolbar-summary" @keydown=${onPanelKeyDown}>
+        <div class="search-message">${searchMessage}</div>
+        <div class="flex-centered">
+          ${progress ? html`
+            <devtools-progress .title=${progress.title ?? ''}
+                               .worked=${progress.worked} .totalWork=${progress.totalWork}>
+            </devtools-progress>` : ''}
         </div>
-        <div class="search-message" ${ref(e => {this.#searchResultsMessageElement = e as HTMLElement;})}>
-        </div>
-      </div>`, this.contentElement, {host: this});
-    // clang-format on
+        <div class="search-message">${searchResultsMessage}</div>
+      </div>`, target);
+  // clang-format on
+};
+
+export class SearchView extends UI.Widget.VBox {
+  readonly #view: View;
+  #focusSearchInput: boolean;
+  #isIndexing: boolean;
+  #searchId: number;
+  #searchMatchesCount: number;
+  #searchResultsCount: number;
+  #nonEmptySearchResultsCount: number;
+  #searchingView: UI.Widget.Widget|null;
+  #notFoundView: UI.Widget.Widget|null;
+  #searchConfig: Workspace.SearchConfig.SearchConfig|null;
+  #pendingSearchConfig: Workspace.SearchConfig.SearchConfig|null;
+  #searchResultsPane: SearchResultsPane|null;
+  #progress: Common.Progress.Progress|null;
+  #visiblePane: UI.Widget.Widget|null;
+  #searchResultsElement!: HTMLElement;
+  #query: string;
+  #matchCase = false;
+  #isRegex = false;
+  #searchMessage = '';
+  #searchResultsMessage = '';
+  readonly #advancedSearchConfig: Common.Settings.Setting<{
+    query: string,
+    ignoreCase: boolean,
+    isRegex: boolean,
+  }>;
+  #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, view = DEFAULT_VIEW) {
+    super({
+      jslog: `${VisualLogging.panel('search').track({resize: true})}`,
+      useShadowDom: true,
+    });
+    this.#view = view;
+    this.setMinimumSize(0, 40);
+
+    this.#focusSearchInput = false;
+    this.#isIndexing = false;
+    this.#searchId = 1;
+    this.#query = '';
+    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.#progress = null;
+    this.#visiblePane = null;
+    this.#throttler = throttler;
 
     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;
 
     this.#emptyStartView = new UI.EmptyWidget.EmptyWidget(
@@ -257,28 +313,52 @@ export class SearchView extends UI.Widget.VBox {
     this.#showPane(this.#emptyStartView);
   }
 
+  override performUpdate(): void {
+    const input: SearchViewInput = {
+      query: this.#query,
+      focusSearchInput: this.#focusSearchInput,
+      matchCase: this.#matchCase,
+      isRegex: this.#isRegex,
+      searchMessage: this.#searchMessage,
+      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 output: SearchViewOutput = {};
+    this.#view(input, output, this.contentElement);
+    this.#focusSearchInput = false;
+    if (output.searchResultsElement) {
+      this.#searchResultsElement = output.searchResultsElement;
+    }
+  }
+
   #onToggleRegex(): void {
-    this.#regexButton.title = this.#regexButton.toggled ? i18nString(UIStrings.disableRegularExpression) :
-                                                          i18nString(UIStrings.enableRegularExpression);
+    this.#isRegex = !this.#isRegex;
+    this.performUpdate();
   }
 
   #onToggleMatchCase(): void {
-    this.#matchCaseButton.title = this.#matchCaseButton.toggled ? i18nString(UIStrings.disableCaseSensitive) :
-                                                                  i18nString(UIStrings.enableCaseSensitive);
+    this.#matchCase = !this.#matchCase;
+    this.performUpdate();
   }
 
   #buildSearchConfig(): Workspace.SearchConfig.SearchConfig {
-    return new Workspace.SearchConfig.SearchConfig(
-        this.#searchInputElement.value, !this.#matchCaseButton.toggled, this.#regexButton.toggled);
+    return new Workspace.SearchConfig.SearchConfig(this.#query, !this.#matchCase, this.#isRegex);
   }
 
   toggle(queryCandidate: string, searchImmediately?: boolean): void {
-    this.#searchInputElement.value = queryCandidate;
-    if (this.isShowing()) {
-      this.focus();
-    } else {
-      this.#focusOnShow = true;
-    }
+    this.#query = queryCandidate;
+    this.requestUpdate();
+    this.focus();
 
     this.#initScope();
     if (searchImmediately) {
@@ -296,61 +376,54 @@ export class SearchView extends UI.Widget.VBox {
     this.#searchScope = this.createScope();
   }
 
-  override wasShown(): void {
-    super.wasShown();
-    if (this.#focusOnShow) {
-      this.focus();
-      this.#focusOnShow = false;
-    }
-  }
-
   #onIndexingFinished(): void {
-    if (!this.#progressIndicator) {
+    if (!this.#progress) {
       return;
     }
 
-    const finished = !this.#progressIndicator.isCanceled();
-    this.#progressIndicator.done();
-    this.#progressIndicator = null;
+    const finished = !this.#progress.canceled;
+    this.#progress = null;
     this.#isIndexing = false;
-    this.#searchMessageElement.textContent = finished ? '' : i18nString(UIStrings.indexingInterrupted);
+    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.#innerStartSearch(searchConfig);
+    this.#startSearch(searchConfig);
   }
 
   #startIndexing(): void {
     this.#isIndexing = true;
-    if (this.#progressIndicator) {
-      this.#progressIndicator.done();
+    if (this.#progress) {
+      this.#progress.done = true;
     }
-    this.#progressIndicator = document.createElement('devtools-progress');
-    this.#searchMessageElement.textContent = i18nString(UIStrings.indexing);
-    this.#searchProgressPlaceholderElement.appendChild(this.#progressIndicator);
+    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(
-          new Common.Progress.ProgressProxy(this.#progressIndicator, this.#onIndexingFinished.bind(this)));
+      this.#searchScope.performIndexing(this.#progress);
     }
   }
 
   #onClearSearchInput(): void {
-    this.#searchInputElement.value = '';
+    this.#query = '';
+    this.requestUpdate();
     this.#save();
     this.focus();
     this.#showPane(this.#emptyStartView);
   }
 
   #onSearchResult(searchId: number, searchResult: SearchResult): void {
-    if (searchId !== this.#searchId || !this.#progressIndicator) {
+    if (searchId !== this.#searchId || !this.#progress) {
       return;
     }
-    if (this.#progressIndicator?.isCanceled()) {
+    if (this.#progress?.canceled) {
       this.#onIndexingFinished();
       return;
     }
@@ -377,28 +450,29 @@ export class SearchView extends UI.Widget.VBox {
   }
 
   #onSearchFinished(searchId: number, finished: boolean): void {
-    if (searchId !== this.#searchId || !this.#progressIndicator) {
+    if (searchId !== this.#searchId || !this.#progress) {
       return;
     }
     if (!this.#searchResultsPane) {
       this.#nothingFound();
     }
+    this.#progress = null;
     this.#searchFinished(finished);
     this.#searchConfig = null;
-    UI.ARIAUtils.LiveAnnouncer.alert(
-        this.#searchMessageElement.textContent + ' ' + this.#searchResultsMessageElement.textContent);
+    UI.ARIAUtils.LiveAnnouncer.alert(this.#searchMessage + ' ' + this.#searchResultsMessage);
   }
 
-  #innerStartSearch(searchConfig: Workspace.SearchConfig.SearchConfig): void {
+  #startSearch(searchConfig: Workspace.SearchConfig.SearchConfig): void {
     this.#searchConfig = searchConfig;
-    if (this.#progressIndicator) {
-      this.#progressIndicator.done();
+    if (this.#progress) {
+      this.#progress.done = true;
     }
-    this.#progressIndicator = document.createElement('devtools-progress');
-    this.#searchStarted(this.#progressIndicator);
+    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.#progressIndicator, this.#onSearchResult.bind(this, this.#searchId),
+          searchConfig, this.#progress, this.#onSearchResult.bind(this, this.#searchId),
           this.#onSearchFinished.bind(this, this.#searchId));
     }
   }
@@ -407,13 +481,14 @@ export class SearchView extends UI.Widget.VBox {
     this.#stopSearch();
     this.#showPane(null);
     this.#searchResultsPane = null;
-    this.#searchMessageElement.textContent = '';
-    this.#searchResultsMessageElement.textContent = '';
+    this.#searchMessage = '';
+    this.#searchResultsMessage = '';
+    this.performUpdate();
   }
 
   #stopSearch(): void {
-    if (this.#progressIndicator && !this.#isIndexing) {
-      this.#progressIndicator.cancel();
+    if (this.#progress && !this.#isIndexing) {
+      this.#progress.canceled = true;
     }
     if (this.#searchScope) {
       this.#searchScope.stopSearch();
@@ -421,7 +496,7 @@ export class SearchView extends UI.Widget.VBox {
     this.#searchConfig = null;
   }
 
-  #searchStarted(progressIndicator: UI.ProgressIndicator.ProgressIndicator): void {
+  #searchStarted(): void {
     this.#searchMatchesCount = 0;
     this.#searchResultsCount = 0;
     this.#nonEmptySearchResultsCount = 0;
@@ -429,26 +504,26 @@ export class SearchView extends UI.Widget.VBox {
       this.#searchingView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.searching), '');
     }
     this.#showPane(this.#searchingView);
-    this.#searchMessageElement.textContent = i18nString(UIStrings.searching);
-    this.#searchProgressPlaceholderElement.appendChild(progressIndicator);
+    this.#searchMessage = i18nString(UIStrings.searching);
+    this.performUpdate();
     this.#updateSearchResultsMessage();
   }
 
   #updateSearchResultsMessage(): void {
     if (this.#searchMatchesCount && this.#searchResultsCount) {
       if (this.#searchMatchesCount === 1 && this.#nonEmptySearchResultsCount === 1) {
-        this.#searchResultsMessageElement.textContent = i18nString(UIStrings.foundMatchingLineInFile);
+        this.#searchResultsMessage = i18nString(UIStrings.foundMatchingLineInFile);
       } else if (this.#searchMatchesCount > 1 && this.#nonEmptySearchResultsCount === 1) {
-        this.#searchResultsMessageElement.textContent =
-            i18nString(UIStrings.foundDMatchingLinesInFile, {PH1: this.#searchMatchesCount});
+        this.#searchResultsMessage = i18nString(UIStrings.foundDMatchingLinesInFile, {PH1: this.#searchMatchesCount});
       } else {
-        this.#searchResultsMessageElement.textContent = i18nString(
+        this.#searchResultsMessage = i18nString(
             UIStrings.foundDMatchingLinesInDFiles,
             {PH1: this.#searchMatchesCount, PH2: this.#nonEmptySearchResultsCount});
       }
     } else {
-      this.#searchResultsMessageElement.textContent = '';
+      this.#searchResultsMessage = '';
     }
+    this.performUpdate();
   }
 
   #showPane(panel: UI.Widget.Widget|null): void {
@@ -480,13 +555,13 @@ export class SearchView extends UI.Widget.VBox {
   }
 
   #searchFinished(finished: boolean): void {
-    this.#searchMessageElement.textContent =
-        finished ? i18nString(UIStrings.searchFinished) : i18nString(UIStrings.searchInterrupted);
+    this.#searchMessage = finished ? i18nString(UIStrings.searchFinished) : i18nString(UIStrings.searchInterrupted);
+    this.performUpdate();
   }
 
   override focus(): void {
-    this.#searchInputElement.focus();
-    this.#searchInputElement.select();
+    this.#focusSearchInput = true;
+    this.requestUpdate();
   }
 
   override willHide(): void {
@@ -550,13 +625,11 @@ export class SearchView extends UI.Widget.VBox {
 
   #load(): void {
     const searchConfig = Workspace.SearchConfig.SearchConfig.fromPlainObject(this.#advancedSearchConfig.get());
-    this.#searchInputElement.value = searchConfig.query();
-
-    this.#matchCaseButton.toggled = !searchConfig.ignoreCase();
-    this.#onToggleMatchCase();
+    this.#query = searchConfig.query();
 
-    this.#regexButton.toggled = searchConfig.isRegex();
-    this.#onToggleRegex();
+    this.#matchCase = !searchConfig.ignoreCase();
+    this.#isRegex = searchConfig.isRegex();
+    this.requestUpdate();
   }
 
   #onRefresh(): void {
@@ -581,16 +654,4 @@ export class SearchView extends UI.Widget.VBox {
   get throttlerForTest(): Common.Throttler.Throttler {
     return this.#throttler;
   }
-
-  get search(): HTMLInputElement {
-    return this.#searchInputElement;
-  }
-
-  get matchCaseButton(): Buttons.Button.Button {
-    return this.#matchCaseButton;
-  }
-
-  get regexButton(): Buttons.Button.Button {
-    return this.#regexButton;
-  }
 }