make "page zoom" feature disableable

* the feature might potentially cause some windows flickering
devDefiWeb · Nov 2, 2020 · 273e5ff · 273e5ff
1 parent 4b83f82
commit 273e5ff
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 55 deletions.
diff --git a/src/electron-main/api/endpoints-builders/general.ts b/src/electron-main/api/endpoints-builders/general.ts
@@ -13,6 +13,7 @@ import {IPC_MAIN_API_NOTIFICATION$} from "src/electron-main/api/constants";
 import {IPC_MAIN_API_NOTIFICATION_ACTIONS, IpcMainApiEndpoints, IpcMainServiceScan} from "src/shared/api/main";
 import {PACKAGE_GITHUB_PROJECT_URL, PACKAGE_VERSION, UPDATE_CHECK_FETCH_TIMEOUT} from "src/shared/constants";
 import {PLATFORM} from "src/electron-main/constants";
+import {applyZoomFactor} from "src/electron-main/window/util";
 import {curryFunctionMembers} from "src/shared/util";
 import {showAboutBrowserWindow} from "src/electron-main/window/about";
 
@@ -74,9 +75,9 @@ export async function buildEndpoints(
                 return;
             }
 
-            const {window: {maximized}, zoomFactor} = await ctx.config$.pipe(first()).toPromise();
+            const {window: {maximized}} = await ctx.config$.pipe(first()).toPromise();
 
