Merge pull request #8059 from NejcZdovc/hotfix/#8058-url

Various URL bar related design fixes
brave · Apr 4, 2017 · becdbba · becdbba
2 parents 8182478 + 94e02ef
commit becdbba
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 16 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: globalStyles.color.urlBarOutline,
  borderRadius: '0 4px 4px 0',
  borderTopLeftRadius: '0',
- borderBottomLeftRadius: '0',
- borderBottomColor: 'rgba(0, 0, 0, 0.1)'
+ borderBottomLeftRadius: '0'
  },
 
  noFundVerified: {

diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
@@ -71,7 +71,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',

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 @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;

diff --git a/less/variables.less b/less/variables.less
@@ -45,7 +45,7 @@
 @contextMenuFontSize: 14px;
 @settingItemSubtextFontSize: 0.95rem;
 @audioColor: @highlightBlue;
-@focusUrlbarOutline: @highlightBlue;
+@focusUrlbarOutline: rgba(55, 169, 253, 0.4);
 @siteSecureColor: @buttonColor;
 @siteInsecureColor: #C63626;
 @siteEVColor: green;
@@ -57,6 +57,7 @@
 @braveMediumOrange: rgb(232, 72, 0);
 @braveDarkOrange: #D44600;
 @dragSpacing: 50px;
+@urlBarOutline: #bbb;
 
 @switchBG_on: #ff6000;
 @switchBG_off: #ccc;