Show only favicons

Allows to hide the bookmarks label in the bookmarks toolbar

- [x] Not applied to bookmarks in the folder
- [x] Padding between bookmakrs should be narrower
- [x] Render the bar when option change

Close brave#1657

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)

js/about/preferences.js

@@ -86,7 +86,7 @@ class SettingItem extends ImmutableComponent {
 
 class SettingCheckbox extends ImmutableComponent {
   render () {
-    return <div className='settingItem'>
+    return <div style={this.props.style} className='settingItem'>
       <span className='checkboxContainer'>
         <input type='checkbox' id={this.props.prefKey}
           disabled={this.props.disabled}
@@ -138,6 +138,7 @@ class GeneralTab extends ImmutableComponent {
       <SettingsList dataL10nId='bookmarkToolbarSettings'>
         <SettingCheckbox dataL10nId='bookmarkToolbar' prefKey={settings.SHOW_BOOKMARKS_TOOLBAR} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='bookmarkToolbarShowFavicon' prefKey={settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+        <SettingCheckbox dataL10nId='bookmarkToolbarShowOnlyFavicon' style={{ visibility: (getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON, this.props.settings) === true ? 'visible' : 'hidden') }} prefKey={settings.SHOW_BOOKMARKS_TOOLBAR_ONLY_FAVICON} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
       </SettingsList>
       <SettingsList dataL10nId='appearanceSettings'>
         <SettingCheckbox dataL10nId='showHomeButton' prefKey={settings.SHOW_HOME_BUTTON} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />

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 {
       }
       <span className='bookmarkText'>
       {
-        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')
       }
       </span>
       {
@@ -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 <div
       className={
         cx({
           bookmarksToolbar: true,
           allowDragging: this.props.shouldAllowWindowDrag,
-          showFavicon
+          showFavicon,
+          showOnlyFavicon
         })
       }
       onDrop={this.onDrop}
@@ -344,7 +348,9 @@ class BookmarksToolbar extends ImmutableComponent {
             openContextMenu={this.openContextMenu}
             clickBookmarkItem={this.clickBookmarkItem}
             showBookmarkFolderMenu={this.showBookmarkFolderMenu}
-            bookmark={bookmark} />)
+            bookmark={bookmark}
+            showFavicon={this.props.showFavicon}
+            showOnlyFavicon={this.props.showOnlyFavicon} />)
     }
     {
       this.overflowBookmarkItems.size !== 0

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
           ? <BookmarksToolbar
             draggingOverData={this.props.windowState.getIn(['ui', 'dragging', 'draggingOver', 'dragType']) === dragTypes.BOOKMARK && this.props.windowState.getIn(['ui', 'dragging', 'draggingOver'])}
+            showFavicon={showFavicon}
+            showOnlyFavicon={showOnlyFavicon}
             shouldAllowWindowDrag={shouldAllowWindowDrag}
             activeFrame={activeFrame}
             windowWidth={this.props.appState.get('defaultWindowWidth')}

js/constants/appConfig.js

@@ -90,6 +90,7 @@ module.exports = {
     'privacy.block-canvas-fingerprinting': false,
     'bookmarks.toolbar.show': false,
     'bookmarks.toolbar.showFavicon': false,
+    'bookmarks.toolbar.showOnlyFavicon': false,
     'privacy.do-not-track': false,
     'security.passwords.manager-enabled': true,
     'security.passwords.one-password-enabled': false,

js/constants/settings.js

@@ -31,8 +31,8 @@ const settings = {
   // Other settings
   SHOW_BOOKMARKS_TOOLBAR: 'bookmarks.toolbar.show',
   SHOW_BOOKMARKS_TOOLBAR_FAVICON: 'bookmarks.toolbar.showFavicon',
+  SHOW_BOOKMARKS_TOOLBAR_ONLY_FAVICON: 'bookmarks.toolbar.showOnlyFavicon',
   LANGUAGE: 'general.language'
 }
 
 module.exports = settings
-

js/contextMenus.js

@@ -265,7 +265,7 @@ function showBookmarkFolderInit (allBookmarkItems, parentBookmarkFolder, activeF
 }
 
 function bookmarkItemsInit (allBookmarkItems, items, activeFrame) {
-  let showFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON) === true
+  const showFavicon = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR_FAVICON) === true
   return items.map((site) => {
     const isFolder = siteUtil.isFolder(site)
     const templateItem = {

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:

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;