Developing for Firefox Developer Tools’ CSS Grid Inspector

I completed a Google Summer of Code term with Mozilla’s Firefox Developer Tools just this summer. The project I got work on for Firefox Developer Tools was the CSS Grid Inspector. During this time, I got to collaborate with other members of the Mozilla community to extend the tool such as being able to display grid area names, writing unit tests for the component, and investigating new ways to display grid line numbers. I have a blog detailing other features I worked on that you can visit here.

Displaying grid line numbers was perhaps the most involved feature I worked on for the entirety of the summer. I had the chance to play around with new ideas proposed by my mentor and many members of the community. This feature was essentially broken down into the following challenges:

— Negative line numbers.

— Overlapping grid line numbers.

— New design for the box container of line numbers.

— Grid line numbers as sticky headers for large grids.

The implementation for all of the above required for me to work with HTML <canvas>. I especially had a lot of fun working on the new design for the box container of line numbers as I got a chance to employ some basic 2D composite transformations I learned in my Computer Graphics course earlier this year. The initial design for these new grid line box containers was proposed here.

Old design vs. new design from https://www.mozilla.org/en-US/developer/css-grid/

Drawing the bubble rectangles with canvas involved translating the container’s arrow point to origin, rotating by a specified angle value depending on the orientation of the grid line number, and then translating the bubble rectangle back to its original position:

// Save reference to canvas context first
ctx.save();
ctx.translate(originX, originY);
ctx.rotate(angle * (Math.PI / 180));
ctx.translate(-originX, -originY);
// Offset the arrow tip from the grid container line
ctx.translate(-width / 2, -height — arrowSize — margin);
// Draw bubble rectangle shape…

One of the major challenge I faced while working on displaying grid line numbers was implementing grid line numbers as sticky headers on large grids:

Experimentation with sticky grid line numbers.

The main problem with the current implementation displayed above (although it could be argued to be a rather neat effect) is the delay for the grid line numbers to scroll into view. This is mostly due to the canvas redrawing itself for each onScroll event, which is definitely not ideal. There had also been discussions on implementing a separate canvas for just grid line numbers, however this would perhaps not scale well when displaying multiple grids is implemented into the CSS Grid Inspector.

Despite the challenges, the final working product for the CSS Grid Inspector turned out great. I am especially humbled by the fact I got to collaborate with incredible talent in the Mozilla community!

I highly encourage anyone who is interested in contributing to open-source software, whether you are starting out or are already experienced, to checkout the community at Firefox Developer Tools!

To view my final work submission for this year’s Google Summer of Code, please visit here. If you have any queries related to this project you can comment below.