chore: update browserlist and babel targets to chrome/firefox 89 (#22521

)

## **Description**

IIRC, we've documented extension browser support for versions 2 years
old and newer (I can't find this documentation now though). Chrome and
Firefox 89 were released in 2021, so the version in this PR should be
good to go.

We could go with even newer browser versions, but it was a struggle
getting it to work for v89, so I didn't try to take the versions any
further.

This PR also reduces the chance of seeing a lavamoat caused
`RegExpCompiler Allocation failed - process out of memory` error
(#21006).

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained what problem this PR is solving and how it
is solved.
- [ ] I've linked related issues
- [ ] I've included manual testing steps
- [ ] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: legobt <[email protected]>
Co-authored-by: legobeat <[email protected]>

.browserslistrc

@@ -1 +1 @@
-chrome >= 80, firefox >= 78
+chrome >= 89, firefox >= 89

.depcheckrc.yml

@@ -58,6 +58,8 @@ ignores:
   - 'resolve-url-loader'
   # jest environments
   - 'jest-environment-jsdom'
+  # babel
+  - '@babel/plugin-transform-logical-assignment-operators'
 
 # files depcheck should not parse
 ignorePatterns:

.yarn/patches/lavamoat-core-npm-15.1.1-51fbe39988.patch

@@ -1,3 +1,33 @@
+diff --git a/src/kernelCoreTemplate.js b/src/kernelCoreTemplate.js
+index 752a9c0f0179c1249bd4c3fdb62c216543f01ce2..39fccc6a004218ce7233cbf95db4ffe24907b856 100644
+--- a/src/kernelCoreTemplate.js
++++ b/src/kernelCoreTemplate.js
+@@ -70,6 +70,8 @@
+     const { prepareCompartmentGlobalFromConfig } = templateRequire('makePrepareRealmGlobalFromConfig')({ createFunctionWrapper })
+     const { strictScopeTerminator } = templateRequire('strict-scope-terminator')
+
++    // cache regular expressions to work around https://github.com/MetaMask/metamask-extension/issues/21006
++    const regexCache = new Map()
+     const scuttleOpts = generateScuttleOpts(scuttleGlobalThis)
+     const moduleCache = new Map()
+     const packageCompartmentCache = new Map()
+@@ -126,10 +128,15 @@
+         if (!except.startsWith('/')) {
+           return except
+         }
++        if (regexCache.has(except)) {
++          return regexCache.get(except)
++        }
+         const parts = except.split('/')
+         const pattern = parts.slice(1, -1).join('/')
+         const flags = parts[parts.length - 1]
+-        return new RegExp(pattern, flags)
++        const re = new RegExp(pattern, flags)
++        regexCache.set(except, re)
++        return re
+       }
+     }
+
 diff --git a/src/loadPolicy.js b/src/loadPolicy.js
 index f0ca3c4991a64f316f4e7199867439dd9ab09354..11296dd253b8dc1afd4cc870a0207c280fb728d9 100644
 --- a/src/loadPolicy.js
@@ -16,3 +46,25 @@ index f0ca3c4991a64f316f4e7199867439dd9ab09354..11296dd253b8dc1afd4cc870a0207c28
 
    return finalPolicy
  }
+diff --git a/src/sourceTransforms.js b/src/sourceTransforms.js
+index 9b1524810574c207631823869a781c343adb197f..4d02a6557ca0391a06326b420c274b5f60f72edc 100644
+--- a/src/sourceTransforms.js
++++ b/src/sourceTransforms.js
+@@ -12,12 +12,12 @@ function applySourceTransforms(source) {
+   ])
+ }
+
++const DIRECT_EVAL_REPLACE_FN = (_, p1) => '(0,eval)' + p1
+ function evadeDirectEvalExpressions(source) {
+-  /* eslint-disable-next-line prefer-regex-literals */
+-  const someDirectEvalPattern = new RegExp('\\beval(\\s*\\()', 'g')
+-
+-  const replaceFn = (_, p1) => `(0,eval)${p1}`
+-  return source.replace(someDirectEvalPattern, replaceFn)
++  return source.replace(
++    /\beval(\s*\()/g,
++    DIRECT_EVAL_REPLACE_FN
++  )
+ }
+
+ module.exports = {

app/manifest/v2/chrome.json

@@ -4,5 +4,5 @@
     "matches": ["https://metamask.io/*"],
     "ids": ["*"]
   },
-  "minimum_chrome_version": "80"
+  "minimum_chrome_version": "89"
 }

