[RPP] Improve performance of singleton overlays

Every call to `add` a new overlay would iterate over all existing
overlays to manage singletons specially. For an extreme case of ~70k
overlays, this resulted in ~22s of extra processing time on my M1 Mac.

This CL reduces it down to 5ms by simply storing singleton overlays in
a map for constant time lookup.

Example trace w/ many overlays on 3p insight:  https://trace.cafe/t/V7sS5bz7F0

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

Author: Connor Clark

front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -332,7 +332,11 @@ export interface TimelineOverlaySetOptions {
  */
 type SingletonOverlay = EntrySelected|TimestampMarker;
 export function overlayIsSingleton(overlay: TimelineOverlay): overlay is SingletonOverlay {
-  return overlay.type === 'TIMESTAMP_MARKER' || overlay.type === 'ENTRY_SELECTED';
+  return overlayTypeIsSingleton(overlay.type);
+}
+
+export function overlayTypeIsSingleton(type: TimelineOverlay['type']): type is SingletonOverlay['type'] {
+  return type === 'TIMESTAMP_MARKER' || type === 'ENTRY_SELECTED';
 }
 
 /**
@@ -454,6 +458,8 @@ export class Overlays extends EventTarget {
    */
   #overlaysToElements = new Map<TimelineOverlay, HTMLElement|null>();
 
+  #singletonOverlays = new Map<SingletonOverlay['type'], TimelineOverlay>();
+
   // When the Entries Link Annotation is created, the arrow needs to follow the mouse.
   // Update the mouse coordinates while it is being created.
   #lastMouseOffsetX: number|null = null;
@@ -581,10 +587,14 @@ export class Overlays extends EventTarget {
      * the existing one, rather than create a new one. This ensures you can only
      * ever have one instance of the overlay type.
      */
-    const existing = this.overlaysOfType<T>(newOverlay.type);
-    if (overlayIsSingleton(newOverlay) && existing[0]) {
-      this.updateExisting(existing[0], newOverlay);
-      return existing[0];
+    if (overlayIsSingleton(newOverlay)) {
+      const existing = this.#singletonOverlays.get(newOverlay.type);
+      if (existing) {
+        this.updateExisting(existing, newOverlay);
+        return existing as T;  // The is a safe cast, thanks to `type` above.
+      }
+
+      this.#singletonOverlays.set(newOverlay.type, newOverlay);
     }
 
     // By setting the value to null, we ensure that on the next render that the
@@ -644,6 +654,16 @@ export class Overlays extends EventTarget {
    * @returns the number of overlays that were removed.
    */
   removeOverlaysOfType(type: TimelineOverlay['type']): number {
+    if (overlayTypeIsSingleton(type)) {
+      const singleton = this.#singletonOverlays.get(type);
+      if (singleton) {
+        this.remove(singleton);
+        return 1;
+      }
+
+      return 0;
+    }
+
     const overlaysToRemove = Array.from(this.#overlaysToElements.keys()).filter(overlay => {
       return overlay.type === type;
     });
@@ -657,6 +677,15 @@ export class Overlays extends EventTarget {
    * @returns all overlays that match the provided type.
    */
   overlaysOfType<T extends TimelineOverlay>(type: T['type']): Array<NoInfer<T>> {
+    if (overlayTypeIsSingleton(type)) {
+      const singleton = this.#singletonOverlays.get(type);
+      if (singleton) {
+        return [singleton as T];
+      }
+
+      return [];
+    }
+
     const matches: T[] = [];
 
     function overlayIsOfType(overlay: TimelineOverlay): overlay is T {
@@ -688,6 +717,9 @@ export class Overlays extends EventTarget {
       this.#overlaysContainer.removeChild(htmlElement);
     }
     this.#overlaysToElements.delete(overlay);
+    if (overlayIsSingleton(overlay)) {
+      this.#singletonOverlays.delete(overlay.type);
+    }
   }
 
   /**