Electron upgrade to 8.3.0 and related packages to latest versions, resolves #107

This commit is contained in:
Manoj Vivek 2020-05-24 15:26:24 +05:30
parent 277216899a
commit 1e6d539109
12 changed files with 7335 additions and 5762 deletions

View file

@ -1,17 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Security-Policy" content="default-src * data: blob: 'unsafe-inline' 'unsafe-eval';"> <meta
http-equiv="Content-Security-Policy"
content="default-src * data: blob: 'unsafe-inline' 'unsafe-eval';"
/>
<link <link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap" href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Responsively</title> <title>Responsively</title>
<script src='../node_modules/electron-cookies/dist/electron-cookies.js'></script> <script src="../node_modules/electron-cookies/dist/electron-cookies.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// prettier-ignore // prettier-ignore
window.heap = window.heap || [], heap.load = function (e, t) { window.heap.appid = e, window.heap.config = t = t || {}; var r = t.forceSSL || "https:" === document.location.protocol, a = document.createElement("script"); a.type = "text/javascript", a.async = !0, a.src = (r ? "https:" : "http:") + "//cdn.heapanalytics.com/js/heap-" + e + ".js"; var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(a, n); for (var o = function (e) { return function () { heap.push([e].concat(Array.prototype.slice.call(arguments, 0))) } }, p = ["addEventProperties", "addUserProperties", "clearEventProperties", "identify", "resetIdentity", "removeEventProperty", "setEventProperties", "track", "unsetEventProperty"], c = 0; c < p.length; c++)heap[p[c]] = o(p[c]) }; window.heap = window.heap || [], heap.load = function (e, t) { window.heap.appid = e, window.heap.config = t = t || {}; var r = t.forceSSL || "https:" === document.location.protocol, a = document.createElement("script"); a.type = "text/javascript", a.async = !0, a.src = "https://cdn.heapanalytics.com/js/heap-" + e + ".js"; var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(a, n); for (var o = function (e) { return function () { heap.push([e].concat(Array.prototype.slice.call(arguments, 0))) } }, p = ["addEventProperties", "addUserProperties", "clearEventProperties", "identify", "resetIdentity", "removeEventProperty", "setEventProperties", "track", "unsetEventProperty"], c = 0; c < p.length; c++)heap[p[c]] = o(p[c]) };
heap.load('3453744655'); heap.load('3453744655');
</script> </script>
<script> <script>

View file

