Mozilla Firefox

Firefox 70 is released today, and includes great new features such as secure password generation with Lockwise and the new Firefox Privacy Protection Report; you can read the full details in the Firefox 70 Release Notes. Amazing user features and ... [More] protections aside, we’ve also got plenty of cool additions for developers in this release. These include DOM mutation breakpoints and inactive CSS rule indicators in the DevTools, several new CSS text properties, two-value display syntax, and JS numeric separators. In this article, we’ll take a closer look at some of the highlights! For all the details, check out the following: Firefox 70 for developers Site compatibility for Firefox 70 Note that the new Mozilla Developer YouTube channel will have videos covering many of the features mentioned below. Why not subscribe, so you can get them when they come out? HTML forms and secure passwords To enable the generation of secure passwords (as mentioned above) we’ve updated HTML elements; any element of type password will have an option to generate a secure password available in the context menu, which can then be stored in Lockwise. For example, take the following: In the Firefox UI, you’ll then be able to generate a secure password like so: In addition, any type="password" field with autocomplete=”new-password” set on it will have an autocomplete UI to generate a new password in-context. Note: It is advisable to use autocomplete=”new-password” on password change and registration forms as a strong signal to password managers that a field expects a new password, not an existing one. CSS Let’s turn our attention to the new CSS features in Firefox 70. New options for styling underlines! Firefox 70 introduces three new properties related to text decoration/underline: text-decoration-thickness: sets the thickness of lines added via text-decoration. text-underline-offset: sets the distance between a text decoration and the text it is set on. Bear in mind that this only works on underlines. text-decoration-skip-ink: sets whether underlines and overlines are drawn if they cross descenders and ascenders. The default value, auto, causes them to only be drawn where they do not cross over a glyph. To allow underlines to cross glyphs, set the value to none. So, for example, the following code: h1 { text-decoration: underline red; text-decoration-thickness: 3px; text-underline-offset: 6px; } will give you this kind of effect: Two-keyword display values For years, the humble display property has taken a single value, whether we are talking about simple display choices like block, inline, or none, or newer display modes like flex or grid. However, as Rachel explains, the boxes on your page have an outer display type, which determines how the box is laid out in relation to other boxes on the page, and an inner display type, which determines how the box’s children will behave. Browsers have done this for a while, but it has only been specified recently. The new set of two-keyword values allow you to explicitly specify the outer and inner display values. In supporting browsers (just Firefox at the time of writing), the single keyword values we know and love will map to new two-keyword values, for example: display: flex; is equivalent to display: block flex; display: inline-flex; is equivalent to display: inline flex; Rachel will explain this in more detail in an upcoming blog post. For now, watch this space! JavaScript Now let’s move on to the JavaScript. Numeric separators Numeric separators are now supported in JavaScript — underscores can now be used as separators in large numbers, so that they are more readable. For example: let myNumber = 1_000_000_000_000; console.log(myNumber); // Logs 1000000000000 let myHex = 0xA0_B0_C0 console.log(myHex); // Logs 10531008 Numeric separators are usable with any kind of numeric literal, including BigInts. Intl improvements We’ve improved JavaScript i18n (internationalization), starting with the implementation of the Intl.RelativeTimeFormat.formatToParts() method. This is a special version of Intl.RelativeTimeFormat.format() that returns an array of objects, each one representing a part of the value, rather than returning a string of the localized time value. const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" }); rtf.format(-2, "day"); // Returns "2 days ago" rtf.formatToParts(-2, "day"); /* Returns [ ​  { type: "integer", value: "2", unit: "day" }, ​  { type: "literal", value: " days ago" } ​] */ This is useful because it allows you to easily isolate the numeric value out of the string, for example. In addition, Intl.NumberFormat.format() and Intl.NumberFormat.formatToParts() now accept BigInt values. Performance improvements JavaScript has got generally faster thanks to our new baseline interpreter! You can learn more by reading The Baseline Interpreter: a faster JS interpreter in Firefox 70. Developer tools There is a whole host of awesome new things going on with Firefox 70 developer tools. Let’s find out what they are! Inactive CSS rules indicator in rules panel Inactive CSS properties in the Rules view of the Page Inspector are now colored gray and have an information icon displayed next to them. The properties are technically valid, but won’t have any effect on the element. When you hover over the info icon, you’ll see a useful message about why the CSS is not being applied, including a hint about how to fix the problem and a “Learn more” link for more information. For example, in this case our grid-auto-columns property is inactive because we are trying to apply it to an element that is not a grid container: And in this case, our flex property is inactive because we are trying to apply it to an element that is not a flex item. (Its parent is not a flex container.): To fix this second issue, we can go into the inspector, find the element’s parent (a in this case), and apply display: flex; to it: Our fix is shown in the Changes panel, and from there can be copied and put into our code base. Sorted! Pause on DOM Mutation in Debugger In complex dynamic web apps it is sometimes hard to tell which script changed the page and caused the issue when you run into a problem. DOM Mutation Breakpoints (aka DOM Change Breakpoints) let you pause scripts that add, remove, or change specific elements. Try inspecting any element on your page. When you /ctrl + click it in the HTML inspector, you’ll see a new context menu item “Break on…”, with the following sub-items: Subtree modification Attribute modification Node removal Once a DOM mutation breakpoint is set, you’ll see it listed under “DOM Mutation Breakpoints” in the right-hand pane of the Debugger; this is also where you’ll see breaks reported. For more details, see Break on DOM mutation. If you find them useful for your work, you might find Event Listener Breakpoints and XHR Breakpoints useful too! Color contrast information in the color picker! In the CSS Rules view, you can click foreground colors with the color picker to determine if their contrast with the background color meets accessibility guidelines. Accessibility inspector: keyboard checks The Accessibility inspector‘s Check for issues dropdown now includes keyboard accessibility checks: Selecting this option causes Firefox to go through each node in the accessibility tree and highlight all that have a keyboard accessibility issue: Hovering over or clicking each one will reveal information about what the issue is, along with a “Learn more” link for more details on how to fix it. Try it now, on a web page near you! Web socket inspector In Firefox DevEdition, the Network monitor now has a new “Messages” panel, which appears when you are monitoring a web socket connection (i.e. a 101 response). This can be used to inspect web socket frames sent and received through the connection. Read Firefox’s New WebSocket Inspector to find out more. Note that this functionality was originally supposed to be in Firefox 70 general release, but we had a few more bugs to iron out, so expect it in Firefox 71! For now, you can use it in DevEdition — please share your constructive feedback! The post Firefox 70 — a bountiful release for all appeared first on Mozilla Hacks - the Web developer blog. [Less]

