有很多方法可以为 Firefox OS 项目做出贡献，其中大部分方法都不涉及编写代码。但是，如果您是一名开发人员，没有什么比将您干净的补丁合并到项目中更甜蜜和令人满意了。鉴于围绕 Firefox OS 平台的所有兴奋和活力，我决定是时候让我迈出这一步，学习如何破解 Gaia——Firefox OS 的界面。

已经存在 一篇关于为 Firefox OS 破解 Gaia 的优秀文章，以及 MDN 关于破解 Gaia 的文档 是最佳的起点。

这篇文章采用了略有不同的路径，我的重点更多地放在我开始破解 Gaia 并使用 Firefox 浏览器和 Geeksphone Keon 测试我的更改的经验上。我介绍了我为选择错误、编写建议的修复程序以及向 Gaia 提交拉取请求所经历的过程。

选择错误

Firefox OS 使用 bugzilla 来跟踪错误。我之前偶尔使用过 bugzilla，但这是我第一次真正使用它来查找要处理的错误。我知道它非常强大，但对于像我这样的新手来说，UI 可能有点令人生畏。但是，一旦我花了一些时间研究各种搜索选项，我就对它感到非常舒服。我最终选择了一个关于时钟应用程序中 UX 增强 的错误。我选择这个特定问题是因为它相对简单且关注度低。因此，我可以在没有太大压力的前提下处理它。以下是评论中提供的错误描述

闹钟列表的布局需要调整，以便用户能够知道除了 4 个之外还有更多闹钟。

让我们看看时钟应用程序并添加一些闹钟来了解问题所在。

上面的屏幕截图中有多于四个闹钟，但在开始滚动之前，无法直观地知道这一点，这就是问题所在。该错误没有提供有关如何解决问题的说明。我和另一位 Mozilla 用户一起讨论了一些解决此问题的方法，并决定在顶部和底部边缘使用渐变来指示更多内容的存在。我之前在其他应用程序中见过这种类型的交互，并且效果很好。

建议的解决方案

我说建议的解决方案，因为我尚不知道我正在实施的内容是否可以接受和合适。但是，实施建议的解决方案并让人们尝试它要比追踪所有相关方并说服他们您有一个好主意来解决 UX 问题容易得多。即使此解决方案没有被接受，PR 也（希望）会促进关于什么最有效的一些讨论。无论如何，为了解决此问题，我建议向闹钟列表的顶部和底部添加两个视觉元素。我们将使用这些元素向用户提供视觉线索，表明该方向上有更多内容。接下来，我们将打开 Firefox 浏览器中 Gaia 内的时钟应用程序以检查它并弄清楚它由什么组成。

在 Firefox 中运行 Gaia

Firefox 开发工具日新月异（或 每晚），我真的很喜欢其中的一些新功能。我很高兴地了解到我可以在 Firefox 中调试 Firefox OS 应用程序。

目前我知道四种不同的运行 Firefox OS 应用程序的方法

• Firefox OS 模拟器
• 实际设备，例如 Keon、Peak 等。
• B2G 桌面构建
• 桌面上的 Firefox 浏览器

每种方法都有其自身的优缺点。目前，使用 Firefox 浏览器是修改 CSS、检查元素和逐步执行 javascript 代码的最佳方法。我知道正在努力将远程调试引入模拟器，希望很快就会可用。在此之前，使用 Firefox 打开 Gaia 桌面配置文件是次佳选择。使用此方法有两个重要的缺点。首先，我们无法访问许多电话 API，例如方向传感器或通知。其次，我们使用 Firefox 的最新版本来获得最佳的开发者工具，但结果我们将使用与 Firefox OS 使用的不同的 Gecko 版本，在某些情况下可能不兼容。也就是说，只要我们可以使用开发者工具编写补丁，然后在物理设备上测试应用程序，我们就可以确定修复程序是兼容的。

无论您选择哪种方法来运行 Gaia 应用程序，您都需要构建 Gaia 并生成合适的配置文件。默认情况下，make 命令会为物理手机生成一个配置文件目录。我想开始在浏览器中检查时钟应用程序，所以我使用 DEBUG=1 选项来生成适合桌面的 Gaia 配置文件。默认情况下，DEBUG 配置文件将在 gaia/profile-debug 文件夹中创建。几分钟后，make 将完成，终端的最后一行将显示类似以下内容