@ -35,7 +35,7 @@ export default function DevicesPreviewer(props) {
return null; return null;
} }
return ( return (
<Tab tabId={device.id}> <Tab tabId={device.id} key={device.id}>
{getDeviceIcon(device.type)} {getDeviceIcon(device.type)}
{device.name} {device.name}
</Tab> </Tab>

View file

@ -20,7 +20,6 @@ import {
const LeftIconsPane = props => { const LeftIconsPane = props => {
const headwayRef = useRef(); const headwayRef = useRef();
const iconProps = { const iconProps = {
color: iconsColor,
style: {fontSize: 30}, style: {fontSize: 30},
height: 30, height: 30,
width: 30, width: 30,

View file

@ -47,7 +47,7 @@ export default function QuickFilterDevices(props) {
})} })}
onClick={() => props.toggleFilter(FILTER_FIELDS.OS, OS.android)} onClick={() => props.toggleFilter(FILTER_FIELDS.OS, OS.android)}
> >
<AndroidIcon color={iconsColor} style={{fontSize: 40}} /> <AndroidIcon style={{fontSize: 40}} />
</div> </div>
<div <div
className={cx(styles.optionIcon, commonStyles.icons, { className={cx(styles.optionIcon, commonStyles.icons, {
@ -73,7 +73,7 @@ export default function QuickFilterDevices(props) {
})} })}
onClick={() => props.toggleFilter(FILTER_FIELDS.OS, OS.pc)} onClick={() => props.toggleFilter(FILTER_FIELDS.OS, OS.pc)}
> >
<DesktopIcon color={iconsColor} style={{fontSize: 40}} /> <DesktopIcon style={{fontSize: 40}} />
</div> </div>
</div> </div>
</div> </div>
@ -93,7 +93,7 @@ export default function QuickFilterDevices(props) {
props.toggleFilter(FILTER_FIELDS.DEVICE_TYPE, DEVICE_TYPE.phone) props.toggleFilter(FILTER_FIELDS.DEVICE_TYPE, DEVICE_TYPE.phone)
} }
> >
<MobileIcon color={iconsColor} style={{fontSize: 35}} /> <MobileIcon style={{fontSize: 35}} />
</div> </div>
<div <div
className={cx(styles.optionIcon, commonStyles.icons, { className={cx(styles.optionIcon, commonStyles.icons, {
@ -111,7 +111,7 @@ export default function QuickFilterDevices(props) {
) )
} }
> >
<TabletIcon color={iconsColor} style={{fontSize: 35}} /> <TabletIcon style={{fontSize: 35}} />
</div> </div>
<div <div
className={cx(styles.optionIcon, commonStyles.icons, { className={cx(styles.optionIcon, commonStyles.icons, {
@ -129,7 +129,7 @@ export default function QuickFilterDevices(props) {
) )
} }
> >
<DesktopIcon color={iconsColor} style={{fontSize: 40}} /> <DesktopIcon style={{fontSize: 40}} />
</div> </div>
</div> </div>
</div> </div>

View file

@ -14,7 +14,7 @@ export default function UserPreference(props) {
return ( return (
<div className={cx(commonStyles.sidebarContentSection)}> <div className={cx(commonStyles.sidebarContentSection)}>
<div className={cx(commonStyles.sidebarContentSectionTitleBar)}> <div className={cx(commonStyles.sidebarContentSectionTitleBar)}>
<SettingsIcon color="white" width={26} margin={2} /> User Preferences <SettingsIcon width={26} margin={2} /> User Preferences
</div> </div>
<div className={cx(commonStyles.sidebarContentSectionContainer)}> <div className={cx(commonStyles.sidebarContentSectionContainer)}>
<div> <div>

View file

@ -172,6 +172,14 @@ class WebView extends Component {
}); });
} }
getWebContents() {
return this.getWebContentForId(this.webviewRef.current.getWebContentsId());
}
getWebContentForId(id) {
return remote.webContents.fromId(id);
}
componentWillUnmount() { componentWillUnmount() {
this.subscriptions.forEach(pubsub.unsubscribe); this.subscriptions.forEach(pubsub.unsubscribe);
} }
@ -179,7 +187,7 @@ class WebView extends Component {
initDeviceEmulationParams = () => { initDeviceEmulationParams = () => {
try { try {
return; return;
this.webviewRef.current.getWebContents().enableDeviceEmulation({ this.getWebContents().enableDeviceEmulation({
screenPosition: this.isMobile ? 'mobile' : 'desktop', screenPosition: this.isMobile ? 'mobile' : 'desktop',
screenSize: { screenSize: {
width: this.props.device.width, width: this.props.device.width,
@ -264,12 +272,10 @@ class WebView extends Component {
} = this.webviewRef.current.getBoundingClientRect(); } = this.webviewRef.current.getBoundingClientRect();
const {x: deviceX, y: deviceY} = message; const {x: deviceX, y: deviceY} = message;
const zoomFactor = this.props.browser.zoomLevel; const zoomFactor = this.props.browser.zoomLevel;
this.webviewRef.current this.getWebContents().inspectElement(
.getWebContents() Math.round(webViewX + deviceX * zoomFactor),
.inspectElement( Math.round(webViewY + deviceY * zoomFactor)
Math.round(webViewX + deviceX * zoomFactor), );
Math.round(webViewY + deviceY * zoomFactor)
);
}; };
processEnableInspectorEvent = () => { processEnableInspectorEvent = () => {
@ -320,7 +326,7 @@ class WebView extends Component {
}; };
initEventTriggers = webview => { initEventTriggers = webview => {
webview.getWebContents().executeJavaScript(` this.getWebContentForId(webview.getWebContentsId()).executeJavaScript(`
responsivelyApp.deviceId = ${this.props.device.id}; responsivelyApp.deviceId = ${this.props.device.id};
document.body.addEventListener('mouseleave', () => { document.body.addEventListener('mouseleave', () => {
window.responsivelyApp.mouseOn = false; window.responsivelyApp.mouseOn = false;
@ -393,8 +399,8 @@ class WebView extends Component {
this.webviewRef.current this.webviewRef.current
.getWebContents() .getWebContents()
.setDevToolsWebContents(devtools.webContents); .setDevToolsWebContents(devtools.webContents);
this.webviewRef.current.getWebContents().openDevTools({mode: 'detach'});*/ this.getWebContents().openDevTools({mode: 'detach'});*/
this.webviewRef.current.getWebContents().toggleDevTools(); this.getWebContents().toggleDevTools();
}; };
_flipOrientation = () => { _flipOrientation = () => {

View file

@ -1,6 +1,6 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import {shell} from 'electron'; import {shell, remote} from 'electron';
import {toast} from 'react-toastify'; import {toast} from 'react-toastify';
import NotificationMessage from '../NotificationMessage'; import NotificationMessage from '../NotificationMessage';
import _mergeImg from 'merge-img'; import _mergeImg from 'merge-img';
@ -160,7 +160,9 @@ const _delay = ms =>
}); });
const _takeSnapshot = (webView, options) => { const _takeSnapshot = (webView, options) => {
return webView.getWebContents().capturePage(options); return remote.webContents
.fromId(webView.getWebContentsId())
.capturePage(options);
}; };
function _getScreenshotFileName( function _getScreenshotFileName(

View file

@ -18,6 +18,11 @@ import log from 'electron-log';
import MenuBuilder from './menu'; import MenuBuilder from './menu';
import {USER_PREFERENCES} from './constants/settingKeys'; import {USER_PREFERENCES} from './constants/settingKeys';
import * as Sentry from '@sentry/electron'; import * as Sentry from '@sentry/electron';
import installExtension, {
REACT_DEVELOPER_TOOLS,
REDUX_DEVTOOLS,
} from 'electron-devtools-installer';
import devtron from 'devtron';
const path = require('path'); const path = require('path');
@ -52,13 +57,14 @@ if (
} }
const installExtensions = async () => { const installExtensions = async () => {
const installer = require('electron-devtools-installer');
const forceDownload = !!process.env.UPGRADE_EXTENSIONS; const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS']; const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
try {
return Promise.all( const statuses = await installExtension(extensions);
extensions.map(name => installer.default(installer[name], forceDownload)) devtron.install();
).catch(console.log); } catch (err) {
console.log('Error installing extensions', err);
}
}; };
/** /**
@ -113,6 +119,7 @@ const createWindow = async () => {
nodeIntegration: true, nodeIntegration: true,
nodeIntegrationInWorker: true, nodeIntegrationInWorker: true,
webviewTag: true, webviewTag: true,
enableRemoteModule: true,
}, },
titleBarStyle: 'hidden', titleBarStyle: 'hidden',
icon: iconPath, icon: iconPath,

View file

@ -10,7 +10,6 @@ import AndroidIcon from '@material-ui/icons/Android';
export const getDeviceIcon = deviceType => { export const getDeviceIcon = deviceType => {
const iconProps = { const iconProps = {
color: iconsColor,
style: {fontSize: 'inherit', paddingRight: 2}, style: {fontSize: 'inherit', paddingRight: 2},
}; };
switch (deviceType) { switch (deviceType) {

View file

@ -29,6 +29,7 @@ module.exports = api => {
targets: { targets: {
electron: require('electron/package.json').version, electron: require('electron/package.json').version,
}, },
corejs: '2',
useBuiltIns: 'usage', useBuiltIns: 'usage',
}, },
], ],

View file

@ -26,7 +26,7 @@
"publish-mac": "yarn build && electron-builder build --mac --publish always", "publish-mac": "yarn build && electron-builder build --mac --publish always",
"package-win": "yarn build && electron-builder build --win --x64", "package-win": "yarn build && electron-builder build --win --x64",
"publish-win": "yarn build && electron-builder build --win --x64 --publish always", "publish-win": "yarn build && electron-builder build --win --x64 --publish always",
"postinstall": "electron-builder install-app-deps package.json && yarn build-dll && opencollective-postinstall", "postinstall": "electron-builder install-app-deps && yarn build-dll",
"postlint-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{*{js,jsx,json},babelrc,eslintrc,prettierrc,stylelintrc}'", "postlint-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{*{js,jsx,json},babelrc,eslintrc,prettierrc,stylelintrc}'",
"postlint-styles-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{css,scss}'", "postlint-styles-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{css,scss}'",
"precommit": "#lint-staged", "precommit": "#lint-staged",
@ -191,9 +191,9 @@
"cross-spawn": "^6.0.5", "cross-spawn": "^6.0.5",
"css-loader": "^1.0.1", "css-loader": "^1.0.1",
"detect-port": "^1.3.0", "detect-port": "^1.3.0",
"electron": "^6.0.1", "electron": "^8.3.0",
"electron-builder": "^22.2.0", "electron-builder": "^22.6.1",
"electron-devtools-installer": "^2.2.4", "electron-devtools-installer": "^3.0.0",
"enzyme": "^3.7.0", "enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0", "enzyme-adapter-react-16": "^1.7.0",
"enzyme-to-json": "^3.3.4", "enzyme-to-json": "^3.3.4",
@ -252,21 +252,21 @@
"@material-ui/core": "^4.3.2", "@material-ui/core": "^4.3.2",
"@material-ui/icons": "^4.2.1", "@material-ui/icons": "^4.2.1",
"@material-ui/lab": "^4.0.0-alpha.26", "@material-ui/lab": "^4.0.0-alpha.26",
"@sentry/electron": "^0.17.3", "@sentry/electron": "^1.3.0",
"bluebird": "^3.5.5", "bluebird": "^3.5.5",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"core-js": "2",
"devtron": "^1.4.0", "devtron": "^1.4.0",
"dotenv": "^8.1.0", "dotenv": "^8.1.0",
"electron-cookies": "heap/electron-cookies", "electron-cookies": "heap/electron-cookies",
"electron-debug": "^3.0.1", "electron-debug": "^3.1.0",
"electron-log": "^3.0.7", "electron-log": "^4.2.0",
"electron-notarize": "^0.2.1", "electron-notarize": "^0.3.0",
"electron-settings": "^3.2.0", "electron-settings": "^3.2.0",
"electron-updater": "^4.1.2", "electron-updater": "^4.3.1",
"flwww": "^2.0.10", "flwww": "^2.0.10",
"history": "^4.7.2", "history": "^4.7.2",
"isomorphic-ws": "^4.0.1", "jimp": "^0.12.1",
"jimp": "^0.8.4",
"merge-img": "^2.1.3", "merge-img": "^2.1.3",
"promise-worker": "^2.0.1", "promise-worker": "^2.0.1",
"pubsub.js": "^1.5.2", "pubsub.js": "^1.5.2",
@ -277,22 +277,20 @@
"react-redux": "^7.1.0", "react-redux": "^7.1.0",
"react-router": "^5.0.1", "react-router": "^5.0.1",
"react-router-dom": "^5.0.1", "react-router-dom": "^5.0.1",
"react-select": "^3.0.4", "react-select": "^3.1.0",
"react-switch": "^5.0.1", "react-switch": "^5.0.1",
"react-tabs": "^3.0.0", "react-tabs": "^3.0.0",
"react-toastify": "^5.3.2", "react-toastify": "^5.3.2",
"redux": "^4.0.4", "redux": "^4.0.4",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
"socket.io-client": "^2.2.0", "source-map-support": "^0.5.9"
"source-map-support": "^0.5.9",
"ws": "^7.1.2"
}, },
"devEngines": { "devEngines": {
"node": ">=7.x", "node": ">=7.x",
"npm": ">=4.x", "npm": ">=4.x",
"yarn": ">=0.21.3" "yarn": ">=0.21.3"
}, },
"browserslist": "electron 1.6", "browserslist": "electron 9.0.0",
"resolutions": { "resolutions": {
"node-gyp": "^6.1.0", "node-gyp": "^6.1.0",
"node-pre-gyp": "^0.14.0" "node-pre-gyp": "^0.14.0"

File diff suppressed because it is too large Load diff