Various URL bar related design fixes

Resolves #8058

Auditors: @bradleyrichter @bsclifton

Test Plan:
- specified in #8058

app/renderer/components/publisherToggle.js

@@ -132,11 +132,10 @@ const styles = StyleSheet.create({
     WebkitAppRegion: 'no-drag',
     borderWidth: '1px 1px 1px 0px',
     borderStyle: 'solid',
-    borderColor: '#CBCBCB',
+    borderColor: globalStyles.color.urlBarOutline,
     borderRadius: '0 4px 4px 0',
     borderTopLeftRadius: '0',
-    borderBottomLeftRadius: '0',
-    borderBottomColor: 'rgba(0, 0, 0, 0.1)'
+    borderBottomLeftRadius: '0'
   },
 
   noFundVerified: {

app/renderer/components/styles/global.js

@@ -70,7 +70,8 @@ const globalStyles = {
     statsBlue: '#0796fa',
     statsLightGray: '#999999',
     defaultIconBackground: '#F7F7F7',
-    almostInvisible: 'rgba(255,255,255,0.01)'
+    almostInvisible: 'rgba(255,255,255,0.01)',
+    urlBarOutline: '#bbb'
   },
   radius: {
     borderRadius: '4px',

js/components/navigationBar.js

@@ -138,10 +138,6 @@ class NavigationBar extends ImmutableComponent {
       : true
   }
 
-  get isPublisherButtonEnabled () {
-    return UrlUtil.isHttpOrHttps(this.props.location) && this.visiblePublisher
-  }
-
   componentDidMount () {
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
@@ -243,7 +239,7 @@ class NavigationBar extends ImmutableComponent {
         urlbar={this.props.navbar.get('urlbar')}
         onStop={this.onStop}
         menubarVisible={this.props.menubarVisible}
-        noBorderRadius={this.isPublisherButtonEnabled}
+        noBorderRadius={!isSourceAboutUrl(this.props.location)}
         activeTabShowingMessageBox={this.props.activeTabShowingMessageBox}
         />
       {

less/navigationBar.less

@@ -660,19 +660,24 @@
     z-index: @zindexUrlbarNotLegend;
   }
 
-  input:focus + legend:before {
+  legend:before {
     content: ' ';
     position: absolute;
     background: @navigationBarBackgroundActive;
-    border-radius: 4px;
-    box-shadow: 0 0 1px @focusUrlbarOutline, inset 0 0 2px @focusUrlbarOutline, inset 0 1px 8px rgba(0, 137, 255, 0.1);
+    border-radius: 0 4px 4px 0;
     color: #333;
+    box-shadow: inset 0 0 0 1px @urlBarOutline, inset 0 0 0 3px @focusUrlbarOutline;
     outline: none;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     z-index: @zindexNavigationBar;
+    display: none;
+  }
+
+  input:focus + legend:before {
+    display: block;
   }
 
   #navigator:not(.titleMode) & {
@@ -718,20 +723,22 @@
   &:not(.titleMode) {
     > * {
       animation: fadeIn .6s;
-      opacity: 0;
-      animation-fill-mode: forwards;
     }
 
     .urlbarForm {
         &.noBorderRadius {
         border-radius: 0;
+
+        legend:before {
+          border-radius: 0;
+        }
       }
     }
 
     // Create 25x25 squares and place the buttons at the center of each container
     .bookmarkButtonContainer,
     .addPublisherButtonContainer {
-      border: 1px solid #bbb;
+      border: 1px solid @urlBarOutline;
       border-radius: @borderRadiusURL;
       box-sizing: border-box;
       display: flex;

less/variables.less

@@ -42,7 +42,7 @@
 @defaultFontSize: 13px;
 @contextMenuFontSize: 14px;
 @audioColor: @highlightBlue;
-@focusUrlbarOutline: @highlightBlue;
+@focusUrlbarOutline: rgba(55, 169, 253, 0.4);
 @siteSecureColor: @buttonColor;
 @siteInsecureColor: #C63626;
 @siteEVColor: green;
@@ -54,6 +54,7 @@
 @braveMediumOrange: rgb(232, 72, 0);
 @braveDarkOrange: #D44600;
 @dragSpacing: 50px;
+@urlBarOutline: #bbb;
 
 @switchBG_on: #ff6000;
 @switchBG_off: #ccc;