Migrate to esbuild by mstange · Pull Request #5589 · firefox-devtools/profiler

mstange · 2025-09-03T22:39:43Z

codecov · 2026-01-20T01:48:30Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.56%. Comparing base (ca86724) to head (c0b82be).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@ Coverage Diff @@## main #5589 +/- ##
==========================================
+ Coverage 85.55% 85.56% +0.01% 
==========================================
Files 320 319 -1 Lines 31415 31411 -4 Branches 8662 8670 +8 ==========================================
Hits 26876 26876 + Misses 4108 4104 -4 
Partials 431 431

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

canova · 2026-02-11T15:57:26Z

+ }
+}
+
+export function saveMetafile(buildResult, outputPath = 'dist/metafile.json') {


What is metafile exactly? I see that when we build, it puts the meta file to the metafile.json to the dist directory. Should we remove it at the end? Will it be exposed to web if it gets uploaded?

Ah, good question. It might make sense to have nested directories under dist/ for the various things.
E.g.:
dist/browser-build-prod/...
dist/meta/browser-build-prod.json
dist/browser-build-dev/...
dist/node/symbolicator-cli.js

Actually let's just keep the directory structure as-is.
You're right, the metafile was making it into the production output, which definitely was not what I intended. Let's stop emitting it by default; we don't need it, it's just there in case you want to do some bundle size profiling. And when we do emit it, we can put it outside of dist, for example into a new build-meta directory.

Ah yeah, I would prefer to keep the dist directory as is too. Sounds good to move this file out of dist.

canova · 2026-02-11T16:44:51Z

+export const photonConfig = {
+ ...baseConfig,
+ format: 'esm',
+ platform: 'browser',
+ target: ['es2022'],
+ sourcemap: true,
+ publicPath: '/photon/',
+ entryPoints: ['res/photon/index.js'],
+ outdir: 'dist/photon',
+};


Currently yarn start-photon shows me 404 when I visit http://localhost:4243/photon/ . I think we don't copy the photon/index.html file. Could you fix that?

Oops, will do!

canova

Thanks for the PR!

I did some comparisons in the before and after of the dist/ directory after yarn build-prod and I can already see some nice improvements:

The total size of directory went from ~23M to ~22M.
Main bundle size went from ~1.6M and ~1.1M
I see total JS bundle size went from ~2.3M ~1.4M.

I think the main difference of the JS size difference is that webpack bundles the CSS with JS, and now CSS is moved to its own CSS file. I think it's a nice improvement.

Apart from that, I see that we stopped auto prefixing (and possibly minifying) the CSS though. See my comment below in postcss.config.js. What do you think?

canova · 2026-02-13T12:55:09Z

+
+// Plugin to mark chrome:// URLs as external in CSS
+//
+// This is a workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=2014811


Ah looks like it's resolved but not published yet. It would be nice to file an issue to clean this up later.

canova · 2026-02-13T12:56:08Z

+
+ for (const modulePath of Object.keys(inputs)) {
+ if (!modulePath.includes('node_modules')) {
+ findCycles(modulePath, []);


Shouldn't this be like this?:
Suggested change
findCycles(modulePath,[]);
findCycles([],modulePath);

Whoops! Indeed!

canova · 2026-02-13T13:58:03Z

- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-module.exports = {
- plugins: [require('cssnano'), require('autoprefixer')],


Hmm I don't see postcss anymore in the codebase, but we still have it in the package.json. Did we stop transforming the CSS now?
Edit: Checking the css, I think we stopped prefixing the css properties now with autoprefixer for webkit etc. For example, I don't see -webkit- equivalent of user-select: none;. I think this might create a real compat issue in Safari. What do you think? I see that there is esbuild-plugin-postcss if we want to have it still.

Oh indeed, without the webkit prefixed version, I can see text selection happening e.g. in the "tabs" when I right-click them. I'll add the postcss plugin.

Rather than using the postcss plugin, I chose https://www.npmjs.com/package/browserslist-to-esbuild and replaced target: 'es2022' with target: browserslistToEsbuild(); specifying browser versions rather than ECMAScript versions will cause esbuild to do the prefixing for us, see https://esbuild.github.io/content-types/#css .

canova

Looks good to me overall, thanks again for the work! I'll let you handle the landing after you look into the postcss stuff.

Changes: [Markus Stange] Move transparent fill check to a less expensive place. (#5826) [fatadel] refine docs for ctrl key (#5831) [Nazım Can Altınova] Update the team members inside CONTRIBUTING.md (#5829) [fatadel] Provide correct instructions on the home page for Firefox for Android (Fenix) (#5816) [Markus Stange] Make markers darker (#5839) [Markus Stange] Directly use photon-colors (#5821) [Markus Stange] Migrate to esbuild (#5589) [Markus Stange] Use data URLs for SVG files. (#5845) [Markus Stange] Tweak dark mode colors some more. (#5846) [Nazım Can Altınova] Make the source table non-optional in the gecko profile format (#5842) [fatadel] fix foreground color of the button on error page (#5849) [Nazım Can Altınova] 🔃 Sync: l10n -> main (February 24, 2026) (#5855) And special thanks to our localizers: de: Michael Köhler el: Jim Spentzos en-GB: Ian Neal es-CL: ravmn fr: Théo Chevalier fy-NL: Fjoerfoks ia: Melo46 it: Francesco Lodolo [:flod] nl: Mark Heijl ru: Valery Ledovskoy sv-SE: Andreas Pettersson zh-TW: Pin-guang Chen

mstange force-pushed the esbuild branch 8 times, most recently from 0455be4 to 0ec7d84Compare September 3, 2025 23:42

mstange force-pushed the esbuild branch from 0ec7d84 to 78d15a0Compare November 6, 2025 19:43

mstange mentioned this pull request Nov 17, 2025
Use workbox-cli to generate the service worker #5681
Merged

mstange force-pushed the esbuild branch from 78d15a0 to 891e105Compare January 20, 2026 01:46

mstange force-pushed the esbuild branch 4 times, most recently from 4ffc248 to 03f4d99Compare January 20, 2026 16:41

mstange force-pushed the esbuild branch 6 times, most recently from 9e3eff2 to 31d83b2Compare February 4, 2026 21:56

mstange marked this pull request as ready for review February 4, 2026 22:01

mstange requested a review from canova as a code owner February 4, 2026 22:01

mstange changed the title ~~WIP: Migrate to esbuild~~Migrate to esbuildFeb 4, 2026

mstange marked this pull request as draft February 5, 2026 14:51

mstange removed the request for review from canova February 5, 2026 14:51

mstange force-pushed the esbuild branch 3 times, most recently from a9cf93b to bd3f05aCompare February 5, 2026 15:54

mstange force-pushed the esbuild branch 3 times, most recently from f7b5e5f to 3cee9ecCompare February 5, 2026 17:04

mstange marked this pull request as ready for review February 5, 2026 17:04

mstange requested a review from canova February 6, 2026 18:58

canova reviewed Feb 11, 2026
View reviewed changes

canova requested changes Feb 11, 2026
View reviewed changes

mstange force-pushed the esbuild branch from 3cee9ec to 4b0558fCompare February 12, 2026 00:34

canova reviewed Feb 13, 2026
View reviewed changes

canova approved these changes Feb 13, 2026
View reviewed changes

mstange force-pushed the esbuild branch from 4b0558f to 22979f8Compare February 14, 2026 17:14

Use esbuild instead of webpack.
c0b82be

mstange force-pushed the esbuild branch from 22979f8 to c0b82beCompare February 14, 2026 17:15

mstange enabled auto-merge February 14, 2026 17:16

mstange merged commit 7304276 into firefox-devtools:mainFeb 14, 2026
19 checks passed

canova mentioned this pull request Feb 24, 2026
Deploy February 24, 2026 #5856
Merged

fatadel mentioned this pull request Feb 27, 2026
Exposing dev server on addresses other than localhost does not work anymore #5865
Closed

mstange mentioned this pull request Feb 28, 2026
Sometimes the profiler doesn't load properly (only shows blue background), "Uncaught Error: Unable to find the DOM element to attach the React element to." #5869
Closed

Uh oh!

Conversation

mstange commented Sep 3, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecovBot commented Jan 20, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

canova left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

canova left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mstange commented Sep 3, 2025•
edited
Loading

codecovBot commented Jan 20, 2026•
edited
Loading