From 5269fefd21771570bf6ef667e535b8224c089189 Mon Sep 17 00:00:00 2001 From: Brian Clifton Date: Mon, 7 Nov 2016 02:28:19 -0700 Subject: [PATCH] Updating icons in URL bar Fixes https://github.com/brave/browser-laptop/issues/5446 Fixes https://github.com/brave/browser-laptop/issues/4910 - includes updates to the webdriver tests (and adding new test case for this) - colors for icon in URL bar pulled out into variables.less Auditors: @diracdeltas, @bbondy Test Plan: 1. Launch Brave and open a new tab 2. Notice that magnifying glass shows by default (with no text input yet) 3. Type some text and notice icon remains magnifying glass (no longer the document icon) 4. Visit http://mal-game.com 5. Notice the triangle exclamation icon is now showing, since connection is HTTP 6. Click the triangle in the URL bar and confirm you see the "insecure connection" modal 7. Visit https://mixed-script.badssl.com/ 8. Click the lock icon in the URL bar 9. Secure connection modal comes up. Click "Load Unsafe Scripts" 10. Notice icon in URL bar is now the triangle 11. Click the triangle icon in the URL bar and confirm you see the "partially insecure connection" modal --- js/components/siteInfo.js | 4 ++-- js/components/urlBar.js | 9 ++++++--- less/navigationBar.less | 10 +++++----- less/variables.less | 3 +++ test/components/navigationBarTest.js | 9 ++++++--- 5 files changed, 22 insertions(+), 13 deletions(-) diff --git a/js/components/siteInfo.js b/js/components/siteInfo.js index 16e39b74cc1..7a15a60de5d 100644 --- a/js/components/siteInfo.js +++ b/js/components/siteInfo.js @@ -61,9 +61,9 @@ class SiteInfo extends ImmutableComponent { extendedValidation: this.isExtendedValidation })} /> } else if (this.runInsecureContent) { - secureIcon =
    • + secureIcon =
    • } else { - secureIcon =
    • + secureIcon =
    • } // Figure out the partition info display diff --git a/js/components/urlBar.js b/js/components/urlBar.js index d0048233bc4..943af54a93f 100644 --- a/js/components/urlBar.js +++ b/js/components/urlBar.js @@ -409,6 +409,9 @@ class UrlBar extends ImmutableComponent { } render () { + const showIconSecure = !this.activateSearchEngine && this.isHTTPPage && this.props.isSecure && !this.props.urlbar.get('active') + const showIconInsecure = !this.activateSearchEngine && this.isHTTPPage && !this.props.isSecure && !this.props.urlbar.get('active') && !this.props.titleMode + const showIconSearch = !this.activateSearchEngine && this.props.urlbar.get('active') && this.props.loading === false const value = this.isActive || (!this.locationValue && this.isFocused()) ? undefined : this.locationValue @@ -424,9 +427,9 @@ class UrlBar extends ImmutableComponent { className={cx({ urlbarIcon: true, 'fa': !this.activateSearchEngine, - 'fa-lock': !this.activateSearchEngine && this.isHTTPPage && this.props.isSecure && !this.props.urlbar.get('active'), - 'fa-unlock': !this.activateSearchEngine && this.isHTTPPage && !this.props.isSecure && !this.props.urlbar.get('active') && !this.props.titleMode, - 'fa fa-file': !this.activateSearchEngine && this.props.urlbar.get('active') && this.props.loading === false, + 'fa-lock': showIconSecure, + 'fa-exclamation-triangle': showIconInsecure, + 'fa fa-search': showIconSearch || (!showIconSecure && !showIconInsecure && !showIconSearch), extendedValidation: this.extendedValidationSSL })} style={ diff --git a/less/navigationBar.less b/less/navigationBar.less index d5bcc760ea1..9c16058a835 100644 --- a/less/navigationBar.less +++ b/less/navigationBar.less @@ -769,7 +769,7 @@ } .urlbarIcon { - color: @focusUrlbarOutline; + color: @siteSecureColor; left: 14px; margin-top: 1px; font-size: 13px; @@ -777,19 +777,19 @@ min-width: 16px; &.fa-lock, - &.fa-unlock { + &.fa-exclamation-triangle { margin-top: 1px; font-size: 16px; min-height: 10px; min-width: 16px; } - &.fa-unlock { - color: @gray; + &.fa-exclamation-triangle { + color: @siteInsecureColor; } &.extendedValidation { - color: green; + color: @siteEVColor; } } } diff --git a/less/variables.less b/less/variables.less index 4e57badae99..acc151402b5 100644 --- a/less/variables.less +++ b/less/variables.less @@ -38,6 +38,9 @@ @contextMenuFontSize: 14px; @audioColor: @highlightBlue; @focusUrlbarOutline: @highlightBlue; +@siteSecureColor: @highlightBlue; +@siteInsecureColor: #FCBA00; +@siteEVColor: green; @loadTimeColor: @highlightBlue; @activeTabDefaultColor: @chromePrimary; @buttonColor: #5a5a5a; diff --git a/test/components/navigationBarTest.js b/test/components/navigationBarTest.js index 2b589daea55..7620f8c01ad 100644 --- a/test/components/navigationBarTest.js +++ b/test/components/navigationBarTest.js @@ -332,7 +332,7 @@ describe('navigationBar', function () { .moveToObject(navigator) .waitForExist(urlbarIcon) .getAttribute(urlbarIcon, 'class').then((classes) => - classes.includes('fa-unlock') + classes.includes('fa-exclamation-triangle') )) .windowByUrl(Brave.browserWindowUrl) .click(urlbarIcon) @@ -791,6 +791,9 @@ describe('navigationBar', function () { return this.getValue(urlInput).then((val) => val === 'about:blank') }) }) + it('has the search icon', function * () { + yield this.app.client.waitForExist('.urlbarIcon.fa-search') + }) }) describe('page with focused form input', function () { @@ -850,8 +853,8 @@ describe('navigationBar', function () { yield selectsText(this.app.client, 'brave.com') }) - it('has the file icon', function * () { - yield this.app.client.waitForExist('.urlbarIcon.fa-file') + it('has the search icon', function * () { + yield this.app.client.waitForExist('.urlbarIcon.fa-search') }) })