Fix/performance issues with FOUC (#214)

Fix/performance issues with FOUC #191

app/src/components/mainWindow/mainWindow.js

@@ -6,7 +6,7 @@ import helpers from './../../helpers/helpers';
 import createMenu from './../menu/menu';
 import initContextMenu from './../contextMenu/contextMenu';
 
-const {isOSX, linkIsInternal, getCssToInject} = helpers;
+const {isOSX, linkIsInternal, getCssToInject, shouldInjectCss} = helpers;
 
 const ZOOM_INTERVAL = 0.1;
 
@@ -129,21 +129,9 @@ function createMainWindow(options, onAppQuit, setDockBadge) {
         mainWindow.webContents.setUserAgent(options.userAgent);
     }
 
-    const injectCss = () => {
-        mainWindow.webContents.insertCSS(getCssToInject());
-    };
-
+    maybeInjectCss(mainWindow);
     mainWindow.webContents.on('did-finish-load', () => {
         mainWindow.webContents.send('params', JSON.stringify(options));
-        // remove the injection of css the moment the page is loaded
-        mainWindow.webContents.removeListener('did-get-response-details', injectCss);
-    });
-
-    // on every page navigation inject the css
-    mainWindow.webContents.on('did-start-loading', () => {
-        // we have to inject the css in did-get-response-details to prevent the fouc
-        // will run multiple times
-        mainWindow.webContents.on('did-get-response-details', injectCss);
     });
 
     if (options.counter) {
@@ -210,4 +198,28 @@ function maybeHideWindow(window, event, fastQuit) {
     // will close the window on other platforms
 }
 
+function maybeInjectCss(browserWindow) {
+    if (!shouldInjectCss()) {
+        return;
+    }
+
+    const cssToInject = getCssToInject();
+
+    const injectCss = () => {
+        browserWindow.webContents.insertCSS(cssToInject);
+    };
+
+    browserWindow.webContents.on('did-finish-load', () => {
+        // remove the injection of css the moment the page is loaded
+        browserWindow.webContents.removeListener('did-get-response-details', injectCss);
+    });
+
+    // on every page navigation inject the css
+    browserWindow.webContents.on('did-navigate', () => {
+        // we have to inject the css in did-get-response-details to prevent the fouc
+        // will run multiple times
+        browserWindow.webContents.on('did-get-response-details', injectCss);
+    });
+}
+
 export default createMainWindow;

app/src/helpers/helpers.js

@@ -23,18 +23,38 @@ function linkIsInternal(currentUrl, newUrl) {
     return currentDomain === newDomain;
 }
 
-function getCssToInject() {
-    const needToInject = fs.existsSync(INJECT_CSS_PATH);
-    if (!needToInject) {
-        return '';
+function shouldInjectCss() {
+    try {
+        fs.accessSync(INJECT_CSS_PATH, fs.F_OK);
+        return true;
+    } catch (e) {
+        return false;
     }
+}
+
+function getCssToInject() {
     return fs.readFileSync(INJECT_CSS_PATH).toString();
 }
 
+/**
+ * Helper method to print debug messages from the main process in the browser window
+ * @param {BrowserWindow} browserWindow
+ * @param message
+ */
+function debugLog(browserWindow, message) {
+    // need the timeout as it takes time for the preload javascript to be loaded in the window
+    setTimeout(() => {
+        browserWindow.webContents.send('debug', message);
+    }, 3000);
+    console.log(message);
+}
+
 export default {
     isOSX,
     isLinux,
     isWindows,
     linkIsInternal,
-    getCssToInject
+    getCssToInject,
+    debugLog,
+    shouldInjectCss
 };

app/src/static/preload.js

@@ -37,6 +37,10 @@ ipcRenderer.on('params', (event, message) => {
     console.log('nativefier.json', appArgs);
 });
 
+ipcRenderer.on('debug', (event, message) => {
+    console.log('debug:', message);
+});
+
 ipcRenderer.on('change-zoom', (event, message) => {
     webFrame.setZoomFactor(message);
 });