<pre lang="bash">
配置文件已准备就绪：请运行 [b2g|firefox] -profile /home/user_name/Projects/gaia/profile-debug
</pre>

在我的系统上，Firefox nightly 安装在 /usr/bin/firefox-trunk 中，因此我将运行以下命令以在浏览器中运行 Gaia

<pre lang="bash">
/usr/bin/firefox-trunk -profile /home/user_name/Projects/gaia/profile-debug http://clock.gaiamobile.org:8080
</pre>

最后一个参数 http://clock.gaiamobile.org:8080 是可选的，用于指定要运行的应用程序的名称。您可以指定 Gaia 中包含的任何已认证应用程序的名称，或添加到 Gaia 中的“apps”文件夹中的任何其他应用程序，而不是“clock”。有关如何执行此操作的更多信息，请查看 在 Firefox 中使用 Gaia。

进行我的更改

在继续之前，让我们先完成一个非常重要的第一步——为修复创建并检出分支。

<pre lang="bash">
gaia$ git checkout -b bug-873574-alarm-scroll
</pre>

现在是时候在 Firefox nightly 中打开时钟应用程序了。我立即开始检查应用程序中的元素并查看它们的样式。由于我对正在寻找的视觉效果类型有一个大致的想法，因此我开始在浏览器中直接使用 CSS 进行试验。我使用了两个带有渐变背景的伪元素，一个用于闹钟列表的顶部，另一个用于底部。以下是在我尝试正确放置伪元素时的快照。

以下是我最终用于在闹钟列表顶部创建渐变的 CSS。底部渐变的代码几乎相同，只是它使用了 after 伪元素和略微不同的边距。

<pre lang="CSS">
#alarms:before {
content: '';
pointer-events: none;
background: none;
position: fixed;
width: 100%;
margin-left: -1.5em;
z-index: 10;
height: 6em;
margin-left: -1.5em;
}

#alarms.scroll-up:before {
background: -moz-linear-gradient(bottom, rgba(16, 17, 17, 0) 0%, rgba(16, 17, 17, 1) 100%);
background: linear-gradient(to top, rgba(16, 17, 17, 0) 0%, rgba(16, 17, 17, 1) 100%);
}
</pre>

接下来，我开始研究时钟应用程序背后的 Javascript 代码。Gaia 应用程序目前使用裸机方法编写，不使用任何大型库或框架。这是一个有趣的讨论话题，我希望能看到一篇探讨这种方法的优缺点的文章。作为一名前端开发人员，它目前还没有让我太担心。现在说还为时过早，我必须继续查看代码，并希望能够识别一些常见的编程模式，并弄清楚抽象是如何实现的。

现在视觉元素已创建，我只需要添加一个函数来根据需要切换闹钟列表元素上的 CSS 类。我将此函数连接到滚动事件，因此每次用户滚动时，它都会重新评估指示器的需求。它还需要在向列表中添加或删除闹钟时运行。您可以在 PR 提交中 查看函数是如何连接的。

<pre lang="javascript">
showHideScrollIndicators: function al_showHideScrollIndicators() {
var threshold = 10; // 当滚动足够接近末尾时隐藏指示器
var element = this.alarms;

if (element.scrollTop > element.scrollTopMax - threshold) {
element.classList.remove('scroll-down');
} else {
element.classList.add('scroll-down');
}
},
</pre>

这是一个示例屏幕截图，显示列表底部微妙的渐变。

验证 Javascript

由于我进行了一些 Javascript 更改，因此我想使用 lint 验证它。Gaia 中的 lint 脚本目前依赖于 google closure lint 实现。为了在基于 Debian 的系统上安装它，我们需要 easy install，它捆绑在 python setup tools 中。之后，我们可以按照 这些说明 安装 gjslint。

<pre lang="bash">
$ sudo apt-get install python-setuptools
$ cd /tmp
/tmp$ sudo easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz
</pre>

安装 gjslint 后，您就可以开始了。就在最近， 一个预提交钩子 已添加到项目中，以便在每次提交之前，它都会根据 gjslint 检查您已更改的文件。如果有任何错误，它会将它们指出来并停止提交。

预览更改

