From 09a097dfacfc97d43e20775e62f417610dcb9228 Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Fri, 28 Jul 2017 09:26:29 +0900
Subject: [PATCH] Fixes logic for components

Addresses #9283
---
 .../components/navigation/browserAction.js    |  3 +-
 .../navigation/buttons/bookmarkButton.js      | 72 +++++--------------
 .../navigation/buttons/homeButton.js          | 39 +++++-----
 .../buttons/navigationBarButtonContainer.js   |  6 +-
 .../navigation/buttons/reloadButton.js        | 27 ++-----
 .../navigation/buttons/stopButton.js          | 35 ++++++---
 .../components/navigation/navigationBar.js    | 70 ++++++------------
 app/renderer/components/navigation/urlBar.js  | 30 ++------
 .../components/navigation/urlBarIcon.js       |  9 +--
 test/navbar-components/navigationBarTest.js   | 24 ++-----
 10 files changed, 105 insertions(+), 210 deletions(-)

diff --git a/app/renderer/components/navigation/browserAction.js b/app/renderer/components/navigation/browserAction.js
index cc086426143..ef7cd1fb31e 100644
--- a/app/renderer/components/navigation/browserAction.js
+++ b/app/renderer/components/navigation/browserAction.js
@@ -84,7 +84,8 @@ class BrowserAction extends React.Component {
     // TODO(bridiver) should have some visual notification of hover/press
     return <NavigationBarButtonContainer
       isSquare
-      containerFor={styles.browserActionButton}>
+      containerFor={styles.browserActionButton}
+    >
       <BrowserButton
         extensionItem
         l10nId='browserActionButton'
diff --git a/app/renderer/components/navigation/buttons/bookmarkButton.js b/app/renderer/components/navigation/buttons/bookmarkButton.js
index 0ea3bfe087a..6442f38e16f 100644
--- a/app/renderer/components/navigation/buttons/bookmarkButton.js
+++ b/app/renderer/components/navigation/buttons/bookmarkButton.js
@@ -3,91 +3,51 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const Immutable = require('immutable')
 const ipc = require('electron').ipcRenderer
+const {StyleSheet} = require('aphrodite/no-important')
 
 // Components
-const ReduxComponent = require('../../reduxComponent')
+const ImmutableComponent = require('../../immutableComponent')
 const {NormalizedButton} = require('../../common/browserButton')
 
 // Actions
 const windowActions = require('../../../../../js/actions/windowActions')
 
 // Constants
-const siteTags = require('../../../../../js/constants/siteTags')
 const messages = require('../../../../../js/constants/messages')
 
-// State
-const tabState = require('../../../../common/state/tabState')
-const frameStateUtil = require('../../../../../js/state/frameStateUtil')
-
-// Utils
-const siteUtil = require('../../../../../js/state/siteUtil')
-const UrlUtil = require('../../../../../js/lib/urlutil')
-
-const {StyleSheet} = require('aphrodite/no-important')
-
+// Style
 const bookmarkButtonIcon = require('../../../../../img/toolbar/bookmark_btn.svg')
 const bookmarkedButtonIcon = require('../../../../../img/toolbar/bookmark_marked.svg')
 
-class BookmarkButton extends React.Component {
+class BookmarkButton extends ImmutableComponent {
   constructor (props) {
     super(props)
     this.onToggleBookmark = this.onToggleBookmark.bind(this)
   }
 
-  onToggleBookmark () {
-    const editing = this.bookmarked
-    // show the AddEditBookmarkHanger control; saving/deleting takes place there
-    let siteDetail = siteUtil.getDetailFromFrame(
-      this.activeFrame,
-      siteTags.BOOKMARK
-    )
-    const key = siteUtil.getSiteKey(siteDetail)
-
-    if (key !== null) {
-      siteDetail = siteDetail.set(
-        'parentFolderId',
-        this.props.sites.getIn([key, 'parentFolderId'])
-      )
-      siteDetail = siteDetail.set(
-        'customTitle',
-        this.props.sites.getIn([key, 'customTitle'])
-      )
-    }
-    siteDetail = siteDetail.set(
-      'location',
-      UrlUtil.getLocationIfPDF(siteDetail.get('location'))
-    )
-    windowActions.setBookmarkDetail(siteDetail, siteDetail, null, editing, true)
-  }
-
-  mergeProps (state, dispatchProps, ownProps) {
-    const currentWindow = state.get('currentWindow')
-    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
-    const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
-    const activeTab = tabState.getByTabId(state, activeTabId)
-
-    const props = {}
-    props.bookmarked = activeTab && activeTab.get('bookmarked')
-
-    return props
-  }
-
   componentDidMount () {
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
   }
 
+  onToggleBookmark () {
+    if (this.props.isBookmarked) {
+      windowActions.editBookmark(true, this.props.bookmarkKey)
+    } else {
+      windowActions.onBookmarkAdded(true, this.props.bookmarkKey)
+    }
+  }
+
   render () {
     return (
       <NormalizedButton navigationButton
         custom={[
           styles.bookmarkButton,
-          this.bookmarked && styles.bookmarkButton_bookmarked
+          this.props.isBookmarked && styles.bookmarkButton_bookmarked
         ]}
-        l10nId={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
-        testId={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
+        l10nId={this.props.isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+        testId={this.props.isBookmarked ? 'bookmarked' : 'notBookmarked'}
         onClick={this.onToggleBookmark}
       />
     )
@@ -105,4 +65,4 @@ const styles = StyleSheet.create({
   }
 })
 
-module.exports = ReduxComponent.connect(BookmarkButton)
+module.exports = BookmarkButton
diff --git a/app/renderer/components/navigation/buttons/homeButton.js b/app/renderer/components/navigation/buttons/homeButton.js
index 718ec955fb2..689080b7885 100644
--- a/app/renderer/components/navigation/buttons/homeButton.js
+++ b/app/renderer/components/navigation/buttons/homeButton.js
@@ -3,11 +3,10 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const Immutable = require('immutable')
 const {StyleSheet} = require('aphrodite/no-important')
 
 // Components
-const ReduxComponent = require('../../reduxComponent')
+const ImmutableComponent = require('../../immutableComponent')
 const {NormalizedButton} = require('../../common/browserButton')
 
 // Actions
@@ -16,23 +15,32 @@ const appActions = require('../../../../../js/actions/appActions')
 // Constants
 const settings = require('../../../../../js/constants/settings')
 
-// State
-const tabState = require('../../../../common/state/tabState')
-const frameStateUtil = require('../../../../../js/state/frameStateUtil')
-
 // Utils
-const eventUtil = require('../../../../../js/lib/eventUtil')
 const {getSetting} = require('../../../../../js/settings')
+const eventUtil = require('../../../../../js/lib/eventUtil')
 
+// Styles
 const homeButtonIcon = require('../../../../../img/toolbar/home_btn.svg')
 
-class HomeButton extends React.Component {
+class HomeButton extends ImmutableComponent {
   constructor (props) {
     super(props)
     this.onHome = this.onHome.bind(this)
   }
 
+  componentDidMount () {
+    this.homeButton.addEventListener('auxclick', this.onHome)
+  }
+
+  componentWillUnmount () {
+    this.homeButton.removeEventListener('auxclick', this.onHome)
+  }
+
   onHome (e) {
+    if (e.button === 2) {
+      return
+    }
+
     getSetting(settings.HOMEPAGE).split('|')
       .forEach((homepage, i) => {
         if (i === 0 && !eventUtil.isForSecondaryAction(e)) {
@@ -46,18 +54,6 @@ class HomeButton extends React.Component {
       })
   }
 
-  mergeProps (state, dispatchProps, ownProps) {
-    const currentWindow = state.get('currentWindow')
-    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
-    const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
-
-    const props = {}
-
-    props.activeTabId = activeTabId
-
-    return props
-  }
-
   // BEM Level: navigationBar__buttonContainer
   render () {
     return <NormalizedButton
@@ -65,6 +61,7 @@ class HomeButton extends React.Component {
       custom={styles.homeButton}
       testId='homeButton'
       l10nId='homeButton'
+      ref={(node) => { this.homeButton = node }}
       onClick={this.onHome}
     />
   }
@@ -77,4 +74,4 @@ const styles = StyleSheet.create({
   }
 })
 
-module.exports = ReduxComponent.connect(HomeButton)
+module.exports = HomeButton
diff --git a/app/renderer/components/navigation/buttons/navigationBarButtonContainer.js b/app/renderer/components/navigation/buttons/navigationBarButtonContainer.js
index 7b5aed340cc..9dca68c3cdd 100644
--- a/app/renderer/components/navigation/buttons/navigationBarButtonContainer.js
+++ b/app/renderer/components/navigation/buttons/navigationBarButtonContainer.js
@@ -4,6 +4,8 @@
 
 const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
+
+const ImmutableComponent = require('../../immutableComponent')
 const globalStyles = require('../../styles/global')
 
 // This component normalizes the wrapper for buttons called on files
@@ -11,9 +13,7 @@ const globalStyles = require('../../styles/global')
 // visual regressions and style inconsistency.
 // Ref https://github.com/brave/browser-laptop/pull/9299#discussion_r124714562
 
-// TODO (Cezar): Check if stateless components can benefit
-// from reduxComponent by setting ownProps to stateless props.
-class NavigationBarButtonContainer extends React.Component {
+class NavigationBarButtonContainer extends ImmutableComponent {
   render () {
     return (
       <div className={css(
diff --git a/app/renderer/components/navigation/buttons/reloadButton.js b/app/renderer/components/navigation/buttons/reloadButton.js
index cdd3810ba69..a9fa656dda1 100644
--- a/app/renderer/components/navigation/buttons/reloadButton.js
+++ b/app/renderer/components/navigation/buttons/reloadButton.js
@@ -3,11 +3,11 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const Immutable = require('immutable')
 const ipc = require('electron').ipcRenderer
+const {StyleSheet} = require('aphrodite/no-important')
 
 // Components
-const ReduxComponent = require('../../reduxComponent')
+const ImmutableComponent = require('../../immutableComponent')
 const LongPressButton = require('../../common/longPressButton')
 
 // Actions
@@ -16,19 +16,14 @@ const appActions = require('../../../../../js/actions/appActions')
 // Constants
 const messages = require('../../../../../js/constants/messages')
 
-// State
-const tabState = require('../../../../common/state/tabState')
-const frameStateUtil = require('../../../../../js/state/frameStateUtil')
-
 // Utils
 const eventUtil = require('../../../../../js/lib/eventUtil')
 const contextMenus = require('../../../../../js/contextMenus')
 
-const {StyleSheet} = require('aphrodite/no-important')
-
+// Styles
 const reloadButtonIcon = require('../../../../../img/toolbar/reload_btn.svg')
 
-class ReloadButton extends React.Component {
+class ReloadButton extends ImmutableComponent {
   constructor (props) {
     super(props)
     this.onReload = this.onReload.bind(this)
@@ -47,18 +42,6 @@ class ReloadButton extends React.Component {
     contextMenus.onReloadContextMenu(target)
   }
 
-  mergeProps (state, dispatchProps, ownProps) {
-    const currentWindow = state.get('currentWindow')
-    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
-    const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
-
-    const props = {}
-
-    props.activeTabId = activeTabId
-
-    return props
-  }
-
   render () {
     // BEM Level: navigationBar__buttonContainer
     return <LongPressButton
@@ -79,4 +62,4 @@ const styles = StyleSheet.create({
   }
 })
 
-module.exports = ReduxComponent.connect(ReloadButton)
+module.exports = ReloadButton
diff --git a/app/renderer/components/navigation/buttons/stopButton.js b/app/renderer/components/navigation/buttons/stopButton.js
index 76ceade5700..a7a84d51e54 100644
--- a/app/renderer/components/navigation/buttons/stopButton.js
+++ b/app/renderer/components/navigation/buttons/stopButton.js
@@ -3,28 +3,41 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
+const ipc = require('electron').ipcRenderer
 const {StyleSheet} = require('aphrodite/no-important')
+
+// Components
+const ImmutableComponent = require('../../immutableComponent')
 const {NormalizedButton} = require('../../common/browserButton')
 
+// Constants
+const messages = require('../../../../../js/constants/messages')
+
+// Actions
+const windowActions = require('../../../../../js/actions/windowActions')
+
+// Styles
 const stopLoadingButtonIcon = require('../../../../../img/toolbar/stoploading_btn.svg')
 
-class StopButton extends React.Component {
+class StopButton extends ImmutableComponent {
+  constructor (props) {
+    super(props)
+    this.onStop = this.onStop.bind(this)
+  }
+
+  onStop () {
+    // TODO (bridiver) - remove shortcut
+    ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_STOP)
+    windowActions.onStop(this.props.isFocused, this.props.shouldRenderSuggestions)
+  }
+
   // BEM Level: navigationBar__buttonContainer
   render () {
     return <NormalizedButton
       navigationButton
       custom={styles.stopButton}
       l10nid='stopButton'
-      onClick={
-        /*
-        TODO: check if this is ok to ship as-is.
-        This is likely not the best way given it is
-        expecting the property from parent component but this
-        was a quick workaround to avoid dupping code in both navigationbar
-        and this component.
-        */
-        this.props.onStop
-      }
+      onClick={this.onStop}
     />
   }
 }
diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
index 50c4b5ad36a..1c00db4da96 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/app/renderer/components/navigation/navigationBar.js
@@ -4,7 +4,7 @@
 
 const React = require('react')
 const Immutable = require('immutable')
-const ipc = require('electron').ipcRenderer
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
@@ -19,16 +19,11 @@ const HomeButton = require('./buttons/homeButton')
 const BookmarkButton = require('./buttons/bookmarkButton')
 const PublisherToggle = require('./publisherToggle')
 
-// Actions
-const windowActions = require('../../../../js/actions/windowActions')
-
 // Constants
-const messages = require('../../../../js/constants/messages')
 const settings = require('../../../../js/constants/settings')
 
 // State
 const tabState = require('../../../common/state/tabState')
-const menuBarState = require('../../../common/state/menuBarState')
 const publisherState = require('../../../common/lib/publisherUtil')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
 
@@ -37,29 +32,14 @@ const cx = require('../../../../js/lib/classSet')
 const {getBaseUrl} = require('../../../../js/lib/appUrlUtil')
 const siteUtil = require('../../../../js/state/siteUtil')
 const {getSetting} = require('../../../../js/settings')
-const {isDarwin} = require('../../../common/lib/platformUtil')
-const {isFullScreen} = require('../../currentWindow')
+const platformUtil = require('../../../common/lib/platformUtil')
 
-const {StyleSheet, css} = require('aphrodite/no-important')
+// Styles
 const globalStyles = require('../styles/global')
 
-class NavigationBar extends React.Component {
-  constructor (props) {
-    super(props)
-    this.onStop = this.onStop.bind(this)
-  }
-
-  onStop () {
-    // TODO (bridiver) - remove shortcut
-    ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_STOP)
-    windowActions.onStop(this.props.isFocused, this.props.shouldRenderSuggestions)
-  }
-
-  componentDidMount () {
-    ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
-    ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
-  }
+const isDarwin = platformUtil.isDarwin()
 
+class NavigationBar extends React.Component {
   mergeProps (state, ownProps) {
     const currentWindow = state.get('currentWindow')
     const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
@@ -96,7 +76,7 @@ class NavigationBar extends React.Component {
     props.titleMode = titleMode
     props.isBookmarked = activeFrameKey !== undefined &&
       activeTab && activeTab.get('bookmarked')
-    props.isWideURLbarEnabled = getSetting(settings.WIDE_URL_BAR)
+    props.isWideUrlBarEnabled = getSetting(settings.WIDE_URL_BAR)
     props.showBookmarkHanger = bookmarkDetail.get('isBookmarkHanger', false)
     props.isLoading = loading
     props.showPublisherToggle = publisherState.shouldShowAddPublisherButton(state, location, publisherId)
@@ -107,31 +87,17 @@ class NavigationBar extends React.Component {
     props.shouldRenderSuggestions = navbar.getIn(['urlbar', 'suggestions', 'shouldRender']) === true
     props.activeTabId = activeTabId
     props.bookmarkKey = siteUtil.getSiteKey(activeFrame)
-    props.showHomeButton = !props.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
-
-    props.location = location
-    props.isDarwin = isDarwin()
-    props.isFullScreen = isFullScreen()
-    props.bookmarkDetail = bookmarkDetail
-    props.menubarVisible = menuBarState.isMenuBarVisible(currentWindow)
-    props.siteSettings = state.get('siteSettings')
-    props.synopsis = state.getIn(['publisherInfo', 'synopsis']) || new Immutable.Map()
-    props.locationInfo = state.get('locationInfo')
 
     return props
   }
 
   render () {
-    if (this.props.dontRender) {
-      return null
-    }
-
     return <div id='navigationBar'
       data-test-id='navigationBar'
       data-frame-key={this.props.activeFrameKey}
       className={cx({
         titleMode: this.props.titleMode,
-        [css(styles.navigationBar, (this.props.isDarwin && this.props.isFullScreen) && styles.navigationBar_isDarwin_isFullScreen, this.props.titleMode && styles.navigationBar_titleMode, this.props.isWideURLbarEnabled && styles.navigationBar_wide)]: true
+        [css(styles.navigationBar, (isDarwin && this.props.isFullScreen) && styles.navigationBar_isDarwin_isFullScreen, this.props.titleMode && styles.navigationBar_titleMode, this.props.isWideUrlBarEnabled && styles.navigationBar_wide)]: true
       })}>
       {
         this.props.showBookmarkHanger
@@ -144,8 +110,12 @@ class NavigationBar extends React.Component {
           <NavigationBarButtonContainer isStandalone onNavigationBarChrome>
             {
               this.props.isLoading
-              ? <StopButton onStop={this.onStop} />
-              : <ReloadButton />
+              ? <StopButton
+                activeTabId={this.props.activeTabId}
+                isFocused={this.props.isFocused}
+                shouldRenderSuggestions={this.props.shouldRenderSuggestions}
+              />
+              : <ReloadButton activeTabId={this.props.activeTabId} />
             }
           </NavigationBarButtonContainer>
         )
@@ -163,10 +133,15 @@ class NavigationBar extends React.Component {
       {
         !this.props.titleMode
         ? (
-          <NavigationBarButtonContainer isSquare isNested
+          <NavigationBarButtonContainer
+            isSquare
+            isNested
             containerFor={styles.navigationBar__urlBarStart}
           >
-            <BookmarkButton />
+            <BookmarkButton
+              isBookmarked={this.props.isBookmarked}
+              bookmarkKey={this.props.bookmarkKey}
+            />
           </NavigationBarButtonContainer>
           )
         : null
@@ -175,7 +150,9 @@ class NavigationBar extends React.Component {
       {
         !this.props.titleMode && this.props.showPublisherToggle
         ? (
-          <NavigationBarButtonContainer isSquare isNested
+          <NavigationBarButtonContainer
+            isSquare
+            isNested
             containerFor={styles.navigationBar__urlBarEnd}
           >
             <PublisherToggle />
@@ -228,7 +205,6 @@ const styles = StyleSheet.create({
 
  // Applies for the end urlBar nested button
  // currently for PublisherToggle
- // TODO: remove animation of the toggle when titleMode is enabled
   navigationBar__urlBarEnd: {
     borderLeft: 'none',
     borderTopLeftRadius: 0,
diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
index 41bc420162d..7573a521093 100644
--- a/app/renderer/components/navigation/urlBar.js
+++ b/app/renderer/components/navigation/urlBar.js
@@ -38,11 +38,10 @@ const {getCurrentWindowId} = require('../../currentWindow')
 const {normalizeLocation, getNormalizedSuggestion} = require('../../../common/lib/suggestion')
 const isDarwin = require('../../../common/lib/platformUtil').isDarwin()
 const publisherUtil = require('../../../common/lib/publisherUtil')
-const {isWindows} = require('../../../common/lib/platformUtil')
+const isWindows = require('../../../common/lib/platformUtil').isWindows()
 
-// Icons
+// Styles
 const iconNoScript = require('../../../../img/url-bar-no-script.svg')
-
 const globalStyles = require('../styles/global')
 
 class UrlBar extends React.Component {
@@ -389,24 +388,6 @@ class UrlBar extends React.Component {
     return ''
   }
 
-  get URLBarIcon () {
-    return <NavigationBarButtonContainer isSquare>
-      <UrlBarIcon
-        activateSearchEngine={this.props.activateSearchEngine}
-        active={this.props.isActive}
-        isSecure={this.props.isSecure}
-        isHTTPPage={this.props.isHTTPPage}
-        loading={this.props.loading}
-        location={this.props.location}
-        searchSelectEntry={this.props.searchSelectEntry}
-        title={this.props.title}
-        titleMode={this.props.titleMode}
-        isSearching={this.props.location !== this.props.urlbarLocation}
-        activeTabShowingMessageBox={this.props.activeTabShowingMessageBox}
-      />
-    </NavigationBarButtonContainer>
-  }
-
   // BEM Level: urlbarForm__titleBar
   get titleBar () {
     return <div id='titleBar' data-test-id='titleBar' className={css(styles.titleBar)}>
@@ -433,7 +414,7 @@ class UrlBar extends React.Component {
       data-test-id='urlInput'
       className={cx({
         private: this.private,
-        [css(styles.input, this.props.isWindows && styles.input_windows)]: true
+        [css(styles.input, isWindows && styles.input_windows)]: true
       })}
       readOnly={this.props.titleMode}
       ref={(node) => { this.urlInput = node }}
@@ -523,7 +504,6 @@ class UrlBar extends React.Component {
     props.activeFrameKey = activeFrame.get('key')
     props.urlbarLocation = urlbarLocation
     props.isFocused = urlbar.get('focused')
-    props.isWindows = isWindows()
     props.frameLocation = frameLocation
     props.isSelected = urlbar.get('selected')
     props.noScriptIsVisible = currentWindow.getIn(['ui', 'noScriptInfo', 'isVisible'], false)
@@ -550,7 +530,9 @@ class UrlBar extends React.Component {
       })}
       action='#'
       id='urlbar'>
-      {this.URLBarIcon}
+      <NavigationBarButtonContainer isSquare>
+        <UrlBarIcon titleMode={this.props.titleMode} />
+      </NavigationBarButtonContainer>
       {
         !this.props.titleMode
         ? this.input
diff --git a/app/renderer/components/navigation/urlBarIcon.js b/app/renderer/components/navigation/urlBarIcon.js
index d28fd9480e5..55cdca9664d 100644
--- a/app/renderer/components/navigation/urlBarIcon.js
+++ b/app/renderer/components/navigation/urlBarIcon.js
@@ -51,17 +51,12 @@ class UrlBarIcon extends React.Component {
     return showSearch || defaultToSearch
   }
 
-  get isAboutPage () {
-    return isSourceAboutUrl(this.props.location) &&
-      this.props.location !== 'about:newtab'
-  }
-
   get iconCssClasses () {
     if (isPotentialPhishingUrl(this.props.location)) {
       return [globalStyles.appIcons.exclamationTriangle, css(styles.urlBarIcon_large, styles.urlBarIcon_siteInsecureColor)]
     } else if (this.isSearch) {
       return [globalStyles.appIcons.search]
-    } else if (this.isAboutPage && !this.props.titleMode) {
+    } else if (this.props.isAboutPage && !this.props.titleMode) {
       return [globalStyles.appIcons.list]
     } else if (this.props.isHTTPPage && !this.props.active) {
       // NOTE: EV style not approved yet; see discussion at https://github.com/brave/browser-laptop/issues/791
@@ -83,7 +78,7 @@ class UrlBarIcon extends React.Component {
 
     // Move fa-list (not fa-search) icon on about pages 1px down
     // ref: urlBarIcon_relative
-    const relativeIcon = this.isAboutPage && !this.isSearch
+    const relativeIcon = this.props.isAboutPage && !this.isSearch
 
     const iconClasses = {
       [css(styles.urlBarIcon, this.props.titleMode && styles.urlBarIcon_titleMode, this.isSearch && styles.urlBarIcon_isSearch, relativeIcon && styles.urlBarIcon_relative)]: true
diff --git a/test/navbar-components/navigationBarTest.js b/test/navbar-components/navigationBarTest.js
index 7e1a00fade0..bb63c9bbab7 100644
--- a/test/navbar-components/navigationBarTest.js
+++ b/test/navbar-components/navigationBarTest.js
@@ -379,10 +379,8 @@ describe('navigationBar tests', function () {
           this.app.client
             .activateURLMode()
             .waitForExist(urlBarIcon)
-
-            // TODO: Fix
             .getAttribute(urlBarIcon, 'class').then((classes) =>
-              classes.includes('fa-unlock') && classes.includes('insecure-color')
+              classes.includes('fa-unlock')
         ))
         .windowByUrl(Brave.browserWindowUrl)
         .click(urlBarIcon)
@@ -401,10 +399,8 @@ describe('navigationBar tests', function () {
           this.app.client
             .activateURLMode()
             .waitForExist(urlBarIcon)
-
-            // TODO: Fix
             .getAttribute(urlBarIcon, 'class').then((classes) =>
-              classes.includes('fa-exclamation-triangle') && classes.includes('insecure-color')
+              classes.includes('fa-exclamation-triangle')
         ))
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible('[data-test-id="phishingConnectionInfo"]')
@@ -422,10 +418,8 @@ describe('navigationBar tests', function () {
         .click(activeWebview)
         .waitForExist(titleBar)
         .waitForVisible(urlBarIcon, 1)
-
-        // TODO: Fix
         .getAttribute(urlBarIcon, 'class').then((classes) =>
-          classes.includes('fa-unlock') && classes.includes('insecure-color')
+          classes.includes('fa-unlock')
         )
     })
     it('Shows secure URL icon', function * () {
@@ -475,11 +469,9 @@ describe('navigationBar tests', function () {
       yield this.app.client
         .activateURLMode()
         .waitForExist(urlBarIcon)
-
-        // TODO: Fix
         .waitUntil(() =>
           this.app.client.getAttribute(urlBarIcon, 'class').then((classes) =>
-            classes.includes('fa-unlock') && !classes.includes('insecure-color')
+            classes.includes('fa-unlock')
           )
         )
         .click(urlBarIcon)
@@ -492,10 +484,8 @@ describe('navigationBar tests', function () {
         .activateURLMode()
         .waitForExist(urlBarIcon)
         .waitUntil(() =>
-
-          // TODO: Fix
           this.app.client.getAttribute(urlBarIcon, 'class').then((classes) =>
-            classes.includes('fa-unlock') && classes.includes('insecure-color')
+            classes.includes('fa-unlock')
           )
         )
     })
@@ -515,10 +505,8 @@ describe('navigationBar tests', function () {
         .waitForInputText(urlInput, page1Url)
         .waitForExist(urlBarIcon)
         .waitUntil(() =>
-
-          // TODO: Fix
           this.app.client.getAttribute(urlBarIcon, 'class').then((classes) =>
-            classes.includes('fa-unlock') && classes.includes('insecure-color')
+            classes.includes('fa-unlock')
           )
         )
     })