Firefox Home (New Tab)

All files related to Firefox Home, which includes content that appears on about:home, about:newtab, and about:welcome, can be found in the browser/components/newtab directory. Some of these source files (such as .js, .jsx, and .sass) require an additional build step. We are working on migrating this to work with mach, but in the meantime, please follow the following steps if you need to make changes in this directory:

For .jsm files

No build step is necessary. Use mach and run mochitests according to your regular Firefox workflow.

For .js, .jsx, .sass, or .css files

Prerequisites

You will need the following:

  • Node.js 10+ (On Mac, the best way to install Node.js is to use the install link on the Node.js homepage)

  • npm (packaged with Node.js)

To install dependencies, run the following from the root of the mozilla-central repository (or cd into browser/components/newtab to omit the –prefix in any of these commands):

npm install --prefix browser/components/newtab

Which files should you edit?

You should not make changes to .js or .css files in browser/components/newtab/css or browser/components/newtab/data directory. Instead, you should edit the .jsx, .js, and .sass files in browser/components/newtab/content-src directory.

Building assets and running Firefox

To build assets and run Firefox, run the following from the root of the mozilla-central repository:

npm run bundle --prefix browser/components/newtab && ./mach build && ./mach run

Continuous development / debugging

Running npm run watchmc will start a process that watches files in activity-stream and rebuilds the bundled files when JS or CSS files change.

IMPORTANT NOTE: This task will add inline source maps to help with debugging, which changes the memory footprint. Do not use the watchmc task for profiling or performance testing!

Running tests

The majority of New Tab / Messaging unit tests are written using mocha, and other errors that may show up there are SCSS issues flagged by sasslint. These things are all run using npm test under the newtab slug in Treeherder/Try, so if that slug turns red, these tests are what is failing. To execute them, do this:

cd browser/components/newtab
npm test

These tests are not currently run by mach test, but there’s a task filed to fix that.

Mochitests and xpcshell tests run normally, using mach test.

Code Coverage

Our testing setup will run code coverage tools in addition to just the unit tests. It will error out if the code coverage metrics don’t meet certain thresholds.

If you see any missing test coverage, you can inspect the coverage report by running

npm test && npm run debugcoverage