Upgrade to Electron 7 (#1543)

* Upgrade to Electron 7

* Fix E2E test issue with Electron 7

* Fix native theme event

* Remove runtime native theme detection

* Update Electron to v7.0.1

* Fix keytar exception

electron-builder.yml

@@ -19,6 +19,7 @@ files:
 - "!node_modules/vega-lite/build/vega-lite*.js.map"
 # Don't bundle build files
 - "!node_modules/@felixrieseberg/spellchecker/bin"
+- "!node_modules/@hfelix/spellchecker/bin"
 - "!node_modules/ced/bin"
 - "!node_modules/ced/vendor"
 - "!node_modules/cld/bin"
@@ -34,6 +35,7 @@ files:
 - "!node_modules/ced/build/vendor"
 # Don't bundle LGPL source files
 - "!node_modules/@felixrieseberg/spellchecker/vendor"
+- "!node_modules/@hfelix/spellchecker/vendor"
 extraFiles:
 - "LICENSE"
 - from: "resources/THIRD-PARTY-LICENSES.txt"

package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@hfelix/electron-localshortcut": "^3.1.1",
-    "@hfelix/electron-spellchecker": "^1.0.0-rc.1",
+    "@hfelix/electron-spellchecker": "^1.0.0-rc.3",
     "@octokit/rest": "^16.33.1",
     "arg": "^4.1.1",
     "axios": "^0.19.0",
@@ -65,7 +65,7 @@
     "joplin-turndown-plugin-gfm": "^1.0.11",
     "katex": "^0.11.1",
     "keyboard-layout": "^2.0.16",
-    "keytar": "^5.0.0-beta.3",
+    "keytar": "5.0.0-beta.4",
     "mermaid": "^8.4.0",
     "plist": "^3.0.1",
     "popper.js": "^1.16.0",
@@ -113,7 +113,7 @@
     "del": "^5.1.0",
     "devtron": "^1.4.0",
     "dotenv": "^8.2.0",
-    "electron": "^6.1.0",
+    "electron": "^7.0.1",
     "electron-builder": "^21.2.0",
     "electron-devtools-installer": "^2.2.4",
     "electron-rebuild": "^1.8.6",
@@ -153,7 +153,7 @@
     "postcss-preset-env": "^6.6.0",
     "raw-loader": "^3.1.0",
     "require-dir": "^1.2.0",
-    "spectron": "^8.0.0",
+    "spectron": "^9.0.0",
     "style-loader": "^1.0.0",
     "svg-sprite-loader": "^4.1.6",
     "svgo": "^1.3.0",
@@ -171,9 +171,6 @@
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^4.2.1"
   },
-  "optionalDependencies": {
-    "vscode-windows-registry": "^1.0.2"
-  },
   "repository": {
     "type": "git",
     "url": "git@github.com:marktext/marktext.git"

src/main/app/index.js

@@ -3,7 +3,7 @@ import fse from 'fs-extra'
 import { exec } from 'child_process'
 import dayjs from 'dayjs'
 import log from 'electron-log'
-import { app, BrowserWindow, clipboard, dialog, ipcMain, systemPreferences } from 'electron'
+import { app, BrowserWindow, clipboard, dialog, ipcMain, nativeTheme } from 'electron'
 import { isChildOfDirectory } from 'common/filesystem/paths'
 import { isLinux, isOsx, isWindows } from '../config'
 import parseArgs from '../cli/parser'
@@ -115,7 +115,7 @@ class App {
     const { paths } = this._accessor
     ensureDefaultDict(paths.userDataPath)
       .catch(error => {
-        log.error(error)
+        log.error('Error copying Hunspell dictionary: ', error)
       })
   }
 
@@ -143,37 +143,46 @@ class App {
       }
     }
 
-    const { startUpAction, defaultDirectoryToOpen } = preferences.getAll()
+    const {
+      startUpAction,
+      defaultDirectoryToOpen,
+      autoSwitchTheme,
+      theme
+    } = preferences.getAll()
+
     if (startUpAction === 'folder' && defaultDirectoryToOpen) {
       const info = normalizeMarkdownPath(defaultDirectoryToOpen)
       if (info) {
         _openFilesCache.unshift(info)
       }
     }
 
