Made urlBarIconContainer clickable to display connection info

[srirambv]

Fixes #7888

Redo of #13147 (which unintentionally introduced #13163)

• original commit was reverted in master with 49a9b73
• commit re-added here (first commit in this PR)
• second commit fixes the issue discovered

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Request a security/privacy review as needed. (Ask a Brave employee to help if you cannot access this document.)

Test Plan:

1. Visit https;//github.com, connection info icon should be grey and EVC should be in green
2. Visit http;//pdf995.com, connection info icon should be red
3. Visit https://https-everywhere.badssl.com, connection info icon should be gery
4. Visit https://mixed-script.badssl.com, connection icon should be grey, click and load unsafe script, connection info icon should be red

Reviewer Checklist:

• Request a security/privacy review as needed if one was not already requested.

Tests

• Adequate test coverage exists to prevent regressions
• Tests should be independent and work correctly when run individually or as a suite ref
• New files have MPL2 license header

[bsclifton]

@MargarytaChepiga can you please review this PR? @srirambv had some tweaks to your original contribution 😄 BTW- you should have an invitation to be an official collaborator now. Once you accept, you can assign yourself to issues 😄

[bsclifton]

@MargarytaChepiga (and everybody else) - apologies for what happened here. I didn't do a proper review when accepting the original pull request (definitely my bad). Part of a good review includes checking the Travis CI status, which I neglected to do ☹️

For sensitive areas like the URL bar, it's also great to loop in security. To remedy this, I rolled back the code in master... re-introduced it here... and then created a security review 😄
https://github.com/brave/internal/issues/210

[codecov-io]

Codecov Report

Merging #13164 into master will decrease coverage by 0.25%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #13164      +/-   ##
==========================================
- Coverage   56.18%   55.92%   -0.26%     
==========================================
  Files         279      281       +2     
  Lines       27873    27855      -18     
  Branches     4560     4571      +11     
==========================================
- Hits        15660    15579      -81     
- Misses      12213    12276      +63

Flag	Coverage Δ
#unittest	55.92% <ø> (-0.26%)	⬇️

Impacted Files	Coverage Δ
app/renderer/components/styles/global.js	100% <ø> (ø)	⬆️
app/browser/api/ledgerNotifications.js	70.95% <0%> (-4.38%)	⬇️
app/renderer/components/preferences/paymentsTab.js	71.22% <0%> (-4.22%)	⬇️
app/browser/reducers/ledgerReducer.js	44.16% <0%> (-2.77%)	⬇️
app/common/state/historyState.js	76.25% <0%> (-2.33%)	⬇️
app/browser/api/ledger.js	58.79% <0%> (-1.38%)	⬇️
...erer/components/preferences/payment/ledgerTable.js	86.5% <0%> (-1.26%)	⬇️
app/browser/windows.js	33.04% <0%> (-0.95%)	⬇️
js/actions/appActions.js	18.8% <0%> (-0.88%)	⬇️
app/browser/tabs.js	23.89% <0%> (-0.34%)	⬇️
... and 14 more

[diracdeltas]

nit: this introduces more white space next to the url bar icon than there was previously

before:

otherwise lgtm!! thanks for addressing my concerns. :)

[MargarytaChepiga]

Everything looks great, besides that extra space in the icon caused by padding. Since this issue was a part of the reverted merge, can I make this change?

[MargarytaChepiga]

The extra space between an icon and address is caused by the padding. Looked okay with the secure connection, however as @diracdeltas mentioned with others not really. Changing to 5px 5px 5px 5px makes it better.

[diracdeltas]

@MargarytaChepiga yes, please feel free to make that change! to have it be part of this PR, either:

1. @srirambv can give you permission to push to this branch on his fork: https://github.com/srirambv/browser-laptop.git

or

2. You can push the change to your fork and he can merge/cherry-pick it into this branch.

[srirambv]

@MargarytaChepiga please go ahead and make the changes. I've added you to the branch

[MargarytaChepiga]

Sorry for the delay. I'm facing issues pushing the changes. Probably I am doing something wrong.
I added https://github.com/srirambv/browser-laptop.git as a remote, then I did git fetch, then checked out to the connection branch where I've made the changes, tested them, commited and when I try to push I get the following:

And just in case adding this:

[srirambv]

@MargarytaChepiga I think its due to the fact that its still not given you access.

Here's the link https://github.com/srirambv/browser-laptop/invitations . Could you please try once again

[MargarytaChepiga]

@srirambv My bad, thank you so much!

[diracdeltas]

Thanks, this looks great. However it doesn't seem to fix #13011 for me, not sure why. When I click on the EV certificate info on github.com, nothing happens unless I click on the lock icon.

[MargarytaChepiga]

@diracdeltas That's weird... I just checked it again, just to be sure. It seems to work fine.

[diracdeltas]

nvm, it works now. lgtm!