With the release of Firefox 70, we are pleased to welcome the 45 developers who contributed their first code change to Firefox in this release, 32 of whom were brand new volunteers! Please join us in thanking each of these diligent and enthusiastic ... [More] individuals, and take a look at their contributions: bugtastico: 1567658 graham.mcknight2: 1289821 msirringhaus: 1564900, 1573381 robert.mader: 1563035 u644803: 1557222 Anurag Aggarwal: 1556840, 1573319 Apratim: 1562229 Arun Kumar Mohan: 1530282, 1554872, 1554873, 1554875, 1554882, 1554883, 1554884, 1554901, 1554924, 1566469 Asif Youssuff: 1577124 Benjamin Eriksson: 1566149, 1566453, 1569889 Blito: 1541861 Caroline Cullen: 1570489 Chris Fallin: 1492920, 1571911 Chris Muldoon: 1563446 Dennis van der Schagt: 1556151, 1569420 Elliot Stirling:estirling: 1521094 Emma Malysz: 1576677 François Freitag: 1479708 George Roman: 1568327, 1568657, 1569466 Greyson Gilbert: 1535809, 1560771, 1564293 James Lemon: 1549609 Jan Andre Ikenmeyer: 1560699, 1563854, 1563859, 1565365, 1567300, 1570635 Javier Olaechea: 1558355 Joel Olsson: 1553545, 1565562 Kris Taeleman: 1573255 Krishnal Ciccolella: 1545356, 1558371, 1565714, 1566283, 1570821, 1573089, 1573316 Lesley Norton: 1564539, 1569846, 1575155, 1575955 Maliha Islam: 1357071, 1478156, 1540813, 1564993, 1564999, 1567200, 1568053, 1571237 Maxx Crawford: 1566861, 1568900, 1572487, 1574108 Megha: 1530781, 1567883, 1574255 Michael Woerister: 1437452 Moritz Birghan: 1004308, 1297357, 1300165, 1360307, 1549015, 1549818, 1559520, 1563849, 1567005 Māris Fogels: 1210157, 1569046 Niklas Hambüchen: 1564930 Priyank Singh: 455086, 1567530 Ruchika Gosain: 1333721, 1555333, 1564555 Ryan Alderete: 1506219, 1520550, 1526039, 1570158, 1571027, 1574512 Simon Giesecke: 1093064, 1564068, 1564073, 1565515, 1566758, 1571407 Stanislav Goncharov: 1097836 Toshihito Kikuchi: 1567219, 1568610, 1575352, 1575655, 1575670 alta88: 1569791 kendall: 1570005 mattheww: 901138 ruthra: 1003968 sagudev: 1458624 singuliere: 1526447, 1563239 [Less]

