One of my contributions to mozilla firefox devtools

updating a CSS property by dragging the mouse over it

I recently had the opportunity to work on an interesting feature for Mozilla firefox developer tools, I’ve always wanted to contribute to firefox and I was happy to start with such an interesting subject.

I will document my experience here, maybe you will be inspired to contribute too, who knows ?

I found this bug on codetribute while I was looking for a nice improvement to do after doing some bugfixes (small bugs tagged as “good-first-bug”) on devtools. The goal was to be able to modify any size value in the rule view by dragging the mouse horizontally over it, it’s a feature that you can find on most graphic softwares (e.g. AfterEffect).

This patch landed in production in firefox 99 (April 2022), it looks like this ⬇️

demo of the feature

The goal was to detect size values like padding-top: 10px; and code something that would allow developers to increase or decrease the value just by dragging the mouse over it.

Coding the feature

Gathering requirements

The first step here was to gather requirements to do the simplest feature possible to get started. We chose to focus on single values like padding-top: 10px; and put aside values with multiple “size parts” like box-shadow: 10px 5px 5px red;

I also had to decrease the value by a smaller amount if the user clicked on the control key and increase it with larger increments if the shift key was pressed.

Steps needed

Here are the different steps to implement this new feature:

1. Detect size values like margin-top: 10px; , max-height: +10.2e3vmin etc..
2. Show the horizontal arrow pointer ↔️ when the mouse is on a draggable value
3. Attach event listeners to the property to be able to detect mouse events on it (mousemove, mousedown and mouseup)
4. increase or decrease the value by the right amount, depending on the direction of the mouse and the position from the last event.

Implementing the feature

The most difficult part was understanding which part of the actual codebase I had to change and where I had to put my code. Fortunately most of the changes were in the TextPropertyEditor class which is the class responsible to manage a TextProperty. You can find the documentation of each class above the definition of the class as jsdoc

TextPropertyEditor

I was able to create a first version but it felt slow and unresponsive

I was able to solve this by throttling the event handler, by doing this we now update the value no more than 30 times per second. I also optimized the feature by only adding event handlers if they were needed: when a user hovers over a draggable property and clicks I add the mousemove and mouseup event handlers.

Difficulties encountered

The most difficult part was to understand the side effects and the regressions caused by adding my feature. For example, if I dragged the mouse over a value and then released it over a checkbox it would change the state of the checkbox. For this reason, I had to understand a big part of the codebase and read lots of files to avoid regressions. Fortunately, everything is well encapsulated into classes, so it was not that hard.

Another difficult part was refactoring my own code multiple times. I wanted my code to be easy to understand for others and I wanted to create as less code as possible in the TextPropertyEditor class because it was already quite long

Testing the feature

In most cases when you add a patch to Mozilla you have to write tests that cover most of your changes to the codebase.

I was already aware of this but I thought I would spend less time on the testing part. The test file I wrote is 400 lines long just for this feature alone.

I had to write a function to emulate a user that is dragging his mouse from point A to point B on the screen. Here is what it looks like:

function to synthesize a user dragging its mouse over a property

I call this function to test multiple cases and check if the property on the screen changes accordingly.

The tests are made so that we can add more cases easily in the future (see the pictures below)

tests to run, for each test we emulate the user dragging with its mouse

tests if a CSS property shoud be draggable or not

When I run the test file locally, this is what it looks like

running tests locally

Once I finished writing the tests and handling all the weird cases that happened, we had to test this patch on TRY.

It’s a platform that allows developers to build and test their changes on Mozilla’s automation servers, the new patch is tested on different environments with different configurations (windows, Linux, macOS etc..)

result of the push on TRY

The code review

Special thanks to Nicolas Chevobbe who has given me great pieces of advice all along the way.

As you can see on the code review there are 67 comments for this revision over the 600 lines of code pushed, most of them are propositions to improve the code, add documentation with jsdoc, optimizations on the way I was doing things, and also a lot of questions.

When your reviewer is satisfied with your code and your patch passes all the tests on TRY, it will be merged into mozilla-central repository 🎉

If you have any questions or doubts do not hesitate to ask them on the revision page, mentors and reviewers give great tips and are always happy to help.

Conclusion

The feeling of contributing to such a large project is great, so do not hesitate to start contributing if you are curious.

I really enjoyed working on this feature and I will keep contributing to firefox devtools, do not hesitate to ask questions in the comments.

If you want to contribute but don’t know where to start I wrote an article a few months ago, you can find it here.