2020 年已经到来，朋友们。我们希望所有阅读本文的人新年快乐，无论你在哪里。当你迈出新年的第一步，弄清楚你的下一步行动是什么时，你可能会发现尝试一个新的 Firefox 版本会让你感到欣慰！

确切地说，是 72 版。

我们最自豪的亮点之一是，现在需要用户操作才能使用许多依赖于权限的方法，例如 Notification.requestPermission()。用户研究通常将权限提示垃圾邮件列为用户最讨厌的事情之一，因此我们决定做点什么。此更改减少了权限垃圾邮件，并增强了用户对其在线体验的控制。

此版本带来了许多其他新功能，包括 DevTool 改进，例如断点、WebSocket 检查器改进和资源下载时间；对 CSS 功能的支持，例如阴影部分、运动路径和变换属性；以及 JS/API 功能，例如基于事件的表单参与和空值合并运算符。

继续阅读以了解更多亮点。要查看完整的新增功能列表，请查看以下 MDN 文章

• Firefox 72 for developers
• Site compatibility for Firefox 72
• Firefox 72 end-user release notes

现在我们已经转向 4 周的浏览器发布周期，你会发现每个单独版本中的新功能更少，但功能会更频繁地添加到 Firefox 中。这使您能够更快地访问新功能和错误修复。您可以在 将 Firefox 切换到更快的 4 周发布周期 中阅读我们对更改的完整理由。

DevTools 改进

首先，我们将更详细地介绍 Firefox 72 DevTools 的改进。

在访问或更改变量时暂停

断点是一种新型的断点，它可以在对象属性被读取或设置时暂停执行。您可以从作用域面板中列出的任何对象的上下文菜单中设置断点。

此功能在 MDN 上的 使用断点 文章以及 Hacks 上的 在 Firefox 72 中使用断点调试变量 中有更详细的说明。

仅限 Firefox DevEdition：控制台中的异步堆栈

控制台堆栈捕获 <a href="https://mdn.org.cn/en-US/docs/Web/API/console/trace">console.trace()</a> 和 <a href="https://mdn.org.cn/en-US/docs/Web/API/console/error">console.error()</a> 的完整异步执行流程。这使您可以了解定时器、事件、Promise、生成器等的调度方式，而这些方式在其他情况下将是不可见的。

目前，它们仅在 Firefox Developer Edition 中启用。我们正在努力在提高性能后，将此功能提供给所有用户。异步堆栈也将推广到更多类型的日志，当然还有调试器。

用于 WebSockets 的 SignalR 格式化以及下载/上传大小

在发布新的 71 中的 WebSocket 检查器 之前，我们已经在 Firefox DevEdition 中提供它，并征求您的意见。我们不仅得到了很多很棒的想法，一些人甚至参与了代码贡献。非常感谢你们，并且 继续努力！

现在，以 ASP.NET 的 Core SignalR 格式发送的消息将被解析，以显示格式良好的元数据。该 错误 是由于 ASP.NET 社区的反馈 而提交的，然后由贡献者 Bryan Kok 处理。

类似地，社区 要求 提供下载和上传的总传输大小。这现在已成为现实，这要归功于 贡献者 Hayden Huang，他将 该错误 作为他们的第一个 Firefox 修补程序。

网络资源的开始和结束时间

计时 选项卡 网络监控器 现在显示每个下载资源的计时信息，这使得依赖性分析变得更加容易。

• 排队 — 资源排队等待下载的时间。
• 开始 — 资源开始下载的时间。
• 下载 — 资源完成下载的时间。

一如既往，更快更可靠

以下仅是我们对性能和质量投资的几个亮点。

• 在 检查器 中，编辑 CSS 不再受 CSP 规则的阻止。
• 检查器 用于 自定义元素 的徽章现在可以正确地打开源映射的原始脚本。
• 检查器 现在可以在重新加载时正确地保留选定的元素，以用于 <a href="https://mdn.org.cn/en-US/docs/Web/HTML/Element/iframe"><iframes></a>。
• 当打开许多选项卡时，调试器 现在可以更快地加载，方法是首先优先加载可见的选项卡。

CSS 添加

现在让我们继续讨论 Firefox 72 中最有趣的新 CSS 功能。

阴影部分

对包含在 Shadow DOM 中的元素进行样式设置的一个问题是，您不能只对应用于主文档的 CSS 进行样式设置。为了使这成为可能，我们实现了阴影部分，它允许阴影宿主有选择地将阴影树中选择的元素暴露给外部页面，以便进行样式设置。

阴影部分需要两个新功能。part 属性将阴影树中的元素暴露给外部页面。

<custom-element>
  <p part="example">A paragraph</p>
</custom-element>

然后，::part() 伪元素用于选择具有特定 part 属性值的元素。

