GSoC 2017 - Work Submission

For this year’s Google Summer of Code program, I have been working on a project for Mozilla’s Firefox Developer Tools. My project was to implement new features for the CSS Grid Inspector tool as well as refining its existing functionality.

About the Project

The CSS Grid Inspector exists inside the Firefox Developer Tools Layout panel. It’s an intuitive interface that will aid designers and developers in building website layouts using CSS Grid, a cutting-edge layout specification supported across all major browsers. Users will be able to visualize the grids they have built and inspect them to gain further insight into a grid’s line numbers, line names, cell dimensions, and areas. Overall, the main goal of the tool is to provide comprehensive support for developing websites with CSS Grid to both beginners and veterans of web design.

alt text

Using the CSS Grid Inspector on a simple component

What I Worked On


The workflow for developing new features was generally like this:

  1. File a new bug describing the feature.
  2. Discuss with my mentor and the community on determining the requirements for such a feature. This included not only desired functionality but also design requirements.
  3. Implementation of feature.
  4. Submission to MozReview for code review.
  5. Address and implement feedback from reviews (Go back through steps 3 to 5).
  6. Once a review is granted from my mentor or another engineer from the community, the patch implementing the feature can be landed into the inbound trunk of Firefox Nightly.

Completed Features (Major)

  • Bug 1367627 - Show overlay of grid areas in Grid Highlighter.

    Users can view the bounds of grid areas and their area names by toggling the “Display area names” checkbox in the CSS Grid Inspector. I have written a blog post describing its implementation here.

  • Bug 1369942 - Display Negative Line Numbers in the CSS Grid Inspector.

    Negative line numbers can be used to indicate the span of grid rows/columns along their grid container. For example, the breadth of a grid element can span from column line 1 to column line 4. This can be specified with grid-column: 1 / 4. Similarly, it is also possible to specify this column span with grid-column: 1 / -2. The solution to displaying negative line numbers was to have negative rows on the right side of the grid and negative columns at the bottom. Discussions around how negative line numbers should be shown can be found here.

  • Bug 1380544 - Overlapping grid line numbers should display as a stack.

    A fix for a major UX issue regarding grid lines that overlap each other. The solution was to display overlapping grid number boxes as a stack to indicate two or more grid lines are overlapping. However, this patch did not include negative line number boxes, which was addressed in “Bug 1385144 - Overlapping negative line numbers do not display as a stack”. I created my own mockup for this feature to give my mentor, designers, and other engineers involved an idea of how these overlapping grid number boxes might work.

alt text

Further discussions on how stacked grid lines can be visualized can be found here.

Final Product

To view all the features mentioned above, you can download the latest version of Firefox Nightly. The GIF below is a quick demo of these features:

alt text

For an entire list of all my commits that were landed successfully in Firefox Nightly, you can check out my commit history with Mozilla’s GitHub gecko-dev repository here.

I also like to keep my patches maintained in a personal repository called firefox-devtools-patches. Here I can keep backups of my work as well as prototype implementations for features that don’t have bugs for them yet. My project also did not use an official GitHub repository to branch my work on, so firefox-devtools-patches provided a way for my mentor to check my commits on some patches.

What’s Left to Do?

As of August 28, all bugs listed below are either in-progress or still in code review:

Scrolling into view of Grid Nodes

  • Bug 1373134 - Scroll into view of a grid cell via the grid outline.

    The design for this feature is still being discussed amongst the community. There have been two approaches:

    1. Right-clicking a grid cell in the grid outline will open a context menu where we can click on a menu item that will scroll into view of the grid cell on the web page.
    2. Autoscrolling to a grid cell by hovering over a grid cell in the grid outline. This is done by toggling the “Automatically scroll to grid cell” settings option in the Layout panel, or using a modified key (holding down ctrl) and hovering over a cell. The implementation can be found here.

alt text

Displaying Grid Line Numbers

  • Bug 1383327 - Display the grid line number box shape as a directional pointer.

  • Bug 1382284 - Sticky grid line numbers for the CSS Grid Inspector.

Enchancements to Layout Panel (Misc.)

  • Bug 1369945 - Make it possible to see both the Rules panel and the Layout panel at the same time.

  • Bug 1376157 - Add a button to toggle split between Rules panel and Sidebar panel.

Moving Forward

Cutoff for landing features in the Firefox 57 release of Nightly is September 20, 2017. I plan to have Bug 1383327 and Bug 1382284 reviewed and landed for this date so that they will be available in the official release of Firefox 57 (November 2017). Fingers crossed!


Many members of the Firefox Developer Tools community have been incredibly supportive of my project. I extend my thanks to everyone involved in the process of designing, reviewing, and landing the features I worked on.

Special thanks to my mentor, Gabriel Luong, for his constant guidance these past three months. His encouragement to take to social media platforms such as Twitter has given me more confidence in my work.

Written on August 21, 2017