2020 is upon us, folks. We'd like to wish everyone reading this a happy new year, wherever you are. As you take your first steps of the new year, figuring out what your next move is, you may find it comforting to know that there's a new Firefox release to try out!
Version 72 to be exact.
One of the highlights that we are most proud of is that user gestures are now required for a number of permission-reliant methods, such as Notification.requestPermission()
. User research commonly brings up permission prompt spam as a top user annoyance, so we decided to do something about it. This change reduces permission spam and strengthens users' agency over their online experience.
As part of its Enhanced Tracking Protection feature, Mozilla is planning on blocking Fingerprinters by default in Firefox 72, which is slated to be released in January 2020. Firefox doesn't get enough love these days, but it's still the most customizable browser around thanks the numerous options in about:config. Here are 10 under-the-hood Firefox tweaks you should.
This release brings several other new features, including DevTool improvements such as Watchpoints, WebSockets inspector improvements, and resource download times; support for CSS features like shadow parts, motion path, and transform properties; and JS/API features such as event-based form participation and the nullish coalescing operator.
Read on for more highlights. Where is the apple menu on macbook pro. To find the full list of additions, check out the following MDN articles:
Now that we've moved to a 4-week browser release cycle, you'll see fewer new features in each individual release, but features will be added to Firefox more often. This gives you faster access to new functionality and bug fixes. You can read our full rationale for the change in Moving Firefox to a faster 4-week release cycle. Vuescan mac.
DevTools improvements
First, we'll look at Firefox 72 DevTools improvements in more detail.
Pause on variable access or change
Watchpoints are a new type of breakpoint that can pause execution when an object property gets read or set. You can set watchpoints from the context menu of any object listed in the Scopes panel.
This feature is described in more detail in the Use watchpoints article on MDN, and Debugging Variables With Watchpoints in Firefox 72 on Hacks.
Firefox DevEdition only: Asynchronous Stacks in Console
Console stacks capture the full async execution flow for console.trace()
and console.error()
. This lets you understand scheduling of timers, events, promises, generators, etc. over time, which would otherwise be invisible. Keycue 8 6 – displays all menu shortcut commands key.
They are only enabled in Firefox Developer Edition for now. We are working to make this feature available to all users after improving performance. Async stacks will also be rolled out to more types of logs, and of course the Debugger.
SignalR formatting & download/upload size for WebSockets
Before shipping the new WebSocket inspector in 71 we had it available in Firefox DevEdition and asked for your input. We didn't just get a lot of fantastic ideas, some of you even stepped up to contribute code. Thanks a lot for that, and keep it coming!
Messages sent in ASP.NET's Core SignalR format are now parsed to show nicely-formatted metadata. The bug was filed thanks to feedback from the ASP.NET community and then picked up by contributor Bryan Kok.
Similarly, the community asked to have the total transfer size for download and upload available. This is now a reality thanks to contributor Hayden Huang, who took up the bug as their first Firefox patch.
Start and end times for Network resources
The Timings tab of the Network Monitor now displays timings for each downloaded resource, making dependency analysis a lot easier:
- Queued — When the resource was queued for download.
- Started — When the resource started downloading.
- Downloaded — When the the resource finished downloading.
And as always, faster and more reliable
Here are just a few highlights from our continued performance and quality investments:
- In the Inspector, editing CSS is no longer blocked by CSP rules.
- The Inspector‘s badge for Custom Elements now correctly opens the original script for source maps.
- The Inspector now correctly preserves the selected element for
when reloading.
- The Debugger now loads faster when many tabs are open, by prioritizing visible tabs first.
CSS additions
Now let's move on to the most interesting new CSS features in Firefox 72.
Shadow Parts
One problem with styling elements contained inside a Shadow DOM is that you can't just style them from CSS applied to the main document. To make this possible, we've implemented Shadow Parts, which allow shadow hosts to selectively expose chosen elements from their shadow tree to the outside page for styling purposes.
Shadow parts require two new features. The part
attribute exposes an element inside a shadow tree to the outside page:
The ::part()
pseudo-element is then used to select elements with a specific part
attribute value:
CSS Motion Path
Motion Path is an interesting new spec for all you animators out there. The idea here is that you can define a path shape and then animate a DOM node along that path. The spec proposes an alternative to having to animate transform: translate()
, position properties like top
, right
, and so on, or use some other property that often isn't ideal and could result in very complex sets of keyframes.
With motion path, you define the shape of the path using offset-path
:
Define an animation to animate the element between different values of the offset-distance
property, which defines how far along the defined path you want the element to appear:
Then, animate the element using those keyframes:
This is a simple example. There are additional properties available, such as offset-rotate
and offset-anchor
. With offset-rotate
, you can specify how much you want to rotate the element being animated. Use offset-anchor
to specify which background-position of the animated element is anchored to the path.
Individual transform properties
In this release the following individual transform properties are enabled by default: scale
, rotate
, and translate
. These can be used to set transforms on an element, like so:
These can be used in place of:
Or even:
These properties are easier to write than the equivalent individual transforms, map better to typical user interface usage, and save you having to remember the exact order of multiple transform functions specified in the transform property.
JavaScript and WebAPI updates
If JavaScript is more your thing, this is the section for you. 72 has the following updates.
User gestures required for a number of permission-reliant methods
Notification permission prompts always show up in research as a top web annoyance, so we decided to do something about it. To improve security and avoid unwanted and annoying permission prompts, a number of methods have been changed so that they can only be called in response to a user gesture, such as a click event. These are Notification.requestPermission()
, PushManager.subscribe()
, and MediaDevices.getDisplayMedia()
.
By requiring a user gesture before the permission prompts are shown, Firefox significantly reduces permission spam, thereby strengthening users' agency over their online experience.
So, for example, prompting for notification permission on initial page load is no longer possible. You now need something like this:
For more detail on associated coding best practices for Notification permissions, read Using the Notifications API.
Nullish coalescing operator
The nullish coalescing operator, ??
, returns its right-hand side operand when its left-hand side operand is null or undefined. Otherwise, it returns its left-hand side operand.
This is a useful timesaver in a number of ways, and it is also useful when you only consider null and undefined to be unwanted values, and not other falsy values like 0
and ' '
.
For example, if you want to check whether a value has been set and return a default value if not, you might do something like this:
That's a bit long, so you might instead use this common pattern:
This also works OK, but will return unexpected results if you want to accept values of 0
or ' '
.
Install mac os sierra on new hard drive. 4k video downloader 4 9 2. With ??
, you can do this instead, which is concise and solves the problem described above:
Event-based form participation
Event-based form participation is now enabled by default. This involves using the new FormData event, which fires when the form is submitted, but can also be triggered by the invocation of a FormData()
constructor. This allows a FormData
object to be quickly obtained in response to a formdata event firing, rather than needing to create it yourself — useful when you want to submit a form via XHR, for example.
Here's a look at this feature in action:
Picture-in-picture for video now available on macOS & Linux
In the previous release post, we announced that Picture-in-picture had been enabled in Firefox 71, albeit this was for Windows only. However,today we have the goods that this very popular feature is now available on macOS and Linux too!
About Chris Mills
Chris Mills is a senior tech writer at Mozilla, where he writes docs and demos about open web apps, HTML/CSS/JavaScript, A11y, 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.
This article provides information about the changes in Firefox 72 that will affect developers. Firefox 72 was released on January 7, 2020.
Changes for web developers
Developer tools
Console:
- In the multi-line mode of the interactive JS interpreter, you can open and save files using the keyboard shortcuts Ctrl + O and Ctrl + S, respectively (bug 1592308).
- You can set a preference so that asynchronous messages are visually separated (bug 1592969).
JavaScript debugger:
- You can now right/Ctrl click on objects in the Scopes panel, and choose Property set or Property get to set watchpoints (bug 1574192).
Network Monitor:
- The Timings tab now shows queued, started, and downloaded times for each resource (bug 1580431).
Sketch 55 1080p. Page Inspector:
- You can set a preference to enable a simulator for different values of the
prefers-color-scheme
media feature (bug 1550804).
Removals
- The Scratchpad feature has been removed (bug 1519103).
HTML
No changes.
CSS
- CSS Shadow Parts are now enabled. This includes the
part
attribute and::part
pseudo-element, which allow shadow hosts to selectively expose chosen elements from their shadow tree to the outside page for styling purposes (bug 1559074). - CSS Motion Path has been shipped (bug 1582554, also see the Intent to Ship). This includes:
- The individual transform properties —
scale
,rotate
, andtranslate
— are now enabled by default (bug 1424900).
Removals
SVG
No changes
JavaScript
- The nullish coalescing operator has been implemented (bug 1566141).
APIs
New APIs
FormDataEvent
and event-based form participation is now enabled by default (bug 1594708).
DOM
- The Geolocation API has had some interface name updates, as per recent spec changes (bug 1575144):
Coordinates
has been changed toGeolocationCoordinates
.Position
has been changed toGeolocationPosition
.PositionError
has been changed toGeolocationPositionError
.
- A number of properties have been updated to use standard stringifiers (bug 824857):
DOM events
Notification.requestPermission()
andPushManager.subscribe()
can now only be called in response to a user gesture such as aclick
event (bug 1593644).
Service workers
- The
WindowOrWorkerGlobalScope.crossOriginIsolated
property is now supported (bug 1591892).
Media, Web Audio, and WebRTC
- The
MediaDevices.getDisplayMedia()
method can now only be called in response to a user gesture such as aclick
event (bug 1580944). - The
RTCRtpContributingSource
dictionary can now include thertpTimestamp
property, which is a source-generated time at which the packet's media was generated or sampled (bug 1583867).
Removals
- Removed the non-standard
window.mozPaintCount
property. (bug 1591968) - The
BatteryManager
interface is no longer exposed to web content (bug 1441976). Navigator.vibrate()
is no longer supported in cross-origin</code>s (bug 1591113).</li><li>WebRTC no longer supports the <code>rid=</code> and <code>pt=</code> parameters on the <code>simulcast</code> attribute. The new syntax for a line such as '<code>a=simulcast: send rid=7 recv rid=8</code>' is now '<code>a=simulcast: send 7 recv 8</code>'. The new syntax has been supported since Firefox 68, so now it's time tor retire support for the old syntax (bug 1470568).</li></ul><h2 id='firefox-72-tabs-on-bottom'>Firefox 72 Tabs On Bottom</h2><h3>Security</h3><h2 id='firefox-72-tabs-on-bottom'>Firefox 72 Tabs On Bottom</h2><ul><li>Opting-out of MIME sniffing using <code>X-Content-Type-Options</code> is now also applied to top-level documents if a <code>Content-type</code> is provided. This can cause HTML web pages to be downloaded instead of being rendered when they are served with a MIME type other than <code>text/html</code>. Make sure to set both headers correctly. (bug 1591932).</li><li>Dropped the support for HTTP Public Key Pinning (HPKP) because of the low adoption rate and interoperability risk. The <code>Public-Key-Pins</code> and <code>Public-Key-Pins-Report-Only</code> headers are now silently ignored bug 1412438.</li></ul><h3>Plugins</h3><p><em>No changes.</em></p><h3>WebDriver conformance (Marionette)</h3><ul><li>Removed <code>Anon</code> and <code>AnonAttribute</code> strategies from <code>WebDriver:FindElement</code> and <code>WebDriver:FindElements</code> commands (bug 1587627).</li><li><code>Webdriver:TakeScreenshot</code> no longer fails if captured area exceeds upper maximum bound for the canvas width, height, or size (bug 1590064).</li></ul><h2>Changes for add-on developers</h2><h3>API changes</h3><ul><li>The <code>browserSettings.ftpProtocolEnabled</code> property has been implemented (bug 1592687).</li><li>The <code>BrowserSetting.onChange</code> event has been implemented (bug 1410412).</li><li>The <code>captivePortal.canonicalURL</code> property has been implemented (bug 1592932).</li><li>The callback functions for the <code>browserAction.onClicked</code> and <code>pageAction.onClicked</code> events now include a <code>OnClickData</code> property containing an object whose properties describe the mouse button pressed along with any keyboard modifiers (bug 1405031). This allows support for additional types of mouse click.</li></ul><h3>Manifest changes</h3><p><em>No changes.</em></p><h2 id='firefox-72-multirow-tabs'>Firefox 72 Multirow Tabs</h2><h2>See also</h2><ul><li>Hacks release post: Firefox 72 — our first song of 2020</li></ul><h2>Older versions</h2><br><br><br><br>