chrome-devtools-frontend 1.0.1516909 → 1.0.1519267

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/recorder/components/RecordingView.ts

@@ -220,9 +220,9 @@ function renderSettings({
   replayState,
   onReplaySettingsKeydown,
   onToggleReplaySettings
-}: ViewInput): Lit.TemplateResult {
+}: ViewInput): Lit.LitTemplate {
   if (!settings) {
-    return html``;
+    return Lit.nothing;
   }
   const environmentFragments = [];
   if (settings.viewportSettings) {

package/front_end/panels/search/SearchResultsPane.ts

@@ -1,16 +1,13 @@
 // 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.
-/* eslint-disable rulesdir/no-imperative-dom-api */
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
-
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
+import {html, render, type TemplateResult} from '../../ui/lit/lit.js';
 
 import searchResultsPaneStyles from './searchResultsPane.css.js';
 import type {SearchResult} from './SearchScope.js';
@@ -35,136 +32,175 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/search/SearchResultsPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SearchResultsPane extends UI.Widget.VBox {
-  private readonly searchConfig: Workspace.SearchConfig.SearchConfig;
-  private readonly searchResults: SearchResult[];
-  private readonly treeElements: SearchResultsTreeElement[];
-  private treeOutline: UI.TreeOutline.TreeOutlineInShadow;
-  private matchesExpandedCount: number;
+interface SearchMatch {
+  lineContent: string;
+  matchRanges: TextUtils.TextRange.SourceRange[];
+  resultLabel: string|number;
+}
 
-  constructor(searchConfig: Workspace.SearchConfig.SearchConfig) {
-    super({useShadowDom: true});
-    this.searchConfig = searchConfig;
+interface ViewInput {
+  results: SearchResult[];
+  matches: WeakMap<SearchResult, SearchMatch[]>;
+  expandedResults: WeakSet<SearchResult>;
+  onSelectMatch: (searchResult: SearchResult, matchIndex: number) => void;
+  onExpandSearchResult: (searchResult: SearchResult) => void;
+  onShowMoreMatches: (searchResult: SearchResult) => void;
+}
 
-    this.searchResults = [];
-    this.treeElements = [];
-    this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    this.treeOutline.registerRequiredCSS(searchResultsPaneStyles);
-    this.treeOutline.setHideOverflow(true);
+export type View = (input: ViewInput, output: unknown, target: HTMLElement) => void;
 
-    this.contentElement.appendChild(this.treeOutline.element);
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  const {results, matches, expandedResults, onSelectMatch, onExpandSearchResult, onShowMoreMatches} = input;
 
-    this.matchesExpandedCount = 0;
-  }
+  const onExpand = ({detail: {expanded, target}}: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
+    const searchResultIndex = Number(target.dataset.searchResultIndex);
+    const searchResult = results[searchResultIndex];
+    if (expanded) {
+      expandedResults.add(searchResult);
+      onExpandSearchResult(searchResult);
+    } else {
+      expandedResults.delete(searchResult);
+    }
+  };
+
+  // clang-format off
+  render(html`
+    <devtools-tree hide-overflow @expand=${onExpand} .template=${html`
+      <ul role="tree">
+        ${results.map((searchResult, i) => html`
+          <li role="treeitem" data-search-result-index=${i} class="search-result">
+            <style>${searchResultsPaneStyles}</style>
+            ${renderSearchResult(searchResult)}
+            <ul role="group" ?hidden=${!expandedResults.has(searchResult)}>
+              ${renderSearchMatches(searchResult, matches, onSelectMatch, onShowMoreMatches)}
+            </ul>
+          </li>`)}
+      </ul>
+    `}></devtools-tree>`,
+    target,
+  );
+  // clang-format on
+};
 
-  addSearchResult(searchResult: SearchResult): void {
-    this.searchResults.push(searchResult);
-    this.addTreeElement(searchResult);
-  }
+const renderSearchResult = (searchResult: SearchResult): TemplateResult => {
+  // clang-format off
+  return 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>`;
+  // clang-format on
+};
 
-  showAllMatches(): void {
-    this.treeElements.forEach(treeElement => {
-      treeElement.expand();
-      treeElement.showAllMatches();
-    });
-  }
+const renderSearchMatches =
+    (searchResult: SearchResult, matches: WeakMap<SearchResult, SearchMatch[]>,
+     onSelectMatch: (searchResult: SearchResult, matchIndex: number) => void,
+     onShowMoreMatches: (searchResult: SearchResult) => void): TemplateResult => {
+      const visibleMatches = matches.get(searchResult) ?? [];
+      const matchesLeftCount = searchResult.matchesCount() - visibleMatches.length;
+      // clang-format off
+  return html`
+      ${visibleMatches.map(({lineContent, matchRanges, resultLabel}, i) => html`
+        <li role="treeitem" class="search-match" @click=${() => onSelectMatch(searchResult, i)}
+          ${UI.TreeOutline.TreeSearch.highlight(matchRanges.map(range =>
+            ({offset: range.offset + `${resultLabel}`.length, length: range.length})), undefined)}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.key === 'Enter') {
+              onSelectMatch(searchResult, i);
+            }
+          }}
+        >
+          <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>
+        </li>`)}
+      ${
+      matchesLeftCount > 0 ? html`
+        <li role="treeitem" class="show-more-matches" @click=${() => onShowMoreMatches(searchResult)}>
+          ${i18nString(UIStrings.showDMore, { PH1: matchesLeftCount })}
+        </li>` : ''}`;
+      // clang-format on
+    };
 
-  collapseAllResults(): void {
-    this.treeElements.forEach(treeElement => {
-      treeElement.collapse();
-    });
-  }
+export class SearchResultsPane extends UI.Widget.VBox {
+  readonly #searchConfig: Workspace.SearchConfig.SearchConfig;
+  #searchResults: SearchResult[] = [];
+  #expandedResults = new WeakSet<SearchResult>();
+  readonly #searchMatches = new WeakMap<SearchResult, SearchMatch[]>();
+  #view: View;
 
-  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.matchesExpandedCount += searchResult.matchesCount();
-    this.treeElements.push(treeElement);
+  constructor(searchConfig: Workspace.SearchConfig.SearchConfig, view: View = DEFAULT_VIEW) {
+    super({useShadowDom: true});
+    this.#view = view;
+    this.#searchConfig = searchConfig;
   }
-}
-
-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;
+  get searchResults(): SearchResult[] {
+    return this.#searchResults;
   }
 
-  override onexpand(): void {
-    if (this.initialized) {
-      return;
+  set searchResults(searchResults: SearchResult[]) {
+    this.#searchResults = searchResults;
+    let matchesExpandedCount = 0;
+    for (const searchResult of searchResults) {
+      if (this.#expandedResults.has(searchResult)) {
+        matchesExpandedCount += this.#searchMatches.get(searchResult)?.length ?? 0;
+      }
     }
-
-    this.updateMatchesUI();
-    this.initialized = true;
+    for (const searchResult of searchResults) {
+      if (matchesExpandedCount < matchesExpandedByDefault && !this.#expandedResults.has(searchResult)) {
+        this.#expandedResults.add(searchResult);
+        this.#onExpandSearchResult(searchResult);
+        matchesExpandedCount += this.#searchMatches.get(searchResult)?.length ?? 0;
+      }
+    }
+    this.requestUpdate();
   }
 
   showAllMatches(): void {
-    this.removeChildren();
-    this.appendSearchMatches(0, this.searchResult.matchesCount());
-  }
-
-  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);
-    } else {
-      this.appendSearchMatches(0, toIndex);
+    for (const searchResult of this.#searchResults) {
+      const startMatchIndex = this.#searchMatches.get(searchResult)?.length ?? 0;
+      this.#appendSearchMatches(searchResult, startMatchIndex, searchResult.matchesCount());
     }
+    this.requestUpdate();
   }
 
-  override onattach(): void {
-    this.updateSearchMatches();
+  collapseAllResults(): void {
+    this.#expandedResults = new WeakSet<SearchResult>();
+    this.requestUpdate();
   }
 
-  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();
-    }
+  #onExpandSearchResult(searchResult: SearchResult): void {
+    const toIndex = Math.min(searchResult.matchesCount(), matchesShownAtOnce);
+    this.#appendSearchMatches(searchResult, 0, toIndex);
+    this.requestUpdate();
   }
 
-  private appendSearchMatches(fromIndex: number, toIndex: number): void {
-    const searchResult = this.searchResult;
-
-    const queries = this.searchConfig.queries();
+  #appendSearchMatches(searchResult: SearchResult, fromIndex: number, toIndex: number): void {
+    const queries = this.#searchConfig.queries();
     const regexes = [];
     for (let i = 0; i < queries.length; ++i) {
       regexes.push(Platform.StringUtilities.createSearchRegex(
-          queries[i], !this.searchConfig.ignoreCase(), this.searchConfig.isRegex()));
+          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) {
@@ -183,55 +219,32 @@ export class SearchResultsTreeElement extends UI.TreeOutline.TreeElement {
       } else {
         lineContent = lineContent.trim();
         for (let j = 0; j < regexes.length; ++j) {
-          matchRanges = matchRanges.concat(this.regexMatchRanges(lineContent, regexes[j]));
+          matchRanges = matchRanges.concat(this.#regexMatchRanges(lineContent, regexes[j]));
         }
         ({lineSegment: lineContent, matchRanges} = lineSegmentForMultipleMatches(lineContent, matchRanges));
       }
 
       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});
     }
   }
 
-  private appendShowMoreMatchesElement(startMatchIndex: number): void {
-    const matchesLeftCount = this.searchResult.matchesCount() - startMatchIndex;
-    const showMoreMatchesText = i18nString(UIStrings.showDMore, {PH1: matchesLeftCount});
-    const showMoreMatchesTreeElement = new UI.TreeOutline.TreeElement(showMoreMatchesText);
-    this.appendChild(showMoreMatchesTreeElement);
-    showMoreMatchesTreeElement.listItemElement.classList.add('show-more-matches');
-    showMoreMatchesTreeElement.onselect =
-        this.showMoreMatchesElementSelected.bind(this, showMoreMatchesTreeElement, startMatchIndex);
+  override performUpdate(): void {
+    this.#view(
+        {
+          results: this.#searchResults,
+          matches: this.#searchMatches,
+          expandedResults: this.#expandedResults,
+          onSelectMatch: (searchResult, matchIndex) => {
+            void Common.Revealer.reveal(searchResult.matchRevealable(matchIndex));
+          },
+          onExpandSearchResult: this.#onExpandSearchResult.bind(this),
+          onShowMoreMatches: this.#onShowMoreMatches.bind(this),
+        },
+        {}, this.contentElement);
   }
 
-  private regexMatchRanges(lineContent: string, regex: RegExp): TextUtils.TextRange.SourceRange[] {
+  #regexMatchRanges(lineContent: string, regex: RegExp): TextUtils.TextRange.SourceRange[] {
     regex.lastIndex = 0;
     let match;
     const matchRanges = [];
@@ -242,14 +255,16 @@ export class SearchResultsTreeElement extends UI.TreeOutline.TreeElement {
     return matchRanges;
   }
 
-  private showMoreMatchesElementSelected(
-      showMoreMatchesTreeElement: UI.TreeOutline.TreeElement, startMatchIndex: number): boolean {
-    this.removeChild(showMoreMatchesTreeElement);
-    this.appendSearchMatches(startMatchIndex, this.searchResult.matchesCount());
-    return false;
+  #onShowMoreMatches(searchResult: SearchResult): void {
+    const startMatchIndex = this.#searchMatches.get(searchResult)?.length ?? 0;
+    this.#appendSearchMatches(searchResult, startMatchIndex, searchResult.matchesCount());
+    this.requestUpdate();
   }
 }
 
+export const matchesExpandedByDefault = 200;
+export const matchesShownAtOnce = 20;
+
 const DEFAULT_OPTS = {
   prefixLength: 25,
   maxLength: 1000,