Merge pull request #109 from loeck/master

Add new window for DevToolbar, center PreloadWindow with MainWindow position

package.json

@@ -114,7 +114,7 @@
     "concurrently": "^3.5.1",
     "dotenv": "^5.0.0",
     "electron": "1.8.2",
-    "electron-builder": "^19.56.0",
+    "electron-builder": "^20.0.4",
     "electron-devtools-installer": "^2.2.3",
     "electron-webpack": "1.12.1",
     "eslint": "^4.17.0",

src/components/App.js

@@ -11,8 +11,9 @@ import theme from 'styles/theme'
 
 import i18n from 'renderer/i18n'
 
-import Wrapper from 'components/Wrapper'
-import PrintWrapper from 'components/PrintWrapper'
+import Default from 'components/layout/Default'
+import Dev from 'components/layout/Dev'
+import Print from 'components/layout/Print'
 
 export default ({
   store,
@@ -28,8 +29,9 @@ export default ({
       <ThemeProvider theme={theme}>
         <ConnectedRouter history={history}>
           <Switch>
-            <Route path="/print" component={PrintWrapper} />
-            <Route component={Wrapper} />
+            {__DEV__ && <Route path="/dev" component={Dev} />}
+            <Route path="/print" component={Print} />
+            <Route component={Default} />
           </Switch>
         </ConnectedRouter>
       </ThemeProvider>

src/components/DashboardPage/AccountCard.js

@@ -4,13 +4,12 @@ import React from 'react'
 
 import type { Account } from 'types/common'
 
-import { formatBTC } from 'helpers/format'
-
 import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
 
 import { AreaChart } from 'components/base/Chart'
 import Bar from 'components/base/Bar'
 import Box, { Card } from 'components/base/Box'
+import FormattedVal from 'components/base/FormattedVal'
 
 const AccountCard = ({
   account,
@@ -37,7 +36,15 @@ const AccountCard = ({
     </Box>
     <Bar size={1} color="argile" />
     <Box grow justify="center" color="dark">
-      {account.data && formatBTC(account.data.balance)}
+      {account.data && (
+        <FormattedVal
+          alwaysShowSign={false}
+          color="dark"
+          currency={account.type}
+          showCode
+          val={account.data.balance}
+        />
+      )}
     </Box>
     <AreaChart
       tiny

src/components/DevToolbar.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import { ipcRenderer } from 'electron'
+import { remote, ipcRenderer } from 'electron'
 import { translate } from 'react-i18next'
 import { AreaChart, Area } from 'recharts'
 import takeRight from 'lodash/takeRight'
@@ -10,15 +10,18 @@ import reduce from 'lodash/fp/reduce'
 import flow from 'lodash/fp/flow'
 import filter from 'lodash/fp/filter'
 import sortBy from 'lodash/fp/sortBy'
+import chunk from 'lodash/chunk'
 import styled from 'styled-components'
 import color from 'color'
 
 import Box from 'components/base/Box'
-import GrowScroll from 'components/base/GrowScroll'
+import Bar from 'components/base/Bar'
 import CopyToClipboard from 'components/base/CopyToClipboard'
 
 import theme from 'styles/theme'
 
+const mainWindow = remote.BrowserWindow.getAllWindows().find(w => w.name === 'MainWindow')
+
 type HslColor = {
   color: Array<number>,
 }
@@ -53,40 +56,16 @@ const colors: Array<ColorType> = transform(theme.colors)
 
 const Container = styled(Box).attrs({
   bg: 'night',
-  p: 1,
+  p: 5,
+  grow: true,
   color: 'white',
-  fontSize: 0,
-})`
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  z-index: 1;
-  border-top-left-radius: 3px;
-  transition: ease-in-out transform 300ms;
-  transform: translate3d(0, ${p => (p.isOpened ? '0' : '100%')}, 0);
-`
-
-const Handle = styled(Box).attrs({
-  bg: 'night',
-  justify: 'center',
-  px: 1,
-})`
-  cursor: pointer;
-  position: absolute;
-  bottom: 100%;
-  right: 5px;
-  font-size: 9px;
-  height: 20px;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-`
+  fontSize: 3,
+})``
 
 const Colors = styled(Box).attrs({
   horizontal: true,
-  align: 'flex-start',
-})`
-  flex-wrap: wrap;
-`
+  flow: 4,
+})``
 
 const Cl = styled(Box).attrs({
   align: 'center',
@@ -94,9 +73,8 @@ const Cl = styled(Box).attrs({
   p: 2,
 })`
   border: 2px solid white;
+  flex: 1;
   cursor: pointer;
-  margin: 2px;
-  width: 80px;
 `
 
 const Color = ({ onClick, color }: { onClick: Function, color: ColorType }) => (
@@ -106,29 +84,22 @@ const Color = ({ onClick, color }: { onClick: Function, color: ColorType }) => (
 )
 
 const Lang = styled(Box).attrs({
-  bg: p => (p.current ? 'white' : 'night'),
-  color: p => (p.current ? 'night' : 'white'),
+  bg: 'night',
+  color: 'white',
   borderColor: 'white',
-  borderWidth: 1,
-  p: 1,
+  borderWidth: 2,
+  borderRadius: 1,
+  p: 2,
 })`
-  border-radius: 3px;
   cursor: pointer;
 `
 
-const LANGUAGES = {
-  fr: 'français',
-  en: 'english',
-}
-
 type State = {
-  isOpened: boolean,
   cpuUsage: Object,
 }
 
 class DevToolbar extends PureComponent<any, State> {
   state = {
-    isOpened: false,
     cpuUsage: {},
   }
 
@@ -159,32 +130,34 @@ class DevToolbar extends PureComponent<any, State> {
     }
   }
 
-  handleToggle = () => this.setState({ isOpened: !this.state.isOpened })
-  handleChangeLanguage = lang => () => this.props.i18n.changeLanguage(lang)
+  handleChangeLanguage = lang => () => {
+    mainWindow.webContents.send('msg', {
+      type: 'application.changeLanguage',
+      data: lang,
+    })
+  }
 
   render() {
     const { i18n } = this.props
-    const { isOpened, cpuUsage } = this.state
+    const { cpuUsage } = this.state
 
     return (
-      <Container isOpened={isOpened}>
-        <Handle onClick={this.handleToggle}>{'DEV'}</Handle>
-        <Box horizontal grow flow={10}>
-          <Box flow={10}>
-            {Object.keys(LANGUAGES).map(lang => (
-              <Lang
-                key={lang}
-                current={i18n.language === lang}
-                onClick={this.handleChangeLanguage(lang)}
-              >
-                {LANGUAGES[lang]}
+      <Container>
+        <Box grow flow={4}>
+          <Box flow={4} horizontal>
+            {Object.keys(i18n.store.data).map(lang => (
+              <Lang key={lang} onClick={this.handleChangeLanguage(lang)}>
+                {lang}
               </Lang>
             ))}
           </Box>
-          <Box style={{ width: 168 }}>
-            <GrowScroll>
-              <Colors>
-                {colors.map(color => (
+          <Bar size={2} color="white" />
+          <Box flow={4}>
+            {chunk(colors, 8).map((c, i) => (
+              <Colors
+                key={i} // eslint-disable-line react/no-array-index-key
+              >
+                {c.map(color => (
                   <CopyToClipboard
                     key={color.name}
                     data={color.name}
@@ -192,16 +165,17 @@ class DevToolbar extends PureComponent<any, State> {
                   />
                 ))}
               </Colors>
-            </GrowScroll>
+            ))}
           </Box>
-          <Box flow={10}>
+          <Bar size={2} color="white" />
+          <Box flow={4} horizontal>
             {Object.keys(cpuUsage)
               .sort()
               .map(k => (
-                <Box key={k} grow>
-                  <Box horizontal align="center">
-                    <Box grow>{k}</Box>
-                    <Box fontSize="8px">{last(cpuUsage[k]).value}%</Box>
+                <Box key={k}>
+                  <Box horizontal align="center" flow={2}>
+                    <Box fontSize={1}>{last(cpuUsage[k]).value}%</Box>
+                    <Box>{k}</Box>
                   </Box>
                   <Box>
                     <AreaChart

src/components/SideBar/index.js

@@ -14,8 +14,6 @@ import type { Accounts, T } from 'types/common'
 import { openModal } from 'reducers/modals'
 import { getVisibleAccounts } from 'reducers/accounts'
 
-import { formatBTC } from 'helpers/format'
-
 import IconPieChart from 'icons/PieChart'
 import IconArrowDown from 'icons/ArrowDown'
 import IconArrowUp from 'icons/ArrowUp'
@@ -25,6 +23,7 @@ import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
 
 import Box, { Tabbable } from 'components/base/Box'
 import GrowScroll from 'components/base/GrowScroll'
+import FormattedVal from 'components/base/FormattedVal'
 import Item from './Item'
 
 const CapsSubtitle = styled(Box).attrs({
@@ -106,7 +105,15 @@ class SideBar extends PureComponent<Props> {
               {accounts.map(account => (
                 <Item
                   big
-                  desc={formatBTC(account.data ? account.data.balance : 0)}
+                  desc={
+                    <FormattedVal
+                      alwaysShowSign={false}
+                      color="warmGrey"
+                      currency={account.type}
+                      showCode
+                      val={account.data ? account.data.balance : 0}
+                    />
+                  }
                   iconActiveColor="#fcb653"
                   icon={<IconCurrencyBitcoin height={16} width={16} />}
                   key={account.id}

src/components/TopBar.js

@@ -19,9 +19,9 @@ import Box from 'components/base/Box'
 import GlobalSearch from 'components/GlobalSearch'
 
 const Container = styled(Box).attrs({
-  px: 5,
+  px: 6,
 })`
-  height: 60px;
+  height: ${p => p.theme.sizes.topBarHeight}px;
   position: absolute;
   overflow: hidden;
   left: 0;

src/components/base/FormattedVal.js

@@ -45,7 +45,7 @@ function FormattedVal(props: Props) {
   if (isPercent) {
     text = `${alwaysShowSign ? (isNegative ? '- ' : '+ ') : ''}${val} %`
   } else {
-    const curr = currency ? currencies[currency] : null
+    const curr = currency ? currencies[currency.toUpperCase()] : null
     if (!curr) {
       return `[invalid currency ${currency || '(null)'}]`
     }

src/components/Wrapper.js → src/components/layout/Default.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Fragment, Component } from 'react'
+import styled from 'styled-components'
 import { ipcRenderer } from 'electron'
 import { Route } from 'react-router'
 import { translate } from 'react-i18next'
@@ -14,13 +15,18 @@ import DashboardPage from 'components/DashboardPage'
 import SettingsPage from 'components/SettingsPage'
 
 import AppRegionDrag from 'components/AppRegionDrag'
-import DevToolbar from 'components/DevToolbar'
 import IsUnlocked from 'components/IsUnlocked'
 import SideBar from 'components/SideBar'
 import TopBar from 'components/TopBar'
 import UpdateNotifier from 'components/UpdateNotifier'
 
-class Wrapper extends Component<{}> {
+const Container = styled(GrowScroll).attrs({
+  p: 6,
+})`
+  padding-top: ${p => p.theme.sizes.topBarHeight + p.theme.space[7]}px;
+`
+
+class Default extends Component<{}> {
   componentDidMount() {
     window.requestAnimationFrame(
       () => (this._timeout = setTimeout(() => ipcRenderer.send('app-finish-rendering'), 300)),
@@ -37,7 +43,6 @@ class Wrapper extends Component<{}> {
     return (
       <Fragment>
         {process.platform === 'darwin' && <AppRegionDrag />}
-        {__DEV__ && <DevToolbar />}
 
         <IsUnlocked>
           {Object.entries(modals).map(([name, ModalComponent]: [string, any]) => (
@@ -50,11 +55,11 @@ class Wrapper extends Component<{}> {
             <Box shrink grow bg="cream" color="grey" relative>
               <TopBar />
               <UpdateNotifier />
-              <GrowScroll p={5} style={{ paddingTop: 100 }}>
+              <Container>
                 <Route path="/" exact component={DashboardPage} />
                 <Route path="/settings" component={SettingsPage} />
                 <Route path="/account/:id" component={AccountPage} />
-              </GrowScroll>
+              </Container>
             </Box>
           </Box>
         </IsUnlocked>
@@ -63,4 +68,4 @@ class Wrapper extends Component<{}> {
   }
 }
 
-export default translate()(Wrapper)
+export default translate()(Default)

src/components/layout/Dev.js

@@ -0,0 +1,25 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+import DevToolbar from 'components/DevToolbar'
+
+const Container = styled(Box).attrs({
+  grow: true,
+})`
+  height: 100%;
+`
+
+class Dev extends PureComponent<{}> {
+  render() {
+    return (
+      <Container>
+        <DevToolbar />
+      </Container>
+    )
+  }
+}
+
+export default Dev

src/components/PrintWrapper.js → src/components/layout/Print.js

@@ -12,7 +12,7 @@ type State = {
   data: Object | null,
 }
 
-class PrintWrapper extends PureComponent<any, State> {
+class Print extends PureComponent<any, State> {
   state = {
     data: null,
   }
@@ -49,4 +49,4 @@ class PrintWrapper extends PureComponent<any, State> {
   }
 }
 
-export default PrintWrapper
+export default Print

src/internals/index.js

@@ -69,6 +69,7 @@ if (__DEV__) {
         value: cpuPercent,
       },
       {
+        window: 'DevWindow',
         kill: false,
       },
     )

src/main/app.js

@@ -8,14 +8,15 @@ import db from 'helpers/db'
 
 // necessary to prevent win from being garbage collected
 let mainWindow
+let devWindow
 let preloadWindow
 
 let forceClose = false
 
 const devTools = __DEV__
 
-const getWindowPosition = (height, width) => {
-  const { bounds } = screen.getPrimaryDisplay()
+const getWindowPosition = (height, width, display = screen.getPrimaryDisplay()) => {
+  const { bounds } = display
 
   return {
     x: Math.ceil(bounds.x + (bounds.width - width) / 2),
@@ -23,10 +24,35 @@ const getWindowPosition = (height, width) => {
   }
 }
 
+const getDefaultUrl = () =>
+  __DEV__
+    ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT || ''}`
+    : `file://${__dirname}/index.html`
+
+const saveWindowSettings = window => {
+  window.on(
+    'resize',
+    debounce(() => {
+      const [width, height] = window.getSize()
+      db.setIn('settings', `window.${window.name}.dimensions`, { width, height })
+    }, 100),
+  )
+
+  window.on(
+    'move',
+    debounce(() => {
+      const [x, y] = window.getPosition()
+      db.setIn('settings', `window.${window.name}.positions`, { x, y })
+    }, 100),
+  )
+}
+
 const defaultWindowOptions = {
   backgroundColor: '#fff',
   webPreferences: {
     devTools,
+    // Enable, among other things, the ResizeObserver
+    experimentalFeatures: true,
   },
 }
 
@@ -34,8 +60,8 @@ function createMainWindow() {
   const MIN_HEIGHT = 768
   const MIN_WIDTH = 1024
 
-  const savedDimensions = db.getIn('settings', 'window.dimensions', {})
-  const savedPositions = db.getIn('settings', 'window.positions', null)
+  const savedDimensions = db.getIn('settings', 'window.MainWindow.dimensions', {})
+  const savedPositions = db.getIn('settings', 'window.MainWindow.positions', null)
 
   const width = savedDimensions.width || MIN_WIDTH
   const height = savedDimensions.height || MIN_HEIGHT
@@ -54,23 +80,20 @@ function createMainWindow() {
     minWidth: MIN_WIDTH,
     minHeight: MIN_HEIGHT,
     show: false,
-    webPreferences: {
-      ...defaultWindowOptions.webPreferences,
-      // Enable, among other things, the ResizeObserver
-      experimentalFeatures: true,
-    },
   }
 
   const window = new BrowserWindow(windowOptions)
 
-  const url = __DEV__
-    ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT || ''}`
-    : `file://${__dirname}/index.html`
+  window.name = 'MainWindow'
+
+  const url = getDefaultUrl()
 
   if (devTools) {
     window.webContents.openDevTools()
   }
 
+  saveWindowSettings(window)
+
   window.loadURL(url)
 
   window.on('close', e => {
@@ -83,22 +106,6 @@ function createMainWindow() {
     }
   })
 
-  window.on(
-    'resize',
-    debounce(() => {
-      const [width, height] = window.getSize()
-      db.setIn('settings', 'window.dimensions', { width, height })
-    }, 100),
-  )
-
-  window.on(
-    'move',
-    debounce(() => {
-      const [x, y] = window.getPosition()
-      db.setIn('settings', 'window.positions', { x, y })
-    }, 100),
-  )
-
   window.webContents.on('devtools-opened', () => {
     window.focus()
     setImmediate(() => {
@@ -109,16 +116,64 @@ function createMainWindow() {
   return window
 }
 
+function createDevWindow() {
+  const MIN_HEIGHT = 400
+  const MIN_WIDTH = 600
+
+  const savedDimensions = db.getIn('settings', 'window.DevWindow.dimensions', {})
+  const savedPositions = db.getIn('settings', 'window.DevWindow.positions', null)
+
+  const width = savedDimensions.width || MIN_WIDTH
+  const height = savedDimensions.height || MIN_HEIGHT
+
+  const windowOptions = {
+    ...defaultWindowOptions,
+    ...(savedPositions !== null ? savedPositions : {}),
+    fullscreenable: false,
+    height,
+    show: false,
+    skipTaskbar: true,
+    width,
+  }
+
+  const window = new BrowserWindow(windowOptions)
+
+  window.name = 'DevWindow'
+
+  const url = getDefaultUrl()
+
+  if (devTools) {
+    window.webContents.openDevTools()
+  }
+
+  saveWindowSettings(window)
+
+  window.loadURL(`${url}/#/dev`)
+
+  window.on('ready-to-show', () => {
+    window.show()
+  })
+
+  return window
+}
+
 function createPreloadWindow() {
   // Preload renderer of main windows
   mainWindow = createMainWindow()
 
+  const [x, y] = mainWindow.getPosition()
+
+  if (__DEV__) {
+    devWindow = createDevWindow()
+  }
+
   const height = 144
   const width = 256
 
   const windowOptions = {
     ...defaultWindowOptions,
-    ...getWindowPosition(height, width),
+    ...getWindowPosition(height, width, screen.getDisplayNearestPoint({ x, y })),
+    alwaysOnTop: true,
     closable: false,
     frame: false,
     fullscreenable: false,
@@ -131,6 +186,8 @@ function createPreloadWindow() {
 
   const window = new BrowserWindow(windowOptions)
 
+  window.name = 'PreloadWindow'
+
   window.loadURL(`file://${__static}/preload-window.html`)
 
   window.on('ready-to-show', () => {
@@ -197,4 +254,8 @@ ipcMain.on('app-finish-rendering', () => {
     mainWindow.show()
     setImmediate(() => mainWindow !== null && mainWindow.focus())
   }
+
+  if (devWindow !== null) {
+    devWindow.show()
+  }
 })

src/main/bridge.js

@@ -1,7 +1,7 @@
 // @flow
 
 import { fork } from 'child_process'
-import { ipcMain } from 'electron'
+import { BrowserWindow, ipcMain } from 'electron'
 import objectPath from 'object-path'
 import { resolve } from 'path'
 
@@ -34,12 +34,18 @@ function onForkChannel(forkType, callType) {
 
     const onMessage = payload => {
       const { type, data, options = {} } = payload
+
+      if (options.window) {
+        const devWindow = BrowserWindow.getAllWindows().find(w => w.name === options.window)
+        devWindow.webContents.send('msg', { type, data })
+      } else {
         if (callType === 'async') {
           event.sender.send('msg', { type, data })
         }
         if (callType === 'sync') {
           event.returnValue = { type, data }
         }
+      }
       if (options.kill && compute) {
         kill()
       }
@@ -72,5 +78,5 @@ ipcMain.on('msg', (event: any, payload) => {
     return
   }
   const send = (type: string, data: *) => event.sender.send('msg', { type, data })
-  handler(send, data)
+  handler(send, data, type)
 })

src/renderer/events.js

@@ -14,6 +14,8 @@ import { updateAccount } from 'actions/accounts'
 import { setUpdateStatus } from 'reducers/update'
 import { getAccountData, getAccounts } from 'reducers/accounts'
 
+import i18n from 'renderer/i18n'
+
 const { DISABLED_SYNC, DISABLED_AUTO_SYNC } = process.env
 
 type MsgPayload = {
@@ -64,6 +66,10 @@ export function checkUpdates() {
 
 export default ({ store, locked }: { store: Object, locked: boolean }) => {
   const handlers = {
+    dispatch: (type, payload) => store.dispatch({ type, payload }),
+    application: {
+      changeLanguage: lang => i18n.changeLanguage(lang),
+    },
     account: {
       sync: {
         success: account => {

src/renderer/index.js

@@ -4,6 +4,7 @@ import 'env'
 
 import React from 'react'
 import Raven from 'raven-js'
+import { remote } from 'electron'
 import { render } from 'react-dom'
 import { AppContainer } from 'react-hot-loader'
 import createHistory from 'history/createHashHistory'
@@ -35,8 +36,6 @@ const history = createHistory()
 const store = createStore(history)
 const rootNode = document.getElementById('app')
 
-global.__PRINT_MODE__ = history.location.pathname.startsWith('/print')
-
 store.dispatch(fetchSettings())
 
 const state = store.getState() || {}
@@ -55,7 +54,8 @@ function r(Comp) {
 
 r(<App store={store} history={history} language={language} />)
 
-if (!__PRINT_MODE__) {
+// Only init events on MainWindow
+if (remote.getCurrentWindow().name === 'MainWindow') {
   events({ store, locked })
 }
 

src/styles/theme.js

@@ -62,6 +62,7 @@ export const fontFamilies = {
 
 export default {
   sizes: {
+    topBarHeight: 58,
     sideBarWidth: 230,
   },
   radii,

yarn.lock

@@ -10,21 +10,17 @@
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/7zip-bin-mac/-/7zip-bin-mac-1.0.1.tgz#3e68778bbf0926adc68159427074505d47555c02"
 
-"7zip-bin-win@~2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/7zip-bin-win/-/7zip-bin-win-2.1.1.tgz#8acfc28bb34e53a9476b46ae85a97418e6035c20"
+"7zip-bin-win@~2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/7zip-bin-win/-/7zip-bin-win-2.2.0.tgz#0b81c43e911100f3ece2ebac4f414ca95a572d5b"
 
-"7zip-bin@^2.4.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/7zip-bin/-/7zip-bin-2.4.1.tgz#88cf99736d35b104dab1d430c4edd1d51e58aade"
+"7zip-bin@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/7zip-bin/-/7zip-bin-3.1.0.tgz#70814c6b6d44fef8b74be6fc64d3977a2eff59a5"
   optionalDependencies:
     "7zip-bin-linux" "~1.3.1"
     "7zip-bin-mac" "~1.0.1"
-    "7zip-bin-win" "~2.1.1"
-
-"7zip-bin@~3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/7zip-bin/-/7zip-bin-3.0.0.tgz#17416dc542f41511b26a9667b92847d75ef150fe"
+    "7zip-bin-win" "~2.2.0"
 
 "7zip@0.0.6":
   version "0.0.6"
@@ -481,7 +477,7 @@ ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0, ajv@^5.5.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
-ajv@^6.1.0:
+ajv@^6.1.0, ajv@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.1.1.tgz#978d597fbc2b7d0e5a5c3ddeb149a682f2abfa0e"
   dependencies:
@@ -563,6 +559,26 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+app-builder-bin-linux@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/app-builder-bin-linux/-/app-builder-bin-linux-1.3.1.tgz#4e1bb0f0e7c7b15ed134193edb1797a1fc18a40c"
+
+app-builder-bin-mac@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/app-builder-bin-mac/-/app-builder-bin-mac-1.3.1.tgz#329357417ea0919adf094855404f229c5ff5f12f"
+
+app-builder-bin-win@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/app-builder-bin-win/-/app-builder-bin-win-1.3.1.tgz#a819d0ba9bb3831d69ab43b744a2794686bfc547"
+
+app-builder-bin@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/app-builder-bin/-/app-builder-bin-1.3.1.tgz#ba24cb6778c56ba925f282be42aa5dcccc533201"
+  optionalDependencies:
+    app-builder-bin-linux "1.3.1"
+    app-builder-bin-mac "1.3.1"
+    app-builder-bin-win "1.3.1"
+
 app-root-path@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.0.1.tgz#cd62dcf8e4fd5a417efc664d2e5b10653c651b46"
@@ -673,13 +689,6 @@ asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
 
-asar-integrity@0.2.4:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/asar-integrity/-/asar-integrity-0.2.4.tgz#b7867c9720e08c461d12bc42f005c239af701733"
-  dependencies:
-    bluebird-lst "^1.0.5"
-    fs-extra-p "^4.5.0"
-
 asn1.js@^4.0.0:
   version "4.9.2"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.2.tgz#8117ef4f7ed87cd8f89044b5bff97ac243a16c9a"
@@ -2102,16 +2111,7 @@ buffers@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/buffers/-/buffers-0.1.1.tgz#b24579c3bed4d6d396aeee6d9a8ae7f5482ab7bb"
 
-builder-util-runtime@4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/builder-util-runtime/-/builder-util-runtime-4.0.4.tgz#c92c352097006a07f3324ea200fa815440cba198"
-  dependencies:
-    bluebird-lst "^1.0.5"
-    debug "^3.1.0"
-    fs-extra-p "^4.5.0"
-    sax "^1.2.4"
-
-builder-util-runtime@^4.0.4, builder-util-runtime@^4.0.5:
+builder-util-runtime@4.0.5, builder-util-runtime@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/builder-util-runtime/-/builder-util-runtime-4.0.5.tgz#5340cf9886b9283ea6e5b20dc09b5e3e461aef62"
   dependencies:
@@ -2129,37 +2129,17 @@ builder-util-runtime@~4.0.3:
     fs-extra-p "^4.5.0"
     sax "^1.2.4"
 
-builder-util@4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/builder-util/-/builder-util-4.2.2.tgz#366b2bc32324bfe5565a7e4f13f86238fef5e92b"
-  dependencies:
-    "7zip-bin" "^2.4.1"
-    bluebird-lst "^1.0.5"
-    builder-util-runtime "^4.0.4"
-    chalk "^2.3.0"
-    debug "^3.1.0"
-    fs-extra-p "^4.5.0"
-    ini "^1.3.5"
-    is-ci "^1.1.0"
-    js-yaml "^3.10.0"
-    lazy-val "^1.0.3"
-    semver "^5.5.0"
-    source-map-support "^0.5.3"
-    stat-mode "^0.2.2"
-    temp-file "^3.1.1"
-    tunnel-agent "^0.6.0"
-
-builder-util@^4.2.2:
-  version "4.2.5"
-  resolved "https://registry.yarnpkg.com/builder-util/-/builder-util-4.2.5.tgz#babc190e2f2c3681497632b5cc274f1543aa9264"
+builder-util@5.2.0, builder-util@^5.1.0, builder-util@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/builder-util/-/builder-util-5.2.0.tgz#dd5631b1611e60b35c9fa87ab5a266175db0b0a7"
   dependencies:
-    "7zip-bin" "~3.0.0"
+    "7zip-bin" "~3.1.0"
+    app-builder-bin "1.3.1"
     bluebird-lst "^1.0.5"
     builder-util-runtime "^4.0.5"
     chalk "^2.3.0"
     debug "^3.1.0"
     fs-extra-p "^4.5.0"
-    ini "^1.3.5"
     is-ci "^1.1.0"
     js-yaml "^3.10.0"
     lazy-val "^1.0.3"
@@ -2167,7 +2147,6 @@ builder-util@^4.2.2:
     source-map-support "^0.5.3"
     stat-mode "^0.2.2"
     temp-file "^3.1.1"
-    tunnel-agent "^0.6.0"
 
 builtin-modules@^1.0.0, builtin-modules@^1.1.1:
   version "1.1.1"
@@ -3220,16 +3199,18 @@ dijkstrajs@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b"
 
-dmg-builder@3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/dmg-builder/-/dmg-builder-3.1.4.tgz#57c53a2b5a1e28526a837430b6ecc7110cadcf63"
+dmg-builder@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/dmg-builder/-/dmg-builder-4.0.2.tgz#0ca90a6fbd8e92dbcc15889f8950d6080534af5a"
   dependencies:
     bluebird-lst "^1.0.5"
-    builder-util "^4.2.2"
+    builder-util "^5.2.0"
+    electron-builder-lib "~20.0.4"
     fs-extra-p "^4.5.0"
     iconv-lite "^0.4.19"
     js-yaml "^3.10.0"
     parse-color "^1.0.0"
+    sanitize-filename "^1.6.1"
 
 dns-equal@^1.0.0:
   version "1.0.0"
@@ -3375,22 +3356,21 @@ ejs@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a"
 
-electron-builder-lib@19.56.0:
-  version "19.56.0"
-  resolved "https://registry.yarnpkg.com/electron-builder-lib/-/electron-builder-lib-19.56.0.tgz#26a6754f89c3e732afbd97868f1fc3f666884149"
+electron-builder-lib@20.0.4, electron-builder-lib@~20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/electron-builder-lib/-/electron-builder-lib-20.0.4.tgz#8f27786f03153591b9d051c2bae81d02a3365752"
   dependencies:
-    "7zip-bin" "^2.4.1"
-    asar-integrity "0.2.4"
+    "7zip-bin" "~3.1.0"
+    app-builder-bin "1.3.1"
     async-exit-hook "^2.0.1"
     bluebird-lst "^1.0.5"
-    builder-util "4.2.2"
-    builder-util-runtime "4.0.4"
+    builder-util "5.2.0"
+    builder-util-runtime "4.0.5"
     chromium-pickle-js "^0.2.0"
     debug "^3.1.0"
-    dmg-builder "3.1.4"
     ejs "^2.5.7"
     electron-osx-sign "0.4.8"
-    electron-publish "19.56.0"
+    electron-publish "20.0.2"
     fs-extra-p "^4.5.0"
     hosted-git-info "^2.5.0"
     is-ci "^1.1.0"
@@ -3400,25 +3380,26 @@ electron-builder-lib@19.56.0:
     minimatch "^3.0.4"
     normalize-package-data "^2.4.0"
     plist "^2.1.0"
-    read-config-file "2.1.1"
+    read-config-file "3.0.0"
     sanitize-filename "^1.6.1"
     semver "^5.5.0"
     temp-file "^3.1.1"
 
-electron-builder@^19.56.0:
-  version "19.56.0"
-  resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-19.56.0.tgz#ad5a64c73ce50b561fc8e2bcf9309de0f6ad4e5e"
+electron-builder@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-20.0.4.tgz#6c14baba7807c4053a346cefbe2f505d4cf48a15"
   dependencies:
     bluebird-lst "^1.0.5"
-    builder-util "4.2.2"
-    builder-util-runtime "4.0.4"
+    builder-util "5.2.0"
+    builder-util-runtime "4.0.5"
     chalk "^2.3.0"
-    electron-builder-lib "19.56.0"
+    dmg-builder "4.0.2"
+    electron-builder-lib "20.0.4"
     electron-download-tf "4.3.4"
     fs-extra-p "^4.5.0"
     is-ci "^1.1.0"
     lazy-val "^1.0.3"
-    read-config-file "2.1.1"
+    read-config-file "3.0.0"
     sanitize-filename "^1.6.1"
     update-notifier "^2.3.0"
     yargs "^11.0.0"
@@ -3475,13 +3456,13 @@ electron-osx-sign@0.4.8:
     minimist "^1.2.0"
     plist "^2.1.0"
 
-electron-publish@19.56.0:
-  version "19.56.0"
-  resolved "https://registry.yarnpkg.com/electron-publish/-/electron-publish-19.56.0.tgz#1a0446e69b3085a905c0abdf16125c1c97d108d9"
+electron-publish@20.0.2:
+  version "20.0.2"
+  resolved "https://registry.yarnpkg.com/electron-publish/-/electron-publish-20.0.2.tgz#6ac7ca3f55d01867c1e4159bff231583d9102000"
   dependencies:
     bluebird-lst "^1.0.5"
-    builder-util "^4.2.2"
-    builder-util-runtime "^4.0.4"
+    builder-util "^5.1.0"
+    builder-util-runtime "^4.0.5"
     chalk "^2.3.0"
     fs-extra-p "^4.5.0"
     mime "^2.2.0"
@@ -5083,7 +5064,7 @@ inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
 
-ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
+ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
@@ -7764,7 +7745,21 @@ reactcss@^1.2.0:
   dependencies:
     lodash "^4.0.1"
 
-read-config-file@2.1.1, read-config-file@^2.1.1:
+read-config-file@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-config-file/-/read-config-file-3.0.0.tgz#771def5184a7f76abaf6b2c82f20cb983775b8ea"
+  dependencies:
+    ajv "^6.1.1"
+    ajv-keywords "^3.1.0"
+    bluebird-lst "^1.0.5"
+    dotenv "^5.0.0"
+    dotenv-expand "^4.0.1"
+    fs-extra-p "^4.5.0"
+    js-yaml "^3.10.0"
+    json5 "^0.5.1"
+    lazy-val "^1.0.3"
+
+read-config-file@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/read-config-file/-/read-config-file-2.1.1.tgz#bd6c2b93e97a82a35f71a3c9eb43161e16692054"
   dependencies: