Made urlBarIconContainer clickable to display connection info. Fix #7888 #13147

MargarytaChepiga · 2018-02-15T04:05:25Z

Before:

After:

I also touched some css, changed few things that had a TODO. In addition to changing a little bit of styling.
Also, I am not sure if I need to update and/or add new tests for this fix. Please let me know if so :)

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:

Navigate to wikipedia.org
Put mouse in URL bar and try clicking around the lock icon
Secure connection modal should come up (even near the edges)
Verify you can still drag and drop the lock icon to bookmarks toolbar
Navigate to github.com
Put mouse in URL bar and try clicking around the lock icon
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)
Visit https://www.wsj.com/europe
Page should be mixed (HTTP/HTTPS); the unlock icon should be gray

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

…ave#7888

bsclifton · 2018-02-15T23:01:31Z

@MargarytaChepiga I updated your post to include a test plan- can you take a peek and let me know what you think? 😄

bsclifton

Changes work great 😄 👍 Definitely nice to have this fixed. Thanks! 🥇

codecov-io · 2018-02-15T23:58:39Z

Codecov Report

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

@@            Coverage Diff             @@
##           master   #13147      +/-   ##
==========================================
- Coverage    56.3%   56.26%   -0.04%     
==========================================
  Files         278      278              
  Lines       27585    27584       -1     
  Branches     4497     4497              
==========================================
- Hits        15531    15521      -10     
- Misses      12054    12063       +9

Flag	Coverage Δ
#unittest	`56.26% <ø> (-0.04%)`	⬇️

Impacted Files	Coverage Δ
app/renderer/components/styles/global.js	`100% <ø> (ø)`	⬆️
js/stores/appStoreRenderer.js	`91.66% <0%> (-8.34%)`	⬇️
app/renderer/components/reduxComponent.js	`84.61% <0%> (-6.16%)`	⬇️
js/stores/windowStore.js	`27.69% <0%> (-0.3%)`	⬇️

srirambv · 2018-02-16T02:37:11Z

Works great ++.

@MargarytaChepiga would it be possible to add the separator after the lock icon for sites that do not show the EVC

The reason being as per test plan it says click around edges to see view certificate modal is shown but where EVC is not shown there is no edge on the right side so having the separator would make it clickable within that area

@bsclifton what do you think?

MargarytaChepiga · 2018-02-16T02:51:49Z

@srirambv Good point actually. I will fix it

MargarytaChepiga · 2018-02-16T03:52:40Z

@bsclifton Thank you so much! 😄 I think test plan looks great, and as already mentioned above I will fix the missing separator.

bsclifton · 2018-02-16T06:00:36Z

@MargarytaChepiga there is one other issue, caught by @NejcZdovc

It seems the color used by the EV elements is bleeding through- causing the lock icon on mixes HTTP/HTTPS links to show as green

For your next PR, can you please take a look at this? 😄

Here's what it looks like currently (0.20.42):

bsclifton · 2018-02-16T06:11:42Z

@srirambv as called out in the issue you created (#13159), we should leave the separator off (at least for now)

I think we just need a fix for the color bleed through for mixed content and we'll be good 😄 I updated the test plan to capture this (thanks, @NejcZdovc!)

NejcZdovc · 2018-02-16T06:22:15Z

less/variables.less

@@ -40,7 +40,7 @@
 @settingItemSubtextFontSize: 0.95rem;
 @audioColor: @highlightBlue;
 @focusUrlbarOutline: rgba(55, 169, 253, 0.4);
-@siteSecureColor: @buttonColor;
+@siteSecureColor: green;


@bsclifton this line is problematic as well, because I think that we only want EV to be green

Just replacing green with @siteEVColor fixes it

bsclifton · 2018-02-16T06:27:39Z

app/renderer/components/navigation/urlBar.js

      id='urlbar'
    >
      {urlbarIconContainer}
      {
        this.props.titleMode
-        ? <div id='titleBar' data-test-id='titleBar'>
+        ? <div id='titleBar' data-test-id='titleBar' >


this extra space at the end is also causing the linter to fail; you can manually run this with:
npm run lint

srirambv · 2018-02-16T06:44:38Z

#13147 (comment)

petemill · 2018-02-16T19:05:15Z

app/renderer/components/navigation/urlBar.js

@@ -513,13 +517,13 @@ class UrlBar extends React.Component {
        urlbarForm: true,
        [css(styles.urlbarForm_wide)]: this.props.isWideURLbarEnabled,
        noBorderRadius: this.props.publisherButtonVisible
-      })}
+      })} 


lint error here

diracdeltas · 2018-02-16T21:39:54Z

I think we should revert the color changes for now, pending review by security team. There are some edge cases where I think the behavior is incorrect:

