Nicolas Chevobbe

2016 Challenge : Week #19

If you did not, read the initial blog post announcing the challenge

On Week #18, I worked on Bug 1248274, an issue about editing property in the rule view. If you tried to click the property’s value while editing the property’s name, the value wasn’t being edited (the input was not displayed). The feedback on my patch was quite positive, so this weekend, I addressed the few comments that were made on it, added a test, and asked for review.

The previous week, I also started to think about displaying properly cased tag names all across the devtools (Bug 1270215). The discussion on this bug was great, and someone told use about Element.localName, which is always in the correct case, and sounded like something we could use without too much work. I thus implemented it on various places, added many tests to make sur every node name displayed was correct, and pushed a patch to review. Julian Descottes, who reviewed it, told me that there were some quirks that my patch did not manage (more specifically, Element.localName does not return the tag prefix, e.g. <svg:clipPath>.localName === "clipPath". I’ll have to work a little more on this to get it fixed.

When I was working on the previous bug, I was mainly editing the inspector.js file. At the top of the file, there was a comment saying that we should get rid of a function and re-use an existing, more robust one. There was a bug filed for this (Bug 958167 - Inspector actor should use DevToolsUtils.makeInfallible instead of reinventing its own), so I took it, submitted a patch, and the bug was resolved on Tuesday.

Bugzilla Timeline - Week 19
Week 19 - Success

On Tuesday Patrick Brosset pinged me on IRC to tell me that I should be interested in working on Bug 1271191. The day before, support for #RGBa and #RRGGBBaa syntax landed (Bug 567283), but although it was supported in Firefox, it wouldn’t display as a color in the devtools (i.e. there wasn’t a swatch representing the color before the value itself).

#rgba and #rrggbbaa in @FirefoxNightly pic.twitter.com/q2dcivLHjX

— 紫云飞 (@ziyunfei) 10 mai 2016

Adding support to display the swatch was quite easy as the script handling colors is very well designed. I added a bunch of tests to make sure we are handling those syntax correctly, and pushed to review on Thursday.

Like for several weeks now, I worked on the new React-based console frontend:

This was quite fun to learn about Immutable.js, and get a little more used to Redux, dealing with states, mainly for console.clear !