Firefox Developer Experience

,

Firefox DevTools Newsletter — 129

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

Firefox being an open source project, we are grateful to get contributions from people outside of Mozilla, like Sebastian Zartner who added multiple warnings in the Rules view when resize (#1551579) and float related properties (#1551580) are used incorrectly, when box-sizing is used on elements that ignore width / height (#1583894) and when table-related CSS properties are used on non-table-related elements (#1868788). Thanks a lot Sebo!

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

Performance boost ⚡️

We’re very happy to report massive performance improvements throughout the whole toolbox:
displaying lots of logs in the console can be 60% faster, console reload 12%. 70% less time is spent sending the console messages to the client, opening the debugger got 10% faster, showing the variable tooltip takes 40% less time than before, reloading the debugger 15%, stepping in a new source 17%, reloading the inspector 50% and the network monitor can be used 50% earlier than what it used to be.

How did we achieve such impressive (in my eyes) number you may ask? And the answer is throttling. For a lot of panels, the DevTools server (i.e. the code that runs in the web page) sends events to the client (i.e. the DevTools panel) to indicate when a resource is available, updated or removed. A resource is a broad term and can cover console messages, CSS stylesheets or Javascript sources. We used to send a single event for each update the client wanted to be notified about. The webpage is logging a variable in a 10000 for-loop? 10000 events were sent and consumed by the client. Even if we’d then throttle the resources on the client side to avoid stressing out the UI, we were still paying a high cost for transmitting and receiving this high number of events. In Firefox 129, we now group updates that are made within a 100ms range and only send one event (#1824726), which really improve the cases where we are consuming a lot of resources in a small amount of time.

@starting-style support

Firefox 129 adds support for @starting-style rules:

The @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e. when an element is first displayed on a previously loaded page.

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

This makes it super easy to add animation for an element being added to a page, where you would have need to use CSS animation before. Here, when a div is added to the page, it’s transparent and transition to fully opaque in half a second:

div {
  opacity: 1;
  transition: opacity 0.5s;

  @starting-style {
    opacity: 0;
  }
}

The @starting-style rules are displayed in the Inspector, alongside regular rules, and you can add/remove/edit declarations and values too (#1892192). The transition can be visualized and replayed using the animations panel, like any other transitions.

Firefox DevTools Inspector showing a @starting-style rule on an h1 element. The rule has a `background-color: transparent` declaration. A regular rule for h1 is displayed below it. It also has a `background-color` declaration, but the value is `gold`. There's also a `transition` declaration, animating the background-color. On the right of the image, the animation panel is displayed, and we can see a visualization of the transition applied to the h1 element
Slowly transition h1 background-color from transparent to gold on page load

One thing to be mindful of is that declarations inside @starting-style rules are impacted by order and specificity. This means that with the following rules:

div { 
  color: red !important; 
  transition: all 1s;
}

@​starting-style {
  div { 
    color: blue; 
    background: cyan;
  }
}

div { 
  background: transparent;
}

the declaration for color and background in the @starting-style rule are overridden, and there won’t be any visible transition. In such case, as we already do for regular rules, the overridden declaration will have a distinct style that should make it obvious why a propery isn’t being transitionned.

Firefox DevTools Inspector showing a @starting-style rule on an element. The rule has a `outline-color: blue` declaration, which is greyed out and striked-through, indicating that it's unused. A regular rule is also displayed below it, with a `outline-color: black !important` declaration.
There will be no transition applied to outline-color, as the @starting-style declaration is overridden by the regular one.

Custom properties (aka CSS variables) can also be declared into @starting-style rules and be animated. We thought it could be helpful to display the @starting-style value of a variable in the tooltip that is displayed when hovering a variable name in a regular rule (#1897931)

Firefox DevTools Inspector focusing on a declaration: `opacity: var(--vars-x)`. A tooltip is displayed, pointing to the css variable. The tooltip has a header with `--vars-x = 1`. Under it is a `@starting-style` section with `--vars-x = 0.5`
The new @starting-style section in the CSS variable tooltip makes it easy to understand that the opacity will be transitionned from 0.5 to 1

Invalid at Computed Value Time in computed panel

In Firefox 128, we added an icon next to Invalid At Computed Value Time registered custom property declarations

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

https://fxdx.dev/firefox-devtools-newsletter-128/

In this release, we added the same icon and tooltip in the Computed panel, so it’s easier to understand the custom property computed value, be it the registered property initial value, or a valid inherited declaration (#1900070).

Firefox DevTools Computed panel showing 2 CSS variables, --a and --b
--a computed value is picked up from the registered property initial value, as the 1em set on body doesn’t match the expected registered property syntax.
--b computed value is the rgb value for the gold color, as picked up by the declaration on body. The h1 declaration is invalid as 10000rem doesn’t match the expected <color> syntax.


Accessibility fixes

If you’re a regular reader of our newsletter, you might remember that we had a big accessibility project at the end of last year, focusing on the most impactful issues we saw in DevTools. The project ended in the beginning of 2024, but there are still smaller things we need to address, so we took some time during this release to squash a few bugs:

  • prevent losing focus state in Debugger Scopes panel when blurring Firefox (#1843325)
  • add focus indicator on Debugger Watch expressions panel inputs (#1904339)
  • properly communicate Webconsole input filter state to screen readers (#1844087)
  • in the Inspector, add keyboard focus-ability to stylesheet location link (#1844054),flex and grid highlighter toggle buttons (#1901508), shape editor button (#1844264) and the link to container query element (#1901713)

We’re planning another couple-months long accessibility project by the end of the year to fix more issues and add High Contrast Mode support, so stay tuned!

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 129 release:

Nicolas Chevobbe

Leave a Reply

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