[MM-61271] Upgrade to Electron v33.0.2 (#3181) (#3182)

* [MM-61271] Upgrade to Electron v33.0.2

* Fix node-abi

* Fix and patch nan

(cherry picked from commit 14bb75e)

Co-authored-by: Devin Binnie <[email protected]>

e2e/package.json

@@ -11,7 +11,7 @@
     "test": "electron-mocha --reporter mochawesome dist/e2e_bundle.js",
     "test:performance": "electron-mocha --reporter json --reporter-option output=./performance/perf-test-report.json dist/e2e_bundle.js",
     "send-report": "node ./save_report.js",
-    "postinstall": "cross-env CL='/std:c++17' electron-rebuild -m ./node_modules/robotjs"
+    "postinstall": "patch-package && cross-env CL='/std:c++17' electron-rebuild -m ./node_modules/robotjs"
   },
   "repository": {
     "type": "git",
@@ -32,6 +32,8 @@
     "electron-mocha": "12.2.0",
     "fast-xml-parser": "^4.4.1",
     "mochawesome": "7.1.3",
+    "nan": "2.22.0",
+    "node-abi": "3.71.0",
     "playwright": "1.42.0",
     "ps-node": "0.1.6",
     "recursive-readdir": "2.2.3",

e2e/patches/nan+2.22.0.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/nan/nan_scriptorigin.h b/node_modules/nan/nan_scriptorigin.h
+index 04e55cf..9949631 100644
+--- a/node_modules/nan/nan_scriptorigin.h
++++ b/node_modules/nan/nan_scriptorigin.h
+@@ -13,7 +13,7 @@ class ScriptOrigin : public v8::ScriptOrigin {
+  public:
+
+ #if defined(V8_MAJOR_VERSION) && (V8_MAJOR_VERSION > 11 \
+-    && defined(V8_MINOR_VERSION) && V8_MINOR_VERSION > 7)
++    && defined(V8_MINOR_VERSION) && (V8_MAJOR_VERSION > 12 || (V8_MAJOR_VERSION == 11 && V8_MINOR_VERSION > 7)))
+   explicit ScriptOrigin(v8::Local<v8::Value> name) :
+       v8::ScriptOrigin(name) {}
+

package.json

@@ -131,7 +131,7 @@
     "copy-webpack-plugin": "10.2.4",
     "cross-env": "7.0.3",
     "css-loader": "6.7.1",
-    "electron": "31.2.1",
+    "electron": "33.0.2",
     "electron-builder": "24.13.3",
     "electron-connect": "0.6.3",
     "eslint": "8.57.0",

patches/electron+33.0.2.patch

@@ -0,0 +1,33 @@
+diff --git a/node_modules/electron/electron.d.ts b/node_modules/electron/electron.d.ts
+index 2de7557..0d0fa34 100644
+--- a/node_modules/electron/electron.d.ts
++++ b/node_modules/electron/electron.d.ts
+@@ -9847,23 +9847,23 @@ declare namespace Electron {
+      *
+      * @platform darwin,win32
+      */
+-    on(event: 'speed-limit-change', listener: () => void): this;
++    on(event: 'speed-limit-change', listener: (limit: number) => void): this;
+     /**
+      * @platform darwin,win32
+      */
+-    off(event: 'speed-limit-change', listener: () => void): this;
++    off(event: 'speed-limit-change', listener: (limit: number) => void): this;
+     /**
+      * @platform darwin,win32
+      */
+-    once(event: 'speed-limit-change', listener: () => void): this;
++    once(event: 'speed-limit-change', listener: (limit: number) => void): this;
+     /**
+      * @platform darwin,win32
+      */
+-    addListener(event: 'speed-limit-change', listener: () => void): this;
++    addListener(event: 'speed-limit-change', listener: (limit: number) => void): this;
+     /**
+      * @platform darwin,win32
+      */
+-    removeListener(event: 'speed-limit-change', listener: () => void): this;
++    removeListener(event: 'speed-limit-change', listener: (limit: number) => void): this;
+     /**
+      * Emitted when the system is suspending.
+      */

src/main/menus/app.ts

@@ -3,7 +3,7 @@
 // See LICENSE.txt for license information.
 'use strict';
 
-import type {MenuItemConstructorOptions, MenuItem, BrowserWindow} from 'electron';
+import type {MenuItemConstructorOptions, MenuItem} from 'electron';
 import {app, ipcMain, Menu, session, shell, clipboard} from 'electron';
 import log from 'electron-log';
 
@@ -149,14 +149,16 @@ export function createTemplate(config: Config, updateManager: UpdateManager) {
                 }
                 return 'Ctrl+Shift+I';
             })(),
