ui: fix spot tab lookup, improve js build speed (#2852)

frontend/app/components/Spots/SpotPlayer/components/Panels/SpotConsole.tsx

@@ -70,6 +70,7 @@ function SpotConsole({ onClose }: { onClose: () => void }) {
                 jump={jump}
                 iconProps={getIconProps(log.level)}
                 renderWithNL={renderWithNL}
+                showSingleTab
               />
             ))}
           </VList>

frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx

@@ -143,7 +143,7 @@ function SpotPlayerHeader({
             {browserVersion && (
               <>
                 <div>·</div>
-                <div className="capitalize">Chrome v{browserVersion}</div>
+                <div>Chromium v{browserVersion}</div>
               </>
             )}
             {resolution && (

frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx

@@ -12,7 +12,7 @@ interface Props {
   renderWithNL?: any;
   style?: any;
   onClick?: () => void;
-  getTabNum: (tab: string) => number;
+  getTabNum?: (tab: string) => number;
   showSingleTab: boolean;
 }
 function ConsoleRow(props: Props) {
@@ -45,7 +45,7 @@ function ConsoleRow(props: Props) {
 
   const titleLine = lines[0];
   const restLines = lines.slice(1);
-  const logSource = props.showSingleTab ? -1 : props.getTabNum(log.tabId);
+  const logSource = props.showSingleTab ? -1 : props.getTabNum?.(log.tabId);
   const logTabId = log.tabId
   return (
     <div

frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx

@@ -565,7 +565,7 @@ export const NetworkPanelComp = observer(
           render: renderDuration,
         },
       ];
-      if (!showSingleTab) {
+      if (!showSingleTab && !isSpot) {
         cols.unshift({
           label: 'Source',
           width: 64,
@@ -604,7 +604,7 @@ export const NetworkPanelComp = observer(
             )}
           </div>
           <div className={'flex items-center gap-2'}>
-            {!isMobile ? <TabSelector /> : null}
+            {!isMobile && !isSpot ? <TabSelector /> : null}
             <Input
               className="rounded-lg"
               placeholder="Filter by name, type, method or value"

frontend/package.json

@@ -116,6 +116,7 @@
     "cypress": "^13.3.0",
     "cypress-image-snapshot": "^4.0.1",
     "dotenv": "^6.2.0",
+    "esbuild-loader": "^4.2.2",
     "eslint": "^8.15.0",
     "eslint-plugin-react": "^7.29.4",
     "file-loader": "^6.2.0",

frontend/webpack.config.ts

@@ -6,6 +6,8 @@ import CopyWebpackPlugin from 'copy-webpack-plugin';
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import CompressionPlugin from "compression-webpack-plugin";
+import { EsbuildPlugin } from 'esbuild-loader';
+
 const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
 const isDevelopment = process.env.NODE_ENV !== 'production'
 const stylesHandler = MiniCssExtractPlugin.loader;
@@ -28,23 +30,32 @@ const config: Configuration = {
     splitChunks: {
       chunks: 'all',
     },
+    minimizer: [
+     new EsbuildPlugin({
+       target: 'es2020',
+       css: true
+    })
+   ]
   },
   module: {
     exprContextCritical: false,
     rules: [
       {
-        test: /\.(ts|js)x?$/i,
+        test: /\.tsx?$/i,
         exclude: isDevelopment ? /node_modules/ : undefined,
-        use: ['thread-loader', {
+        loader: "esbuild-loader",
-          loader: "babel-loader",
+        options: {
-          options: {
+          target: 'es2020',
-            presets: [
+        },
-              "@babel/preset-env",
+      },
-              "@babel/preset-react",
+      {
-              "@babel/preset-typescript",
+        test: /\.jsx?$/i,
-            ],
+        exclude: isDevelopment ? /node_modules/ : undefined,
-          },
+        loader: "esbuild-loader",
-        }],
+        options: {
+          loader: 'jsx',
+          target: 'es2020',
+        },
       },
       {
         test: /\.s[ac]ss$/i,
@@ -111,7 +122,11 @@ const config: Configuration = {
     },
   },
   plugins: [
-    new CompressionPlugin(),
+    (isDevelopment ? false : new CompressionPlugin({
+      test: /\.(js|css|html|svg)$/,
+      algorithm: 'brotliCompress',
+      threshold: 10240,
+    })),
     new webpack.DefinePlugin({
       // 'process.env': ENV_VARIABLES,
       'window.env': ENV_VARIABLES,
@@ -131,6 +146,7 @@ const config: Configuration = {
   performance: {
     hints: false,
   },
+  watchOptions: { ignored: "**/node_modules/**" },
   devServer: {
     // static: path.join(__dirname, "public"),
     historyApiFallback: true,
@@ -138,7 +154,6 @@ const config: Configuration = {
     open: true,
     port: 3333,
     hot: true,
-    compress: true,
     allowedHosts: "all",
       client: {
         overlay: {

frontend/yarn.lock

@@ -1898,6 +1898,167 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/aix-ppc64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/aix-ppc64@npm:0.21.5"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-arm64@npm:0.21.5"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-arm@npm:0.21.5"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-x64@npm:0.21.5"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/darwin-arm64@npm:0.21.5"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/darwin-x64@npm:0.21.5"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/freebsd-arm64@npm:0.21.5"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/freebsd-x64@npm:0.21.5"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-arm64@npm:0.21.5"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-arm@npm:0.21.5"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-ia32@npm:0.21.5"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-loong64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-loong64@npm:0.21.5"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-mips64el@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-mips64el@npm:0.21.5"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-ppc64@npm:0.21.5"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-riscv64@npm:0.21.5"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-s390x@npm:0.21.5"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-x64@npm:0.21.5"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/netbsd-x64@npm:0.21.5"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/openbsd-x64@npm:0.21.5"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/sunos-x64@npm:0.21.5"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-arm64@npm:0.21.5"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-ia32@npm:0.21.5"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-x64@npm:0.21.5"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0":
   version: 4.4.1
   resolution: "@eslint-community/eslint-utils@npm:4.4.1"
@@ -7002,6 +7163,100 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-loader@npm:^4.2.2":
+  version: 4.2.2
+  resolution: "esbuild-loader@npm:4.2.2"
+  dependencies:
+    esbuild: "npm:^0.21.0"
+    get-tsconfig: "npm:^4.7.0"
+    loader-utils: "npm:^2.0.4"
+    webpack-sources: "npm:^1.4.3"
+  peerDependencies:
+    webpack: ^4.40.0 || ^5.0.0
+  checksum: 10c1/2e29724312e75ffdb06d6421536078f36c135e9d8563bd413d78b061bf24459e06661f6baadd11a7f8e630e22abdf0d9d18921d51460bd2eeee47e000e29fd17
+  languageName: node
+  linkType: hard
+
+"esbuild@npm:^0.21.0":
+  version: 0.21.5
+  resolution: "esbuild@npm:0.21.5"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.21.5"
+    "@esbuild/android-arm": "npm:0.21.5"
+    "@esbuild/android-arm64": "npm:0.21.5"
+    "@esbuild/android-x64": "npm:0.21.5"
+    "@esbuild/darwin-arm64": "npm:0.21.5"
+    "@esbuild/darwin-x64": "npm:0.21.5"
+    "@esbuild/freebsd-arm64": "npm:0.21.5"
+    "@esbuild/freebsd-x64": "npm:0.21.5"
+    "@esbuild/linux-arm": "npm:0.21.5"
+    "@esbuild/linux-arm64": "npm:0.21.5"
+    "@esbuild/linux-ia32": "npm:0.21.5"
+    "@esbuild/linux-loong64": "npm:0.21.5"
+    "@esbuild/linux-mips64el": "npm:0.21.5"
+    "@esbuild/linux-ppc64": "npm:0.21.5"
+    "@esbuild/linux-riscv64": "npm:0.21.5"
+    "@esbuild/linux-s390x": "npm:0.21.5"
+    "@esbuild/linux-x64": "npm:0.21.5"
+    "@esbuild/netbsd-x64": "npm:0.21.5"
+    "@esbuild/openbsd-x64": "npm:0.21.5"
+    "@esbuild/sunos-x64": "npm:0.21.5"
+    "@esbuild/win32-arm64": "npm:0.21.5"
+    "@esbuild/win32-ia32": "npm:0.21.5"
+    "@esbuild/win32-x64": "npm:0.21.5"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10c1/1bed0f5871043244bc2033f323a7e86e06d808df955b47bc5579bb3855d107b67f0adace7d4c747deea856cfc7bb798c3320a4b96ebb832112c915f377b5c9ed
+  languageName: node
+  linkType: hard
+
 "escalade@npm:^3.1.1, escalade@npm:^3.2.0":
   version: 3.2.0
   resolution: "escalade@npm:3.2.0"
@@ -7968,6 +8223,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-tsconfig@npm:^4.7.0":
+  version: 4.8.1
+  resolution: "get-tsconfig@npm:4.8.1"
+  dependencies:
+    resolve-pkg-maps: "npm:^1.0.0"
+  checksum: 10c1/680263b7ee8ceb66e88d6625d5b62fe432e280cf313e962e52bfaaae65d286ffe8f22ee35032a40ba0f9988469bcac92b1146ac837da33b8fad97a5b5b763806
+  languageName: node
+  linkType: hard
+
 "get-user-locale@npm:^2.2.1":
   version: 2.3.2
   resolution: "get-user-locale@npm:2.3.2"
@@ -10199,7 +10463,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^2.0.0":
+"loader-utils@npm:^2.0.0, loader-utils@npm:^2.0.4":
   version: 2.0.4
   resolution: "loader-utils@npm:2.0.4"
   dependencies:
@@ -11343,6 +11607,7 @@ __metadata:
     cypress: "npm:^13.3.0"
     cypress-image-snapshot: "npm:^4.0.1"
     dotenv: "npm:^6.2.0"
+    esbuild-loader: "npm:^4.2.2"
     eslint: "npm:^8.15.0"
     eslint-plugin-react: "npm:^7.29.4"
     fflate: "npm:^0.8.2"
@@ -13848,6 +14113,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve-pkg-maps@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "resolve-pkg-maps@npm:1.0.0"
+  checksum: 10c1/e6f8dbe20ebbfdea61503670e5f325782e6d983e59e33c81b314a48910f2edcb9534975c5a14d789d2830c3ab3ae49f022dd6e2fdb56330f242ee3fbd60b46c5
+  languageName: node
+  linkType: hard
+
 "resolve.exports@npm:^2.0.0":
   version: 2.0.2
   resolution: "resolve.exports@npm:2.0.2"
@@ -14515,6 +14787,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-list-map@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "source-list-map@npm:2.0.1"
+  checksum: 10c1/bb3b0d59f90518f20b996eb57a29a62fbd0735f84649f2949591f01ef43a31a27b095a4c9b2f27edce4ea4c8d5b757b86476c532c813e1de84c340d7f2a41264
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"
@@ -16155,6 +16434,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-sources@npm:^1.4.3":
+  version: 1.4.3
+  resolution: "webpack-sources@npm:1.4.3"
+  dependencies:
+    source-list-map: "npm:^2.0.0"
+    source-map: "npm:~0.6.1"
+  checksum: 10c1/fc3c601c48df84178b6e8a297b3d844ea5580011b8cd7d382ffe0241b9fae1f44124337a2981d55f314cd4517f25d9fda20549cd96b279b47a00ac0727cea80f
+  languageName: node
+  linkType: hard
+
 "webpack-sources@npm:^3.2.3":
   version: 3.2.3
   resolution: "webpack-sources@npm:3.2.3"