Connection info click area is on the urlbarIcon, should be on urlbarIconContainer

[srirambv]

Test plan

1. Navigate to wikipedia.org
2. Put mouse in URL bar and try clicking around the lock icon
3. Secure connection modal should come up (even near the edges)
4. Verify you can still drag and drop the lock icon to bookmarks toolbar
5. Navigate to github.com
6. Put mouse in URL bar and try clicking around the lock icon
7. Verify secure modal is shown when clicking everything left of where you type (ex: the EV info bar and the lock icon, including the edges)
8. Visit https://www.wsj.com/europe
9. Page should be mixed (HTTP/HTTPS); the unlock icon should be gray

Original issue description

• Did you search for similar issues before submitting this one?
  Yes

• Describe the issue you encountered:
  The click area is pretty small limited only to the urlbaricon, even a little off causes the click to be not captured. The click should be on the urlbarIconContainer which increases the hit area

• Platform (Win7, 8, 10? macOS? Linux distro?):
  All

• Brave Version (revision SHA):
  Brave 0.14.0
  rev ffa6f8f

• Steps to reproduce:

  1. Open any http/https site
  2. Click on the padlock icon the connection info is shown
  3. Move cursor sightly off the padlock but visually the pointer still looks on the padlock, click not recognized and connection info is not shown

  All other browser has the large click area to show the connection info window/modal

• Actual result:
  Connection info click area is on the urlbarIcon, should be on urlbarIconContainer

• Expected result:
  Connection info not shown if the click is off by a marginal amount

• Will the steps above reproduce in a fresh profile? If not what other info can be added?
  Yes

• Is this an issue in the currently released version?
  Yes

• Can this issue be consistently reproduced?
  Yes

• Extra QA steps:
  1.
  2.
  3.

• Screenshot if needed:
  What it is now
  
  What it should be
  

• Any related issues: Make entire bookmarkButtonContainer clickable to add/edit a bookmark #6704
  cc: @bradleyrichter @bsclifton

[luixxiul]

The current clickable are is the same as Chrome fyi

[srirambv]

No its not the same. Its completely different from Chrome

[luixxiul]

Sorry I was on Ubuntu.

[luixxiul]

Still I believe that the clickable area is not only the lock icon but also the whole "GitHub, Inc. [US]" rectangle on your GIF animation.

[srirambv]

Yes. Since we don't have any text next to the padlock it makes sense to have the entire urlbarIconContainer clickable. Users might be used to click on the text next to padlock and would expect the similar behavior. Just makes it easy to view.

[bsclifton]

this is a super important one to fix- do you think you could check this out @luixxiul?

Moving to 0.14.3 for now

[luixxiul]

Fine, I will add another container inside urlbarIconContainer to wrap it.

I don't think it is a good idea to make all of urlbarIconContainer clickable, unless we add the border like bookmark button and add fund button. This should be another task (if we will display some info like Chrome does).

[bsclifton]

@luixxiul I think that's a great point- @bradleyrichter would we be interested in adding a border?

[bradleyrichter]

a border? I like Chrome's "border". Invisible. ; )

[MargarytaChepiga]

@srirambv Working on it!

[bsclifton]

Awesome! thanks, @MargarytaChepiga 😄 I assigned the issue to myself to reserve it for you- let us know if you need any help 😄

[MargarytaChepiga]

@bsclifton Great! Thank you!

[MargarytaChepiga]

So I've been working on the issue for a few days now, and I haven't done much progress. I've been looking at urlbar.js and urlBaricon.js files to find and understand how the urlbarIcon get's clickable, but it is still unclear to me. I would really appreciate any help/tips on how I could tackle this issue. Thanks!

[cndouglas]

@MargarytaChepiga
The onClick function in urlBarIcon.js contains the code that shows the connection info.

browser-laptop/app/renderer/components/navigation/urlBarIcon.js

Lines 124 to 130 in cd99dc6

	onClick () {
	if (isSourceAboutUrl(this.props.location) || this.isSearch) {
	return
	}
	windowActions.setSiteInfoVisible(true)
	}

The onClick function is bound to the component here:

browser-laptop/app/renderer/components/navigation/urlBarIcon.js

Line 33 in cd99dc6

this.onClick = this.onClick.bind(this)

And the onClick function is set to the onClick attribute here:

browser-laptop/app/renderer/components/navigation/urlBarIcon.js

Line 173 in cd99dc6

props.onClick = this.onClick

The onClick function in urlBarIcon.js needs to be moved over to urlBar.js. Then, the onClick attribute of the urlbarIconContainer (on both lines 500 and 506) can be set to the new function.

browser-laptop/app/renderer/components/navigation/urlBar.js

Lines 498 to 510 in cd99dc6

	render () {
	const urlbarIconContainer = this.props.evCert
	? (<div className='urlbarIconContainer'>
	<UrlBarIcon
	titleMode={this.props.titleMode}
	/>
	{this.showEvCert}
	</div>)
	: (<div className='urlbarIconContainer'>
	<UrlBarIcon
	titleMode={this.props.titleMode}
	/>
	</div>)

[MargarytaChepiga]

@LiunkaeThat helps a lot! Thank you so much!