Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Saves computed styles in the state #9176

Merged
merged 1 commit into from
Jun 16, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/browser/windows.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const getWindowValue = (windowId) => {
}

const updateWindow = (windowId) => {
let windowValue = getWindowValue(windowId)
const windowValue = getWindowValue(windowId)
if (windowValue) {
appActions.windowUpdated(windowValue)
}
Expand Down
23 changes: 23 additions & 0 deletions app/common/constants/styleValues.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/* 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/. */

// Don't forget to update .less files as well and vice-versa
const styleValues = {
'bookmark-item-max-width': 100,
'bookmark-item-padding': 4,
'bookmark-item-margin': 3,
'bookmark-item-font-size': 4,
'bookmark-item-chevron-margin': 4,
'bookmarks-toolbar-padding': 10,
'default-font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif',
'download-bar-buttons': 140,
'download-bar-height': 60,
'download-bar-padding': 20,
'download-item-margin': 10,
'download-item-width': 200,
'navbar-height': 36,
'context-menu-single-max-width': 400
}

module.exports = styleValues
6 changes: 5 additions & 1 deletion app/common/lib/windowsUtil.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,14 @@

const Immutable = require('immutable')

module.exports.getPinnedSiteProps = site => {
const getPinnedSiteProps = site => {
return Immutable.fromJS({
location: site.get('location'),
order: site.get('order'),
partitionNumber: site.get('partitionNumber') || 0
})
}

module.exports = {
getPinnedSiteProps
}
24 changes: 11 additions & 13 deletions app/renderer/components/bookmarks/bookmarksToolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const {calculateTextWidth} = require('../../../../js/lib/textCalculator')

// Styles
const globalStyles = require('../styles/global')
const domUtil = require('../../lib/domUtil')

class BookmarksToolbar extends ImmutableComponent {
constructor () {
Expand Down Expand Up @@ -118,19 +119,16 @@ class BookmarksToolbar extends ImmutableComponent {

// Dynamically calculate how many bookmark items should appear on the toolbar
// before it is actually rendered.
if (!this.root) {
this.root = window.getComputedStyle(document.querySelector(':root'))
this.maxWidth = Number.parseInt(this.root.getPropertyValue('--bookmark-item-max-width'), 10)
this.padding = Number.parseInt(this.root.getPropertyValue('--bookmark-item-padding'), 10) * 2
// Toolbar padding is only on the left
this.toolbarPadding = Number.parseInt(this.root.getPropertyValue('--bookmarks-toolbar-padding'), 10)
this.bookmarkItemMargin = Number.parseInt(this.root.getPropertyValue('--bookmark-item-margin'), 10) * 2
// No margin for show only favicons
this.chevronMargin = Number.parseInt(this.root.getPropertyValue('--bookmark-item-chevron-margin'), 10)
this.fontSize = this.root.getPropertyValue('--bookmark-item-font-size')
this.fontFamily = this.root.getPropertyValue('--default-font-family')
this.chevronWidth = this.chevronMargin + Number.parseInt(this.fontSize)
}
this.maxWidth = domUtil.getStyleConstants('bookmark-item-max-width')
this.padding = domUtil.getStyleConstants('bookmark-item-padding') * 2
// Toolbar padding is only on the left
this.toolbarPadding = domUtil.getStyleConstants('bookmarks-toolbar-padding')
this.bookmarkItemMargin = domUtil.getStyleConstants('bookmark-item-margin') * 2
// No margin for show only favicons
this.chevronMargin = domUtil.getStyleConstants('bookmark-item-chevron-margin')
this.fontSize = domUtil.getStyleConstants('bookmark-item-font-size')
this.fontFamily = domUtil.getStyleConstants('default-font-family')
this.chevronWidth = this.chevronMargin + this.fontSize
const margin = props.showFavicon && props.showOnlyFavicon ? 0 : this.bookmarkItemMargin
widthAccountedFor += this.toolbarPadding

Expand Down
7 changes: 2 additions & 5 deletions app/renderer/components/frame/frame.js
Original file line number Diff line number Diff line change
Expand Up @@ -505,11 +505,8 @@ 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)
const downloadBarHeight = domUtil.getStyleConstants('download-bar-height')
let nearBottom = e.y > (window.innerHeight - 150 - downloadBarHeight)
let mouseOnLeft = e.x < (window.innerWidth / 2)
let showOnRight = nearBottom && mouseOnLeft
windowActions.setLinkHoverPreview(e.url, showOnRight)
Expand Down
5 changes: 2 additions & 3 deletions app/renderer/components/navigation/urlBarSuggestions.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const cx = require('../../../../js/lib/classSet')
const locale = require('../../../../js/l10n')
const suggestions = require('../../../common/lib/suggestion')
const frameStateUtil = require('../../../../js/state/frameStateUtil')
const domUtil = require('../../lib/domUtil')
const {getCurrentWindowId} = require('../../currentWindow')

class UrlBarSuggestions extends React.Component {
Expand Down Expand Up @@ -73,9 +74,7 @@ class UrlBarSuggestions extends React.Component {
const currentWindow = state.get('currentWindow')
const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
const urlBar = activeFrame.getIn(['navbar', 'urlbar'], Immutable.Map())
const documentHeight = Number.parseInt(
window.getComputedStyle(document.querySelector(':root')).getPropertyValue('--navbar-height'), 10
)
const documentHeight = domUtil.getStyleConstants('navbar-height')
const menuHeight = ownProps.menubarVisible ? 30 : 0

const props = {}
Expand Down
20 changes: 18 additions & 2 deletions app/renderer/lib/domUtil.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
module.exports.createWebView = () => {
/* 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 styleValues = require('../../common/constants/styleValues')

const createWebView = () => {
return document.createElement('webview')
}

module.exports.appendChild = (element, child) => {
const appendChild = (element, child) => {
element.appendChild(child)
}

const getStyleConstants = (prop) => {
return styleValues[prop]
}

module.exports = {
createWebView,
appendChild,
getStyleConstants
}
1 change: 0 additions & 1 deletion js/actions/appActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -1429,7 +1429,6 @@ const appActions = {
actionType: appConstants.APP_UPDATE_LOG_OPENED
})
}

}

module.exports = appActions
10 changes: 5 additions & 5 deletions js/state/downloadUtil.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */
const Immutable = require('immutable')
const downloadStates = require('../constants/downloadStates')
const domUtil = require('../../app/renderer/lib/domUtil')

const pendingStates = [downloadStates.IN_PROGRESS, downloadStates.PAUSED]
const stopStates = [downloadStates.CANCELLED, downloadStates.INTERRUPTED, downloadStates.COMPLETED]
Expand Down Expand Up @@ -66,11 +67,10 @@ const getDownloadItems = (state) => {
}

const downloadsSize = state.get('downloads').size
const root = window.getComputedStyle(document.querySelector(':root'))
const downloadItemWidth = Number.parseInt(root.getPropertyValue('--download-item-width'), 10)
const downloadItemMargin = Number.parseInt(root.getPropertyValue('--download-item-margin'), 10)
const downloadBarPadding = Number.parseInt(root.getPropertyValue('--download-bar-padding'), 10)
const downloadBarButtons = Number.parseInt(root.getPropertyValue('--download-bar-buttons'), 10)
const downloadItemWidth = domUtil.getStyleConstants('download-item-width')
const downloadItemMargin = domUtil.getStyleConstants('download-item-margin')
const downloadBarPadding = domUtil.getStyleConstants('download-bar-padding')
const downloadBarButtons = domUtil.getStyleConstants('download-bar-buttons')
const numItems = Math.floor(
(window.innerWidth - (downloadBarPadding * 2) - downloadBarButtons) /
(downloadItemWidth + downloadItemMargin)
Expand Down
1 change: 1 addition & 0 deletions less/bookmarksToolbar.less
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

// Copied to bookmaksToolbar.js
// If updating update app/common/constants/styleValues.js as well and vice-versa
:root {
--bookmark-item-max-width: 100px;
--bookmark-item-padding: 4px;
Expand Down
1 change: 1 addition & 0 deletions less/downloadBar.less
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

@import "variables.less";

// If updating update app/common/constants/styleValues.js as well and vice-versa
:root {
--download-item-width: 200px;
--download-item-margin: 10px;
Expand Down
1 change: 1 addition & 0 deletions less/variables.less
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@

// Variables can be exposed to (and read from) our JavaScript code
// (for more info, search MDN for CSSStyleDeclaration)
// If updating update app/common/constants/styleValues.js as well and vice-versa
:root {
--navbar-height: @navbarHeight;
--downloads-bar-height: @downloadsBarHeight;
Expand Down
1 change: 1 addition & 0 deletions less/window.less
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
@import "animations.less";
@import "variables.less";

// If updating update app/common/constants/styleValues.js as well and vice-versa
:root {
--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
}
Expand Down
15 changes: 10 additions & 5 deletions test/unit/app/renderer/components/download/downloadBarTest.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ const appStoreRenderer = Immutable.fromJS({
receivedBytes: 1,
state: downloadStates.IN_PROGRESS
}
}
},
windows: []
})

describe('downloadsBar component', function () {
Expand All @@ -57,10 +58,12 @@ describe('downloadsBar component', function () {
useCleanCache: true
})
mockery.registerMock('electron', fakeElectron)
mockery.registerMock('../../app/renderer/lib/domUtil', {
getStyleConstants: () => 100
})
DownloadItem = require('../../../../../../app/renderer/components/download/downloadItem')
DownloadsBar = require('../../../../../../app/renderer/components/download/downloadsBar')
appStore = require('../../../../../../js/stores/appStoreRenderer')
appStore.state = appStoreRenderer
})

after(function () {
Expand All @@ -70,6 +73,7 @@ describe('downloadsBar component', function () {

describe('multiple downloads with space', function () {
before(function () {
appStore.state = appStoreRenderer
this.result = mount(<DownloadsBar />)
})

Expand Down Expand Up @@ -103,12 +107,13 @@ describe('downloadsBar component', function () {
})
})

// skipped until #9176 is merged
describe.skip('very narrow downloads bar with items', function () {
describe('very narrow downloads bar with items', function () {
before(function () {
mockery.registerMock('../../getComputedStyle', () => 10)
window.innerWidth = 10
appStore.state = appStoreRenderer
this.result = mount(<DownloadsBar />)
})

it('renders no downloads', function () {
assert.equal(this.result.find(DownloadItem).length, 0)
})
Expand Down