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
https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style@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.
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](https://fxdx.dev/files/2024/08/CleanShot-2024-08-09-at-17.40.17-600x305.png)
h1
background-color
from transparent to gold on page loadOne 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.](https://fxdx.dev/files/2024/08/CleanShot-2024-08-12-at-15.19.51-600x327.png)
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`](https://fxdx.dev/files/2024/08/CleanShot-2024-08-12-at-15.16.57.png)
@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](https://fxdx.dev/files/2024/08/CleanShot-2024-08-12-at-15.24.42-600x267.png)
--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:
- Sebastian Zartner [Inactive CSS] Display a warning when resize is used incorrectly (#1551579)
- Sebastian Zartner [Inactive CSS] Display a warning when float related properties are used incorrectly. (#1551580)
- Sebastian Zartner [Inactive CSS] Display a warning when ‘box-sizing’ is used on elements that ignore width / height (#1583894)
- Sebastian Zartner [Inactive CSS] Show table-related CSS properties as inactive when they’re not on a table-related element (#1868788)
- Valentin Gosu “NetworkError when attempting to fetch resource.” when using Firefox on Responsive mode with Service Worker (#1885308)
- Francesco Lodolo Update warning message for inactive CSS resize (#1902625)
- Joel Maher Intermittent devtools/client/netmonitor/test/browser_net_telemetry_select_ws_frame.js | single tracking bug (#1767657)
- Manuel Bucher Disable test devtools/client/responsive/test/browser/browser_target_blank.js timing out in over http2/http3 (#1901210)
- Brad Werth Dev Tools crashes browser when inspecting element with floating number calc() style applied (#1901233)
- Mark Banner Rename workers to use the .worker.(m)js pattern for ESLint (devtools/) (#1901570)
- Boris Chiou InspectorUtils.getCSSStyleRules only returns nested CSSStartingStyleRule rules of rules with selectors using children/descendent combinator in their selectors (#1905035)
- Tooru Fujisawa Escape inside template literals gets lost by prettify (#1905653)
- Alexandre Poirot Throttle Resources events on the server side (#1824726)
- Alexandre Poirot Record real time and durations when exporting js traces to profiler frontend (#1867605)
- Alexandre Poirot Intermittent devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-next-interation.js | single tracking bug (#1899124)
- Alexandre Poirot Use arrays instead of objects in the tracer resources (#1900982)
- Alexandre Poirot Avoid passing resourceType for each resource sent to the client (#1901643)
- Alexandre Poirot Stop encapsulating CONSOLE_MESSAGE resource into a ‘message’ attribute (#1901644)
- Alexandre Poirot Intermittent devtools/client/inspector/markup/test/browser_markup_events_toggle.js | single tracking bug (#1901674)
- Alexandre Poirot Frequent devtools/client/debugger/test/mochitest/browser_dbg-iframes.js | Uncaught exception in test bound – at chrome://mochitests/content/browser/devtools/client/shared/test/shared-head.js:1120 – Error: Failed waitFor() (#1901788)
- Alexandre Poirot Do not store JS traces in ResourceCommand cache (#1902224)
- Alexandre Poirot Use individual trace ressources for each trace type (#1902229)
- Alexandre Poirot Perma macosx1015 devtools/client/debugger/test/mochitest/browser_dbg-call-stack.js | A promise chain failed to handle a rejection: Actor ‘SpecialPowers’ destroyed before query ‘Spawn’ was resolved – stack: (No stack available.) (#1902701)
- Alexandre Poirot Document the profiler output of the JS Tracer (#1903121)
- Alexandre Poirot Speedup resource array processing in resource command (#1903430)
- Alexandre Poirot Split tracer actor in distinct class for each output type (#1903790)
- Alexandre Poirot Increate js tracer max depth and make it configurable (#1903791)
- Alexandre Poirot Open the profiler on the stack chart by default when recording a JS trace (#1903792)
- Alexandre Poirot Increase number of messages logged in DAMP bulklog tests (#1905897)
- Julian Descottes Network Blocking in DevTools blocks responses, but not requests (#1756770)
- Julian Descottes Intermittent devtools/client/netmonitor/test/browser_net_new_request_panel_content-length.js | single tracking bug (#1798085)
- Nicolas Chevobbe Scopes panel tree view item loses focus when switching apps (#1843325)
- Nicolas Chevobbe Stylesheet location link are not focusable with keyboard and is missing role (#1844054)
- Nicolas Chevobbe Console Filter input label is not communicated to screen reader (#1844087)
- Nicolas Chevobbe Shape editor button is not accessible (#1844264)
- Nicolas Chevobbe Intermittent devtools/client/webconsole/test/browser/browser_console_context_menu_entries.js | single tracking bug (#1860158)
- Hubert Boma Manilla Fix “continue to here” in code mirror 6 (#1886419)
- Nicolas Chevobbe Display @starting-style rules in the Rules view (#1892192)
- Nicolas Chevobbe Indicate @starting-style CSS custom properties value in var() tooltip (#1897931)
- Hubert Boma Manilla Turn on debugger editor shortcuts for Codemirror 6 (#1898725)
- Nicolas Chevobbe Show impact of invalid at computed-value time custom property declaration in computed panel (#1900070)
- Hubert Boma Manilla CodeMirror6: Selecting text and changing the source leads to a blank editor (#1900684)
- Hubert Boma Manilla CodeMirror6: Clicking on the right of the line number does not toggle breakpoints (#1900741)
- Hubert Boma Manilla CodeMirror6: Paused line is not highlighted for a breakpoint hit on load (#1900742)
- Nicolas Chevobbe Flex/Grid highlighter toggle button are not keyboard accessible (#1901508)
- Nicolas Chevobbe Container query “Jump to container node” button is not keyboard accessible (#1901713)
- Nicolas Chevobbe Remove unused FilterCheckbox component and unused CSS (#1901942)
- Julian Descottes Intermittent devtools/client/styleeditor/test/browser_styleeditor_syncAddRule.js | single tracking bug (#1901955)
- Hubert Boma Manilla CodeMirror6: Exceptions is not highlighted on initial page opening (#1902005)
- Nicolas Chevobbe DevTools incorrectly reports that element with `float:left;display:inline-grid` has been changed to block (#1902961)
- Hubert Boma Manilla Show tooltip on hover over tokens with exceptions (#1903308)
- Nicolas Chevobbe Flex/Grid highlighter toggle button are rendered in Computed panel (#1903774)
- Hubert Boma Manilla Line numbers in getters can be selected in cm6, wasn’t the case in cm5 (#1903995)
- Julian Descottes High frequency TEST-UNEXPECTED-FAIL | devtools/client/webconsole/test/browser/browser_webconsole_persist.js | First page message disappeared – Got 1, expected +0 (#1904154)
- Nicolas Chevobbe Watch expression input is missing focus indicator (#1904339)
- Nicolas Chevobbe Enter single quote in property value isn’t handled properly by the Rule rewriter (#1904752)
- Nicolas Chevobbe Add a preference to cover the work for supporting High Contrast Mode in DevTools (#1904764)
- Nicolas Chevobbe Land initial patch to support High Contrast Mode in DevTools (#1904765)
- Julian Descottes Annotate individual netmonitor tests with https_first_disabled (#1904831)
- Nicolas Chevobbe Color picker isn’t usable in High Contrast Mode (#1904839)
- Nicolas Chevobbe web extension devtools panel have extra scroll bars (#1905000)
- Hubert Boma Manilla Migrate the extension for rendering line markers from View Plugins to State Fields (#1905380)
- Nicolas Chevobbe Add InspectorUtils.getCSSRegisteredProperty method (#1905569)
- Julian Descottes Fix StyleEditor onStyleApplied frequent intermittents due to throttling (#1905606)
- Nicolas Chevobbe [DevTools Release Tasks – Cycle 129] Update compatibility data (#1905861)
- Nicolas Chevobbe [DevTools Release Tasks – Cycle 129] Update webidl-pure-allowlist.js (#1905865)
- Nicolas Chevobbe Refactor code for computed panel (#1905899)
- Nicolas Chevobbe Don’t retrieve @starting-style rules in the Rules view until Bug 1905035 is fixed (#1906228)
- Julian Descottes Update version in backward compat comment for resource throttling (#1906254)
Leave a Reply