Merge pull request bitfinexcom#424 from ZIMkaRU/feature/improve-app-i…

…nit-layout-launch-flow

Improve app init layout launch flow

package.json

@@ -45,7 +45,7 @@
     "concurrently": "9.0.1",
     "cross-env": "7.0.3",
     "dotenv": "16.3.1",
-    "electron": "27.3.5",
+    "electron": "27.3.11",
     "electron-builder": "24.10.0",
     "mocha": "10.2.0",
     "standard": "17.1.0",

src/initialize-app.js

@@ -14,9 +14,7 @@ const GeneralIpcChannelHandlers = require(
 )
 const triggerSyncAfterUpdates = require('./trigger-sync-after-updates')
 const triggerElectronLoad = require('./trigger-electron-load')
-const wins = require('./window-creators/windows')
 const runServer = require('./run-server')
-const appStates = require('./app-states')
 const {
   createMainWindow,
   createErrorWindow
@@ -207,13 +205,6 @@ module.exports = async () => {
     manageWorkerMessages(ipc)
     await isServerReadyPromise
     await triggerSyncAfterUpdates()
-
-    // Legacy fix related to reprodducing the same behavior on all OS,
-    // waiting for checks that it was resolved in the last electron ver
-    if (appStates.isMainWinMaximized) {
-      wins.mainWindow.maximize()
-    }
-
     await hideLoadingWindow({ isRequiredToShowMainWin: true })
     await triggerElectronLoad(portsMap)
     await checkForUpdatesAndNotify()

src/window-creators/change-loading-win-visibility-state.js

@@ -1,13 +1,17 @@
 'use strict'
 
-const { BrowserWindow, ipcMain } = require('electron')
+const { BrowserWindow } = require('electron')
 
 const wins = require('./windows')
+const appStates = require('../app-states')
 const {
   hideWindow,
   showWindow,
   centerWindow
 } = require('../helpers/manage-window')
+const GeneralIpcChannelHandlers = require(
+  './main-renderer-ipc-bridge/general-ipc-channel-handlers'
+)
 
 let intervalMarker
 
@@ -34,11 +38,20 @@ const _setParentWindow = (noParent) => {
 
   const win = BrowserWindow.getFocusedWindow()
 
+  if (noParent) {
+    wins.loadingWindow.setParentWindow(null)
+
+    return
+  }
   if (
-    noParent ||
-    Object.values(wins).every((w) => w !== win)
+    Object.values(wins).every((w) => w !== win) ||
+    win === wins.loadingWindow
   ) {
-    wins.loadingWindow.setParentWindow(null)
+    const mainWindow = !wins.mainWindow?.isDestroyed()
+      ? wins.mainWindow
+      : null
+
+    wins.loadingWindow.setParentWindow(mainWindow)
 
     return
   }
@@ -110,48 +123,41 @@ const _stopProgressLoader = (
   win.setProgressBar(-0.1)
 }
 
-const _setLoadingDescription = (win, description) => {
-  return new Promise((resolve) => {
-    try {
-      if (
-        !win ||
-        typeof win !== 'object' ||
-        win.isDestroyed() ||
-        typeof description !== 'string'
-      ) {
-        resolve()
-
-        return
-      }
-
-      ipcMain.once('loading:description-ready', (event, err) => {
-        if (err) {
-          console.error(err)
-        }
-
-        resolve()
-      })
-
-      win.webContents.send(
-        'loading:description',
-        description
-      )
-    } catch (err) {
-      console.error(err)
-
-      resolve()
+const _setLoadingDescription = async (win, description) => {
+  try {
+    if (
+      !win ||
+      typeof win !== 'object' ||
+      win.isDestroyed() ||
+      typeof description !== 'string'
+    ) {
+      return
+    }
+
+    const loadingDescReadyPromise = GeneralIpcChannelHandlers
+      .onLoadingDescriptionReady()
+
+    GeneralIpcChannelHandlers
+      .sendLoadingDescription(win, { description })
+
+    const loadingRes = await loadingDescReadyPromise
+
+    if (loadingRes?.err) {
+      console.error(loadingRes?.err)
     }
-  })
+  } catch (err) {
+    console.error(err)
+  }
 }
 
-const showLoadingWindow = async (opts = {}) => {
+const showLoadingWindow = async (opts) => {
   const {
     description = '',
     isRequiredToCloseAllWins = false,
     isNotRunProgressLoaderRequired = false,
     isIndeterminateMode = false,
     noParent = false
-  } = { ...opts }
+  } = opts ?? {}
 
   if (
     !wins.loadingWindow ||
@@ -185,17 +191,10 @@ const showLoadingWindow = async (opts = {}) => {
   await _closeAllWindows()
 }
 
-const hideLoadingWindow = async (opts = {}) => {
+const hideLoadingWindow = async (opts) => {
   const {
     isRequiredToShowMainWin = false
-  } = { ...opts }
-
-  if (isRequiredToShowMainWin) {
-    await showWindow(
-      wins.mainWindow,
-      { shouldWinBeFocused: true }
-    )
-  }
+  } = opts ?? {}
 
   // need to empty description
   await _setLoadingDescription(
@@ -204,6 +203,19 @@ const hideLoadingWindow = async (opts = {}) => {
   )
   _stopProgressLoader()
 
+  if (isRequiredToShowMainWin) {
+    await showWindow(
+      wins.mainWindow,
+      { shouldWinBeFocused: true }
+    )
+
+    // Legacy fix related to reprodducing the same behavior on all OS,
+    // waiting for checks that it was resolved in the last electron ver
+    if (appStates.isMainWinMaximized) {
+      wins.mainWindow.maximize()
+    }
+  }
+
   return hideWindow(
     wins.loadingWindow,
     { shouldWinBeBlurred: true }

src/window-creators/index.js

@@ -96,7 +96,6 @@ const _createWindow = async (
     height: defaultHeight
   } = workAreaSize
   const isMainWindow = winName === 'mainWindow'
-  const isLoadingWindow = winName === 'loadingWindow'
   const {
     width = defaultWidth,
     height = defaultHeight,
@@ -173,10 +172,7 @@ const _createWindow = async (
     centerWindow(wins[winName])
   }
 
-  await showWindow(
-    wins[winName],
-    { shouldWinBeShownInactive: isLoadingWindow }
-  )
+  await showWindow(wins[winName])
 
   return res
 }
@@ -278,24 +274,19 @@ const createLoadingWindow = async () => {
   if (
     wins.loadingWindow &&
     typeof wins.loadingWindow === 'object' &&
-    !wins.loadingWindow.isDestroyed() &&
-    !wins.loadingWindow.isVisible()
+    !wins.loadingWindow.isDestroyed()
   ) {
     await showLoadingWindow()
 
-    return {}
+    return { win: wins.loadingWindow }
   }
 
   const winProps = await _createChildWindow(
     pathToLayoutAppInit,
     'loadingWindow',
     {
       width: 350,
-      height: 350,
-      webPreferences: {
-        nodeIntegration: true,
-        contextIsolation: false
-      }
+      height: 350
     }
   )
 

src/window-creators/layouts/app-init.html

@@ -217,28 +217,27 @@
       }
     }, 2500)
 
-    const { ipcRenderer } = require('electron')
-
-    ipcRenderer.on('loading:description', (event, description) => {
+    window.bfxReportElectronApi?.onLoadingDescription((args) => {
       try {
-        if (typeof description !== 'string') {
+        if (typeof args?.description !== 'string') {
+          window.bfxReportElectronApi?.sendLoadingDescriptionReady()
+
           return
         }
 
-        descriptionElem.innerHTML = description
+        descriptionElem.innerHTML = args.description
 
-        descriptionElem.style.display = description
+        descriptionElem.style.display = args.description
           ? 'block'
           : 'none'
 
-        ipcRenderer.send('loading:description-ready')
+        window.bfxReportElectronApi?.sendLoadingDescriptionReady()
       } catch (err) {
         console.error(err)
 
-        ipcRenderer.send('loading:description-ready', err)
+        window.bfxReportElectronApi?.sendLoadingDescriptionReady({ err })
       }
     })
   })
 </script>
-
 </html>

src/window-creators/main-renderer-ipc-bridge/general-ipc-channel-handlers.js

@@ -8,6 +8,14 @@ class GeneralIpcChannelHandlers extends IpcChannelHandlers {
   async exitHandler (event, args) {
     return app.exit(args?.code ?? 0)
   }
+
+  static onLoadingDescriptionReady (cb) {
+    return this.handleListener(this.onLoadingDescriptionReady, cb)
+  }
+
+  static sendLoadingDescription (win, args) {
+    return this.sendToRenderer(this.sendLoadingDescription, win, args)
+  }
 }
 
 module.exports = GeneralIpcChannelHandlers

src/window-creators/main-renderer-ipc-bridge/ipc.channel.handlers.js

@@ -3,9 +3,9 @@
 const { ipcMain } = require('electron')
 
 class IpcChannelHandlers {
-  constructor (channelName) {
-    this.channelName = channelName ?? 'general'
+  static channelName = 'general'
 
+  constructor () {
     this.#setup()
   }
 
@@ -25,7 +25,7 @@ class IpcChannelHandlers {
       }
 
       const methodName = this.#getMethodName(handlerName)
-      const eventName = this.#getEventName(methodName)
+      const eventName = this.constructor.getEventName(methodName)
 
       ipcMain.handle(eventName, (event, args) => {
         return this[handlerName](event, args)
@@ -37,9 +37,33 @@ class IpcChannelHandlers {
     return handlerName.replace(/Handler$/, '')
   }
 
-  #getEventName (method) {
+  static getEventName (method) {
     return `${this.channelName}:${method}`
   }
+
+  static handleListener (method, cb) {
+    const methodName = typeof method === 'function'
+      ? method.name.replace(/^on/, 'send')
+      : method
+    const eventName = this.getEventName(methodName)
+
+    if (typeof cb === 'function') {
+      return ipcMain.on(eventName, (e, args) => cb(e, args))
+    }
+
+    return new Promise((resolve) => {
+      ipcMain.once(eventName, (e, args) => resolve({ ...args, event: e }))
+    })
+  }
+
+  static sendToRenderer (method, win, args) {
+    const methodName = typeof method === 'function'
+      ? method.name.replace(/^send/, 'on')
+      : method
+    const eventName = this.getEventName(methodName)
+
+    return win.webContents.send(eventName, args)
+  }
 }
 
 module.exports = IpcChannelHandlers