GSoC 2017 - Wrapping up Phase 1

First evaluation period is now wrapping up! I’ve been planning and working on a new set of features since my last post and while only one of them has been landed it has still been a very busy past two weeks. But before I get into the details of what I’ve been doing last, I wanted to mention that the contributions from my last GSoC post have been recently featured in a Mozilla hack post written by my mentor! It’s definitely encouraging to see the contributions I’ve been making in action, especially since my current tasks have been a little more challenging and its tempting to slip into the Imposter Syndrome’s mindset sometimes. That said, make sure to check it out, it will give you an idea of what the CSS Grid Inspector is capable of if you didn’t already know!

Now let’s move onto what I’ve been working on for the past two weeks:

  • Bug 1356474 Unit tests for the Grid Outline component.
  • Bug 1373134 Adding a context menu for scrolling into view of a grid cell via the outline tool. Alternatively:
  • Autoscrolling to a highlighted grid cell via modified keys (ctrl)
  • Bug 1369945 Making it possible to see both the Rules panel and the Layout panel at the same time. And by extension:
  • Bug 1376157 Adding a button to toggle split between Rules panel and Sidebar panel.

There was some difficulty getting the unit tests for the grid outline component landed. Certain tests would fail when the patch was pushed to the testing server, but they wouldn’t fail on my development machine. My mentor believed the issue was something to do with React component state not updating as soon as the offending test was being executed, so there would times when an element would not exist in the window document even though there should be. Regardless, the issue was resolved and the unit tests were finally landed!

My next task was to work on a context menu that would allow the user to navigate to the highlighted cell:

–insert gif–

This particular feature allows for navigating web pages for particularly long or wide grids. I also added an alternative patch where a modified key is used to navigate to the highlighted grid cell on holding the ctrl key down:

–insert gif–

I find the autoscroll to the highlighted grid cell using a modified key more natural to use. It also makes workflow on inspecting CSS grid pages effortless when it comes large grids, especially in comparison to the use of a context menu.

Speaking of frictionless workflows, I began development on splitting the Rule tool view tab into its own panel for the inspector panel. With the new addition of the layout panel, it especially makes sense to include the Rules tool in its own side-by-side panel with the rest of the sidebar so developers and designers can create CSS grid webpages with ease.

Written on June 30, 2017