Various URL bar related design fixes

Resolves brave#8058 Auditors: @bradleyrichter @bsclifton Test Plan: - specified in brave#8058
NejcZdovc · Apr 3, 2017 · 8d8a749 · 8d8a749
1 parent c390661
commit 8d8a749
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/app/renderer/components/publisherToggle.js b/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: '#BBB',
  borderRadius: '0 4px 4px 0',
  borderTopLeftRadius: '0',
- borderBottomLeftRadius: '0',
- borderBottomColor: 'rgba(0, 0, 0, 0.1)'
+ borderBottomLeftRadius: '0'
  },
 
  noFundVerified: {

diff --git a/js/components/navigationBar.js b/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}
  />
  {

diff --git a/less/navigationBar.less b/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 #bbb, inset 0 0 0 3px rgba(55, 169, 253, 0.4);
  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,13 +723,15 @@
  &:not(.titleMode) {
  > * {
  animation: fadeIn .6s;
- opacity: 0;
- animation-fill-mode: forwards;
  }
 
  .urlbarForm {
  &.noBorderRadius {
  border-radius: 0;
+
+ legend:before {
+ border-radius: 0;
+ }
  }
  }