-            browserWindow.webContents.zoomFactor = zoomFactor;
+            await applyZoomFactor(ctx, browserWindow.webContents);
 
             if (maximized) {
                 browserWindow.maximize();

diff --git a/src/electron-main/api/index.ts b/src/electron-main/api/index.ts
@@ -9,6 +9,7 @@ import {DB_DATA_CONTAINER_FIELDS} from "src/shared/model/database";
 import {IPC_MAIN_API, IPC_MAIN_API_NOTIFICATION_ACTIONS, IpcMainApiEndpoints} from "src/shared/api/main";
 import {IPC_MAIN_API_NOTIFICATION$} from "src/electron-main/api/constants";
 import {PACKAGE_NAME, PRODUCT_NAME} from "src/shared/constants";
+import {applyZoomFactor} from "src/electron-main/window/util";
 import {attachFullTextIndexWindow, detachFullTextIndexWindow} from "src/electron-main/window/full-text-search";
 import {buildSettingsAdapter} from "src/electron-main/util";
 import {clearIdleTimeLogOut, setupIdleTimeLogOut} from "src/electron-main/power-monitor";
@@ -159,15 +160,14 @@ export const initApi = async (ctx: Context): Promise<IpcMainApiEndpoints> => {
             }
 
             if (updatedConfig.zoomFactor !== previousConfig.zoomFactor) {
-                [
+                for (const webContents of [
                     ctx.uiContext?.aboutBrowserWindow?.webContents,
                     ctx.uiContext?.browserWindow?.webContents,
-                ].forEach((webContents) => {
-                    if (!webContents) {
-                        return;
+                ]) {
+                    if (webContents) {
+                        await applyZoomFactor(ctx, webContents);
                     }
-                    webContents.zoomFactor = updatedConfig.zoomFactor;
-                });
+                }
             }
 
             return updatedConfig;

diff --git a/src/electron-main/storage-upgrade.ts b/src/electron-main/storage-upgrade.ts
@@ -112,7 +112,7 @@ const CONFIG_UPGRADES: Record<string, (config: Config) => void> = {
             config.indexingBootstrapBufferSize = defaultConfig.indexingBootstrapBufferSize;
         }
 
-        ((): void => {
+        {
             if (typeof config.timeouts.dbBootstrapping !== "number") {
                 config.timeouts.dbBootstrapping = defaultConfig.timeouts.dbBootstrapping;
             }
@@ -123,7 +123,7 @@ const CONFIG_UPGRADES: Record<string, (config: Config) => void> = {
 
             delete config.timeouts.fetching;
             delete config.timeouts.syncing;
-        })();
+        }
     },
     "3.4.0": (config) => {
         if (typeof config.spellCheckLocale === "undefined") {
@@ -162,7 +162,7 @@ const CONFIG_UPGRADES: Record<string, (config: Config) => void> = {
         if (typeof config.disableGpuProcess !== "undefined") {
             delete config.disableGpuProcess;
         }
-        ((): void => {
+        {
             const {updateCheck: defaults} = INITIAL_STORES.config();
             if (typeof config.updateCheck === "undefined") {
                 config.updateCheck = defaults;
@@ -173,7 +173,7 @@ const CONFIG_UPGRADES: Record<string, (config: Config) => void> = {
             if (typeof config.updateCheck.proxy === "undefined") {
                 config.updateCheck.proxy = defaults.proxy;
             }
-        })();
+        }
     },
     "3.7.1": (config) => {
         if (typeof config.jsFlags === "undefined") {
@@ -207,27 +207,26 @@ const CONFIG_UPGRADES: Record<string, (config: Config) => void> = {
         }
     },
     "4.2.0": (config) => {
-        ((): void => {
+        {
             const key: keyof Pick<Config, "zoomFactor"> = "zoomFactor";
             if (typeof config[key] !== "number" || !ZOOM_FACTORS.includes(config[key])) {
                 config[key] = INITIAL_STORES.config()[key];
             }
-        })();
-
-        ((): void => {
+        }
+        {
             const key: keyof Pick<Config, "enableHideControlsHotkey"> = "enableHideControlsHotkey";
             if (typeof config[key] === "undefined") {
                 config[key] = INITIAL_STORES.config()[key];
             }
-        })();
+        }
     },
     "4.2.2": (config) => {
-        ((): void => {
+        {
             const key: keyof Pick<Config["timeouts"], "webViewBlankDOMLoaded"> = "webViewBlankDOMLoaded";
             if (typeof config.timeouts[key] !== "number") {
                 config.timeouts[key] = INITIAL_STORES.config().timeouts[key];
             }
-        })();
+        }
     },
     "4.2.3": (config) => {
         const loggerPrefix = "[config updater 4.2.3]";
@@ -255,7 +254,7 @@ const CONFIG_UPGRADES: Record<string, (config: Config) => void> = {
         trayIconRelatedUpdate({prevKey: "startMinimized", key: "startHidden"});
         trayIconRelatedUpdate({prevKey: "closeToTray", key: "hideOnClose"});
 
-        ((): void => {
+        {
             const key: keyof Pick<Config, "layoutMode"> = "layoutMode";
 
             if (LAYOUT_MODES.some(({value}) => value === config[key])) {
@@ -271,41 +270,41 @@ const CONFIG_UPGRADES: Record<string, (config: Config) => void> = {
                     ? "top"
                     : "left"
                 : INITIAL_STORES.config()[key];
-        })();
+        }
     },
     "4.5.0": (config) => {
-        (() => {
+        {
             const key: keyof Pick<Config, "userAgents"> = "userAgents";
             if (!Array.isArray(config[key])) {
                 config[key] = INITIAL_STORES.config()[key];
             }
-        })();
+        }
     },
     "4.6.0": (config) => {
-        (() => {
+        {
             const timeoutsKey: keyof Pick<Config["timeouts"], "clearSessionStorageData"> = "clearSessionStorageData";
             if (typeof config.timeouts[timeoutsKey] !== "number") {
                 config.timeouts[timeoutsKey] = INITIAL_STORES.config().timeouts[timeoutsKey];
             }
-        })();
+        }
     },
     "4.8.0": (
         _,
         config = _ as Config & { timeouts: { singleAttachmentLoad?: number } },
     ) => {
-        (() => {
+        {
             delete config.timeouts.singleAttachmentLoad;
             const timeoutsKey: keyof Pick<Config["timeouts"], "attachmentLoadAverage"> = "attachmentLoadAverage";
             if (typeof config.timeouts[timeoutsKey] !== "number") {
                 config.timeouts[timeoutsKey] = INITIAL_STORES.config().timeouts[timeoutsKey];
             }
-        })();
-        (() => {
+        }
+        {
             const timeoutsKey: keyof Pick<Config["timeouts"], "fullTextSearch"> = "fullTextSearch";
             if (typeof config.timeouts[timeoutsKey] !== "number") {
                 config.timeouts[timeoutsKey] = INITIAL_STORES.config().timeouts[timeoutsKey];
             }
-        })();
+        }
     },
     "4.9.0": (
         _,
@@ -314,6 +313,12 @@ const CONFIG_UPGRADES: Record<string, (config: Config) => void> = {
         if (typeof config.htmlToText !== "undefined") {
             delete config.htmlToText;
         }
+        {
+            const key: keyof Pick<Config, "zoomFactorDisabled"> = "zoomFactorDisabled";
+            if (typeof config[key] !== "boolean") {
+                config[key] = INITIAL_STORES.config()[key];
+            }
+        }
     },
     // WARN needs to be the last updater
     "100.0.0": (config) => {

diff --git a/src/electron-main/web-contents.ts b/src/electron-main/web-contents.ts
@@ -1,7 +1,6 @@
 import _logger from "electron-log";
 import {BrowserWindow, Menu, MenuItemConstructorOptions, WebPreferences, app, clipboard, screen} from "electron";
 import {equals, omit, pick} from "remeda";
-import {first} from "rxjs/operators";
 import {inspect} from "util";
 import {isWebUri} from "valid-url";
 
@@ -11,6 +10,7 @@ import {IPC_MAIN_API_NOTIFICATION$} from "./api/constants";
 import {IPC_MAIN_API_NOTIFICATION_ACTIONS} from "src/shared/api/main";
 import {PACKAGE_VERSION} from "src/shared/constants";
 import {PLATFORM} from "src/electron-main/constants";
+import {applyZoomFactor} from "src/electron-main/window/util";
 import {buildSpellCheckSettingsMenuItems, buildSpellingSuggestionMenuItems} from "src/electron-main/spell-check/menu";
 import {buildUrlOriginsFailedMsgTester, curryFunctionMembers} from "src/shared/util";
 
@@ -307,7 +307,6 @@ export async function initWebContentsCreatingHandlers(ctx: Context): Promise<voi
             );
         });
 
-        const {zoomFactor} = await ctx.config$.pipe(first()).toPromise();
-        webContents.zoomFactor = zoomFactor;
+        await applyZoomFactor(ctx, webContents);
     });
 }
diff --git a/src/electron-main/window/about.ts b/src/electron-main/window/about.ts
@@ -15,6 +15,7 @@ import {
     WEB_PROTOCOL_SCHEME,
     ZOOM_FACTOR_DEFAULT,
 } from "src/shared/constants";
+import {applyZoomFactor} from "src/electron-main/window/util";
 import {curryFunctionMembers} from "src/shared/util";
 import {injectVendorsAppCssIntoHtmlFile} from "src/electron-main/util";
 
@@ -113,16 +114,21 @@ export async function showAboutBrowserWindow(ctx: Context): Promise<BrowserWindo
         webPreferences: {
             ...DEFAULT_WEB_PREFERENCES,
             preload: ctx.locations.preload.aboutBrowserWindow,
-            ...(zoomFactor !== ZOOM_FACTOR_DEFAULT && {zoomFactor}),
         },
     });
 
-    browserWindow.on("closed", () => {
-        if (!ctx.uiContext) {
-            return;
-        }
-        delete ctx.uiContext.aboutBrowserWindow;
-    });
+    browserWindow
+        .on("ready-to-show", async () => {
+            if (zoomFactor !== ZOOM_FACTOR_DEFAULT) {
+                await applyZoomFactor(ctx, browserWindow.webContents);
+            }
+        })
+        .on("closed", () => {
+            if (!ctx.uiContext) {
+                return;
+            }
+            delete ctx.uiContext.aboutBrowserWindow;
+        });
 
     ctx.uiContext.aboutBrowserWindow = browserWindow;
 

diff --git a/src/electron-main/window/util.ts b/src/electron-main/window/util.ts
@@ -0,0 +1,24 @@
+import _logger from "electron-log";
+import {first} from "rxjs/operators";
+
+import {Context} from "src/electron-main/model";
+import {curryFunctionMembers} from "src/shared/util";
+
+const logger = curryFunctionMembers(_logger, "[src/electron-main/window/util]");
+
+export const applyZoomFactor = async (
+    ctx: DeepReadonly<Context>,
+    webContents: import("electron").WebContents,
+): Promise<boolean> => {
+    const {zoomFactor, zoomFactorDisabled} = await ctx.config$.pipe(first()).toPromise();
+
+    logger.verbose("applyZoomFactor()", JSON.stringify({zoomFactorDisabled}));
+
+    if (zoomFactorDisabled) {
+        return false;
+    }
+
+    webContents.zoomFactor = zoomFactor;
+
+    return true;
+};
diff --git a/src/electron-preload/lib/util.ts b/src/electron-preload/lib/util.ts
@@ -37,7 +37,14 @@ export const applyZoomFactor = (_logger: Logger): void => {
     logger.verbose();
 
     (async () => {
-        const {zoomFactor} = await resolveCachedConfig(logger);
+        const {zoomFactor, zoomFactorDisabled} = await resolveCachedConfig(logger);
+
+        logger.verbose(JSON.stringify({zoomFactorDisabled}));
+
+        if (zoomFactorDisabled) {
+            return;
+        }
+
         const webFrameZoomFactor = webFrame.getZoomFactor();
 
         logger.verbose("config.zoomFactor", JSON.stringify(zoomFactor));

diff --git a/src/shared/model/options.ts b/src/shared/model/options.ts
@@ -42,6 +42,7 @@ export interface Config extends BaseConfig, Partial<StoreModel.StoreEntity> {
     jsFlags: string[]
     localDbMailsListViewMode: "plain" | "conversation"
     userAgents: string[]
+    zoomFactorDisabled: boolean;
     // base
     calendarNotification: boolean
     checkUpdateAndNotify: boolean

diff --git a/src/shared/util.ts b/src/shared/util.ts
@@ -78,6 +78,7 @@ export function initialConfig(): Config {
                 "Mozilla/5.0 CK={} (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko",
                 /* eslint-enable max-len */
             ],
+            zoomFactorDisabled: false,
             // base
             calendarNotification: false,
             checkUpdateAndNotify: false,

diff --git a/src/web/browser-window/app/_options/base-settings.component.html b/src/web/browser-window/app/_options/base-settings.component.html
@@ -250,20 +250,22 @@
                 ></ng-select>
             </div>
         </div>
-        <label class="d-block mb-2">
-            Page zoom
-        </label>
-        <div class="row mb-2">
-            <div class="col-sm-6">
-                <ng-select
-                    [clearable]="false"
-                    [items]="zoomFactors"
-                    bindLabel="title"
-                    bindValue="value"
-                    formControlName="zoomFactor"
-                ></ng-select>
+        <fieldset [ngClass]="{'d-none': controls.zoomFactor.disabled}">
+            <label class="d-block mb-2">
+                Page zoom
+            </label>
+            <div class="row mb-2">
+                <div class="col-sm-6">
+                    <ng-select
+                        [clearable]="false"
+                        [items]="zoomFactors"
+                        bindLabel="title"
+                        bindValue="value"
+                        formControlName="zoomFactor"
+                    ></ng-select>
+                </div>
             </div>
-        </div>
+        </fieldset>
         <label class="d-block mb-2">
             Log level
             <i

diff --git a/src/web/browser-window/app/_options/base-settings.component.ts b/src/web/browser-window/app/_options/base-settings.component.ts
@@ -2,7 +2,7 @@ import {AbstractControl, FormControl, FormGroup, Validators} from "@angular/form
 import {Component, ElementRef, Inject, OnDestroy, OnInit} from "@angular/core";
 import {Observable, Subscription} from "rxjs";
 import {Store, select} from "@ngrx/store";
-import {distinctUntilChanged, distinctUntilKeyChanged, map, take} from "rxjs/operators";
+import {distinctUntilChanged, distinctUntilKeyChanged, first, map} from "rxjs/operators";
 
 import {AccountsSelectors, OptionsSelectors} from "src/web/browser-window/app/store/selectors";
 import {BaseConfig} from "src/shared/model/options";
@@ -108,9 +108,17 @@ export class BaseSettingsComponent implements OnInit, OnDestroy {
         });
 
         this.store.select(OptionsSelectors.CONFIG.base)
-            .pipe(take(1))
+            .pipe(first())
             .subscribe((data) => this.form.patchValue(data));
 
+        this.subscription.add(
+            this.store.pipe(
+                select(OptionsSelectors.CONFIG.zoomFactorDisabled),
+            ).subscribe((zoomFactorDisabled) => {
+                this.controls.zoomFactor[zoomFactorDisabled ? "disable" : "enable"]();
+            }),
+        );
+
         this.subscription.add(
             this.store
                 .select(OptionsSelectors.FEATURED.config)

diff --git a/src/web/browser-window/app/store/selectors/options.ts b/src/web/browser-window/app/store/selectors/options.ts
@@ -30,6 +30,7 @@ export const CONFIG = {
     timeouts: createSelector(FEATURED.config, (config) => config.timeouts),
     localDbMailsListViewMode: createSelector(FEATURED.config, (config) => config.localDbMailsListViewMode),
     doNotRenderNotificationBadgeValue: createSelector(FEATURED.config, (config) => config.doNotRenderNotificationBadgeValue),
+    zoomFactorDisabled: createSelector(FEATURED.config, (config) => config.zoomFactorDisabled),
 } as const;
 
 export const SETTINGS = (