Firefox 70 released with better security, CSS and JavaScript Improvements

Firefox 70

Overview

The release of Firefox 70 contains fantastic new features. For instance, safe password generation with lockwise and the latest Firefox Privacy Protection report. A lot of cool additions developers got in this update, apart from excellent user features and security. These include inactive CSS rule indicators and DOM mutation breakpoints in DevTools, some new CSS text properties, two-value display syntax, and also JS numeric separators.

Enhanced Tracking Protection(ETP):

The standard feature of Enhanced Tracking Protection is now social tracking protection, which prevents cross-site tracking cookies from sites such as Facebook, Twitter, and LinkedIn: 

Enhanced tracking protection (ETP) is included in the latest Firefox 70, which contains a Firefox Privacy Protection Report. This offers more knowledge and more insight into how you are being tracked online so that you can tackle it better. The browser has set up Improved Tracking Security by default. The report demonstrates how ETP prevents third-party trackers from creating users’ profiles based on their online behavior. The study also covers the number of Mozilla blocked cross-site and social media trackers, finger-printers, and crypto-miners.

Lockwise improvement: 

The Privacy Protections report shows an overview of the trackers that Firefox has blocked, with details. It offers unified Monitor and Lockwise reports. 

The report also allows users with Firefox Watch and Firefox Lockwise to keep themselves updated. Firefox monitor will enable users to get a rundown of the number of insecure passwords that may have been used in a violation. This way, you can update and also change specific passwords by taking action. Firefox Lockwise allows users to handle passwords and also multiple devices that are synced. A button is there in Firefox Lockwise, where users can press to access their logins and updates. They will also be able to easily view and control how many devices they use to synchronize and exchange passwords.

Integrated breach alert: 

Online data breaches will also expose your personal data. You may want to invalidate confidential information in certain situations so that hackers cannot take advantage of them. Firefox 70 introduces a new feature that alerts you to potentially vulnerable passwords. So that you can change them and your data will be safe. 

What’s new in Firefox 70?

Updated HTML forms and secure passwords:

The team has modified HTML input elements to generate stable passwords. Here, every password-type input element will have an option to create a safe password available in the context menu that can then be stored in lockwise. Furthermore, to create a new password in context, any type= “password” field with autocomplete= “new-password” set on it will have an autocomplete UI.

New CSS improvements in Firefox 70:

Firefox 70 features some CSS updates, such as new styling underline options and also a new set of two-keyword values. Three new text-decoration properties provide options for styling underlines.

  • Text-decoration-thickness: determines the thickness of the lines applied by text-decoration.
  • Text-underline-offset: sets the difference between the text-decoration and the text on which it is present.
  • Text-decoration-skip-ink: It sets, if underlines and overlines are drawn when crossing descenders and ascenders. Auto, the default value, allows them to be drawn only where they do not cross over the glyph. Set the value to none in order to enable underlines to cross glyphs.

Two keyword display values:

Until now, a single value has been used for the display property. However, the team says that the outer display form of the boxes on a page determines how the box is laid out in comparison to other boxes on the page. Moreover, an inner type of display that specifies how the children of the box will behave. The two-keyword values allow you to define the outer and inner display values directly. Supporting browsers (which currently only include Firefox) can map single keyword values to new two-keyword values, like:

  • Display: flex; corresponds to display: flex block;
  • Display: inline-flex; corresponds to display: inline flex;

JavaScript Improvements in Firefox 70: 

Firefox 70 now supports JavaScript numerical separators. Underlines can also be used in large numbers as separators so that they are more readable. In JavaScript, other enhancements include:

Intl improvements:

Firefox 70 provides enhanced i18n (internationalization) JavaScript, beginning with Intl.RelativeTimeFormat.formatToParts() method implementation.

This is a special version of Intl.RelativeTimeFormat.format() which returns an array of objects, each representing a part of the value, instead of returning a localized time value string.Intl.NumberFormat.format() and Intl.NumberFormat.formatToParts() now support the values for BigInt.

Performance improvements:

Speeds up the JavaScript by the introduction of the current baseline interpreter. It is possible to think of the Baseline Interpreter as a combination between the interpreter C++ and the compiler Baseline Just In Time. As you can see in the C++ interpreter, bytecode is executed in a fixed interpreter loop. As you find in the Baseline Just In Time compiler, inline caches are for boosting performance and also to collect type information. Many performance enhancements have been made with this recent addition to the pipeline of executing JavaScript in the browser. The new interpreter code contains a shared code from the current JIT Baseline. In Firefox 70, you can learn more about the interpreter in The Baseline Interpreter: A faster JS interpreter. The main performance improvements were: 

  1. Minor changes to memory use.
  2. Improved page load speed, an improvement of up to 8 percent.
  3. Developer tools performance test enhanced by 10 percent.
  4. Decrease the use of resources for video production by up to 37 percent.

New developer tools in Firefox 70:

The Accessibility Developer Tools panel now provides a keyboard accessibility audit.

Pause option in DOM Mutation in Debugger:

Color contrast in Firefox 70

Scripts that add, delete, or modify unique elements can be paused by DOM Mutation Breakpoints. Once the DOM mutation breakpoint is set, you will see it listed under ‘DOM Mutation Breakpoints’ in the right-hand pane of the Debugger. This is where you’ll see recorded breaks as well.

Color contrast information in the color picker:

You can click foreground colors with a color picker in the CSS Rules view. This is to assess if their comparison with the background color meets requirements for accessibility.

Accessibility inspector:

keyboard checks:

The search for issues drop-down for the usability inspector now requires keyboard accessibility checks. If we choose this option, Firefox will go through each node in the accessibility tree and also highlight all those with a keyboard accessibility problem. For more specifics about how to fix it, hovering over or clicking each one will reveal information about what the problem is, along with a “Learn more” link.

Web socket inspector:

The network monitor now has a new “Messages” panel in Firefox DevEdition.This occurs while you are tracking a web socket connection. This feature was initially intended to be in the general release of Firefox 70, but the team had a few more bugs to patch. Wait for this in Firefox 71! In the DevEdition, for now, users can explore it.

Fixed Issues in Firefox 70

  1. Moreover, Firefox’s built-in pages adopts the dark mode preference scheme.
  2. Removed aliased theme properties that can affect specific themes.
  3. In addition to the current Windows support, passwords can also be imported from Chrome on macOS.
  4. On under- or over-lining documents, including links, readability is greatly enhancing. Instead of going over a glyph, it will now disrupt the lines.
  5. Improved indicators of privacy and security.
    • A new crossed-out lock icon will display sites that will be delivering via insecure HTTP.
    •   The former green icon of the lock is now grey.
    • The indicator of Extended Validity (EV) will be carrying out to the identity popup, which appears when we click the lock icon.

Wrapping up 

In this blog, we have discussed the new updates that came in Firefox 70. Many sections were really affected by this update; HTML, CSS, JavaScript, DevTools, results, and also much more. Some of the key highlights are :

  1. Improvements in protecting the privacy of users.
  2. Protecting against trackers.
  3. Better handling of passwords.
  4. Improved DevTools.

Firefox can’t update automatically by chance. If you want to access all the new features, then you have to update your Firefox browser to the latest version. Do you have any queries regarding the update? If you have any, then contact us!. If you find this blog interesting, you can get more information by checking our blog section.