您可以在提交之前以及在提交补丁之前预览您的更改，以确保您没有提交任何意外更改。我喜欢使用一个名为 gitg 的基于 gtk 的小应用程序来在漂亮的交互式 GUI 中快速预览我的更改。只需从 gaia 根目录的命令行中键入 gitg。查看更改的更简单方法是使用 git diff 命令。

提交 PR

对提交感到满意后，您需要将它们推送到您自己的 fork，以便您可以发出拉取请求。除非这是您对 PR 的第一个单次提交，否则您需要通过运行以下命令将它们压缩为一个

<pre lang="bash">
gaia$ git rebase -i master
</pre>

这将带您进入交互式变基并允许您指定新的提交消息。为提交提供适当的消息，例如“Bug 873574 提出的修复程序 r=person_to_review”。需要注意的是，当您更新 PR 时，您可以完全更新提交消息。使用变基将您的 PR 保留为一个提交，以便审查者能够清晰地了解。保持提交消息简短且相关。提交消息应包含错误编号以及您为修复它所做工作的简要说明。变基完成后，我们可以将更改推送到我们的远程分支。第一次使用该分支向上游 gaia 发送拉取请求。同一分支稍后用于向 PR 发送后续更新。

<pre lang="bash">
gaia$ git push origin bug-873574-alarm-scroll -f
</pre>

请求审查

请求审查 gaia 补丁的主要渠道似乎是 bugzilla 问题。Git 与 bugzilla 的集成并不顺畅，链接到 PR 涉及一些手动流程。据我了解，惯例是将一个包含指向您的拉取请求的链接的小 html 文件附加到错误报告中。确保选择文件类型为 text/html。以下是我根据在其他错误报告中看到的示例所使用的内容

<pre lang="xml">
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="refresh" content="1;https://github.com/mozilla-b2g/gaia/pull/10336/">
<title>Bugzilla 代码审查</title>
<p>重定向到 <a href="https://github.com/mozilla-b2g/gaia/pull/10336/">» github 上的拉取请求</a></p>
</pre>

我了解到您可以直接从提交消息中指定某人来审查您的 PR，但我不知道它是否真的在使用。作为一名对项目完全陌生的新人，很难猜测谁是合适的审查人。一种查找方法是对您更改的代码区域使用 git blame，并找出最近谁在处理它。我收到的另一种建议是，从 Gaia 模块的所有者和同行 中选择某人。当您附加上述 html 文件时，您有机会在审查标签中输入该人的姓名，请务必利用它。

我提交了我的 第一个 PR 到 Gaia。太棒了！ :)

更新 PR

是的，它并不完美;)。很有可能，你也会收到一个请求，要求你更新你的PR并进行一些更改。PR通常是讨论修复方案的起点。我收到了一些来自UX团队的评论，要求更改淡出颜色，以及一些关于代码的其他评论。我再次检出修复该错误的分支并进行了这些更改——确保在每次更新后重新整理提交，以便PR保持一个提交。

现在我等待——耐心地

尝试为像Gaia这样非常活跃的项目做出贡献的一件事是，你可能无法始终获得快速的反馈或审查。在我提交PR时，项目中已经有近390个开放的PR。我被告知其中大部分都处于停滞状态，但我认为这仍然表明核心团队有很多东西需要处理。由于我选择的错误不是高优先级，因此修复很可能不会进入下一个版本，但希望在v1发布后会被合并。Gaia仍然是一个年轻的项目，加入并做出贡献是一个非常激动人心的时刻。

谢谢

在#gaia irc频道和温哥华的本地Mozilla社区中，有几个人帮助我完成了各种步骤。我特别要感谢James Burke，他指导我使用最新版本的B2G刷机我的手机，并给了我很多关于使用Gaia和JavaScript开发的宝贵建议。

结束语

作为一名对为Firefox OS平台开发应用非常感兴趣的前端开发人员，我想学习开发外观精美且性能良好的应用的秘诀和成功模式。教程、指南和文档非常有用，但如果我可以直接从源代码——Gaia项目中获得我想要的东西，我为什么要去看它们呢？如果你还没有尝试过，我鼓励你试一试，看看你是否可以在学习一些很酷的技巧和窍门的同时有所作为。我期待着您的意见和建议。