chrome-devtools-frontend 1.0.1516909 → 1.0.1518653

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -52,7 +52,7 @@ import {
   StylesSidebarPane,
 } from './StylesSidebarPane.js';
 
-const {html, nothing, render, Directives: {classMap, ifDefined}} = Lit;
+const {html, nothing, render, Directives: {classMap}} = Lit;
 const ASTUtils = SDK.CSSPropertyParser.ASTUtils;
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
@@ -446,19 +446,25 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
     const attrCall =
         this.#treeElement?.getTracingTooltip('attr', match.node, this.#matchedStyles, this.#computedStyles, context);
     const tooltipId = attributeMissing ? undefined : this.#treeElement?.getTooltipId('custom-attribute');
+    const tooltip = tooltipId ? {tooltipId} : undefined;
     // clang-format off
     render(html`
         <span data-title=${computedValue || ''}
               jslog=${VisualLogging.link('css-variable').track({click: true, hover: true})}
-        >${attrCall ?? 'attr'}(<span class=${attributeClass} aria-details=${ifDefined(tooltipId)}>${match.name}</span>${
-            match.type ? html` <span class=${typeClass}>${match.type}</span>` : nothing
-        }${renderedFallback ? html`, <span class=${fallbackClass}>${renderedFallback.nodes}</span>` : nothing
-        })</span>${tooltipId ? html`
+        >${attrCall ?? 'attr'}(<devtools-link-swatch class=${attributeClass} .data=${{
+              tooltip,
+              text: match.name,
+              isDefined: true,
+              onLinkActivate: () => this.#handleAttributeActivate(this.#matchedStyles.originatingNodeForStyle(match.style), match.name),
+            }}></devtools-link-swatch>${tooltipId ? html`
           <devtools-tooltip
             id=${tooltipId}
             variant=rich
             jslogContext=elements.css-var
-          >${JSON.stringify(rawValue)}</devtools-tooltip>` : ''}`, varSwatch);
+          >${JSON.stringify(rawValue)}</devtools-tooltip>` : nothing}${
+            match.type ? html` <span class=${typeClass}>${match.type}</span>` : nothing
+        }${renderedFallback ? html`, <span class=${fallbackClass}>${renderedFallback.nodes}</span>` : nothing
+        })</span>`, varSwatch);
     // clang-format on
 
     const color = computedValue && Common.Color.parse(computedValue);
@@ -478,6 +484,15 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
 
     return [colorSwatch, varSwatch];
   }
+
+  #handleAttributeActivate(node: SDK.DOMModel.DOMNode|null, attribute: string): void {
+    if (!node) {
+      return;
+    }
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AttributeLinkClicked);
+    Host.userMetrics.swatchActivated(Host.UserMetrics.SwatchType.ATTR_LINK);
+    ElementsPanel.instance().highlightNodeAttribute(node, attribute);
+  }
 }
 
 // clang-format off

package/front_end/panels/media/TickingFlameChart.ts

@@ -19,7 +19,7 @@ function getGroupDefaultTextColor(): string {
 const DefaultStyle: () => PerfUI.FlameChart.GroupStyle = () => ({
   height: 20,
   padding: 2,
-  collapsible: false,
+  collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER,
   font: defaultFont,
   color: getGroupDefaultTextColor(),
   backgroundColor: 'rgba(100 0 0 / 10%)',

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -303,7 +303,17 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   baseProfile!: HeapProfileHeader|null;
   trackingOverviewGrid?: HeapTimelineOverview;
   currentSearchResultIndex = -1;
-  currentQuery?: HeapSnapshotModel.HeapSnapshotModel.SearchConfig;
+  currentSearch?: HeapSnapshotModel.HeapSnapshotModel.SearchConfig;
+
+  get currentQuery(): string|undefined {
+    return this.currentSearch?.query;
+  }
+  set currentQuery(value: string) {
+    if (this.currentSearch) {
+      this.currentSearch.query = value;
+    }
+  }
+
   constructor(dataDisplayDelegate: DataDisplayDelegate, profile: HeapProfileHeader) {
     super({
       title: i18nString(UIStrings.heapSnapshot),
@@ -643,8 +653,13 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
     const nextQuery = new HeapSnapshotModel.HeapSnapshotModel.SearchConfig(
-        searchConfig.query.trim(), searchConfig.caseSensitive, searchConfig.wholeWord, searchConfig.isRegex, shouldJump,
-        jumpBackwards || false);
+        searchConfig.query.trim(),
+        searchConfig.caseSensitive,
+        searchConfig.wholeWord,
+        searchConfig.isRegex,
+        shouldJump,
+        jumpBackwards || false,
+    );
 
     void this.searchThrottler.schedule(this.performSearchInternal.bind(this, nextQuery));
   }
@@ -657,7 +672,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
       return;
     }
 
-    this.currentQuery = nextQuery;
+    this.currentSearch = nextQuery;
     const query = nextQuery.query.trim();
 
     if (!query) {
@@ -682,7 +697,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     }
 
     const filter = this.dataGrid.nodeFilter();
-    this.searchResults = filter ? await this.profile.snapshotProxy.search(this.currentQuery, filter) : [];
+    this.searchResults = filter ? await this.profile.snapshotProxy.search(this.currentSearch, filter) : [];
 
     this.searchableViewInternal.updateSearchMatchesCount(this.searchResults.length);
     if (this.searchResults.length) {
@@ -724,10 +739,10 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     if (!this.dataGrid) {
       return;
     }
-    let child: (HeapSnapshotGridNode|null) = (this.dataGrid.rootNode().children[0] as HeapSnapshotGridNode | null);
+    let child: DataGrid.DataGrid.DataGridNode<HeapSnapshotGridNode>|null = this.dataGrid.rootNode().children[0];
     while (child) {
       child.refresh();
-      child = (child.traverseNextNode(false, null, true) as HeapSnapshotGridNode | null);
+      child = child.traverseNextNode(false, null, true);
     }
   }
 
@@ -735,28 +750,28 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     if (this.baseProfile === this.profiles()[this.baseSelect.selectedIndex()]) {
       return;
     }
-    this.baseProfile = (this.profiles()[this.baseSelect.selectedIndex()] as HeapProfileHeader);
+    this.baseProfile = this.profiles()[this.baseSelect.selectedIndex()];
     const dataGrid = (this.dataGrid as HeapSnapshotDiffDataGrid);
     // Change set base data source only if main data source is already set.
     if (dataGrid.snapshot) {
       void this.baseProfile.loadPromise.then(dataGrid.setBaseDataSource.bind(dataGrid));
     }
 
-    if (!this.currentQuery || !this.searchResults) {
+    if (!this.currentSearch || !this.searchResults) {
       return;
     }
 
     // The current search needs to be performed again. First negate out previous match
     // count by calling the search finished callback with a negative number of matches.
     // Then perform the search again with the same query and callback.
-    this.performSearch(this.currentQuery, false);
+    this.performSearch(this.currentSearch, false);
   }
 
-  static readonly ALWAYS_AVAILABLE_FILTERS = [
+  static readonly ALWAYS_AVAILABLE_FILTERS: ReadonlyArray<{uiName: string, filterName: string}> = [
     {uiName: i18nString(UIStrings.duplicatedStrings), filterName: 'duplicatedStrings'},
     {uiName: i18nString(UIStrings.objectsRetainedByDetachedDomNodes), filterName: 'objectsRetainedByDetachedDomNodes'},
     {uiName: i18nString(UIStrings.objectsRetainedByConsole), filterName: 'objectsRetainedByConsole'},
-  ] as ReadonlyArray<{uiName: string, filterName: string}>;
+  ];
 
   changeFilter(): void {
     let selectedIndex = this.filterSelect.selectedIndex();
@@ -773,19 +788,19 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
       return;
     }
     (this.dataGrid as HeapSnapshotConstructorsDataGrid)
-        .filterSelectIndexChanged((this.profiles() as HeapProfileHeader[]), profileIndex, filterName);
+        .filterSelectIndexChanged(this.profiles(), profileIndex, filterName);
 
-    if (!this.currentQuery || !this.searchResults) {
+    if (!this.currentSearch || !this.searchResults) {
       return;
     }
 
     // The current search needs to be performed again. First negate out previous match
     // count by calling the search finished callback with a negative number of matches.
     // Then perform the search again with the same query and callback.
-    this.performSearch(this.currentQuery, false);
+    this.performSearch(this.currentSearch, false);
   }
 
-  profiles(): ProfileHeader[] {
+  profiles(): HeapProfileHeader[] {
     return this.profile.profileType().getProfiles();
   }
 
@@ -866,7 +881,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
       return;
     }
     if (!this.baseProfile) {
-      this.baseProfile = (this.profiles()[this.baseSelect.selectedIndex()] as HeapProfileHeader);
+      this.baseProfile = this.profiles()[this.baseSelect.selectedIndex()];
     }
 
     const baseSnapshotProxy = await this.baseProfile.loadPromise;
@@ -900,14 +915,14 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
 
     void this.updateDataSourceAndView();
 
-    if (!this.currentQuery || !this.searchResults) {
+    if (!this.currentSearch || !this.searchResults) {
       return;
     }
 
     // The current search needs to be performed again. First negate out previous match
     // count by calling the search finished callback with a negative number of matches.
     // Then perform the search again the with same query and callback.
-    this.performSearch(this.currentQuery, false);
+    this.performSearch(this.currentSearch, false);
   }
 
   async selectLiveObject(perspectiveName: string, snapshotObjectId: string): Promise<void> {

package/front_end/panels/search/SearchResultsPane.ts

@@ -35,22 +35,95 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/search/SearchResultsPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+interface SearchMatch {
+  lineContent: string;
+  matchRanges: TextUtils.TextRange.SourceRange[];
+  resultLabel: string|number;
+}
+
 export class SearchResultsPane extends UI.Widget.VBox {
   private readonly searchConfig: Workspace.SearchConfig.SearchConfig;
-  private readonly searchResults: SearchResult[];
-  private readonly treeElements: SearchResultsTreeElement[];
+  private readonly searchResults = new Map<SearchResult, UI.TreeOutline.TreeElement>();
+  private expandedResults = new WeakSet<SearchResult>();
+  private readonly searchMatches = new WeakMap<SearchResult, SearchMatch[]>();
   private treeOutline: UI.TreeOutline.TreeOutlineInShadow;
-  private matchesExpandedCount: number;
+  private matchesExpandedCount = 0;
+
+  private addTreeElement(searchResult: SearchResult): void {
+    const treeElement = new UI.TreeOutline.TreeElement('', true);
+    treeElement.toggleOnClick = true;
+    this.searchResults.set(searchResult, treeElement);
+    this.treeOutline.appendChild(treeElement);
+    if (!this.treeOutline.selectedTreeElement) {
+      treeElement.select(/* omitFocus */ true, /* selectedByUser */ true);
+    }
+    treeElement.listItemElement.classList.add('search-result');
+    // clang-format off
+    render(html`
+      <span class="search-result-file-name">${searchResult.label()}
+        <span class="search-result-dash">${'\u2014'}</span>
+        <span class="search-result-qualifier">${searchResult.description()}</span>
+      </span>
+      <span class="search-result-matches-count"
+          aria-label=${i18nString(UIStrings.matchesCountS, {PH1: searchResult.matchesCount()})}>
+          ${searchResult.matchesCount()}
+      </span>`,
+    treeElement.listItemElement);
+    // clang-format on
+    treeElement.tooltip = searchResult.description();
+  }
+
+  private appendSearchMatchElement(searchResult: SearchResult, match: SearchMatch, i: number): void {
+    const {lineContent, matchRanges, resultLabel} = match;
+    const element = this.searchResults.get(searchResult);
+    if (!element) {
+      return;
+    }
+    const searchMatchElement = new UI.TreeOutline.TreeElement();
+    element.appendChild(searchMatchElement);
+    // clang-format off
+    render(html`
+      <button class="devtools-link text-button link-style search-match-link"
+              jslog="Link; context: search-match; track: click" role="link" tabindex="0"
+              @click=${() => void Common.Revealer.reveal(searchResult.matchRevealable(i))}>
+        <span class="search-match-line-number"
+            aria-label=${typeof resultLabel === 'number' && !isNaN(resultLabel)
+                            ?  i18nString(UIStrings.lineS, {PH1: resultLabel}) : resultLabel}>
+          ${resultLabel}
+        </span>
+        <span class="search-match-content" aria-label="${lineContent} line">
+          ${lineContent}
+        </span>
+      </button>`,
+      searchMatchElement.listItemElement);
+    // clang-format on
+    const contentSpan = searchMatchElement.listItemElement.querySelector('.search-match-content') as HTMLElement;
+    UI.UIUtils.highlightRangesWithStyleClass(contentSpan, matchRanges, 'highlighted-search-result');
+    searchMatchElement.listItemElement.className = 'search-match';
+    searchMatchElement.listItemElement.addEventListener('keydown', event => {
+      if (event.key === 'Enter') {
+        event.consume(true);
+        void Common.Revealer.reveal(searchResult.matchRevealable(i));
+      }
+    });
+    searchMatchElement.tooltip = lineContent;
+  }
 
   constructor(searchConfig: Workspace.SearchConfig.SearchConfig) {
     super({useShadowDom: true});
     this.searchConfig = searchConfig;
-
-    this.searchResults = [];
-    this.treeElements = [];
     this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
     this.treeOutline.registerRequiredCSS(searchResultsPaneStyles);
     this.treeOutline.setHideOverflow(true);
+    this.treeOutline.addEventListener(
+        UI.TreeOutline.Events.ElementExpanded,
+        (event: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => {
+          const searchResult = this.searchResults.entries().find(entry => entry[1] === event.data)?.[0];
+          if (!searchResult) {
+            return;
+          }
+          this.expandSearchResult(searchResult);
+        });
 
     this.contentElement.appendChild(this.treeOutline.element);
 
@@ -58,108 +131,43 @@ export class SearchResultsPane extends UI.Widget.VBox {
   }
 
   addSearchResult(searchResult: SearchResult): void {
-    this.searchResults.push(searchResult);
     this.addTreeElement(searchResult);
-  }
-
-  showAllMatches(): void {
-    this.treeElements.forEach(treeElement => {
-      treeElement.expand();
-      treeElement.showAllMatches();
-    });
-  }
-
-  collapseAllResults(): void {
-    this.treeElements.forEach(treeElement => {
-      treeElement.collapse();
-    });
-  }
-
-  private addTreeElement(searchResult: SearchResult): void {
-    const treeElement = new SearchResultsTreeElement(this.searchConfig, searchResult);
-    this.treeOutline.appendChild(treeElement);
-    if (!this.treeOutline.selectedTreeElement) {
-      treeElement.select(/* omitFocus */ true, /* selectedByUser */ true);
-    }
     // Expand until at least a certain number of matches is expanded.
     if (this.matchesExpandedCount < matchesExpandedByDefault) {
-      treeElement.expand();
+      this.searchResults.get(searchResult)?.expand();
     }
-    this.matchesExpandedCount += searchResult.matchesCount();
-    this.treeElements.push(treeElement);
-  }
-}
-
-export const matchesExpandedByDefault = 200;
-export const matchesShownAtOnce = 20;
-
-export class SearchResultsTreeElement extends UI.TreeOutline.TreeElement {
-  private searchConfig: Workspace.SearchConfig.SearchConfig;
-  private searchResult: SearchResult;
-  private initialized: boolean;
-  override toggleOnClick: boolean;
-
-  constructor(searchConfig: Workspace.SearchConfig.SearchConfig, searchResult: SearchResult) {
-    super('', true);
-    this.searchConfig = searchConfig;
-    this.searchResult = searchResult;
-    this.initialized = false;
-    this.toggleOnClick = true;
   }
 
-  override onexpand(): void {
-    if (this.initialized) {
-      return;
+  showAllMatches(): void {
+    for (const searchResult of this.searchResults.keys()) {
+      const startMatchIndex = this.searchMatches.get(searchResult)?.length ?? 0;
+      this.appendSearchMatches(searchResult, startMatchIndex, searchResult.matchesCount());
     }
-
-    this.updateMatchesUI();
-    this.initialized = true;
   }
 
-  showAllMatches(): void {
-    this.removeChildren();
-    this.appendSearchMatches(0, this.searchResult.matchesCount());
+  collapseAllResults(): void {
+    for (const treeElement of this.searchResults.values()) {
+      treeElement.collapse();
+    }
   }
 
-  private updateMatchesUI(): void {
-    this.removeChildren();
-    const toIndex = Math.min(this.searchResult.matchesCount(), matchesShownAtOnce);
-    if (toIndex < this.searchResult.matchesCount()) {
-      this.appendSearchMatches(0, toIndex - 1);
-      this.appendShowMoreMatchesElement(toIndex - 1);
+  private expandSearchResult(searchResult: SearchResult): void {
+    const toIndex = Math.min(searchResult.matchesCount(), matchesShownAtOnce);
+    if (toIndex < searchResult.matchesCount()) {
+      this.appendSearchMatches(searchResult, 0, toIndex - 1);
+      this.appendShowMoreMatchesElement(searchResult, toIndex - 1);
     } else {
-      this.appendSearchMatches(0, toIndex);
+      this.appendSearchMatches(searchResult, 0, toIndex);
     }
+    this.matchesExpandedCount += toIndex;
+    this.requestUpdate();
   }
 
-  override onattach(): void {
-    this.updateSearchMatches();
+  private collapseSearchResult(searchResult: SearchResult): void {
+    this.searchResults.get(searchResult)?.collapse();
   }
 
-  private updateSearchMatches(): void {
-    this.listItemElement.classList.add('search-result');
-    // clang-format off
-    render(html`
-      <span class="search-result-file-name">${this.searchResult.label()}
-        <span class="search-result-dash">${'\u2014'}</span>
-        <span class="search-result-qualifier">${this.searchResult.description()}</span>
-      </span>
-      <span class="search-result-matches-count"
-          aria-label=${i18nString(UIStrings.matchesCountS, {PH1: this.searchResult.matchesCount()})}>
-          ${this.searchResult.matchesCount()}
-      </span>`,
-    this.listItemElement);
-    // clang-format on
-
-    this.tooltip = this.searchResult.description();
-    if (this.expanded) {
-      this.updateMatchesUI();
-    }
-  }
-
-  private appendSearchMatches(fromIndex: number, toIndex: number): void {
-    const searchResult = this.searchResult;
-
+  private appendSearchMatches(searchResult: SearchResult, fromIndex: number, toIndex: number): void {
     const queries = this.searchConfig.queries();
     const regexes = [];
     for (let i = 0; i < queries.length; ++i) {
@@ -167,6 +175,12 @@ export class SearchResultsTreeElement extends UI.TreeOutline.TreeElement {
           queries[i], !this.searchConfig.ignoreCase(), this.searchConfig.isRegex()));
     }
 
+    const searchMatches = this.searchMatches.get(searchResult) ?? [];
+    this.searchMatches.set(searchResult, searchMatches);
+    if (searchMatches.length > toIndex) {
+      return;
+    }
+
     for (let i = fromIndex; i < toIndex; ++i) {
       let lineContent = searchResult.matchLineContent(i);
       let matchRanges: TextUtils.TextRange.SourceRange[] = [];
@@ -189,46 +203,23 @@ export class SearchResultsTreeElement extends UI.TreeOutline.TreeElement {
       }
 
       const resultLabel = searchResult.matchLabel(i);
-
-      const searchMatchElement = new UI.TreeOutline.TreeElement();
-      this.appendChild(searchMatchElement);
-      // clang-format off
-      render(html`
-        <button class="devtools-link text-button link-style search-match-link"
-                jslog="Link; context: search-match; track: click" role="link" tabindex="0"
-                @click=${() => void Common.Revealer.reveal(searchResult.matchRevealable(i))}>
-          <span class="search-match-line-number"
-              aria-label=${typeof resultLabel === 'number' && !isNaN(resultLabel)
-                             ?  i18nString(UIStrings.lineS, {PH1: resultLabel}) : resultLabel}>
-            ${resultLabel}
-          </span>
-          <span class="search-match-content" aria-label="${lineContent} line">
-            ${lineContent}
-          </span>
-        </button>`,
-        searchMatchElement.listItemElement);
-      // clang-format on
-      const contentSpan = searchMatchElement.listItemElement.querySelector('.search-match-content') as HTMLElement;
-      UI.UIUtils.highlightRangesWithStyleClass(contentSpan, matchRanges, 'highlighted-search-result');
-      searchMatchElement.listItemElement.className = 'search-match';
-      searchMatchElement.listItemElement.addEventListener('keydown', event => {
-        if (event.key === 'Enter') {
-          event.consume(true);
-          void Common.Revealer.reveal(searchResult.matchRevealable(i));
-        }
-      });
-      searchMatchElement.tooltip = lineContent;
+      searchMatches.push({lineContent, matchRanges, resultLabel});
+      this.appendSearchMatchElement(searchResult, searchMatches[i], i);
     }
   }
 
-  private appendShowMoreMatchesElement(startMatchIndex: number): void {
-    const matchesLeftCount = this.searchResult.matchesCount() - startMatchIndex;
+  private appendShowMoreMatchesElement(searchResult: SearchResult, startMatchIndex: number): void {
+    const element = this.searchResults.get(searchResult);
+    if (!element) {
+      return;
+    }
+    const matchesLeftCount = searchResult.matchesCount() - startMatchIndex;
     const showMoreMatchesText = i18nString(UIStrings.showDMore, {PH1: matchesLeftCount});
     const showMoreMatchesTreeElement = new UI.TreeOutline.TreeElement(showMoreMatchesText);
-    this.appendChild(showMoreMatchesTreeElement);
+    element.appendChild(showMoreMatchesTreeElement);
     showMoreMatchesTreeElement.listItemElement.classList.add('show-more-matches');
     showMoreMatchesTreeElement.onselect =
-        this.showMoreMatchesElementSelected.bind(this, showMoreMatchesTreeElement, startMatchIndex);
+        this.showMoreMatchesElementSelected.bind(this, searchResult, showMoreMatchesTreeElement, startMatchIndex);
   }
 
   private regexMatchRanges(lineContent: string, regex: RegExp): TextUtils.TextRange.SourceRange[] {
@@ -243,13 +234,18 @@ export class SearchResultsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   private showMoreMatchesElementSelected(
-      showMoreMatchesTreeElement: UI.TreeOutline.TreeElement, startMatchIndex: number): boolean {
-    this.removeChild(showMoreMatchesTreeElement);
-    this.appendSearchMatches(startMatchIndex, this.searchResult.matchesCount());
-    return false;
+      searchResult: SearchResult, showMoreMatchesTreeElement: UI.TreeOutline.TreeElement,
+      startMatchIndex: number): boolean {
+    const parentElement = showMoreMatchesTreeElement.parent;
+    parentElement?.removeChild(showMoreMatchesTreeElement);
+    this.appendSearchMatches(searchResult, startMatchIndex, searchResult.matchesCount());
+    return true;
   }
 }
 
+export const matchesExpandedByDefault = 200;
+export const matchesShownAtOnce = 20;
+
 const DEFAULT_OPTS = {
   prefixLength: 25,
   maxLength: 1000,

package/front_end/panels/search/SearchView.ts

@@ -106,12 +106,11 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/search/SearchView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {ref} = Directives;
+const {ref, live} = Directives;
 const {widgetConfig} = UI.Widget;
 
 interface SearchViewInput {
   query: string;
-  focusSearchInput: boolean;
   matchCase: boolean;
   isRegex: boolean;
   searchMessage: string;
@@ -128,12 +127,15 @@ interface SearchViewInput {
   onClearSearch: () => void;
 }
 
-type View = (input: SearchViewInput, output: object, target: HTMLElement) => void;
+interface SearchViewOutput {
+  focusSearchInput: () => void;
+}
+
+type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const {
     query,
-    focusSearchInput,
     matchCase,
     isRegex,
     searchMessage,
@@ -175,14 +177,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                     change: true, keydown: 'ArrowUp|ArrowDown|Enter'})}
                 aria-label=${i18nString(UIStrings.find)}
                 size="100" results="0"
-                .value=${query}
+                .value=${live(query)}
                 @keydown=${onQueryKeyDown}
                 @input=${(e: Event) => onQueryChange((e.target as HTMLInputElement).value)}
                 ${ref(e => {
-                  if (e instanceof HTMLInputElement && focusSearchInput) {
-                    e.focus();
-                    e.select();
-                  }
+                  output.focusSearchInput = () => {
+                    if (e instanceof HTMLInputElement) {
+                      e.focus();
+                      e.select();
+                    }
+                  };
                 })}>
             <devtools-button class="clear-button" tabindex="-1"
                 @click=${onClearSearchInput}
@@ -258,7 +262,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
 export class SearchView extends UI.Widget.VBox {
   readonly #view: View;
-  #focusSearchInput: boolean;
+  #focusSearchInput = (): void => {};
   #isIndexing: boolean;
   #searchId: number;
   #searchMatchesCount: number;
@@ -294,7 +298,6 @@ export class SearchView extends UI.Widget.VBox {
     this.#view = view;
     this.setMinimumSize(0, 40);
 
-    this.#focusSearchInput = false;
     this.#isIndexing = false;
     this.#searchId = 1;
     this.#query = '';
@@ -320,7 +323,6 @@ export class SearchView extends UI.Widget.VBox {
   override performUpdate(): void {
     const input: SearchViewInput = {
       query: this.#query,
-      focusSearchInput: this.#focusSearchInput,
       matchCase: this.#matchCase,
       isRegex: this.#isRegex,
       searchMessage: this.#searchMessage,
@@ -338,9 +340,13 @@ export class SearchView extends UI.Widget.VBox {
       onRefresh: this.#onRefresh.bind(this),
       onClearSearch: this.#onClearSearch.bind(this),
     };
-    const output = {};
+    const that = this;
+    const output: SearchViewOutput = {
+      set focusSearchInput(value: () => void) {
+        that.#focusSearchInput = value;
+      }
+    };
     this.#view(input, output, this.contentElement);
-    this.#focusSearchInput = false;
   }
 
   #onToggleRegex(): void {
@@ -360,7 +366,9 @@ export class SearchView extends UI.Widget.VBox {
   toggle(queryCandidate: string, searchImmediately?: boolean): void {
     this.#query = queryCandidate;
     this.requestUpdate();
-    this.focus();
+    void this.updateComplete.then(() => {
+      this.focus();
+    });
 
     this.#initScope();
     if (searchImmediately) {
@@ -537,8 +545,7 @@ export class SearchView extends UI.Widget.VBox {
   }
 
   override focus(): void {
-    this.#focusSearchInput = true;
-    this.requestUpdate();
+    this.#focusSearchInput();
   }
 
   override willHide(): void {