enable "page zoom" feature support, closes #233

vladimiry · Jan 22, 2020 · 5ef5e8d · 5ef5e8d
1 parent e7e8a0b
commit 5ef5e8d
Show file tree

Hide file tree

Showing 15 changed files with 145 additions and 35 deletions.
diff --git a/src/electron-main/api/index.ts b/src/electron-main/api/index.ts
@@ -144,6 +144,18 @@ export const initApi = async (ctx: Context): Promise<IpcMainApiEndpoints> => {
                 await setupIdleTimeLogOut({idleTimeLogOutSec: newConfig.idleTimeLogOutSec});
             }
 
+            if (newConfig.zoomFactor !== savedConfig.zoomFactor) {
+                [
+                    ctx.uiContext?.aboutBrowserWindow?.webContents,
+                    ctx.uiContext?.browserWindow?.webContents,
+                ].forEach((webContents) => {
+                    if (!webContents) {
+                        return;
+                    }
+                    webContents.zoomFactor = newConfig.zoomFactor;
+                });
+            }
+
             return newConfig;
         },
 

diff --git a/src/electron-main/storage-upgrade.ts b/src/electron-main/storage-upgrade.ts
@@ -11,7 +11,13 @@ import {DbAccountPk} from "src/shared/model/database";
 import {INITIAL_STORES} from "./constants";
 import {IPC_MAIN_API_NOTIFICATION$} from "src/electron-main/api/constants";
 import {IPC_MAIN_API_NOTIFICATION_ACTIONS} from "src/shared/api/main";
-import {PACKAGE_VERSION, PROTON_API_ENTRY_PRIMARY_VALUE, PROTON_API_ENTRY_URLS, PROTON_API_ENTRY_VALUE_PREFIX} from "src/shared/constants";
+import {
+    PACKAGE_VERSION,
+    PROTON_API_ENTRY_PRIMARY_VALUE,
+    PROTON_API_ENTRY_URLS,
+    PROTON_API_ENTRY_VALUE_PREFIX,
+    ZOOM_FACTORS,
+} from "src/shared/constants";
 import {curryFunctionMembers, pickBaseConfigProperties} from "src/shared/util";
 
 const logger = curryFunctionMembers(_logger, "[src/electron-main/storage-upgrade]");
@@ -206,6 +212,14 @@ const CONFIG_UPGRADES: Record<string, (config: Config) => void> = {
             delete config.reflectSelectedAccountTitle;
         }
     },
+    "4.2.0": (config) => {
+        (() => {
+            const key = "zoomFactor";
+            if (typeof config[key] !== "number" || !ZOOM_FACTORS.includes(config[key])) {
+                config[key] = INITIAL_STORES.config()[key];
+            }
+        })();
+    },
 };
 
 export function upgradeConfig(config: Config): boolean {

diff --git a/src/electron-main/window/about.ts b/src/electron-main/window/about.ts
@@ -4,7 +4,14 @@ import {BrowserWindow} from "electron";
 
 import {Context} from "src/electron-main/model";
 import {DEFAULT_WEB_PREFERENCES} from "./constants";
-import {PACKAGE_DESCRIPTION, PACKAGE_LICENSE, PACKAGE_VERSION, PRODUCT_NAME, WEB_CHUNK_NAMES} from "src/shared/constants";
+import {
+    PACKAGE_DESCRIPTION,
+    PACKAGE_LICENSE,
+    PACKAGE_VERSION,
+    PRODUCT_NAME,
+    WEB_CHUNK_NAMES,
+    ZOOM_FACTOR_DEFAULT,
+} from "src/shared/constants";
 import {WEB_PROTOCOL_SCHEME} from "src/electron-main/constants";
 import {curryFunctionMembers} from "src/shared/util";
 import {injectVendorsAppCssIntoHtmlFile} from "src/electron-main/util";
@@ -76,16 +83,22 @@ export async function showAboutBrowserWindow(ctx: Context): Promise<BrowserWindo
         return exitingBrowserWindow;
     }
 
+    const {zoomFactor} = await ctx.configStore.readExisting();
+    const windowSizeFactor = zoomFactor > 1 && zoomFactor < 3
+        ? zoomFactor
+        : 1;
     const browserWindow = new BrowserWindow({
         title: `About ${PRODUCT_NAME}`,
         center: true,
         modal: true,
         autoHideMenuBar: true,
-        width: 650,
-        height: 500,
+        show: false,
+        width: 650 * windowSizeFactor,
+        height: 500 * windowSizeFactor,
         webPreferences: {
             ...DEFAULT_WEB_PREFERENCES,
             preload: ctx.locations.preload.aboutBrowserWindow,
+            ...(zoomFactor !== ZOOM_FACTOR_DEFAULT && {zoomFactor}),
         },
     });
 
