Moves bookarks manager from js to app

Resolves #10074

Auditors: @bsclifton

Test Plan:
- check if bookmarks manager is displayed correctly

app/renderer/about/bookmarks/bookmarkFolderItem.js

@@ -0,0 +1,134 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const Immutable = require('immutable')
+
+// Components
+const ImmutableComponent = require('../../components/immutableComponent')
+
+// Actions
+const aboutActions = require('../../../../js/about/aboutActions')
+
+// Constants
+const dragTypes = require('../../../../js/constants/dragTypes')
+
+// Utils
+const dndData = require('../../../../js/dndData')
+const siteUtil = require('../../../../js/state/siteUtil')
+const cx = require('../../../../js/lib/classSet')
+
+class BookmarkFolderItem extends ImmutableComponent {
+  constructor (props) {
+    super(props)
+    this.state = {
+      isDragOver: false
+    }
+  }
+  onDragStart (e) {
+    if (this.props.draggable !== false) {
+      e.dataTransfer.effectAllowed = 'all'
+      dndData.setupDataTransferURL(e.dataTransfer,
+        this.props.bookmarkFolder.get('location'),
+        this.props.bookmarkFolder.get('customTitle') || this.props.bookmarkFolder.get('title'))
+      dndData.setupDataTransferBraveData(e.dataTransfer, dragTypes.BOOKMARK, this.props.bookmarkFolder)
+    }
+  }
+  onDragOver (e) {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    this.setState({
+      isDragOver: true
+    })
+  }
+  onDragLeave (e) {
+    this.setState({
+      isDragOver: false
+    })
+  }
+  /**
+   * Move a folder, a bookmark, or multiple bookmarks IF move is allowed.
+   * ex: won't allow child folder to become parent of an ancestor, etc.
+   */
+  moveBookmark (e, bookmark) {
+    if (siteUtil.isMoveAllowed(this.props.allBookmarkFolders, bookmark, this.props.bookmarkFolder)) {
+      const bookmarkSiteKey = siteUtil.getSiteKey(bookmark)
+      const bookmarkFolderSiteKey = siteUtil.getSiteKey(this.props.bookmarkFolder)
+      aboutActions.moveSite(bookmarkSiteKey,
+        bookmarkFolderSiteKey,
+        dndData.shouldPrependVerticalItem(e.target, e.clientY),
+        true)
+    }
+  }
+  clearSelection () {
+    if (this.props.onClearSelection) {
+      this.props.onClearSelection()
+    }
+  }
+  // NOTE: both folders AND bookmarks can be dropped here
+  onDrop (e) {
+    this.setState({
+      isDragOver: false
+    })
+
+    const bookmarkData = dndData.getDragData(e.dataTransfer, dragTypes.BOOKMARK)
+    if (bookmarkData) {
+      if (Immutable.List.isList(bookmarkData)) {
+        bookmarkData.forEach((bookmark) => {
+          this.moveBookmark(e, bookmark)
+        })
+        this.clearSelection()
+        return
+      }
+
+      this.moveBookmark(e, bookmarkData)
+      this.clearSelection()
+    }
+  }
+  render () {
+    const BookmarkFolderList = require('./bookmarkFolderList')
+    const childBookmarkFolders = this.props.allBookmarkFolders
+      .filter((bookmarkFolder) => (bookmarkFolder.get('parentFolderId') || 0) === this.props.bookmarkFolder.get('folderId'))
+    return <div>
+      <div role='listitem'
+        onDrop={this.onDrop.bind(this)}
+        onDragStart={this.onDragStart.bind(this)}
+        onDragOver={this.onDragOver.bind(this)}
+        onDragLeave={this.onDragLeave.bind(this)}
+        onContextMenu={aboutActions.contextMenu.bind(this, this.props.bookmarkFolder.toJS(), 'bookmark-folder')}
+        onClick={this.props.onChangeSelectedFolder.bind(null, this.props.bookmarkFolder.get('folderId'))}
+        draggable={this.props.draggable !== false ? 'true' : 'false'}
+        data-folder-id={this.props.bookmarkFolder.get('folderId')}
+        className={cx({
+          listItem: true,
+          selected: this.props.selected,
+          isDragOver: this.state.isDragOver
+        })}
+      >
+        <span className={cx({
+          bookmarkFolderIcon: true,
+          fa: true,
+          'fa-folder-o': !this.props.selected && !this.state.isDragOver,
+          'fa-folder-open-o': this.props.selected || this.state.isDragOver
+        })} />
+        <span data-l10n-id={this.props.dataL10nId}>
+          {this.props.bookmarkFolder.get('customTitle') || this.props.bookmarkFolder.get('title')}
+        </span>
+      </div>
+      {
+        childBookmarkFolders.size > 0
+          ? <BookmarkFolderList
+            search={this.props.search}
+            onChangeSelectedFolder={this.props.onChangeSelectedFolder}
+            bookmarkFolders={childBookmarkFolders}
+            selectedFolderId={this.props.selectedFolderId}
+            allBookmarkFolders={this.props.allBookmarkFolders}
+          />
+          : null
+      }
+    </div>
+  }
+}
+
+module.exports = BookmarkFolderItem

app/renderer/about/bookmarks/bookmarkFolderList.js

