From 8a381428503db635e877a63c9e08e8d5a84d5ee0 Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Mon, 26 Jun 2017 10:02:06 +0200
Subject: [PATCH] Imporves perf of bookmark hanger

Resolves #9674

Auditors: @bsclifton

Test Plan:
- have a lot of bookmarks (1k +)
- try to add a bookmark with clicking on the star
---
 app/browser/menu.js                           |   2 +
 app/browser/reducers/sitesReducer.js          |  64 ++-
 .../reducers/urlBarSuggestionsReducer.js      |   2 +
 app/common/lib/bookmarkUtil.js                |  24 +-
 .../bookmarks/addEditBookmarkForm.js          | 290 +++++++++++++
 .../bookmarks/addEditBookmarkHanger.js        | 256 +++--------
 .../components/navigation/navigationBar.js    |  23 +-
 app/renderer/reducers/contextMenuReducer.js   |  34 +-
 docs/appActions.md                            |   7 +-
 docs/windowActions.md                         |  19 +-
 js/about/aboutActions.js                      |  46 --
 js/about/bookmarks.js                         |   5 +-
 js/about/newtab.js                            |  12 +-
 js/actions/appActions.js                      |  25 +-
 js/actions/windowActions.js                   |  54 ++-
 js/constants/appConstants.js                  |   4 +-
 js/constants/windowConstants.js               |   6 +-
 js/contextMenus.js                            |  35 +-
 js/state/siteUtil.js                          |  58 +--
 js/stores/appStore.js                         |   2 +
 js/stores/windowStore.js                      |  55 ++-
 test/bookmark-components/bookmarksTest.js     |  17 +-
 test/lib/brave.js                             |   6 +-
 .../app/browser/reducers/sitesReducerTest.js  | 396 ++++++++++++++++++
 test/unit/app/common/lib/bookmarkUtilTest.js  |  70 +---
 test/unit/state/siteUtilTest.js               |  20 +-
 26 files changed, 1064 insertions(+), 468 deletions(-)
 create mode 100644 app/renderer/components/bookmarks/addEditBookmarkForm.js

diff --git a/app/browser/menu.js b/app/browser/menu.js
index e6f7acefe36..c76f9b7b6ef 100644
--- a/app/browser/menu.js
+++ b/app/browser/menu.js
@@ -677,6 +677,8 @@ const doAction = (state, action) => {
       }
       break
     case appConstants.APP_ADD_SITE:
