Avoid serializing Function in array template

fix #13421
fix #11576

Auditors: @bridiver

Test Plan:
1. Set `sessionSaveInterval` to `1` in js/constants/appConfig.js
2. Playing around with bookmark toolbar folder
3. Playing around with auotfill menu(fill with entry and clear)
4. Playing around with hamburger menu
5. Playing around with back/forward long pressed menu
6. There shouldn't be any exceptions about "function can be cloned"

app/common/state/contextMenuState.js

@@ -5,38 +5,42 @@
 const Immutable = require('immutable')
 const assert = require('assert')
 const { makeImmutable, isMap } = require('./immutableUtil')
+const uuid = require('uuid')
 
 const validateState = function (state) {
  state = makeImmutable(state)
  assert.ok(isMap(state), 'state must be an Immutable.Map')
  return state
 }
 
+let contextMenuDetail = Immutable.Map()
+
 const api = {
  setContextMenu: (windowState, detail) => {
  detail = makeImmutable(detail)
  windowState = validateState(windowState)
 
  if (!detail) {
- if (windowState.getIn(['contextMenuDetail', 'type']) === 'hamburgerMenu') {
+ if (contextMenuDetail.get('type') === 'hamburgerMenu') {
  windowState = windowState.set('hamburgerMenuWasOpen', true)
  } else {
  windowState = windowState.set('hamburgerMenuWasOpen', false)
  }
+ contextMenuDetail = Immutable.Map()
  windowState = windowState.delete('contextMenuDetail')
  } else {
  if (!(detail.get('type') === 'hamburgerMenu' && windowState.get('hamburgerMenuWasOpen'))) {
- windowState = windowState.set('contextMenuDetail', detail)
+ contextMenuDetail = detail
+ windowState = windowState.set('contextMenuDetail', uuid())
  }
  windowState = windowState.set('hamburgerMenuWasOpen', false)
  }
-
  return windowState
  },
 
  getContextMenu: (windowState) => {
  windowState = validateState(windowState)
- return windowState.get('contextMenuDetail', Immutable.Map())
+ return contextMenuDetail
  },
 
  selectedIndex: (windowState) => {

app/renderer/components/common/contextMenu/contextMenu.js

@@ -15,6 +15,9 @@ const windowActions = require('../../../../../js/actions/windowActions')
 // Constants
 const keyCodes = require('../../../../common/constants/keyCodes')
 
+// State
+const contextMenuState = require('../../../../common/state/contextMenuState')
+
 // Utils
 const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 const {separatorMenuItem} = require('../../../../common/commonMenu')
@@ -218,7 +221,7 @@ class ContextMenu extends React.Component {
  const currentWindow = state.get('currentWindow')
  const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
  const selectedIndex = currentWindow.getIn(['ui', 'contextMenu', 'selectedIndex'], null)
- const contextMenuDetail = currentWindow.get('contextMenuDetail', Immutable.Map())
+ const contextMenuDetail = contextMenuState.getContextMenu(currentWindow)
 
  const props = {}
  props.lastZoomPercentage = activeFrame.get('lastZoomPercentage')

app/renderer/components/frame/frame.js

@@ -24,6 +24,7 @@ const windowStore = require('../../../../js/stores/windowStore')
 const appStoreRenderer = require('../../../../js/stores/appStoreRenderer')
 
 // State
+const contextMenuState = require('../../../common/state/contextMenuState')
 const siteSettings = require('../../../../js/state/siteSettings')
 const siteSettingsState = require('../../../common/state/siteSettingsState')
 const tabState = require('../../../common/state/tabState')
@@ -866,7 +867,7 @@ class Frame extends React.Component {
  const allSiteSettings = siteSettingsState.getAllSiteSettings(state, isPrivate)
  const frameSiteSettings = siteSettings.getSiteSettingsForURL(allSiteSettings, location) || Immutable.Map()
 
- const contextMenu = currentWindow.get('contextMenuDetail')
+ const contextMenu = contextMenuState.getContextMenu(currentWindow)
  const tab = tabId && tabId > -1 && tabState.getByTabId(state, tabId)
 
  const props = {}

docs/state.md

@@ -677,7 +677,7 @@ WindowStore
  },
  cleanedOnShutdown: boolean, // whether app data was successfully cleared on shutdown
  closedFrames: [], // holds the same type of frame objects as frames
- contextMenuDetail: {
+ contextMenuDetail: { // currently using uuid hack to avoid serializing click function in template
  bottom: number, // the bottom position of the context menu
  left: number, // the left position of the context menu
  maxHeight: number, // the maximum height of the context menu

js/actions/windowActions.js

@@ -550,9 +550,16 @@ const windowActions = {
  * @param {Object} detail - The context menu detail
  */
  setContextMenuDetail: function (detail) {
+ // TODO(darkdh): This is a hack to prevent dispatch from serializing
+ // click function in template. `contextMenuDetail` is just a uuid to trigger
+ // state update for new menu
+ const Immutable = require('immutable')
+ const contextMenuState = require('../../app/common/state/contextMenuState')
+ let state = contextMenuState.setContextMenu(Immutable.Map(), detail)
+ const contextMenuDetail = state.get('contextMenuDetail')
  dispatch({
  actionType: windowConstants.WINDOW_SET_CONTEXT_MENU_DETAIL,
- detail
+ contextMenuDetail
  })
  },
 

js/stores/windowStore.js

@@ -480,21 +480,28 @@ const doAction = (action) => {
  windowState = windowState.delete('bookmarkFolderDetail')
  break
  case windowConstants.WINDOW_AUTOFILL_SELECTION_CLICKED:
+ windowState = contextMenuState.setContextMenu(windowState)
  ipc.send('autofill-selection-clicked', action.tabId, action.value, action.frontEndId, action.index)
- windowState = windowState.delete('contextMenuDetail')
  break
  case windowConstants.WINDOW_AUTOFILL_POPUP_HIDDEN:
- if (!action.detail &&
- windowState.getIn(['contextMenuDetail', 'type']) === 'autofill' &&
- windowState.getIn(['contextMenuDetail', 'tabId']) === action.tabId) {
- windowState = windowState.delete('contextMenuDetail')
- if (action.notify) {
- ipc.send('autofill-popup-hidden', action.tabId)
+ {
+ const contextMenuDetail = contextMenuState.getContextMenu(windowState)
+ if (!action.detail &&
+ contextMenuDetail.get('type') === 'autofill' &&
+ contextMenuDetail.get('tabId') === action.tabId) {
+ windowState = contextMenuState.setContextMenu(windowState)
+ if (action.notify) {
+ ipc.send('autofill-popup-hidden', action.tabId)
+ }
  }
+ break
  }
- break
  case windowConstants.WINDOW_SET_CONTEXT_MENU_DETAIL:
- windowState = contextMenuState.setContextMenu(windowState, action.detail)
+ if (action.contextMenuDetail) {
+ windowState = windowState.set('contextMenuDetail', action.contextMenuDetail)
+ } else {
+ windowState = windowState.delete('contextMenuDetail')
+ }
  break
  case windowConstants.WINDOW_SET_POPUP_WINDOW_DETAIL:
  if (!action.detail) {