Set zoomPercent on appState for each tab

Fix #14045
Previously this was set on window state, but was not used, possibly because it was not reliable as it did not get the initial value which is set internally in muon based on origin. Instead, when this was working, it was read directly from the webview, which we try to avoid due to the webview's multi-purpose nature. For example, the webview may not be displaying the active tab - it may be displaying a preview, or waiting to display the active tab asynchronously.

app/browser/tabs.js

@@ -66,6 +66,7 @@ const getTabValue = function (tabId) {
     tabValue = tabValue.set('partition', tab.session.partition)
     tabValue = tabValue.set('partitionNumber', getPartitionNumber(tab.session.partition))
     tabValue = tabValue.set('isPlaceholder', tab.isPlaceholder())
+    tabValue = tabValue.set('zoomPercent', tab.getZoomPercent())
     return tabValue.set('tabId', tabId)
   }
 }
@@ -633,6 +634,15 @@ const api = {
         appActions.tabMoved(tabId)
       })
 
+      let lastZoomPercent = 100
+      tab.on('preferred-size-changed', debounce(() => {
+        const zoomPercent = tab.getZoomPercent()
+        if (zoomPercent !== lastZoomPercent) {
+          lastZoomPercent = zoomPercent
+          updateTab(tabId, { zoomPercent })
+        }
+      }, 100))
+
       tab.on('will-attach', (e, windowWebContents) => {
         if (shouldDebugTabEvents) {
           console.log('will-attach', windowWebContents.id, tab.tabValue().windowId)
@@ -1421,7 +1431,7 @@ const api = {
       // communicate those out here.
       if (newTabValue && oldTabValue) {
         const changeInfo = {}
-        const rendererAwareProps = ['index', 'pinned', 'url', 'active']
+        const rendererAwareProps = ['index', 'pinned', 'url', 'active', 'zoomPercent']
         rendererAwareProps.forEach((prop) => {
           const newPropVal = newTabValue.get(prop)
           if (oldTabValue.get(prop) !== newPropVal) {

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

@@ -17,9 +17,11 @@ const keyCodes = require('../../../../common/constants/keyCodes')
 
 // State
 const contextMenuState = require('../../../../common/state/contextMenuState')
+const tabState = require('../../../../common/state/tabState')
+const appStore = require('../../../../../js/stores/appStoreRenderer')
+const { getCurrentWindowId } = require('../../../currentWindow')
 
 // Utils
-const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 const {separatorMenuItem} = require('../../../../common/commonMenu')
 const {wrappingClamp} = require('../../../../common/lib/formatUtil')
 
@@ -219,12 +221,13 @@ class ContextMenu extends React.Component {
 
   mergeProps (state, ownProps) {
     const currentWindow = state.get('currentWindow')
-    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
+
     const selectedIndex = currentWindow.getIn(['ui', 'contextMenu', 'selectedIndex'], null)
     const contextMenuDetail = contextMenuState.getContextMenu(currentWindow)
 
     const props = {}
-    props.lastZoomPercentage = activeFrame.get('lastZoomPercentage')
+    const activeTab = tabState.getActiveTab(appStore.state, getCurrentWindowId())
+    props.lastZoomPercentage = activeTab && activeTab.get('zoomPercent')
     props.contextMenuDetail = contextMenuDetail  // TODO (nejc) only primitives
     props.selectedIndex = typeof selectedIndex === 'object' &&
       Array.isArray(selectedIndex) &&

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

@@ -167,11 +167,7 @@ class ContextMenuItem extends ImmutableComponent {
       return label
     }
     if (item.get('labelDataBind') === 'zoomLevel') {
-      const activeWebview = document.querySelector('.frameWrapper.isActive webview')
-      let percent = 100
-      if (activeWebview) {
-        percent = activeWebview.getZoomPercent()
-      }
+      const percent = this.props.lastZoomPercentage || 100
       return `${percent}%`
     }
     return ''

app/renderer/components/frame/guestInstanceRenderer.js

@@ -101,8 +101,7 @@ class GuestInstanceRenderer extends React.Component {
         classNameWebview: css(styles.guestInstanceRenderer__webview),
         classNameWebviewAttached: css(styles.guestInstanceRenderer__webview_attached),
         classNameWebviewAttaching: css(styles.guestInstanceRenderer__webview_attaching),
-        onFocus: this.onFocus.bind(this),
-        onZoomChange: this.onUpdateZoom.bind(this)
+        onFocus: this.onFocus.bind(this)
       })
       webviewActions.init(this.webviewDisplay)
       // treat the container as main frame position for mouse position
@@ -122,10 +121,6 @@ class GuestInstanceRenderer extends React.Component {
     }
   }
 
-  onUpdateZoom (zoomPercent) {
-    windowActions.setLastZoomPercentage(this.props.frameKey, zoomPercent)
-  }
-
   render () {
     const debugInfo = this.props.displayDebugInfo
       ? `WindowId: ${getCurrentWindowId()}, TabId: ${this.props.tabId}, GuestId: ${this.props.guestInstanceId}, FrameKey: ${this.props.frameKey}, guestIsReady: ${this.props.guestIsReady}, frameIsInWindow: ${this.props.frameIsInWindow}, activeFrameKey: ${this.props.activeFrameKey}, windowIsFocused: ${this.props.windowIsFocused}`

app/renderer/rendererShortcutHandler.js

@@ -91,9 +91,7 @@ function handleShortcut (frameKey, shortcut, e, args) {
       const tabId = frameStateUtil.getTabIdByFrameKey(windowStore.state, frameKey)
       getWebContents(tabId, (webContents) => {
         if (webContents) {
-          const frame = frameStateUtil.getFrameByKey(windowStore.state, frameKey)
           webContents.zoomIn()
-          windowActions.setLastZoomPercentage(frame, webContents.getZoomPercent())
         }
       })
       break
@@ -102,9 +100,7 @@ function handleShortcut (frameKey, shortcut, e, args) {
       const tabId = frameStateUtil.getTabIdByFrameKey(windowStore.state, frameKey)
       getWebContents(tabId, (webContents) => {
         if (webContents) {
-          const frame = frameStateUtil.getFrameByKey(windowStore.state, frameKey)
           webContents.zoomOut()
-          windowActions.setLastZoomPercentage(frame, webContents.getZoomPercent())
         }
       })
       break
@@ -113,9 +109,7 @@ function handleShortcut (frameKey, shortcut, e, args) {
       const tabId = frameStateUtil.getTabIdByFrameKey(windowStore.state, frameKey)
       getWebContents(tabId, (webContents) => {
         if (webContents) {
-          const frame = frameStateUtil.getFrameByKey(windowStore.state, frameKey)
           webContents.zoomReset()
-          windowActions.setLastZoomPercentage(frame, webContents.getZoomPercent())
         }
       })
       break

docs/state.md

@@ -589,7 +589,8 @@ AppStore
       suppress: boolean, // if true, show a suppress checkbox (defaulted to not checked)
       title: string, // title is the source; ex: "brave.com says:"
     },
-    muted: boolean, // is the tab muted
+    muted: boolean, // is the tab muted,
+    zoomPercent: number, // current zoom levellast
     windowId: number // the windowId that contains the tab
     guestInstanceId: number,
     tabId: number
@@ -739,7 +740,6 @@ WindowStore
     isPrivate: boolean, // private browsing tab
     key: number,
     lastAccessedTime: datetime,
-    lastZoomPercentage: number, // last value that was used for zooming
     loading: boolean,
     location: string, // the currently navigated location
     modalPromptDetail: object,

js/actions/windowActions.js

@@ -579,21 +579,6 @@ const windowActions = {
     })
   },
 
-  /**
-   * Dispatches a message to store the last zoom percentage.
-   * This is mainly just used to trigger updates throughout React.
-   *
-   * @param {object} frameKey - The frame to set blocked info on
-   * @param {number} percentage - The new zoom percentage
-   */
-  setLastZoomPercentage: function (frameKey, percentage) {
-    dispatch({
-      actionType: windowConstants.WINDOW_SET_LAST_ZOOM_PERCENTAGE,
-      frameKey,
-      percentage
-    })
-  },
-
   /**
    * Saves the position of the window in the window state
    * @param {Array} position - [x, y]

js/constants/windowConstants.js

@@ -59,7 +59,6 @@ const windowConstants = {
   WINDOW_SET_REDIRECTED_BY: _, // Whether or not to show site info like redirected resources
   WINDOW_SET_SECURITY_STATE: _,
   WINDOW_SET_STATE: _,
-  WINDOW_SET_LAST_ZOOM_PERCENTAGE: _,
   WINDOW_SET_CLEAR_BROWSING_DATA_VISIBLE: _,
   WINDOW_SET_IMPORT_BROWSER_DATA_DETAIL: _,
   WINDOW_SET_IMPORT_BROWSER_DATA_SELECTED: _,

js/stores/windowStore.js

@@ -522,9 +522,6 @@ const doAction = (action) => {
     case windowConstants.WINDOW_SET_FAVICON:
       windowState = windowState.setIn(['frames', frameStateUtil.getFrameIndex(windowState, action.frameProps.get('key')), 'icon'], action.favicon)
       break
-    case windowConstants.WINDOW_SET_LAST_ZOOM_PERCENTAGE:
-      windowState = windowState.setIn(['frames', frameStateUtil.getFrameIndex(windowState, action.frameKey), 'lastZoomPercentage'], action.percentage)
-      break
     case windowConstants.WINDOW_SET_MOUSE_IN_TITLEBAR:
       windowState = windowState.setIn(['ui', 'mouseInTitlebar'], action.mouseInTitlebar)
       break

test/unit/app/common/lib/historyUtilTest.js

@@ -314,7 +314,6 @@ describe('historyUtil unit tests', function () {
         isFullScreen: false,
         isPrivate: false,
         key: 1,
-        lastZoomPercentage: 1,
         loading: true,
         location: 'https://brave.com',
         title: 'Brave'

test/unit/app/renderer/components/frame/frameTest.js

@@ -47,8 +47,7 @@ describe.skip('Frame component unit tests', function () {
   const fakeWindowActions = {
     frameShortcutChanged: () => {},
     setFindbarShown: () => {},
-    setActiveFrame: () => {},
-    setLastZoomPercentage: () => {}
+    setActiveFrame: () => {}
   }
 
   const domUtil = {