Git Product home page Git Product logo

firefoxcolor's Introduction

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:

  • For Linux & OS X: PORT=9090 npm start
  • For Windows: .\node_modules\.bin\cross-env PORT=9090 npm start

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:

  • PORT - (default: 8080) Port at which the webpack dev server will start up
  • NODE_ENV - (default: production) setting to development will enable some features for development work
  • SITE_URL - (default: http://localhost:8080) the URL where the web app is hosted
  • SITE_ID - (default: empty string) the ID of the site for the extension - e.g. "", "local", "stage", "dev"
  • DOWNLOAD_FIREFOX_UTM_SOURCE - host name used in metrics when the button to download Firefox is clicked
  • LOADER_DELAY_PERIOD - (default: 2000) delay in ms used for web site loader, can be set to 0 during development to make the site appear faster but with visual glitches

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:

  • Run gen-environment.sh to define the SITE_URL and ADDON_URL applicable to the current branch.

  • Run code linter

  • Build the site for the current branch

  • Build the add-ons for all build targets (development, stage, release).

  • Run tests on the current branch.

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.

  • firefox-color-dev-unsigned.xpi - test with Development (testing only).
  • firefox-color-stage-unsigned.xpi - test with Stage (testing only).
  • firefox-color-unsigned.xpi - test with Production (release candidate).

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:

  • Coming from AMO

    • The user clicks on the "Install" button and after granting permissions, a new tab opens to the addon's home page.
  • Coming from the addon's home page: The user can click on the "Get Firefox Color" button which will direct the user to a page from where the add-on can be installed, usually AMO.

Notes

firefoxcolor's People

Contributors

andreicristianpetcu avatar aniketkudale avatar cedricium avatar clouserw avatar colibie avatar csd713 avatar devilsahil avatar greenkeeper[bot] avatar jaredhirsch avatar jbuck avatar johngruen avatar khushilmistry avatar leankhan avatar lmorchard avatar martinthomson avatar mgillespy avatar mozilla-github-standards avatar pdehaan avatar r-ba avatar ranjithrajv avatar rebmullin avatar renancleyson-dev avatar ritikavnair avatar rob--w avatar rpl avatar saffafatima12 avatar shr7 avatar shruti9520 avatar sorin-davidoi avatar toufali avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

firefoxcolor's Issues

Backend Security Checklist

Risk Management

  • The service must have performed a Rapid Risk Assessment and have a Risk Record bug
  • Public staging and production endpoints must be added to the security baseline

Infrastructure (for ops)

  • Access and application logs must be archived for a minimum of 90 days
  • Use Modern or Intermediate TLS
  • Set HSTS to 31536000 (1 year)
    • strict-transport-security: max-age=31536000
  • Set HPKP to 5184000 (60 days)
    • Public-Key-Pins: max-age=5184000; pin-sha256="WoiWRyIOVNa9ihaBciRSC7XHjliYS9VwUGOIud4PB18="; pin-sha256="r/mIkG3eEpVdm+u/ko/cwxzOMo1bk4TyHIlByibiA5E="; pin-sha256="YLh1dUR9y6Kja30RrAn7JKnbQG/uEtLMkBgFF2Fuihg="; pin-sha256="sRHdihwgkaib1P1gxX8HFszlD+7/gTfNvuAybgLPNis=";
      • Start with max-age set to 5 minutes (max-age=300) and increase progressively
      • The first two pins are for Digicert EV and DV roots, the last two are for Let's Encrypt X3 and X4 intermediates (LE is only used for backup)
    • If the service is not hosted under services.mozilla.com, it must be manually added to Firefox's preloaded pins.
  • If service has an admin panels, it must:
    • [x] only be available behind Mozilla VPN (which provides MFA)
    • [x] require Auth0 authentication

Development

  • Sign all release tags, and ideally commits as well
    • Developers should configure git to sign all tags and upload their PGP fingerprint to https://login.mozilla.com
    • The signature verification will eventually become a requirement to shipping a release to staging & prod: the tag being deployed in the pipeline must have a matching tag in git signed by a project owner. This control is designed to reduce the risk of a 3rd party GitHub integration from compromising our source code.
  • Keep 3rd-party libraries up to date
  • Integrate static code analysis in CI, and avoid merging code with issues
    • Javascript applications should use ESLint with the Mozilla ruleset
    • Python applications should use Bandit
    • Go applications should use the Go Meta Linter
    • Use whitelisting mechanisms in these tools to deal with false positives

Dual Sign Off

  • Services that push data to Firefox clients must require a dual sign off on every change, implemented in their admin panels
    • This mechanism must be reviewed and approved by the Firefox Operations Security team before being enabled in production

Logging

  • Publish detailed logs in mozlog format (APP-MOZLOG)
    • Business logic must be logged with app specific codes (see FxA)
    • Access control failures must be logged at WARN level

Security Headers

  • Must have a CSP with
    • a report-uri pointing to the service's own /__cspreport__ endpoint
    • web API responses should return default-src 'none'; frame-ancestors 'none'; base-uri 'none'; report-uri /__cspreport__ to disallowing all content rendering, framing, and report violations
    • if default-src is not none, frame-src, and object-src should be none or only allow specific origins
    • no use of unsafe-inline or unsafe-eval in script-src, style-src, and img-src
  • Web APIs must set a non-HTML content-type on all responses, including 300s, 400s and 500s
  • Set the Secure and HTTPOnly flags on Cookies, and use sensible Expiration
  • Make sure your application gets an A+ on the Mozilla Observatory
  • Verify your application doesn't have any failures on the Security Baseline.
    • Contact secops@ or ping 'psiinon' on github to document exceptions to the baseline, mark csrf exempt forms, etc.
  • Web APIs should export an OpenAPI (Swagger) to facilitate automated vulnerability tests

Security Features

  • Authentication of end-users should be via FxA. Authentication of Mozillians should be via Auth0/SSO. Any exceptions must be approved by the security team.
  • Session Management should be via existing and well regarded frameworks. In all cases you should contact the security team for a design and implementation review
    • Store session keys server side (typically in a db) so that they can be revoked immediately.
    • Session keys must be changed on login to prevent session fixation attacks.
    • Session cookies must have HttpOnly and Secure flags set.
    • For more information about potential pitfalls see the OWASP Session Management Cheet Sheet
  • Access Control should be via existing and well regarded frameworks. If you really do need to roll your own then contact the security team for a design and implementation review.

Databases

  • All SQL queries must be parameterized, not concatenated
  • Applications must use accounts with limited GRANTS when connecting to databases
    • In particular, applications must not use admin or owner accounts, to decrease the impact of a sql injection vulnerability.

Common issues

  • User data must be escaped for the right context prior to reflecting it
    • When inserting user generated html into an html context:
      • Python applications should use Bleach
      • Javascript applications should use DOMPurify
  • Apply sensible limits to user inputs, see input validation
    • POST body size should be small (<500kB) unless explicitely needed
  • When managing permissions, make sure access controls are enforced server-side
  • If handling cryptographic keys, must have a mechanism to handle quarterly key rotations
    • Keys used to sign sessions don't need a rotation mechanism if destroying all sessions is acceptable in case of emergency.
  • Do not proxy requests from users without strong limitations and filtering (see Pocket UserData vulnerability). Don't proxy requests to link local, loopback, or private networks or DNS that resolves to addresses in those ranges (i.e. 169.254.0.0/16, 127.0.0.0/8, 10.0.0.0/8, 100.64.0.0/10, 172.16.0.0/12, 192.168.0.0/16, 198.18.0.0/15).

Make a loader component

Let's make the page look pretty from the jump by having a cool loader component until we can determine if the user has the add-on available.

Audit dependencies

Just a quick check. I think everything looks OK to my aging eyes, but worth a second look with somebody that has more than 20 minutes of experience with this repo:

$ npx depcheck

Unused dependencies
* json-url

Unused devDependencies
* babel-core
* babel-loader
* babel-plugin-transform-object-rest-spread
* babel-preset-env
* babel-preset-node8
* babel-preset-react
* clean-webpack-plugin
* css-loader
* eclint
* ejs
* eslint-config-airbnb-base
* eslint-plugin-import
* eslint-plugin-react
* image-webpack-loader
* node-sass
* sass-loader
* style-loader
* svg-url-loader
* url-loader

json-url felt fishy, but looks like we're manually copying the file from ./node_modules/ into a /vendor/ directory (which is cool).

Babel and ESLint and *-loader results are always fishy, based on how they are loaded by their respective tools.

So I think maybe the only one that strikes me was eclint. I didn't see any errors when running npx eclint . locally, so I'm guessing there were no editorconfig errors. Not sure if we want to create some npm task which calls eclint or not. We could potentially extend npm run lint to run ESLint and eclint (and some Sass linter if we feel under-linted).

blah blah blah


$ npx depcheck --ignores=*-loader,eslint-*,babel-*

Unused dependencies
* json-url

Unused devDependencies
* clean-webpack-plugin
* ejs
* node-sass

Color chips resize slightly when selecting item

I made a pretty rad rainbow theme but noticed that when I select an item to customize, the text grow comically large (FF Nightly), causing the text to wrap and sometimes the circular color chip will squish (see Yellow, Green, Blue, and Purple chips).

themesrnifty

Add jsx-a11y ESLint rules?

I randomly tried adding the eslint-plugin-jsx-a11y plugin to our ESLint config, extended the "plugin:jsx-a11y/recommended" rules and it returned 18 errors. Not sure if we want to take a look and possibly add it to our config:

$ npm run lint

> [email protected] lint /Users/pdehaan/dev/github/mozilla/ThemesRFun
> eslint --color .

/Users/pdehaan/dev/github/mozilla/ThemesRFun/src/web/lib/components/BrowserPreview/index.js
   33:5   error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
   33:5   error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions
   41:5   error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
   41:5   error  Non-interactive elements should not be assigned mouse or keyboard event listeners               jsx-a11y/no-noninteractive-element-interactions
   49:7   error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
   49:7   error  Non-interactive elements should not be assigned mouse or keyboard event listeners               jsx-a11y/no-noninteractive-element-interactions
   67:7   error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
   67:7   error  Non-interactive elements should not be assigned mouse or keyboard event listeners               jsx-a11y/no-noninteractive-element-interactions
   79:7   error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
   79:7   error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions
   89:9   error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
   89:9   error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions
  102:11  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  102:11  error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions

/Users/pdehaan/dev/github/mozilla/ThemesRFun/src/web/lib/components/ThemeBackgroundPicker/index.js
  14:5  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  14:5  error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions

/Users/pdehaan/dev/github/mozilla/ThemesRFun/src/web/lib/components/ThemeColorsEditor/index.js
  25:15  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  25:15  error  Non-interactive elements should not be assigned mouse or keyboard event listeners               jsx-a11y/no-noninteractive-element-interactions

✖ 18 problems (18 errors, 0 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lint: `eslint --color .`
npm ERR! Exit status 1
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
index 2b0df99..c4a961b 100644
--- a/.eslintrc.yaml
+++ b/.eslintrc.yaml
@@ -5,13 +5,18 @@ env:
   webextensions: true

 extends:
-- eslint:recommended
-- airbnb-base
-- plugin:react/recommended
+  - eslint:recommended
+  - airbnb-base
+  - plugin:react/recommended
+  - plugin:jsx-a11y/recommended

 parserOptions:
   ecmaVersion: 6

+plugins:
+  - jsx-a11y
+  - react
+
 root: true

And on that note, not sure if we want to drop the airbnb-base rules in favor of the plugin:mozilla/recommended rules or not.

env:
  browser: true
  es6: true
  node: true
  webextensions: true

extends:
  - eslint:recommended
  - plugin:jsx-a11y/recommended
  - plugin:mozilla/recommended
  - plugin:react/recommended

parserOptions:
  ecmaVersion: 6
  sourceType: module

plugins:
  - jsx-a11y
  - mozilla
  - react

root: true

rules:
  import/no-named-as-default: off
  import/prefer-default-export: off
  react/prop-types: off

  quotes: [error, single]

Add link to feedback survey

Survey link should only appear when the user has TRF installed
Survey link should have the following params:

ver=${addon-ver} and ref=app

Use cross-env for Windows goodness?

Not sure if we need to use something like cross-env for cross-OS greatness when passing ENV vars via the CLI. Some potential edges are:

$ cat package.json | jq '. | {scripts}' | grep "="
  1. "server": "NODE_ENV=development webpack-dev-server --config webpack.web.js",

  2. "watch:web": "NODE_ENV=development webpack --watch --progress --colors --config webpack.web.js",

  3. "watch:extension": "NODE_ENV=development webpack --watch --progress --colors --config webpack.extension.js",

  4. "build:web": "NODE_ENV=production webpack -p --config webpack.web.js",

  5. "build:extension": "NODE_ENV=production webpack -p --config webpack.extension.js",

  6. "package": "npm run clean:extension && npm run build:extension && web-ext build --overwrite-dest --source-dir=build/extension && mv web-ext-artifacts/*.zip ./addon.xpi",

  7. "sign": "npm run clean:extension && npm run build:extension && web-ext sign --source-dir=build/extension && mv web-ext-artifacts/*.xpi ./addon.xpi",

  8. "run": "npm run build:extension && web-ext run --source-dir=build/extension",

  9. "release:dev": "ADDON_URL='https://lmorchard.github.io/ThemesRFun/addon.xpi' SITE_URL='https://lmorchard.github.io/ThemesRFun/' npm run release:base"

Add twitter/opengraph headers?

Not sure if these came up in the a11y linting bug results from sonarwhal or lighthouse tools in #47 (comment) (or anywhere else), but...

Do we want to add Twitter and OpenGraph meta tags for improved sharing greatness?

<head>
  <meta charset="utf-8">
  <title>Firefox Theme Generator</title>
  <link rel="icon" type="image/svg+xml" href="images/icon.svg">
  <link href="index.css" rel="stylesheet">
  <script type="text/javascript" charset="utf-8" async="" src="https://mozilla.github.io/ThemesRFun/vendor/json-url-msgpack.js"></script>
  <script type="text/javascript" charset="utf-8" async="" src="https://mozilla.github.io/ThemesRFun/vendor/json-url-lzma.js"></script>
  <script type="text/javascript" charset="utf-8" async="" src="https://mozilla.github.io/ThemesRFun/vendor/json-url-safe64.js"></script>
</head>

Consider adding new theme properties to editor

From These Weeks in Firefox: Issue 32 :

The WebExtension theme API now supports specifying colors for frame_inactive, tab_loading, icons and icons_attention, button_background, button_background_hover and button_background_active, toolbar_field_separator.

Need to play with these and see exactly what they do, filing this issue to not forget about it.

Finalize TRF Icon

We need an add-on icon at both 32 x 32px SVG and a 192 x 192 white PNG (for the Test Pilot Site)

Generate /__version__ resource on deployment

We should have a /__version__ resource like Test Pilot that gets generated on deployment. Properties something like this:

{
  "commit": "3cfbd582b52caaf0b4c032d15b5d886a7827ec31",
  "version": "2018-02-06",
  "source": "https://github.com/mozilla/ThemesRFun"
}

Add the capability to select from pre-determined themes

As a user, i would like to select from complete example themes.

This feature is laid out in the spec as 'Popular' themes, but should actually just be a set of complete theme declarations we provide.

This page shows the picker UI: https://mozilla.github.io/testpilot-assets/ThemesRFun/01_Measurements/ThemesRFun/#artboard5

This page shows the hover state: https://mozilla.github.io/testpilot-assets/ThemesRFun/01_Measurements/ThemesRFun/#artboard4

This page shows the selected state: https://mozilla.github.io/testpilot-assets/ThemesRFun/01_Measurements/ThemesRFun/#artboard3

Add doco for app state flows?

I added this as a comment in src/web/index.js in #59. Would be good to find a better place for it.

/**
 * Some notes on the startup flow, here:
 *
 * If there's no ?theme param, just ask for a current theme from the add-on. If
 * the add-on is not installed, this does nothing.
 *
 * If there is a ?theme param, that's considered a theme shared with the user.
 * The shared theme is stored as "pending" and also loaded up into the editor.
 * The add-on is then also asked for a current theme.
 *
 * If the add-on never responds with a current theme, the shared theme just
 * appears in the editor.
 *
 * If the add-on is installed and responds with a current theme, then that
 * current theme is loaded into the editor. 
 *
 * If the shared theme is not identical to the current theme, the "pending"
 * shared theme is pressented in an approval dialog with a preview (i.e.
 * SharedThemeDialog). From there, the user can apply the shared theme to
 * override the current theme or skip it and discard.
 *
 * For more details on this flow, check out src/lib/store.js - pay particular
 * attention to the logic involved in the shouldOfferPendingTheme selector.
 */

Remove copyright headers from src/images/*.svg files?

... Turns out, I was invoking eclint incorrectly, and the src/images/*.svg files are throwing some errors:

$ npx eclint check src/**

src/images/back-16.svg
    02:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)
    03:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)

src/images/bookmark-16.svg
    02:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)
    03:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)

src/images/close-16.svg
    02:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)
    03:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)

src/images/forward-16.svg
    02:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)
    03:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)

src/images/home-16.svg
    02:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)
    03:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)

src/images/info-16.svg
    02:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)
    03:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)

src/images/menu-16.svg
    02:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)
    03:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)

src/images/more-16.svg
    02:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)
    03:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)

src/images/refresh-16.svg
    02:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)
    03:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)

src/images/sidebar-16.svg
    02:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)
    03:01 ❌️ invalid indent size: 3, expected: 4 (EditorConfig indent_size https://goo.gl/QtGB8R)

Here's a random .SVG file, with the 3 space indented copyright header:

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path d="M15 7H3.414l4.293-4.293a1 1 0 0 0-1.414-1.414l-6 6a1 1 0 0 0 0 1.414l6 6a1 1 0 0 0 1.414-1.414L3.414 9H15a1 1 0 0 0 0-2z"></path>
</svg>

Not sure if we need the copyright headers, or if we just run the whole mess through SVGO and strip the comments.

Theme data validation / ensure good default

Still kind of baffled by how the theme data ended up being bad from chuck's screengrab. Did a quick patch that seemed to fix the error, but I think the error was unrelated to that PR and symptomatic of a larger issue.

And I think that larger issue is that there's nothing to validate incoming theme JSON data or swap in a known good default if that data is bad. Should fix that with a graceful fallback

2018-02-06 08_06_44

Continuous deployment to gh-pages from master?

In #7, I got auto-deployment to gh-pages working from the development branch - not master. That means any deploy to dev has to go through that branch first. This differs from Test Pilot proper.

Apropos of that difference, it might be nice to make every merge to master get deployed.

This is practically blocked by #21 - since there will be an error in add-on signing during deployment unless the add-on version is changed on every commit.

Add Travis-CI or Circle-CI

We should probably hook up Circle-CI (or Travis-CI) so that we can run [at a minimum] ESLint and maybe build the extension on each PR so we know everything is kosher.

❤️

Implement undo / redo in theme editing

From acceptance criteria:

  • It should let users undo or redo the changes they've made in an editing session.

This currently works with browser back & forward navigation. We should be able to hook the same thing up to buttons on the page by maintaining a stack of previous state.

Footer issues

  • There's some kind of weird flickering thing happening with the links
  • The GH/Twit links don't seem to be clickable
  • The footer should always be at the bottom of the window

Add auto-deployment to gh-pages for dev?

Could use CircleCI to auto-deploy to gh-pages with some credentials in env vars and a tweak to add the git hash to add-on version number when running npm run release:dev.

Also might be worth creating a development branch, so auto-deploy happens from there rather than master

Add margin for error in theme comparison

As discovered in #69, our theme equality checks can fall prey to tricky floating point math precision problems. Could we add some margin for error in that? Two ideas:

  1. Flooring each number before comparison.
  2. Instead of oldTheme.propertyName === newTheme.propertyName, use something like Math.abs(oldTheme.propertyName - newTheme.propertyName) < 2 to provide a bit of margin for error?

Audit a11y requirements

From acceptance criteria:

  • All buttons and links should have visible focus states
  • All buttons and links should be accessible via keyed entry (tab selection)
  • All form elements should include appropriate label attributes
  • All grouped buttons should be nested in a and described with a legend
  • All UI should be verified to use A11y friendly contrast ratios

Filing this issue as a checklist item for near the end, though it should be an aspect we mind all along the way

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.