@@ -98,6 +111,9 @@ export async function showAboutBrowserWindow(ctx: Context): Promise<BrowserWindo
 
     ctx.uiContext.aboutBrowserWindow = browserWindow;
 
+    browserWindow.show();
+    browserWindow.focus();
+
     const {html} = await resolveContent(ctx);
 
     await browserWindow.webContents.loadURL(

diff --git a/src/electron-preload/browser-window/production/index.ts b/src/electron-preload/browser-window/production/index.ts
@@ -1,5 +1,5 @@
+import {applyZoomFactor, buildLoggerBundle} from "src/electron-preload/lib/util";
 import {attachHoveredHrefHighlightElement} from "src/electron-preload/lib/hovered-href-highlighter";
-import {buildLoggerBundle} from "src/electron-preload/lib/util";
 import {exposeElectronStuffToWindow} from "src/electron-preload/lib/electron-exposure";
 import {initSpellCheckProvider} from "src/electron-preload/lib/spell-check";
 import {registerDocumentKeyDownEventListener} from "src/electron-preload/lib/events-handling";
@@ -16,3 +16,5 @@ registerDocumentKeyDownEventListener(
 attachHoveredHrefHighlightElement();
 
 initSpellCheckProvider(LOGGER);
+
+applyZoomFactor(LOGGER);
diff --git a/src/electron-preload/lib/util.ts b/src/electron-preload/lib/util.ts
@@ -1,7 +1,33 @@
+import {webFrame} from "electron"; // tslint:disable-line:no-import-zones
+
+import {IPC_MAIN_API} from "src/shared/api/main";
 import {LOGGER} from "src/electron-preload/lib/electron-exposure/logger";
 import {Logger} from "src/shared/model/common";
 import {curryFunctionMembers} from "src/shared/util";
 
 export function buildLoggerBundle(prefix: string): Logger {
     return curryFunctionMembers(LOGGER, prefix);
 }
+
+// TODO apply "zoomFactor" in main process only, track of https://github.com/electron/electron/issues/10572
+export function applyZoomFactor(_logger: ReturnType<typeof buildLoggerBundle>) {
+    const logger = curryFunctionMembers(_logger, "applyZoomFactor()");
+
+    logger.verbose();
+
+    (async () => {
+        const {zoomFactor} = await IPC_MAIN_API.client({options: {logger}})("readConfig")();
+        const webFrameZoomFactor = webFrame.getZoomFactor();
+
+        logger.verbose("config.zoomFactor", JSON.stringify(zoomFactor));
+        logger.verbose("webFrame.getZoomFactor() (before)", JSON.stringify(webFrameZoomFactor));
+
+        if (webFrameZoomFactor !== zoomFactor) {
+            webFrame.setZoomFactor(zoomFactor);
+            logger.verbose("webFrame.getZoomFactor() (after)", JSON.stringify(webFrame.getZoomFactor()));
+        }
+    })().catch((error) => {
+        console.error(error); // tslint:disable-line:no-console
+        logger.error(error);
+    });
+}
diff --git a/src/electron-preload/webview/primary/configure-provider-app.ts b/src/electron-preload/webview/primary/configure-provider-app.ts
@@ -4,6 +4,7 @@ import {mergeMap, take, tap} from "rxjs/operators";
 import {EDITOR_IFRAME_NOTIFICATION$} from "./notifications";
 import {LOCAL_WEBCLIENT_PROTOCOL_RE_PATTERN, ONE_SECOND_MS} from "src/shared/constants";
 import {WEBVIEW_LOGGERS} from "src/electron-preload/webview/lib/constants";
+import {applyZoomFactor} from "src/electron-preload/lib/util";
 import {curryFunctionMembers, parsePackagedWebClientUrl, resolvePackagedWebClientApp} from "src/shared/util";
 import {disableBrowserNotificationFeature, getLocationHref} from "src/electron-preload/webview/lib/util";
 import {initSpellCheckProvider} from "src/electron-preload/lib/spell-check";
@@ -22,6 +23,7 @@ export function configureProviderApp() {
     logger.info(JSON.stringify({locationHref: getLocationHref()}));
 
     initSpellCheckProvider(logger);
+    applyZoomFactor(logger);
     disableBrowserNotificationFeature(logger);
     registerDocumentKeyDownEventListener(document, logger);
     registerDocumentClickEventListener(document, logger);
@@ -70,6 +72,7 @@ export function configureProviderApp() {
         )
         .subscribe((/*{iframeDocument}*/) => {
             initSpellCheckProvider(logger);
+            applyZoomFactor(logger);
         });
 }
 

diff --git a/src/shared/constants.ts b/src/shared/constants.ts
@@ -136,7 +136,7 @@ export const PROTON_API_ENTRY_RECORDS: ReadonlyDeep<EntryUrlItem[]> = [
 
 export const PROTON_API_ENTRY_URLS = PROTON_API_ENTRY_RECORDS.map(({value: url}) => url);
 
-export const PROTON_API_ENTRY_ORIGINS = PROTON_API_ENTRY_URLS.map((url) => new URL(url).origin);
+// export const PROTON_API_ENTRY_ORIGINS = PROTON_API_ENTRY_URLS.map((url) => new URL(url).origin);
 
 export const WEB_CLIENTS_BLANK_HTML_FILE_NAME = "blank.html";
 
@@ -156,3 +156,34 @@ export const LOG_LEVELS: Readonly<LogLevel[]> = Object.keys(
         silly: null,
     }),
 ) as Readonly<LogLevel[]>;
+
+export const ZOOM_FACTOR_DEFAULT = 1;
+
+export const ZOOM_FACTORS: ReadonlyArray<number> = [
+    0.5,
+    0.55,
+    0.6,
+    0.65,
+    0.7,
+    0.75,
+    0.8,
+    0.85,
+    0.9,
+    0.95,
+    ZOOM_FACTOR_DEFAULT,
+    1.05,
+    1.1,
+    1.15,
+    1.2,
+    1.25,
+    1.3,
+    1.35,
+    1.4,
+    1.45,
+    1.5,
+    1.6,
+    1.7,
+    1.8,
+    1.9,
+    2,
+];
diff --git a/src/shared/model/options.ts b/src/shared/model/options.ts
@@ -52,6 +52,7 @@ export interface Config extends BaseConfig, Partial<StoreModel.StoreEntity> {
     logLevel: LogLevel;
     startMinimized: boolean;
     unreadNotifications: boolean;
+    zoomFactor: number;
 }
 
 export type BaseConfig = Pick<Config,
@@ -68,6 +69,7 @@ export type BaseConfig = Pick<Config,
     | "idleTimeLogOutSec"
     | "logLevel"
     | "startMinimized"
+    | "zoomFactor"
     | "unreadNotifications">;
 
 export interface Settings extends Partial<StoreModel.StoreEntity> {

diff --git a/src/shared/util.ts b/src/shared/util.ts
@@ -11,6 +11,7 @@ import {
     ONE_MINUTE_MS,
     ONE_SECOND_MS,
     PROVIDER_REPOS,
+    ZOOM_FACTOR_DEFAULT,
 } from "src/shared/constants";
 import {DbPatch} from "./api/common";
 import {FsDbAccount, View} from "src/shared/model/database";
@@ -73,6 +74,7 @@ export function initialConfig(): Config {
             logLevel: "error",
             startMinimized: true,
             unreadNotifications: true,
+            zoomFactor: ZOOM_FACTOR_DEFAULT,
         };
     }
 }