-    if (isOsx) {
-      app.dock.setMenu(dockMenu)
+    // Set initial native theme for theme in preferences.
+    const isDarkTheme = /dark/i.test(theme)
+    if (autoSwitchTheme === 0 && isDarkTheme !== nativeTheme.shouldUseDarkColors) {
+      selectTheme(nativeTheme.shouldUseDarkColors ? 'dark' : 'light')
+      nativeTheme.themeSource = nativeTheme.shouldUseDarkColors ? 'dark' : 'light'
+    } else {
+      nativeTheme.themeSource = isDarkTheme ? 'dark' : 'light'
+    }
 
-      // Listen for system theme change and change Mark Text own `dark` and `light`.
-      // In macOS 10.14 Mojave, Apple introduced a new system-wide dark mode for
-      // all macOS computers.
-      systemPreferences.subscribeNotification(
-        'AppleInterfaceThemeChangedNotification',
-        () => {
-          const preferences = this._accessor.preferences
-          const { theme } = preferences.getAll()
-
-          // Application menu is automatically updated via preference manager.
-          if (systemPreferences.isDarkMode() && theme !== 'dark' &&
-            theme !== 'material-dark' && theme !== 'one-dark') {
-            selectTheme('dark')
-          }
-          if (!systemPreferences.isDarkMode() && theme !== 'light' &&
-            theme !== 'ulysses' && theme !== 'graphite') {
-            selectTheme('light')
-          }
+    let isDarkMode = nativeTheme.shouldUseDarkColors
+    ipcMain.on('broadcast-preferences-changed', change => {
+      // Set Chromium's color for native elements after theme change.
+      if (change.theme) {
+        const isDarkTheme = /dark/i.test(change.theme)
+        if (isDarkMode !== isDarkTheme) {
+          isDarkMode = isDarkTheme
+          nativeTheme.themeSource = isDarkTheme ? 'dark' : 'light'
+        } else if (nativeTheme.themeSource === 'system') {
+          // Need to set dark or light theme because we set `system` to get the current system theme.
+          nativeTheme.themeSource = isDarkMode ? 'dark' : 'light'
         }
-      )
+      }
+    })
+
+    if (isOsx) {
+      app.dock.setMenu(dockMenu)
     } else if (isWindows) {
       app.setJumpList([{
         type: 'recent'

src/main/config.js

@@ -16,7 +16,7 @@ export const editorWinOptions = {
   zoomFactor: 1.0
 }
 
-export const defaultPreferenceWinOptions = {
+export const preferencesWinOptions = {
   width: 950,
   height: 650,
   webPreferences: {

src/main/dataCenter/index.js

@@ -71,7 +71,7 @@ class DataCenter extends EventEmitter {
 
       return Object.assign(data, encryptObj)
     } catch (err) {
-      log.error(err)
+      log.error('Failed to decrypt secure keys:', err)
       return data
     }
   }
@@ -133,7 +133,7 @@ class DataCenter extends EventEmitter {
       try {
         return await keytar.setPassword(serviceName, key, value)
       } catch (err) {
-        log.error(err)
+        log.error('dataCenter::setItem:', err)
       }
     } else {
       return this.store.set(key, value)

src/main/filesystem/watcher.js

@@ -235,7 +235,7 @@ class Watcher {
             })
           }
         } else {
-          log.error(error)
+          log.error('Error while watching files:', error)
         }
       })
 

src/main/index.js

@@ -60,9 +60,7 @@ try {
   // Catch errors that may come from invalid configuration files like settings.
   const msgHint = err.message.includes('Config schema violation')
     ? 'This seems to be an issue with your configuration file(s). ' : ''
-
-  log.error(`Loading Mark Text failed during initialization! ${msgHint}`)
-  log.error(err)
+  log.error(`Loading Mark Text failed during initialization! ${msgHint}`, err)
 
   const EXIT_ON_ERROR = !!process.env.MARKTEXT_EXIT_ON_ERROR
   const SHOW_ERROR_DIALOG = !process.env.MARKTEXT_ERROR_INTERACTION

src/main/menu/actions/file.js

@@ -62,7 +62,7 @@ const handleResponseForExport = async (e, { type, content, pathname, title, page
       }
       win.webContents.send('AGANI::export-success', { type, filePath })
     } catch (err) {
-      log.error(err)
+      log.error('Error while exporting:', err)
       const ERROR_MSG = err.message || `Error happened when export ${filePath}`
       win.webContents.send('AGANI::show-notification', {
         title: 'Export failure',
@@ -80,19 +80,9 @@ const handleResponseForExport = async (e, { type, content, pathname, title, page
 
 const handleResponseForPrint = e => {
   const win = BrowserWindow.fromWebContents(e.sender)
-
-  // See GH#749, Electron#16085 and Electron#17523.
-  dialog.showMessageBox(win, {
-    type: 'info',
-    buttons: ['OK'],
-    defaultId: 0,
-    noLink: true,
-    message: 'Printing doesn\'t work',
-    detail: 'Printing is disabled due to an Electron upstream issue. Please export the document as PDF and print the PDF file. We apologize for the inconvenience!'
+  win.webContents.print({ printBackground: true }, () => {
+    removePrintServiceFromWindow(win)
   })
-  // win.webContents.print({ printBackground: true }, () => {
-  //   removePrintServiceFromWindow(win)
-  // })
 }
 
 const handleResponseForSave = async (e, { id, filename, markdown, pathname, options, defaultPath }) => {
@@ -140,7 +130,7 @@ const handleResponseForSave = async (e, { id, filename, markdown, pathname, opti
       return id
     })
     .catch(err => {
-      log.error(err)
+      log.error('Error while saving:', err)
       win.webContents.send('mt::tab-save-failure', id, err.message)
     })
 }
@@ -185,7 +175,7 @@ const openPandocFile = async (windowId, pathname) => {
     const data = await converter()
     ipcMain.emit('app-open-markdown-by-id', windowId, data)
   } catch (err) {
-    log.error(err)
+    log.error('Error while converting file:', err)
   }
 }
 
@@ -216,7 +206,7 @@ ipcMain.on('mt::save-and-close-tabs', async (e, unsavedFiles) => {
         win.send('mt::force-close-tabs-by-id', tabIds)
       })
       .catch(err => {
-        log.error(err.error)
+        log.error('Error while save all:', err.error)
       })
   } else {
     const tabIds = unsavedFiles.map(f => f.id)
@@ -262,7 +252,7 @@ ipcMain.on('AGANI::response-file-save-as', async (e, { id, filename, markdown, p
         }
       })
       .catch(err => {
-        log.error(err)
+        log.error('Error while save as:', err)
         win.webContents.send('mt::tab-save-failure', id, err.message)
       })
   }
@@ -282,8 +272,7 @@ ipcMain.on('mt::close-window-confirm', async (e, unsavedFiles) => {
         ipcMain.emit('window-close-by-id', win.id)
       })
       .catch(err => {
-        console.log(err)
-        log.error(err)
+        log.error('Error while saving before quit:', err)
 
         // Notify user about the problem.
         dialog.showMessageBox(win, {
@@ -446,19 +435,9 @@ export const importFile = async win => {
 }
 
 export const print = win => {
-  if (!win) {
-    return
+  if (win) {
+    win.webContents.send('mt::show-export-dialog', 'print')
   }
-  // See GH#749, Electron#16085 and Electron#17523.
-  dialog.showMessageBox(win, {
-    type: 'info',
-    buttons: ['OK'],
-    defaultId: 0,
-    noLink: true,
-    message: 'Printing doesn\'t work',
-    detail: 'Printing is disabled due to an Electron upstream issue. Please export the document as PDF and print the PDF file. We apologize for the inconvenience!'
-  })
-  // win.webContents.send('mt::show-export-dialog', 'print')
 }
 
 export const openFile = async win => {

src/main/menu/actions/window.js

@@ -9,13 +9,13 @@ export const toggleAlwaysOnTop = win => {
 export const zoomIn = win => {
   const { webContents } = win
   const zoom = webContents.getZoomFactor()
-  // WORKAROUND: Electron#16018
+  // WORKAROUND: We need to set zoom on the browser window due to Electron#16018.
   webContents.send('mt::window-zoom', Math.min(2.0, zoom + 0.125))
 }
 
 export const zoomOut = win => {
   const { webContents } = win
   const zoom = webContents.getZoomFactor()
-  // WORKAROUND: Electron#16018
+  // WORKAROUND: We need to set zoom on the browser window due to Electron#16018.
   webContents.send('mt::window-zoom', Math.max(1.0, zoom - 0.125))
 }

src/main/menu/index.js

@@ -92,7 +92,7 @@ class AppMenu {
       }
       return recentDocuments
     } catch (err) {
-      log.error(err)
+      log.error('Error while read recently used documents:', err)
       return []
     }
   }

src/main/menu/templates/window.js

@@ -17,19 +17,13 @@ export default function (keybindings) {
         toggleAlwaysOnTop(browserWindow)
       }
     }, {
-      // TODO: Disable due GH#1225.
-      visible: false,
       type: 'separator'
     }, {
-      // TODO: Disable due GH#1225.
-      visible: false,
       label: 'Zoom In',
       click (menuItem, browserWindow) {
         zoomIn(browserWindow)
       }
     }, {
-      // TODO: Disable due GH#1225.
-      visible: false,
       label: 'Zoom Out',
       click (menuItem, browserWindow) {
         zoomOut(browserWindow)