Refactor urlBarIcon

Full changelog: f81ea52

Test Plan: available on #9299 (comment)

app/renderer/components/navigation/urlBar.js

@@ -512,10 +512,7 @@ class UrlBar extends React.Component {
       })}
       action='#'
       id='urlbar'>
-      <div className={cx({
-        urlbarIconContainer: true,
-        [css(commonStyles.navigator__urlbarForm__urlbarIconContainer)]: true
-      })}>
+      <div className={css(commonStyles.navigator__urlbarForm__urlbarIconContainer)}>
         <UrlBarIcon
           titleMode={this.props.titleMode}
         />

app/renderer/components/navigation/urlBarIcon.js

@@ -25,6 +25,9 @@ const frameStateUtil = require('../../../../js/state/frameStateUtil')
 const {isSourceAboutUrl} = require('../../../../js/lib/appUrlUtil')
 const {isPotentialPhishingUrl} = require('../../../../js/lib/urlutil')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+
 const searchIconSize = 16
 
 class UrlBarIcon extends React.Component {
@@ -34,26 +37,6 @@ class UrlBarIcon extends React.Component {
     this.onDragStart = this.onDragStart.bind(this)
   }
 
-  get iconCssClasses () {
-    if (this.props.isPotentialPhishingUrl) {
-      return ['fa-exclamation-triangle', 'insecure-color']
-    } else if (this.isSearch) {
-      return ['fa-search']
-    } else if (this.props.isAboutPage && !this.props.titleMode) {
-      return ['fa-list']
-    } else if (this.props.isHTTPPage && !this.props.active) {
-      if (this.props.isSecure === true) {
-        return ['fa-lock']
-      } else if (this.props.isSecure === false || this.props.isSecure === 2) {
-        return ['fa-unlock', 'insecure-color']
-      } else if (this.props.isSecure === 1) {
-        return ['fa-unlock']
-      }
-    }
-
-    return []
-  }
-
   /**
    * search icon:
    * - does not show when in title mode
@@ -62,29 +45,54 @@ class UrlBarIcon extends React.Component {
    */
   get isSearch () {
     const showSearch = this.props.isSearching && !this.props.titleMode
-
     const defaultToSearch = (!this.props.isHTTPPage || this.props.active) &&
                             !this.props.titleMode &&
                             !this.props.isAboutPage
-
     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) {
+      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
+      if (this.props.isSecure === true) {
+        return [globalStyles.appIcons.lock, css(styles.urlbarIcon_large)]
+      } else if (this.props.isSecure === false || this.props.isSecure === 2) {
+        return [globalStyles.appIcons.unlock, css(styles.urlbarIcon_large, styles.urlbarIcon_siteInsecureColor)]
+      } else if (this.props.isSecure === 1) {
+        return [globalStyles.appIcons.unlock, css(styles.urlbarIcon_large)]
+      }
+    }
+    return []
+  }
+
   get iconClasses () {
     if (this.props.activateSearchEngine) {
-      return cx({
-        urlbarIcon: true
-      })
+      return null
     }
 
+    // Move fa-list (not fa-search) icon on about pages 1px down
+    // ref: urlbarIcon_relative
+    const relativeIcon = this.isAboutPage && !this.isSearch
+
     const iconClasses = {
-      urlbarIcon: true,
-      fa: true
+      [css(styles.urlbarIcon, this.props.titleMode && styles.urlbarIcon_titleMode, this.isSearch && styles.urlbarIcon_isSearch, relativeIcon && styles.urlbarIcon_relative)]: true
     }
 
     this.iconCssClasses.forEach((iconClass) => {
       iconClasses[iconClass] = true
     })
+
     return cx(iconClasses)
   }
 
@@ -97,7 +105,8 @@ class UrlBarIcon extends React.Component {
       backgroundImage: `url(${this.props.searchSelectImage})`,
       backgroundSize: searchIconSize,
       width: searchIconSize,
-      height: searchIconSize
+      height: searchIconSize,
+      WebkitAppRegion: 'no-drag'
     }
   }
 
@@ -146,18 +155,67 @@ class UrlBarIcon extends React.Component {
   render () {
     // allow click and drag (unless tab is showing a message box)
     const props = {}
+
     if (!this.props.activeTabShowingMessageBox) {
       props.draggable = true
       props.onClick = this.onClick
       props.onDragStart = this.onDragStart
     }
 
     return <span
-      data-test-id='urlBarIcon'
+      data-test-id='urlbarIcon'
       {...props}
       className={this.iconClasses}
       style={this.iconStyles} />
   }
 }
 
