"New bookmark folder" and "New bookmark" buttons added to about:bookmarks

app/extensions/brave/locales/en-US/bookmarks.properties

@@ -5,5 +5,7 @@ partitionNumber=Session {{partitionNumber}}
 bookmarksToolbar=Bookmarks Toolbar
 otherBookmarks=Other Bookmarks
 bookmarkSearch.placeholder=Search bookmarks
-importBrowserData.title=Import browser data
+importBrowserData.title=Import Browser Data
 allFolders=All Folders
+addBookmarkFolder.title=Add Folder
+addBookmark.title=Add Bookmark

js/about/aboutActions.js

@@ -312,6 +312,22 @@ const aboutActions = {
     aboutActions.dispatchAction({
       actionType: appConstants.APP_SUBMIT_FEEDBACK
     })
+  },
+
+  /**
+   * Dispatches a message to set add/edit bookmark details
+   * If set, also indicates that add/edit is shown
+   * @param {Object} currentDetail - Properties of the bookmark to change to
+   * @param {Object} originalDetail - Properties of the bookmark to edit
+   * @param {Object} destinationDetail - Will move the added bookmark to the specified position
+   */
+  openBookmarkEditor: function (currentDetail, originalDetail, destinationDetail) {
+    aboutActions.dispatchAction({
+      actionType: windowConstants.WINDOW_SET_BOOKMARK_DETAIL,
+      currentDetail,
+      originalDetail,
+      destinationDetail
+    })
   }
 }
 module.exports = aboutActions

js/about/bookmarks.js

@@ -134,6 +134,26 @@ class BookmarkFolderList extends ImmutableComponent {
   }
 }
 
+class BookmarkTitleHeader extends ImmutableComponent {
+  constructor () {
+    super()
+    this.addBookmark = this.addBookmark.bind(this)
+  }
+  addBookmark () {
+    const newBookmark = Immutable.fromJS({
+      parentFolderId: this.props.selectedFolderId,
+      tags: [siteTags.BOOKMARK]
+    })
+    aboutActions.openBookmarkEditor(newBookmark)
+  }
+  render () {
+    return <div className='th-inner'>
+      <span data-l10n-id={this.props.heading} />
+      <span data-l10n-id='addBookmark' className='addBookmark' onClick={this.addBookmark} />
+    </div>
+  }
+}
+
 class BookmarkTitleCell extends ImmutableComponent {
   render () {
     let iconStyle
@@ -216,9 +236,12 @@ class BookmarksList extends ImmutableComponent {
       onDrop: this.onDrop,
       sortingDisabled: !this.props.sortable
     }
-
     return <div>
-      <SortableTable headings={['Title', 'Last Visited']}
+      <SortableTable
+        headings={[
+          <BookmarkTitleHeader heading='Title' selectedFolderId={this.props.selectedFolderId} />,
+          'Last Visited'
+        ]}
         defaultHeading='Title'
         rows={this.props.bookmarks.map((entry) => [
           {
@@ -232,7 +255,7 @@ class BookmarksList extends ImmutableComponent {
         ])}
         rowObjects={this.props.bookmarks}
         columnClassNames={['title', 'date']}
-        tableID={this.props.tableID}
+        tableID={this.props.selectedFolderId}
         addHoverClass
         onDoubleClick={this.onDoubleClick}
         {...props}
@@ -250,6 +273,7 @@ class AboutBookmarks extends React.Component {
     this.onChangeSearch = this.onChangeSearch.bind(this)
     this.onClearSearchText = this.onClearSearchText.bind(this)
     this.importBrowserData = this.importBrowserData.bind(this)
+    this.addBookmarkFolder = this.addBookmarkFolder.bind(this)
     this.state = {
       bookmarks: Immutable.List(),
       bookmarkFolders: Immutable.Map(),
@@ -291,6 +315,13 @@ class AboutBookmarks extends React.Component {
   importBrowserData () {
     aboutActions.importBrowerDataNow()
   }
+  addBookmarkFolder () {
+    const newFolder = Immutable.fromJS({
+      parentFolderId: this.state.selectedFolderId,
+      tags: [siteTags.BOOKMARK_FOLDER]
+    })
+    aboutActions.openBookmarkEditor(newFolder)
+  }
   componentDidMount () {
     this.refs.bookmarkSearch.focus()
   }
@@ -315,6 +346,7 @@ class AboutBookmarks extends React.Component {
           <div className='columnHeader'>
             <span data-l10n-id='folders' />
             <span data-l10n-id='importBrowserData' className='fa fa-download clearBrowsingDataButton' onClick={this.importBrowserData} />
+            <span data-l10n-id='addBookmarkFolder' className='addBookmarkFolder' onClick={this.addBookmarkFolder} />
           </div>
           <BookmarkFolderList onChangeSelectedFolder={this.onChangeSelectedFolder}
             bookmarkFolders={this.state.bookmarkFolders.filter((bookmark) => bookmark.get('parentFolderId') === -1)}
@@ -333,7 +365,7 @@ class AboutBookmarks extends React.Component {
             allBookmarkFolders={this.state.bookmarkFolders}
             sortable={false}
             draggable={!this.state.search}
-            tableID={this.selectedFolderId} />
+            selectedFolderId={this.state.selectedFolderId} />
         </div>
       </div>
     </div>

js/components/addEditBookmark.js

@@ -32,8 +32,11 @@ class AddEditBookmark extends ImmutableComponent {
   }
 
   get bookmarkNameValid () {
-    let title = (this.props.currentDetail.get('title') || this.props.currentDetail.get('customTitle'))
-    return ((typeof title === 'string') && title.trim().length > 0) || !this.isFolder
+    const title = this.props.currentDetail.get('title') || this.props.currentDetail.get('customTitle')
+    const location = this.props.currentDetail.get('location')
+
+    return (typeof title === 'string' && title.trim().length > 0) ||
+      (!this.isFolder && typeof location === 'string' && location.trim().length > 0)
   }
 
   get isFolder () {

js/components/sortableTable.js

@@ -188,7 +188,11 @@ class SortableTable extends ImmutableComponent {
               'sort-default': this.sortingDisabled || heading === this.props.defaultHeading})}
               data-sort-method={dataType === 'number' ? 'number' : undefined}
               data-sort-order={this.props.defaultHeadingSortOrder}>
-              <div className='th-inner' data-l10n-id={heading} />
+              {
+                typeof heading === 'string'
+                ? <div className='th-inner' data-l10n-id={heading} />
+                : heading
+              }
             </th>
           })}
         </tr>

less/about/bookmarks.less

@@ -25,7 +25,6 @@
         font-weight: 300;
         padding: 8px;
         box-sizing: border-box;
-        border-right: 1px solid @braveOrange;
         padding-left: 10px;
         -webkit-user-select: none;
         cursor: default;
@@ -43,7 +42,6 @@
 
       > .bookmarkFolderList {
         display: block;
-        border-right: 1px solid @braveOrange;
         height: 100%;
 
         .listItem >* {
@@ -65,12 +63,13 @@
     }
     .organizeView {
       flex-grow: 5;
-
+      border-left: 1px solid @braveOrange;
       .sortableTable {
         -webkit-user-select: none;
-        th:nth-of-type(2), td.date {
-          width: 250px;
-        }
+        // Custom title column (has add bookmark icon)
+        th:first-of-type > div { display: block; }
+        // Bookmark last visited column
+        th:nth-of-type(2), td.date { width: 250px; }
         td {
           font-size: 11pt;
           padding-left: 10px;