-            click(item: Electron.MenuItem, focusedWindow?: BrowserWindow) {
-                if (focusedWindow) {
-                    // toggledevtools opens it in the last known position, so sometimes it goes below the browserview
-                    if (focusedWindow.webContents.isDevToolsOpened()) {
-                        focusedWindow.webContents.closeDevTools();
-                    } else {
-                        focusedWindow.webContents.openDevTools({mode: 'detach'});
-                    }
+            click() {
+                const mainWindow = MainWindow.get();
+                if (!mainWindow) {
+                    return;
+                }
+
+                if (mainWindow.webContents.isDevToolsOpened()) {
+                    mainWindow.webContents.closeDevTools();
+                } else {
+                    mainWindow.webContents.openDevTools({mode: 'detach'});
                 }
             },
         },

src/main/views/MattermostBrowserView.test.js

@@ -25,12 +25,14 @@ jest.mock('electron', () => ({
             on: jest.fn(),
             getTitle: () => 'title',
             getURL: () => 'http://server-1.com',
-            clearHistory: jest.fn(),
             send: jest.fn(),
-            canGoBack: jest.fn(),
-            canGoForward: jest.fn(),
-            goToOffset: jest.fn(),
-            canGoToOffset: jest.fn(),
+            navigationHistory: {
+                clear: jest.fn(),
+                canGoBack: jest.fn(),
+                canGoForward: jest.fn(),
+                goToOffset: jest.fn(),
+                canGoToOffset: jest.fn(),
+            },
         },
     })),
     ipcMain: {
@@ -206,18 +208,18 @@ describe('main/views/MattermostBrowserView', () => {
         });
 
         it('should only go to offset if it can', () => {
-            mattermostView.browserView.webContents.canGoToOffset.mockReturnValue(false);
+            mattermostView.browserView.webContents.navigationHistory.canGoToOffset.mockReturnValue(false);
             mattermostView.goToOffset(1);
-            expect(mattermostView.browserView.webContents.goToOffset).not.toBeCalled();
+            expect(mattermostView.browserView.webContents.navigationHistory.goToOffset).not.toBeCalled();
 
-            mattermostView.browserView.webContents.canGoToOffset.mockReturnValue(true);
+            mattermostView.browserView.webContents.navigationHistory.canGoToOffset.mockReturnValue(true);
             mattermostView.goToOffset(1);
-            expect(mattermostView.browserView.webContents.goToOffset).toBeCalled();
+            expect(mattermostView.browserView.webContents.navigationHistory.goToOffset).toBeCalled();
         });
 
         it('should call reload if an error occurs', () => {
-            mattermostView.browserView.webContents.canGoToOffset.mockReturnValue(true);
-            mattermostView.browserView.webContents.goToOffset.mockImplementation(() => {
+            mattermostView.browserView.webContents.navigationHistory.canGoToOffset.mockReturnValue(true);
+            mattermostView.browserView.webContents.navigationHistory.goToOffset.mockImplementation(() => {
                 throw new Error('hi');
             });
             mattermostView.goToOffset(1);
@@ -355,7 +357,7 @@ describe('main/views/MattermostBrowserView', () => {
         it('should erase history and set isAtRoot when navigating to root URL', () => {
             mattermostView.atRoot = false;
             mattermostView.updateHistoryButton();
-            expect(mattermostView.browserView.webContents.clearHistory).toHaveBeenCalled();
+            expect(mattermostView.browserView.webContents.navigationHistory.clear).toHaveBeenCalled();
             expect(mattermostView.isAtRoot).toBe(true);
         });
     });

src/main/views/MattermostBrowserView.ts

@@ -149,9 +149,9 @@ export class MattermostBrowserView extends EventEmitter {
     };
 
     goToOffset = (offset: number) => {
-        if (this.browserView.webContents.canGoToOffset(offset)) {
+        if (this.browserView.webContents.navigationHistory.canGoToOffset(offset)) {
             try {
-                this.browserView.webContents.goToOffset(offset);
+                this.browserView.webContents.navigationHistory.goToOffset(offset);
                 this.updateHistoryButton();
             } catch (error) {
                 this.log.error(error);
@@ -162,15 +162,15 @@ export class MattermostBrowserView extends EventEmitter {
 
     getBrowserHistoryStatus = () => {
         if (this.currentURL?.toString() === this.view.url.toString()) {
-            this.browserView.webContents.clearHistory();
+            this.browserView.webContents.navigationHistory.clear();
             this.atRoot = true;
         } else {
             this.atRoot = false;
         }
 
         return {
-            canGoBack: this.browserView.webContents.canGoBack(),
-            canGoForward: this.browserView.webContents.canGoForward(),
+            canGoBack: this.browserView.webContents.navigationHistory.canGoBack(),
+            canGoForward: this.browserView.webContents.navigationHistory.canGoForward(),
         };
     };