Type of the Release
This release is regarding the good-first-bug. The issue page for the bug is here.
How it was Chosen
There is not much story into how I found it. I was browsing though good-first-bugs and saw this issue. It seemed like a manageable and interesting bug to fix.
Process & Solution
So when I just had a quick look at this issue, I thought that it is going to be a very easy and straightforward bug to fix. I thought that it is just a small CSS fix. I have to admit, I was wrong. However, after all, I also have to admit that I am extremely happy that I was wrong. I learned so much fixing this bug.
I started by reading the issue page.
Basically, part of the URL has an icon which is clickable. When you click on it, it will show you connection information. However, the area around the icon should be clickable too.
So now, instead of just changing the area around the icon, I’ve set a bar a bit higher. I wanted to make the whole area clickable.
I started by opening VScode and looking for the keywords, which in my case I considered to be urlbarIcon and urlbarIconContainer.
I have found a couple of files. I looked through them, trying to understand the code. I was trying to understand what is wrong, where and how to fix this.
Note to self:
Always! Always look for the related issues!
There was a related issue mentioned, which is about making the bookmarkButtonContainer clickable. What’s meaningful about this is the fact that this issue was already fixed. Cool, let’s look at the issue and the fix for it:
The next step was to find bookmarkButtonContainer in VScode and see how it was done:
Since on the merged pull request, the fix was about adding the following two lines:
I assumed that most probably the fix has something to do with them. It didn’t. I spend hours playing around with width and height. It wasn’t working.
I have spent whole three days, and I barely made any progress. I felt confused, overwhelmed and I seriously thought that I would never be able to fix it.
So I took a step back. If I can’t make the whole area clickable, let’s try to make the area around the icon clickable. After playing around with CSS for a couple of hours, I actually successfully accomplished that goal.
All I had to do was to change margins a little and add a padding for the urlbarIcon. That made that area around the icon clickable.
Okay, great. This is at least some progress, but that is not enough. I also need to make the whole extended validation certificate information be clickable. The problem is, I don’t know how. I have tried. I failed. I tried again and again. Failed a lot. Failed miserably. Next step? I reached out for help.
Which was extremely helpful! No, I haven’t fixed the issue right away. But since I have spent a couple of days working on the code, I already familiarized myself with functions, it finally made sense what I was supposed to do. It took me a couple of days more until it worked.
There were a couple of things that I haven’t discussed here, but it will be addressed and discussed in Release 0.2 — Part 3
What have I learned?
- Never give up. Even when it seems that you are not capable of doing something.
- Use all available resources. Check all regarding issues. Google.
- Failed? Try again. Failed? Focus on something else. Try again.
- You can do it.