Thursday , April 15 2021

Firefox 73 is upon us – Mozilla Hacks – the Web developer blog, Hacker News

Another month, another new browser release! Today we’ve released Firefox , with useful additions that include CSS and JavaScript updates, and numerous DevTools improvements.

Read on for the highlights. To find the full list of additions, check out the following links:

Web platform language features

Our latest Firefox offers a fair share of new web platform additions; let’s review the highlights now.

We’ve added to CSS logical properties , with overscroll-behavior-block and overscroll-behavior- inline .

These new properties provide a logical alternative to (overscroll-behavior-x) and overscroll-behavior-y , which allow you to control the browser's behavior when the boundary of a scrolling area is reached.

The yearName and (relatedYear ) fields are now available in the DateTimeFormat.prototype.formatToParts () method. This enables useful formatting options for CJK (Chinese, Japanese, Korean) calendars.

The (HTMLFormElement) interface has a new method, requestSubmit () . Unlike the old (and still available) submit () method, requestSubmit () acts as if a specified submit button has been clicked, rather than just sending the form data to the recipient. Thus the submit event is fired and the form is checked for validity prior to actual data submission.

DevTools updates

There are several interesting DevTools updates in this release. Upcoming features can be previewed now in Firefox DevEdition .

We continually survey DevTools users for input, often from our @ FirefoxDevTools Twitter account. Many useful updates come about as a result. For example, thanks to your feedback on one of those surveys, it is now possible to copy cleaner CSS. snippets out of the Inspector ‘s Changes panel . The and - signs in the output are no longer part of the copied text.

Solid & Fast

The DevTools engineering work for this release focused on pushing performace forward. We made the process of collecting fast-firing requests in the (Network) panel a lot more lightweight

, which made the UI snappier. In the same vein, large source-mapped scripts now load much, much faster in the Debugger and cause less strain on the Console as well.

Loading the right sources in the Debugger is not straightforward when the DevTools are opened on a loaded page. In fact, modern browsers are too good at purging original files when they are parsed, rendered, or executed, and no longer needed. Firefox makes script loading a lot more reliable and ensures you get the right file to debug.

Smarter Console

Console script authoring and logging gained some quality of life improvements. To date, CORS network errors

have been shown as warnings, making them too easy to overlook when resources could not load. Now they are correctly reported as errors, not warnings, to give them the visibility they deserve.

Variables declared in the expression will now be included in the autocomplete. This change makes it easier to author longer snippets in the multi-line editor . Furthermore, the DevTools setting for auto-closing brackets is now working in the Console as well, bringing you closer to the experience of authoring in an IDE.

Did you know that console logs can be styled using backgrounds? For even more variety, you can add images, using data-uris. This feature is now working in Firefox , so don’t hesitate to get creative. For example, we tried this in one of our Fetch examples:

(console.log) ‘There has been a problem with your fetch operation:% c ‘ e.message, ‘color: red; padding: 2px 2px 2px 64 px; background: yellow 3px no-repeat url (data: image / png; base , iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAA 7EAAAOxAGVKw4bAAAApUlEQVQoz5WSwQ3DIBAE (wEEkWkABdBT bhNqwoldBHJF) kzryIp zgwiK5JX2w 2xdwugMMZ4IAIZeCszELX2hYhcgQIkEQnOOe c8yISgAQU1Rw3F2BdlmWig (tQNmdIpA) Qbcu6akWrJat7 gp EDkCdgttY uoaX8oBq5gsDiMgToNY6Kv OZIzxfZT7SP W3oZLj2JtHUaxnnu4s1 / jA4NbNZ3AI9YEA AAAAElFTkSuQmCC); ‘);

And got the following result:

We’d like to thank Firefox DevTools contributor Edward Billington for the data-uri support!

We now show arguments by default. We believe this makes logging JavaScript functions a bit more intuitive.

And finally for this section, when you perform a text or regex search in the Console, you can negate a search item by prefixing it with '-' (ie return results (not (including this term).

WebSocket Inspector improvements

The WebSocket inspector that (shipped in Firefox)

now nicely prints WAMP - formatted messages (in JSON, MsgPack, and CBOR flavors).

You won’t needlessly wait for updates, as the Inspector now also indicates when a WebSocket connection is closed.

A big thanks to contributor Tobias Oberstein for implementing the WAMP support, and to saihemanth for the WebSocket closed indicator!

New (power-) user features

We wanted to mention a couple of nice power user (Preferences) (features dropping in Firefox) .

First of all, the (General) (tab in) (Preferences) now has a Zoom tool. You can use this feature to set the magnification level applied to all pages you load. You can also specify whether all page contents should be enlarged, or only text. We know this is a hugely popular feature because of the number of extensions that offer this functionality. Selective zoom as a native feature is a huge boon to users.

The DNS over HTTPS (control in the (Network Settings) tab includes a new provider option, (NextDNS) . Previously, Cloudflare was the only available option.


Chris Mills is a senior tech writer at Mozilla, where he writes docs and demos about open web apps, HTML / CSS / JavaScript, A y, WebAssembly, and more. He loves tinkering around with web technologies, and gives occasional tech talks at conferences and universities. He used to work for Opera and W3C, and enjoys playing heavy metal drums and drinking good beer. He lives near Manchester, UK, with his good lady and three beautiful children.


More articles by Chris Mills…

                   Read More Brave Browser

About admin

Check Also

Securing Firefox with WebAssembly – Mozilla Hacks – the Web developer blog, Hacker News

Securing Firefox with WebAssembly – Mozilla Hacks – the Web developer blog, Hacker News

Protecting the security and privacy of individuals is a central tenet of Mozilla’s mission, and so we constantly endeavor to make our users safer online. With a complex and highly-optimized system like Firefox, memory safety is one of the biggest security challenges. Firefox is mostly written in C and C++. These languages are notoriously difficult…

Leave a Reply

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