+    case appConstants.APP_ADD_BOOKMARK:
+    case appConstants.APP_EDIT_BOOKMARK:
       {
         if (action.tag === siteTags.BOOKMARK || action.tag === siteTags.BOOKMARK_FOLDER) {
           createMenu(state)
diff --git a/app/browser/reducers/sitesReducer.js b/app/browser/reducers/sitesReducer.js
index 8a4e87fec73..6f5035404bf 100644
--- a/app/browser/reducers/sitesReducer.js
+++ b/app/browser/reducers/sitesReducer.js
@@ -54,35 +54,57 @@ const sitesReducer = (state, action, immutableAction) => {
         break
       }
     case appConstants.APP_ADD_SITE:
-      const isSyncEnabled = syncEnabled()
-      if (Immutable.List.isList(action.siteDetail)) {
-        action.siteDetail.forEach((s) => {
-          state = siteUtil.addSite(state, s, action.tag, undefined, action.skipSync)
+      {
+        const isSyncEnabled = syncEnabled()
+        if (Immutable.List.isList(action.siteDetail)) {
+          action.siteDetail.forEach((s) => {
+            state = siteUtil.addSite(state, s, action.tag, action.skipSync)
+            if (isSyncEnabled) {
+              state = syncUtil.updateSiteCache(state, s)
+            }
+          })
+        } else {
+          let sites = state.get('sites')
+          if (!action.siteDetail.get('folderId') && siteUtil.isFolder(action.siteDetail)) {
+            action.siteDetail = action.siteDetail.set('folderId', siteUtil.getNextFolderId(sites))
+          }
+          state = siteUtil.addSite(state, action.siteDetail, action.tag, action.skipSync)
           if (isSyncEnabled) {
-            state = syncUtil.updateSiteCache(state, s)
+            state = syncUtil.updateSiteCache(state, action.siteDetail)
           }
-        })
-      } else {
-        let sites = state.get('sites')
-        if (!action.siteDetail.get('folderId') && siteUtil.isFolder(action.siteDetail)) {
-          action.siteDetail = action.siteDetail.set('folderId', siteUtil.getNextFolderId(sites))
         }
-        state = siteUtil.addSite(state, action.siteDetail, action.tag, action.originalSiteDetail, action.skipSync)
-        if (action.destinationDetail) {
-          const sourceKey = siteUtil.getSiteKey(action.siteDetail)
-          const destinationKey = siteUtil.getSiteKey(action.destinationDetail)
+        break
+      }
+    case appConstants.APP_ADD_BOOKMARK:
+    case appConstants.APP_EDIT_BOOKMARK:
+      {
+        const isSyncEnabled = syncEnabled()
+        const sites = state.get('sites')
+        const closestKey = action.closestKey
+        let site = action.siteDetail
 
-          if (sourceKey != null) {
-            state = siteUtil.moveSite(state,
-              sourceKey, destinationKey, false, false, true)
-          }
+        if (site == null || action.tag == null) {
+          break
         }
+
+        if (!site.get('folderId') && action.tag === siteTags.BOOKMARK_FOLDER) {
+          site = site.set('folderId', siteUtil.getNextFolderId(sites))
+        }
+
+        state = siteUtil.addSite(state, site, action.tag, action.editKey)
+
+        if (closestKey != null) {
+          const sourceKey = siteUtil.getSiteKey(site)
+          state = siteUtil.moveSite(state, sourceKey, closestKey, false, false, true)
+        }
+
         if (isSyncEnabled) {
-          state = syncUtil.updateSiteCache(state, action.destinationDetail || action.siteDetail)
+          state = syncUtil.updateSiteCache(state, site)
         }
+
+        state = updateActiveTabBookmarked(state)
+        break
       }
-      state = updateActiveTabBookmarked(state)
-      break
     case appConstants.APP_REMOVE_SITE:
       const removeSiteSyncCallback = action.skipSync ? undefined : syncActions.removeSite
       state = siteUtil.removeSite(state, action.siteDetail, action.tag, true, removeSiteSyncCallback)
diff --git a/app/browser/reducers/urlBarSuggestionsReducer.js b/app/browser/reducers/urlBarSuggestionsReducer.js
index 086f9345b0d..8873091a9ad 100644
--- a/app/browser/reducers/urlBarSuggestionsReducer.js
+++ b/app/browser/reducers/urlBarSuggestionsReducer.js
@@ -14,6 +14,8 @@ const tabState = require('../../common/state/tabState')
 const urlBarSuggestionsReducer = (state, action) => {
   switch (action.actionType) {
     case appConstants.APP_ADD_SITE:
+    case appConstants.APP_ADD_BOOKMARK:
+    case appConstants.APP_EDIT_BOOKMARK:
       if (Immutable.List.isList(action.siteDetail)) {
         action.siteDetail.forEach((s) => {
           add(s)
diff --git a/app/common/lib/bookmarkUtil.js b/app/common/lib/bookmarkUtil.js
index 4189e3f2a32..d7c33396b8e 100644
--- a/app/common/lib/bookmarkUtil.js
+++ b/app/common/lib/bookmarkUtil.js
@@ -16,17 +16,20 @@ const {calculateTextWidth} = require('../../../js/lib/textCalculator')
 const {iconSize} = require('../../../js/constants/config')
 const {getSetting} = require('../../../js/settings')
 
-const bookmarkHangerHeading = (detail, isFolder, shouldShowLocation) => {
+function bookmarkHangerHeading (editMode, isFolder, isAdded) {
   if (isFolder) {
-    return shouldShowLocation
+    return editMode
       ? 'bookmarkFolderEditing'
       : 'bookmarkFolderAdding'
   }
-  return shouldShowLocation
-    ? (!detail || !detail.has('location'))
-      ? 'bookmarkCreateNew'
-      : 'bookmarkEdit'
-    : 'bookmarkAdded'
+
+  if (isAdded) {
+    return 'bookmarkAdded'
+  }
+
+  return editMode
+    ? 'bookmarkEdit'
+    : 'bookmarkCreateNew'
 }
 
 const displayBookmarkName = (detail) => {
@@ -37,11 +40,10 @@ const displayBookmarkName = (detail) => {
   return detail.get('title') || ''
 }
 
-const isBookmarkNameValid = (detail, isFolder) => {
-  const title = detail.get('title') || detail.get('customTitle')
-  const location = detail.get('location')
+const isBookmarkNameValid = (title, location, isFolder, customTitle) => {
+  const newTitle = title || customTitle
   return isFolder
-    ? (title != null && title !== 0) && title.trim().length > 0
+    ? (newTitle != null && newTitle !== 0) && newTitle.trim().length > 0
     : location != null && location.trim().length > 0
 }
 
diff --git a/app/renderer/components/bookmarks/addEditBookmarkForm.js b/app/renderer/components/bookmarks/addEditBookmarkForm.js
new file mode 100644
index 00000000000..a744a8d50f4
--- /dev/null
+++ b/app/renderer/components/bookmarks/addEditBookmarkForm.js
@@ -0,0 +1,290 @@
+/* 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')
+const {StyleSheet, css} = require('aphrodite/no-important')
+
+// Components
+const BrowserButton = require('../common/browserButton')
+const {
+  CommonFormSection,
+  CommonFormDropdown,
+  CommonFormTextbox,
+  CommonFormButtonWrapper,
+  commonFormStyles
+} = require('../common/commonForm')
+
+// Actions
+const appActions = require('../../../../js/actions/appActions')
+const windowActions = require('../../../../js/actions/windowActions')
+
+// Constants
+const KeyCodes = require('../../../common/constants/keyCodes')
+const siteTags = require('../../../../js/constants/siteTags')
+const settings = require('../../../../js/constants/settings')
+
+// Utils
+const UrlUtil = require('../../../../js/lib/urlutil')
+const {getSetting} = require('../../../../js/settings')
+const {isBookmarkNameValid} = require('../../../common/lib/bookmarkUtil')
+
+// Styles
+const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
+
+class AddEditBookmarkForm extends React.Component {
+  constructor (props) {
+    super(props)
+    this.onNameChange = this.onNameChange.bind(this)
+    this.onLocationChange = this.onLocationChange.bind(this)
+    this.onParentFolderChange = this.onParentFolderChange.bind(this)
+    this.onKeyDown = this.onKeyDown.bind(this)
+    this.onClose = this.onClose.bind(this)
+    this.onSave = this.onSave.bind(this)
+    this.onRemoveBookmark = this.onRemoveBookmark.bind(this)
+    this.state = {
+      title: props.bookmarkName,
+      location: props.location,
+      parentFolderId: props.parentFolderId,
+      isDisabled: props.isDisabled
+    }
+  }
+
+  componentDidMount () {
+    setImmediate(() => {
+      this.bookmarkName.select()
+    })
+  }
+
+  onKeyDown (e) {
+    switch (e.keyCode) {
+      case KeyCodes.ENTER:
+        this.onSave()
+        break
+      case KeyCodes.ESC:
+        this.onClose()
+        break
+    }
+  }
+
+  onClose () {
+    windowActions.onBookmarkClose()
+  }
+
+  updateButtonStatus (newValue) {
+    if (newValue !== this.state.isDisabled) {
+      this.setState({
+        isDisabled: newValue
+      })
+    }
+  }
+
+  onNameChange (e) {
+    let title = e.target.value
+
+    this.setState({
+      title: title
+    })
+
+    this.updateButtonStatus(!isBookmarkNameValid(title, this.state.location, this.props.isFolder))
+  }
+
+  onLocationChange (e) {
+    let location = e.target.value
+
+    this.setState({
+      location: location
+    })
+
+    this.updateButtonStatus(!isBookmarkNameValid(this.state.title, location, this.props.isFolder))
+  }
+
+  onParentFolderChange (e) {
+    this.setState({
+      parentFolderId: ~~e.target.value
+    })
+  }
+
+  onSave () {
+    // First check if the title of the bookmarkDetail is set
+    if (this.state.isDisabled) {
+      return false
+    }
+
+    // show bookmark if hidden
+    if (!this.props.hasBookmarks && !getSetting(settings.SHOW_BOOKMARKS_TOOLBAR)) {
+      appActions.changeSetting(settings.SHOW_BOOKMARKS_TOOLBAR, true)
+    }
+
+    const tag = this.props.isFolder ? siteTags.BOOKMARK_FOLDER : siteTags.BOOKMARK
+    let data = Immutable.fromJS({
+      parentFolderId: this.state.parentFolderId,
+      title: this.props.currentTitle
+    })
+
+    if (this.props.isFolder && this.props.editKey != null) {
+      data = data.set('folderId', this.props.editKey)
+    }
+
+    // handle title input
+    let title = this.state.title
+    if (typeof title === 'string' && UrlUtil.isURL(title)) {
+      const punycodeUrl = UrlUtil.getPunycodeUrl(title)
+      if (punycodeUrl.replace(/\/$/, '') !== title) {
+        title = punycodeUrl
+      }
+    }
+
+    if (this.props.currentTitle !== title || !title) {
+      data = data.set('customTitle', title || 0)
+    }
+
+    // handle location input
+    let location = this.state.location
+    if (typeof location === 'string') {
+      const punycodeUrl = UrlUtil.getPunycodeUrl(location)
+      if (punycodeUrl.replace(/\/$/, '') !== location) {
+        location = punycodeUrl
+      }
+    }
+    data = data.set('location', location)
+
+    if (this.props.editKey != null) {
+      appActions.editBookmark(data, this.props.editKey, tag)
+    } else {
+      appActions.addBookmark(data, tag, this.props.closestKey)
+    }
+
+    this.onClose()
+  }
+
+  onRemoveBookmark () {
+    const tag = this.props.isFolder ? siteTags.BOOKMARK_FOLDER : siteTags.BOOKMARK
+    // TODO check if you need to add folderId as prop or you can use editKey
+    appActions.removeSite(Immutable.fromJS({
+      parentFolderId: this.props.parentFolderId,
+      location: this.props.location,
+      partitionNumber: this.props.partitionNumber,
+      folderId: this.props.isFolder ? this.props.editKey : null
+    }), tag)
+    this.onClose()
+  }
+
+  render () {
+    return <div>
+      <CommonFormSection>
+        <div className={css(styles.bookmark__sectionWrapper)}>
+          <section>
+            <label
+              className={css(styles.bookmarkHanger__label)}
+              data-l10n-id='nameField'
+              htmlFor='bookmarkName'
+            />
+            <div className={css(
+              commonFormStyles.inputWrapper,
+              commonFormStyles.inputWrapper__input
+            )}>
+              <input
+                className={css(
+                  commonStyles.formControl,
+                  commonStyles.textbox,
+                  commonStyles.textbox__outlineable,
+                  commonFormStyles.input__box,
+                )}
+                data-test-id='bookmarkNameInput'
+                spellCheck='false'
+                onKeyDown={this.onKeyDown}
+                onChange={this.onNameChange}
+                defaultValue={this.state.title}
+                ref={(bookmarkName) => { this.bookmarkName = bookmarkName }}
+              />
+            </div>
+          </section>
+          {
+            !this.props.isFolder && !this.props.isAdded
+              ? <section className={css(styles.bookmarkHanger__marginRow)}>
+                <div className={css(
+                  commonFormStyles.inputWrapper,
+                  commonFormStyles.inputWrapper__input
+                )}>
+                  <label
+                    className={css(styles.bookmarkHanger__label)}
+                    data-l10n-id='locationField'
+                    htmlFor='bookmarkLocation'
+                  />
+                  <CommonFormTextbox
+                    data-test-id='bookmarkLocationInput'
+                    spellCheck='false'
+                    onKeyDown={this.onKeyDown}
+                    onChange={this.onLocationChange}
+                    defaultValue={this.state.location}
+                  />
+                </div>
+              </section>
+              : null
+          }
+          <div className={css(
+            commonFormStyles.inputWrapper,
+            commonFormStyles.inputWrapper__input,
+            styles.bookmarkHanger__marginRow,
+          )}>
+            <label
+              className={css(styles.bookmarkHanger__label)}
+              data-l10n-id='parentFolderField'
+              htmlFor='bookmarkParentFolder'
+            />
+            <CommonFormDropdown
+              data-test-id='bookmarkParentFolder'
+              defaultValue={this.state.parentFolderId}
+              onChange={this.onParentFolderChange} >
+              <option value='0' data-l10n-id='bookmarksToolbar' />
+              {
+                this.props.folders.map((folder) => <option value={folder.folderId}>{folder.label}</option>)
+              }
+            </CommonFormDropdown>
+          </div>
+        </div>
+      </CommonFormSection>
+      <CommonFormButtonWrapper>
+        {
+          this.props.editKey != null
+            ? <BrowserButton groupedItem secondaryColor
+              l10nId='remove'
+              testId='bookmarkHangerRemoveButton'
+              onClick={this.onRemoveBookmark}
+            />
+            : <BrowserButton groupedItem secondaryColor
+              l10nId='cancel'
+              testId='bookmarkHangerCancelButton'
+              onClick={this.onClose}
+            />
+        }
+        <BrowserButton groupedItem primaryColor
+          l10nId='done'
+          testId='bookmarkHangerDoneButton'
+          disabled={this.state.isDisabled}
+          onClick={this.onSave}
+        />
+      </CommonFormButtonWrapper>
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  bookmarkHanger__label: {
+    display: 'block',
+    marginBottom: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
+  },
+  bookmarkHanger__marginRow: {
+    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
+  },
+
+  bookmark__sectionWrapper: {
+    display: 'flex',
+    flexFlow: 'column nowrap'
+  }
+})
+
+module.exports = AddEditBookmarkForm
diff --git a/app/renderer/components/bookmarks/addEditBookmarkHanger.js b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
index 6a5c0f5ba63..9b6fc934c52 100644
--- a/app/renderer/components/bookmarks/addEditBookmarkHanger.js
+++ b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
@@ -8,150 +8,64 @@ const Immutable = require('immutable')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const BrowserButton = require('../common/browserButton')
+const AddEditBookmarkForm = require('./addEditBookmarkForm')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
 const windowActions = require('../../../../js/actions/windowActions')
 
 // Constants
-const KeyCodes = require('../../../common/constants/keyCodes')
 const siteTags = require('../../../../js/constants/siteTags')
 const settings = require('../../../../js/constants/settings')
 
 // Utils
 const cx = require('../../../../js/lib/classSet')
 const siteUtil = require('../../../../js/state/siteUtil')
-const UrlUtil = require('../../../../js/lib/urlutil')
 const {getSetting} = require('../../../../js/settings')
 const {bookmarkHangerHeading, displayBookmarkName, isBookmarkNameValid} = require('../../../common/lib/bookmarkUtil')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../styles/global')
-const commonStyles = require('../styles/commonStyles')
 
 const {
   CommonFormBookmarkHanger,
-  CommonFormSection,
-  CommonFormDropdown,
-  CommonFormTextbox,
-  CommonFormButtonWrapper,
-  CommonFormBottomWrapper,
-  commonFormStyles
+  CommonFormBottomWrapper
 } = require('../common/commonForm')
 
 class AddEditBookmarkHanger extends React.Component {
   constructor (props) {
     super(props)
-    this.onNameChange = this.onNameChange.bind(this)
-    this.onLocationChange = this.onLocationChange.bind(this)
-    this.onParentFolderChange = this.onParentFolderChange.bind(this)
-    this.onKeyDown = this.onKeyDown.bind(this)
     this.onClose = this.onClose.bind(this)
     this.onClick = this.onClick.bind(this)
-    this.onSave = this.onSave.bind(this)
     this.onViewBookmarks = this.onViewBookmarks.bind(this)
-    this.onRemoveBookmark = this.onRemoveBookmark.bind(this)
-  }
-
-  setDefaultFocus () {
-    this.bookmarkName.select()
-    this.bookmarkName.focus()
   }
 
   componentDidMount () {
-    // Automatically save if this is triggered by the url star
-    if (!this.props.isModal && !this.props.shouldShowLocation) {
-      this.onSave(false)
-    }
-    this.bookmarkName.value = displayBookmarkName(this.props.currentDetail)
-    this.setDefaultFocus()
-  }
-
-  onKeyDown (e) {
-    switch (e.keyCode) {
-      case KeyCodes.ENTER:
-        this.onSave()
-        break
-      case KeyCodes.ESC:
-        this.onClose()
-        break
-    }
+    this.addBookmark()
   }
 
   onClose () {
-    windowActions.setBookmarkDetail()
+    windowActions.onBookmarkClose()
   }
 
   onClick (e) {
     e.stopPropagation()
   }
 
-  onNameChange (e) {
-    let currentDetail = this.props.currentDetail
-    let name = e.target.value
-    if (typeof name === 'string' && UrlUtil.isURL(name)) {
-      const punycodeUrl = UrlUtil.getPunycodeUrl(name)
-      if (punycodeUrl.replace(/\/$/, '') !== name) {
-        name = punycodeUrl
-      }
-    }
-    if (currentDetail.get('title') === name && name) {
-      currentDetail = currentDetail.delete('customTitle')
-    } else {
-      // '' is reserved for the default customTitle value of synced bookmarks,
-      // so replace '' with 0 if the user is deleting the customTitle.
-      // Note that non-string bookmark titles fail isBookmarkNameValid so they
-      // are not saved.
-      currentDetail = currentDetail.set('customTitle', name || 0)
-    }
-    if (this.bookmarkName.value !== name) {
-      this.bookmarkName.value = name
-    }
-    windowActions.setBookmarkDetail(currentDetail, this.props.originalDetail, this.props.destinationDetail, this.props.shouldShowLocation, !this.props.isModal)
-  }
-
-  onLocationChange (e) {
-    let location = e.target.value
-    if (typeof location === 'string') {
-      const punycodeUrl = UrlUtil.getPunycodeUrl(location)
-      if (punycodeUrl.replace(/\/$/, '') !== location) {
-        location = punycodeUrl
-      }
+  addBookmark () {
+    if (!this.props.isAdded || this.props.isFolder) {
+      return false
     }
-    const currentDetail = this.props.currentDetail.set('location', location)
-    windowActions.setBookmarkDetail(currentDetail, this.props.originalDetail, this.props.destinationDetail, this.props.shouldShowLocation, !this.props.isModal)
-  }
-
-  onParentFolderChange (e) {
-    const currentDetail = this.props.currentDetail.set('parentFolderId', Number(e.target.value))
-    windowActions.setBookmarkDetail(currentDetail, this.props.originalDetail, this.props.destinationDetail, undefined, !this.props.isModal)
-  }
 
-  showToolbarOnFirstBookmark () {
     if (!this.props.hasBookmarks && !getSetting(settings.SHOW_BOOKMARKS_TOOLBAR)) {
       appActions.changeSetting(settings.SHOW_BOOKMARKS_TOOLBAR, true)
     }
-  }
-
-  onSave (closeDialog = true) {
-    // First check if the title of the currentDetail is set
-    if (!this.props.isBookmarkNameValid) {
-      return false
-    }
-    this.showToolbarOnFirstBookmark()
-    const tag = this.props.isFolder ? siteTags.BOOKMARK_FOLDER : siteTags.BOOKMARK
-    appActions.addSite(this.props.currentDetail, tag, this.props.originalDetail, this.props.destinationDetail)
-
-    if (closeDialog) {
-      this.onClose()
-    }
-  }
 
-  onRemoveBookmark () {
-    const tag = this.props.isFolder ? siteTags.BOOKMARK_FOLDER : siteTags.BOOKMARK
-    appActions.removeSite(this.props.currentDetail, tag)
-    this.onClose()
+    appActions.addBookmark(Immutable.fromJS({
+      title: this.props.bookmarkName,
+      location: this.props.location,
+      folderId: this.props.parentId
+    }), siteTags.BOOKMARK)
   }
 
   onViewBookmarks () {
@@ -161,9 +75,10 @@ class AddEditBookmarkHanger extends React.Component {
 
   mergeProps (state, ownProps) {
     const currentWindow = state.get('currentWindow')
-    const bookmarkDetail = currentWindow.get('bookmarkDetail', new Immutable.Map())
-    const currentDetail = bookmarkDetail.get('currentDetail', new Immutable.Map())
-    const originalDetail = bookmarkDetail.get('originalDetail')
+    const bookmarkDetail = currentWindow.get('bookmarkDetail', Immutable.Map())
+    const siteDetail = bookmarkDetail.get('siteDetail', Immutable.Map())
+    const editMode = bookmarkDetail.has('editKey')
+    const isAdded = bookmarkDetail.get('isAdded', false)
 
     const props = {}
     // used in renderer
@@ -171,21 +86,26 @@ class AddEditBookmarkHanger extends React.Component {
     props.withHomeButton = getSetting(settings.SHOW_HOME_BUTTON)
     // Fake a folderId property so that the bookmark is considered a bookmark folder.
     // This is ImmutableJS so it doesn't actually set a value, it just returns a new one.
-    props.isFolder = siteUtil.isFolder(currentDetail.set('folderId', 0))
-    props.shouldShowLocation = bookmarkDetail.get('shouldShowLocation')
-    props.heading = bookmarkHangerHeading(originalDetail, props.isFolder, props.shouldShowLocation)
-    props.location = currentDetail.get('location')
-    props.parentFolderId = currentDetail.get('parentFolderId')
-    props.hasOriginalDetail = !!originalDetail
-    props.displayBookmarkName = displayBookmarkName(currentDetail)
-    props.isBookmarkNameValid = isBookmarkNameValid(currentDetail, props.isFolder)
-    props.folders = siteUtil.getFolders(state.get('sites'), currentDetail.get('folderId')) // TODO (nejc) improve, primitives only
+    props.isFolder = siteDetail ? siteUtil.isFolder(siteDetail.set('folderId', 0)) : false
+    props.heading = bookmarkHangerHeading(editMode, props.isFolder, isAdded)
+    props.location = siteDetail.get('location')
+    props.parentFolderId = siteDetail.get('parentFolderId')
+    props.partitionNumber = siteDetail.get('partitionNumber')
+    props.bookmarkName = displayBookmarkName(siteDetail)
+    props.currentTitle = siteDetail.get('title')
+    props.isBookmarkNameValid = isBookmarkNameValid(
+      siteDetail.get('title'),
+      siteDetail.get('location'),
+      props.isFolder,
+      siteDetail.get('customTitle')
+    )
+    props.folders = siteUtil.getFolders(state.get('sites'), siteDetail.get('folderId')) // TODO (nejc) improve, primitives only
+    props.editKey = bookmarkDetail.get('editKey', null)
+    props.closestKey = bookmarkDetail.get('closestKey', null)
 
     // used in functions
-    props.currentDetail = currentDetail // TODO (nejc) improve, primitives only
-    props.originalDetail = originalDetail // TODO (nejc) improve, primitives only
-    props.destinationDetail = bookmarkDetail.get('destinationDetail') // TODO (nejc) improve, primitives only
-    props.hasBookmarks = state.get('sites').find(
+    props.isAdded = isAdded
+    props.hasBookmarks = state.get('sites').some(
       (site) => siteUtil.isBookmark(site) || siteUtil.isFolder(site)
     )
 
@@ -211,89 +131,19 @@ class AddEditBookmarkHanger extends React.Component {
           [css(styles.commonFormSection)]: true,
           [css(styles.commonFormTitle)]: true
         })} data-l10n-id={this.props.heading} />
-        <CommonFormSection>
-          <div className={css(styles.bookmark__sectionWrapper)}>
-            <section>
-              <label className={css(styles.bookmarkHanger__label)}
-                data-l10n-id='nameField' htmlFor='bookmarkName' />
-              <div className={css(
-                commonFormStyles.inputWrapper,
-                commonFormStyles.inputWrapper__input
-              )}>
-                <input className={css(
-                  commonStyles.formControl,
-                  commonStyles.textbox,
-                  commonStyles.textbox__outlineable,
-                  commonFormStyles.input__box,
-                )}
-                  data-test-id='bookmarkNameInput'
-                  spellCheck='false'
-                  onKeyDown={this.onKeyDown}
-                  onChange={this.onNameChange}
-                  ref={(bookmarkName) => { this.bookmarkName = bookmarkName }}
-                />
-              </div>
-            </section>
-            {
-              !this.props.isFolder && this.props.shouldShowLocation
-              ? <section className={css(styles.bookmarkHanger__marginRow)}>
-                <div className={css(
-                  commonFormStyles.inputWrapper,
-                  commonFormStyles.inputWrapper__input
-                )}>
-                  <label className={css(styles.bookmarkHanger__label)}
-                    data-l10n-id='locationField' htmlFor='bookmarkLocation' />
-                  <CommonFormTextbox
-                    data-test-id='bookmarkLocationInput'
-                    spellCheck='false'
-                    onKeyDown={this.onKeyDown}
-                    onChange={this.onLocationChange}
-                    value={this.props.location}
-                  />
-                </div>
-              </section>
-              : null
-            }
-            <div className={css(
-              commonFormStyles.inputWrapper,
-              commonFormStyles.inputWrapper__input,
-              styles.bookmarkHanger__marginRow,
-            )}>
-              <label className={css(styles.bookmarkHanger__label)}
-                data-l10n-id='parentFolderField' htmlFor='bookmarkParentFolder' />
-              <CommonFormDropdown
-                data-test-id='bookmarkParentFolder'
-                value={this.props.parentFolderId}
-                onChange={this.onParentFolderChange} >
-                <option value='0' data-l10n-id='bookmarksToolbar' />
-                {
-                  this.props.folders.map((folder) => <option value={folder.folderId}>{folder.label}</option>)
-                }
-              </CommonFormDropdown>
-            </div>
-          </div>
-        </CommonFormSection>
-        <CommonFormButtonWrapper>
-          {
-            this.props.hasOriginalDetail
-            ? <BrowserButton groupedItem secondaryColor
-              l10nId='remove'
-              testId='bookmarkHangerRemoveButton'
-              onClick={this.onRemoveBookmark}
-            />
-            : <BrowserButton groupedItem secondaryColor
-              l10nId='cancel'
-              testId='bookmarkHangerCancelButton'
-              onClick={this.onClose}
-            />
-          }
-          <BrowserButton groupedItem primaryColor
-            l10nId='done'
-            testId='bookmarkHangerDoneButton'
-            disabled={!this.props.isBookmarkNameValid}
-            onClick={this.onSave}
-          />
-        </CommonFormButtonWrapper>
+        <AddEditBookmarkForm
+          bookmarkName={this.props.bookmarkName}
+          currentTitle={this.props.currentTitle}
+          editKey={this.props.editKey}
+          closestKey={this.props.closestKey}
+          location={this.props.location}
+          parentFolderId={this.props.parentFolderId}
+          partitionNumber={this.props.partitionNumber}
+          isFolder={this.props.isFolder}
+          folders={this.props.folders}
+          isAdded={this.props.isAdded}
+          isDisabled={!this.props.isBookmarkNameValid}
+        />
         {
           !this.props.isModal
             ? <CommonFormBottomWrapper>
@@ -351,18 +201,6 @@ const styles = StyleSheet.create({
   bookmarkHanger__withHomeButton: {
     left: '83px'
   },
-  bookmarkHanger__label: {
-    display: 'block',
-    marginBottom: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
-  },
-  bookmarkHanger__marginRow: {
-    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
-  },
-
-  bookmark__sectionWrapper: {
-    display: 'flex',
-    flexFlow: 'column nowrap'
-  },
   bookmark__bottomWrapper: {
     display: 'flex',
     justifyContent: 'center'
diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
index 158b47f7f74..dd280bf105d 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/app/renderer/components/navigation/navigationBar.js
@@ -19,7 +19,6 @@ const windowActions = require('../../../../js/actions/windowActions')
 const appActions = require('../../../../js/actions/appActions')
 
 // Constants
-const siteTags = require('../../../../js/constants/siteTags')
 const messages = require('../../../../js/constants/messages')
 const settings = require('../../../../js/constants/settings')
 
@@ -28,15 +27,11 @@ const tabState = require('../../../common/state/tabState')
 const publisherState = require('../../../common/lib/publisherUtil')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
 
-// Store
-const windowStore = require('../../../../js/stores/windowStore')
-
 // Utils
 const cx = require('../../../../js/lib/classSet')
 const {getBaseUrl} = require('../../../../js/lib/appUrlUtil')
 const siteUtil = require('../../../../js/state/siteUtil')
 const eventUtil = require('../../../../js/lib/eventUtil')
-const UrlUtil = require('../../../../js/lib/urlutil')
 const {getSetting} = require('../../../../js/settings')
 const contextMenus = require('../../../../js/contextMenus')
 
@@ -51,22 +46,14 @@ class NavigationBar extends React.Component {
     this.onReloadLongPress = this.onReloadLongPress.bind(this)
   }
 
-  get activeFrame () {
-    return windowStore.getFrame(this.props.activeFrameKey)
-  }
-
   onToggleBookmark () {
     const editing = this.props.isBookmarked
-    // show the AddEditBookmarkHanger control; saving/deleting takes place there
-    let siteDetail = siteUtil.getDetailFromFrame(this.activeFrame, siteTags.BOOKMARK)
-    const key = siteUtil.getSiteKey(siteDetail)
 
-    if (key !== null) {
-      siteDetail = siteDetail.set('parentFolderId', this.props.sites.getIn([key, 'parentFolderId']))
-      siteDetail = siteDetail.set('customTitle', this.props.sites.getIn([key, 'customTitle']))
+    if (editing) {
+      windowActions.editBookmark(true, this.props.bookmarkKey)
+    } else {
+      windowActions.onBookmarkAdded(true, this.props.bookmarkKey)
     }
-    siteDetail = siteDetail.set('location', UrlUtil.getLocationIfPDF(siteDetail.get('location')))
-    windowActions.setBookmarkDetail(siteDetail, siteDetail, null, editing, true)
   }
 
   onReload (e) {
@@ -137,8 +124,8 @@ class NavigationBar extends React.Component {
     // used in other functions
     props.isFocused = navbar.getIn(['urlbar', 'focused'], false)
     props.shouldRenderSuggestions = navbar.getIn(['urlbar', 'suggestions', 'shouldRender']) === true
-    props.sites = state.get('sites') // TODO(nejc) remove, primitives only
     props.activeTabId = activeTabId
+    props.bookmarkKey = siteUtil.getSiteKey(activeFrame)
     props.showHomeButton = !props.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
 
     return props
diff --git a/app/renderer/reducers/contextMenuReducer.js b/app/renderer/reducers/contextMenuReducer.js
index ffd7be53af6..36f3795b6a6 100644
--- a/app/renderer/reducers/contextMenuReducer.js
+++ b/app/renderer/reducers/contextMenuReducer.js
@@ -213,14 +213,22 @@ const addBookmarkMenuItem = (label, siteDetail, closestDestinationDetail, isPare
     label: locale.translation(label),
     accelerator: 'CmdOrCtrl+D',
     click: () => {
-      if (isParent) {
-        siteDetail = siteDetail.set('parentFolderId', closestDestinationDetail && closestDestinationDetail.get('folderId', closestDestinationDetail.get('parentFolderId')))
+      let closestKey = null
+
+      if (closestDestinationDetail) {
+        closestKey = siteUtil.getSiteKey(closestDestinationDetail)
+
+        if (isParent) {
+          siteDetail = siteDetail.set('parentFolderId', (closestDestinationDetail.get('folderId') || closestDestinationDetail.get('parentFolderId')))
+        }
       }
+
       if (siteDetail.constructor !== Immutable.Map) {
         siteDetail = Immutable.fromJS(siteDetail)
       }
+
       siteDetail = siteDetail.set('location', urlUtil.getLocationIfPDF(siteDetail.get('location')))
-      windowActions.setBookmarkDetail(siteDetail, siteDetail, closestDestinationDetail, true)
+      windowActions.addBookmark(siteDetail, closestKey)
     }
   }
 }
@@ -229,11 +237,18 @@ const addFolderMenuItem = (closestDestinationDetail, isParent) => {
   return {
     label: locale.translation('addFolder'),
     click: () => {
-      let emptyFolder = Immutable.fromJS({ tags: [siteTags.BOOKMARK_FOLDER] })
-      if (isParent) {
-        emptyFolder = emptyFolder.set('parentFolderId', closestDestinationDetail && closestDestinationDetail.get('folderId', closestDestinationDetail.get('parentFolderId')))
+      let siteDetail = Immutable.fromJS({ tags: [siteTags.BOOKMARK_FOLDER] })
+      let closestKey = null
+
+      if (closestDestinationDetail) {
+        closestKey = siteUtil.getSiteKey(closestDestinationDetail)
+
+        if (isParent) {
+          siteDetail = siteDetail.set('parentFolderId', (closestDestinationDetail.get('folderId') || closestDestinationDetail.get('parentFolderId')))
+        }
       }
-      windowActions.setBookmarkDetail(emptyFolder, undefined, closestDestinationDetail, false)
+
+      windowActions.addBookmark(siteDetail, closestKey)
     }
   }
 }
@@ -342,7 +357,10 @@ const siteDetailTemplateInit = (state, siteKey) => {
       template.push(
         {
           label: locale.translation(isFolder ? 'editFolder' : 'editBookmark'),
-          click: () => windowActions.setBookmarkDetail(siteDetail, siteDetail, null, true)
+          click: () => {
+            const editKey = siteUtil.getSiteKey(siteDetail)
+            windowActions.editBookmark(false, editKey)
+          }
         },
         CommonMenu.separatorMenuItem)
     }
diff --git a/docs/appActions.md b/docs/appActions.md
index b2515c36d75..937f1e32ec3 100644
--- a/docs/appActions.md
+++ b/docs/appActions.md
@@ -171,7 +171,7 @@ Notifies that a tab has been closed
 
 
 
-### addSite(siteDetail, tag, originalSiteDetail, destinationIsParent, skipSync) 
+### addSite(siteDetail, tag, skipSync) 
 
 Adds a site to the site list
 
@@ -181,11 +181,6 @@ Adds a site to the site list
 
 **tag**: `string`, A tag to associate with the site. e.g. bookmarks.
 
-**originalSiteDetail**: `string`, If specified, the original site detail to edit / overwrite.
-
-**destinationIsParent**: `boolean`, Whether or not the destinationDetail should be considered the new parent.
-  The details of the old entries will be modified if this is set, otherwise only the tag will be added.
-
 **skipSync**: `boolean`, Set true if a site isn't eligible for Sync (e.g. if addSite was triggered by Sync)
 
 
diff --git a/docs/windowActions.md b/docs/windowActions.md
index 5355ab83404..25a7be5c44d 100644
--- a/docs/windowActions.md
+++ b/docs/windowActions.md
@@ -386,22 +386,23 @@ Dispatches a message to set the find-in-page details.
 
 
 
-### setBookmarkDetail(currentDetail, originalDetail, destinationDetail, shouldShowLocation, isBookmarkHanger) 
+### addBookmark() 
 
-Dispatches a message to set add/edit bookmark details
-If set, also indicates that add/edit is shown
+Used for displaying bookmark hanger
+when adding bookmark site or folder
 
-**Parameters**
 
-**currentDetail**: `Object`, Properties of the bookmark to change to
 
-**originalDetail**: `Object`, Properties of the bookmark to edit
+### editBookmark() 
+
+Used for displaying bookmark hanger
+when editing bookmark site or folder
+
 
-**destinationDetail**: `Object`, Will move the added bookmark to the specified position
 
-**shouldShowLocation**: `boolean`, Whether or not to show the URL input
+### onBookmarkClose() 
 
-**isBookmarkHanger**: `boolean`, true if triggered from star icon in nav bar
+Used for closing a bookmark dialog
 
 
 
diff --git a/js/about/aboutActions.js b/js/about/aboutActions.js
index 746fe3f5b21..1992015338f 100644
--- a/js/about/aboutActions.js
+++ b/js/about/aboutActions.js
@@ -4,7 +4,6 @@
 
 const messages = require('../constants/messages')
 const appDispatcher = require('../dispatcher/appDispatcher')
-const windowConstants = require('../constants/windowConstants')
 const appConstants = require('../constants/appConstants')
 const ExtensionConstants = require('../../app/common/constants/extensionConstants')
 const ipc = window.chrome.ipcRenderer
@@ -356,51 +355,6 @@ const aboutActions = {
     })
   },
 
-  /**
-   * Show the "Add Bookmark" control
-   * @param {Object} siteDetail - object bound to add/edit control
-   */
-  showAddBookmark: function (siteDetail) {
-    aboutActions.dispatchAction({
-      actionType: windowConstants.WINDOW_SET_BOOKMARK_DETAIL,
-      currentDetail: siteDetail,
-      originalDetail: null,
-      destinationDetail: null,
-      shouldShowLocation: true
-    })
-  },
-
-  /**
-   * Show the "Add Bookmark" control for a folder
-   * @param {Object} siteDetail - object bound to add/edit control
-   */
-  showAddBookmarkFolder: function (siteDetail) {
-    aboutActions.dispatchAction({
-      actionType: windowConstants.WINDOW_SET_BOOKMARK_DETAIL,
-      currentDetail: siteDetail
-    })
-  },
-
-  /**
-   * 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
-   * @param {boolean} shouldShowLocation - Whether or not to show the URL input
-   * @param {boolean} isBookmarkHanger - true if triggered from star icon in nav bar
-   */
-  setBookmarkDetail: function (currentDetail, originalDetail, destinationDetail, shouldShowLocation, isBookmarkHanger) {
-    aboutActions.dispatchAction({
-      actionType: windowConstants.WINDOW_SET_BOOKMARK_DETAIL,
-      currentDetail,
-      originalDetail,
-      destinationDetail,
-      shouldShowLocation,
-      isBookmarkHanger
-    })
-  },
-
   /**
    * Dispatch a message to set default browser
    */
diff --git a/js/about/bookmarks.js b/js/about/bookmarks.js
index a19a7f835c9..e0de03a3634 100644
--- a/js/about/bookmarks.js
+++ b/js/about/bookmarks.js
@@ -16,6 +16,7 @@ const SortableTable = require('../../app/renderer/components/common/sortableTabl
 const siteUtil = require('../state/siteUtil')
 const formatUtil = require('../../app/common/lib/formatUtil')
 const {iconSize} = require('../constants/config')
+const windowActions = require('../actions/windowActions')
 
 const ipc = window.chrome.ipcRenderer
 
@@ -201,7 +202,7 @@ class BookmarkTitleHeader extends ImmutableComponent {
       parentFolderId: this.props.selectedFolderId,
       tags: [siteTags.BOOKMARK]
     })
-    aboutActions.showAddBookmark(newBookmark)
+    windowActions.addBookmark(newBookmark)
   }
   render () {
     return <div className='th-inner'>
@@ -444,7 +445,7 @@ class AboutBookmarks extends React.Component {
       parentFolderId: this.state.selectedFolderId,
       tags: [siteTags.BOOKMARK_FOLDER]
     })
-    aboutActions.showAddBookmarkFolder(newFolder)
+    windowActions.addBookmark(newFolder)
   }
   clearSelection () {
     this.refs.bookmarkList.clearSelection()
diff --git a/js/about/newtab.js b/js/about/newtab.js
index dde0fc0ec55..e9a2b83010b 100644
--- a/js/about/newtab.js
+++ b/js/about/newtab.js
@@ -21,6 +21,7 @@ const config = require('../constants/config')
 const backgrounds = require('../data/backgrounds')
 const {random} = require('../../app/common/lib/randomUtil')
 const NewPrivateTab = require('./newprivatetab')
+const windowActions = require('../actions/windowActions')
 
 const ipc = window.chrome.ipcRenderer
 
@@ -96,7 +97,7 @@ class NewTabPage extends React.Component {
     }).size > 0
   }
   isBookmarked (siteProps) {
-    return siteUtil.isSiteBookmarked(this.topSites, siteProps)
+    return siteUtil.isBookmark(siteProps)
   }
   get gridLayout () {
     const sizeToCount = {large: 18, medium: 12, small: 6}
@@ -171,8 +172,13 @@ class NewTabPage extends React.Component {
   onToggleBookmark (siteProps) {
     const siteDetail = siteUtil.getDetailFromFrame(siteProps, siteTags.BOOKMARK)
     const editing = this.isBookmarked(siteProps)
-    // PDFJS will not show up in new tab
-    aboutActions.setBookmarkDetail(siteDetail, siteDetail, null, editing)
+    const key = siteUtil.getSiteKey(siteDetail)
+
+    if (editing) {
+      windowActions.editBookmark(false, key)
+    } else {
+      windowActions.onBookmarkAdded(false, key)
+    }
   }
 
   onPinnedTopSite (siteProps) {
diff --git a/js/actions/appActions.js b/js/actions/appActions.js
index f5fefc1392d..951c72600e8 100644
--- a/js/actions/appActions.js
+++ b/js/actions/appActions.js
@@ -237,18 +237,13 @@ const appActions = {
    * Adds a site to the site list
    * @param {Object} siteDetail - Properties of the site in question, can also be an array of siteDetail
    * @param {string} tag - A tag to associate with the site. e.g. bookmarks.
-   * @param {string} originalSiteDetail - If specified, the original site detail to edit / overwrite.
-   * @param {boolean} destinationIsParent - Whether or not the destinationDetail should be considered the new parent.
-   *   The details of the old entries will be modified if this is set, otherwise only the tag will be added.
    * @param {boolean} skipSync - Set true if a site isn't eligible for Sync (e.g. if addSite was triggered by Sync)
    */
-  addSite: function (siteDetail, tag, originalSiteDetail, destinationDetail, skipSync) {
+  addSite: function (siteDetail, tag, skipSync) {
     dispatch({
       actionType: appConstants.APP_ADD_SITE,
       siteDetail,
       tag,
-      originalSiteDetail,
-      destinationDetail,
       skipSync
     })
   },
@@ -1493,6 +1488,24 @@ const appActions = {
       actionType: appConstants.APP_SWIPE_RIGHT,
       percent
     })
+  },
+
+  addBookmark: function (siteDetail, tag, closestKey) {
+    dispatch({
+      actionType: appConstants.APP_ADD_BOOKMARK,
+      siteDetail,
+      tag,
+      closestKey
+    })
+  },
+
+  editBookmark: function (siteDetail, editKey, tag) {
+    dispatch({
+      actionType: appConstants.APP_EDIT_BOOKMARK,
+      siteDetail,
+      tag,
+      editKey
+    })
   }
 }
 
diff --git a/js/actions/windowActions.js b/js/actions/windowActions.js
index e74da9669d5..1fe3db560ed 100644
--- a/js/actions/windowActions.js
+++ b/js/actions/windowActions.js
@@ -492,22 +492,44 @@ const windowActions = {
   },
 
   /**
-   * 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
-   * @param {boolean} shouldShowLocation - Whether or not to show the URL input
-   * @param {boolean} isBookmarkHanger - true if triggered from star icon in nav bar
-   */
-  setBookmarkDetail: function (currentDetail, originalDetail, destinationDetail, shouldShowLocation, isBookmarkHanger) {
-    dispatch({
-      actionType: windowConstants.WINDOW_SET_BOOKMARK_DETAIL,
-      currentDetail,
-      originalDetail,
-      destinationDetail,
-      shouldShowLocation,
-      isBookmarkHanger
+   * Used for displaying bookmark hanger
+   * when adding bookmark site or folder
+   */
+  addBookmark: function (siteDetail, closestKey) {
+    dispatch({
+      actionType: windowConstants.WINDOW_ON_ADD_BOOKMARK,
+      siteDetail,
+      closestKey
+    })
+  },
+
+  /**
+   * Used for displaying bookmark hanger
+   * when editing bookmark site or folder
+   */
+  editBookmark: function (isHanger, editKey) {
+    dispatch({
+      actionType: windowConstants.WINDOW_ON_EDIT_BOOKMARK,
+      editKey,
+      isHanger
+    })
+  },
+
+  onBookmarkAdded: function (isHanger, editKey, siteDetail) {
+    dispatch({
+      actionType: windowConstants.WINDOW_ON_BOOKMARK_ADDED,
+      siteDetail,
+      editKey,
+      isHanger
+    })
+  },
+
+  /**
+   * Used for closing a bookmark dialog
+   */
+  onBookmarkClose: function () {
+    dispatch({
+      actionType: windowConstants.WINDOW_ON_BOOKMARK_CLOSE
     })
   },
 
diff --git a/js/constants/appConstants.js b/js/constants/appConstants.js
index f8d6c4d80d0..4cf12f884bc 100644
--- a/js/constants/appConstants.js
+++ b/js/constants/appConstants.js
@@ -139,7 +139,9 @@ const appConstants = {
   APP_ON_CANCEL_BROWSING_DATA: _,
   APP_SET_SKIP_SYNC: _,
   APP_SWIPE_LEFT: _,
-  APP_SWIPE_RIGHT: _
+  APP_SWIPE_RIGHT: _,
+  APP_ADD_BOOKMARK: _,
+  APP_EDIT_BOOKMARK: _
 }
 
 module.exports = mapValuesByKeys(appConstants)
diff --git a/js/constants/windowConstants.js b/js/constants/windowConstants.js
index 58a191943a5..475cf1312a8 100644
--- a/js/constants/windowConstants.js
+++ b/js/constants/windowConstants.js
@@ -107,7 +107,11 @@ const windowConstants = {
   WINDOW_ON_STOP: _,
   WINDOW_ON_MORE_BOOKMARKS_MENU: _,
   WINDOW_ON_SHOW_BOOKMARK_FOLDER_MENU: _,
-  WINDOW_ON_SITE_DETAIL_MENU: _
+  WINDOW_ON_SITE_DETAIL_MENU: _,
+  WINDOW_ON_ADD_BOOKMARK: _,
+  WINDOW_ON_EDIT_BOOKMARK: _,
+  WINDOW_ON_BOOKMARK_CLOSE: _,
+  WINDOW_ON_BOOKMARK_ADDED: _
 }
 
 module.exports = mapValuesByKeys(windowConstants)
diff --git a/js/contextMenus.js b/js/contextMenus.js
index 19566685536..01eb1ec0af2 100644
--- a/js/contextMenus.js
+++ b/js/contextMenus.js
@@ -40,21 +40,28 @@ const isLinux = process.platform === 'linux'
 
 /**
  * Obtains an add bookmark menu item
- * @param {object} Detail of the bookmark to initialize with
  */
 const addBookmarkMenuItem = (label, siteDetail, closestDestinationDetail, isParent) => {
   return {
     label: locale.translation(label),
     accelerator: 'CmdOrCtrl+D',
     click: () => {
-      if (isParent) {
-        siteDetail = siteDetail.set('parentFolderId', closestDestinationDetail && (closestDestinationDetail.get('folderId') || closestDestinationDetail.get('parentFolderId')))
+      let closestKey = null
+
+      if (closestDestinationDetail) {
+        closestKey = siteUtil.getSiteKey(closestDestinationDetail)
+
+        if (isParent) {
+          siteDetail = siteDetail.set('parentFolderId', (closestDestinationDetail.get('folderId') || closestDestinationDetail.get('parentFolderId')))
+        }
       }
+
       if (siteDetail.constructor !== Immutable.Map) {
         siteDetail = Immutable.fromJS(siteDetail)
       }
+
       siteDetail = siteDetail.set('location', urlUtil.getLocationIfPDF(siteDetail.get('location')))
-      windowActions.setBookmarkDetail(siteDetail, siteDetail, closestDestinationDetail, true)
+      windowActions.addBookmark(siteDetail, closestKey)
     }
   }
 }
@@ -63,11 +70,18 @@ const addFolderMenuItem = (closestDestinationDetail, isParent) => {
   return {
     label: locale.translation('addFolder'),
     click: () => {
-      let emptyFolder = Immutable.fromJS({ tags: [siteTags.BOOKMARK_FOLDER] })
-      if (isParent) {
-        emptyFolder = emptyFolder.set('parentFolderId', closestDestinationDetail && (closestDestinationDetail.get('folderId') || closestDestinationDetail.get('parentFolderId')))
+      let siteDetail = Immutable.fromJS({ tags: [siteTags.BOOKMARK_FOLDER] })
+      let closestKey = null
+
+      if (closestDestinationDetail) {
+        closestKey = siteUtil.getSiteKey(closestDestinationDetail)
+
+        if (isParent) {
+          siteDetail = siteDetail.set('parentFolderId', (closestDestinationDetail.get('folderId') || closestDestinationDetail.get('parentFolderId')))
+        }
       }
-      windowActions.setBookmarkDetail(emptyFolder, undefined, closestDestinationDetail, false)
+
+      windowActions.addBookmark(siteDetail, closestKey)
     }
   }
 }
@@ -290,7 +304,10 @@ function siteDetailTemplateInit (siteDetail, activeFrame) {
       template.push(
         {
           label: locale.translation(isFolder ? 'editFolder' : 'editBookmark'),
-          click: () => windowActions.setBookmarkDetail(siteDetail, siteDetail, null, true)
+          click: () => {
+            const editKey = siteUtil.getSiteKey(siteDetail)
+            windowActions.editBookmark(false, editKey)
+          }
         },
         CommonMenu.separatorMenuItem)
     }
diff --git a/js/state/siteUtil.js b/js/state/siteUtil.js
index 6c711a0b49d..5320b15a9c7 100644
--- a/js/state/siteUtil.js
+++ b/js/state/siteUtil.js
@@ -257,35 +257,33 @@ const mergeSiteDetails = (oldSiteDetail, newSiteDetail, tag, folderId, order) =>
 }
 
 /**
- * Adds or updates the specified siteDetail in appState.sites.
+ * Adds the specified siteDetail in appState.sites.
  *
  * Examples of updating:
  * - editing bookmark in add/edit modal
  * - when timestamp is added (history entry)
  * - moving bookmark to/from a folder
  *
- * @param sites The application state's Immutable site list
- * @param siteDetails The site details object to add or update
- * @param tag The tag to add for this site
+ * @param state - The application state
+ * @param siteDetail - The site details object to add or update
+ * @param tag - The tag to add for this site
  *   See siteTags.js for supported types. No tag means just a history item
- * @param originalSiteDetail If specified, use when searching site list
- * @param {boolean=} skipSync - True if this site was downloaded by sync and
+ * @param oldKey - key of a changed site
+ * @param {boolean} skipSync - True if this site was downloaded by sync and
  *   does not to be re-uploaded
  * @return The new state Immutable object
  */
-module.exports.addSite = function (state, siteDetail, tag, originalSiteDetail, skipSync) {
+module.exports.addSite = function (state, siteDetail, tag, oldKey, skipSync) {
   let sites = state.get('sites')
   // Get tag from siteDetail object if not passed via tag param
   if (tag === undefined) {
     tag = siteDetail.getIn(['tags', 0])
   }
 
-  let originalSiteKey
-  if (originalSiteDetail) {
-    originalSiteKey = module.exports.getSiteKey(originalSiteDetail)
+  if (!oldKey) {
+    oldKey = module.exports.getSiteKey(siteDetail)
   }
 
-  const oldKey = originalSiteKey || module.exports.getSiteKey(siteDetail)
   const oldSite = oldKey !== null ? sites.get(oldKey) : null
   let folderId = siteDetail.get('folderId')
 
@@ -314,6 +312,7 @@ module.exports.addSite = function (state, siteDetail, tag, originalSiteDetail, s
     location = UrlUtil.getLocationIfPDF(site.get('location'))
     site = site.set('location', location)
   }
+
   const oldLocation = (oldSite && oldSite.get('location')) || site.get('location')
   state = siteCache.removeLocationSiteKey(state, oldLocation, oldKey)
 
@@ -753,21 +752,30 @@ module.exports.getFolder = function (sites, folderId) {
 module.exports.getFolders = function (sites, folderId, parentId, labelPrefix) {
   parentId = parentId || 0
   let folders = []
-  sites.toList().sort(module.exports.siteSort).forEach((site) => {
-    if ((site.get('parentFolderId') || 0) === parentId && module.exports.isFolder(site)) {
-      if (site.get('folderId') === folderId) {
-        return
-      }
-      const label = (labelPrefix || '') + (site.get('customTitle') || site.get('title'))
-      folders.push({
-        folderId: site.get('folderId'),
-        parentFolderId: site.get('parentFolderId'),
-        label
-      })
-      const subsites = module.exports.getFolders(sites, folderId, site.get('folderId'), (label || '') + ' / ')
-      folders = folders.concat(subsites)
+  const results = sites
+    .filter(site => {
+      return (site.get('parentFolderId', 0) === parentId && module.exports.isFolder(site))
+    })
+    .toList()
+    .sort(module.exports.siteSort)
+
+  const resultSize = results.size
+  for (let i = 0; i < resultSize; i++) {
+    const site = results.get(i)
+    if (site.get('folderId') === folderId) {
+      continue
     }
-  })
+
+    const label = (labelPrefix || '') + (site.get('customTitle') || site.get('title'))
+    folders.push({
+      folderId: site.get('folderId'),
+      parentFolderId: site.get('parentFolderId'),
+      label
+    })
+    const subsites = module.exports.getFolders(sites, folderId, site.get('folderId'), (label || '') + ' / ')
+    folders = folders.concat(subsites)
+  }
+
   return folders
 }
 
diff --git a/js/stores/appStore.js b/js/stores/appStore.js
index 307c00b647c..f34ddf79c13 100644
--- a/js/stores/appStore.js
+++ b/js/stores/appStore.js
@@ -451,6 +451,8 @@ const handleAppAction = (action) => {
       nativeImage.copyDataURL(action.dataURL, action.html, action.text)
       break
     case appConstants.APP_ADD_SITE:
+    case appConstants.APP_ADD_BOOKMARK:
+    case appConstants.APP_EDIT_BOOKMARK:
       const oldSiteSize = appState.get('sites').size
       appState = aboutNewTabState.setSites(appState, action)
       appState = aboutHistoryState.setHistory(appState, action)
diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js
index 088396799e2..a649d514d8f 100644
--- a/js/stores/windowStore.js
+++ b/js/stores/windowStore.js
@@ -248,7 +248,8 @@ const applyReducers = (state, action, immutableAction) => [
 const immediatelyEmittedActions = [
   windowConstants.WINDOW_SET_NAVBAR_INPUT,
   windowConstants.WINDOW_SET_FIND_DETAIL,
-  windowConstants.WINDOW_SET_BOOKMARK_DETAIL,
+  windowConstants.WINDOW_ON_ADD_BOOKMARK,
+  windowConstants.WINDOW_ON_EDIT_BOOKMARK,
   windowConstants.WINDOW_AUTOFILL_POPUP_HIDDEN,
   windowConstants.WINDOW_SET_CONTEXT_MENU_DETAIL,
   windowConstants.WINDOW_SET_POPUP_WINDOW_DETAIL,
@@ -443,17 +444,47 @@ const doAction = (action) => {
         }
         break
       }
-    case windowConstants.WINDOW_SET_BOOKMARK_DETAIL:
-      if (!action.currentDetail && !action.originalDetail) {
-        windowState = windowState.delete('bookmarkDetail')
-      } else {
-        windowState = windowState.mergeIn(['bookmarkDetail'], {
-          currentDetail: action.currentDetail,
-          originalDetail: action.originalDetail,
-          destinationDetail: action.destinationDetail,
-          shouldShowLocation: action.shouldShowLocation,
-          isBookmarkHanger: action.isBookmarkHanger
-        })
+    case windowConstants.WINDOW_ON_ADD_BOOKMARK:
+      windowState = windowState.setIn(['bookmarkDetail'], Immutable.fromJS({
+        siteDetail: action.siteDetail,
+        isBookmarkHanger: false,
+        closestKey: action.closestKey
+      }))
+      break
+    case windowConstants.WINDOW_ON_BOOKMARK_CLOSE:
+      windowState = windowState.delete('bookmarkDetail')
+      break
+    case windowConstants.WINDOW_ON_EDIT_BOOKMARK:
+      const siteDetail = appStoreRenderer.state.getIn(['sites', action.editKey])
+
+      windowState = windowState.setIn(['bookmarkDetail'], Immutable.fromJS({
+        siteDetail: siteDetail,
+        editKey: action.editKey,
+        isBookmarkHanger: action.isHanger
+      }))
+      break
+    case windowConstants.WINDOW_ON_BOOKMARK_ADDED:
+      {
+        let editKey = action.editKey
+        const site = appStoreRenderer.state.getIn(['sites', editKey])
+        let siteDetail = action.siteDetail
+
+        if (site) {
+          siteDetail = site
+        }
+
+        if (siteDetail == null) {
+          siteDetail = frameStateUtil.getActiveFrame(windowState)
+        }
+
+        siteDetail = siteDetail.set('location', UrlUtil.getLocationIfPDF(siteDetail.get('location')))
+
+        windowState = windowState.setIn(['bookmarkDetail'], Immutable.fromJS({
+          siteDetail: siteDetail,
+          editKey: editKey,
+          isBookmarkHanger: action.isHanger,
+          isAdded: true
+        }))
       }
       break
     case windowConstants.WINDOW_AUTOFILL_SELECTION_CLICKED:
diff --git a/test/bookmark-components/bookmarksTest.js b/test/bookmark-components/bookmarksTest.js
index 37825b2fe2c..60859a6aef8 100644
--- a/test/bookmark-components/bookmarksTest.js
+++ b/test/bookmark-components/bookmarksTest.js
@@ -78,17 +78,26 @@ describe('bookmark tests', function () {
           .typeText(bookmarkNameInput, 'https://www.brave.com')
           .keys(Brave.keys.END)
           .keys('а')
-          .waitForInputText(bookmarkNameInput, 'https://www.brave.xn--com-8cd/')
           .setValue(bookmarkLocationInput, '')
           .waitForInputText(bookmarkLocationInput, '')
           .typeText(bookmarkLocationInput, 'https://www.brave.com')
           .keys(Brave.keys.END)
           .keys('а')
-          .waitForInputText(bookmarkLocationInput, 'https://www.brave.xn--com-8cd/')
-          .click(removeButton)
+          .click(doneButton)
+          .windowByUrl(Brave.browserWindowUrl)
+          .waitUntil(function () {
+            return this.getAppState().then((val) => {
+              return val.value.sites['https://www.brave.xn--com-8cd/|0|0'].customTitle === 'https://www.brave.xn--com-8cd/'
+            })
+          })
       })
       it('custom title and location can be backspaced', function * () {
         yield this.app.client
+          .activateURLMode()
+          .waitForVisible(navigatorNotBookmarked)
+          .click(navigatorNotBookmarked)
+          .waitForVisible(doneButton)
+          .click(doneButton)
           .activateURLMode()
           .waitForVisible(navigatorBookmarked)
           .click(navigatorBookmarked)
@@ -259,7 +268,7 @@ describe('bookmark tests', function () {
         const historyUrl = 'about:history'
         const prefsUrl = 'about:preferences'
         yield this.app.client
-          .waitForUrl(Brave.newTabUrl)
+          .tabByIndex(0)
           .loadUrl(prefsUrl)
           .waitForVisible(homepageInput)
           .windowParentByUrl(prefsUrl)
diff --git a/test/lib/brave.js b/test/lib/brave.js
index b52f1b2eb73..f8634e661f8 100644
--- a/test/lib/brave.js
+++ b/test/lib/brave.js
@@ -484,9 +484,9 @@ var exports = {
       return this.waitUntil(function () {
         return this.getWindowState().then((val) => {
           const bookmarkDetailLocation = val.value && val.value.bookmarkDetail &&
-            val.value.bookmarkDetail.currentDetail && val.value.bookmarkDetail.currentDetail.location
-          const bookmarkDetailTitle = (val.value && val.value.bookmarkDetail && val.value.bookmarkDetail.currentDetail &&
-            val.value.bookmarkDetail.currentDetail.customTitle) || val.value.bookmarkDetail.currentDetail.title
+            val.value.bookmarkDetail.siteDetail && val.value.bookmarkDetail.siteDetail.location
+          const bookmarkDetailTitle = (val.value && val.value.bookmarkDetail && val.value.bookmarkDetail.siteDetail &&
+            val.value.bookmarkDetail.siteDetail.customTitle) || val.value.bookmarkDetail.siteDetail.title
           const ret = bookmarkDetailLocation === location && bookmarkDetailTitle === title
           logVerbose('waitForBookmarkDetail("' + location + '", "' + title + '") => ' + ret +
             ' (bookmarkDetailLocation = ' + bookmarkDetailLocation + ', bookmarkDetailTitle = ' + bookmarkDetailTitle + ')')
diff --git a/test/unit/app/browser/reducers/sitesReducerTest.js b/test/unit/app/browser/reducers/sitesReducerTest.js
index ba054229b8f..15d5bc560c7 100644
--- a/test/unit/app/browser/reducers/sitesReducerTest.js
+++ b/test/unit/app/browser/reducers/sitesReducerTest.js
@@ -156,4 +156,400 @@ describe('sitesReducerTest', function () {
       assert.equal(Object.values(newState.sites)[1].order, 1)
     })
   })
+
+  describe('APP_ADD_BOOKMARK', function () {
+    it('site details is null', function () {
+      const state = initState
+      const action = {
+        actionType: appConstants.APP_ADD_BOOKMARK
+      }
+
+      const result = sitesReducer(state, action)
+      assert.deepEqual(result, state)
+    })
+
+    it('add a bookmark, but tag is missing', function () {
+      const state = initState
+      const action = {
+        actionType: appConstants.APP_ADD_BOOKMARK,
+        siteDetail: makeImmutable({
+          parentFolderId: 0,
+          title: 'Brave',
+          location: 'https://www.brave.com'
+        })
+      }
+
+      const result = sitesReducer(state, action)
+      assert.deepEqual(result, state)
+    })
+
+    it('add a bookmark', function () {
+      const state = initState
+      const action = {
+        actionType: appConstants.APP_ADD_BOOKMARK,
+        siteDetail: makeImmutable({
+          parentFolderId: 0,
+          title: 'Brave',
+          location: 'https://www.brave.com'
+        }),
+        tag: siteTags.BOOKMARK
+      }
+
+      const newSites = {
+        'https://www.brave.com|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 0,
+          location: 'https://www.brave.com',
+          parentFolderId: 0
+        }
+      }
+
+      const result = sitesReducer(state, action)
+      assert.deepEqual(result.get('sites').toJS(), newSites)
+    })
+
+    it('add a bookmark folder', function () {
+      const state = initState
+
+      const action = {
+        actionType: appConstants.APP_ADD_BOOKMARK,
+        siteDetail: makeImmutable({
+          parentFolderId: 0,
+          title: 'Brave folder'
+        }),
+        tag: siteTags.BOOKMARK_FOLDER
+      }
+
+      const newSites = {
+        '1': {
+          folderId: 1,
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK_FOLDER],
+          objectId: undefined,
+          title: 'Brave folder',
+          order: 0,
+          parentFolderId: 0
+        }
+      }
+
+      const result = sitesReducer(state, action)
+      assert.deepEqual(result.get('sites').toJS(), newSites)
+    })
+
+    it('add a bookmark with a close bookmark', function () {
+      const state = initState.set('sites', makeImmutable({
+        'https://www.clifton.io|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 0,
+          location: 'https://www.brave.com',
+          parentFolderId: 0
+        },
+        'https://www.bbondy.io|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 1,
+          location: 'https://www.bbondy.io',
+          parentFolderId: 0
+        },
+        'https://www.bridiver.io|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 2,
+          location: 'https://www.bridiver.io',
+          parentFolderId: 0
+        }
+      }))
+
+      const action = {
+        actionType: appConstants.APP_ADD_BOOKMARK,
+        siteDetail: makeImmutable({
+          parentFolderId: 0,
+          title: 'Brave',
+          location: 'https://www.brave.com'
+        }),
+        tag: siteTags.BOOKMARK,
+        closestKey: 'https://www.bbondy.io|0|0'
+      }
+
+      const newSites = {
+        'https://www.clifton.io|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 0,
+          location: 'https://www.brave.com',
+          parentFolderId: 0
+        },
+        'https://www.bbondy.io|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 1,
+          location: 'https://www.bbondy.io',
+          parentFolderId: 0
+        },
+        'https://www.brave.com|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 2,
+          location: 'https://www.brave.com',
+          parentFolderId: 0
+        },
+        'https://www.bridiver.io|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 3,
+          location: 'https://www.bridiver.io',
+          parentFolderId: 0
+        }
+      }
+
+      const result = sitesReducer(state, action)
+      assert.deepEqual(result.get('sites').toJS(), newSites)
+    })
+  })
+
+  describe('APP_EDIT_BOOKMARK', function () {
+    it('site details is null', function () {
+      const state = initState
+      const action = {
+        actionType: appConstants.APP_EDIT_BOOKMARK
+      }
+
+      const newState = sitesReducer(state, action)
+      assert.deepEqual(state, newState)
+    })
+
+    it('edit a bookmark, but tag is missing', function () {
+      const state = initState
+      const action = {
+        actionType: appConstants.APP_EDIT_BOOKMARK,
+        siteDetail: makeImmutable({
+          parentFolderId: 0,
+          title: 'Brave',
+          location: 'https://www.brave.com'
+        })
+      }
+
+      const result = sitesReducer(state, action)
+      assert.deepEqual(result, state)
+    })
+
+    it('edit a bookmark, but editKey is missing (title changes)', function () {
+      const state = initState.set('sites', makeImmutable({
+        'https://www.brave.com|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 0,
+          location: 'https://www.brave.com',
+          parentFolderId: 0
+        }
+      }))
+      const action = {
+        actionType: appConstants.APP_EDIT_BOOKMARK,
+        siteDetail: makeImmutable({
+          parentFolderId: 0,
+          title: 'Brave 12',
+          location: 'https://www.brave.com'
+        }),
+        tag: siteTags.BOOKMARK
+      }
+
+      const newState = {
+        'https://www.brave.com|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave 12',
+          order: 0,
+          location: 'https://www.brave.com',
+          parentFolderId: 0
+        }
+      }
+
+      const result = sitesReducer(state, action)
+      assert.deepEqual(result.get('sites').toJS(), newState)
+    })
+
+    it('edit a bookmark, but editKey is missing (location changes)', function () {
+      const state = initState.set('sites', makeImmutable({
+        'https://www.brave.com|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 0,
+          location: 'https://www.brave.com',
+          parentFolderId: 0
+        }
+      }))
+      const action = {
+        actionType: appConstants.APP_EDIT_BOOKMARK,
+        siteDetail: makeImmutable({
+          parentFolderId: 0,
+          title: 'Brave',
+          location: 'https://www.brave.si'
+        }),
+        tag: siteTags.BOOKMARK
+      }
+
+      const newState = {
+        'https://www.brave.com|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 0,
+          location: 'https://www.brave.com',
+          parentFolderId: 0
+        },
+        'https://www.brave.si|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 1,
+          location: 'https://www.brave.si',
+          parentFolderId: 0
+        }
+      }
+
+      const result = sitesReducer(state, action)
+      assert.deepEqual(result.get('sites').toJS(), newState)
+    })
+
+    it('edit a bookmark', function () {
+      const state = initState.set('sites', makeImmutable({
+        'https://www.brave.com|0|0': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave',
+          order: 0,
+          location: 'https://www.brave.com',
+          parentFolderId: 0
+        }
+      }))
+      const action = {
+        actionType: appConstants.APP_EDIT_BOOKMARK,
+        siteDetail: makeImmutable({
+          parentFolderId: 1,
+          title: 'Brave yes',
+          location: 'https://www.brave.si'
+        }),
+        editKey: 'https://www.brave.com|0|0',
+        tag: siteTags.BOOKMARK
+      }
+
+      const newState = {
+        'https://www.brave.si|0|1': {
+          lastAccessedTime: 0,
+          tags: [siteTags.BOOKMARK],
+          objectId: undefined,
+          title: 'Brave yes',
+          order: 0,
+          location: 'https://www.brave.si',
+          parentFolderId: 1
+        }
+      }
+
+      const result = sitesReducer(state, action)
+      assert.deepEqual(result.get('sites').toJS(), newState)
+    })
+
+    it('edit a bookmark folder, but folderId is missing', function () {
+      const state = initState.set('sites', makeImmutable({
+        '1': {
+          lastAccessedTime: 0,
+          folderId: 1,
+          tags: [siteTags.BOOKMARK_FOLDER],
+          objectId: undefined,
+          title: 'Brave',
+          order: 0,
+          parentFolderId: 0
+        }
+      }))
+      const action = {
+        actionType: appConstants.APP_EDIT_BOOKMARK,
+        siteDetail: makeImmutable({
+          parentFolderId: 1,
+          title: 'Brave yes'
+        }),
+        editKey: '1',
+        tag: siteTags.BOOKMARK_FOLDER
+      }
+
+      const newState = {
+        '2': {
+          lastAccessedTime: 0,
+          folderId: 2,
+          tags: [siteTags.BOOKMARK_FOLDER],
+          objectId: undefined,
+          title: 'Brave yes',
+          order: 0,
+          parentFolderId: 1
+        }
+      }
+
+      const result = sitesReducer(state, action)
+      assert.deepEqual(result.get('sites').toJS(), newState)
+    })
+
+    it('edit a bookmark folder', function () {
+      const state = initState.set('sites', makeImmutable({
+        '1': {
+          lastAccessedTime: 0,
+          folderId: 1,
+          tags: [siteTags.BOOKMARK_FOLDER],
+          objectId: undefined,
+          title: 'Brave',
+          order: 0,
+          parentFolderId: 0
+        }
+      }))
+      const action = {
+        actionType: appConstants.APP_EDIT_BOOKMARK,
+        siteDetail: makeImmutable({
+          folderId: 1,
+          parentFolderId: 1,
+          title: 'Brave yes'
+        }),
+        editKey: '1',
+        tag: siteTags.BOOKMARK_FOLDER
+      }
+
+      const newState = {
+        '1': {
+          lastAccessedTime: 0,
+          folderId: 1,
+          tags: [siteTags.BOOKMARK_FOLDER],
+          objectId: undefined,
+          title: 'Brave yes',
+          order: 0,
+          parentFolderId: 1
+        }
+      }
+
+      const result = sitesReducer(state, action)
+      assert.deepEqual(result.get('sites').toJS(), newState)
+    })
+  })
 })
diff --git a/test/unit/app/common/lib/bookmarkUtilTest.js b/test/unit/app/common/lib/bookmarkUtilTest.js
index 9813306f6f7..b9a2b719095 100644
--- a/test/unit/app/common/lib/bookmarkUtilTest.js
+++ b/test/unit/app/common/lib/bookmarkUtilTest.js
@@ -15,39 +15,30 @@ require('../../../braveUnit')
 
 describe('bookmarkUtil test', function () {
   describe('bookmarkHangerHeading', function () {
-    const detail = makeImmutable({
-      location: 'https://ww.brave.com'
+    it('returns default if isFolder and editKey are not provided', function () {
+      assert.equal(bookmarkUtil.bookmarkHangerHeading(), 'bookmarkCreateNew')
     })
 
-    it('returns default if isFolder and shouldShowLocation are not provided', function () {
-      assert.equal(bookmarkUtil.bookmarkHangerHeading(detail), 'bookmarkAdded')
+    it('if bookmark was newly added', function () {
+      assert.equal(bookmarkUtil.bookmarkHangerHeading(false, false, true), 'bookmarkAdded')
     })
 
     describe('is folder', function () {
-      it('returns editing mode when shouldShowLocation is not provided', function () {
-        assert.equal(bookmarkUtil.bookmarkHangerHeading(detail, true, true), 'bookmarkFolderEditing')
+      it('returns editing mode when in edit mode', function () {
+        assert.equal(bookmarkUtil.bookmarkHangerHeading(true, true), 'bookmarkFolderEditing')
       })
-
-      it('returns editing mode when shouldShowLocation is true', function () {
-        assert.equal(bookmarkUtil.bookmarkHangerHeading(detail, true, true), 'bookmarkFolderEditing')
-      })
-
-      it('returns add mode when shouldShowLocation is false', function () {
-        assert.equal(bookmarkUtil.bookmarkHangerHeading(detail, true, false), 'bookmarkFolderAdding')
+      it('returns edit mode when in edit mode', function () {
+        assert.equal(bookmarkUtil.bookmarkHangerHeading(false, true), 'bookmarkFolderAdding')
       })
     })
 
     describe('is bookmark', function () {
-      it('returns add mode when shouldShowLocation is false', function () {
-        assert.equal(bookmarkUtil.bookmarkHangerHeading(detail, false, false), 'bookmarkAdded')
-      })
-
-      it('returns create mode when details is empty', function () {
-        assert.equal(bookmarkUtil.bookmarkHangerHeading(makeImmutable({}), false, true), 'bookmarkCreateNew')
+      it('returns create mode when not in edit mode', function () {
+        assert.equal(bookmarkUtil.bookmarkHangerHeading(false, false), 'bookmarkCreateNew')
       })
 
-      it('returns edit mode when details is provided', function () {
-        assert.equal(bookmarkUtil.bookmarkHangerHeading(detail, false, true), 'bookmarkEdit')
+      it('returns edit mode when in edit mode', function () {
+        assert.equal(bookmarkUtil.bookmarkHangerHeading(true, false), 'bookmarkEdit')
       })
     })
   })
@@ -95,60 +86,41 @@ describe('bookmarkUtil test', function () {
   describe('isBookmarkNameValid', function () {
     describe('for folder', function () {
       it('title and custom title is not provided', function () {
-        assert.equal(bookmarkUtil.isBookmarkNameValid(makeImmutable({
-          location: 'https://ww.brave.com'
-        }), true), false)
+        assert.equal(bookmarkUtil.isBookmarkNameValid(), false)
       })
 
       it('title and custom title are null', function () {
-        assert.equal(bookmarkUtil.isBookmarkNameValid(makeImmutable({
-          title: null,
-          customTitle: null
-        }), true), false)
+        assert.equal(bookmarkUtil.isBookmarkNameValid(null, null, true), false)
       })
 
       it('title is empty string', function () {
-        assert.equal(bookmarkUtil.isBookmarkNameValid(makeImmutable({
-          title: ''
-        }), true), false)
+        assert.equal(bookmarkUtil.isBookmarkNameValid('', null, true), false)
       })
 
       it('title is null, but customTitle is ok', function () {
-        assert.equal(bookmarkUtil.isBookmarkNameValid(makeImmutable({
-          title: null,
-          customTitle: 'custom brave'
-        }), true), true)
+        assert.equal(bookmarkUtil.isBookmarkNameValid(null, null, true, 'custom brave'), true)
       })
 
       it('title and customTitle are ok', function () {
-        assert.equal(bookmarkUtil.isBookmarkNameValid(makeImmutable({
-          title: 'brave',
-          customTitle: 'custom brave'
-        }), true), true)
+        assert.equal(bookmarkUtil.isBookmarkNameValid('brave', null, true, 'custom brave'), true)
       })
     })
 
     describe('for bookmark', function () {
       it('location is not provided', function () {
-        assert.equal(bookmarkUtil.isBookmarkNameValid(makeImmutable({}), true), false)
+        assert.equal(bookmarkUtil.isBookmarkNameValid(null, null, false), false)
       })
 
       it('location is null', function () {
-        assert.equal(bookmarkUtil.isBookmarkNameValid(makeImmutable({
-          location: null
-        }), false), false)
+        assert.equal(bookmarkUtil.isBookmarkNameValid(null, null, false), false)
       })
 
       it('location is empty string', function () {
-        assert.equal(bookmarkUtil.isBookmarkNameValid(makeImmutable({
-          location: ''
-        }), false), false)
+        assert.equal(bookmarkUtil.isBookmarkNameValid(null, '', false), false)
       })
 
       it('location is provided', function () {
-        assert.equal(bookmarkUtil.isBookmarkNameValid(makeImmutable({
-          location: 'https://ww.brave.com'
-        }), false), true)
+        assert.equal(bookmarkUtil.isBookmarkNameValid(null, 'https://www.brave.com', false), true)
       })
     })
   })
diff --git a/test/unit/state/siteUtilTest.js b/test/unit/state/siteUtilTest.js
index d78cb75d09c..f45653f3ca0 100644
--- a/test/unit/state/siteUtilTest.js
+++ b/test/unit/state/siteUtilTest.js
@@ -273,7 +273,8 @@ describe('siteUtil', function () {
           let state = emptyState
           state = siteUtil.addSite(state, folderMinFields, siteTags.BOOKMARK_FOLDER)
           const folderMinFieldsWithId = folderMinFields.set('folderId', 1)
-          state = siteUtil.addSite(state, folderMinFieldsWithId, siteTags.BOOKMARK_FOLDER, folderMinFieldsWithId.set('folderId', 9))
+          const oldKey = siteUtil.getSiteKey(folderMinFieldsWithId.set('folderId', 9))
+          state = siteUtil.addSite(state, folderMinFieldsWithId, siteTags.BOOKMARK_FOLDER, false, oldKey)
           const processedKey = siteUtil.getSiteKey(folderMinFieldsWithId)
           const folderId = state.getIn(['sites', processedKey, 'folderId'])
           assert.equal(folderId, 1)
@@ -418,7 +419,7 @@ describe('siteUtil', function () {
         })
         let sites = {}
         sites[oldSiteKey] = oldSiteDetail.toJS()
-        const state = siteUtil.addSite(Immutable.fromJS({sites}), newSiteDetail, siteTags.BOOKMARK, oldSiteDetail)
+        const state = siteUtil.addSite(Immutable.fromJS({sites}), newSiteDetail, siteTags.BOOKMARK, oldSiteKey)
         const expectedSiteKey = siteUtil.getSiteKey(expectedSiteDetail)
         let expectedSites = {}
         expectedSites[expectedSiteKey] = expectedSiteDetail.toJS()
@@ -443,7 +444,7 @@ describe('siteUtil', function () {
         })
         let sites = {}
         sites[oldSiteKey] = oldSiteDetail.toJS()
-        const state = siteUtil.addSite(Immutable.fromJS({sites}), newSiteDetail, siteTags.BOOKMARK, oldSiteDetail)
+        const state = siteUtil.addSite(Immutable.fromJS({sites}), newSiteDetail, siteTags.BOOKMARK, oldSiteKey)
         const expectedSites = {}
         const expectedSiteKey = siteUtil.getSiteKey(newSiteDetail)
         expectedSites[expectedSiteKey] = newSiteDetail.set('order', 0).set('objectId', undefined).toJS()
@@ -455,6 +456,7 @@ describe('siteUtil', function () {
           location: testUrl1,
           title: 'a brave title'
         })
+        const oldSiteKey = siteUtil.getSiteKey(oldSiteDetail)
         const newSiteDetail = Immutable.fromJS({
           tags: [siteTags.BOOKMARK],
           location: testUrl1,
@@ -462,7 +464,7 @@ describe('siteUtil', function () {
         })
 
         const sites = Immutable.fromJS([oldSiteDetail])
-        const state = siteUtil.addSite(Immutable.fromJS({sites}), newSiteDetail, siteTags.BOOKMARK, oldSiteDetail)
+        const state = siteUtil.addSite(Immutable.fromJS({sites}), newSiteDetail, siteTags.BOOKMARK, oldSiteKey)
         const expectedSites = sites
         assert.deepEqual(
           state.getIn(['sites', 0, 'lastAccessedTime']),
@@ -501,7 +503,7 @@ describe('siteUtil', function () {
         })
         let sites = {}
         sites[oldSiteKey] = oldSiteDetail.toJS()
-        const state = siteUtil.addSite(Immutable.fromJS({sites}), newSiteDetail, siteTags.BOOKMARK, oldSiteDetail)
+        const state = siteUtil.addSite(Immutable.fromJS({sites}), newSiteDetail, siteTags.BOOKMARK, oldSiteKey)
         const expectedSiteKey = siteUtil.getSiteKey(expectedSiteDetail)
         let expectedSites = {}
         expectedSites[expectedSiteKey] = expectedSiteDetail.set('objectId', undefined).toJS()
@@ -536,14 +538,14 @@ describe('siteUtil', function () {
           title: 'new title',
           customTitle: 'new customTitle'
         })
-        const siteKey = siteUtil.getSiteKey(oldSiteDetail)
+        const oldSiteKey = siteUtil.getSiteKey(oldSiteDetail)
         const sites = {
-          [siteKey]: oldSiteDetail
+          [oldSiteKey]: oldSiteDetail
         }
-        const state = siteUtil.addSite(Immutable.fromJS({sites}), newSiteDetail, siteTags.BOOKMARK, oldSiteDetail, true)
+        const state = siteUtil.addSite(Immutable.fromJS({sites}), newSiteDetail, siteTags.BOOKMARK, oldSiteKey, true)
         mockery.deregisterMock('./stores/appStoreRenderer')
         mockery.disable()
-        assert.equal(state.getIn(['sites', siteKey, 'skipSync']), true)
+        assert.equal(state.getIn(['sites', oldSiteKey, 'skipSync']), true)
       })
     })
   })