+const styles = StyleSheet.create({
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L893-L896
+  urlbarIcon: {
+    color: globalStyles.color.siteSecureColor,
+    fontSize: '12px',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+
+    // Disable window dragging so that dragging the favicon is possible.
+    // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L704-L707
+    WebkitAppRegion: 'no-drag'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L801-L805
+  urlbarIcon_titleMode: {
+    display: 'inline-block',
+    opacity: 0.5,
+    minWidth: 0
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L900-L906
+  // about:newtab
+  urlbarIcon_isSearch: {
+
+    // 50% of #5a5a5a
+    color: 'rgba(90, 90, 90, .5)'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L908-L913
+  urlbarIcon_large: {
+
+    // Refactor iconClasses to remove !important
+    fontSize: '16px !important'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L897-L898
+  urlbarIcon_relative: {
+    position: 'relative',
+    bottom: '-1px'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L915-L917
+  urlbarIcon_siteInsecureColor: {
+    color: globalStyles.color.siteInsecureColor
+  }
+})
+
 module.exports = ReduxComponent.connect(UrlBarIcon)

app/renderer/components/styles/global.js

@@ -225,6 +225,7 @@ const globalStyles = {
     flyoutDialog: '13px',
     prefsPanelHeading: '23px'
   },
+
   appIcons: {
     clipboard: 'fa fa-clipboard',
     closeTab: 'fa fa-times-circle',
@@ -240,8 +241,14 @@ const globalStyles = {
     moreInfo: 'fa fa-info-circle',
     angleDoubleRight: 'fa fa-angle-double-right',
     findPrev: 'fa fa-caret-up',
-    findNext: 'fa fa-caret-down'
+    findNext: 'fa fa-caret-down',
+    exclamationTriangle: 'fa fa-exclamation-triangle',
+    search: 'fa fa-search',
+    list: 'fa fa-list',
+    lock: 'fa fa-lock',
+    unlock: 'fa fa-unlock'
   },
+
   animations: {
     subtleShowUp: {
       opacity: 0,

less/navigationBar.less

@@ -599,14 +599,6 @@
     -webkit-app-region: no-drag;
   }
 
-  form {
-    -webkit-app-region: drag;
-    // Disable window dragging so that selecting text and dragging the favicon is possible.
-    input, .urlbarIcon {
-      -webkit-app-region: no-drag;
-    }
-  }
-
   &:not(.titleMode) {
     > * {
       animation: fadeIn .6s;
@@ -629,17 +621,6 @@
     // border-radius: @borderRadiusURL;
     // box-shadow: inset 0 0 0 1px rgba(187, 187, 187, 1.0);
 
-    .urlbarIcon {
-      display: inline-block;
-      opacity: 0.5;
-      min-width: 0;
-
-      &.insecure-color {
-        color: @siteInsecureColor;
-        opacity: 1.0;
-      }
-    }
-
     .bookmarkButton {
       &:not(.removeBookmarkButton) {
         display: none;
@@ -690,40 +671,6 @@
         margin-right: 3px;
       }
     }
-
-    .urlbarIconContainer {
-      .urlbarIcon {
-        color: @siteSecureColor;
-        font-size: 12px;
-        background-repeat: no-repeat;
-        background-position: center;
-        position: relative;
-        bottom: -1px;
-
-        // about:newtab
-        &.fa-search {
-          position: relative;
-          bottom: 0;
-          // 50% of #5a5a5a
-          color: rgba(90, 90, 90, 0.5);
-        }
-
-        &.fa-lock,
-        &.fa-unlock,
-        &.fa-exclamation-triangle {
-          font-size: 16px;
-          bottom: 0;
-        }
-
-        &.insecure-color {
-          color: @siteInsecureColor;
-        }
-
-        &.extendedValidation {
-          color: @siteEVColor;
-        }
-      }
-    }
   }
 }
 

less/variables.less

@@ -45,7 +45,6 @@
 @focusUrlbarOutline: rgba(55, 169, 253, 0.4);
 @siteSecureColor: @buttonColor;
 @siteInsecureColor: #C63626;
-@siteEVColor: green;
 @loadTimeColor: @highlightBlue;
 @activeTabDefaultColor: @chromePrimary;
 @buttonColor: #5a5a5a;

test/lib/selectors.js

@@ -16,7 +16,7 @@ module.exports = {
   tabPage1: '[data-tab-page="0"]',
   tabPage2: '[data-tab-page="1"]',
   closeTab: '[data-test-id="closeTabIcon"]',
-  urlbarIcon: '[data-test-id="urlBarIcon"]',
+  urlbarIcon: '[data-test-id="urlbarIcon"]',
   urlBarSuggestions: '.urlBarSuggestions',
   titleBar: '#titleBar',
   navigatorBookmarked: '[data-test-id="bookmarked"]',