Firefox frontend tools discussion follow-up

Jared Wein jaws at
Fri Dec 9 21:26:58 UTC 2016

We just completed our Firefox frontend tools discussion. Below are the
notes from the meeting.

Action Items:

   - johann will look deeper at mozscreenshots to see what we can do to use
   it better (details below)
   - jaws will try to write some automated tests for SVG best practices and
   making sure PNGs are optimized
   - gijs will try to look in to removing #includes

Thanks to all those that attended! Please reply to this email with any
other thoughts you may have.



Tools in use:

   - eslint
      - DevTools page for configuring editors
   - Inspector/Browser Toolbox
   - mozscreenshots
   - sinon (stubbing/mocking/fake http server) in tests, sandboxing
   mechanism, changing system clock time for the content (not whole browser)
   - automated tests that are checking for:
      - browser_parsable_css.js
      - browser_parsable_script.js
      - browser_misused_characters_in_strings.js

Tools coming soon/in-progress:

   - automated eslint review comments on splinter/mozreview [smacleod]
   - verify that all the chrome files we ship are actually referenced (
   - jaws thinks mozreview-github integration is coming soon, should ask
   - XUL/SDK addons will be dead by end of 2017, no more addon-compat

Tools we could/should use:

   - csslint (might not be worth it, the rules that are offered don't match
   what we do, but we could implement new rules for things formatting etc)
      - goal here, as with some of eslint, is to make reviewing quicker
      - also see "PostCSS"
   - CSS Modules
   - use github for development?
   - make mozscreenshots better - [johann]
      - more configurations
      - easier/quicker to run
      - better frontend
      - better alert system (can currently only be used by MattN)
      - hosted on a Mozilla server/on a domain
   - SVGO
      - SVG practices
   - PNG optimization check on check-in time (lint job or MozReview check)
      - Less of a problem if we move all assets to SVGs.
   - add an automated test or lint job to make sure that all PNGs are
   crushed [jaws]
   - add an automated test or lint job to make sure that SVGs match the
   guidelines [jaws]
   - Static typing? Flow/Typescript/Rust (😱) - [johannh, rhelmer]
   - React
   - help separate concerns
   - supports hot loading (faster development)
   - JEST, records a snapshot when you checkin a patch, then the tests
   confirm that the snapshot stays the same in future revisions
   - CommonJS/ES Modules style modules instead of JSMs?
   - Remove #includes? [gijs]

Practices that could help speed up development:

   - An in-content page that loads all of the popups with dummy data,
   similar to Hello's "ui-showcase".
   - Doorhangers, urlbar popup, firefox menu, downloads, bookmarks popup,
   - Chrome UI auto-reloading
   - Unprivileged content pages without XUL

DevTools enhancements to help:

   - SQLite Manager in DevTools Storage tab
   - run queries and see contents would be awesome, this may already be
   possible with IndexedDB
   - IndexedDB view in DevTools storage was recently made to work for
   chrome:// pages (,
   may be worth checking again
   - Remember breakpoints, watches, and "opened" files across restarts
   - For debugger and inspector
   - "Disable popup auto hide" doesn't work for urlbar popup without extra
   - Copy all CSS diffs / export a patch with CSS changes
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>

More information about the firefox-dev mailing list