app/manifest/v2/firefox.json

@@ -2,7 +2,7 @@
   "applications": {
     "gecko": {
       "id": "[email protected]",
-      "strict_min_version": "78.0"
+      "strict_min_version": "89.0"
     }
   }
 }

app/manifest/v3/chrome.json

@@ -6,5 +6,5 @@
     "matches": ["https://metamask.io/*"],
     "ids": ["*"]
   },
-  "minimum_chrome_version": "88"
+  "minimum_chrome_version": "89"
 }

app/manifest/v3/firefox.json

@@ -2,7 +2,7 @@
   "applications": {
     "gecko": {
       "id": "[email protected]",
-      "strict_min_version": "78.0"
+      "strict_min_version": "89.0"
     }
   },
   "background": {

babel.config.js

@@ -5,8 +5,15 @@ module.exports = function (api) {
       strictMode: true,
     },
     targets: {
-      browsers: ['chrome >= 80', 'firefox >= 78'],
+      browsers: ['chrome >= 89', 'firefox >= 89'],
     },
+    plugins: [
+      // `browserify` is old and busted, and doesn't support `??=` (and other
+      // logical assignment operators). This plugin lets us target es2020-level
+      // browsers (except we do still end up with transpiled logical assignment
+      // operators 😭)
+      '@babel/plugin-transform-logical-assignment-operators',
+    ],
     presets: [
       '@babel/preset-typescript',
       '@babel/preset-env',

lavamoat/build-system/policy-override.json

@@ -5,6 +5,7 @@
         "$root$": true,
         "@babel/preset-env": true,
         "@babel/preset-react": true,
+        "@babel/plugin-transform-logical-assignment-operators": true,
         "@babel/plugin-transform-runtime": true,
         "@babel/plugin-proposal-class-properties": true,
         "@babel/plugin-proposal-nullish-coalescing-operator": true,
@@ -32,6 +33,13 @@
         "process.versions": true
       }
     },
+    "@babel/plugin-transform-logical-assignment-operators": {
+      "packages": {
+        "@babel/core": true,
+        "@babel/preset-env>@babel/helper-plugin-utils": true,
+        "@babel/preset-env>@babel/plugin-syntax-logical-assignment-operators": true
+      }
+    },
     "depcheck>@babel/traverse": {
       "packages": {
         "babel/preset-env>b@babel/types": true

lavamoat/build-system/policy.json

@@ -137,6 +137,7 @@
         "@babel/plugin-proposal-nullish-coalescing-operator": true,
         "@babel/plugin-proposal-object-rest-spread": true,
         "@babel/plugin-proposal-optional-chaining": true,
+        "@babel/plugin-transform-logical-assignment-operators": true,
         "@babel/plugin-transform-runtime": true,
         "@babel/preset-env": true,
         "@babel/preset-react": true,
@@ -304,6 +305,13 @@
         "eslint": true
       }
     },