BTW this should have been marked for sec review before merge. :(

diracdeltas · 2018-02-16T21:41:07Z

Just catching up here, I see @srirambv already opened #13164. Please be sure to request a security review this time, thanks.

bsclifton · 2018-03-09T20:51:58Z

Removing milestone since this was reverted with #13168

srirambv requested review from cezaraugusto, bsclifton and srirambv February 15, 2018 04:32

srirambv assigned MargarytaChepiga Feb 15, 2018

srirambv added feature/URLbar PR/pending-review labels Feb 15, 2018

srirambv modified the milestones: 0.21.x (Beta Channel), Triage Backlog Feb 15, 2018

NejcZdovc modified the milestones: 0.21.x (Beta Channel), 0.23.x (Nightly Channel) Feb 15, 2018

Made urlBarIconContainer clickable to display connection info. Fix br…

fdaf153

…ave#7888

bsclifton force-pushed the fix-7888 branch from d6e8ce4 to fdaf153 Compare February 15, 2018 22:33

srirambv mentioned this pull request Feb 15, 2018

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

Closed

bsclifton approved these changes Feb 15, 2018

View reviewed changes

bsclifton merged commit fbdf34d into brave:master Feb 15, 2018

srirambv mentioned this pull request Feb 16, 2018

Add separator for urlBarIconContainer where EVC is not available #13159

Closed

srirambv removed the PR/pending-review label Feb 16, 2018

bsclifton mentioned this pull request Feb 16, 2018

Icon for mixed content is unintentionally shown as green #13163

Closed

NejcZdovc reviewed Feb 16, 2018

View reviewed changes

bsclifton reviewed Feb 16, 2018

View reviewed changes

petemill reviewed Feb 16, 2018

View reviewed changes

srirambv mentioned this pull request Feb 16, 2018

Made urlBarIconContainer clickable to display connection info #13164

Merged

10 tasks

bsclifton removed this from the 0.23.x (Nightly Channel) milestone Mar 9, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Made urlBarIconContainer clickable to display connection info. Fix #7888 #13147

Made urlBarIconContainer clickable to display connection info. Fix #7888 #13147

MargarytaChepiga commented Feb 15, 2018 •

edited by bsclifton

Loading

bsclifton commented Feb 15, 2018

bsclifton left a comment

codecov-io commented Feb 15, 2018 •

edited

Loading

srirambv commented Feb 16, 2018 •

edited

Loading

MargarytaChepiga commented Feb 16, 2018

MargarytaChepiga commented Feb 16, 2018

bsclifton commented Feb 16, 2018 •

edited

Loading

bsclifton commented Feb 16, 2018 •

edited

Loading

NejcZdovc Feb 16, 2018 •

edited

Loading

srirambv Feb 16, 2018

bsclifton Feb 16, 2018

srirambv commented Feb 16, 2018

petemill Feb 16, 2018

diracdeltas commented Feb 16, 2018

diracdeltas commented Feb 16, 2018

bsclifton commented Mar 9, 2018

Made urlBarIconContainer clickable to display connection info. Fix #7888 #13147

Made urlBarIconContainer clickable to display connection info. Fix #7888 #13147

Conversation

MargarytaChepiga commented Feb 15, 2018 • edited by bsclifton Loading

Submitter Checklist:

Test Plan:

Reviewer Checklist:

bsclifton commented Feb 15, 2018

bsclifton left a comment

Choose a reason for hiding this comment

codecov-io commented Feb 15, 2018 • edited Loading

Codecov Report

srirambv commented Feb 16, 2018 • edited Loading

MargarytaChepiga commented Feb 16, 2018

MargarytaChepiga commented Feb 16, 2018

bsclifton commented Feb 16, 2018 • edited Loading

bsclifton commented Feb 16, 2018 • edited Loading

NejcZdovc Feb 16, 2018 • edited Loading

Choose a reason for hiding this comment

srirambv Feb 16, 2018

Choose a reason for hiding this comment

bsclifton Feb 16, 2018

Choose a reason for hiding this comment

srirambv commented Feb 16, 2018

petemill Feb 16, 2018

Choose a reason for hiding this comment

diracdeltas commented Feb 16, 2018

diracdeltas commented Feb 16, 2018

bsclifton commented Mar 9, 2018

MargarytaChepiga commented Feb 15, 2018 •

edited by bsclifton

Loading

codecov-io commented Feb 15, 2018 •

edited

Loading

srirambv commented Feb 16, 2018 •

edited

Loading

bsclifton commented Feb 16, 2018 •

edited

Loading

bsclifton commented Feb 16, 2018 •

edited

Loading

NejcZdovc Feb 16, 2018 •

edited

Loading