Our push this year has been building privacy-centric features in our products that are on by default. With this move, we’re taking the guesswork out of how to give yourself more privacy online thanks to always-on features like blocking third-party ... [More] tracking cookies and cryptominers also known as Enhanced Tracking Protection. Since July 2 we’ve blocked more than 450 billion tracking requests that attempt to follow you around the web. 450 billion tracker have been blocked with Enhanced Tracking Protection Much of this work has been behind the scenes — practically invisible to you — making it so that whenever you use Firefox, the privacy protections are working for you in the background. But now with growing threats to your privacy, it’s clear that you need more visibility into how you’re being tracked online so you can better combat it. That’s why today we’re introducing a new feature that offers you a free report outlining the number of third-party and social media trackers blocked automatically by the Firefox browser with Enhanced Tracking Protection. In some ways a browser is like a car, where the engine drives you to the places you want to go and a dashboard tells you the basics like how fast you’re going or whether you need gas. Nowadays, most cars go beyond the basics, and dashboards tell you much more than ever, like when you need to brake or when a car is in your blind spot, essentially taking extra steps to protect you. Similar to a car’s dashboard, we created an easy-to-view report within Firefox that shows you the extra steps it takes to protect you when you’re online. So you can enjoy your time without worrying who’s tracking you, potentially using your data or browsing history without your knowledge. Here’s how Firefox’s Privacy Protections report works for you:  The Firefox Privacy Protections report includes: See how many times Enhanced Tracking Protection blocks an attempt to tag you with cookies –  One of the many unseen ways that Firefox keeps you safe is to block third-party tracking cookies. It’s part of our Enhanced Tracking Protection that we launched by default in September. It prevents third-party trackers from building a profile of you based on your online activity. Now, you’ll see the number of cross-site and social media trackers, fingerprinters and cryptominers we blocked on your behalf. Keep up to date on data breaches with Firefox Monitor –  Data breaches are not uncommon, so it’s more important than ever to stay on top of your email accounts and passwords. Now, you can view at a glance a summary of the number of unsafe passwords that may have been used in a breach, so that you can take action to update and change those passwords. Manage your passwords and synced devices with Firefox Lockwise– Now, you can get a brief look at the number of passwords you have safely stored with Firefox Lockwise. We’ve also added a button where you can click to view your logins and update. You’ll also have the ability to quickly view and manage how many devices you are syncing and sharing your passwords with. “The industry uses dark patterns to push people to “consent” to an unimaginable amount of data collection. These interfaces are designed to push you to allow tracking your behavior as you browse the web,” said Selena Deckelmann, Senior Director of Firefox Engineering at Mozilla. “Firefox’s Data Privacy Principles are concise and clear. We respect your privacy, time, and attention. You deserve better. For Firefox, this is business as usual. And we extend this philosophy to how we protect you from others online.” Stay up-to-date on Your Personalized Privacy Protections There are a couple ways to access your personalized Firefox’s privacy protections. First, when you visit a site and see a shield icon in the address bar, Firefox is blocking 10 billion — that’s billion with a B —  trackers every day, stopping thousands of companies from viewing your online activity. Now, when you click on the shield icon, then click on Show Report, you’ll see a complete overview. Click on the shield icon, then click on Show Report, to see a complete overview   The number of cross-site and social media trackers, fingerprinters and cryptominers   A complete overview of your Privacy Protections Another way to access the report is to visit here. The Privacy Protections section of your report are based on your recent week’s online activities. Keep your passwords safe with Lockwise’s new password generator and improved management As a further demonstration of our commitment to your privacy and security, we’ve built visible consumer-facing products like Monitor and Lockwise, available to you when you sign up for a Firefox account. Equipped with this information, you can take full advantage of the products and services that’s also part of this latest release. Last year, Firefox Lockwise (previously Lockbox) launched as a Test Pilot experiment to safely store and take your passwords everywhere. Since then, we’ve incorporated feedback from users like launching it on Android, in addition to desktop and iOS. Today, we’ve added two of the most popular requested features for Lockwise that are now available in Firefox: password generator with improved management plus integrated updates on breached accounts with Firefox Monitor. Take a look at the improved Lockwise dashboard:  The newest Firefox release includes enabling users to generate and manage passwords with Firefox Lockwise, stay informed about data breaches with Firefox Monitor, which is now even better integrated with the Firefox browser and its features. Generate new, secure passwords – With multiple accounts like email, banks, retailers or delivery services, it can be tough to come up with creative and secure passwords rather than the typical 123456 or your favorite sports team, which are not secure at all. Now, when you create an account you’ll be auto-prompted to let Lockwise generate a safe password, which you can save directly in the Firefox browser. For current accounts, you can right click in the password field to access securely generated passwords through the fill option. All securely generated passwords are auto-saved to your Firefox Lockwise account. Improved dashboard to manage your passwords – To access the new Lockwise dashboard, click on the main menu button located on the far right of your toolbar. It looks like ☰ with three parallel lines. From there click on “Logins and Passwords”, you’ll see the new and improved Firefox Lockwise dashboard open in a new tab, which allows you to search, sort, create, update, delete and manage your passwords to all your accounts. Plus, you’ll see a notification from Firefox Monitor if the account may have been involved in a data breach. Take your passwords with you everywhere – Use saved passwords in the Firefox browser on any device by downloading Firefox Lockwise for Android and iOS. With a Firefox Account, you can sync all your logins between Firefox browsers and the Firefox Lockwise apps to auto-fill and safely access your passwords across devices whenever you are on the go. Preventing additional data leaks in today’s Firefox release We’re always looking for ways to protect your privacy, and as you know there are multiple ways that companies can access your data. Initially launched in Private Browsing mode in January 2018, we’re now stripping path information from the HTTP referrer sent to third-party trackers to prevent additional data leaks in today’s Firefox release. The HTTP referrer is data sent in an HTTP connection, and can be leveraged to track you from site to site. Additionally, companies can collect and sell this data to third parties and use it to build user profiles. To see what else is new or what we’ve changed in today’s release, you can check out our release notes. Check out and download the latest version of Firefox available here.   The post Latest Firefox Brings Privacy Protections Front and Center Letting You Track the Trackers appeared first on The Mozilla Blog. [Less]

