Updating icons in URL bar

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

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={

less/navigationBar.less

@@ -769,27 +769,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;
  }
  }
 }

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;

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')
  })
  })