diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index c5d8115a7e5..dba56712783 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -41,6 +41,7 @@ selectedLanguage=Language
bookmarkToolbarSettings=Bookmarks Toolbar settings
bookmarkToolbar=Show Bookmarks Toolbar
bookmarkToolbarShowFavicon=Show favicon for items in Bookmarks Toolbar
+bookmarkToolbarShowOnlyFavicon=Show only favicon for items in Bookmarks Toolbar
en-US=English (U.S.)
nl-NL=Dutch (Netherlands)
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 501d69b398a..97fbbc7f606 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -86,7 +86,7 @@ class SettingItem extends ImmutableComponent {
class SettingCheckbox extends ImmutableComponent {
render () {
- return
+ return
+
diff --git a/js/components/bookmarksToolbar.js b/js/components/bookmarksToolbar.js
index 3058a4e70a4..f2730de1a96 100644
--- a/js/components/bookmarksToolbar.js
+++ b/js/components/bookmarksToolbar.js
@@ -16,8 +16,6 @@ const Button = require('../components/button')
const cx = require('../lib/classSet.js')
const dnd = require('../dnd')
const dndData = require('../dndData')
-const settings = require('../constants/settings')
-const getSetting = require('../settings').getSetting
const calculateTextWidth = require('../lib/textCalculator').calculateTextWidth
class BookmarkToolbarButton extends ImmutableComponent {
@@ -122,7 +120,9 @@ class BookmarkToolbarButton extends ImmutableComponent {
}
render () {
- let showFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON) === true
+ let showFavicon = this.props.showFavicon
+ const showOnlyFavicon = this.props.showOnlyFavicon
+
const iconSize = 16
let iconStyle = {
minWidth: iconSize,
@@ -148,7 +148,8 @@ class BookmarkToolbarButton extends ImmutableComponent {
bookmarkToolbarButton: true,
draggingOverLeft: this.isDraggingOverLeft && !this.isExpanded,
draggingOverRight: this.isDraggingOverRight && !this.isExpanded,
- isDragging: this.isDragging
+ isDragging: this.isDragging,
+ showOnlyFavicon: showFavicon && showOnlyFavicon
})}
draggable
ref={(node) => { this.bookmarkNode = node }}
@@ -170,7 +171,9 @@ class BookmarkToolbarButton extends ImmutableComponent {
}
{
- this.props.bookmark.get('customTitle') || this.props.bookmark.get('title') || this.props.bookmark.get('location')
+ !this.isFolder && showFavicon && showOnlyFavicon
+ ? ''
+ : this.props.bookmark.get('customTitle') || this.props.bookmark.get('title') || this.props.bookmark.get('location')
}
{
@@ -266,12 +269,10 @@ class BookmarksToolbar extends ImmutableComponent {
this.fontSize = this.root.getPropertyValue('--bookmark-item-font-size')
this.fontFamily = this.root.getPropertyValue('--default-font-family')
}
- const showFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON) === true
-
// Loop through until we fill up the entire bookmark toolbar width
let i
for (i = 0; i < noParentItems.size; i++) {
- const iconWidth = showFavicon && noParentItems.getIn([i, 'favicon']) ? 20 : 0
+ const iconWidth = this.props.showFavicon && noParentItems.getIn([i, 'favicon']) ? 20 : 0
const text = noParentItems.getIn([i, 'customTitle']) || noParentItems.getIn([i, 'title']) || noParentItems.getIn([i, 'location'])
widthAccountedFor += Math.min(calculateTextWidth(text, `${this.fontSize} ${this.fontFamily}`) + this.padding + iconWidth, this.maxWidth) + this.margin
if (widthAccountedFor >= window.innerWidth - overflowButtonWidth) {
@@ -321,14 +322,17 @@ class BookmarksToolbar extends ImmutableComponent {
contextMenus.onTabsToolbarContextMenu(this.props.activeFrame, closest && closest.props.bookmark || undefined, closest && closest.isDroppedOn, e)
}
render () {
- let showFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON) === true
+ let showFavicon = this.props.showFavicon
+ let showOnlyFavicon = this.props.showOnlyFavicon
+
this.bookmarkRefs = []
return )
+ bookmark={bookmark}
+ showFavicon={this.props.showFavicon}
+ showOnlyFavicon={this.props.showOnlyFavicon} />)
}
{
this.overflowBookmarkItems.size !== 0
diff --git a/js/components/main.js b/js/components/main.js
index ed3604e92c6..4c6130f3b89 100644
--- a/js/components/main.js
+++ b/js/components/main.js
@@ -609,6 +609,8 @@ class Main extends ImmutableComponent {
const nonPinnedFrames = this.props.windowState.get('frames').filter((frame) => !frame.get('pinnedLocation'))
const tabsPerPage = Number(getSetting(settings.TABS_PER_PAGE))
const showBookmarksToolbar = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR)
+ const showFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON)
+ const showOnlyFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_ONLY_FAVICON)
const siteInfoIsVisible = this.props.windowState.getIn(['ui', 'siteInfo', 'isVisible'])
const braveShieldsDisabled = this.braveShieldsDisabled
const braveryPanelIsVisible = !braveShieldsDisabled && this.props.windowState.get('braveryPanelDetail')
@@ -730,6 +732,8 @@ class Main extends ImmutableComponent {
showBookmarksToolbar
? {
const isFolder = siteUtil.isFolder(site)
const templateItem = {
diff --git a/js/stores/appStore.js b/js/stores/appStore.js
index aa67c411015..b634a78c3b3 100644
--- a/js/stores/appStore.js
+++ b/js/stores/appStore.js
@@ -254,6 +254,10 @@ const filterOutNonRecents = debounce(() => {
emitChanges()
}, 60 * 1000)
+/**
+ * Useful for updating non-react preferences (electron properties, etc).
+ * Called when any settings are modified (ex: via preferences).
+ */
function handleChangeSettingAction (settingKey, settingValue) {
switch (settingKey) {
case settings.AUTO_HIDE_MENU:
diff --git a/less/bookmarksToolbar.less b/less/bookmarksToolbar.less
index 581f233caf9..133d49a58f0 100644
--- a/less/bookmarksToolbar.less
+++ b/less/bookmarksToolbar.less
@@ -20,21 +20,30 @@
flex: 1;
padding: 3px 10px;
height: @bookmarksToolbarHeight;
+
&.allowDragging {
-webkit-app-region: drag;
>* {
-webkit-app-region: no-drag;
}
}
+
&.showFavicon {
height: @bookmarksToolbarWithFaviconsHeight;
}
+
+ &.showOnlyFavicon {
+ padding: 0px 0px 0px 10px;
+ margin: 0px;
+ }
+
.overflowIndicator {
padding-left: 6px;
padding-right: 6px;
margin-bottom: auto;
margin-top: auto;
}
+
.bookmarkToolbarButton {
border-radius: @borderRadius;
color: black;
@@ -52,35 +61,52 @@
-webkit-user-select: none;
align-items: center;
display: flex;
+
&:hover {
background: lighten(@tabsBackground, 5%);
}
+
&.draggingOverLeft {
&:not(.isDragging) {
margin-left: 25px;
}
}
+
&.draggingOverRight {
&:not(.isDragging) {
margin-right: 25px;
}
}
+
&.isDragging {
opacity: 0.2;
}
+
+ &.showOnlyFavicon {
+ padding: 2px 4px;
+ margin: auto 0px;
+
+ .bookmarkFavicon {
+ margin-right: 0px;
+ }
+ }
+
.bookmarkFavicon {
background-position: center;
background-repeat: no-repeat;
display: inline-block;
margin-right: 4px;
}
+
.bookmarkText {
text-overflow: ellipsis;
overflow: hidden;
}
+
.bookmarkFolder {
font-size: @bookmarksIconSize;
}
+
.bookmarkFolderChevron {
color: #676767;
margin-left: 4px;