From 7c8d5ba57efa8796ef6bef9022e3ae79427b742e Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Tue, 30 May 2017 16:01:52 -0700 Subject: [PATCH] Saves computed styles in the state Resolves #9149 Auditors: Test Plan: --- app/browser/reducers/windowsReducer.js | 3 ++ app/browser/windows.js | 3 +- app/common/constants/computedStyles.js | 35 ++++++++++++++++++ app/common/lib/windowsUtil.js | 36 ++++++++++++++++++- app/common/state/windowState.js | 12 +++++++ .../components/download/downloadsBar.js | 9 +++++ app/renderer/components/frame/frame.js | 8 ++--- docs/state.md | 1 + js/actions/appActions.js | 1 - js/actions/windowActions.js | 10 ++++++ js/constants/windowConstants.js | 3 +- 11 files changed, 112 insertions(+), 9 deletions(-) create mode 100644 app/common/constants/computedStyles.js diff --git a/app/browser/reducers/windowsReducer.js b/app/browser/reducers/windowsReducer.js index e0591042b58..d8da9b13b21 100644 --- a/app/browser/reducers/windowsReducer.js +++ b/app/browser/reducers/windowsReducer.js @@ -66,6 +66,9 @@ const windowsReducer = (state, action, immutableAction) => { case windowConstants.WINDOW_SHOULD_OPEN_DEV_TOOLS: windows.openDevTools(action.get('windowId')) break + case appConstants.APP_WINDOW_COMPUTED_STYLES: + state = windowState.setComputedStyles(state, action.get('windowId'), action.get('values')) + break } return state } diff --git a/app/browser/windows.js b/app/browser/windows.js index b99d5182829..7fdb0814a3c 100644 --- a/app/browser/windows.js +++ b/app/browser/windows.js @@ -9,7 +9,7 @@ const debounce = require('../../js/lib/debounce') const {getSetting} = require('../../js/settings') const locale = require('../locale') const LocalShortcuts = require('../localShortcuts') -const {getPinnedSiteProps} = require('../common/lib/windowsUtil') +const {getPinnedSiteProps, updateComputedStyles} = require('../common/lib/windowsUtil') const {makeImmutable} = require('../common/state/immutableUtil') const {getPinnedTabsByWindowId} = require('../common/state/tabState') const messages = require('../../js/constants/messages') @@ -58,6 +58,7 @@ const updateWindow = (windowId) => { let windowValue = getWindowValue(windowId) if (windowValue) { appActions.windowUpdated(windowValue) + updateComputedStyles() } } diff --git a/app/common/constants/computedStyles.js b/app/common/constants/computedStyles.js new file mode 100644 index 00000000000..c1ec4324776 --- /dev/null +++ b/app/common/constants/computedStyles.js @@ -0,0 +1,35 @@ +/* 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 computedStyles = { + 'bookmark-item': [ + 'max-width', + 'padding', + 'margin', + 'font-size' + ], + 'bookmark-item-chevron': [ + 'margin' + ], + 'bookmarks-toolbar': [ + 'padding' + ], + 'default': [ + 'font-family' + ], + 'download-bar': [ + 'buttons', + 'height', + 'padding' + ], + 'download-item': [ + 'margin', + 'width' + ], + 'navbar': [ + 'height' + ] +} + +module.exports = computedStyles diff --git a/app/common/lib/windowsUtil.js b/app/common/lib/windowsUtil.js index c15f82e9bde..36295dc1703 100644 --- a/app/common/lib/windowsUtil.js +++ b/app/common/lib/windowsUtil.js @@ -4,10 +4,44 @@ const Immutable = require('immutable') -module.exports.getPinnedSiteProps = site => { +// Constants +const computedStyles = require('../constants/computedStyles') + +// Actions +const windowActions = require('../../../js/actions/windowActions') + +// Utils +const {getCurrentWindowId} = require('../../renderer/currentWindow') + +const getPinnedSiteProps = site => { return Immutable.fromJS({ location: site.get('location'), order: site.get('order'), partitionNumber: site.get('partitionNumber') || 0 }) } + +const getComputedStyleData = (root) => { + const result = {} + + Object.keys(computedStyles).forEach(group => { + computedStyles[group].forEach(prop => { + const value = `--${group}-${prop}` + result[value] = root.getPropertyValue(value).trim() + }) + }) + + return result +} + +const updateComputedStyles = () => { + const root = window.getComputedStyle(document.querySelector(':root')) + const computedValues = getComputedStyleData(root) + windowActions.computedStylesChanged(getCurrentWindowId(), computedValues) +} + +module.exports = { + getPinnedSiteProps, + getComputedStyleData, + updateComputedStyles +} diff --git a/app/common/state/windowState.js b/app/common/state/windowState.js index e0d265b9bdb..406db7ef9ad 100644 --- a/app/common/state/windowState.js +++ b/app/common/state/windowState.js @@ -146,6 +146,18 @@ const api = { return state.set('windows', windows.delete(index).insert(index, windowValue)) }, + setComputedStyles: (state, windowId, computedStyles) => { + const windowIndex = api.getWindowIndexByWindowId(state, windowId) + return state.mergeDeepIn(['windows', windowIndex], { + computedStyles: computedStyles + }) + }, + + getComputedProperty: (state, property) => { + const currentWindowIndex = api.getWindowIndexByWindowId(state, api.getActiveWindowId(state)) + return state.getIn(['windows', currentWindowIndex, 'computedStyles', property]) + }, + getWindows: (state) => { state = validateState(state) return state.get('windows') diff --git a/app/renderer/components/download/downloadsBar.js b/app/renderer/components/download/downloadsBar.js index f05b5983767..8c5344ad8e3 100644 --- a/app/renderer/components/download/downloadsBar.js +++ b/app/renderer/components/download/downloadsBar.js @@ -20,6 +20,7 @@ const appActions = require('../../../../js/actions/appActions') // Utils const contextMenus = require('../../../../js/contextMenus') const downloadUtil = require('../../../../js/state/downloadUtil') +const windowsUtils = require('../../../common/lib/windowsUtil') const cx = require('../../../../js/lib/classSet') class DownloadsBar extends React.Component { @@ -34,6 +35,14 @@ class DownloadsBar extends React.Component { webviewActions.setWebviewFocused() } + componentDidMount () { + windowsUtils.updateComputedStyles() + } + + componentWillUnmount () { + windowsUtils.updateComputedStyles() + } + onShowDownloads () { appActions.createTabRequested({ activateIfOpen: true, diff --git a/app/renderer/components/frame/frame.js b/app/renderer/components/frame/frame.js index 1c1e49f4b8f..28c79840bd5 100644 --- a/app/renderer/components/frame/frame.js +++ b/app/renderer/components/frame/frame.js @@ -26,6 +26,7 @@ const appStoreRenderer = require('../../../../js/stores/appStoreRenderer') const siteSettings = require('../../../../js/state/siteSettings') const siteSettingsState = require('../../../common/state/siteSettingsState') const tabState = require('../../../common/state/tabState') +const windowState = require('../../../common/state/windowState') // Utils const frameStateUtil = require('../../../../js/state/frameStateUtil') @@ -505,11 +506,7 @@ class Frame extends React.Component { e.stopPropagation() }) this.webview.addEventListener('update-target-url', (e) => { - if (!this.root) { - this.root = window.getComputedStyle(document.querySelector(':root')) - this.downloadsBarHeight = Number.parseInt(this.root.getPropertyValue('--downloads-bar-height'), 10) - } - let nearBottom = e.y > (window.innerHeight - 150 - this.downloadsBarHeight) + let nearBottom = e.y > (window.innerHeight - 150 - this.props.downloadsBarHeight) let mouseOnLeft = e.x < (window.innerWidth / 2) let showOnRight = nearBottom && mouseOnLeft windowActions.setLinkHoverPreview(e.url, showOnRight) @@ -955,6 +952,7 @@ class Frame extends React.Component { props.allSiteSettings = allSiteSettings // TODO (nejc) can be improved even more props.tabUrl = tab && tab.get('url') props.partitionNumber = frame.get('partitionNumber') + props.downloadsBarHeight = Number.parseInt(windowState.getComputedProperty(state, '--download-bar-padding'), 10) return Object.assign({}, ownProps, props) } diff --git a/docs/state.md b/docs/state.md index eb37f131b64..e5fc1574e83 100644 --- a/docs/state.md +++ b/docs/state.md @@ -356,6 +356,7 @@ AppStore }, windows: [{ // persistent properties + computedStyles: object, // all computed styles defined in computedStyles.js focused: boolean, height: number, left: number, diff --git a/js/actions/appActions.js b/js/actions/appActions.js index 4cfd9693e74..76870c2de17 100644 --- a/js/actions/appActions.js +++ b/js/actions/appActions.js @@ -1429,7 +1429,6 @@ const appActions = { actionType: appConstants.APP_UPDATE_LOG_OPENED }) } - } module.exports = appActions diff --git a/js/actions/windowActions.js b/js/actions/windowActions.js index a6806fda057..019fefd5457 100644 --- a/js/actions/windowActions.js +++ b/js/actions/windowActions.js @@ -1099,6 +1099,16 @@ const windowActions = { partition, tabId }) + }, + + computedStylesChanged: function (windowId, values) { + dispatch({ + actionType: windowConstants.WINDOW_COMPUTED_STYLES_CHANGED, + queryInfo: { + windowId + }, + values + }) } } diff --git a/js/constants/windowConstants.js b/js/constants/windowConstants.js index aae5ad7a779..706c4ff9c4e 100644 --- a/js/constants/windowConstants.js +++ b/js/constants/windowConstants.js @@ -98,7 +98,8 @@ const windowConstants = { WINDOW_SHOULD_OPEN_DEV_TOOLS: _, WINDOW_SET_ALL_AUDIO_MUTED: _, WINDOW_ON_GO_BACK_LONG: _, - WINDOW_ON_GO_FORWARD_LONG: _ + WINDOW_ON_GO_FORWARD_LONG: _, + WINDOW_COMPUTED_STYLES_CHANGED: _ } module.exports = mapValuesByKeys(windowConstants)