Since July 2019, Firefox’s Enhanced Tracking Protection has blocked over 450 Billion third-party tracking requests from exploiting user data for profit. This shocking number reveals the sheer scale of online tracking and it highlights why the current ... [More] advertising industry push on transparency, choice and “consent” as a solution to online privacy simply won’t work. The solutions put forth by other tech companies and the ad industry provide the illusion of choice. Let’s step through the reasons why that is and why we ultimately felt it necessary to enable Enhanced Tracking Protection by default. A few months ago, we began to enable Enhanced Tracking Protection, which protects Firefox users from cookie-based tracking by default. We did this for a few reasons: 1. People do not expect their data to be sent to, and collected by, third-party companies as they browse the web. For example, 72% of people do not expect that Facebook uses “Like” buttons to collect data about a person’s online activity on websites outside of Facebook (when the buttons are not actually clicked). Many in the ad industry will point to conversion rates for behaviorally targeted ads as evidence for consumers being okay with the privacy tradeoff, but people don’t know they are actually making such a tradeoff. And even if they were aware, we shouldn’t expect them to have the information necessary to evaluate the tradeoff. When people are asked explicitly about it, they are generally opposed. 68% of people believe that using online tracking to tailor advertisements is unethical. 2. The scale of the problem is immense. We currently see about 175 tracking domains being blocked per Firefox client per day. This has very quickly resulted in over 450B trackers being blocked in total since July. You can see the numbers accelerate in the beginning of September after we enabled Enhanced Tracking Protection for all users. Estimate of Tracking Requests Blocked by Firefox with Enhanced Tracking Protection It should be clear from these numbers that users would be quickly overwhelmed if they were required to make individual choices about data sharing to this many companies. 3. The industry uses dark patterns to push people to “consent” via cookie/consent banners. We’ve all had to click through consent banners every time we visit a new site. Let’s walk through the dark patterns in one large tech company’s consent management flow as an example, keeping in mind that this experience is not unique — you can find plenty of other examples just like this one. This particular consent management flow shows how these interfaces are often designed counterintuitively so that users likely don’t think they are agreeing to be tracked. We’ve redacted the company name in the example to focus on the content of the experience. To start off, we’re presented with a fairly standard consent prompt, which is meant to allow the site visitor to make an informed choice about how their data can be collected and used. However note that clicking anywhere on the page provides “consent”. It only gets worse from here… Consent prompt on large tech company website If the user manages to click “Manage Ad Cookies” before clicking elsewhere on the page, they are given the options to “Save Settings” or “Allow All”. According to the highlighted text, clicking either of these buttons at this point provides consent to all partners to collect user data.  Users are not given the option to “Disable All”. Confusing consent dialog Instead, if a user wants to manage consent they have to click the link labeled view vendor consent. Wording matters here! If a person is skimming through that dialog they’ll assume that link is informational. This consent flow is constructed to make the cognitive load required to protect oneself as high as possible, while providing ample opportunity to “take the easy way out” and allow all tracking. Finally, users who make it to the consent management section of the flow are presented with 415 individual sliders. The website provides a global toggle, but let’s assume a user actually wants to make informed choices about each partner. After all, that is the point, right? Confusing consent mechanism Eight of the 415 privacy policies linked from the consent management page are inaccessible. They throw certificate errors, fail to resolve, or time out. Error loading privacy policies for 3rd party partners The 407 privacy policies that load correctly total over 1.3 million words. That will take the average adult over 86 hours — two solid work weeks — just to read. That doesn’t even consider the time needed to reflect on that information and make an informed choice. Proposals for “transparency and consent” as a solution to rampant web tracking should be seen for what they really are: proposals to continue business as usual. Thankfully Firefox blocks almost all of the third-party cookies loaded on the page by default, despite the deceptive methods used to get the visitor to “consent”. Tracking Cookies Blocked in Firefox by Default While it is easy to focus on this particular example, this experience is far from unique. The sheer volume of tracker blocking that we see with Firefox’s Enhanced Tracking Protection (around 175 blocks per client per day) confirms that the average individual would never be able to make informed choices about whether or not individual companies can collect their data. This also highlights how tech companies need to do more if they are really serious about privacy, rather than push the burden onto their customers. Firefox already blocks tracking by default. Today, a new version of Firefox will be released which will make it clear when tracking attempts are happening without your knowledge and it will highlight how Firefox is keeping you safe. We invite you to try and download the Firefox browser here.   The post The Illusion of choice and the need for default privacy protection appeared first on The Mozilla Blog. [Less]

