[RPP] Fix trace event search issues

1. The search feature was doing nothing if the query was <3 characters.
   This produced confusing results when deleting your query, since the
   last result highlights still lingered.
2. Ending the search sometimes threw an error from accessing a trace
   event indexed by -1. This resulted in search highlights remaining
   until the next time the panel was redrawn. TypeScript didn't catch
   this, because it was a normal array access. Fixed this by making the
   type nullable, instead of using -1 to denote "no selection".

Bug: 373914908
Change-Id: Ib292054a47b99c39dc36fdc459d8b44adb7ba044
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5939712
Auto-Submit: Connor Clark <[email protected]>
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Paul Irish <[email protected]>

Author: Connor Clark

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -1391,9 +1391,9 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     delete this.searchResults;
     delete this.selectedSearchResult;
     delete this.searchRegex;
-    this.mainFlameChart.showPopoverForSearchResult(-1);
+    this.mainFlameChart.showPopoverForSearchResult(null);
     this.mainFlameChart.removeSearchResultHighlights();
-    this.networkFlameChart.showPopoverForSearchResult(-1);
+    this.networkFlameChart.showPopoverForSearchResult(null);
     this.networkFlameChart.removeSearchResultHighlights();
   }
 

front_end/panels/timeline/TimelinePanel.ts

@@ -535,6 +535,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.searchableViewInternal = new UI.SearchableView.SearchableView(this.flameChart, null);
     this.searchableViewInternal.setMinimumSize(0, 100);
+    this.searchableViewInternal.setMinimalSearchQuerySize(0);
     this.searchableViewInternal.element.classList.add('searchable-view');
     this.searchableViewInternal.show(this.timelinePane.element);
     this.flameChart.show(this.searchableViewInternal.element);

front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -184,7 +184,7 @@ interface GroupHiddenState {
 
 interface PopoverState {
   // Index of the last entry the popover was shown over.
-  entryIndex: number;
+  entryIndex: number|null;
   // Index of the last group the popover was shown over.
   groupIndex: number;
   hiddenEntriesPopover: boolean;
@@ -313,7 +313,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   #font: string;
   #groupTreeRoot?: GroupTreeNode|null;
-  #searchResultEntryIndex: number;
+  #searchResultEntryIndex: number|null = null;
   #searchResultHighlightElements: HTMLElement[] = [];
   #inTrackConfigEditMode: boolean = false;
   #linkSelectionAnnotationIsInProgress: boolean = false;
@@ -400,7 +400,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.highlightedMarkerIndex = -1;
     this.highlightedEntryIndex = -1;
     this.selectedEntryIndex = -1;
-    this.#searchResultEntryIndex = -1;
+    this.#searchResultEntryIndex = null;
     this.rawTimelineDataLength = 0;
     this.markerPositions = new Map();
     this.customDrawnPositions = new Map();
@@ -515,7 +515,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   hideHighlight(): void {
-    if (this.#searchResultEntryIndex === -1) {
+    if (this.#searchResultEntryIndex === null) {
       this.popoverElement.removeChildren();
       this.lastPopoverState = {
         entryIndex: -1,
@@ -660,7 +660,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
    *   3. Inside a track -> update the highlight of hovered event
    */
   private onMouseMove(mouseEvent: MouseEvent): void {
-    this.#searchResultEntryIndex = -1;
+    this.#searchResultEntryIndex = null;
     this.lastMouseOffsetX = mouseEvent.offsetX;
     this.lastMouseOffsetY = mouseEvent.offsetY;
     if (!this.enabled()) {
@@ -781,14 +781,15 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.hideHighlight();
   }
 
-  showPopoverForSearchResult(selectedSearchResult: number): void {
+  showPopoverForSearchResult(selectedSearchResult: number|null): void {
     this.#searchResultEntryIndex = selectedSearchResult;
     this.#updatePopoverForEntry(selectedSearchResult);
   }
 
-  #updatePopoverForEntry(entryIndex: number): void {
+  #updatePopoverForEntry(entryIndex: number|null): void {
     // Just update position if cursor is hovering the same entry.
-    const isMouseOverRevealChildrenArrow = this.isMouseOverRevealChildrenArrow(this.lastMouseOffsetX, entryIndex);
+    const isMouseOverRevealChildrenArrow =
+        entryIndex !== null && this.isMouseOverRevealChildrenArrow(this.lastMouseOffsetX, entryIndex);
     if (entryIndex === this.lastPopoverState.entryIndex &&
         isMouseOverRevealChildrenArrow === this.lastPopoverState.hiddenEntriesPopover) {
       return this.updatePopoverOffset();
@@ -803,7 +804,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const entryInfo = (isMouseOverRevealChildrenArrow && group) ?
         this.dataProvider.prepareHighlightedHiddenEntriesArrowInfo &&
             this.dataProvider.prepareHighlightedHiddenEntriesArrowInfo(entryIndex) :
-        this.dataProvider.prepareHighlightedEntryInfo(entryIndex);
+        entryIndex !== null && this.dataProvider.prepareHighlightedEntryInfo(entryIndex);
     if (entryInfo) {
       this.popoverElement.appendChild(entryInfo);
       this.updatePopoverOffset();