Skip to content

Commit

Permalink
Saves computed styles in the state
Browse files Browse the repository at this point in the history
Resolves brave#9149

Auditors:

Test Plan:
  • Loading branch information
NejcZdovc committed Jun 10, 2017
1 parent d66351b commit 4e595a2
Show file tree
Hide file tree
Showing 10 changed files with 115 additions and 7 deletions.
3 changes: 3 additions & 0 deletions app/browser/reducers/windowsReducer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.updateComputedStyles(state, action)
break
}
return state
}
Expand Down
35 changes: 35 additions & 0 deletions app/common/constants/computedStyles.js
Original file line number Diff line number Diff line change
@@ -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
38 changes: 37 additions & 1 deletion app/common/lib/windowsUtil.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,47 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const Immutable = require('immutable')
const computedStyles = require('../constants/computedStyles')
const windowState = require('../state/windowState')
const appActions = require('../../../js/actions/appActions')
const {getCurrentWindowId} = require('../../renderer/currentWindow')

module.exports.getPinnedSiteProps = site => {
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 getComputedProperty = (state, property) => {
const currentWindowIndex = windowState.getWindowIndexByWindowId(state, getCurrentWindowId())

return state.getIn(['windows', currentWindowIndex, 'computedStyles', property])
}

const updateComputedStyles = () => {
const root = window.getComputedStyle(document.querySelector(':root'))
const computedValues = getComputedStyleData(root)
appActions.updateComputedStyles(getCurrentWindowId(), computedValues)
}

module.exports = {
getPinnedSiteProps,
getComputedStyleData,
getComputedProperty,
updateComputedStyles
}
7 changes: 7 additions & 0 deletions app/common/state/windowState.js
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,13 @@ const api = {
return state.set('windows', windows.delete(index).insert(index, windowValue))
},

updateComputedStyles: (state, action) => {
const windowIndex = api.getWindowIndexByWindowId(state, action.get('windowId'))
return state.mergeDeepIn(['windows', windowIndex], {
computedStyles: action.get('values')
})
},

getWindows: (state) => {
state = validateState(state)
return state.get('windows')
Expand Down
9 changes: 9 additions & 0 deletions app/renderer/components/download/downloadsBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -34,6 +35,14 @@ class DownloadsBar extends React.Component {
webviewActions.setWebviewFocused()
}

componentDidMount () {
windowsUtils.updateComputedStyles()
}

componentWillUnmount () {
windowsUtils.updateComputedStyles()
}

onShowDownloads () {
appActions.createTabRequested({
activateIfOpen: true,
Expand Down
8 changes: 3 additions & 5 deletions app/renderer/components/frame/frame.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const {isFocused} = require('../../currentWindow')
const debounce = require('../../../../js/lib/debounce')
const locale = require('../../../../js/l10n')
const imageUtil = require('../../../../js/lib/imageUtil')
const windowsUtil = require('../../../common/lib/windowsUtil')

// Constants
const settings = require('../../../../js/constants/settings')
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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(windowsUtil.getComputedProperty(state, '--download-bar-padding'), 10)

return Object.assign({}, ownProps, props)
}
Expand Down
10 changes: 10 additions & 0 deletions app/renderer/components/window.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ const appActions = require('../../../js/actions/appActions')

// Utils
const cx = require('../../../js/lib/classSet')
const windowsUtils = require('../../common/lib/windowsUtil')
const {getPlatformStyles} = require('../../common/lib/platformUtil')
const {getCurrentWindowId} = require('../currentWindow')
const throttle = require('../../../js/lib/throttle')

window.appActions = appActions

Expand All @@ -45,6 +47,7 @@ class Window extends React.Component {

this.onChange = this.onChange.bind(this)
this.onAppStateChange = this.onAppStateChange.bind(this)
this.updateComputedStyles = throttle(this.updateComputedStyles.bind(this), 66)
windowStore.addChangeListener(this.onChange)
appStoreRenderer.addChangeListener(this.onAppStateChange)
}
Expand Down Expand Up @@ -93,11 +96,14 @@ class Window extends React.Component {

componentDidMount () {
appActions.windowReady(getCurrentWindowId())
this.updateComputedStyles()
window.addEventListener('resize', this.updateComputedStyles)
}

componentWillUnmount () {
windowStore.removeChangeListener(this.onChange)
appStoreRenderer.removeChangeListener(this.onAppStateChange)
window.removeEventListener('resize', this.updateComputedStyles)
}

shouldComponentUpdate (nextProps, nextState) {
Expand Down Expand Up @@ -127,6 +133,10 @@ class Window extends React.Component {
})
})
}

updateComputedStyles () {
windowsUtils.updateComputedStyles()
}
}

Window.propTypes = { appState: PropTypes.object, frames: PropTypes.array, initWindowState: PropTypes.object }
Expand Down
1 change: 1 addition & 0 deletions docs/state.md
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,7 @@ AppStore
},
windows: [{
// persistent properties
computedStyles: object, // all computed styles defined in computedStyles.js
focused: boolean,
height: number,
left: number,
Expand Down
8 changes: 8 additions & 0 deletions js/actions/appActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -1428,6 +1428,14 @@ const appActions = {
dispatch({
actionType: appConstants.APP_UPDATE_LOG_OPENED
})
},

updateComputedStyles: function (windowId, values) {
dispatch({
actionType: appConstants.APP_WINDOW_COMPUTED_STYLES,
windowId,
values
})
}

}
Expand Down
3 changes: 2 additions & 1 deletion js/constants/appConstants.js
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,8 @@ const appConstants = {
APP_REMOVE_PASSWORD_SITE: _, /** @param {Object} passwordDetail */
APP_CLEAR_PASSWORDS: _,
APP_UPDATE_LOG_OPENED: _,
APP_URL_BAR_SELECTED_INDEX_CHANGED: _
APP_URL_BAR_SELECTED_INDEX_CHANGED: _,
APP_WINDOW_COMPUTED_STYLES: _
}

module.exports = mapValuesByKeys(appConstants)

0 comments on commit 4e595a2

Please sign in to comment.