Release 0.2 — Part 2

Margaryta Chepiga

Published in

Open Source Adventure

5 min readFeb 21, 2018

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.

Expected Result

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.

Then I found out that there is another issue that was referenced to initial one.

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.

Honestly, it took me a while. I was going through the functions. I tried a couple of different things, but none of them worked. Then, I tried to break the code in order to understand which part is responsible for what. The funny thing actually was, that for the first couple of hours that I was trying to break the code, I actually couldn’t. I was changing things. Replacing urlBarIcon with urkbarIconContainer, and it would still behave the same way. I was extremely surprised. I understand when it takes me a while to fix something, but it was my very first time when I actually had problems breaking the code. I have spent three days trying to fix it and I couldn’t. One of the struggles that I faced was lack of knowledge in JavaScript and React. Since the solution wasn’t coming easy on me, I started searching for similar issues.

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.