Firefox Nightly and Firefox Developer Experience
-
Firefox Nightly: CSS Rules in your Firefox DevTools – These Weeks in Firefox: Issue 163
-
Firefox Developer Experience: Firefox DevTools Newsletter — 127
Developer Tools help developers write and debug websites on Firefox. This newsletter gives an overview of the work we’ve done as part of the Firefox 127 Nightly release cycle.
If you’ve been reading us for a bit, you are now well aware that we’re focusing on performance for a few months to make our tools as fast as they can be.
We made displaying rules in the Inspector 5% faster for the common case, and even 600 times faster on pages with very large stylesheets (going from ~3 seconds to ~5 milliseconds in a page using Tailwind)! This was made possible by moving away from our DevTools-specific, JS-written, CSS lexer to a Rust-based implementation. In various places of the codebase, we need to know the different “parts” of a CSS selector, or a property declaration. To have a reliable way of analyzing a given CSS snippet, we use a CSS lexer which computes a sequence of tokens describing the different parts of the snippet. Since this tokenization is actually also done at the CSS engine level when a stylesheet is parsed, as described in the CSS Syntax Module Level 3 specification. We were trying to do the same thing as the engine, and given that we do have access to the engine machinery, it felt silly not sharing the same code. This performance project was a nice opportunity to integrate with the Rust-based implementation the engine is using and ditch our JS-implementation.