Firefox’s code coverage diff viewer

Few months ago I decided to become a frontend developer and this is my first product: Firefox code coverage diff viewer.

The Firefox code coverage diff viewer allows determining code coverage changes for added lines per changeset.

The main purpose of this tool is to determine if Release Management can use code coverage data to help them make risk analysis about individual changesets.

marco has been working on collecting the code coverage data from Mozilla’s continuos integration and developed the backend this app uses.

The main view shows you changesets from the last ten pushes on mozilla-central that: 1) have coverage data and 2) are not merges or backouts.

The code coverage diff viewer only show coverage status for added lines

From there you can navigate to individual changesets. The diff viewer will only highlight added lines as having coverage or no coverage. There are also some added lines that will not have highlighting since it is non-code added lines.

Brief technical details

The app is using React written with JSX and ES8

The app is auto deployed to Heroku

The app’s state is normalized in case we wanted to use Redux

The app got promoted to beta this week and development on it will stop for this quarter. When this tool becomes clearly essential for Release Management we can reinvest on it.

It’s been a great experience working on this product with marco, ekyle and jmaher. Thank you all for your input.