@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const Immutable = require('immutable')
+
+// Components
+const ImmutableComponent = require('../../components/immutableComponent')
+const BookmarkFolderItem = require('./bookmarkFolderItem')
+
+// Constants
+const siteTags = require('../../../../js/constants/siteTags')
+
+class BookmarkFolderList extends ImmutableComponent {
+  render () {
+    return <list className='bookmarkFolderList'>
+      {
+        this.props.isRoot && this.props.search
+          ? <div role='listitem' className='listItem selected'>
+            <span className='bookmarkFolderIcon fa fa-search' />
+            <span data-l10n-id='allFolders' />
+          </div>
+          : null
+      }
+      {
+        this.props.isRoot
+          ? <BookmarkFolderItem
+            onClearSelection={this.props.onClearSelection}
+            search={this.props.search}
+            selected={!this.props.search && this.props.selectedFolderId === 0}
+            dataL10nId='bookmarksToolbar'
+            draggable={false}
+            onChangeSelectedFolder={this.props.onChangeSelectedFolder}
+            allBookmarkFolders={this.props.allBookmarkFolders}
+            selectedFolderId={this.props.selectedFolderId}
+            bookmarkFolder={Immutable.fromJS({folderId: 0, tags: [siteTags.BOOKMARK_FOLDER]})}
+          />
+          : null
+      }
+      {
+        this.props.bookmarkFolders.map((bookmarkFolder) =>
+          this.props.isRoot && bookmarkFolder.get('parentFolderId') === -1
+            ? null
+            : <BookmarkFolderItem
+              onClearSelection={this.props.onClearSelection}
+              bookmarkFolder={bookmarkFolder}
+              allBookmarkFolders={this.props.allBookmarkFolders}
+              search={this.props.search}
+              selected={!this.props.search && this.props.selectedFolderId === bookmarkFolder.get('folderId')}
+              selectedFolderId={this.props.selectedFolderId}
+              onChangeSelectedFolder={this.props.onChangeSelectedFolder}
+            />
+        )
+      }
+      {
+        this.props.isRoot
+          ? <BookmarkFolderItem
+            onClearSelection={this.props.onClearSelection}
+            search={this.props.search}
+            selected={!this.props.search && this.props.selectedFolderId === -1}
+            dataL10nId='otherBookmarks'
+            draggable={false}
+            onChangeSelectedFolder={this.props.onChangeSelectedFolder}
+            allBookmarkFolders={this.props.allBookmarkFolders}
+            selectedFolderId={this.props.selectedFolderId}
+            bookmarkFolder={Immutable.fromJS({folderId: -1, tags: [siteTags.BOOKMARK_FOLDER]})}
+          />
+          : null
+      }
+    </list>
+  }
+}
+
+module.exports = BookmarkFolderList

app/renderer/about/bookmarks/bookmarkTitleCell.js

@@ -0,0 +1,56 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+
+// Components
+const ImmutableComponent = require('../../components/immutableComponent')
+
+// Constants
+const {iconSize} = require('../../../../js/constants/config')
+
+// Utils
+const siteUtil = require('../../../../js/state/siteUtil')
+const cx = require('../../../../js/lib/classSet')
+
+class BookmarkTitleCell extends ImmutableComponent {
+  render () {
+    let iconStyle
+    const icon = this.props.siteDetail.get('favicon')
+    if (!siteUtil.isFolder(this.props.siteDetail)) {
+      if (icon) {
+        iconStyle = {
+          minWidth: iconSize,
+          width: iconSize,
+          backgroundImage: `url(${icon})`,
+          backgroundSize: iconSize,
+          height: iconSize
+        }
+      }
+    }
+
+    const bookmarkTitle = this.props.siteDetail.get('customTitle') || this.props.siteDetail.get('title')
+    const bookmarkLocation = this.props.siteDetail.get('location')
+    const defaultIcon = 'fa fa-file-o'
+
+    return <div>
+      {
+        <span
+          className={cx({
+            bookmarkFavicon: true,
+            bookmarkFile: !icon,
+            [defaultIcon]: !icon
+          })}
+          style={iconStyle}
+        />
+      }
+      <span>{bookmarkTitle || bookmarkLocation}</span>
+      {
+        bookmarkTitle ? <span className='bookmarkLocation'>{bookmarkLocation}</span> : null
+      }
+    </div>
+  }
+}
+
+module.exports = BookmarkTitleCell

app/renderer/about/bookmarks/bookmarkTitleHeader.js

@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const Immutable = require('immutable')
+
+// Components
+const ImmutableComponent = require('../../components/immutableComponent')
+
+// Actions
+const windowActions = require('../../../../js/actions/windowActions')
+
+// Constants
+const siteTags = require('../../../../js/constants/siteTags')
+
+class BookmarkTitleHeader extends ImmutableComponent {
+  constructor () {
+    super()
+    this.addBookmark = this.addBookmark.bind(this)
+  }
+  addBookmark () {
+    const newBookmark = Immutable.fromJS({
+      parentFolderId: this.props.selectedFolderId,
+      tags: [siteTags.BOOKMARK]
+    })
+    windowActions.addBookmark(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>
+  }
+}
+
+module.exports = BookmarkTitleHeader