Merge pull request #5449 from bsclifton/unsecure-triangle

Updating icons in URL bar
brave · Nov 7, 2016 · 9c16232 · 9c16232
2 parents accfe3b + 5269fef
commit 9c16232
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/js/components/siteInfo.js b/js/components/siteInfo.js
@@ -61,9 +61,9 @@ class SiteInfo extends ImmutableComponent {
           extendedValidation: this.isExtendedValidation
         })} /><span data-l10n-id='secureConnection' /></li>
     } else if (this.runInsecureContent) {
-      secureIcon = <li><span className='fa fa-unlock' /><span data-l10n-id='mixedConnection' /></li>
+      secureIcon = <li><span className='fa fa-exclamation-triangle' /><span data-l10n-id='mixedConnection' /></li>
     } else {
-      secureIcon = <li><span className='fa fa-unlock' /><span data-l10n-id='insecureConnection' data-l10n-args={JSON.stringify(l10nArgs)} /></li>
+      secureIcon = <li><span className='fa fa-exclamation-triangle' /><span data-l10n-id='insecureConnection' data-l10n-args={JSON.stringify(l10nArgs)} /></li>
     }
 
     // Figure out the partition info display

diff --git 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
@@ -852,27 +852,27 @@
   }
 
   .urlbarIcon {
-    color: @focusUrlbarOutline;
+    color: @siteSecureColor;
     left: 14px;
     margin-top: 1px;
     font-size: 13px;
     min-height: 10px;
     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
@@ -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
@@ -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')
       })
     })