Get rid of magic numbers associated with downloads bar

[bsclifton]

The code in Brave is using 50 pixels as the height in several places:

• browser-laptop/js/components/frame.js

  Line 583 in a4aca7e

  const downloadsBarHeight = 50

  (change "status bar" so that it can not be covered by downloads bar #1712, status bar position fix #1947)
• https://github.com/darkdh/browser-laptop/blob/9e02263ed5c5c0646429ccf885560f319c14f17e/js/contextMenus.js#L1086
• there may be more occurrences

This code needs to be updated to fetch the value via CSS variable. Here is a great example of that:
https://github.com/brave/browser-laptop/blob/master/js/components/bookmarksToolbar.js#L287

[maazadeeb]

Hi @bsclifton,

I would like to take this up. I have gone through the contribution guide. Could you guide me about the further course the action?

[bsclifton]

Hi @maaz93

I'd love to help get you started with this change 😄

Have you got the project working from source? That would be the first step (what OS are you using?).

Next up, you'll want to create a variable in less/variables.less to hold this value. You should be able to then reference the value similar to the example linked above in js/components/bookmarksToolbar.js

Let me know if you have any specific questions or if any of the above is unclear 😄

[maazadeeb]

Hi @bsclifton

These instructions are sufficient for me to get started. I'm using a Mac. I'll get the project running from source and start working. I'll contact you on this thread, if need be! Thanks 😄

[bsclifton]

@maaz93 how's it going? Hope all is well- let me know if you have any questions 😄

[maazadeeb]

@bsclifton I was able to get the project running from source. I'm new to the react ecosystem, so I was just looking around in the code base. But, I realized that this bug doesn't seem to require any react knowledge. Right?

I went through files to find any hardcoded 50 pixels usage. I believe this exists only in the 2 files mentioned in the bug description. In order to test my change, I tried to hit the breakpoints in these functions. I was able to hit this one

https://github.com/darkdh/browser-laptop/blob/9e02263ed5c5c0646429ccf885560f319c14f17e/js/contextMenus.js#L1095

I was unable hit the other two

browser-laptop/js/components/frame.js

Line 583 in a4aca7e

const downloadsBarHeight = 50

https://github.com/darkdh/browser-laptop/blob/9e02263ed5c5c0646429ccf885560f319c14f17e/js/contextMenus.js#L1083

Could you guide me on this ?

[bsclifton]

Hi @maaz93

You can breakpoint debug any of the code running in the render process from inside the browser. In order to breakpoint debug the browser process, you can try Visual Studio Code. We have some documentation that I hope is useful here:
https://github.com/brave/browser-laptop/blob/master/docs/debugging.md

Another good way to debug that I use is to just drop some console.log statements in the code. You'll see the output in two places:

• system console (where you ran npm start) for the browser process
• the electron devtools (Shift + F8, go to console) for the renderer process

If you're working on an about: page (like about:history), there's a third place to check. You'll see output in the content devtools (F12 or cmd+opt+i)

Hope this helps 😄