Saves computed styles in the state

Resolves #9149

Auditors:

Test Plan:

app/browser/windows.js

@@ -55,7 +55,7 @@ const getWindowValue = (windowId) => {
 }
 
 const updateWindow = (windowId) => {
-  let windowValue = getWindowValue(windowId)
+  const windowValue = getWindowValue(windowId)
   if (windowValue) {
     appActions.windowUpdated(windowValue)
   }

app/common/constants/styleValues.js

@@ -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

app/common/lib/windowsUtil.js

@@ -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
+}

app/renderer/components/bookmarks/bookmarksToolbar.js

@@ -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 () {
@@ -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
 

app/renderer/components/frame/frame.js

@@ -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)

app/renderer/components/navigation/urlBarSuggestions.js

@@ -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 {
@@ -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 = {}

app/renderer/lib/domUtil.js

@@ -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
+}

js/actions/appActions.js

@@ -1429,7 +1429,6 @@ const appActions = {
       actionType: appConstants.APP_UPDATE_LOG_OPENED
     })
   }
-
 }
 
 module.exports = appActions

js/state/downloadUtil.js

@@ -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]
@@ -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)

less/bookmarksToolbar.less

@@ -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;

less/downloadBar.less

@@ -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;

less/variables.less

@@ -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;

less/window.less

@@ -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;
 }

test/unit/app/renderer/components/download/downloadBarTest.js

@@ -44,7 +44,8 @@ const appStoreRenderer = Immutable.fromJS({
       receivedBytes: 1,
       state: downloadStates.IN_PROGRESS
     }
-  }
+  },
+  windows: []
 })
 
 describe('downloadsBar component', function () {
@@ -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 () {
@@ -70,6 +73,7 @@ describe('downloadsBar component', function () {
 
   describe('multiple downloads with space', function () {
     before(function () {
+      appStore.state = appStoreRenderer
       this.result = mount(<DownloadsBar />)
     })
 
@@ -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)
     })