GSoC 2017 - Working with the CSS Grid Inspector (Phase 1)

Just over a week ago, Google Summer of Code’s working period began. I’ve been making a number of contributions to Firefox Developer Tools’ CSS Grid Inspector for the past two weeks, most of which have been officially landed into the inbound branch of Firefox Nightly.

The first set of contributions have been fine-tuning the UI for the CSS Grid Inspector. This includes:

  • Changing the CSS Grid highlights for grid cells and areas to be consistent with the current grid colour. Initially, highlight colours were only violet.
  • Explicitly identifying the row and column numbers in the grid cell infobars. It wasn’t obvious that 1/2 meant Row 1 / Column 2. This contribution was to display the latter.
  • Handling extreme use cases of the grid outline tool. There are cases where a grid may be 1000 x 1000 grid cells or even 1 x 1000 grids cells, currently we are resolving to only display the outline tool if the grid outline can effectively fit inside the layout panel. Otherwise, we are displaying a message indicating it is not possible to display an outline for such a grid.

Finally, another of these contributions included implementing an overlay for grid areas. This idea was heavily inspired from Anthony Dugois’ CSS Grid Template Builder, which allows users to easily visualize the grid areas defined in a CSS Grid. While this post isn’t meant to give a lecture on CSS Grid, I should note that a CSS grid area is a group of one or more adjacent grid items strictly bound within four grid lines, each grid line being the edge of the grid area. More importantly, a grid area provides a space in which to layout these grid items. Previously, the CSS Grid Inspector’s grid outline tool allowed us to only highlight such spaces as show below:

alt text

While this functionality is already quite useful, we could definitely make visualizing grid areas even more intuitive with grid area overlays. A grid area overlay can be added to the web page by toggling “Display grid areas”, which can be found beneath the Grid Highlighter settings:

alt text

It can be easily observed that each grid cell contains the name of the grid area it belongs to. By explicitly showing these area names, developers and designers can immediately understand the layout of the grid area being highlighted. It even responds to the user changing the current zoom on the web page. The grid area text will reposition itself accordingly as the grid cells are re-organized across the page. The grid outline tool will also redraw itself to match the current layout of the CSS Grid.

The most interesting part of this bug was that I got to work more with the CSS Grid highlighter code. This is the part of the CSS Grid Inspector tool that allows the highlighting of any nodes on the web page. For the grid area overlays, or any grid highlight for that matter, HTML <canvas > is used to to do the highlighting. In the case of grid area overlays, my task was to draw grid line edges to emphasize the boundaries of the grid area and to draw the text for the grid area name for each cell belonging to that area. The implementation was mostly straightforward.

My mentor and I ran into issues with the positioning of the area name text for each grid cell. The text would be completely offset on my mentor’s development machine, while everything appeared fine on my own. It turns out the issue was my implementation at the time did not account for the pixel ratio of the display. So the positioning of the text would look vastly different on retina displays. Luckily, there were existing methods that handled finding the pixel ratio. It was just a matter of drawing the text and grid lines using those values. Other than that, we were able to get the grid area overlay feature landed without any issues.

The grid area overlay is only one of the many exciting features the CSS Grid Inspector offers. Additionally, developers and designers can also toggle displaying line numbers as well as extending grid lines for easier visualization of a CSS grid. For more information on the development of the grid area overlay feature, you can checkout the bug here. By extension, you will only be able to check out these exciting new features by building the latest version of Firefox Nightly.

Overall, my experience with GSoC so far has been very productive and I’ve been enjoying the tasks I’ve been taking on. I am rather fortunate I was able to land as many bugs as I did if not for my previous involvement with UCOSP and the constant guidance from my mentor, @gabrielluong, who has always been very timely with code reviews and responding to my questions. Moving forward, we will be planning even more features to add to the CSS Grid Inspector as well as fixing any outstanding bugs.

Written on June 11, 2017