Merge pull request #10690 from NejcZdovc/hotfix/#10689-preview

Reduce actions call when doing previews

app/renderer/components/tabs/tab.js

@@ -30,6 +30,7 @@ const tabUIState = require('../../../common/state/tabUIState')
 const tabState = require('../../../common/state/tabState')
 
 // Constants
+const settings = require('../../../../js/constants/settings')
 const dragTypes = require('../../../../js/constants/dragTypes')
 
 // Styles
@@ -47,6 +48,7 @@ const isWindows = require('../../../common/lib/platformUtil').isWindows()
 const {getCurrentWindowId} = require('../../currentWindow')
 const {setObserver} = require('../../lib/observerUtil')
 const UrlUtil = require('../../../../js/lib/urlutil')
+const {getSetting} = require('../../../../js/settings')
 
 class Tab extends React.Component {
   constructor (props) {
@@ -62,6 +64,7 @@ class Tab extends React.Component {
     this.onObserve = this.onObserve.bind(this)
     this.onTabClosedWithMouse = this.onTabClosedWithMouse.bind(this)
     this.tabNode = null
+    this.mouseTimeout = null
   }
 
   get frame () {
@@ -152,12 +155,14 @@ class Tab extends React.Component {
   onMouseLeave (e) {
     // mouseleave will keep the previewMode
     // as long as the related target is another tab
+    clearTimeout(this.mouseTimeout)
     windowActions.setTabHoverState(this.props.frameKey, false, hasTabAsRelatedTarget(e))
   }
 
   onMouseEnter (e) {
     // if mouse entered a tab we only trigger a new preview
     // if user is in previewMode, which is defined by mouse move
+    clearTimeout(this.mouseTimeout)
     windowActions.setTabHoverState(this.props.frameKey, true, this.props.previewMode)
     // In case there's a tab preview happening, cancel the preview
     // when mouse is over a tab
@@ -167,7 +172,12 @@ class Tab extends React.Component {
   onMouseMove () {
     // dispatch a message to the store so it can delay
     // and preview the tab based on mouse idle time
-    windowActions.onTabMouseMove(this.props.frameKey)
+    clearTimeout(this.mouseTimeout)
+    this.mouseTimeout = setTimeout(
+      () => {
+        windowActions.setTabHoverState(this.props.frameKey, true, true)
+      },
+      getSetting(settings.TAB_PREVIEW_TIMING))
   }
 
   onAuxClick (e) {
@@ -221,6 +231,7 @@ class Tab extends React.Component {
 
   componentWillUnmount () {
     this.observer.unobserve(this.tabSentinel)
+    clearTimeout(this.mouseTimeout)
   }
 
   onObserve (entries) {

js/actions/windowActions.js

@@ -1033,13 +1033,6 @@ const windowActions = {
     })
   },
 
-  onTabMouseMove: function (data) {
-    dispatch({
-      actionType: windowConstants.WINDOW_TAB_MOUSE_MOVE,
-      data
-    })
-  },
-
   onTabMouseLeave: function (data) {
     dispatch({
       actionType: windowConstants.WINDOW_TAB_MOUSE_LEAVE,

js/constants/windowConstants.js

@@ -82,7 +82,6 @@ const windowConstants = {
   WINDOW_AUTOFILL_SELECTION_CLICKED: _,
   WINDOW_AUTOFILL_POPUP_HIDDEN: _,
   WINDOW_TAB_CLOSED_WITH_MOUSE: _,
-  WINDOW_TAB_MOUSE_MOVE: _,
   WINDOW_TAB_MOUSE_LEAVE: _,
   WINDOW_FRAME_MOUSE_ENTER: _,
   WINDOW_FRAME_MOUSE_LEAVE: _,

js/state/frameStateUtil.js

@@ -620,8 +620,6 @@ const setPreviewTabPageIndex = (state, index, immediate = false) => {
 /**
 * Defines whether or not a tab should be allowed to preview its content
 * based on mouse idle time defined by mouse move in tab.js
-* @see windowConstants.WINDOW_TAB_MOUSE_MOVE for information
-* on how the data is handled in the store.
 * @param state {Object} - Application state
 * @param previewMode {Boolean} - Whether or not minimium idle time
 * has match the criteria

js/stores/windowStore.js

@@ -43,7 +43,6 @@ let windowState = Immutable.fromJS({
   }
 })
 let lastEmittedState
-let mouseTimeout
 
 const CHANGE_EVENT = 'change'
 
@@ -357,21 +356,8 @@ const doAction = (action) => {
         windowState = frameStateUtil.updateTabPageIndex(windowState, action.frameProps.get('tabId'))
       }
       break
-    case windowConstants.WINDOW_TAB_MOUSE_MOVE:
-      {
-        // previewMode is only triggered if mouse is idle over a tab
-        // for a given amount of time based on timing defined in prefs->tabs
-        // we use actions here because that is the only way to delay updating the state
-        clearTimeout(mouseTimeout)
-        mouseTimeout = setTimeout(
-          () => windowActions.setTabHoverState(action.data, true, true),
-          getSetting(settings.TAB_PREVIEW_TIMING)
-        )
-        break
-      }
     case windowConstants.WINDOW_SET_TAB_HOVER_STATE:
       {
-        clearTimeout(mouseTimeout)
         windowState = frameStateUtil
           .setTabHoverState(windowState, action.frameKey, action.hoverState, action.previewMode)
         break