+    "@babel/plugin-transform-logical-assignment-operators": {
+      "packages": {
+        "@babel/core": true,
+        "@babel/preset-env>@babel/helper-plugin-utils": true,
+        "@babel/preset-env>@babel/plugin-syntax-logical-assignment-operators": true
+      }
+    },
     "@babel/preset-env": {
       "globals": {
         "console.log": true,
@@ -314,6 +322,7 @@
       "packages": {
         "@babel/core>@babel/helper-compilation-targets": true,
         "@babel/core>@babel/types": true,
+        "@babel/plugin-transform-logical-assignment-operators": true,
         "@babel/preset-env>@babel/compat-data": true,
         "@babel/preset-env>@babel/helper-plugin-utils": true,
         "@babel/preset-env>@babel/helper-validator-option": true,
@@ -356,7 +365,6 @@
         "@babel/preset-env>@babel/plugin-transform-function-name": true,
         "@babel/preset-env>@babel/plugin-transform-json-strings": true,
         "@babel/preset-env>@babel/plugin-transform-literals": true,
-        "@babel/preset-env>@babel/plugin-transform-logical-assignment-operators": true,
         "@babel/preset-env>@babel/plugin-transform-member-expression-literals": true,
         "@babel/preset-env>@babel/plugin-transform-modules-amd": true,
         "@babel/preset-env>@babel/plugin-transform-modules-commonjs": true,
@@ -717,13 +725,6 @@
         "@babel/preset-env>@babel/helper-plugin-utils": true
       }
     },
-    "@babel/preset-env>@babel/plugin-transform-logical-assignment-operators": {
-      "packages": {
-        "@babel/core": true,
-        "@babel/preset-env>@babel/helper-plugin-utils": true,
-        "@babel/preset-env>@babel/plugin-syntax-logical-assignment-operators": true
-      }
-    },
     "@babel/preset-env>@babel/plugin-transform-member-expression-literals": {
       "packages": {
         "@babel/core": true,

package.json

@@ -390,6 +390,7 @@
     "@babel/core": "^7.23.2",
     "@babel/eslint-parser": "^7.22.15",
     "@babel/eslint-plugin": "^7.22.10",
+    "@babel/plugin-transform-logical-assignment-operators": "^7.23.4",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.2",

yarn.lock

@@ -1022,15 +1022,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.22.11":
-  version: 7.22.11
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.22.11"
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.22.11, @babel/plugin-transform-logical-assignment-operators@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: c664e9798e85afa7f92f07b867682dee7392046181d82f5d21bae6f2ca26dfe9c8375cdc52b7483c3fc09a983c1989f60eff9fbc4f373b0c0a74090553d05739
+  checksum: 2ae1dc9b4ff3bf61a990ff3accdecb2afe3a0ca649b3e74c010078d1cdf29ea490f50ac0a905306a2bcf9ac177889a39ac79bdcc3a0fdf220b3b75fac18d39b5
   languageName: node
   linkType: hard
 
@@ -23412,13 +23412,13 @@ __metadata:
 
 "lavamoat-core@patch:lavamoat-core@npm%3A15.1.1#~/.yarn/patches/lavamoat-core-npm-15.1.1-51fbe39988.patch":
   version: 15.1.1
-  resolution: "lavamoat-core@patch:lavamoat-core@npm%3A15.1.1#~/.yarn/patches/lavamoat-core-npm-15.1.1-51fbe39988.patch::version=15.1.1&hash=1424a1"
+  resolution: "lavamoat-core@patch:lavamoat-core@npm%3A15.1.1#~/.yarn/patches/lavamoat-core-npm-15.1.1-51fbe39988.patch::version=15.1.1&hash=95165a"
   dependencies:
     json-stable-stringify: "npm:1.0.2"
     lavamoat-tofu: "npm:^7.1.0"
     merge-deep: "npm:3.0.3"
     type-fest: "npm:4.7.1"
-  checksum: 994e2c67fa55f2ca110fe3d880a6f5e1763b1aea123333792131526cdbb7083fe4f0e3db2e1f502a8517230298295a44869366dfd358a443ea06835c6a8cba47
+  checksum: e408e3fd65987e0083a4649da3b158ace2eb55379add58a2a0c9a2d1b9b5aee86d03dd44dc616796a5c1c07f303c0691db7c41877b2c3cc4ce86d80af229844b
   languageName: node
   linkType: hard
 
@@ -24701,6 +24701,7 @@ __metadata:
     "@babel/core": "npm:^7.23.2"
     "@babel/eslint-parser": "npm:^7.22.15"
     "@babel/eslint-plugin": "npm:^7.22.10"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.23.4"
     "@babel/preset-env": "npm:^7.23.2"
     "@babel/preset-react": "npm:^7.22.15"
     "@babel/preset-typescript": "npm:^7.23.2"