@@ -93,6 +95,7 @@ export function pickBaseConfigProperties(
         logLevel,
         startMinimized,
         unreadNotifications,
+        zoomFactor,
     }: Config,
 ): Required<BaseConfig> {
     return {
@@ -110,6 +113,7 @@ export function pickBaseConfigProperties(
         logLevel,
         startMinimized,
         unreadNotifications,
+        zoomFactor,
     };
 }
 

diff --git a/src/web/browser-window/app/_accounts/account-view-abstract.component.ts b/src/web/browser-window/app/_accounts/account-view-abstract.component.ts
@@ -57,15 +57,15 @@ export abstract class AccountViewAbstractComponent extends NgChangesObservableCo
     ngOnInit() {
         this.registerWebViewEventsHandling();
 
-        // this.subscription.add(
-        //     this.filterDomReadyEvent()
-        //         .pipe(take(1))
-        //         .subscribe(({webView}) => {
-        //             if ((BUILD_ENVIRONMENT === "development")) {
-        //                 webView.openDevTools();
-        //             }
-        //         }),
-        // );
+        this.subscription.add(
+            this.filterDomReadyEvent()
+                .pipe(take(1))
+                .subscribe(({webView}) => {
+                    if ((BUILD_ENVIRONMENT === "development")) {
+                        webView.openDevTools();
+                    }
+                }),
+        );
     }
 
     ngOnDestroy() {

diff --git a/src/web/browser-window/app/_accounts/account.component.scss b/src/web/browser-window/app/_accounts/account.component.scss
@@ -9,7 +9,7 @@
     bottom: 0;
     overflow-x: hidden;
     overflow-y: auto;
-    background-color: $gray-200;
+    background-color: $app-color-bg-dark-1;
 
     &:not(.vm-live) {
         &::ng-deep #{$app-prefix}-account-view-primary,

diff --git a/src/web/browser-window/app/_accounts/accounts.component.scss b/src/web/browser-window/app/_accounts/accounts.component.scss
@@ -13,19 +13,6 @@ $webview-border-darkest: darken($app-color-bg-dark-3, 10%);
     bottom: 0;
     background-color: $app-color-bg-dark-1;
 
-    @media (prefers-color-scheme: dark) {
-        background-color: $app-color-bg-dark-3;
-    }
-
-    &::ng-deep #{$app-prefix}-account {
-        border-top: 1px solid $webview-border;
-        // box-shadow: 0 -1px 0 0 $box-shadow-color;
-
-        @media (prefers-color-scheme: dark) {
-            border-top-color: $webview-border-darkest;
-        }
-    }
-
     .wrapper {
         width: 100%;
         height: 100%;
@@ -145,13 +132,8 @@ $webview-border-darkest: darken($app-color-bg-dark-3, 10%);
 
             &::ng-deep {
                 #{$app-prefix}-account {
-                    border-top: 0;
                     // border-left: 1px solid $webview-border;
                     // box-shadow: -1px 0 0 0 $box-shadow-color;
-
-                    @media (prefers-color-scheme: dark) {
-                        border-left-color: $webview-border-darkest;
-                    }
                 }
             }
 

diff --git a/src/web/browser-window/app/_db-view/db-view-entry.component.scss b/src/web/browser-window/app/_db-view/db-view-entry.component.scss
@@ -3,6 +3,7 @@
 :host {
     display: flex;
     height: 100%;
+    background-color: $gray-200;
 
     > #{$app-prefix}-db-view-mail-tab {
         flex-grow: 1;

diff --git a/src/web/browser-window/app/_options/base-settings.component.html b/src/web/browser-window/app/_options/base-settings.component.html
@@ -211,6 +211,20 @@
                 ></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>
+            </div>
+        </div>
         <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
@@ -6,7 +6,7 @@ import {distinctUntilKeyChanged, map, take} from "rxjs/operators";
 
 import {AccountsSelectors, OptionsSelectors} from "src/web/browser-window/app/store/selectors";
 import {BaseConfig} from "src/shared/model/options";
-import {LOG_LEVELS} from "src/shared/constants";
+import {LOG_LEVELS, ZOOM_FACTORS} from "src/shared/constants";
 import {NAVIGATION_ACTIONS, OPTIONS_ACTIONS} from "src/web/browser-window/app/store/actions";
 import {State} from "src/web/browser-window/app/store/reducers/options";
 import {getZoneNameBoundWebLogger} from "src/web/browser-window/util";
@@ -36,6 +36,8 @@ export class BaseSettingsComponent implements OnInit, OnDestroy {
         {title: "30 minutes", valueSec: 60 * 30},
     ];
 
+    zoomFactors = ZOOM_FACTORS.map((zoomLevel) => ({value: zoomLevel, title: `${Math.round(zoomLevel * 100)}%`}));
+
     appearanceBlockCollapsed: boolean = true;
 
     controls: Record<keyof BaseConfig, AbstractControl> = {
@@ -53,6 +55,7 @@ export class BaseSettingsComponent implements OnInit, OnDestroy {
         logLevel: new FormControl(null, Validators.required),
         startMinimized: new FormControl(),
         unreadNotifications: new FormControl(),
+        zoomFactor: new FormControl(),
     };
 
     form = new FormGroup(this.controls);