search

mozilla / FirefoxColor

Theming demo for Firefox Quantum and beyond
https://color.firefox.com
Mozilla Public License 2.0
456 stars 94 forks source link

readme

Firefox Color

CircleCI

Get Started

  1. Install Node 14+ (e.g., using node version manger)

  2. Clone the repo, install dependencies, start the dev environment:

    git clone https://github.com/mozilla/FirefoxColor.git
cd FirefoxColor
npm ci
npm start

    This will start a webpack-dev-server instance at port 8080 and start a watcher that will rebuild the browser extension with every file change.

  3. To activate the extension:

    1. Find the XPI for the environment:

      • Locally: npm run package which adds an addon.xpi to the root of the project

      • DEV / STAGE: Visit the dev or stage version of the website and click on "Get Firefox Color" (i.e., open testing.html) and use one of the referenced XPI files

    2. Now load the XPI (from the previous step) to the browser by one of the following ways:

      • Go to about:debugging and click on "Load Temporary Add-on..." and add the xpi

      • (or) Go to about:config and add setting xpinstall.signatures.required and set to false. Next drag and drop the XPI to the browser. Note you must use Beta, Dev or Nightly browser with this approach.

notes:

To debug the background file, go to about:debugging and click the "Inspect" button

To toggle the add-on on and off or remove, you can go to about:addons

  1. Visit http://localhost:8080 to see the web-based theme editor - changes should be relayed through the temporarily installed add-on and alter the browser theme

Note: If you have problems seeing the editor at http://localhost:8080/ on your computer, it's possible that you already have some other service using port 8080. You can change the port that Firefox Color uses for local development:

This example switches to port 9090, but you can supply a different port as needed.

Environment variables

There are a few environment variables used in building the site and extension that are handy to know about:

Build & Release

Deploying a development release consists of pushing to the development branch on this repo. Production release consists of pushing to the production branch.

Upon push, CircleCI will run the following steps, as defined in the .circleci/config.yml file:

When pushed to the development branch, npm run deploy is run to deploy the site to Github Pages. The stage and and production branches are updated by a push to an AWS S3 bucket.

The build includes unsigned xpi files for all branches. To finalize the deployment, the unsigned xpi file for the production branch should be uploaded to AMO by an AMO admin (who is allowed to upload an add-on with "Firefox" in the name).

Deployment for the development branch depends on GH_TOKEN being set with an access token from GitHub. The stage and production branches rely on AWS tokens, managed by ops. These are currently configured in CircleCI to support deployment after successful test runs.

Build, test and publish add-on

The script npm run xpi in package.json generates unsigned xpi files, which are added to build/web (and published to the root of SITE_URL by CircleCI), on all branches (development, stage, production). These XPIs can be loaded at about:debugging for manual testing.

After passing QA, the XPI can be published by manually uploading it to AMO. Every release requires a version bump, because version numbers cannot be reused.

Environment list

Environment Github Branch URL
Development development https://mozilla.github.io/FirefoxColor/
Stage stage https://color.stage.mozaws.net/
Production production https://color.firefox.com/

UI to install the addon:

Notes