Working on my first open source bug

As a first attempt in working on an open source bug, I’ve looked into the VS Code project where the color picker no longer appears when the user hovers over the color decoration. The first step in attempting to tackle a bug is to be able to reproduce the bug. Please keep in mind, all of these actions were done on my Mac.

How I reproduce the bug

1. Launch VS Code in developer mode.

Since I’ve already compiled the program from the previous post, all I had to do to run the software in developer mode was execute ./script/ in the vscode repository directory.

2. Open command pallet using (cmd + p)

3. Typed in “user settings” inside the command pallet and hit enter.

4. Created a workbench color decoration option using “workbench.colorCustomizations” with an object as value containing {sideBar.background: "#ff0000"}

5. Hover my mouse over the red colored decorator and saw that the color picker did not appear.

One important note is that the issue suggests, by hovering the mouse on top of the text next to the color decorator, the color picker would appear. I’ve tested this to be true also.

Tools I used

The tools I ended up using in attempts to resolve the bug was Google Chrome Developer Tools within VS Code and GitHub Issues.

What I tried

The simplest yet direct method is to use Google Chrome Developer Tools to inspect the UI for changes. Since this issue touches upon issues relating to the UI of VS Code, I’ve set a DOM Manipulation breakpoint on the text next to the color decorator element by right clicking on the element and selecting break on “attribute modifications”. I used the DOM element selector tool to find the HTML element that is responsible for rendering the text next to the decorator. The DOM manipulation breakpoint was set at that location because it is an element that I can invoke the color picker from that is very close to the color decorator. However, this didn’t yield any results because when I hovered my mouse on the text and the selected a different color from the color picker, the breakpoint did not trigger to allow further investigation.

I then turned to closed GitHub issues to get a better idea of where the source file responsible for rendering the color decorator and the text maybe. I’ve found 2 closed issues: 1) Settings to hide color preview boxes. 2) Color picker alters RGB components when changing opacity. Both issues have a commonality of having commits made against src/vs/base/common/color.ts. I decided to look for this file to set breakpoints and run the code to see if my assumptions were correct. However, when I attempted to open the file, I was only able to find src/vs/base/common, but not color.ts.

Upon getting advice from Professor Humphrey, I was told that the code for the color decorator runs on a separate process from the main UI in the extension host process and that I’ll need to attach VS Code to that process to debug.

Can I fix it?

I believe I can fix it once I find color.ts and the methods associated with the color decorator and the text next to the color decorator, which activates the color picker. However, at this point, I will need further assistance before I can continue with the fix.

What about tests?

While I could not provide a fix at this point, color.ts does indeed have a test file associated with it. The file is color.test.js located at src/vs/base/test/common/. This file will prove useful once I’ve made changes to the code in attempts to fix the issue.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s