Merge pull request #6319 from gyandeeps/issue6273

Properly handle URL bar icon when searching and focus changes

app/renderer/components/urlBar.js

@@ -508,6 +508,7 @@ class UrlBar extends ImmutableComponent {
           searchSelectEntry={this.searchSelectEntry}
           title={this.props.title}
           titleMode={this.props.titleMode}
+          isSearching={this.props.location !== this.props.urlbar.get('location')}
         />
       </div>
       {

app/renderer/components/urlBarIcon.js

@@ -11,6 +11,19 @@ const dndData = require('../../../js/dndData')
 const {isSourceAboutUrl} = require('../../../js/lib/appUrlUtil')
 const searchIconSize = 16
 
+const getIconCssClass = (ctx) => {
+  if (ctx.isSearch) {
+    return 'fa-search'
+  } else if (ctx.isAboutPage && !ctx.props.titleMode) {
+    return 'fa-list'
+  } else if (ctx.isSecure) {
+    // NOTE: EV style not approved yet; see discussion at https://github.com/brave/browser-laptop/issues/791
+    return 'fa-lock'
+  } else if (ctx.inInsecure) {
+    return 'fa-unlock'
+  }
+}
+
 class UrlBarIcon extends ImmutableComponent {
   constructor () {
     super()
@@ -40,7 +53,7 @@ class UrlBarIcon extends ImmutableComponent {
    * - is a catch-all for: about pages, files, etc
    */
   get isSearch () {
-    const showSearch = this.props.active
+    const showSearch = this.props.isSearching && !this.props.titleMode
 
     const defaultToSearch = (!this.isSecure && !this.isInsecure && !showSearch) &&
                             !this.props.titleMode &&
@@ -60,11 +73,7 @@ class UrlBarIcon extends ImmutableComponent {
     return cx({
       urlbarIcon: true,
       'fa': true,
-      // NOTE: EV style not approved yet; see discussion at https://github.com/brave/browser-laptop/issues/791
-      'fa-lock': this.isSecure,
-      'fa-unlock': this.isInsecure,
-      'fa-search': this.isSearch && !this.isAboutPage,
-      'fa-list': this.isAboutPage && !this.props.titleMode
+      [ getIconCssClass(this) ]: true
     })
   }
   get iconStyles () {