Track zoom factor changes through IPC

main.js

@@ -310,6 +310,27 @@ function handleCommonWindowEvents(window) {
     console.error(`Preload error in ${preloadPath}: `, error.message);
   });
 
+  // Works only for mainWindow because it has `enablePreferredSizeMode`
+  let lastZoomFactor = window.webContents.getZoomFactor();
+  const onZoomChanged = () => {
+    const zoomFactor = mainWindow.webContents.getZoomFactor();
+    if (lastZoomFactor === zoomFactor) {
+      return;
+    }
+
+    if (window.webContents) {
+      window.webContents.send('callbacks:call:setPassiveZoomFactor', [
+        zoomFactor,
+      ]);
+      if (settingsWindow && settingsWindow.webContents) {
+        settingsWindow.webContents.send('render');
+      }
+    }
+
+    lastZoomFactor = zoomFactor;
+  };
+  window.webContents.on('preferred-size-changed', onZoomChanged);
+
   nativeThemeNotifier.addWindow(window);
 }
 
@@ -386,6 +407,7 @@ async function createWindow() {
       nativeWindowOpen: true,
       spellcheck: await getSpellCheckSetting(),
       backgroundThrottling: false,
+      enablePreferredSizeMode: true,
     },
     icon: windowIcon,
     ..._.pick(windowConfig, ['autoHideMenuBar', 'width', 'height', 'x', 'y']),

ts/components/Preferences.tsx

@@ -154,6 +154,29 @@ enum Page {
   ChatColor = 'ChatColor',
 }
 
+const DEFAULT_ZOOM_FACTORS = [
+  {
+    text: '75%',
+    value: 0.75,
+  },
+  {
+    text: '100%',
+    value: 1,
+  },
+  {
+    text: '125%',
+    value: 1.25,
+  },
+  {
+    text: '150%',
+    value: 1.5,
+  },
+  {
+    text: '200%',
+    value: 2,
+  },
+];
+
 export const Preferences = ({
   addCustomColor,
   availableCameras,
@@ -386,6 +409,18 @@ export const Preferences = ({
       </>
     );
   } else if (page === Page.Appearance) {
+    let zoomFactors = DEFAULT_ZOOM_FACTORS;
+
+    if (!zoomFactors.some(({ value }) => value === zoomFactor)) {
+      zoomFactors = [
+        ...zoomFactors,
+        {
+          text: `${Math.round(zoomFactor * 100)}%`,
+          value: zoomFactor,
+        },
+      ].sort((a, b) => a.value - b.value);
+    }
+
     settings = (
       <>
         <div className="Preferences__title">
@@ -438,28 +473,7 @@ export const Preferences = ({
             right={
               <Select
                 onChange={onZoomSelectChange}
-                options={[
-                  {
-                    text: '75%',
-                    value: 0.75,
-                  },
-                  {
-                    text: '100%',
-                    value: 1,
-                  },
-                  {
-                    text: '125%',
-                    value: 1.25,
-                  },
-                  {
-                    text: '150%',
-                    value: 1.5,
-                  },
-                  {
-                    text: '200%',
-                    value: 2,
-                  },
-                ]}
+                options={zoomFactors}
                 value={zoomFactor}
               />
             }

ts/types/Storage.d.ts

@@ -24,7 +24,7 @@ export type SerializedCertificateType = {
   serialized: ArrayBuffer;
 };
 
-export type ZoomFactorType = 0.75 | 1 | 1.25 | 1.5 | 2;
+export type ZoomFactorType = 0.75 | 1 | 1.25 | 1.5 | 2 | number;
 
 export type ThemeSettingType = 'system' | 'light' | 'dark';
 

ts/util/createIPCEvents.ts

@@ -107,6 +107,7 @@ export type IPCEventsCallbacksType = {
     customColor?: { id: string; value: CustomColorType }
   ) => void;
   getDefaultConversationColor: () => DefaultConversationColorType;
+  setPassiveZoomFactor: (factor: number) => Promise<void>;
 };
 
 type ValuesWithGetters = Omit<
@@ -166,10 +167,8 @@ export function createIPCEvents(
     getDeviceName: () => window.textsecure.storage.user.getDeviceName(),
 
     getZoomFactor: () => window.storage.get('zoomFactor', 1),
-    setZoomFactor: (zoomFactor: ZoomFactorType) => {
-      const numZoomFactor = zoomFactor;
-      webFrame.setZoomFactor(numZoomFactor);
-      return window.storage.put('zoomFactor', numZoomFactor);
+    setZoomFactor: async (zoomFactor: ZoomFactorType) => {
+      webFrame.setZoomFactor(zoomFactor);
     },
 
     getPreferredAudioInputDevice: () =>
@@ -508,6 +507,9 @@ export function createIPCEvents(
     getMediaPermissions: window.getMediaPermissions,
     getMediaCameraPermissions: window.getMediaCameraPermissions,
 
+    setPassiveZoomFactor: zoomFactor =>
+      window.storage.put('zoomFactor', zoomFactor),
+
     ...overrideEvents,
   };
 }

ts/windows/preload.ts

@@ -16,6 +16,7 @@ installCallback('resetAllChatColors');
 installCallback('resetDefaultChatColor');
 installCallback('setGlobalDefaultConversationColor');
 installCallback('getDefaultConversationColor');
+installCallback('setPassiveZoomFactor');
 
 // Getters only. These are set by the primary device
 installSetting('blockedCount', {