custom-element::part(example) {
  border: solid 1px black;
  border-radius: 5px;
  padding: 5px;
}

CSS 运动路径

运动路径 是一个有趣的新规范，适用于所有动画师。这里的意思是，您可以定义路径形状，然后沿着该路径对 DOM 节点进行动画处理。该规范提出了一种替代方案，无需对 transform: translate()、top、right 等位置属性进行动画处理，也不需要使用其他通常不太理想的属性，这可能会导致非常复杂的关键帧集。

使用运动路径，您可以使用 offset-path 定义路径的形状。

offset-path: path('M20,20 C20,100 200,0 200,100');

定义一个动画，以将元素在 offset-distance 属性的不同值之间进行动画处理，该属性定义您希望元素显示在定义路径上的位置。

@keyframes move {
  0% {
    offset-distance: 0%;
  }

  100% {
    offset-distance: 100%;
  }
}

然后，使用这些关键帧对元素进行动画处理。

animation: move 3000ms infinite alternate ease-in-out;

这是一个简单的示例。还有其他可用的属性，例如 offset-rotate 和 offset-anchor。使用 offset-rotate，您可以指定您希望对正在进行动画处理的元素旋转多少度。使用 offset-anchor 指定动画元素的哪个背景位置固定在路径上。

单个变换属性

在此版本中，以下单个变换属性默认情况下已启用：scale、rotate 和 translate。这些可用于对元素设置变换，如下所示。

scale: 2;
rotate: 90deg;
translate: 100px 200px;

这些可用于代替

transform: scale(2);
transform: rotate(90deg);
transform: translate(100px 200px);

或者甚至

transform: scale(2) rotate(90deg) translate(100px 200px);

这些属性比等效的单个变换更容易编写，与典型的用户界面使用情况映射得更好，并且让您不必记住在 transform 属性中指定多个变换函数的精确顺序。

JavaScript 和 WebAPI 更新

如果您更喜欢 JavaScript，那么这一部分适合您。72 包含以下更新。

许多依赖于权限的方法需要用户操作

通知权限提示始终在研究中显示为网络最令人讨厌的事情之一，因此我们决定做点什么。为了提高安全性并避免不必要的和令人讨厌的权限提示，一些方法已被更改，以便它们只能在响应用户操作（例如单击事件）时调用。这些方法是 Notification.requestPermission()、PushManager.subscribe() 和 MediaDevices.getDisplayMedia()。

通过要求在显示权限提示之前进行用户操作，Firefox 大大减少了权限垃圾邮件，从而增强了用户对其在线体验的控制。

因此，例如，在初始页面加载时提示获取通知权限已不再可能。您现在需要像这样：

btn.addEventListener('click', function() {
  Notification.requestPermission();
  // Handle other notification permission stuff in here
});

有关通知权限的关联编码最佳实践的更多详细信息，请阅读 使用通知 API。

空值合并运算符

空值合并运算符 ?? 在其左侧操作数为 null 或 undefined 时返回其右侧操作数。否则，它返回其左侧操作数。

这在许多方面都是一个有用的省时方法，它在您只将 null 和 undefined 视为不需要的值时也很有用，而不是其他假值，例如 0 和 ' '。

例如，如果您想检查是否已设置某个值，并且如果没有，则返回默认值，您可能会执行以下操作：

let value;

if(!value) {
  value = 'default';
}

这有点长，所以您可能会改为使用此常见模式：

let value;
let value = value || 'default';

这也能正常工作，但如果您想接受 0 或 ' ' 的值，则会返回意外的结果。

使用 ??，您可以改为执行以下操作，这简明扼要地解决了上面描述的问题。

let value;
value = value ?? 'default';

基于事件的表单参与

基于事件的表单参与现在默认启用。这涉及到使用新的 FormData 事件，该事件在表单提交时触发，但也可以通过调用FormData()构造函数触发。这允许在 FormData 事件触发时快速获取FormData对象，而不是需要自己创建它 - 例如，当你想要通过 XHR 提交表单时，这很有用。

以下是此功能的实际应用示例。

formElem.addEventListener('submit', (e) => {
  // on form submission, prevent default
  e.preventDefault();

  // construct a FormData object, which fires the formdata event
  new FormData(formElem);
});

formElem.addEventListener('formdata', (e) => {
  console.log('formdata fired');

  // Get the form data from the event object
  let data = e.formData;

  // submit the data via XHR
  let request = new XMLHttpRequest();
  request.open("POST", "/formHandler");
  request.send(data);
});

视频画中画功能现已在 macOS 和 Linux 上可用

在之前的发布文章中，我们宣布了画中画功能已在 Firefox 71 中启用，尽管当时仅限于 Windows 系统。然而，今天我们很高兴地宣布，这项广受欢迎的功能现在也适用于 macOS 和 Linux 系统！