Switch cache maps to QuickLRU instances

packages/third-party/css/lexer.js

@@ -14,6 +14,8 @@
 
 "use strict";
 
+import QuickLRU from 'shared/utils/quick-lru';
+
 // White space of any kind.  No value fields are used.  Note that
 // comments do *not* count as white space; comments separate tokens
 // but are not themselves tokens.
@@ -167,7 +169,7 @@ function ensureValidChar(c) {
   return c;
 }
 
-const cachedCodes = new Map();
+const cachedCodes = new QuickLRU({maxSize: 3000});
 
 /**
  * Turn a string into an array of character codes.

packages/third-party/css/output-parser.js

@@ -4,6 +4,7 @@
 
 "use strict";
 
+import QuickLRU from "shared/utils/quick-lru";
 import * as angleUtils  from "./css-angle";
 import * as colorUtils from "./color";
 import { getCSSLexer } from "./lexer";
@@ -49,7 +50,9 @@ export const TIMING_FUNCTION = "timing-function";
 export const URI = "url";
 export const VARIABLE_FUNCTION = "variable-function";
 
-const supportsValueMap = new Map();
+const cachedSupportsValue = new QuickLRU({
+  maxSize: 3000,
+});
 
 /**
  * This module is used to process CSS text declarations and output DOM fragments (to be
@@ -548,12 +551,12 @@ OutputParser.prototype = {
   _cssPropertySupportsValue: function (name, value) {
     // Checking pair as a CSS declaration string to account for "!important" in value.
     const declaration = `${name}:${value}`;
-    if (supportsValueMap.has(declaration)) {
-      return supportsValueMap.get(declaration);
+    if (cachedSupportsValue.has(declaration)) {
+      return cachedSupportsValue.get(declaration);
     }
 
     const supportsValue = this.doc.defaultView.CSS.supports(declaration);
-    supportsValueMap.set(declaration, supportsValue);
+    cachedSupportsValue.set(declaration, supportsValue);
 
     return supportsValue;
   },

src/devtools/client/inspector/computed/actions/index.ts

@@ -1,4 +1,5 @@
 import { Action } from "@reduxjs/toolkit";
+import QuickLRU from "shared/utils/quick-lru";
 
 import CSSProperties from "third-party/css/css-properties";
 import { OutputParser } from "third-party/css/output-parser";
@@ -34,7 +35,9 @@ export function setComputedPropertyExpanded(
   return { type: "set_computed_property_expanded", property, expanded };
 }
 
-const cachedParsedProperties = new Map<string, (string | Record<string, unknown>)[]>();
+const cachedParsedProperties = new QuickLRU<string, (string | Record<string, unknown>)[]>({
+  maxSize: 3000,
+});
 
 export async function createComputedProperties(
   elementStyle: ElementStyle,

src/devtools/client/inspector/rules/models/fronts/rule.ts

@@ -1,13 +1,18 @@
 import { Object as ProtocolObject, Rule } from "@replayio/protocol";
+import QuickLRU from "shared/utils/quick-lru";
 
 import { assert } from "protocol/utils";
 import { getCachedObject } from "replay-next/src/suspense/ObjectPreviews";
 
 import { StyleFront } from "./style";
 import { StyleSheetFront } from "./styleSheet";
 
-const cachedSelectorStrings: Map<string, string[]> = new Map();
-const cachedSelectorText: Map<string, string> = new Map();
+const cachedSelectorStrings = new QuickLRU<string, string[]>({
+  maxSize: 3000,
+});
+const cachedSelectorText = new QuickLRU<string, string>({
+  maxSize: 3000,
+});
 
 // Manages interaction with a CSSRule.
 export class RuleFront {