Merge branch 'update-to-electron-11.4.9'

16 files changed, 49 insertions, 62 deletions

diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index 8b047cb6c3..8cacf4a7b7 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -503,13 +503,7 @@ class ApplicationMain {
 
       const filePath = path.resolve(path.join(__dirname, '../renderer/index.html'));
       try {
-        if (process.env.NODE_ENV === 'development') {
-          await this.windowController.window.loadURL(
-            'http://localhost:8080/src/renderer/index.html',
-          );
-        } else {
-          await this.windowController.window.loadFile(filePath);
-        }
+        await this.windowController.window.loadFile(filePath);
       } catch (error) {
         log.error(`Failed to load index file: ${error.message}`);
       }
@@ -1091,8 +1085,6 @@ class ApplicationMain {
       guiSettings: this.guiSettings.state,
       wireguardPublicKey: this.wireguardPublicKey,
       translations: this.translations,
-      platform: process.platform,
-      runningInDevelopment: process.env.NODE_ENV === 'development',
       windowsSplitTunnelingApplications: this.windowsSplitTunnelingApplications,
     }));
 
@@ -1588,10 +1580,8 @@ class ApplicationMain {
   private allowDevelopmentRequest(url: string): boolean {
     return (
       process.env.NODE_ENV === 'development' &&
-      // Local web server providing assests (index.html, index.js and css files)
-      (url.startsWith('http://localhost:8080/') ||
-        // Downloading of React and Redux developer tools.
-        url.startsWith('devtools://devtools/') ||
+      // Downloading of React and Redux developer tools.
+      (url.startsWith('devtools://devtools/') ||
         url.startsWith('chrome-extension://') ||
         url.startsWith('https://clients2.google.com') ||
         url.startsWith('https://clients2.googleusercontent.com'))
@@ -1613,7 +1603,10 @@ class ApplicationMain {
     const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
     for (const name of extensions) {
       try {
-        await installer.default(installer[name], forceDownload);
+        await installer.default(installer[name], {
+          forceDownload,
+          loadExtensionOptions: { allowFileAccess: true },
+        });
       } catch (e) {
         log.info(`Error installing ${name} extension: ${e.message}`);
       }
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index febcaf8bc8..5b4f4be972 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -208,9 +208,6 @@ export default class AppRenderer {
     // Request the initial state from the main process
     const initialState = IpcRendererEventChannel.state.get();
 
-    window.platform = initialState.platform;
-    window.runningInDevelopment = initialState.runningInDevelopment;
-
     this.setLocale(initialState.locale);
     loadTranslations(
       messages,
@@ -563,7 +560,7 @@ export default class AppRenderer {
     let expectedContentHeight = 568;
 
     // The app content is 12px taller on macOS to fit the top arrow.
-    if (window.platform === 'darwin' && !this.guiSettings.unpinnedWindow) {
+    if (window.env.platform === 'darwin' && !this.guiSettings.unpinnedWindow) {
       expectedContentHeight += 12;
     }
 
@@ -676,7 +673,7 @@ export default class AppRenderer {
   }
 
   private async autoConnect() {
-    if (window.runningInDevelopment) {
+    if (window.env.development) {
       log.info('Skip autoconnect in development');
     } else if (this.autoConnected) {
       log.info('Skip autoconnect because it was done before');
diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 77c815fe61..62232b6b8c 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -441,11 +441,11 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                   </Cell.CellButton>
                 </StyledButtonCellGroup>
 
-                {(window.platform === 'linux' || window.platform === 'win32') && (
+                {(window.env.platform === 'linux' || window.env.platform === 'win32') && (
                   <StyledButtonCellGroup>
                     <Cell.CellButton onClick={this.props.onViewSplitTunneling}>
                       <Cell.Label>
-                        {window.platform === 'win32' && <StyledBetaLabel />}
+                        {window.env.platform === 'win32' && <StyledBetaLabel />}
                         {messages.pgettext('advanced-settings-view', 'Split tunneling')}
                       </Cell.Label>
                       <Cell.Icon height={12} width={7} source="icon-chevron" />
diff --git a/gui/src/renderer/components/CustomScrollbars.tsx b/gui/src/renderer/components/CustomScrollbars.tsx
index 2b5119839c..3dacd26626 100644
--- a/gui/src/renderer/components/CustomScrollbars.tsx
+++ b/gui/src/renderer/components/CustomScrollbars.tsx
@@ -47,7 +47,7 @@ interface IScrollbarUpdateContext {
 export default class CustomScrollbars extends React.Component<IProps, IState> {
   public static defaultProps: IProps = {
     // auto-hide on macOS by default
-    autoHide: window.platform === 'darwin',
+    autoHide: window.env.platform === 'darwin',
     trackPadding: { x: 2, y: 2 },
   };
 
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index f3a69f5af2..0dcd2e7ea9 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -31,7 +31,7 @@ interface IHeaderBarContainerProps {
 
 const HeaderBarContainer = styled.header({}, (props: IHeaderBarContainerProps) => ({
   padding: '12px 16px',
-  paddingTop: window.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
+  paddingTop: window.env.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
   backgroundColor: headerBarStyleColorMap[props.barStyle ?? HeaderBarStyle.default],
 }));
 
diff --git a/gui/src/renderer/components/NavigationBarStyles.tsx b/gui/src/renderer/components/NavigationBarStyles.tsx
index f8ac87f3e2..52aefe323d 100644
--- a/gui/src/renderer/components/NavigationBarStyles.tsx
+++ b/gui/src/renderer/components/NavigationBarStyles.tsx
@@ -20,7 +20,7 @@ export const StyledNavigationItems = styled.div({
 export const StyledNavigationBar = styled.nav((props: { unpinnedWindow: boolean }) => ({
   flex: 0,
   padding: '12px',
-  paddingTop: window.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
+  paddingTop: window.env.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
 }));
 
 export const StyledNavigationBarWrapper = styled.div({
diff --git a/gui/src/renderer/components/PlatformWindow.tsx b/gui/src/renderer/components/PlatformWindow.tsx
index 83aa7b3f7f..9b18f5f726 100644
--- a/gui/src/renderer/components/PlatformWindow.tsx
+++ b/gui/src/renderer/components/PlatformWindow.tsx
@@ -10,7 +10,7 @@ interface IPlatformWindowProps {
 export default styled.div({}, (props: IPlatformWindowProps) => {
   let mask: string | undefined;
 
-  if (window.platform === 'darwin' && !props.unpinnedWindow) {
+  if (window.env.platform === 'darwin' && !props.unpinnedWindow) {
     const arrowPositionCss =
       props.arrowPosition !== undefined ? `${props.arrowPosition - ARROW_WIDTH * 0.5}px` : '50%';
 
diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx
index c91330aee0..ebaa2da359 100644
--- a/gui/src/renderer/components/Preferences.tsx
+++ b/gui/src/renderer/components/Preferences.tsx
@@ -225,8 +225,8 @@ export default class Preferences extends React.Component<IProps> {
                   </Cell.Footer>
                 </AriaInputGroup>
 
-                {(window.platform === 'win32' ||
-                  (window.platform === 'darwin' && window.runningInDevelopment)) && (
+                {(window.env.platform === 'win32' ||
+                  (window.env.platform === 'darwin' && window.env.development)) && (
                   <AriaInputGroup>
                     <Cell.Container>
                       <AriaLabel>
diff --git a/gui/src/renderer/components/SplitTunnelingSettings.tsx b/gui/src/renderer/components/SplitTunnelingSettings.tsx
index d6f2bbbdcf..30948dae35 100644
--- a/gui/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettings.tsx
@@ -102,13 +102,13 @@ interface IPlatformSplitTunnelingSettingsProps {
 }
 
 function PlatformSpecificSplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsProps) {
-  switch (window.platform) {
+  switch (window.env.platform) {
     case 'linux':
       return <LinuxSplitTunnelingSettings {...props} />;
     case 'win32':
       return <WindowsSplitTunnelingSettings {...props} />;
     default:
-      throw new Error(`Split tunneling not implemented on ${window.platform}`);
+      throw new Error(`Split tunneling not implemented on ${window.env.platform}`);
   }
 }
 
diff --git a/gui/src/renderer/context.tsx b/gui/src/renderer/context.tsx
index d4b20daeb1..341ddda893 100644
--- a/gui/src/renderer/context.tsx
+++ b/gui/src/renderer/context.tsx
@@ -6,7 +6,7 @@ export interface IAppContext {
 }
 
 export const AppContext = React.createContext<IAppContext | undefined>(undefined);
-if (window.runningInDevelopment) {
+if (window.env.development) {
   AppContext.displayName = 'AppContext';
 }
 
@@ -34,7 +34,7 @@ export default function withAppContext<Props>(BaseComponent: React.ComponentType
     );
   };
 
-  if (window.runningInDevelopment) {
+  if (window.env.development) {
     wrappedComponent.displayName =
       'withAppContext(' + (BaseComponent.displayName || BaseComponent.name) + ')';
   }
diff --git a/gui/src/renderer/preload.ts b/gui/src/renderer/preload.ts
index 5c44b71eeb..4df178fcc2 100644
--- a/gui/src/renderer/preload.ts
+++ b/gui/src/renderer/preload.ts
@@ -2,3 +2,8 @@ import { contextBridge } from 'electron';
 import { IpcRendererEventChannel } from './lib/ipc-event-channel';
 
 contextBridge.exposeInMainWorld('ipc', IpcRendererEventChannel);
+
+contextBridge.exposeInMainWorld('env', {
+  development: process.env.NODE_ENV === 'development',
+  platform: process.platform,
+});
diff --git a/gui/src/renderer/redux/settings/reducers.ts b/gui/src/renderer/redux/settings/reducers.ts
index 1b07e805fa..8f61721a6e 100644
--- a/gui/src/renderer/redux/settings/reducers.ts
+++ b/gui/src/renderer/redux/settings/reducers.ts
@@ -149,7 +149,7 @@ const initialState: ISettingsReduxState = {
     autoConnect: true,
     monochromaticIcon: false,
     startMinimized: false,
-    unpinnedWindow: window.platform !== 'win32' && window.platform !== 'darwin',
+    unpinnedWindow: window.env.platform !== 'win32' && window.env.platform !== 'darwin',
     browsedForSplitTunnelingApplications: [],
   },
   relaySettings: {
diff --git a/gui/src/renderer/redux/store.ts b/gui/src/renderer/redux/store.ts
index 92d85e4dbe..3579978425 100644
--- a/gui/src/renderer/redux/store.ts
+++ b/gui/src/renderer/redux/store.ts
@@ -32,16 +32,7 @@ export type ReduxAction =
 export type ReduxStore = ReturnType<typeof configureStore>;
 export type ReduxDispatch = Dispatch<ReduxAction>;
 
-export default function configureStore(initialState?: IReduxState) {
-  const actionCreators = {
-    ...accountActions,
-    ...connectionActions,
-    ...settingsActions,
-    ...supportActions,
-    ...versionActions,
-    ...userInterfaceActions,
-  };
-
+export default function configureStore() {
   const reducers = {
     account: accountReducer,
     connection: connectionReducer,
@@ -51,21 +42,23 @@ export default function configureStore(initialState?: IReduxState) {
     userInterface: userInterfaceReducer,
   };
 
-  const composeEnhancers: typeof compose = (() => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const reduxCompose = window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
-    if (window.runningInDevelopment && reduxCompose) {
-      return reduxCompose({ actionCreators });
-    }
-    return compose;
-  })();
-
-  const enhancer = composeEnhancers();
   const rootReducer = combineReducers(reducers);
 
-  if (initialState) {
-    return createStore(rootReducer, initialState, enhancer);
-  } else {
-    return createStore(rootReducer, enhancer);
-  }
+  return createStore(rootReducer, composeEnhancers());
+}
+
+function composeEnhancers(): typeof compose {
+  const actionCreators = {
+    ...accountActions,
+    ...connectionActions,
+    ...settingsActions,
+    ...supportActions,
+    ...versionActions,
+    ...userInterfaceActions,
+  };
+
+  return window.env.development
+    ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ actionCreators })()
+    : compose();
 }
diff --git a/gui/src/shared/ipc-schema.ts b/gui/src/shared/ipc-schema.ts
index e2b3ebbed3..f463765a32 100644
--- a/gui/src/shared/ipc-schema.ts
+++ b/gui/src/shared/ipc-schema.ts
@@ -54,8 +54,6 @@ export interface IAppStateSnapshot {
   guiSettings: IGuiSettingsState;
   wireguardPublicKey?: IWireguardPublicKey;
   translations: ITranslations;
-  platform: NodeJS.Platform;
-  runningInDevelopment: boolean;
   windowsSplitTunnelingApplications?: IApplication[];
 }
 
diff --git a/gui/src/shared/notifications/error.ts b/gui/src/shared/notifications/error.ts
index 97e5e2ce93..066c9c333e 100644
--- a/gui/src/shared/notifications/error.ts
+++ b/gui/src/shared/notifications/error.ts
@@ -66,7 +66,7 @@ export class ErrorNotificationProvider
 function getMessage(errorDetails: IErrorState, accountExpiry?: string): string {
   if (errorDetails.blockFailure) {
     if (errorDetails.cause.reason === 'set_firewall_policy_error') {
-      switch (process.platform ?? window.platform) {
+      switch (process.platform ?? window.env.platform) {
         case 'win32':
           return messages.pgettext(
             'notifications',
@@ -107,7 +107,7 @@ function getMessage(errorDetails: IErrorState, accountExpiry?: string): string {
           'Could not configure IPv6. Disable it in the app or enable it on your device.',
         );
       case 'set_firewall_policy_error':
-        switch (process.platform ?? window.platform) {
+        switch (process.platform ?? window.env.platform) {
           case 'win32':
             return messages.pgettext(
               'notifications',
diff --git a/gui/src/shared/notifications/no-valid-key.ts b/gui/src/shared/notifications/no-valid-key.ts
index 8da145a1f0..6de28ab8df 100644
--- a/gui/src/shared/notifications/no-valid-key.ts
+++ b/gui/src/shared/notifications/no-valid-key.ts
@@ -14,7 +14,8 @@ export class NoValidKeyNotificationProvider implements InAppNotificationProvider
   public mayDisplay() {
     const usingWireGuard =
       this.context.tunnelProtocol === 'wireguard' ||
-      (this.context.tunnelProtocol === 'any' && (process.platform ?? window.platform) !== 'win32');
+      (this.context.tunnelProtocol === 'any' &&
+        (process.platform ?? window.env.platform) !== 'win32');
     const keyInvalid =
       this.context.wireGuardKey.type === 'key-not-set' ||
       this.context.wireGuardKey.type === 'too-many-keys' ||