Merge pull request #8714 from luixxiul/navigationBar-wide-url-bar

Add "wide URL bar" option
brave · May 19, 2017 · 1362dbc · 1362dbc
2 parents 2d70b9e + 446664b
commit 1362dbc
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 19 deletions.
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
@@ -326,7 +326,6 @@ alwaysAllow=Always allow
 alwaysDeny=Always deny
 alwaysAsk=Always ask
 autoHideMenuBar=Hide the menu bar by default
-disableTitleMode=Always show the URL bar
 tabsSettings=Tabs Settings
 braveStaysUpdated=Brave always stays updated.
 generalSettings=General Settings
@@ -367,4 +366,7 @@ scaleSizeSmaller=Smaller
 scaleSizeNormal=Normal
 scaleSizeLarger=Larger
 scaleSizeSuper=Supersize
+urlBarOptions=URL Bar Options
+disableTitleMode=Always show the URL bar
+wideURLbar=Use wide URL bar
 autoplay=Autoplay Media
diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
@@ -39,6 +39,8 @@ const UrlUtil = require('../../../../js/lib/urlutil')
 const {getSetting} = require('../../../../js/settings')
 const contextMenus = require('../../../../js/contextMenus')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+
 class NavigationBar extends React.Component {
  constructor (props) {
  super(props)
@@ -166,6 +168,7 @@ class NavigationBar extends React.Component {
  props.activeTabShowingMessageBox = activeTabShowingMessageBox
  props.locationInfo = state.get('locationInfo')
  props.titleMode = titleMode
+ props.isWideURLbarEnabled = getSetting(settings.WIDE_URL_BAR)
  props.activeTabId = activeTabId
 
  return props
@@ -181,7 +184,8 @@ class NavigationBar extends React.Component {
  ref='navigator'
  data-frame-key={this.props.activeFrameKey}
  className={cx({
- titleMode: this.props.titleMode
+ titleMode: this.props.titleMode,
+ [css(styles.navigator_wide)]: this.props.isWideURLbarEnabled
  })}>
  {
  this.props.bookmarkDetail && this.props.bookmarkDetail.get('isBookmarkHanger')
@@ -262,4 +266,14 @@ class NavigationBar extends React.Component {
  }
 }
 
+const styles = StyleSheet.create({
+ navigator_wide: {
+
+ // TODO: Refactor navigationBar.js to remove !important
+ maxWidth: '100% !important',
+ marginRight: '0 !important',
+ justifyContent: 'initial !important'
+ }
+})
+
 module.exports = ReduxComponent.connect(NavigationBar)
diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
@@ -182,6 +182,7 @@ class Navigator extends React.Component {
  props.isCounterEnabled = getSetting(settings.BLOCKED_COUNT_BADGE) &&
  props.totalBlocks &&
  props.shieldEnabled
+ props.isWideURLbarEnabled = getSetting(settings.WIDE_URL_BAR)
 
  // used in other functions
  props.isNavigable = activeFrame && isNavigatableAboutPage(getBaseUrl(activeFrame.get('location')))
@@ -241,10 +242,14 @@ class Navigator extends React.Component {
  </div>
  </div>
  <NavigationBar />
- <div className='topLevelEndButtons'>
+ <div className={cx({
+ topLevelEndButtons: true,
+ [css(styles.navigatorWrapper__topLevelEndButtons_isWideURLbarEnabled)]: this.props.isWideURLbarEnabled
+ })}>
  <div className={cx({
  extraDragArea: !this.props.menuBarVisible,
- allowDragging: this.props.shouldAllowWindowDrag
+ allowDragging: this.props.shouldAllowWindowDrag,
+ [css(styles.navigatorWrapper__topLevelEndButtons__extraDragArea_disabled)]: this.props.isWideURLbarEnabled
  })} />
  {
  this.props.showBrowserActions
@@ -317,5 +322,13 @@ const styles = StyleSheet.create({
  },
  braveMenuContainer: {
  position: 'relative'
+ },
+
+ // TODO: Refactor navigator.js with Aphrodite to remove !important
+ navigatorWrapper__topLevelEndButtons_isWideURLbarEnabled: {
+ marginLeft: '6px !important'
+ },
+ navigatorWrapper__topLevelEndButtons__extraDragArea_disabled: {
+ display: 'none'
  }
 })
diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
@@ -532,6 +532,7 @@ class UrlBar extends React.Component {
  props.isSelected = urlbar.get('selected')
  props.isFocused = urlbar.get('focused')
  props.isHTTPPage = isHTTPPage
+ props.isWideURLbarEnabled = getSetting(settings.WIDE_URL_BAR)
  props.activateSearchEngine = activateSearchEngine
  props.searchSelectEntry = urlbarSearchDetail
  props.autocompleteEnabled = urlbar.getIn(['suggestions', 'autocompleteEnabled'])
@@ -545,6 +546,7 @@ class UrlBar extends React.Component {
  return <form
  className={cx({
  urlbarForm: true,
+ [css(styles.urlbarForm_wide)]: this.props.isWideURLbarEnabled,
  noBorderRadius: this.props.noBorderRadius
  })}
  action='#'
@@ -638,6 +640,11 @@ const styles = StyleSheet.create({
  width: '14px',
  height: '14px',
  border: '0px'
+ },
+
+ urlbarForm_wide: {
+ // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L682-L684
+ maxWidth: '100%'
  }
 })
 

diff --git a/app/renderer/components/preferences/advancedTab.js b/app/renderer/components/preferences/advancedTab.js
@@ -24,7 +24,7 @@ const {changeSetting} = require('../../lib/settingsUtil')
 
 class AdvancedTab extends ImmutableComponent {
  render () {
- return <div>
+ return <section>
  <main className={css(styles.advancedTabMain)}>
  <DefaultSectionTitle data-l10n-id='contentSettings' />
  <SettingsList>
@@ -35,22 +35,30 @@ class AdvancedTab extends ImmutableComponent {
  </SettingsList>
 
  <DefaultSectionTitle data-l10n-id='toolbarUserInterfaceScale' />
- <SettingItem>
- <SettingDropdown
- value={getSetting(settings.TOOLBAR_UI_SCALE, this.props.settings)}
- onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TOOLBAR_UI_SCALE)}>
- data-type='float'>
- <option data-l10n-id='scaleSizeSmaller' value={scaleSize.SMALLER} />
- <option data-l10n-id='scaleSizeNormal' value={scaleSize.NORMAL} />
- <option data-l10n-id='scaleSizeLarger' value={scaleSize.LARGER} />
- <option data-l10n-id='scaleSizeSuper' value={scaleSize.SUPERSIZE} />
- </SettingDropdown>
- </SettingItem>
+ <SettingsList>
+ <SettingItem>
+ <SettingDropdown
+ value={getSetting(settings.TOOLBAR_UI_SCALE, this.props.settings)}
+ onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TOOLBAR_UI_SCALE)}>
+ data-type='float'>
+ <option data-l10n-id='scaleSizeSmaller' value={scaleSize.SMALLER} />
+ <option data-l10n-id='scaleSizeNormal' value={scaleSize.NORMAL} />
+ <option data-l10n-id='scaleSizeLarger' value={scaleSize.LARGER} />
+ <option data-l10n-id='scaleSizeSuper' value={scaleSize.SUPERSIZE} />
+ </SettingDropdown>
+ </SettingItem>
+ </SettingsList>
+
+ <DefaultSectionTitle data-l10n-id='urlBarOptions' />
+ <SettingsList>
+ <SettingCheckbox dataL10nId='disableTitleMode' prefKey={settings.DISABLE_TITLE_MODE} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+ <SettingCheckbox dataL10nId='wideURLbar' prefKey={settings.WIDE_URL_BAR} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+ </SettingsList>
  </main>
  <footer className={css(styles.moreInfo)}>
  <div data-l10n-id='requiresRestart' className={css(commonStyles.requiresRestart)} />
  </footer>
- </div>
+ </section>
  }
 }
 

diff --git a/docs/state.md b/docs/state.md
@@ -183,7 +183,8 @@ AppStore
  'extensions.pocket.enabled': boolean, // true if pocket is enabled
  'extensions.vimium.enabled': boolean, // true if vimium is enabled
  'general.autohide-menu': boolean, // true if the Windows menu should be autohidden
- 'general.bookmarks-toolbar-mode': boolean, // true to show bookmakrs toolbar
+ 'general.wide-url-bar': boolean, // true to use wide URL bar
+ 'general.bookmarks-toolbar-mode': boolean, // true to show bookmarks toolbar
  'general.check-default-on-startup': boolean, // true to check whether brave is default browser on startup
  'general.disable-title-mode': boolean, // true if title mode should always be disabled
  'general.downloads.default-save-path': string, // default path for saving files

diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -194,7 +194,6 @@ class GeneralTab extends ImmutableComponent {
  {
  isDarwin ? null : <SettingCheckbox dataL10nId='autoHideMenuBar' prefKey={settings.AUTO_HIDE_MENU} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
  }
- <SettingCheckbox dataL10nId='disableTitleMode' prefKey={settings.DISABLE_TITLE_MODE} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
  <SettingItemIcon dataL10nId='downloadDefaultPath' position='right' icon={require('../../img/icon_pencil.svg')} clickAction={this.openDownloadDialog}>
  <SettingTextbox
  spellCheck='false'

diff --git a/js/constants/appConfig.js b/js/constants/appConfig.js
@@ -127,6 +127,7 @@ module.exports = {
  'general.show-home-button': false,
  'general.useragent.value': null, // Set at runtime
  'general.autohide-menu': true,
+ 'general.wide-url-bar': false,
  'general.check-default-on-startup': true,
  'general.download-default-path': '',
  'general.download-always-ask': true,

diff --git a/js/constants/settings.js b/js/constants/settings.js
@@ -11,6 +11,7 @@ const settings = {
  DEFAULT_DOWNLOAD_SAVE_PATH: 'general.downloads.default-save-path',
  AUTO_HIDE_MENU: 'general.autohide-menu',
  DISABLE_TITLE_MODE: 'general.disable-title-mode',
+ WIDE_URL_BAR: 'general.wide-url-bar',
  BOOKMARKS_TOOLBAR_MODE: 'general.bookmarks-toolbar-mode',
  SHOW_BOOKMARKS_TOOLBAR: 'bookmarks.toolbar.show',
  LANGUAGE: 'general.language',