Set zoom to work across all tabs and not to affect sidebar.

Author: coxtrent

app/common/typed-ipc.ts

@@ -15,6 +15,7 @@ export type MainMessage = {
   "reload-full-app": () => void;
   "save-last-tab": (index: number) => void;
   "switch-server-tab": (index: number) => void;
+  "sync-zooms": () => void;
   "toggle-app": () => void;
   "toggle-badge-option": (newValue: boolean) => void;
   "toggle-menubar": (showMenubar: boolean) => void;
@@ -23,7 +24,6 @@ export type MainMessage = {
   "update-badge": (messageCount: number) => void;
   "update-menu": (properties: MenuProperties) => void;
   "update-taskbar-icon": (data: string, text: string) => void;
-  "zoom-other-tabs": (zoomLevel: number) => void;
 };
 
 export type MainCall = {
@@ -65,6 +65,7 @@ export type RendererMessage = {
   "show-keyboard-shortcuts": () => void;
   "show-notification-settings": () => void;
   "switch-server-tab": (index: number) => void;
+  "sync-zooms": () => void;
   "tab-devtools": () => void;
   "toggle-autohide-menubar": (
     autoHideMenubar: boolean,

app/main/index.ts

@@ -154,7 +154,7 @@ function createMainWindow(): BrowserWindow {
     app.quit();
     return;
   }
-  
+
   await app.whenReady();
 
   if (process.env.GDK_BACKEND !== GDK_BACKEND) {
@@ -279,13 +279,6 @@ function createMainWindow(): BrowserWindow {
     }
   });
 
-  ipcMain.on("zoom-other-tabs", (event, zoomLevel) => {
-    const windows = BrowserWindow.getAllWindows();
-    for (const window of windows) {
-      window.webContents.setZoomLevel(zoomLevel);
-    }
-  });
-
   ipcMain.on("fetch-user-agent", (event) => {
     event.returnValue = session
       .fromPartition("persist:webviewsession")

app/renderer/js/components/webview.ts

@@ -158,19 +158,24 @@ export default class WebView {
     this.show();
   }
 
+  getZoomFactor(): number {
+    return this.getWebContents().getZoomFactor();
+  }
+
+  setZoomFactor(value: number): void {
+    this.getWebContents().setZoomFactor(value);
+  }
+
   zoomIn(): void {
     this.getWebContents().zoomLevel += 0.5;
-    this.syncZooms();
   }
 
   zoomOut(): void {
     this.getWebContents().zoomLevel -= 0.5;
-    this.syncZooms();
   }
 
   zoomActualSize(): void {
     this.getWebContents().zoomLevel = 0;
-    this.syncZooms();
   }
 
   logOut(): void {
@@ -227,15 +232,6 @@ export default class WebView {
     ipcRenderer.send("forward-to", this.webContentsId, channel, ...arguments_);
   }
 
-  private syncZooms(): void {
-    // Sync zoom level with other tabs if useOneZoom is enabled
-    const useOneZoom = ConfigUtil.getConfigItem("useOneZoom", true);
-    if (useOneZoom) {
-      const zoomLevel = this.getWebContents().getZoomLevel();
-      ipcRenderer.send("zoom-other-tabs", zoomLevel);
-    }
-  }
-
   private registerListeners(): void {
     const webContents = this.getWebContents();
 

app/renderer/js/main.ts

@@ -887,18 +887,21 @@ export class ServerManagerView {
         "zoomIn",
         (webview) => {
           webview.zoomIn();
+          this.syncZooms(webview.getZoomFactor());
         },
       ],
       [
         "zoomOut",
         (webview) => {
           webview.zoomOut();
+          this.syncZooms(webview.getZoomFactor());
         },
       ],
       [
         "zoomActualSize",
         (webview) => {
           webview.zoomActualSize();
+          this.syncZooms(webview.getZoomFactor());
         },
       ],
       [
@@ -1085,6 +1088,10 @@ export class ServerManagerView {
       },
     );
 
+    ipcRenderer.on("sync-zooms", () => {
+      this.syncZooms();
+    });
+
     ipcRenderer.on("enter-fullscreen", () => {
       this.$fullscreenPopup.classList.add("show");
       this.$fullscreenPopup.classList.remove("hidden");
@@ -1177,6 +1184,23 @@ export class ServerManagerView {
       await dingSound.play();
     });
   }
+
+  private syncZooms(value = 1): void {
+    const shouldUseOneZoom = ConfigUtil.getConfigItem("useOneZoom", true);
+    if (shouldUseOneZoom) {
+      for (const tab of this.tabs) {
+        if (tab instanceof ServerTab) {
+          tab.webview
+            .then((webv) => {
+              webv.setZoomFactor(value);
+            })
+            .catch((error) => {
+              console.error("Error syncing zoom factors:", error);
+            });
+        }
+      }
+    }
+  }
 }
 
 window.addEventListener("load", async () => {

app/renderer/js/pages/preference/general-section.ts

@@ -128,7 +128,7 @@ export function initGeneralSection({$root}: GeneralSectionProperties): void {
         </div>
         <div class="setting-row" id="one-zoom-option">
           <div class="setting-description">
-            ${t.__("Use one zoom for all server tabs")}
+            ${t.__("Use one zoom for all organization tabs")}
           </div>
           <div class="setting-control"></div>
         </div>
@@ -279,7 +279,7 @@ export function initGeneralSection({$root}: GeneralSectionProperties): void {
         ConfigUtil.setConfigItem("useOneZoom", newValue);
         useOneZoom();
         if (newValue) {
-          ipcRenderer.send("zoom-other-tabs", 1);
+          ipcRenderer.send("sync-zooms");
         }
       },
     });