Firefox Developer Experience

,

Firefox DevTools Newsletter — 128

Posted by

Nicolas Chevobbe

–

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 128 Nightly release cycle.

Firefox being an open source project, we are grateful to get contributions from people outside of Mozilla

  • Sebastian Zartner added warnings in the Rules view when properties only applying to replaced elements are used on non-replaced elements (#1583903), and when column-span is used on elements outside of multi-column containers (#1848705)
  • Pier Angelo Vendrame made the new request data in the Network Monitor not being persisted in private windows (#1892052)

Want to help? DevTools are written in HTML, CSS and JS so any web developer can contribute! Read how to setup the work environment and check the list of mentored issues

@property

Firefox 128 adds support for the @property at-rules.

It allows developers to explicitly define their CSS custom properties, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.

https://developer.mozilla.org/en-US/docs/Web/CSS/@property

All registered properties (either via the at-rule or from the CSS.registerProperty function) are displayed in the Inspector Rules view, in a dedicated @property section (#1841023).

Firefox DevTools Rules view. There's a collapsible "@property" section. In the section, there are multiple custom properties declaration (showing the variable name, its syntax, inherits and initial-value properties)

The registered property information are also displayed in the variable tooltip that is displayed when hovering a CSS variable in the rule view (#1899489). When a registered property is not set, its initial value is used, and the tooltip does use it to show the variable value (#1857526)

Firefox DevTools rules view focusing on a single rule. There's a `color: var(-css-inherits)` declaration. A tooltip is displayed showing the CSS variable value and a new section below, showing the registered custom property syntax, inherits and initial-value properties

One of the main advantage of registered property is to be able to have type checking directly in CSS! Whenever a variable is set and doesn’t match the registered property syntax, it is invalid at computed value time. In such case, a new type of error icon is displayed in the rules view, and its tooltip indicate why the value is invalid and what is the expected syntax (#1866712).

Firefox DevTools rules view. There's a rule with a `--css: 1em` declaration, which has a purple error icon at the end. The tooltip for the icon is displayed, and has the following text: "Property value does not match expected "<color>" syntax" Below it, we can see the @property section, showing that the --css syntax indeed is "<color>".

We also added reference to @property rules in the Style Editor (#1886392), and all registered properties will be displayed in the Rules view var() autocomplete (#1867595).

Other Inspector updates

On top of registered properties, Firefox 128 also adds support for relative color syntax, which makes it easy to create a new color from an existing one. For example hsl(from red h 10 l) will create a lightly-saturated, red-ish grey color. The resulting color will be displayed before the color function, like we already do for regular colors.

And since we’re talking color swatches, we also display them for the light-dark() parameters (#1899106).

The specificity of a CSS rule impacts if the rule declarations will take precedence over other rules matching the same element. This is already indirectly visible in the Inspector, as the rules are displayed from the most to the least specific ones. You can now see the specificity of a rule by hovering its selectors in the Rules view (#977098).

Finally we identify two important bugs in the Inspector:

  • Inspecting some elements could cause a browser crash in very specific conditions (#1901233)
  • Entering a single quote in a declaration value in the Rules view could break the style of the page (regressed in Firefox 127)

Both issues are now fixed, we apologies for any inconvenience this might have caused.

Debugger

There wasn’t much (visible) activity in the Debugger for this release, but we also addressed a couple issues that could make the Debugger frustrating. A change in Firefox 126 was preventing to load credentials-protected source maps file and we did fix it in 128. There was also a long problem where the Debugger would stay blank on websites with workers using Atomics.wait (for example Stackblitz). The issue was addressed and everything should run smoothly now.

And that’s it for this months folks, Thank you for reading this and using our tools, see you in a few weeks for a new round of updates 🙂

Full list of fixed bugs in DevTools for the Firefox 128 release:

Nicolas Chevobbe

Leave a Reply

Your email address will not be published. Required fields are marked *