You could say that a web browser is kind of like a car. The engine drives you where you want to go, and a dashboard tells you what’s happening under … Read more The post Firefox privacy protections reveal who’s trying to track you appeared first on The Firefox Frontier.

You could say that a web browser is kind of like a car. The engine drives you where you want to go, and a dashboard tells you what’s happening under … Read more The post Firefox privacy protections reveal who’s trying to track you appeared first on The Firefox Frontier.

Remembering unique, strong passwords for all your accounts and apps is a challenge, but it’s also essential for good digital security. We’re making that easier by helping you generate and … Read more The post New password security features come to Firefox with Lockwise appeared first on The Firefox Frontier.

Remembering unique, strong passwords for all your accounts and apps is a challenge, but it’s also essential for good digital security. We’re making that easier by helping you generate and … Read more The post New password security features come to Firefox with Lockwise appeared first on The Firefox Frontier.

Let’s say you’re on an outdoor pizza oven website dreaming about someday owning one. Mmm pizza. Next you switch gears and visit a fitness site; lo and behold an ad … Read more The post No Judgment Digital Definitions: What is a web tracker? appeared first on The Firefox Frontier.

Let’s say you’re on an outdoor pizza oven website dreaming about someday owning one. Mmm pizza. Next you switch gears and visit a fitness site; low and behold an ad … Read more The post No Judgment Digital Definitions: What is a web tracker? appeared first on The Firefox Frontier.